@tcn/ui 0.12.3 → 0.12.5

package/src/surfaces/confirm/confirm.tsx

@@ -8,11 +8,12 @@ import { BodyText, Title } from '../../typography/index.js';
 import styles from './confirm.module.css';
 import { Box, type BoxProps } from '../../stacks/box/box.js';
 
-export interface ConfirmProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface ConfirmProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
   open?: boolean;
   graphic?: React.ReactNode;
-  title?: string;
-  description?: string;
+  title?: React.ReactNode;
+  description?: React.ReactNode;
   actions?: React.ReactNode;
   veilProps?: BoxProps;
 }
@@ -54,6 +55,24 @@ export const Confirm = React.forwardRef(function Confirm(
     setShake(true);
   }
 
+  const descriptionElement =
+    typeof description === 'string' ? (
+      <BodyText className="tcn-confirm-description" hierarchy="tertiary">
+        {description}
+      </BodyText>
+    ) : (
+      description
+    );
+
+  const titleElement =
+    typeof title === 'string' ? (
+      <Title className="tcn-confirm-title" emphasis="strong" size="sm">
+        {title}
+      </Title>
+    ) : (
+      title
+    );
+
   return (
     <>
       {open && (
@@ -68,12 +87,8 @@ export const Confirm = React.forwardRef(function Confirm(
             >
               <VStack hAlign="center">
                 {graphic}
-                <Title className="tcn-confirm-title" emphasis="strong" size="sm">
-                  {title}
-                </Title>
-                <BodyText className="tcn-confirm-description" hierarchy="tertiary">
-                  {description}
-                </BodyText>
+                {titleElement}
+                {descriptionElement}
                 <Spacer height="16px" />
                 <Box
                   className={clsx(styles.actions, 'tcn-confirm-actions')}

package/src/surfaces/modal/__stories__/modal.stories.tsx

@@ -3,7 +3,7 @@ import { Button } from '../../../actions/index.js';
 import { Footer, Header, UtilityBar, VBody } from '../../../layouts/index.js';
 import { ZStack } from '../../../stacks/z_stack.js';
 import { BodyText, Title } from '../../../typography/index.js';
-import { Modal } from '../modal.js';
+import { Modal, type ModalProps } from '../modal.js';
 import { Spacer } from '../../../stacks/index.js';
 import { CrossIcon } from '@tcn/icons/cross_icon.js';
 import { BugIcon } from '@tcn/icons/bug_icon.js';
@@ -12,9 +12,61 @@ export default {
   title: 'Surfaces/Modal',
   component: Modal,
   tags: ['autodocs'],
+  argTypes: {
+    draggable: {
+      control: 'boolean',
+    },
+    veil: {
+      control: 'boolean',
+    },
+    resizable: {
+      control: 'boolean',
+    },
+    width: {
+      control: 'text',
+    },
+    height: {
+      control: 'text',
+    },
+    minWidth: {
+      control: 'text',
+    },
+    minHeight: {
+      control: 'text',
+    },
+    maxWidth: {
+      control: 'text',
+    },
+    maxHeight: {
+      control: 'text',
+    },
+  },
 };
 
-export const ModalStory = () => {
+type ModalStoryProps = Pick<
+  ModalProps,
+  | 'resizable'
+  | 'draggable'
+  | 'veil'
+  | 'width'
+  | 'height'
+  | 'minWidth'
+  | 'minHeight'
+  | 'maxWidth'
+  | 'maxHeight'
+>;
+
+export const Baseline = ({
+  resizable,
+  draggable,
+  veil,
+  width = '400px',
+  height = '500px',
+  minWidth,
+  minHeight,
+  maxWidth,
+  maxHeight,
+}: ModalStoryProps) => {
   const [isOpen, setIsOpen] = useState(false);
 
   function toggle() {
@@ -27,7 +79,20 @@ export const ModalStory = () => {
         {isOpen ? 'Close' : 'Open'}
       </Button>
 
-      <Modal isOpen={isOpen} width="400px" height="500px">
+      <Modal
+        isOpen={isOpen}
+        width={width}
+        height={height}
+        draggable={draggable}
+        veil={veil}
+        resizable={resizable}
+        minWidth={minWidth}
+        minHeight={minHeight}
+        maxWidth={maxWidth}
+        maxHeight={maxHeight}
+      >
+        {/* Add a drag handle around the areas of the modal you want to be draggable (usually the header) */}
+        {/* <DragHandle> */}
         <Header>
           <Title>Modal Title</Title>
           <Spacer />
@@ -41,6 +106,8 @@ export const ModalStory = () => {
             <CrossIcon />
           </Button>
         </Header>
+        {/* </DragHandle> */}
+
         <UtilityBar>
           <Title>Utility Bar</Title>
           <Spacer />

package/src/surfaces/modal/modal.tsx

@@ -9,15 +9,24 @@ import styles from './modal.module.css';
 export type ModalProps = FrameProps;
 
 export const Modal = React.forwardRef<HTMLElement, ModalProps>(function Modal(
-  { children, className, isOpen, draggable = false, veil = true, ...props }: ModalProps,
+  {
+    children,
+    className,
+    isOpen,
+    veil = true,
+    resizable = false,
+    draggable = false,
+    ...props
+  }: ModalProps,
   ref
 ) {
   return (
     <Frame
       ref={ref}
       isOpen={isOpen}
-      draggable={draggable}
       veil={veil}
+      draggable={draggable}
+      resizable={resizable}
       className={clsx(styles['modal'], 'tcn-surface', 'tcn-modal', className)}
       {...props}
     >

package/src/surfaces/window/window.stories.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { Window } from './window.js';
+import { Window, type WindowProps } from './window.js';
 import { Footer, Header, UtilityBar, VBody } from '../../layouts/index.js';
 import { BodyText, Title } from '../../typography/index.js';
 import { Spacer } from '../../stacks/spacer.js';
@@ -13,9 +13,61 @@ export default {
   title: 'Surfaces/Window',
   component: Window,
   tags: ['autodocs'],
+  argTypes: {
+    draggable: {
+      control: 'boolean',
+    },
+    veil: {
+      control: 'boolean',
+    },
+    resizable: {
+      control: 'boolean',
+    },
+    width: {
+      control: 'text',
+    },
+    height: {
+      control: 'text',
+    },
+    minWidth: {
+      control: 'text',
+    },
+    minHeight: {
+      control: 'text',
+    },
+    maxWidth: {
+      control: 'text',
+    },
+    maxHeight: {
+      control: 'text',
+    },
+  },
 };
 
-export const WindowStory = () => {
+type WindowStoryProps = Pick<
+  WindowProps,
+  | 'resizable'
+  | 'draggable'
+  | 'veil'
+  | 'width'
+  | 'height'
+  | 'minWidth'
+  | 'minHeight'
+  | 'maxWidth'
+  | 'maxHeight'
+>;
+
+export const Baseline = ({
+  resizable,
+  draggable,
+  veil,
+  width = '400px',
+  height = '400px',
+  minWidth = 'min-content',
+  minHeight = '30%',
+  maxWidth = 500,
+  maxHeight = '500px',
+}: WindowStoryProps) => {
   const [isOpen, setIsOpen] = useState(false);
 
   function toggle() {
@@ -27,13 +79,17 @@ export const WindowStory = () => {
       <Button onClick={toggle}>{isOpen ? 'Close' : 'Open'}</Button>
       <Window
         isOpen={isOpen}
-        width="400px"
-        height="500px"
-        minWidth="min-content"
-        minHeight="300px"
-        maxWidth="600px"
-        maxHeight="600px"
+        draggable={draggable}
+        veil={veil}
+        resizable={resizable}
+        width={width}
+        height={height}
+        minWidth={minWidth}
+        minHeight={minHeight}
+        maxWidth={maxWidth}
+        maxHeight={maxHeight}
       >
+        {/* Place the drag handle around the areas of the window you want to be draggable (usually the header) */}
         <DragHandle>
           <Header>
             <Title>Window Title</Title>

package/src/surfaces/window/window.tsx

@@ -13,27 +13,24 @@ export const Window = React.forwardRef<HTMLElement, WindowProps>(function Window
     children,
     className,
     isOpen,
-    draggable = true,
-    resizable = true,
     veil = false,
-    width,
-    height,
+    draggable = true,
+    resizable = false,
     ...props
   }: WindowProps,
   ref
 ) {
   return (
     <Frame
+      ref={ref}
       isOpen={isOpen}
-      draggable={draggable}
       veil={veil}
+      draggable={draggable}
+      resizable={resizable}
       className={clsx(styles['window'], 'tcn-surface', 'tcn-window', className)}
-      width={width}
-      height={height}
-      ref={ref}
       {...props}
     >
-      <Scaffold width="100%" height="100%" className={'tcn-window-scaffold'}>
+      <Scaffold className={'tcn-window-scaffold'} width="100%" height="100%">
         {children}
       </Scaffold>
     </Frame>

package/src/themes/stories/button_showcase.tsx

@@ -1,14 +1,7 @@
-import { useState } from 'react';
 import { CrossIcon } from '@tcn/icons/cross_icon.js';
 import { PhoneIcon } from '@tcn/icons/phone_icon.js';
 import { BluetoothIcon } from '@tcn/icons/bluetooth_icon.js';
-import {
-  Button,
-  ButtonGroup,
-  SelectGroup,
-  SingleSelectGroup,
-  SlimButton,
-} from '../../actions/index.js';
+import { Button, ButtonGroup } from '../../actions/index.js';
 import { HStack } from '../../stacks/h_stack.js';
 import { VStack } from '../../stacks/v_stack.js';
 import { Spacer } from '../../stacks/spacer.js';
@@ -17,12 +10,6 @@ import { FieldSet } from '../../form/field_set/field_set.js';
 import { BodyText } from '../../typography/index.js';
 
 export function ButtonShowcase() {
-  const [singleSelectedOptions, setSingleSelectedOptions] = useState<string>('option1');
-  const [multiselectOptions, setMultiselectOptions] = useState<string[]>([
-    'option1',
-    'option2',
-  ]);
-
   return (
     <FieldSet legend="Button Showcase">
       {/* Basic Buttons */}
@@ -57,60 +44,41 @@ export function ButtonShowcase() {
         </VStack>
       </Field>
 
-      {/* Select Groups */}
-      <Field label="Select Groups">
-        <VStack width="400px" gap="20px" hAlign="center">
-          <SingleSelectGroup
-            value={singleSelectedOptions}
-            onChange={setSingleSelectedOptions}
-          >
-            <option value="option1">Option 1</option>
-            <option value="option2">Option 2</option>
-            <option value="option3">Option 3</option>
-          </SingleSelectGroup>
-          <SelectGroup value={multiselectOptions} onChange={setMultiselectOptions}>
-            <option value="option1">Option 1</option>
-            <option value="option2">Option 2</option>
-            <option value="option3">Option 3</option>
-          </SelectGroup>
-        </VStack>
-      </Field>
-
       {/* Slim Buttons */}
       <Field label="Slim Buttons">
         <VStack width="400px" gap="20px" hAlign="center">
           <HStack gap="8px" hAlign="center">
-            <SlimButton size="sm" hierarchy="primary">
+            <Button utility size="sm" hierarchy="primary">
               <CrossIcon size="sm" />
-            </SlimButton>
-            <SlimButton size="md" hierarchy="primary">
+            </Button>
+            <Button utility size="md" hierarchy="primary">
               <CrossIcon size="md" />
-            </SlimButton>
-            <SlimButton size="lg" hierarchy="primary">
+            </Button>
+            <Button utility size="lg" hierarchy="primary">
               <CrossIcon size="lg" />
-            </SlimButton>
+            </Button>
           </HStack>
           <HStack gap="8px" hAlign="center">
-            <SlimButton size="sm" hierarchy="secondary">
+            <Button utility size="sm" hierarchy="secondary">
               <PhoneIcon size="sm" />
-            </SlimButton>
-            <SlimButton size="md" hierarchy="secondary">
+            </Button>
+            <Button utility size="md" hierarchy="secondary">
               <PhoneIcon size="md" />
-            </SlimButton>
-            <SlimButton size="lg" hierarchy="secondary">
+            </Button>
+            <Button utility size="lg" hierarchy="secondary">
               <PhoneIcon size="lg" />
-            </SlimButton>
+            </Button>
           </HStack>
           <HStack gap="8px" hAlign="center">
-            <SlimButton size="sm" hierarchy="tertiary">
+            <Button utility size="sm" hierarchy="tertiary">
               <BluetoothIcon size="sm" />
-            </SlimButton>
-            <SlimButton size="md" hierarchy="tertiary">
+            </Button>
+            <Button utility size="md" hierarchy="tertiary">
               <BluetoothIcon size="md" />
-            </SlimButton>
-            <SlimButton size="lg" hierarchy="tertiary">
+            </Button>
+            <Button utility size="lg" hierarchy="tertiary">
               <BluetoothIcon size="lg" />
-            </SlimButton>
+            </Button>
           </HStack>
         </VStack>
       </Field>

package/src/themes/stylesheets/reset.css

@@ -91,17 +91,17 @@
     vertical-align: baseline;
   }
   /* HTML5 display-role reset for older browsers */
+  /* FIXME: sometimes reset breaks stacks display value (flex) */
+  /* header, section */
   article,
   aside,
   details,
   figcaption,
   figure,
   footer,
-  header,
   hgroup,
   menu,
-  nav,
-  section {
+  nav {
     display: block;
   }
   body {

package/src/themes/themes/ergo/ergo_theme.css

@@ -48,6 +48,7 @@
     --font-size: 12px;
 
     /* Spacing */
+    --gap-xs: 2px;
     --gap-small: 4px;
     --gap-medium: 8px;
     --gap-large: 16px;
@@ -563,17 +564,21 @@
 
   /* Inline  */
   .tcn-tabs-bar[data-variant="inline"] {
+    font-size: 12px;
     min-width: min-content;
     width: auto;
     flex-grow: 0;
     border-radius: var(--shape-radius-medium);
     border: 1px solid var(--on-material);
+    padding-block: 1px;
+    padding-inline: 2px;
 
     .tcn-tabs-list {
-      gap: var(--gap-small);
-      padding: var(--padding-small);
+      height: 20px;
+      gap: var(--gap-xs);
       .tcn-tab-item {
         border-radius: var(--shape-radius-medium);
+        min-height: 20px;
       }
     }
   }
@@ -712,6 +717,9 @@
   }
 
   .tcn-rail {
+    :where(.tcn-rail-stack) {
+      gap: var(--gap-medium);
+    }
     :where(.tcn-body) {
       gap: var(--gap-medium);
     }
@@ -856,9 +864,25 @@
     background-color: var(--background-color-primary);
   }
 
+  .tcn-bar {
+    gap: var(--gap-medium);
+
+    /* Add a divider between groups unless there is a spacer after a group */
+    :where(.tcn-group:not(:last-child):not(:has(+ .tcn-spacer)))::after {
+      content: "";
+      display: block;
+      min-width: 2px;
+      height: 18px;
+      background: var(--ergo-grey);
+      border-radius: var(--shape-radius-small);
+      align-self: center;
+    }
+  }
+
   /* PANEL */
   .tcn-panel {
-    background-color: var(--background-color-primary);
+    --material: var(--background-color-primary);
+    background-color: var(--material);
     border-radius: var(--shape-radius-medium);
     overflow: hidden;
   }
@@ -1279,7 +1303,9 @@
   .tcn-switch-wrapper,
   .tcn-date-picker,
   .tcn-date-picker-year-selector,
-  .tcn-radio {
+  .tcn-radio,
+  .tcn-suggestion-list-search-input,
+  .tcn-suggestion-list {
     --accent-color: var(--ergo-primary);
   }
 }

package/dist/actions/button/select_group/select_group.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"select_group.d.ts","sourceRoot":"","sources":["../../../../src/actions/button/select_group/select_group.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,6BAA6B,CAAC;AAEzE,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,MAAM,yBAAyB,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;AACnE,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,MAAM,gBAAgB,GAAG,IAAI,CACjC,qBAAqB,CAAC,mBAAmB,EAAE,KAAK,CAAC,EACjD,UAAU,CACX,GAAG;IACF,QAAQ,CAAC,EAAE,yBAAyB,CAAC;IACrC,QAAQ,EACJ,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,GACrC,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,EAAE,CAAC;CAC7C,CAAC;AAEF,eAAO,MAAM,WAAW,sGAsDtB,CAAC"}

package/dist/actions/button/select_group/select_group.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"select_group.js","sources":["../../../../src/actions/button/select_group/select_group.tsx"],"sourcesContent":["import { HStack } from '../../../stacks/h_stack.js';\nimport type { WithDetailedHTMLProps } from '../../../stacks/types/as.js';\nimport { clsx } from 'clsx';\nimport React from 'react';\nimport { Button } from '../button/button.js';\nimport styles from './select_group.module.css';\n\nexport type SelectGroupChangeCallback = (values: string[]) => void;\nexport interface SelectGroupOwnProps {\n  value: string[];\n  disabled?: boolean;\n}\n\nexport type SelectGroupProps = Omit<\n  WithDetailedHTMLProps<SelectGroupOwnProps, 'div'>,\n  'onChange'\n> & {\n  onChange?: SelectGroupChangeCallback;\n  children:\n    | React.ReactElement<HTMLOptionElement>\n    | React.ReactElement<HTMLOptionElement>[];\n};\n\nexport const SelectGroup = React.forwardRef(function ButtonGroup(\n  { children, value, className, onChange, disabled = false, ...props }: SelectGroupProps,\n  ref: React.Ref<HTMLDivElement>\n) {\n  const options: React.ReactElement<any>[] = Array.isArray(children)\n    ? children\n    : [children];\n\n  const handleChange = (option: string, isSelected: boolean) => {\n    if (disabled) return;\n    const next = [...value];\n    if (isSelected) {\n      const index = value.indexOf(option);\n      index > -1 && next.splice(index, 1);\n    } else {\n      next.push(option);\n    }\n    onChange?.(next);\n  };\n\n  return (\n    <HStack\n      ref={ref}\n      as=\"div\"\n      inline\n      width=\"auto\"\n      height=\"auto\"\n      data-is-disabled={disabled}\n      className={clsx(styles['select-group'], 'tcn-select-group', className)}\n      {...props}\n    >\n      {options.map((option, i) => {\n        const isSelected = value.includes(option.props.value);\n        const select = () => {\n          handleChange(option.props.value, isSelected);\n        };\n\n        return (\n          <React.Fragment key={i}>\n            <Button\n              disabled={disabled || option.props.disabled}\n              data-is-disabled={disabled || option.props.disabled}\n              className={clsx(styles['select-group-option'], 'tcn-select-group-option')}\n              hierarchy={isSelected ? 'primary' : 'secondary'}\n              onClick={select}\n              value={option.props.value}\n            >\n              {option.props.children}\n            </Button>\n          </React.Fragment>\n        );\n      })}\n    </HStack>\n  );\n});\n"],"names":["SelectGroup","React","children","value","className","onChange","disabled","props","ref","options","handleChange","option","isSelected","next","index","jsx","HStack","clsx","styles","i","select","Button"],"mappings":";;;;;4LAuBaA,IAAcC,EAAM,WAAW,SAC1C,EAAE,UAAAC,GAAU,OAAAC,GAAO,WAAAC,GAAW,UAAAC,GAAU,UAAAC,IAAW,IAAO,GAAGC,EAAA,GAC7DC,GACA;AACA,QAAMC,IAAqC,MAAM,QAAQP,CAAQ,IAC7DA,IACA,CAACA,CAAQ,GAEPQ,IAAe,CAACC,GAAgBC,MAAwB;AAC5D,QAAIN,EAAU;AACd,UAAMO,IAAO,CAAC,GAAGV,CAAK;AACtB,QAAIS,GAAY;AACd,YAAME,IAAQX,EAAM,QAAQQ,CAAM;AAClC,MAAAG,IAAQ,MAAMD,EAAK,OAAOC,GAAO,CAAC;AAAA,IACpC;AACE,MAAAD,EAAK,KAAKF,CAAM;AAElB,IAAAN,IAAWQ,CAAI;AAAA,EACjB;AAEA,SACE,gBAAAE;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAR;AAAA,MACA,IAAG;AAAA,MACH,QAAM;AAAA,MACN,OAAM;AAAA,MACN,QAAO;AAAA,MACP,oBAAkBF;AAAA,MAClB,WAAWW,EAAKC,EAAO,cAAc,GAAG,oBAAoBd,CAAS;AAAA,MACpE,GAAGG;AAAA,MAEH,UAAAE,EAAQ,IAAI,CAACE,GAAQQ,MAAM;AAC1B,cAAMP,IAAaT,EAAM,SAASQ,EAAO,MAAM,KAAK,GAC9CS,IAAS,MAAM;AACnB,UAAAV,EAAaC,EAAO,MAAM,OAAOC,CAAU;AAAA,QAC7C;AAEA,eACE,gBAAAG,EAACd,EAAM,UAAN,EACC,UAAA,gBAAAc;AAAA,UAACM;AAAA,UAAA;AAAA,YACC,UAAUf,KAAYK,EAAO,MAAM;AAAA,YACnC,oBAAkBL,KAAYK,EAAO,MAAM;AAAA,YAC3C,WAAWM,EAAKC,EAAO,qBAAqB,GAAG,yBAAyB;AAAA,YACxE,WAAWN,IAAa,YAAY;AAAA,YACpC,SAASQ;AAAA,YACT,OAAOT,EAAO,MAAM;AAAA,YAEnB,YAAO,MAAM;AAAA,UAAA;AAAA,QAAA,KATGQ,CAWrB;AAAA,MAEJ,CAAC;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}

package/dist/actions/button/select_group/single_select_group.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"single_select_group.d.ts","sourceRoot":"","sources":["../../../../src/actions/button/select_group/single_select_group.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAe,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAElE,MAAM,WAAW,yBAAyB;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAED,MAAM,MAAM,sBAAsB,GAAG,IAAI,CACvC,gBAAgB,EAChB,OAAO,GAAG,UAAU,GAAG,mBAAmB,CAC3C,GACC,yBAAyB,CAAC;AAE5B,eAAO,MAAM,iBAAiB,4GAgC5B,CAAC"}

package/dist/actions/button/select_group/single_select_group.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"single_select_group.js","sources":["../../../../src/actions/button/select_group/single_select_group.tsx"],"sourcesContent":["import React from 'react';\nimport { SelectGroup, SelectGroupProps } from './select_group.js';\n\nexport interface SingleSelectGroupOwnProps {\n  value: string;\n  disabled?: boolean;\n  onChange?: (value: string) => void;\n}\n\nexport type SingleSelectGroupProps = Omit<\n  SelectGroupProps,\n  'value' | 'onChange' | 'enableMultiselect'\n> &\n  SingleSelectGroupOwnProps;\n\nexport const SingleSelectGroup = React.forwardRef(function SingleSelectGroup(\n  {\n    children,\n    value,\n    className,\n    onChange,\n    disabled = false,\n    ...props\n  }: SingleSelectGroupProps,\n  ref: React.Ref<HTMLDivElement>\n) {\n  const handleChange = (values: string[]) => {\n    if (values.length === 0) {\n      return;\n    }\n    // For single select, we take the last selected value or empty string if none selected\n    const singleValue = values.length > 0 ? values[values.length - 1] : '';\n    onChange?.(singleValue);\n  };\n\n  return (\n    <SelectGroup\n      ref={ref}\n      value={value != null ? [value] : []}\n      onChange={handleChange}\n      disabled={disabled}\n      className={className}\n      {...props}\n    >\n      {children}\n    </SelectGroup>\n  );\n});\n"],"names":["SingleSelectGroup","React","children","value","className","onChange","disabled","props","ref","handleChange","values","singleValue","jsx","SelectGroup"],"mappings":";;;AAeO,MAAMA,IAAoBC,EAAM,WAAW,SAChD;AAAA,EACE,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAe,CAACC,MAAqB;AACzC,QAAIA,EAAO,WAAW;AACpB;AAGF,UAAMC,IAAcD,EAAO,SAAS,IAAIA,EAAOA,EAAO,SAAS,CAAC,IAAI;AACpE,IAAAL,IAAWM,CAAW;AAAA,EACxB;AAEA,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAL;AAAA,MACA,OAAOL,KAAS,OAAO,CAACA,CAAK,IAAI,CAAA;AAAA,MACjC,UAAUM;AAAA,MACV,UAAAH;AAAA,MACA,WAAAF;AAAA,MACC,GAAGG;AAAA,MAEH,UAAAL;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}