@moduix/react 1.1.1 → 2.1.0

package/dist/components/rating-group/RatingGroup.js

@@ -1,27 +1,31 @@
-import { RatingStarIcon } from "../../lib/moduix/icons/ui/Icons.js";
 import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
+import { RatingStarIcon } from "../../lib/moduix/icons/ui/Icons.js";
 import RatingGroup_module_default from "./RatingGroup.module.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
-import { forwardRef } from "react";
-import { RatingGroup, useRatingGroupItemContext } from "@ark-ui/react/rating-group";
+import { Children, cloneElement, forwardRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { RatingGroup, useRatingGroup, useRatingGroupContext, useRatingGroupItemContext } from "@ark-ui/react/rating-group";
 //#region src/components/rating-group/RatingGroup.tsx
-const RatingGroupRoot = forwardRef(function RatingGroupRoot({ className, size = "md", ...props }, ref) {
+const RatingGroupRoot = forwardRef(function RatingGroupRoot({ asChild, children, className, size = "md", ...props }, ref) {
 	return /* @__PURE__ */ jsx(RatingGroup.Root, {
 		ref,
+		asChild,
 		"data-slot": "rating-group-root",
 		"data-size": size,
 		className: clsx(RatingGroup_module_default.root, normalizeClassName(className)),
-		...props
+		...props,
+		children: withHiddenInput(children, asChild)
 	});
 });
-const RatingGroupRootProvider = forwardRef(function RatingGroupRootProvider({ className, size = "md", ...props }, ref) {
+const RatingGroupRootProvider = forwardRef(function RatingGroupRootProvider({ asChild, children, className, size = "md", ...props }, ref) {
 	return /* @__PURE__ */ jsx(RatingGroup.RootProvider, {
 		ref,
+		asChild,
 		"data-slot": "rating-group-root-provider",
 		"data-size": size,
 		className: clsx(RatingGroup_module_default.root, normalizeClassName(className)),
-		...props
+		...props,
+		children: withHiddenInput(children, asChild)
 	});
 });
 const RatingGroupLabel = forwardRef(function RatingGroupLabel({ className, ...props }, ref) {
@@ -57,7 +61,7 @@ const RatingGroupItemIndicator = forwardRef(function RatingGroupItemIndicator({
 		"data-highlighted": highlighted ? "" : void 0,
 		className: clsx(RatingGroup_module_default.itemIndicator, normalizeClassName(className)),
 		...props,
-		children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(RatingStarIcon, {
+		children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(RatingStarIcon, {
 			"data-slot": "rating-group-item-indicator-bg",
 			className: RatingGroup_module_default.iconBg
 		}), /* @__PURE__ */ jsx(RatingStarIcon, {
@@ -66,21 +70,28 @@ const RatingGroupItemIndicator = forwardRef(function RatingGroupItemIndicator({
 		})] })
 	});
 });
-const RatingGroupHiddenInput = forwardRef(function RatingGroupHiddenInput(props, ref) {
-	return /* @__PURE__ */ jsx(RatingGroup.HiddenInput, {
-		ref,
-		"data-slot": "rating-group-hidden-input",
-		...props
-	});
-});
+function withHiddenInput(children, asChild) {
+	const hiddenInput = /* @__PURE__ */ jsx(RatingGroup.HiddenInput, { "data-slot": "rating-group-hidden-input" });
+	if (!asChild) return /* @__PURE__ */ jsxs(Fragment$1, { children: [children, hiddenInput] });
+	const child = Children.only(children);
+	return cloneElement(child, {}, child.props.children, hiddenInput);
+}
+function RatingGroupItems({ children }) {
+	return /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx(RatingGroup.Context, { children: ({ items }) => items.map((item) => /* @__PURE__ */ jsx(RatingGroupItem, {
+		index: item,
+		children: children ?? /* @__PURE__ */ jsx(RatingGroupItemIndicator, {})
+	}, item)) }) });
+}
 const RatingGroup$1 = Object.assign(RatingGroupRoot, {
 	Root: RatingGroupRoot,
 	RootProvider: RatingGroupRootProvider,
+	Context: RatingGroup.Context,
 	Label: RatingGroupLabel,
 	Control: RatingGroupControl,
 	Item: RatingGroupItem,
+	ItemContext: RatingGroup.ItemContext,
 	ItemIndicator: RatingGroupItemIndicator,
-	HiddenInput: RatingGroupHiddenInput
+	Items: RatingGroupItems
 });
 //#endregion
-export { RatingGroup$1 as RatingGroup };
+export { RatingGroup$1 as RatingGroup, useRatingGroup, useRatingGroupContext, useRatingGroupItemContext };

package/dist/components/rating-group/index.d.ts

@@ -1,2 +1,2 @@
-import { RatingGroup, RatingGroupItemIndicatorProps, RatingGroupRootProps, RatingGroupRootProviderProps, RatingGroupSize } from "./RatingGroup.js";
-export { RatingGroup, type RatingGroupItemIndicatorProps, type RatingGroupRootProps, type RatingGroupRootProviderProps, type RatingGroupSize };
+import { RatingGroup, RatingGroupItemIndicatorProps, RatingGroupRootProps, RatingGroupRootProviderProps, RatingGroupSize, useRatingGroup, useRatingGroupContext, useRatingGroupItemContext } from "./RatingGroup.js";
+export { RatingGroup, type RatingGroupItemIndicatorProps, type RatingGroupRootProps, type RatingGroupRootProviderProps, type RatingGroupSize, useRatingGroup, useRatingGroupContext, useRatingGroupItemContext };

package/dist/components/scroll-area/ScrollArea.css

@@ -41,9 +41,9 @@
     }
 
     &:focus-visible {
-      outline: var(--scroll-area-focus-ring-width, var(--border-width-sm)) solid
-        var(--scroll-area-focus-ring-color, var(--color-ring));
-      outline-offset: var(--scroll-area-focus-ring-offset, -1px);
+      outline: var(--scroll-area-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm)))
+        solid var(--scroll-area-focus-ring-color, var(--color-ring));
+      outline-offset: var(--scroll-area-focus-ring-offset, var(--focus-ring-inset-offset));
     }
   }
 
@@ -65,8 +65,8 @@
     user-select: none;
     touch-action: none;
     transition: opacity var(--scroll-area-transition, var(--transition-default)),
-      width var(--scroll-area-transition, var(--transition-slow)),
-      height var(--scroll-area-transition, var(--transition-slow));
+      width var(--scroll-area-thumb-hover-transition, var(--transition-fast)),
+      height var(--scroll-area-thumb-hover-transition, var(--transition-fast));
     justify-content: center;
     display: flex;
     position: absolute;
@@ -137,6 +137,11 @@
     &[data-scrolling] {
       transition-duration: 0s;
     }
+
+    .xqtLha_root[data-variant="always"] & {
+      opacity: var(--scroll-area-scrollbar-visible-opacity, 1);
+      pointer-events: auto;
+    }
   }
 
   .xqtLha_thumb {
@@ -146,12 +151,12 @@
 
     &[data-orientation="vertical"] {
       width: 100%;
-      min-height: var(--scroll-area-thumb-min-size, 1.5rem);
+      min-height: var(--scroll-area-thumb-min-size, var(--size-xs));
     }
 
     &[data-orientation="horizontal"] {
       height: 100%;
-      min-width: var(--scroll-area-thumb-min-size, 1.5rem);
+      min-width: var(--scroll-area-thumb-min-size, var(--size-xs));
     }
   }
 

package/dist/components/scroll-area/ScrollArea.d.ts

@@ -4,9 +4,11 @@ import { ScrollArea } from "@ark-ui/react/scroll-area";
 //#region src/components/scroll-area/ScrollArea.d.ts
 type ModuixScrollAreaRootProps = ComponentProps<typeof ScrollArea.Root> & {
   fade?: boolean;
+  variant?: 'hover' | 'always';
 };
 type ModuixScrollAreaRootProviderProps = ComponentProps<typeof ScrollArea.RootProvider> & {
   fade?: boolean;
+  variant?: 'hover' | 'always';
 };
 declare const ScrollArea$1: import("react").ForwardRefExoticComponent<Omit<ModuixScrollAreaRootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
   Root: import("react").ForwardRefExoticComponent<Omit<ModuixScrollAreaRootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
@@ -16,6 +18,7 @@ declare const ScrollArea$1: import("react").ForwardRefExoticComponent<Omit<Modui
   Scrollbar: import("react").ForwardRefExoticComponent<Omit<ScrollArea.ScrollbarProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   Thumb: import("react").ForwardRefExoticComponent<Omit<ScrollArea.ThumbProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   Corner: import("react").ForwardRefExoticComponent<Omit<ScrollArea.CornerProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  useScrollArea: (props?: import("@ark-ui/react/scroll-area").UseScrollAreaProps) => import("@ark-ui/react/scroll-area").UseScrollAreaReturn;
 };
 //#endregion
 export { type ModuixScrollAreaRootProps, type ModuixScrollAreaRootProviderProps, ScrollArea$1 as ScrollArea };

package/dist/components/scroll-area/ScrollArea.js

@@ -1,24 +1,26 @@
 import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
 import ScrollArea_module_default from "./ScrollArea.module.js";
-import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
-import { ScrollArea } from "@ark-ui/react/scroll-area";
+import { jsx } from "react/jsx-runtime";
+import { ScrollArea, useScrollArea } from "@ark-ui/react/scroll-area";
 //#region src/components/scroll-area/ScrollArea.tsx
-const ScrollAreaRoot = forwardRef(function ScrollAreaRoot({ className, fade, ...props }, ref) {
+const ScrollAreaRoot = forwardRef(function ScrollAreaRoot({ className, fade, variant = "hover", ...props }, ref) {
 	return /* @__PURE__ */ jsx(ScrollArea.Root, {
 		ref,
 		"data-slot": "scroll-area-root",
 		"data-fade": fade ? "" : void 0,
+		"data-variant": variant,
 		className: clsx(ScrollArea_module_default.root, normalizeClassName(className)),
 		...props
 	});
 });
-const ScrollAreaRootProvider = forwardRef(function ScrollAreaRootProvider({ className, fade, ...props }, ref) {
+const ScrollAreaRootProvider = forwardRef(function ScrollAreaRootProvider({ className, fade, variant = "hover", ...props }, ref) {
 	return /* @__PURE__ */ jsx(ScrollArea.RootProvider, {
 		ref,
 		"data-slot": "scroll-area-root-provider",
 		"data-fade": fade ? "" : void 0,
+		"data-variant": variant,
 		className: clsx(ScrollArea_module_default.root, normalizeClassName(className)),
 		...props
 	});
@@ -70,7 +72,8 @@ const ScrollArea$1 = Object.assign(ScrollAreaRoot, {
 	Content: ScrollAreaContent,
 	Scrollbar: ScrollAreaScrollbar,
 	Thumb: ScrollAreaThumb,
-	Corner: ScrollAreaCorner
+	Corner: ScrollAreaCorner,
+	useScrollArea
 });
 //#endregion
-export { ScrollArea$1 as ScrollArea };
+export { ScrollArea$1 as ScrollArea, useScrollArea };

package/dist/components/segment-group/SegmentGroup.css

@@ -44,9 +44,9 @@
     justify-content: center;
     align-items: center;
     gap: var(--segment-group-item-gap, var(--spacing-2));
-    min-height: var(--segment-group-item-height, 2rem);
+    min-height: var(--segment-group-item-height, var(--size-sm));
     border-radius: var(--segment-group-item-radius, var(--radius-md));
-    padding-inline: var(--segment-group-item-padding-x, .875rem);
+    padding-inline: var(--segment-group-item-padding-x, var(--spacing-3-5));
     color: var(--segment-group-item-color, var(--color-muted-foreground));
     font-size: var(--segment-group-item-font-size, var(--text-sm));
     font-weight: var(--segment-group-item-font-weight, var(--weight-medium));
@@ -71,8 +71,8 @@
     }
 
     &[data-focus-visible] {
-      outline: var(--segment-group-focus-ring-width, var(--border-width-sm)) solid
-        var(--segment-group-focus-ring-color, var(--color-ring));
+      outline: var(--segment-group-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm)))
+        solid var(--segment-group-focus-ring-color, var(--color-ring));
       outline-offset: var(--segment-group-focus-ring-offset, var(--border-width-sm));
     }
 

package/dist/components/segment-group/SegmentGroup.d.ts

@@ -1,6 +1,16 @@
-import { SegmentGroup } from "@ark-ui/react/segment-group";
+import { ReactNode } from "react";
+import { SegmentGroup, useSegmentGroup } from "@ark-ui/react/segment-group";
 
 //#region src/components/segment-group/SegmentGroup.d.ts
+declare function SegmentGroupItems({
+  items
+}: {
+  items: readonly {
+    value: string;
+    label: ReactNode;
+    disabled?: boolean;
+  }[];
+}): import("react").JSX.Element[];
 declare const SegmentGroup$1: import("react").ForwardRefExoticComponent<Omit<SegmentGroup.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
   Root: import("react").ForwardRefExoticComponent<Omit<SegmentGroup.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   RootProvider: import("react").ForwardRefExoticComponent<Omit<SegmentGroup.RootProviderProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
@@ -8,8 +18,8 @@ declare const SegmentGroup$1: import("react").ForwardRefExoticComponent<Omit<Seg
   Item: import("react").ForwardRefExoticComponent<Omit<SegmentGroup.ItemProps & import("react").RefAttributes<HTMLLabelElement>, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
   ItemControl: import("react").ForwardRefExoticComponent<Omit<SegmentGroup.ItemControlProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   ItemText: import("react").ForwardRefExoticComponent<Omit<SegmentGroup.ItemTextProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
-  ItemHiddenInput: import("react").ForwardRefExoticComponent<Omit<SegmentGroup.ItemHiddenInputProps & import("react").RefAttributes<HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
   Indicator: import("react").ForwardRefExoticComponent<Omit<SegmentGroup.IndicatorProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Items: typeof SegmentGroupItems;
 };
 //#endregion
-export { SegmentGroup$1 as SegmentGroup };
+export { SegmentGroup$1 as SegmentGroup, useSegmentGroup };

package/dist/components/segment-group/SegmentGroup.js

@@ -1,9 +1,9 @@
 import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
 import SegmentGroup_module_default from "./SegmentGroup.module.js";
-import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
-import { forwardRef } from "react";
-import { SegmentGroup } from "@ark-ui/react/segment-group";
+import { Children, cloneElement, forwardRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { SegmentGroup, useSegmentGroup } from "@ark-ui/react/segment-group";
 //#region src/components/segment-group/SegmentGroup.tsx
 const SegmentGroupRoot = forwardRef(function SegmentGroupRoot({ className, orientation = "horizontal", ...props }, ref) {
 	return /* @__PURE__ */ jsx(SegmentGroup.Root, {
@@ -30,12 +30,14 @@ const SegmentGroupLabel = forwardRef(function SegmentGroupLabel({ className, ...
 		...props
 	});
 });
-const SegmentGroupItem = forwardRef(function SegmentGroupItem({ className, ...props }, ref) {
+const SegmentGroupItem = forwardRef(function SegmentGroupItem({ asChild, children, className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(SegmentGroup.Item, {
 		ref,
+		asChild,
 		"data-slot": "segment-group-item",
 		className: clsx(SegmentGroup_module_default.item, normalizeClassName(className)),
-		...props
+		...props,
+		children: withItemHiddenInput(children, asChild)
 	});
 });
 const SegmentGroupItemControl = forwardRef(function SegmentGroupItemControl({ className, ...props }, ref) {
@@ -54,13 +56,12 @@ const SegmentGroupItemText = forwardRef(function SegmentGroupItemText({ classNam
 		...props
 	});
 });
-const SegmentGroupItemHiddenInput = forwardRef(function SegmentGroupItemHiddenInput(props, ref) {
-	return /* @__PURE__ */ jsx(SegmentGroup.ItemHiddenInput, {
-		ref,
-		"data-slot": "segment-group-item-hidden-input",
-		...props
-	});
-});
+function withItemHiddenInput(children, asChild) {
+	const hiddenInput = /* @__PURE__ */ jsx(SegmentGroup.ItemHiddenInput, { "data-slot": "segment-group-item-hidden-input" });
+	if (!asChild) return /* @__PURE__ */ jsxs(Fragment$1, { children: [children, hiddenInput] });
+	const child = Children.only(children);
+	return cloneElement(child, {}, child.props.children, hiddenInput);
+}
 const SegmentGroupIndicator = forwardRef(function SegmentGroupIndicator({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(SegmentGroup.Indicator, {
 		ref,
@@ -69,6 +70,13 @@ const SegmentGroupIndicator = forwardRef(function SegmentGroupIndicator({ classN
 		...props
 	});
 });
+function SegmentGroupItems({ items }) {
+	return items.map(({ value, label, disabled }) => /* @__PURE__ */ jsxs(SegmentGroupItem, {
+		value,
+		disabled,
+		children: [/* @__PURE__ */ jsx(SegmentGroupItemText, { children: label }), /* @__PURE__ */ jsx(SegmentGroupItemControl, {})]
+	}, value));
+}
 const SegmentGroup$1 = Object.assign(SegmentGroupRoot, {
 	Root: SegmentGroupRoot,
 	RootProvider: SegmentGroupRootProvider,
@@ -76,8 +84,8 @@ const SegmentGroup$1 = Object.assign(SegmentGroupRoot, {
 	Item: SegmentGroupItem,
 	ItemControl: SegmentGroupItemControl,
 	ItemText: SegmentGroupItemText,
-	ItemHiddenInput: SegmentGroupItemHiddenInput,
-	Indicator: SegmentGroupIndicator
+	Indicator: SegmentGroupIndicator,
+	Items: SegmentGroupItems
 });
 //#endregion
-export { SegmentGroup$1 as SegmentGroup };
+export { SegmentGroup$1 as SegmentGroup, useSegmentGroup };

package/dist/components/segment-group/index.d.ts

@@ -1,2 +1,2 @@
-import { SegmentGroup } from "./SegmentGroup.js";
-export { SegmentGroup };
+import { SegmentGroup, useSegmentGroup } from "./SegmentGroup.js";
+export { SegmentGroup, useSegmentGroup };

package/dist/components/select/Select.css

@@ -1,8 +1,10 @@
 @layer ui.components {
   @keyframes FGbIOa_select-content-open {
     from {
-      opacity: var(--select-content-closed-opacity, 0);
-      transform: scale(var(--select-content-closed-scale, var(--scale-popup)));
+      opacity: var(--select-content-closed-opacity, var(--popup-motion-starting-opacity, 0));
+      translate: var(--popup-motion-starting-translate-x, 0)
+        var(--popup-motion-starting-translate-y, 0);
+      transform: scale(var(--select-content-closed-scale, var(--popup-motion-starting-scale, var(--scale-popup))));
     }
 
     to {
@@ -18,8 +20,9 @@
     }
 
     to {
-      opacity: var(--select-content-closed-opacity, 0);
-      transform: scale(var(--select-content-closed-scale, var(--scale-popup)));
+      opacity: var(--select-content-closed-opacity, var(--popup-motion-ending-opacity, 0));
+      translate: var(--popup-motion-ending-translate-x, 0) var(--popup-motion-ending-translate-y, 0);
+      transform: scale(var(--select-content-closed-scale, var(--popup-motion-ending-scale, var(--scale-popup))));
     }
   }
 
@@ -27,7 +30,7 @@
     box-sizing: border-box;
     width: var(--select-width, 14rem);
     max-width: var(--select-max-width, 100%);
-    gap: var(--select-root-gap, .375rem);
+    gap: var(--select-root-gap, var(--spacing-1-5));
     min-width: 0;
     color: var(--select-color, var(--color-foreground));
     flex-direction: column;
@@ -65,19 +68,21 @@
     box-sizing: border-box;
     width: 100%;
     min-width: 0;
-    height: var(--select-control-height, var(--size-lg));
+    height: var(--select-control-height, var(--size-md));
     border: var(--select-border-width, var(--border-width-sm)) solid
       var(--select-border-color, var(--color-border));
     border-radius: var(--select-radius, var(--radius-md));
-    padding-inline: var(--select-trigger-padding-x-start, .875rem)
-      calc(var(--select-action-offset-right, .5rem) + var(--select-action-size, 1.5rem) +
-          var(--select-trigger-padding-x-start, .875rem));
+    padding-inline: var(--select-trigger-padding-x-start, var(--spacing-3-5))
+      calc(var(--select-action-offset-right, var(--spacing-2)) +
+          var(--select-action-size, var(--size-xs)) +
+          var(--select-trigger-padding-x-start, var(--spacing-3-5)));
     background-color: var(--select-bg, var(--color-background));
     color: inherit;
     font: inherit;
     text-align: start;
-    outline: var(--select-focus-ring-width, var(--border-width-sm)) solid transparent;
-    outline-offset: calc(var(--select-focus-ring-width, var(--border-width-sm)) * -1);
+    outline: var(--select-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm)))
+      solid transparent;
+    outline-offset: calc(var(--select-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm))) * -1);
     cursor: pointer;
     user-select: none;
     transition: background-color var(--select-transition, var(--transition-default)),
@@ -87,13 +92,13 @@
     align-items: center;
     margin: 0;
     display: inline-flex;
+    position: relative;
 
     &[data-placeholder-shown] {
       color: var(--select-placeholder-color, var(--color-muted-foreground));
     }
 
     &[data-state="open"] {
-      background-color: var(--select-bg-active, var(--color-muted));
       border-color: var(--select-focus-ring-color, var(--color-ring));
       outline-color: var(--select-focus-ring-color, var(--color-ring));
     }
@@ -111,14 +116,6 @@
       border-color: var(--select-invalid-color, var(--color-destructive));
       outline-color: var(--select-invalid-color, var(--color-destructive));
     }
-
-    .FGbIOa_control:not([data-disabled]) & {
-      @media (hover: hover) {
-        &:hover {
-          background-color: var(--select-bg-hover, var(--color-accent));
-        }
-      }
-    }
   }
 
   .FGbIOa_control:has(.FGbIOa_clearTrigger:not([hidden])) .FGbIOa_trigger {
@@ -135,20 +132,20 @@
 
   .FGbIOa_indicators {
     top: 50%;
-    right: var(--select-action-offset-right, .5rem);
     align-items: center;
-    gap: var(--select-action-gap, .125rem);
+    gap: var(--select-action-gap, var(--spacing-0-5));
     pointer-events: none;
     line-height: 0;
     display: inline-flex;
     position: absolute;
+    inset-inline-end: var(--select-action-offset-right, var(--spacing-2));
     transform: translateY(-50%);
   }
 
-  .FGbIOa_indicator, .FGbIOa_clearTrigger {
+  .FGbIOa_indicator {
     box-sizing: border-box;
-    width: var(--select-action-size, 1.5rem);
-    height: var(--select-action-size, 1.5rem);
+    width: var(--select-action-size, var(--size-xs));
+    height: var(--select-action-size, var(--size-xs));
     border-radius: var(--select-action-radius, var(--radius-sm));
     background: var(--select-action-bg, transparent);
     color: var(--select-icon-color, var(--color-muted-foreground));
@@ -165,8 +162,8 @@
     display: inline-flex;
 
     & > svg {
-      width: var(--select-icon-size, 1rem);
-      height: var(--select-icon-size, 1rem);
+      width: var(--select-icon-size, var(--spacing-4));
+      height: var(--select-icon-size, var(--spacing-4));
       display: block;
     }
 
@@ -183,20 +180,45 @@
     pointer-events: none;
   }
 
+  .FGbIOa_trigger > .FGbIOa_indicator {
+    top: 50%;
+    pointer-events: auto;
+    position: absolute;
+    inset-inline-end: var(--select-action-offset-right, var(--spacing-2));
+    transform: translateY(-50%);
+  }
+
+  .FGbIOa_trigger > .FGbIOa_indicator:not(:is([data-disabled], [disabled])):hover {
+    @media (hover: hover) {
+      background-color: var(--select-action-bg-hover, var(--color-muted));
+      color: var(--select-action-color-hover, var(--color-foreground));
+    }
+  }
+
   .FGbIOa_clearTrigger {
-    cursor: pointer;
+    --close-button-size: var(--select-action-size, var(--size-xs));
+    --close-button-icon-size: var(--select-icon-size, var(--spacing-4));
+    --close-button-radius: var(--select-action-radius, var(--radius-sm));
+    --close-button-bg: var(--select-action-bg, transparent);
+    --close-button-bg-hover: var(--select-action-bg-hover, var(--color-muted));
+    --close-button-color: var(--select-icon-color, var(--color-muted-foreground));
+    --close-button-color-hover: var(--select-action-color-hover, var(--color-foreground));
+    --close-button-transition: var(--select-transition, var(--transition-default));
     pointer-events: auto;
 
-    &:not(:is([disabled], [data-disabled])) {
-      @media (hover: hover) {
-        &:hover {
-          background-color: var(--select-action-bg-hover, var(--color-muted));
-          color: var(--select-action-color-hover, var(--color-foreground));
-        }
-      }
+    &[hidden] {
+      display: none;
     }
   }
 
+  .FGbIOa_control > .FGbIOa_clearTrigger {
+    top: 50%;
+    position: absolute;
+    inset-inline-end: calc(var(--select-action-offset-right, var(--spacing-2)) +
+        var(--select-action-size, var(--size-xs)) + var(--select-action-gap, var(--spacing-0-5)));
+    transform: translateY(-50%);
+  }
+
   .FGbIOa_positioner {
     z-index: var(--z-index);
     outline: 0;
@@ -211,7 +233,7 @@
     border: var(--select-content-border-width, var(--border-width-sm)) solid
       var(--select-content-border-color, var(--color-border));
     border-radius: var(--select-radius, var(--radius-md));
-    padding-block: var(--select-content-padding-y, var(--spacing-1));
+    padding-block: var(--select-content-padding-y, var(--popup-list-padding-y, var(--spacing-1)));
     background-color: var(--select-content-bg, var(--color-popover));
     box-shadow: var(--select-content-shadow, var(--shadow-lg));
     color: var(--select-content-color, var(--color-popover-foreground));
@@ -224,11 +246,15 @@
     overflow: auto;
 
     &[data-state="open"] {
-      animation: FGbIOa_select-content-open var(--select-transition, var(--transition-default));
+      animation: FGbIOa_select-content-open
+        var(--select-transition, var(--popup-motion-duration, var(--duration-normal))
+            var(--popup-motion-easing, var(--ease-in-out)));
     }
 
     &[data-state="closed"] {
-      animation: FGbIOa_select-content-closed var(--select-transition, var(--transition-default));
+      animation: FGbIOa_select-content-closed
+        var(--select-transition, var(--popup-motion-duration, var(--duration-normal))
+            var(--popup-motion-easing, var(--ease-in-out)));
       pointer-events: none;
     }
   }
@@ -253,31 +279,31 @@
   }
 
   .FGbIOa_itemGroupLabel {
-    padding-block: var(--select-item-group-label-padding-y, .375rem);
-    padding-inline: var(--select-item-group-label-padding-x, .625rem);
-    color: var(--select-item-group-label-color, var(--color-muted-foreground));
-    font-size: var(--select-item-group-label-font-size, var(--text-xs));
-    font-weight: var(--select-item-group-label-font-weight, var(--weight-semibold));
-    line-height: var(--select-item-group-label-line-height, var(--line-height-text-xs));
+    padding-block: var(--select-item-group-label-padding-y, var(--popup-group-label-padding-y, var(--spacing-1)));
+    padding-inline: var(--select-item-group-label-padding-x, var(--spacing-2-5));
+    color: var(--select-item-group-label-color, var(--popup-group-label-color, var(--color-muted-foreground)));
+    font-size: var(--select-item-group-label-font-size, var(--popup-group-label-font-size, var(--text-xs)));
+    font-weight: var(--select-item-group-label-font-weight, var(--popup-group-label-font-weight, var(--weight-regular)));
+    line-height: var(--select-item-group-label-line-height, var(--popup-group-label-line-height, var(--line-height-text-xs)));
   }
 
   .FGbIOa_item {
     box-sizing: border-box;
     width: calc(100% - var(--select-item-inset-x, var(--spacing-2)));
-    min-height: var(--select-item-min-height, 2rem);
+    min-height: var(--select-item-min-height, var(--popup-item-min-height, var(--size-sm)));
     justify-content: space-between;
     align-items: center;
     gap: var(--select-item-gap, var(--spacing-2));
     margin-inline: calc(var(--select-item-inset-x, var(--spacing-2)) / 2);
     border: var(--select-item-border-width, 0) solid var(--select-item-border-color, transparent);
     border-radius: var(--select-item-radius, var(--radius-sm));
-    padding-block: var(--select-item-padding-y, var(--spacing-2));
-    padding-inline: var(--select-item-padding-x, .625rem);
+    padding-block: var(--select-item-padding-y, var(--popup-item-padding-y, var(--spacing-1)));
+    padding-inline: var(--select-item-padding-x, var(--popup-item-padding-x-start, var(--spacing-3)));
     background-color: var(--select-item-bg, transparent);
     color: var(--select-item-color, var(--select-content-color, var(--color-foreground)));
     font: inherit;
-    font-size: var(--select-item-font-size, var(--text-sm));
-    line-height: var(--select-item-line-height, var(--line-height-text-sm));
+    font-size: var(--select-item-font-size, var(--popup-item-font-size, var(--text-sm)));
+    line-height: var(--select-item-line-height, var(--popup-item-line-height, var(--line-height-text-sm)));
     user-select: none;
     cursor: default;
     outline: 0;
@@ -309,8 +335,8 @@
   }
 
   .FGbIOa_itemIndicator {
-    width: var(--select-item-indicator-size, .875rem);
-    height: var(--select-item-indicator-size, .875rem);
+    width: var(--select-item-indicator-size, var(--spacing-3-5));
+    height: var(--select-item-indicator-size, var(--spacing-3-5));
     color: var(--select-item-indicator-color, currentColor);
     flex-shrink: 0;
     justify-content: center;
@@ -318,8 +344,8 @@
     display: inline-flex;
 
     & > svg {
-      width: var(--select-item-indicator-icon-size, .75rem);
-      height: var(--select-item-indicator-icon-size, .75rem);
+      width: var(--select-item-indicator-icon-size, var(--spacing-3));
+      height: var(--select-item-indicator-icon-size, var(--spacing-3));
     }
   }
 
@@ -333,8 +359,8 @@
   }
 
   .FGbIOa_itemTextIcon {
-    width: var(--select-item-text-icon-size, 1rem);
-    height: var(--select-item-text-icon-size, 1rem);
+    width: var(--select-item-text-icon-size, var(--spacing-4));
+    height: var(--select-item-text-icon-size, var(--spacing-4));
     color: var(--select-item-text-icon-color, currentColor);
     flex-shrink: 0;
     justify-content: center;