Merge pull request #300 from softnetics/supakorn/fix/components

feat: UI component improvement.

Author: SupakornNetsuwan

.changeset/khaki-mayflies-fly.md

@@ -0,0 +1,5 @@
+---
+"@example/ui-playground": patch
+---
+
+feat: UI component improvement focus on `tanstack-table` and `pagination`.

.vscode/settings.json

@@ -45,7 +45,7 @@
   "typescript.enablePromptUseWorkspaceTsdk": true,
   "typescript.tsdk": "node_modules/typescript/lib",
   "tailwindCSS.experimental.configFile": {
-    "packages/react/src/react/styles/tailwind.css": "packages/react/**",
+    "legacies/react/src/react/styles/tailwind.css": ["legacies/react/**", "packages/ui/**"],
     "examples/erp/src/app/(admin)/admin/tailwind.css": "examples/erp/src/app/(admin)/admin/**",
     "examples/ui-playground/src/styles/tailwind.css": "examples/ui-playground/**"
   },

examples/ui-playground/package.json

@@ -16,6 +16,7 @@
     "@genseki/react": "workspace:^",
     "@genseki/react-query": "workspace:^",
     "@genseki/rest": "workspace:^",
+    "@genseki/ui": "workspace:^",
     "@intentui/icons": "^1.10.31",
     "@phosphor-icons/react": "^2.1.8",
     "@tailwindcss/postcss": "^4.1.7",

examples/ui-playground/src/app/playground/shadcn/button-section.tsx

@@ -15,13 +15,7 @@ import {
   SortDescendingIcon,
 } from '@phosphor-icons/react'
 
-import {
-  Button,
-  ButtonGroup,
-  ButtonGroupSeparator,
-  ButtonGroupText,
-  Typography,
-} from '@genseki/react/v2'
+import { Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, Typography } from '@genseki/ui'
 
 import { PlaygroundCard } from '~/src/components/card'
 
@@ -162,11 +156,35 @@ function LoadingButton() {
 function ButtonGroupBasic() {
   return (
     <ButtonGroup>
-      <Button variant="outline">One</Button>
-      <ButtonGroupSeparator />
-      <Button variant="outline">Two</Button>
+      <Button variant="outline" className="">
+        One
+      </Button>
+      <Button variant="outline" className="">
+        Two
+      </Button>
+
+      <Button variant="outline" className="">
+        Three
+      </Button>
+    </ButtonGroup>
+  )
+}
+
+// Button Group - Basic (primary)
+function ButtonGroupBasicPrimary() {
+  return (
+    <ButtonGroup>
+      <Button variant="primary" className="">
+        One
+      </Button>
       <ButtonGroupSeparator />
-      <Button variant="outline">Three</Button>
+      <Button variant="primary" className="">
+        Two
+      </Button>
+
+      <Button variant="primary" className="">
+        Three
+      </Button>
     </ButtonGroup>
   )
 }
@@ -334,6 +352,19 @@ export function ButtonSection() {
         </div>
       </PlaygroundCard>
 
+      <PlaygroundCard
+        title="Button Group - Basic (Primary & Separator)"
+        categoryTitle="Composition"
+      >
+        <Typography type="body" className="text-muted-foreground mb-4">
+          A simple button group with connected buttons in primary variants and button group
+          separator.
+        </Typography>
+        <div className="p-4 bg-secondary w-full rounded-lg">
+          <ButtonGroupBasicPrimary />
+        </div>
+      </PlaygroundCard>
+
       <PlaygroundCard title="Button Group - With Separators" categoryTitle="Composition">
         <Typography type="body" className="text-muted-foreground mb-4">
           Button groups with separators between buttons for visual distinction.

examples/ui-playground/src/app/playground/shadcn/checkbox-section.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 
 import { CheckIcon, MinusIcon, XIcon } from '@phosphor-icons/react'
 
-import { Checkbox, Label, Typography } from '@genseki/react/v2'
+import { Checkbox, Label, Typography } from '@genseki/ui'
 
 import { PlaygroundCard } from '~/src/components/card'
 

examples/ui-playground/src/app/playground/shadcn/collapsible-section.tsx

@@ -11,8 +11,8 @@ import {
   VideoIcon,
 } from '@phosphor-icons/react'
 
-import { Button, Typography } from '@genseki/react/v2'
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@genseki/react/v2'
+import { Button, Typography } from '@genseki/ui'
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@genseki/ui'
 
 import { PlaygroundCard } from '~/src/components/card'
 

examples/ui-playground/src/app/playground/shadcn/collection-card-section.tsx

@@ -8,7 +8,7 @@ import {
   CollectionCardIcon,
   CollectionCardTitle,
   Typography,
-} from '@genseki/react/v2'
+} from '@genseki/ui'
 
 export function CollectionCardSection() {
   return (

examples/ui-playground/src/app/playground/shadcn/color-picker-section.tsx

@@ -9,7 +9,7 @@ import {
   PopoverTrigger,
   Typography,
   useColorPicker,
-} from '@genseki/react/v2'
+} from '@genseki/ui'
 import {
   ColorPicker,
   ColorPickerAlpha,
@@ -23,7 +23,7 @@ import {
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from '@genseki/react/v2'
+} from '@genseki/ui'
 
 import { InformationCard, PlaygroundCard } from '~/src/components/card'
 

examples/ui-playground/src/app/playground/shadcn/combobox-section.tsx

@@ -18,7 +18,7 @@ import {
   InputGroupControl,
   InputGroupText,
   Typography,
-} from '@genseki/react/v2'
+} from '@genseki/ui'
 
 import { PlaygroundCard } from '~/src/components/card'
 

examples/ui-playground/src/app/playground/shadcn/date-picker-section.tsx

@@ -25,7 +25,7 @@ import {
   PopoverContent,
   PopoverTrigger,
   Typography,
-} from '@genseki/react/v2'
+} from '@genseki/ui'
 
 import { InformationCard, PlaygroundCard } from '../../../components/card'