diff --git a/.changeset/swift-phones-relax.md b/.changeset/swift-phones-relax.md new file mode 100644 index 00000000..afd02953 --- /dev/null +++ b/.changeset/swift-phones-relax.md @@ -0,0 +1,5 @@ +--- +'@tszhong0411/ui': patch +--- + +Add Segment Group component diff --git a/apps/docs/src/app/ui/components/segment-group.mdx b/apps/docs/src/app/ui/components/segment-group.mdx new file mode 100644 index 00000000..2676bd8d --- /dev/null +++ b/apps/docs/src/app/ui/components/segment-group.mdx @@ -0,0 +1,31 @@ +--- +title: Segment Group +description: Organizes and navigates between sections in a view. +link: + doc: https://ark-ui.com/react/docs/components/segment-group + api: https://ark-ui.com/react/docs/components/segment-group#api-reference +--- + + + +## Usage + +```tsx +import { SegmentGroup, SegmentGroupItem } from '@tszhong0411/ui' +``` + +```tsx + + Next.js + +``` + +## Examples + +### Disabled + + + +### Vertical + + diff --git a/apps/docs/src/components/demos/segment-group/disabled.tsx b/apps/docs/src/components/demos/segment-group/disabled.tsx new file mode 100644 index 00000000..ffd3c75e --- /dev/null +++ b/apps/docs/src/components/demos/segment-group/disabled.tsx @@ -0,0 +1,26 @@ +import { SegmentGroup, SegmentGroupItem } from '@tszhong0411/ui' + +const frameworks = [ + { label: 'React', value: 'react' }, + { label: 'Solid', value: 'solid' }, + { label: 'Svelte', value: 'svelte', disabled: true }, + { label: 'Vue', value: 'vue' } +] + +const SegmentGroupDisabledDemo = () => { + return ( + + {frameworks.map((framework) => ( + + {framework.label} + + ))} + + ) +} + +export default SegmentGroupDisabledDemo diff --git a/apps/docs/src/components/demos/segment-group/segment-group.tsx b/apps/docs/src/components/demos/segment-group/segment-group.tsx new file mode 100644 index 00000000..0dfe38aa --- /dev/null +++ b/apps/docs/src/components/demos/segment-group/segment-group.tsx @@ -0,0 +1,22 @@ +import { SegmentGroup, SegmentGroupItem } from '@tszhong0411/ui' + +const frameworks = [ + { label: 'React', value: 'react' }, + { label: 'Solid', value: 'solid' }, + { label: 'Svelte', value: 'svelte' }, + { label: 'Vue', value: 'vue' } +] + +const SegmentGroupDemo = () => { + return ( + + {frameworks.map((framework) => ( + + {framework.label} + + ))} + + ) +} + +export default SegmentGroupDemo diff --git a/apps/docs/src/components/demos/segment-group/vertical.tsx b/apps/docs/src/components/demos/segment-group/vertical.tsx new file mode 100644 index 00000000..129f052e --- /dev/null +++ b/apps/docs/src/components/demos/segment-group/vertical.tsx @@ -0,0 +1,22 @@ +import { SegmentGroup, SegmentGroupItem } from '@tszhong0411/ui' + +const frameworks = [ + { label: 'React', value: 'react' }, + { label: 'Solid', value: 'solid' }, + { label: 'Svelte', value: 'svelte' }, + { label: 'Vue', value: 'vue' } +] + +const SegmentGroupVerticalDemo = () => { + return ( + + {frameworks.map((framework) => ( + + {framework.label} + + ))} + + ) +} + +export default SegmentGroupVerticalDemo diff --git a/apps/docs/src/config/links.ts b/apps/docs/src/config/links.ts index 83b1a156..bf06c846 100644 --- a/apps/docs/src/config/links.ts +++ b/apps/docs/src/config/links.ts @@ -166,6 +166,10 @@ const COMPONENT_LINKS = [ href: '/ui/components/scroll-area', text: 'Scroll Area' }, + { + href: '/ui/components/segment-group', + text: 'Segment Group' + }, { href: '/ui/components/select', text: 'Select' diff --git a/package.json b/package.json index bf412d8d..f0621ace 100644 --- a/package.json +++ b/package.json @@ -33,7 +33,7 @@ "preinstall": "npx --yes only-allow pnpm", "lint": "turbo lint && eslint . --max-warnings 0", "lint:fix": "turbo lint:fix && eslint --fix . && pnpm format:write && tsx scripts/fix-cspell.ts", - "prepare": "simple-git-hooks", + "prepare": "simple-git-hooks && pnpm build:packages", "release": "changeset publish", "test:e2e": "turbo test:e2e", "test:e2e:inspector": "turbo test:e2e:inspector", @@ -79,7 +79,7 @@ "prettier": "^3.4.2", "simple-git-hooks": "^2.11.1", "ts-morph": "^25.0.0", - "tsup": "8.3.6", + "tsup": "8.3.0", "tsx": "^4.19.2", "turbo": "^2.3.4", "typescript": "5.7.3", diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts index 05c43f02..597570a9 100644 --- a/packages/ui/src/index.ts +++ b/packages/ui/src/index.ts @@ -39,6 +39,7 @@ export * from './progress' export * from './radio-group' export * from './resizable' export * from './scroll-area' +export * from './segment-group' export * from './select' export * from './separator' export * from './sheet' @@ -55,5 +56,4 @@ export * from './toggle-group' export * from './tooltip' export * from './tree-view' export * from './visually-hidden' -// Ark UI export { createListCollection, createTreeCollection } from '@ark-ui/react' diff --git a/packages/ui/src/segment-group.tsx b/packages/ui/src/segment-group.tsx new file mode 100644 index 00000000..b3618b75 --- /dev/null +++ b/packages/ui/src/segment-group.tsx @@ -0,0 +1,67 @@ +import { SegmentGroup as SegmentGroupPrimitive } from '@ark-ui/react' +import { cn } from '@tszhong0411/utils' + +type SegmentGroupProps = React.ComponentProps + +const SegmentGroup = (props: SegmentGroupProps) => { + const { className, children, orientation = 'horizontal', ...rest } = props + + return ( + + + {children} + + ) +} + +type SegmentGroupIndicatorProps = React.ComponentProps + +const SegmentGroupIndicator = (props: SegmentGroupIndicatorProps) => { + const { className, ...rest } = props + + return ( + + ) +} + +type SegmentGroupItemProps = React.ComponentProps + +const SegmentGroupItem = (props: SegmentGroupItemProps) => { + const { className, children, ...rest } = props + + return ( + + {children} + + + + ) +} + +export { SegmentGroup, SegmentGroupIndicator, SegmentGroupItem } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index b4893cd7..ef807401 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -93,8 +93,8 @@ importers: specifier: ^25.0.0 version: 25.0.0 tsup: - specifier: 8.3.6 - version: 8.3.6(jiti@2.4.2)(postcss@8.5.1)(tsx@4.19.2)(typescript@5.7.3)(yaml@2.7.0) + specifier: 8.3.0 + version: 8.3.0(jiti@2.4.2)(postcss@8.5.1)(tsx@4.19.2)(typescript@5.7.3)(yaml@2.7.0) tsx: specifier: ^4.19.2 version: 4.19.2 @@ -130,7 +130,7 @@ importers: version: 0.7.1 geist: specifier: ^1.3.1 - version: 1.3.1(next@15.1.3(@opentelemetry/api@1.9.0)(@playwright/test@1.50.0)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)) + version: 1.3.1(next@15.1.3(@babel/core@7.26.0)(@opentelemetry/api@1.9.0)(@playwright/test@1.50.0)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)) hast-util-to-jsx-runtime: specifier: ^2.3.2 version: 2.3.2 @@ -139,7 +139,7 @@ importers: version: 0.469.0(react@19.0.0) next: specifier: ^15.1.3 - version: 15.1.3(@opentelemetry/api@1.9.0)(@playwright/test@1.50.0)(react-dom@19.0.0(react@19.0.0))(react@19.0.0) + version: 15.1.3(@babel/core@7.26.0)(@opentelemetry/api@1.9.0)(@playwright/test@1.50.0)(react-dom@19.0.0(react@19.0.0))(react@19.0.0) next-themes: specifier: ^0.4.4 version: 0.4.4(react-dom@19.0.0(react@19.0.0))(react@19.0.0) @@ -595,7 +595,7 @@ importers: dependencies: next-intl: specifier: ^3.26.3 - version: 3.26.3(next@15.1.3(@opentelemetry/api@1.9.0)(@playwright/test@1.50.0)(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(react@19.0.0) + version: 3.26.3(next@15.1.3(@babel/core@7.26.0)(@opentelemetry/api@1.9.0)(@playwright/test@1.50.0)(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(react@19.0.0) devDependencies: '@tszhong0411/eslint-config': specifier: workspace:* @@ -608,7 +608,7 @@ importers: version: 19.0.2 next: specifier: ^15.1.3 - version: 15.1.3(@opentelemetry/api@1.9.0)(@playwright/test@1.50.0)(react-dom@19.0.0(react@19.0.0))(react@19.0.0) + version: 15.1.3(@babel/core@7.26.0)(@opentelemetry/api@1.9.0)(@playwright/test@1.50.0)(react-dom@19.0.0(react@19.0.0))(react@19.0.0) packages/kv: dependencies: @@ -724,7 +724,7 @@ importers: version: 19.0.3(@types/react@19.0.2) next: specifier: ^15.1.3 - version: 15.1.3(@opentelemetry/api@1.9.0)(@playwright/test@1.50.0)(react-dom@19.0.0(react@19.0.0))(react@19.0.0) + version: 15.1.3(@babel/core@7.26.0)(@opentelemetry/api@1.9.0)(@playwright/test@1.50.0)(react-dom@19.0.0(react@19.0.0))(react@19.0.0) shiki: specifier: ^1.24.4 version: 1.24.4 @@ -799,7 +799,7 @@ importers: dependencies: next: specifier: ^15.1.3 - version: 15.1.3(@opentelemetry/api@1.9.0)(@playwright/test@1.50.0)(react-dom@19.0.0(react@19.0.0))(react@19.0.0) + version: 15.1.3(@babel/core@7.26.0)(@opentelemetry/api@1.9.0)(@playwright/test@1.50.0)(react-dom@19.0.0(react@19.0.0))(react@19.0.0) typescript: specifier: 5.x version: 5.5.4 @@ -950,7 +950,7 @@ importers: version: 19.0.3(@types/react@19.0.2) next: specifier: ^15.1.3 - version: 15.1.3(@opentelemetry/api@1.9.0)(@playwright/test@1.50.0)(react-dom@19.0.0(react@19.0.0))(react@19.0.0) + version: 15.1.3(@babel/core@7.26.0)(@opentelemetry/api@1.9.0)(@playwright/test@1.50.0)(react-dom@19.0.0(react@19.0.0))(react@19.0.0) react: specifier: 19.0.0 version: 19.0.0 @@ -11058,8 +11058,8 @@ packages: tslib@2.8.1: resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==} - tsup@8.3.6: - resolution: {integrity: sha512-XkVtlDV/58S9Ye0JxUUTcrQk4S+EqlOHKzg6Roa62rdjL1nGWNUstG0xgI4vanHdfIpjP448J8vlN0oK6XOJ5g==} + tsup@8.3.0: + resolution: {integrity: sha512-ALscEeyS03IomcuNdFdc0YWGVIkwH1Ws7nfTbAPuoILvEV2hpGQAY72LIOjglGo4ShWpZfpBqP/jpQVCzqYQag==} engines: {node: '>=18'} hasBin: true peerDependencies: @@ -17293,6 +17293,11 @@ snapshots: dependencies: run-applescript: 7.0.0 + bundle-require@5.1.0(esbuild@0.23.1): + dependencies: + esbuild: 0.23.1 + load-tsconfig: 0.2.5 + bundle-require@5.1.0(esbuild@0.24.2): dependencies: esbuild: 0.24.2 @@ -19321,10 +19326,6 @@ snapshots: dependencies: next: 15.1.3(@babel/core@7.26.0)(@opentelemetry/api@1.9.0)(@playwright/test@1.50.0)(react-dom@19.0.0(react@19.0.0))(react@19.0.0) - geist@1.3.1(next@15.1.3(@opentelemetry/api@1.9.0)(@playwright/test@1.50.0)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)): - dependencies: - next: 15.1.3(@opentelemetry/api@1.9.0)(@playwright/test@1.50.0)(react-dom@19.0.0(react@19.0.0))(react@19.0.0) - gensequence@7.0.0: {} gensync@1.0.0-beta.2: {} @@ -21297,14 +21298,6 @@ snapshots: react: 19.0.0 use-intl: 3.26.3(react@19.0.0) - next-intl@3.26.3(next@15.1.3(@opentelemetry/api@1.9.0)(@playwright/test@1.50.0)(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(react@19.0.0): - dependencies: - '@formatjs/intl-localematcher': 0.5.9 - negotiator: 1.0.0 - next: 15.1.3(@opentelemetry/api@1.9.0)(@playwright/test@1.50.0)(react-dom@19.0.0(react@19.0.0))(react@19.0.0) - react: 19.0.0 - use-intl: 3.26.3(react@19.0.0) - next-themes@0.4.4(react-dom@19.0.0(react@19.0.0))(react@19.0.0): dependencies: react: 19.0.0 @@ -21364,33 +21357,6 @@ snapshots: - '@babel/core' - babel-plugin-macros - next@15.1.3(@opentelemetry/api@1.9.0)(@playwright/test@1.50.0)(react-dom@19.0.0(react@19.0.0))(react@19.0.0): - dependencies: - '@next/env': 15.1.3 - '@swc/counter': 0.1.3 - '@swc/helpers': 0.5.15 - busboy: 1.6.0 - caniuse-lite: 1.0.30001690 - postcss: 8.4.31 - react: 19.0.0 - react-dom: 19.0.0(react@19.0.0) - styled-jsx: 5.1.6(@babel/core@7.24.5)(react@19.0.0) - optionalDependencies: - '@next/swc-darwin-arm64': 15.1.3 - '@next/swc-darwin-x64': 15.1.3 - '@next/swc-linux-arm64-gnu': 15.1.3 - '@next/swc-linux-arm64-musl': 15.1.3 - '@next/swc-linux-x64-gnu': 15.1.3 - '@next/swc-linux-x64-musl': 15.1.3 - '@next/swc-win32-arm64-msvc': 15.1.3 - '@next/swc-win32-x64-msvc': 15.1.3 - '@opentelemetry/api': 1.9.0 - '@playwright/test': 1.50.0 - sharp: 0.33.5 - transitivePeerDependencies: - - '@babel/core' - - babel-plugin-macros - no-case@2.3.2: dependencies: lower-case: 1.1.4 @@ -23223,7 +23189,7 @@ snapshots: sucrase@3.35.0: dependencies: - '@jridgewell/gen-mapping': 0.3.5 + '@jridgewell/gen-mapping': 0.3.8 commander: 4.1.1 glob: 10.4.5 lines-and-columns: 1.2.4 @@ -23519,14 +23485,15 @@ snapshots: tslib@2.8.1: {} - tsup@8.3.6(jiti@2.4.2)(postcss@8.5.1)(tsx@4.19.2)(typescript@5.7.3)(yaml@2.7.0): + tsup@8.3.0(jiti@2.4.2)(postcss@8.5.1)(tsx@4.19.2)(typescript@5.7.3)(yaml@2.7.0): dependencies: - bundle-require: 5.1.0(esbuild@0.24.2) + bundle-require: 5.1.0(esbuild@0.23.1) cac: 6.7.14 - chokidar: 4.0.3 + chokidar: 3.6.0 consola: 3.4.0 debug: 4.4.0 - esbuild: 0.24.2 + esbuild: 0.23.1 + execa: 5.1.1 joycon: 3.1.1 picocolors: 1.1.1 postcss-load-config: 6.0.1(jiti@2.4.2)(postcss@8.5.1)(tsx@4.19.2)(yaml@2.7.0) @@ -23534,7 +23501,6 @@ snapshots: rollup: 4.28.1 source-map: 0.8.0-beta.0 sucrase: 3.35.0 - tinyexec: 0.3.2 tinyglobby: 0.2.10 tree-kill: 1.2.2 optionalDependencies: