@geomak/ui 5.5.1 → 5.5.3

package/dist/index.d.cts

@@ -788,34 +788,6 @@ interface TreeProps {
  */
 declare function Tree({ nodes, onNodeClick, defaultExpandAll, defaultExpandedKeys, }: TreeProps): react_jsx_runtime.JSX.Element;
 
-interface ToggleItem {
-    key: string;
-    label?: React$1.ReactNode;
-    icon?: React$1.ReactNode;
-}
-interface ToggleButtonProps {
-    items: ToggleItem[];
-    onChange: (key: string) => void;
-    activeKey: string;
-}
-/**
- * Segmented toggle-button group powered by Radix ToggleGroup.
- *
- * Radix handles keyboard navigation (arrow keys), focus ring, and
- * `role="group"` / `aria-pressed` ARIA attributes.
- *
- * @example
- * <ToggleButton
- *   items={[
- *     { key: 'grid', icon: <Icon.Grid /> },
- *     { key: 'list', icon: <Icon.List /> },
- *   ]}
- *   activeKey={view}
- *   onChange={setView}
- * />
- */
-declare function ToggleButton({ items, onChange, activeKey }: ToggleButtonProps): react_jsx_runtime.JSX.Element;
-
 /** ─────────────────── types ─────────────────── */
 type NotificationType = 'info' | 'success' | 'warning' | 'danger';
 type NotificationPosition = 'top-right' | 'top-left' | 'top-center' | 'bottom-right' | 'bottom-left' | 'bottom-center';
@@ -1032,6 +1004,15 @@ interface ScalableContainerProps {
     width?: React$1.CSSProperties['width'];
     /** Resting height. Any CSS length / percent. Default `'auto'`. */
     height?: React$1.CSSProperties['height'];
+    /** Width when expanded. Default `'100%'` (fills parent). */
+    expandedWidth?: React$1.CSSProperties['width'];
+    /** Height when expanded. Default `'100%'`. Set a concrete value (e.g. 420)
+     *  when the container lives in normal flow and should push siblings down. */
+    expandedHeight?: React$1.CSSProperties['height'];
+    /** Controlled expanded state. */
+    expanded?: boolean;
+    /** Fires when the user toggles. */
+    onExpandedChange?: (expanded: boolean) => void;
     /** Content to render inside. */
     children?: React$1.ReactNode;
     /** CSS class appended to the expanded children wrapper. */
@@ -1071,7 +1052,7 @@ interface ScalableContainerProps {
  * </ScalableContainer>
  * ```
  */
-declare function ScalableContainer({ width, height, children, assignClassOnClick, expandIcon, collapseIcon, togglePosition, }: ScalableContainerProps): react_jsx_runtime.JSX.Element;
+declare function ScalableContainer({ width, height, expandedWidth, expandedHeight, expanded, onExpandedChange, children, assignClassOnClick, expandIcon, collapseIcon, togglePosition, }: ScalableContainerProps): react_jsx_runtime.JSX.Element;
 
 interface GridCardItem {
     key: string | number;
@@ -2153,8 +2134,17 @@ interface RadioGroupProps {
     onChange?: (value: string) => void;
     name?: string;
     label?: React$1.ReactNode;
-    /** Group orientation. Default `'vertical'`. */
-    orientation?: 'vertical' | 'horizontal';
+    /**
+     * Option arrangement. `'vertical'` (default) stacks options in a column;
+     * `'horizontal'` lays them in a row. Named `layout` for consistency with
+     * the other inputs.
+     */
+    layout?: 'vertical' | 'horizontal';
+    /**
+     * Where each option's label sits relative to its radio dot.
+     * `'right'` (default) → dot then label; `'left'` → label then dot.
+     */
+    labelPosition?: 'left' | 'right';
     /** Size preset — controls the dot + text size. Default `'md'`. */
     size?: FieldSize;
     disabled?: boolean;
@@ -2184,7 +2174,7 @@ interface RadioGroupProps {
  * />
  * ```
  */
-declare function RadioGroup({ options, value, defaultValue, onChange, name, label, orientation, size, disabled, required, errorMessage, }: RadioGroupProps): react_jsx_runtime.JSX.Element;
+declare function RadioGroup({ options, value, defaultValue, onChange, name, label, layout, labelPosition, size, disabled, required, errorMessage, }: RadioGroupProps): react_jsx_runtime.JSX.Element;
 
 interface SwitchInputProps {
     checked?: boolean;
@@ -2929,4 +2919,4 @@ interface ColorPickerProps {
  */
 declare function ColorPicker({ value, onChange, label, htmlFor, name, layout, size, swatches, allowCustom, disabled, errorMessage, required, placeholder, }: ColorPickerProps): react_jsx_runtime.JSX.Element;
 
-export { AppShell, type AppShellProps, AutoComplete, type AutoCompleteProps, Avatar, type AvatarProps, type AvatarShape, type AvatarSize, type AvatarStatus, Box, type BoxBackground, type BoxBorder, type BoxProps, type BoxRadius, type BoxShadow, Button, type ButtonProps, Catalog, CatalogCarousel, type CatalogCarouselProps, CatalogGrid, type CatalogGridProps, type CatalogProps, Checkbox, type CheckboxProps, ColorPicker, type ColorPickerProps, ContextMenu, type ContextMenuActionItem, type ContextMenuPosition, type ContextMenuProps, type DatePickerProps, type DateRange, DateRangePicker, type DateRangePickerProps, type DateRangePreset, Drawer, type DrawerProps, Dropdown, type DropdownItem, type DropdownProps, type ExpandRowOptions, FadingBase, type FadingBaseProps, Field, type FieldProps, type FieldShellOptions, type FieldSize, FileInput, type FileInputProps, Flex, type FlexAlign, type FlexDirection, type FlexJustify, type FlexProps, type FlexWrap, Grid, GridCard, type GridCardItem, type GridCardProps, type GridProps, Icon, IconButton, type IconButtonProps, List, type ListItem, type ListProps, LoadingSpinner, type LoadingSpinnerProps, Modal, type ModalProps, type NotificationPayload, NotificationProvider, NumberInput, type NumberInputProps, OpaqueGridCard, type OpaqueGridCardProps, OtpInput, type OtpInputProps, type PaginationOptions, Password, type PasswordProps, Portal, type PortalProps, RadioGroup, type RadioGroupProps, type RadioOption, Rating, type RatingProps, ScalableContainer, type ScalableContainerProps, SearchInput, type SearchInputProps, SegmentedControl, type SegmentedControlProps, type SegmentedOption, Sidebar, type SidebarItem, type SidebarProps, type SidebarSection, SkeletonBox, type SkeletonBoxProps, SkeletonCard, type SkeletonCardProps, SkeletonCircle, type SkeletonCircleProps, SkeletonText, type SkeletonTextProps, Slider, type SliderMark, type SliderProps, type SliderValue, type Spacing, Switch, type SwitchInputProps, type TabItem, Table, type TableColumn, type TableProps, Tabs, type TabsProps, TagsInput, type TagsInputProps, DatePicker as Temporal, type TemporalPickerProps, TextArea, type TextAreaProps, TextInput, type TextInputProps, type ThemeColors, type ThemeConfig, type ThemeDensity, type ThemeMotion, ThemeProvider, type ThemeProviderProps, type ThemeRadius, type ThemeShadows, ThemeSwitch, type ThemeSwitchProps, type ThemeTypography, TimePicker, type TimePickerProps, ToggleButton, type ToggleButtonProps, type ToggleItem, Tooltip, type TooltipProps, TooltipProvider, TopBar, type TopBarProps, Tree, type TreeItemClickPayload, type TreeNode, type TreeProps, TreeSelect, type TreeSelectProps, Typography, type TypographyAlign, type TypographyColor, type TypographyProps, type TypographyVariant, type TypographyWeight, Wizard, type WizardProps, type WizardStep, fieldShell, useNotification };
+export { AppShell, type AppShellProps, AutoComplete, type AutoCompleteProps, Avatar, type AvatarProps, type AvatarShape, type AvatarSize, type AvatarStatus, Box, type BoxBackground, type BoxBorder, type BoxProps, type BoxRadius, type BoxShadow, Button, type ButtonProps, Catalog, CatalogCarousel, type CatalogCarouselProps, CatalogGrid, type CatalogGridProps, type CatalogProps, Checkbox, type CheckboxProps, ColorPicker, type ColorPickerProps, ContextMenu, type ContextMenuActionItem, type ContextMenuPosition, type ContextMenuProps, type DatePickerProps, type DateRange, DateRangePicker, type DateRangePickerProps, type DateRangePreset, Drawer, type DrawerProps, Dropdown, type DropdownItem, type DropdownProps, type ExpandRowOptions, FadingBase, type FadingBaseProps, Field, type FieldProps, type FieldShellOptions, type FieldSize, FileInput, type FileInputProps, Flex, type FlexAlign, type FlexDirection, type FlexJustify, type FlexProps, type FlexWrap, Grid, GridCard, type GridCardItem, type GridCardProps, type GridProps, Icon, IconButton, type IconButtonProps, List, type ListItem, type ListProps, LoadingSpinner, type LoadingSpinnerProps, Modal, type ModalProps, type NotificationPayload, NotificationProvider, NumberInput, type NumberInputProps, OpaqueGridCard, type OpaqueGridCardProps, OtpInput, type OtpInputProps, type PaginationOptions, Password, type PasswordProps, Portal, type PortalProps, RadioGroup, type RadioGroupProps, type RadioOption, Rating, type RatingProps, ScalableContainer, type ScalableContainerProps, SearchInput, type SearchInputProps, SegmentedControl, type SegmentedControlProps, type SegmentedOption, Sidebar, type SidebarItem, type SidebarProps, type SidebarSection, SkeletonBox, type SkeletonBoxProps, SkeletonCard, type SkeletonCardProps, SkeletonCircle, type SkeletonCircleProps, SkeletonText, type SkeletonTextProps, Slider, type SliderMark, type SliderProps, type SliderValue, type Spacing, Switch, type SwitchInputProps, type TabItem, Table, type TableColumn, type TableProps, Tabs, type TabsProps, TagsInput, type TagsInputProps, DatePicker as Temporal, type TemporalPickerProps, TextArea, type TextAreaProps, TextInput, type TextInputProps, type ThemeColors, type ThemeConfig, type ThemeDensity, type ThemeMotion, ThemeProvider, type ThemeProviderProps, type ThemeRadius, type ThemeShadows, ThemeSwitch, type ThemeSwitchProps, type ThemeTypography, TimePicker, type TimePickerProps, Tooltip, type TooltipProps, TooltipProvider, TopBar, type TopBarProps, Tree, type TreeItemClickPayload, type TreeNode, type TreeProps, TreeSelect, type TreeSelectProps, Typography, type TypographyAlign, type TypographyColor, type TypographyProps, type TypographyVariant, type TypographyWeight, Wizard, type WizardProps, type WizardStep, fieldShell, useNotification };

package/dist/index.d.ts

@@ -788,34 +788,6 @@ interface TreeProps {
  */
 declare function Tree({ nodes, onNodeClick, defaultExpandAll, defaultExpandedKeys, }: TreeProps): react_jsx_runtime.JSX.Element;
 
-interface ToggleItem {
-    key: string;
-    label?: React$1.ReactNode;
-    icon?: React$1.ReactNode;
-}
-interface ToggleButtonProps {
-    items: ToggleItem[];
-    onChange: (key: string) => void;
-    activeKey: string;
-}
-/**
- * Segmented toggle-button group powered by Radix ToggleGroup.
- *
- * Radix handles keyboard navigation (arrow keys), focus ring, and
- * `role="group"` / `aria-pressed` ARIA attributes.
- *
- * @example
- * <ToggleButton
- *   items={[
- *     { key: 'grid', icon: <Icon.Grid /> },
- *     { key: 'list', icon: <Icon.List /> },
- *   ]}
- *   activeKey={view}
- *   onChange={setView}
- * />
- */
-declare function ToggleButton({ items, onChange, activeKey }: ToggleButtonProps): react_jsx_runtime.JSX.Element;
-
 /** ─────────────────── types ─────────────────── */
 type NotificationType = 'info' | 'success' | 'warning' | 'danger';
 type NotificationPosition = 'top-right' | 'top-left' | 'top-center' | 'bottom-right' | 'bottom-left' | 'bottom-center';
@@ -1032,6 +1004,15 @@ interface ScalableContainerProps {
     width?: React$1.CSSProperties['width'];
     /** Resting height. Any CSS length / percent. Default `'auto'`. */
     height?: React$1.CSSProperties['height'];
+    /** Width when expanded. Default `'100%'` (fills parent). */
+    expandedWidth?: React$1.CSSProperties['width'];
+    /** Height when expanded. Default `'100%'`. Set a concrete value (e.g. 420)
+     *  when the container lives in normal flow and should push siblings down. */
+    expandedHeight?: React$1.CSSProperties['height'];
+    /** Controlled expanded state. */
+    expanded?: boolean;
+    /** Fires when the user toggles. */
+    onExpandedChange?: (expanded: boolean) => void;
     /** Content to render inside. */
     children?: React$1.ReactNode;
     /** CSS class appended to the expanded children wrapper. */
@@ -1071,7 +1052,7 @@ interface ScalableContainerProps {
  * </ScalableContainer>
  * ```
  */
-declare function ScalableContainer({ width, height, children, assignClassOnClick, expandIcon, collapseIcon, togglePosition, }: ScalableContainerProps): react_jsx_runtime.JSX.Element;
+declare function ScalableContainer({ width, height, expandedWidth, expandedHeight, expanded, onExpandedChange, children, assignClassOnClick, expandIcon, collapseIcon, togglePosition, }: ScalableContainerProps): react_jsx_runtime.JSX.Element;
 
 interface GridCardItem {
     key: string | number;
@@ -2153,8 +2134,17 @@ interface RadioGroupProps {
     onChange?: (value: string) => void;
     name?: string;
     label?: React$1.ReactNode;
-    /** Group orientation. Default `'vertical'`. */
-    orientation?: 'vertical' | 'horizontal';
+    /**
+     * Option arrangement. `'vertical'` (default) stacks options in a column;
+     * `'horizontal'` lays them in a row. Named `layout` for consistency with
+     * the other inputs.
+     */
+    layout?: 'vertical' | 'horizontal';
+    /**
+     * Where each option's label sits relative to its radio dot.
+     * `'right'` (default) → dot then label; `'left'` → label then dot.
+     */
+    labelPosition?: 'left' | 'right';
     /** Size preset — controls the dot + text size. Default `'md'`. */
     size?: FieldSize;
     disabled?: boolean;
@@ -2184,7 +2174,7 @@ interface RadioGroupProps {
  * />
  * ```
  */
-declare function RadioGroup({ options, value, defaultValue, onChange, name, label, orientation, size, disabled, required, errorMessage, }: RadioGroupProps): react_jsx_runtime.JSX.Element;
+declare function RadioGroup({ options, value, defaultValue, onChange, name, label, layout, labelPosition, size, disabled, required, errorMessage, }: RadioGroupProps): react_jsx_runtime.JSX.Element;
 
 interface SwitchInputProps {
     checked?: boolean;
@@ -2929,4 +2919,4 @@ interface ColorPickerProps {
  */
 declare function ColorPicker({ value, onChange, label, htmlFor, name, layout, size, swatches, allowCustom, disabled, errorMessage, required, placeholder, }: ColorPickerProps): react_jsx_runtime.JSX.Element;
 
-export { AppShell, type AppShellProps, AutoComplete, type AutoCompleteProps, Avatar, type AvatarProps, type AvatarShape, type AvatarSize, type AvatarStatus, Box, type BoxBackground, type BoxBorder, type BoxProps, type BoxRadius, type BoxShadow, Button, type ButtonProps, Catalog, CatalogCarousel, type CatalogCarouselProps, CatalogGrid, type CatalogGridProps, type CatalogProps, Checkbox, type CheckboxProps, ColorPicker, type ColorPickerProps, ContextMenu, type ContextMenuActionItem, type ContextMenuPosition, type ContextMenuProps, type DatePickerProps, type DateRange, DateRangePicker, type DateRangePickerProps, type DateRangePreset, Drawer, type DrawerProps, Dropdown, type DropdownItem, type DropdownProps, type ExpandRowOptions, FadingBase, type FadingBaseProps, Field, type FieldProps, type FieldShellOptions, type FieldSize, FileInput, type FileInputProps, Flex, type FlexAlign, type FlexDirection, type FlexJustify, type FlexProps, type FlexWrap, Grid, GridCard, type GridCardItem, type GridCardProps, type GridProps, Icon, IconButton, type IconButtonProps, List, type ListItem, type ListProps, LoadingSpinner, type LoadingSpinnerProps, Modal, type ModalProps, type NotificationPayload, NotificationProvider, NumberInput, type NumberInputProps, OpaqueGridCard, type OpaqueGridCardProps, OtpInput, type OtpInputProps, type PaginationOptions, Password, type PasswordProps, Portal, type PortalProps, RadioGroup, type RadioGroupProps, type RadioOption, Rating, type RatingProps, ScalableContainer, type ScalableContainerProps, SearchInput, type SearchInputProps, SegmentedControl, type SegmentedControlProps, type SegmentedOption, Sidebar, type SidebarItem, type SidebarProps, type SidebarSection, SkeletonBox, type SkeletonBoxProps, SkeletonCard, type SkeletonCardProps, SkeletonCircle, type SkeletonCircleProps, SkeletonText, type SkeletonTextProps, Slider, type SliderMark, type SliderProps, type SliderValue, type Spacing, Switch, type SwitchInputProps, type TabItem, Table, type TableColumn, type TableProps, Tabs, type TabsProps, TagsInput, type TagsInputProps, DatePicker as Temporal, type TemporalPickerProps, TextArea, type TextAreaProps, TextInput, type TextInputProps, type ThemeColors, type ThemeConfig, type ThemeDensity, type ThemeMotion, ThemeProvider, type ThemeProviderProps, type ThemeRadius, type ThemeShadows, ThemeSwitch, type ThemeSwitchProps, type ThemeTypography, TimePicker, type TimePickerProps, ToggleButton, type ToggleButtonProps, type ToggleItem, Tooltip, type TooltipProps, TooltipProvider, TopBar, type TopBarProps, Tree, type TreeItemClickPayload, type TreeNode, type TreeProps, TreeSelect, type TreeSelectProps, Typography, type TypographyAlign, type TypographyColor, type TypographyProps, type TypographyVariant, type TypographyWeight, Wizard, type WizardProps, type WizardStep, fieldShell, useNotification };
+export { AppShell, type AppShellProps, AutoComplete, type AutoCompleteProps, Avatar, type AvatarProps, type AvatarShape, type AvatarSize, type AvatarStatus, Box, type BoxBackground, type BoxBorder, type BoxProps, type BoxRadius, type BoxShadow, Button, type ButtonProps, Catalog, CatalogCarousel, type CatalogCarouselProps, CatalogGrid, type CatalogGridProps, type CatalogProps, Checkbox, type CheckboxProps, ColorPicker, type ColorPickerProps, ContextMenu, type ContextMenuActionItem, type ContextMenuPosition, type ContextMenuProps, type DatePickerProps, type DateRange, DateRangePicker, type DateRangePickerProps, type DateRangePreset, Drawer, type DrawerProps, Dropdown, type DropdownItem, type DropdownProps, type ExpandRowOptions, FadingBase, type FadingBaseProps, Field, type FieldProps, type FieldShellOptions, type FieldSize, FileInput, type FileInputProps, Flex, type FlexAlign, type FlexDirection, type FlexJustify, type FlexProps, type FlexWrap, Grid, GridCard, type GridCardItem, type GridCardProps, type GridProps, Icon, IconButton, type IconButtonProps, List, type ListItem, type ListProps, LoadingSpinner, type LoadingSpinnerProps, Modal, type ModalProps, type NotificationPayload, NotificationProvider, NumberInput, type NumberInputProps, OpaqueGridCard, type OpaqueGridCardProps, OtpInput, type OtpInputProps, type PaginationOptions, Password, type PasswordProps, Portal, type PortalProps, RadioGroup, type RadioGroupProps, type RadioOption, Rating, type RatingProps, ScalableContainer, type ScalableContainerProps, SearchInput, type SearchInputProps, SegmentedControl, type SegmentedControlProps, type SegmentedOption, Sidebar, type SidebarItem, type SidebarProps, type SidebarSection, SkeletonBox, type SkeletonBoxProps, SkeletonCard, type SkeletonCardProps, SkeletonCircle, type SkeletonCircleProps, SkeletonText, type SkeletonTextProps, Slider, type SliderMark, type SliderProps, type SliderValue, type Spacing, Switch, type SwitchInputProps, type TabItem, Table, type TableColumn, type TableProps, Tabs, type TabsProps, TagsInput, type TagsInputProps, DatePicker as Temporal, type TemporalPickerProps, TextArea, type TextAreaProps, TextInput, type TextInputProps, type ThemeColors, type ThemeConfig, type ThemeDensity, type ThemeMotion, ThemeProvider, type ThemeProviderProps, type ThemeRadius, type ThemeShadows, ThemeSwitch, type ThemeSwitchProps, type ThemeTypography, TimePicker, type TimePickerProps, Tooltip, type TooltipProps, TooltipProvider, TopBar, type TopBarProps, Tree, type TreeItemClickPayload, type TreeNode, type TreeProps, TreeSelect, type TreeSelectProps, Typography, type TypographyAlign, type TypographyColor, type TypographyProps, type TypographyVariant, type TypographyWeight, Wizard, type WizardProps, type WizardStep, fieldShell, useNotification };

package/dist/index.js

@@ -9,12 +9,12 @@ import { useReducedMotion, AnimatePresence, motion } from 'framer-motion';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 import * as Accordion from '@radix-ui/react-accordion';
-import * as ToggleGroup from '@radix-ui/react-toggle-group';
 import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
 import * as Popover from '@radix-ui/react-popover';
 import * as SwitchPrimitive from '@radix-ui/react-switch';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import * as ToggleGroup from '@radix-ui/react-toggle-group';
 import * as SliderPrimitive from '@radix-ui/react-slider';
 
 var Moon = ({ color = "gray" }) => /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: color, viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: color, className: "w-8 h-8", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z" }) });
@@ -1143,38 +1143,6 @@ function Tree({
     item.key
   )) });
 }
-function ToggleButton({ items, onChange, activeKey }) {
-  return /* @__PURE__ */ jsx(
-    ToggleGroup.Root,
-    {
-      type: "single",
-      value: activeKey,
-      onValueChange: (val) => {
-        if (val) onChange(val);
-      },
-      className: "flex items-center",
-      children: items.map((item, index) => /* @__PURE__ */ jsx(
-        ToggleGroup.Item,
-        {
-          value: item.key,
-          "aria-label": typeof item.label === "string" ? item.label : item.key,
-          className: [
-            // Semantic tokens handle both light and dark modes via
-            // CSS vars — no `dark:` variants needed.
-            index === 0 && "rounded-l-lg border-r border-border",
-            index === items.length - 1 && "rounded-r-lg border-l border-border",
-            "p-2 cursor-pointer transition-colors duration-150 text-foreground-secondary",
-            "focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
-            "bg-surface hover:bg-surface-raised",
-            "data-[state=on]:bg-accent data-[state=on]:text-accent-fg"
-          ].filter(Boolean).join(" "),
-          children: item.icon ?? item.label
-        },
-        item.key
-      ))
-    }
-  );
-}
 var NotificationContext = createContext({
   open: () => void 0,
   close: () => void 0
@@ -1576,6 +1544,10 @@ var TOGGLE_POSITION_CLASS = {
 function ScalableContainer({
   width = "100%",
   height = "auto",
+  expandedWidth = "100%",
+  expandedHeight = "100%",
+  expanded,
+  onExpandedChange,
   children,
   assignClassOnClick,
   expandIcon,
@@ -1583,27 +1555,32 @@ function ScalableContainer({
   togglePosition = "top-right"
 }) {
   const containerRef = useRef(null);
-  const [isScaled, setScaled] = useState(false);
+  const [internalScaled, setInternalScaled] = useState(false);
+  const isScaled = expanded ?? internalScaled;
   const reduced = useReducedMotion();
   const onToggle = () => {
     const next = !isScaled;
-    setScaled(next);
-    requestAnimationFrame(() => containerRef.current?.scrollIntoView({ behavior: "smooth", block: "nearest" }));
+    if (expanded === void 0) setInternalScaled(next);
+    onExpandedChange?.(next);
+    if (next) {
+      window.setTimeout(
+        () => containerRef.current?.scrollIntoView({ behavior: "smooth", block: "nearest" }),
+        reduced ? 0 : 340
+      );
+    }
   };
   const wrapperClass = isScaled ? assignClassOnClick : void 0;
   return /* @__PURE__ */ jsxs(
     motion.div,
     {
       ref: containerRef,
-      layout: true,
       animate: {
-        width: isScaled ? "100%" : width,
-        height: isScaled ? "100%" : height
+        width: isScaled ? expandedWidth : width,
+        height: isScaled ? expandedHeight : height
       },
       transition: reduced ? { duration: 0 } : {
         width: { type: "tween", duration: 0.32, ease: [0.16, 1, 0.3, 1] },
-        height: { type: "tween", duration: 0.32, ease: [0.16, 1, 0.3, 1] },
-        layout: { duration: 0.32, ease: [0.16, 1, 0.3, 1] }
+        height: { type: "tween", duration: 0.32, ease: [0.16, 1, 0.3, 1] }
       },
       className: [
         "relative rounded-lg overflow-hidden",
@@ -2139,10 +2116,10 @@ var FIELD_SIZE = {
   md: { control: "h-control-md", text: "text-sm", padX: "px-3", gap: "gap-2" },
   lg: { control: "h-control-lg", text: "text-sm", padX: "px-3.5", gap: "gap-2.5" }
 };
-var FOCUS_WITHIN = "focus-within:outline-none focus-within:border-accent focus-within:ring-[3px] focus-within:ring-focus-ring";
-var FOCUS_ELEMENT = "focus:outline-none focus:border-accent focus:ring-[3px] focus:ring-focus-ring data-[state=open]:border-accent data-[state=open]:ring-[3px] data-[state=open]:ring-focus-ring";
-var FOCUS_WITHIN_ERROR = "focus-within:border-status-error focus-within:ring-focus-ring-error";
-var FOCUS_ELEMENT_ERROR = "focus:border-status-error focus:ring-focus-ring-error data-[state=open]:border-status-error data-[state=open]:ring-focus-ring-error";
+var FOCUS_WITHIN = "focus-within:outline-none focus-within:border-accent";
+var FOCUS_ELEMENT = "focus:outline-none focus:border-accent data-[state=open]:border-accent";
+var FOCUS_WITHIN_ERROR = "focus-within:border-status-error";
+var FOCUS_ELEMENT_ERROR = "focus:border-status-error data-[state=open]:border-status-error";
 function fieldShell({
   size = "md",
   hasError = false,
@@ -2353,7 +2330,7 @@ function Dropdown({
                 "aria-invalid": hasError || void 0,
                 "aria-describedby": hasError ? errorId : void 0,
                 style,
-                className: `flex items-center justify-between gap-1 cursor-pointer select-none min-h-[36px] px-3 py-1.5 ${fieldShell({ size, hasError, disabled, sized: false })}`,
+                className: `flex items-center justify-between gap-2 cursor-pointer select-none min-h-[36px] px-3 py-1.5 ${!style?.width ? "min-w-[200px]" : ""} ${fieldShell({ size, hasError, disabled, sized: false })}`,
                 tabIndex: disabled ? -1 : 0,
                 onKeyDown: (e) => {
                   if (disabled) return;
@@ -2363,31 +2340,25 @@ function Dropdown({
                   }
                 },
                 children: [
-                  /* @__PURE__ */ jsx(
-                    "div",
+                  /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0 flex flex-wrap items-center gap-1.5", children: !value || Array.isArray(value) && value.length === 0 ? /* @__PURE__ */ jsx("span", { className: "text-foreground-muted text-sm", children: placeholder }) : Array.isArray(value) ? value.map((val) => /* @__PURE__ */ jsx(
+                    Tag,
                     {
-                      className: `${!style?.width ? "min-w-[200px]" : ""} flex flex-wrap items-center gap-1.5`,
-                      children: !value || Array.isArray(value) && value.length === 0 ? /* @__PURE__ */ jsx("span", { className: "text-foreground-muted text-sm", children: placeholder }) : Array.isArray(value) ? value.map((val) => /* @__PURE__ */ jsx(
-                        Tag,
-                        {
-                          disabled,
-                          removeLabel: `Remove ${labelFor(val)}`,
-                          onRemove: () => removeSelected(val),
-                          children: labelFor(val)
-                        },
-                        String(val)
-                      )) : /* @__PURE__ */ jsx(
-                        Tag,
-                        {
-                          disabled,
-                          removeLabel: `Remove ${labelFor(value)}`,
-                          onRemove: () => removeSelected(value),
-                          children: labelFor(value)
-                        }
-                      )
+                      disabled,
+                      removeLabel: `Remove ${labelFor(val)}`,
+                      onRemove: () => removeSelected(val),
+                      children: labelFor(val)
+                    },
+                    String(val)
+                  )) : /* @__PURE__ */ jsx(
+                    Tag,
+                    {
+                      disabled,
+                      removeLabel: `Remove ${labelFor(value)}`,
+                      onRemove: () => removeSelected(value),
+                      children: labelFor(value)
                     }
-                  ),
-                  /* @__PURE__ */ jsx("div", { className: `flex-shrink-0 ml-2 text-foreground-muted transition-transform duration-200 ${open ? "rotate-180" : "rotate-0"}`, "aria-hidden": "true", children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "h-4 w-4", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) }) })
+                  ) }),
+                  /* @__PURE__ */ jsx("div", { className: `flex-shrink-0 text-foreground-muted transition-transform duration-200 ${open ? "rotate-180" : "rotate-0"}`, "aria-hidden": "true", children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "h-4 w-4", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) }) })
                 ]
               }
             ) }),
@@ -3645,7 +3616,8 @@ function RadioGroup({
   onChange,
   name,
   label,
-  orientation = "vertical",
+  layout = "vertical",
+  labelPosition = "right",
   size = "md",
   disabled,
   required,
@@ -3654,6 +3626,7 @@ function RadioGroup({
   const errorId = useId();
   const groupId = useId();
   const hasError = errorMessage != null;
+  const labelFirst = labelPosition === "left";
   return /* @__PURE__ */ jsx(
     Field,
     {
@@ -3674,44 +3647,51 @@ function RadioGroup({
           required,
           "aria-invalid": hasError || void 0,
           "aria-describedby": hasError ? errorId : void 0,
-          orientation,
-          className: orientation === "horizontal" ? "flex flex-row flex-wrap gap-5" : "flex flex-col gap-3",
+          orientation: layout,
+          className: layout === "horizontal" ? "flex flex-row flex-wrap gap-5" : "flex flex-col gap-3",
           children: options.map((opt) => {
             const itemId = `${groupId}-${opt.value}`;
-            return /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2.5", children: [
-              /* @__PURE__ */ jsx(
-                RadioGroupPrimitive.Item,
-                {
-                  id: itemId,
-                  value: opt.value,
-                  disabled: opt.disabled,
-                  className: [
-                    DOT_SIZE[size],
-                    "mt-0.5 flex-shrink-0 rounded-full border bg-surface transition-colors duration-150",
-                    "border-border-strong",
-                    "hover:border-accent",
-                    "data-[state=checked]:border-accent",
-                    "focus:outline-none focus-visible:ring-[3px] focus-visible:ring-focus-ring",
-                    "disabled:cursor-not-allowed disabled:opacity-50"
-                  ].join(" "),
-                  children: /* @__PURE__ */ jsx(RadioGroupPrimitive.Indicator, { className: "flex h-full w-full items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "block h-1/2 w-1/2 rounded-full bg-accent" }) })
-                }
-              ),
-              /* @__PURE__ */ jsxs(
-                "label",
-                {
-                  htmlFor: itemId,
-                  className: [
-                    "select-none",
-                    opt.disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"
-                  ].join(" "),
-                  children: [
-                    /* @__PURE__ */ jsx("span", { className: `block ${TEXT_SIZE[size]} text-foreground`, children: opt.label }),
-                    opt.description && /* @__PURE__ */ jsx("span", { className: "block text-xs text-foreground-secondary mt-0.5", children: opt.description })
-                  ]
-                }
-              )
-            ] }, opt.value);
+            const dot = /* @__PURE__ */ jsx(
+              RadioGroupPrimitive.Item,
+              {
+                id: itemId,
+                value: opt.value,
+                disabled: opt.disabled,
+                className: [
+                  DOT_SIZE[size],
+                  "mt-0.5 flex-shrink-0 rounded-full border bg-surface transition-colors duration-150",
+                  "border-border-strong",
+                  "hover:border-accent",
+                  "data-[state=checked]:border-accent",
+                  // Border-only focus, consistent with the fields.
+                  "focus:outline-none focus-visible:border-accent",
+                  "disabled:cursor-not-allowed disabled:opacity-50"
+                ].join(" "),
+                children: /* @__PURE__ */ jsx(RadioGroupPrimitive.Indicator, { className: "flex h-full w-full items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "block h-1/2 w-1/2 rounded-full bg-accent" }) })
+              }
+            );
+            const labelEl = /* @__PURE__ */ jsxs(
+              "label",
+              {
+                htmlFor: itemId,
+                className: [
+                  "select-none",
+                  opt.disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer",
+                  labelFirst ? "text-right" : ""
+                ].filter(Boolean).join(" "),
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: `block ${TEXT_SIZE[size]} text-foreground`, children: opt.label }),
+                  opt.description && /* @__PURE__ */ jsx("span", { className: "block text-xs text-foreground-secondary mt-0.5", children: opt.description })
+                ]
+              }
+            );
+            return /* @__PURE__ */ jsx("div", { className: "flex items-start gap-2.5", children: labelFirst ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              labelEl,
+              dot
+            ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              dot,
+              labelEl
+            ] }) }, opt.value);
           })
         }
       )
@@ -4442,11 +4422,11 @@ function DatePicker({
   };
   const displayValue = value ? format(value) : "";
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
-    /* @__PURE__ */ jsxs("div", { className: `flex ${layout === "vertical" ? "flex-col gap-1" : "flex-row items-center gap-2"}`, children: [
+    /* @__PURE__ */ jsxs("div", { className: `flex ${layout === "vertical" ? "flex-col gap-1.5" : "flex-row items-start gap-3"}`, children: [
       label && /* @__PURE__ */ jsx(
         "label",
         {
-          className: "text-sm font-medium ml-1 max-content select-none text-foreground",
+          className: `text-sm font-medium select-none text-foreground ${layout === "horizontal" ? "mt-2 flex-shrink-0 whitespace-nowrap" : ""}`,
           htmlFor,
           children: label
         }
@@ -5102,10 +5082,11 @@ function OtpInput({
         className: [
           BOX_SIZE[size],
           "text-center font-medium rounded-lg border bg-surface text-foreground",
-          "transition-[border-color,box-shadow] duration-150",
+          "transition-[border-color] duration-150",
           hasError ? "border-status-error" : "border-border",
           "hover:border-border-strong",
-          "focus:outline-none focus:border-accent focus:ring-[3px] focus:ring-focus-ring",
+          // Border-only focus, consistent with every field (no clip-prone ring).
+          "focus:outline-none focus:border-accent",
           "disabled:bg-surface-raised disabled:text-foreground-muted disabled:cursor-not-allowed"
         ].join(" ")
       }
@@ -5646,6 +5627,6 @@ function ColorPicker({
   ] });
 }
 
-export { AppShell, AutoComplete, Avatar, Box, Button, Catalog, CatalogCarousel, CatalogGrid, Checkbox, ColorPicker, ContextMenu, DateRangePicker, Drawer, Dropdown, FadingBase, Field, FileInput, Flex, Grid2 as Grid, GridCard, icons_default as Icon, IconButton, List2 as List, LoadingSpinner, Modal, NotificationProvider, NumberInput, OpaqueGridCard, OtpInput, Password, Portal, RadioGroup, Rating, ScalableContainer, SearchInput_default as SearchInput, SegmentedControl, Sidebar, SkeletonBox, SkeletonCard, SkeletonCircle, SkeletonText, Slider, Switch, Table, Tabs, TagsInput, DatePicker as Temporal, TextArea, TextInput, ThemeProvider, ThemeSwitch, TimePicker, ToggleButton, Tooltip, TooltipProvider, TopBar, Tree, TreeSelect, Typography, Wizard, fieldShell, useNotification };
+export { AppShell, AutoComplete, Avatar, Box, Button, Catalog, CatalogCarousel, CatalogGrid, Checkbox, ColorPicker, ContextMenu, DateRangePicker, Drawer, Dropdown, FadingBase, Field, FileInput, Flex, Grid2 as Grid, GridCard, icons_default as Icon, IconButton, List2 as List, LoadingSpinner, Modal, NotificationProvider, NumberInput, OpaqueGridCard, OtpInput, Password, Portal, RadioGroup, Rating, ScalableContainer, SearchInput_default as SearchInput, SegmentedControl, Sidebar, SkeletonBox, SkeletonCard, SkeletonCircle, SkeletonText, Slider, Switch, Table, Tabs, TagsInput, DatePicker as Temporal, TextArea, TextInput, ThemeProvider, ThemeSwitch, TimePicker, Tooltip, TooltipProvider, TopBar, Tree, TreeSelect, Typography, Wizard, fieldShell, useNotification };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map