From fa3f9aeec7dfb4559cf129b0afdb0c00f82b3661 Mon Sep 17 00:00:00 2001 From: jettapat Date: Tue, 19 May 2026 14:22:01 +0700 Subject: [PATCH 1/8] style: change disable token --- packages/ui/src/components/primitives/calendar.tsx | 6 +----- packages/ui/src/components/primitives/color-picker.tsx | 4 ++-- packages/ui/src/components/primitives/command.tsx | 4 ++-- packages/ui/src/components/primitives/input-group.tsx | 4 ++++ packages/ui/src/components/primitives/input.tsx | 2 +- packages/ui/src/components/primitives/radio-group.tsx | 2 +- packages/ui/src/components/primitives/select.tsx | 2 +- packages/ui/src/components/primitives/slider.tsx | 4 ++-- packages/ui/src/components/primitives/switch.tsx | 2 +- packages/ui/src/components/primitives/tabs.tsx | 2 +- packages/ui/src/components/primitives/textarea.tsx | 2 +- packages/ui/src/components/primitives/toggle.tsx | 2 +- 12 files changed, 18 insertions(+), 18 deletions(-) diff --git a/packages/ui/src/components/primitives/calendar.tsx b/packages/ui/src/components/primitives/calendar.tsx index 164adc39..c69de8cb 100644 --- a/packages/ui/src/components/primitives/calendar.tsx +++ b/packages/ui/src/components/primitives/calendar.tsx @@ -137,11 +137,7 @@ function Calendar({ defaultClassNames.outside, classNames?.outside ), - disabled: cn( - 'text-muted-foreground opacity-50', - defaultClassNames.disabled, - classNames?.disabled - ), + disabled: cn('text-text-disabled', defaultClassNames.disabled, classNames?.disabled), hidden: cn('invisible', defaultClassNames.hidden, classNames?.hidden), }} components={{ diff --git a/packages/ui/src/components/primitives/color-picker.tsx b/packages/ui/src/components/primitives/color-picker.tsx index f269fc02..57991839 100644 --- a/packages/ui/src/components/primitives/color-picker.tsx +++ b/packages/ui/src/components/primitives/color-picker.tsx @@ -214,7 +214,7 @@ export const ColorPickerHue = ({ className, ...props }: ColorPickerHueProps) => - + ) } @@ -241,7 +241,7 @@ export const ColorPickerAlpha = ({ className, ...props }: ColorPickerAlphaProps)
- + ) } diff --git a/packages/ui/src/components/primitives/command.tsx b/packages/ui/src/components/primitives/command.tsx index 0bff1a00..93f38b20 100644 --- a/packages/ui/src/components/primitives/command.tsx +++ b/packages/ui/src/components/primitives/command.tsx @@ -63,7 +63,7 @@ function CommandInput({ textarea]:h-auto', // Variants based on alignment. diff --git a/packages/ui/src/components/primitives/input.tsx b/packages/ui/src/components/primitives/input.tsx index 1e3ee3b6..a726b74d 100644 --- a/packages/ui/src/components/primitives/input.tsx +++ b/packages/ui/src/components/primitives/input.tsx @@ -12,7 +12,7 @@ function Input({ type={type} className={cn( 'bg-background file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-18 w-full min-w-0 rounded-md border px-6 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:bg-transparent file:rounded-sm file:px-4 file:h-full file:border-0 file:text-sm file:font-medium', - 'disabled:pointer-events-none disabled:cursor-not-allowed disabled:text-text-disabled disabled:border-border-primary disabled:placeholder:text-text-disabled', + 'disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-surface-disabled disabled:text-text-disabled disabled:border-border-disabled disabled:placeholder:text-text-disabled', 'focus-visible:border-ring focus-visible:ring-ring focus-visible:ring-[2px]', 'aria-invalid:ring-destructive dark:aria-invalid:ring-destructive aria-invalid:border-destructive', className diff --git a/packages/ui/src/components/primitives/radio-group.tsx b/packages/ui/src/components/primitives/radio-group.tsx index 15ae5d07..8f933870 100644 --- a/packages/ui/src/components/primitives/radio-group.tsx +++ b/packages/ui/src/components/primitives/radio-group.tsx @@ -28,7 +28,7 @@ function RadioGroupItem({ ))} diff --git a/packages/ui/src/components/primitives/switch.tsx b/packages/ui/src/components/primitives/switch.tsx index dbf50d63..fe6e819d 100644 --- a/packages/ui/src/components/primitives/switch.tsx +++ b/packages/ui/src/components/primitives/switch.tsx @@ -11,7 +11,7 @@ function Switch({ className, ...props }: React.ComponentProps }>( ) const tabVariants = cva<{ variant: Record }>( - "inline-flex flex-1 items-center justify-center text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-8", + "inline-flex flex-1 items-center justify-center text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:text-text-disabled [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-8", { variants: { variant: { diff --git a/packages/ui/src/components/primitives/textarea.tsx b/packages/ui/src/components/primitives/textarea.tsx index e9188a94..1d07a17f 100644 --- a/packages/ui/src/components/primitives/textarea.tsx +++ b/packages/ui/src/components/primitives/textarea.tsx @@ -8,7 +8,7 @@ function Textarea({ className, ...props }: React.ComponentProps<'textarea'>) { data-slot="textarea" className={cn( 'border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring aria-invalid:ring-destructive dark:aria-invalid:ring-destructive aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-32 w-full rounded-md border bg-transparent px-7 py-6 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[2px]', - 'disabled:pointer-events-none disabled::cursor-not-allowed disabled:text-text-disabled disabled:border-border-primary disabled:placeholder:text-text-disabled', + 'disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-surface-disabled disabled:text-text-disabled disabled:border-border-disabled disabled:placeholder:text-text-disabled', className )} {...props} diff --git a/packages/ui/src/components/primitives/toggle.tsx b/packages/ui/src/components/primitives/toggle.tsx index d19cc3ee..2250911e 100644 --- a/packages/ui/src/components/primitives/toggle.tsx +++ b/packages/ui/src/components/primitives/toggle.tsx @@ -8,7 +8,7 @@ import { cva, type VariantProps } from 'class-variance-authority' import { cn } from '../../utils/cn' const toggleVariants = cva( - "inline-flex items-center justify-center gap-4 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-8 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[2px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive aria-invalid:border-destructive whitespace-nowrap", + "inline-flex items-center justify-center gap-4 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:bg-surface-disabled disabled:text-text-disabled data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-8 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[2px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive aria-invalid:border-destructive whitespace-nowrap", { variants: { variant: { From 39210a92eecf6cfba37b05144923b4cd1af443f5 Mon Sep 17 00:00:00 2001 From: jettapat Date: Tue, 19 May 2026 14:25:26 +0700 Subject: [PATCH 2/8] docs: update changeset --- .changeset/huge-friends-flash.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/huge-friends-flash.md diff --git a/.changeset/huge-friends-flash.md b/.changeset/huge-friends-flash.md new file mode 100644 index 00000000..93470b96 --- /dev/null +++ b/.changeset/huge-friends-flash.md @@ -0,0 +1,5 @@ +--- +'@genseki/ui': patch +--- + +[FIX] Consistent disable state token UI From cc089299f3171ae23149b29a00580b4b161fdd59 Mon Sep 17 00:00:00 2001 From: jettapat Date: Tue, 19 May 2026 14:37:17 +0700 Subject: [PATCH 3/8] fix(input-group): match button height for input-wrapped groups Outer InputGroup measured 74px (Input h-18 + wrapper border) while sibling Buttons measured 72px (h-18 with border-box). This 2px gap was visible in toolbars that placed SearchInput next to a Button (e.g. Filter). Force the outer wrapper to h-18 only when it directly contains an , and stretch InputGroupControl to h-full so the input fits the bordered box. Textarea and contenteditable children keep h-auto so Textarea and RichTextEditor heights aren't clipped. --- packages/ui/src/components/primitives/input-group.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/ui/src/components/primitives/input-group.tsx b/packages/ui/src/components/primitives/input-group.tsx index 802ef1ce..0811ce66 100644 --- a/packages/ui/src/components/primitives/input-group.tsx +++ b/packages/ui/src/components/primitives/input-group.tsx @@ -36,6 +36,7 @@ function InputGroup({ 'aria-disabled:bg-surface-primary-disabled aria-disabled:border-border-disabled aria-disabled:cursor-not-allowed', 'aria-disabled:[&_[data-slot=input-group-control]]:!bg-transparent aria-disabled:[&_[data-slot=input-group-control]]:!text-text-disabled', 'h-auto min-w-0 has-[>textarea]:h-auto', + 'has-[>input]:h-18 has-[>input]:[&_[data-slot=input-group-control]]:h-full', // Variants based on alignment. 'has-[>[data-align=inline-start]]:[&>input]:pl-4', From e82a1d7fd80aa8fe5554b3bee60087b95e8d4144 Mon Sep 17 00:00:00 2001 From: jettapat Date: Tue, 19 May 2026 14:42:25 +0700 Subject: [PATCH 4/8] fix(filter): keep focus ring on trigger while popover is open and align popover end - Add data-[state=open]:border-ring / ring-ring / ring-[2px] on the Filter trigger so the brand-colored ring stays visible when the popover is open (focus has moved to the content) - Set PopoverContent align="end" so the 600px-wide popover's right edge aligns with the trigger's right edge instead of extending past the toolbar --- packages/ui/src/components/primitives/filter.tsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/packages/ui/src/components/primitives/filter.tsx b/packages/ui/src/components/primitives/filter.tsx index 336b882c..6e0457ae 100644 --- a/packages/ui/src/components/primitives/filter.tsx +++ b/packages/ui/src/components/primitives/filter.tsx @@ -93,13 +93,19 @@ export function Filter({ options, onChange, classNames return ( - - +
Date: Tue, 19 May 2026 14:46:53 +0700 Subject: [PATCH 5/8] fix(filter): highlight active column in left list Add aria-selected and a grey background on the column item that matches selectedColumn so users can see which column's values are currently shown in the right panel. --- packages/ui/src/components/primitives/filter.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/ui/src/components/primitives/filter.tsx b/packages/ui/src/components/primitives/filter.tsx index 6e0457ae..30c69644 100644 --- a/packages/ui/src/components/primitives/filter.tsx +++ b/packages/ui/src/components/primitives/filter.tsx @@ -121,7 +121,11 @@ export function Filter({ options, onChange, classNames {columns.map((column) => (
  • setSelectedColumn(column)} > From 5160c6cf0daab27d456ddf652195e87df311ef39 Mon Sep 17 00:00:00 2001 From: jettapat Date: Tue, 19 May 2026 14:48:04 +0700 Subject: [PATCH 6/8] fix(filter): disable Reset All when no filter is selected MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Compute internalTotalSelected from in-progress options state and pass it as the Reset All button's disabled flag — no point resetting when nothing is selected. --- packages/ui/src/components/primitives/filter.tsx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/packages/ui/src/components/primitives/filter.tsx b/packages/ui/src/components/primitives/filter.tsx index 30c69644..931e7887 100644 --- a/packages/ui/src/components/primitives/filter.tsx +++ b/packages/ui/src/components/primitives/filter.tsx @@ -89,6 +89,10 @@ export function Filter({ options, onChange, classNames (acc, [_, options]) => acc + options.filter((option) => option.isSelected).length, 0 ) + const internalTotalSelected = Object.values(internalOptions).reduce( + (acc, opts) => acc + opts.filter((option) => option.isSelected).length, + 0 + ) return ( @@ -165,7 +169,11 @@ export function Filter({ options, onChange, classNames
    • - From 3949176be718f106c577f0d998d1fca019e2d980 Mon Sep 17 00:00:00 2001 From: jettapat Date: Tue, 19 May 2026 15:06:03 +0700 Subject: [PATCH 7/8] chore: format --- packages/ui/src/components/primitives/filter.tsx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/packages/ui/src/components/primitives/filter.tsx b/packages/ui/src/components/primitives/filter.tsx index 931e7887..96dc1a35 100644 --- a/packages/ui/src/components/primitives/filter.tsx +++ b/packages/ui/src/components/primitives/filter.tsx @@ -169,11 +169,7 @@ export function Filter({ options, onChange, classNames
    - From 2240d538cfa4da2b989f67d567096f2059444f8b Mon Sep 17 00:00:00 2001 From: jettapat Date: Tue, 19 May 2026 15:07:52 +0700 Subject: [PATCH 8/8] docs: expand changeset to cover branch's general UI fixes --- .changeset/huge-friends-flash.md | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/.changeset/huge-friends-flash.md b/.changeset/huge-friends-flash.md index 93470b96..388510c9 100644 --- a/.changeset/huge-friends-flash.md +++ b/.changeset/huge-friends-flash.md @@ -2,4 +2,11 @@ '@genseki/ui': patch --- -[FIX] Consistent disable state token UI +[FIX] General UI fixes + +- Consistent disabled state tokens across form primitives (Input, Textarea, Select, Switch, RadioGroup, Checkbox, Toggle, Tabs, Slider, Command, ColorPicker, Calendar) +- InputGroup auto-detects disabled descendant input/textarea and aria-disabled, so wrappers around RichTextEditor and fieldset-disabled forms render the disabled chrome consistently +- InputGroup wrapping a direct `` is now exactly h-18 to match sibling Buttons (was 74px due to wrapper border on top of inner Input h-18) +- Filter popover: trigger keeps a focus ring while the popover is open, and the popover content aligns to the trigger's end edge +- Filter popover: highlight the currently active column in the left list +- Filter popover: disable "Reset All" when no filter is selected