@misoto22/kioku-ui 0.0.0 → 0.2.0

package/dist/CodeBlock/CodeBlock.js

@@ -0,0 +1,88 @@
+import * as stylex from '@stylexjs/stylex';
+import { semanticTokens } from '../authoring.stylex.js';
+import { scrolling } from '../scrolling/index.js';
+import { useClipboard } from '../hooks/useClipboard.js';
+import { Button } from '../Button/index.js';
+
+// The gutter the copy control needs. It is not the control's height — the
+// control is a Button carrying a word, and the word changes: "Copy" becomes
+// "Copied" the moment it is pressed, and a translation may be longer than
+// both. Measuring it as one small square left a long line running under the
+// button, which is what a gutter exists to prevent. Six steps of the outer
+// scale clears the longer label at either density with room to spare, and it
+// is still written as a relationship rather than as a pixel count.
+import "../styles/stylex.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const copyGutter = `calc(3 * ${semanticTokens.spacing2xl})`;
+const styles = {
+  pre: {
+    kMv6JI: "x7ohnf4",
+    kGuDYH: "xltg2ad",
+    kcqcaj: "xss6m8b",
+    kb6lSQ: "x1kbjp2h",
+    kLWn49: "x1ezks3f",
+    kqGvvJ: "x10im51j",
+    kXHlph: "xw2csxc",
+    k8WAf4: "x1lr58ck",
+    kZCmMZ: "x32qhjx",
+    kwRFfy: "xqag6eq",
+    $$css: true
+  },
+  wrap: {
+    kHjlTd: "xj0a0fe",
+    kZCmMZ: "x1msofp9",
+    kTHuQy: "x1g6ojy1",
+    khDVqt: "x126k92a",
+    $$css: true
+  }
+};
+
+/** Props for a block of preformatted source. */
+
+/**
+ * Shows a block of source. The copy control reports its own result, so a
+ * reader knows the copy happened without watching the clipboard.
+ */
+export function CodeBlock({
+  code,
+  copiedLabel = 'Copied',
+  copyLabel = 'Copy',
+  language,
+  wrap = false,
+  ...props
+}) {
+  const {
+    copied,
+    copy
+  } = useClipboard();
+  return /*#__PURE__*/_jsxs("div", {
+    ...props,
+    ...{
+      className: "xavu78a x1l6hjkl xng3xce xrvj5dj x1n2onr6"
+    },
+    children: [/*#__PURE__*/_jsx("pre", {
+      ...stylex.props(styles.pre, scrolling.region, wrap && styles.wrap),
+      children: /*#__PURE__*/_jsx("code", {
+        ...(language === undefined ? {} : {
+          'data-language': language
+        }),
+        ...{
+          className: "x1y4yzzg x7ohnf4 xltg2ad xss6m8b x1kbjp2h x1ezks3f"
+        },
+        children: code
+      })
+    }), /*#__PURE__*/_jsx("span", {
+      ...{
+        className: "x532zwu xyxvza1 x10l6tqk"
+      },
+      children: /*#__PURE__*/_jsx(Button, {
+        onClick: () => {
+          void copy(code);
+        },
+        size: "sm",
+        variant: "secondary",
+        children: copied ? copiedLabel : copyLabel
+      })
+    })]
+  });
+}

package/dist/CodeBlock/index.d.ts

@@ -0,0 +1 @@
+export { CodeBlock, type CodeBlockProps } from './CodeBlock.js';

package/dist/CodeBlock/index.js

@@ -0,0 +1,2 @@
+import "../styles/stylex.css";
+export { CodeBlock } from './CodeBlock.js';

package/dist/Collapsible/Collapsible.d.ts

@@ -0,0 +1,23 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+type SharedCollapsibleProps = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'className' | 'onChange'> & {
+    readonly children: ReactNode;
+    readonly label: ReactNode;
+    readonly onOpenChange?: (open: boolean) => void;
+};
+type ControlledCollapsibleProps = SharedCollapsibleProps & {
+    readonly defaultOpen?: never;
+    readonly onOpenChange: (open: boolean) => void;
+    readonly open: boolean;
+};
+type UncontrolledCollapsibleProps = SharedCollapsibleProps & {
+    readonly defaultOpen?: boolean;
+    readonly open?: never;
+};
+/** Props for a section that can be folded away. */
+export type CollapsibleProps = ControlledCollapsibleProps | UncontrolledCollapsibleProps;
+/**
+ * Folds a section away behind its own heading. The panel stays in the DOM
+ * and is hidden, so a find-in-page match still reveals where the text lives.
+ */
+export declare function Collapsible({ children, defaultOpen, label, onOpenChange, open, ...props }: CollapsibleProps): import("react").JSX.Element;
+export {};

package/dist/Collapsible/Collapsible.doc.d.ts

@@ -0,0 +1,11 @@
+export declare const collapsibleDoc: {
+    name: string;
+    description: string;
+    props: {
+        name: string;
+        description: string;
+    }[];
+    inheritedProps: string[];
+    example: string;
+    storyId: string;
+};

package/dist/Collapsible/Collapsible.doc.js

@@ -0,0 +1,24 @@
+import "../styles/stylex.css";
+export const collapsibleDoc = {
+  name: 'Collapsible',
+  description: 'Folds a section away behind its own heading.',
+  props: [{
+    name: 'children',
+    description: 'Supplies the panel content.'
+  }, {
+    name: 'defaultOpen',
+    description: 'Sets the initial uncontrolled state.'
+  }, {
+    name: 'label',
+    description: 'Names the section on the trigger.'
+  }, {
+    name: 'onOpenChange',
+    description: 'Receives the next open state.'
+  }, {
+    name: 'open',
+    description: 'Controls whether the panel is shown.'
+  }],
+  inheritedProps: ['HTMLAttributes<HTMLDivElement> except children, className, and onChange'],
+  example: '<Collapsible label="Advanced">…</Collapsible>',
+  storyId: 'core-collapsible--default'
+};

package/dist/Collapsible/Collapsible.js

@@ -0,0 +1,93 @@
+import * as stylex from '@stylexjs/stylex';
+import { useId, useState } from 'react';
+import { semanticTokens } from '../authoring.stylex.js';
+import { Icon } from '../Icon/index.js';
+
+// The panel grows from a closed track to an open one. `grid-template-rows` is
+// the only height that interpolates, so the reveal is a grid, not a `height`.
+import "../styles/stylex.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const reveal = "xg2jgno-B";
+/** Props for a section that can be folded away. */
+
+/**
+ * Folds a section away behind its own heading. The panel stays in the DOM
+ * and is hidden, so a find-in-page match still reveals where the text lives.
+ */
+export function Collapsible({
+  children,
+  defaultOpen = false,
+  label,
+  onOpenChange,
+  open,
+  ...props
+}) {
+  const panelId = useId();
+  const triggerId = useId();
+  const [internalOpen, setInternalOpen] = useState(defaultOpen);
+  const isOpen = open ?? internalOpen;
+  return /*#__PURE__*/_jsxs("div", {
+    ...props,
+    ...{
+      className: "xrvj5dj xj0sio9 x1ap6kct"
+    },
+    children: [/*#__PURE__*/_jsxs("button", {
+      "aria-controls": panelId,
+      "aria-expanded": isOpen,
+      id: triggerId,
+      onClick: () => {
+        const next = !isOpen;
+        if (open === undefined) {
+          setInternalOpen(next);
+        }
+        onOpenChange?.(next);
+      },
+      ...{
+        className: "x6s0dn4 xjbqb8w x8kq9my xng3xce xc342km x1y4yzzg x1ypdohk x78zum5 xj0sio9 x1ti3rys x1m30uz7 x1ap6kct xgz4m7n x1ezks3f xoeao9w x1qtbwip x1yc453h x1elc2ff x15406qy xxjumz xh8yej3 x15meki4 xz32tfx x1p22nma x17lds6u x1ipqx2d"
+      },
+      type: "button",
+      children: [/*#__PURE__*/_jsx("span", {
+        ...{
+          0: {
+            className: "x17y7oyd x2lah0s xv6reb9 x11xpdln xxjumz"
+          },
+          1: {
+            className: "x17y7oyd x2lah0s xv6reb9 x11xpdln xxjumz x1iffjtl"
+          }
+        }[!!isOpen << 0],
+        children: /*#__PURE__*/_jsx(Icon, {
+          children: /*#__PURE__*/_jsx("path", {
+            d: "m9 6 6 6-6 6",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2"
+          })
+        })
+      }), /*#__PURE__*/_jsx("span", {
+        ...{
+          className: "x1iyjqo2 xeuugli"
+        },
+        children: label
+      })]
+    }), /*#__PURE__*/_jsx("div", {
+      "aria-labelledby": triggerId,
+      hidden: !isOpen,
+      id: panelId,
+      role: "region",
+      ...{
+        className: "x1d7crt5 xb2q83l x1rclw80 xim4de7"
+      },
+      children: /*#__PURE__*/_jsx("div", {
+        ...{
+          className: "xrnvkan xzmsqiu x1aquc0h xwm07dd xrvj5dj x1tu4anv"
+        },
+        children: /*#__PURE__*/_jsx("div", {
+          ...{
+            className: "x2lwn1j xb3r6kr"
+          },
+          children: children
+        })
+      })
+    })]
+  });
+}

package/dist/Collapsible/index.d.ts

@@ -0,0 +1 @@
+export { Collapsible, type CollapsibleProps } from './Collapsible.js';

package/dist/Collapsible/index.js

@@ -0,0 +1,2 @@
+import "../styles/stylex.css";
+export { Collapsible } from './Collapsible.js';

package/dist/CommandPalette/CommandPalette.d.ts

@@ -0,0 +1,24 @@
+import { type ReactNode } from 'react';
+/** One runnable command. */
+export interface Command {
+    readonly group?: string;
+    readonly id: string;
+    readonly label: string;
+    readonly shortcut?: string;
+}
+/** Props for the searchable command list. */
+export interface CommandPaletteProps {
+    readonly commands: readonly Command[];
+    readonly emptyMessage?: ReactNode;
+    readonly label?: string;
+    readonly onDismiss: () => void;
+    readonly onRun: (command: Command) => void;
+    readonly open: boolean;
+    readonly placeholder?: string;
+}
+/**
+ * Runs a command by name. Focus stays in the search field and
+ * `aria-activedescendant` names the highlighted command, so typing and
+ * choosing never fight each other for focus.
+ */
+export declare function CommandPalette({ commands, emptyMessage, label, onDismiss, onRun, open, placeholder, }: CommandPaletteProps): import("react").JSX.Element;

package/dist/CommandPalette/CommandPalette.doc.d.ts

@@ -0,0 +1,11 @@
+export declare const commandPaletteDoc: {
+    name: string;
+    description: string;
+    props: {
+        name: string;
+        description: string;
+    }[];
+    inheritedProps: string[];
+    example: string;
+    storyId: string;
+};

package/dist/CommandPalette/CommandPalette.doc.js

@@ -0,0 +1,30 @@
+import "../styles/stylex.css";
+export const commandPaletteDoc = {
+  name: 'CommandPalette',
+  description: 'Runs a command by searching for it by name.',
+  props: [{
+    name: 'commands',
+    description: 'Supplies every runnable command.'
+  }, {
+    name: 'emptyMessage',
+    description: 'States that nothing matched.'
+  }, {
+    name: 'label',
+    description: 'Names the palette for assistive technology.'
+  }, {
+    name: 'onDismiss',
+    description: 'Runs on Escape or an outside click.'
+  }, {
+    name: 'onRun',
+    description: 'Receives the command the reader chose.'
+  }, {
+    name: 'open',
+    description: 'Controls whether the palette renders.'
+  }, {
+    name: 'placeholder',
+    description: 'Names and hints at the search field.'
+  }],
+  inheritedProps: ['None; CommandPalette owns its modal surface'],
+  example: '<CommandPalette commands={commands} onDismiss={close} onRun={run} open={open} />',
+  storyId: 'core-command-palette--default'
+};

package/dist/CommandPalette/CommandPalette.js

@@ -0,0 +1,182 @@
+import * as stylex from '@stylexjs/stylex';
+import { useEffect, useId, useState } from 'react';
+import { semanticTokens } from '../authoring.stylex.js';
+import { scrolling } from '../scrolling/index.js';
+import { Icon } from '../Icon/index.js';
+import { useInternationalization } from '../i18n/index.js';
+import { Overlay } from '../Overlay/index.js';
+
+// About twenty spacing steps wide: long command names read on one line.
+import "../styles/stylex.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const surfaceWidth = `calc(20 * ${semanticTokens.spacing2xl})`;
+const markWidth = `calc(2 * ${semanticTokens.borderWidth})`;
+const markHeight = '64%';
+const styles = {
+  list: {
+    kH6xsr: "x3ct3a4",
+    kqGvvJ: "x10im51j",
+    kORKVm: "x1odjw0f",
+    k8WAf4: "x10y07nz",
+    kZCmMZ: "x1c1uobl",
+    $$css: true
+  }
+};
+
+/** One runnable command. */
+
+/** Props for the searchable command list. */
+
+/**
+ * Runs a command by name. Focus stays in the search field and
+ * `aria-activedescendant` names the highlighted command, so typing and
+ * choosing never fight each other for focus.
+ */
+export function CommandPalette({
+  commands,
+  emptyMessage,
+  label = 'Command palette',
+  onDismiss,
+  onRun,
+  open,
+  placeholder
+}) {
+  const {
+    messages
+  } = useInternationalization();
+  const resolvedPlaceholder = placeholder ?? messages.commandPalettePlaceholder;
+  const listboxId = useId();
+  const optionPrefix = useId();
+  const [query, setQuery] = useState('');
+  const [activeIndex, setActiveIndex] = useState(0);
+  const matches = commands.filter(command => command.label.toLowerCase().includes(query.toLowerCase()));
+  const active = matches[activeIndex];
+  useEffect(() => {
+    if (!open) {
+      setQuery('');
+      setActiveIndex(0);
+    }
+  }, [open]);
+  function handleKeyDown(event) {
+    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+      event.preventDefault();
+      if (matches.length > 0) {
+        const step = event.key === 'ArrowDown' ? 1 : -1;
+        setActiveIndex(index => (index + step + matches.length) % matches.length);
+      }
+      return;
+    }
+    if (event.key === 'Home' || event.key === 'End') {
+      if (matches.length === 0) {
+        return;
+      }
+      event.preventDefault();
+      setActiveIndex(event.key === 'Home' ? 0 : matches.length - 1);
+      return;
+    }
+    if (event.key === 'Enter' && active) {
+      event.preventDefault();
+      onRun(active);
+    }
+  }
+  let lastGroup;
+  return /*#__PURE__*/_jsx(Overlay, {
+    onDismiss: onDismiss,
+    open: open,
+    children: /*#__PURE__*/_jsxs("div", {
+      "aria-label": label,
+      role: "dialog",
+      ...{
+        className: "x40o0ze x7xrhi9 x1ia5mbg x78zum5 xdt5ytf xj0sio9 x12f24lm x9dofan xb3r6kr xh8yej3"
+      },
+      children: [/*#__PURE__*/_jsxs("div", {
+        ...{
+          className: "x6s0dn4 x1rzuj2w x1w5tod1 xeq6m5c x78zum5 xtl099x x1lr58ck x1q83fih"
+        },
+        children: [/*#__PURE__*/_jsx(Icon, {
+          size: "md",
+          tone: "muted",
+          children: /*#__PURE__*/_jsx("path", {
+            d: "M11 4a7 7 0 1 0 0 14 7 7 0 0 0 0-14Zm5 12 4 4",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2"
+          })
+        }), /*#__PURE__*/_jsx("input", {
+          "aria-activedescendant": active ? `${optionPrefix}-${activeIndex}` : undefined,
+          "aria-autocomplete": "list",
+          "aria-controls": listboxId,
+          "aria-expanded": true,
+          "aria-label": resolvedPlaceholder,
+          autoComplete: "off",
+          onChange: event => {
+            setQuery(event.currentTarget.value);
+            setActiveIndex(0);
+          },
+          onKeyDown: handleKeyDown,
+          placeholder: resolvedPlaceholder,
+          role: "combobox",
+          value: query,
+          ...{
+            className: "xjbqb8w xng3xce xc342km x1y4yzzg x1iyjqo2 xj0sio9 x1ti3rys xgz4m7n x1ezks3f xeuugli x1717udv x1e4qbc8 x15meki4 xz32tfx x1p22nma x17lds6u"
+          },
+          type: "text"
+        })]
+      }), /*#__PURE__*/_jsx("ul", {
+        id: listboxId,
+        role: "listbox",
+        ...stylex.props(styles.list, scrolling.region),
+        children: matches.map((command, index) => {
+          const showGroup = command.group !== undefined && command.group !== lastGroup;
+          lastGroup = command.group;
+          return /*#__PURE__*/_jsxs("li", {
+            role: "none",
+            children: [showGroup ? /*#__PURE__*/_jsx("p", {
+              "aria-hidden": "true",
+              ...{
+                className: "x17y7oyd x13fdfvb xnlz8j1 x1m30uz7 x1di4hct x1vslzj6 x10im51j x10y07nz x1q83fih"
+              },
+              children: command.group
+            }) : null, /*#__PURE__*/_jsxs("div", {
+              "aria-selected": index === activeIndex,
+              id: `${optionPrefix}-${index}`,
+              onClick: () => {
+                onRun(command);
+              },
+              role: "option",
+              ...{
+                0: {
+                  className: "x6s0dn4 x17y7oyd x1ypdohk x78zum5 xtl099x x1qughib xoeao9w x1q83fih x1n2onr6 x1elc2ff xs2xxs2 xxjumz x1c0aqn8 x1t0gddj"
+                },
+                1: {
+                  className: "x6s0dn4 x1ypdohk x78zum5 xtl099x x1qughib xoeao9w x1q83fih x1n2onr6 x1elc2ff xs2xxs2 xxjumz x798k6d x1y4yzzg x12ukevf x1cpjm7i xmpob1l x1knuo7r x1682cnc x1hmns74 xkjykve xell8bx"
+                }
+              }[!!(index === activeIndex) << 0],
+              children: [/*#__PURE__*/_jsx("span", {
+                ...{
+                  className: "xj0sio9 x1ti3rys xq5azjn"
+                },
+                children: command.label
+              }), command.shortcut === undefined ? null : /*#__PURE__*/_jsx("kbd", {
+                ...{
+                  className: "xavu78a x1l6hjkl x17y7oyd x7ohnf4 xnlz8j1 xss6m8b x1kbjp2h xov5yc9 xuxw1ft"
+                },
+                children: command.shortcut
+              })]
+            })]
+          }, command.id);
+        })
+      }), matches.length === 0 ?
+      /*#__PURE__*/
+      // A listbox may own nothing but options, so the notice sits beside
+      // it and announces itself instead.
+      _jsx("p", {
+        role: "status",
+        ...{
+          className: "x17y7oyd xj0sio9 xltg2ad xgz4m7n x1ezks3f x10im51j x1lr58ck x1q83fih"
+        },
+        children: emptyMessage ?? messages.commandPaletteEmpty
+      }) : null]
+    })
+  });
+}

package/dist/CommandPalette/index.d.ts

@@ -0,0 +1 @@
+export { CommandPalette, type Command, type CommandPaletteProps, } from './CommandPalette.js';

package/dist/CommandPalette/index.js

@@ -0,0 +1,2 @@
+import "../styles/stylex.css";
+export { CommandPalette } from './CommandPalette.js';

package/dist/ComplexSelector/ComplexSelector.d.ts

@@ -0,0 +1,30 @@
+import type { SelectHTMLAttributes } from 'react';
+import type { SelectorOption } from '../Selector/index.js';
+/** A named group of related options. */
+export interface SelectorGroup {
+    readonly disabled?: boolean;
+    readonly label: string;
+    readonly options: readonly SelectorOption[];
+}
+type SharedComplexSelectorProps = Omit<SelectHTMLAttributes<HTMLSelectElement>, 'children' | 'className' | 'defaultValue' | 'onChange' | 'value'> & {
+    readonly groups: readonly SelectorGroup[];
+    readonly onValueChange?: (value: string) => void;
+    readonly placeholder?: string;
+};
+type ControlledComplexSelectorProps = SharedComplexSelectorProps & {
+    readonly defaultValue?: never;
+    readonly onValueChange: (value: string) => void;
+    readonly value: string;
+};
+type UncontrolledComplexSelectorProps = SharedComplexSelectorProps & {
+    readonly defaultValue?: string;
+    readonly value?: never;
+};
+/** Props for choosing one option from grouped lists. */
+export type ComplexSelectorProps = ControlledComplexSelectorProps | UncontrolledComplexSelectorProps;
+/**
+ * Chooses one option from grouped lists. Groups become native `optgroup`
+ * elements, so a screen reader announces which group an option belongs to.
+ */
+export declare function ComplexSelector({ 'aria-describedby': ariaDescribedBy, 'aria-invalid': ariaInvalid, disabled, groups, id, onValueChange, placeholder, required, ...props }: ComplexSelectorProps): import("react").JSX.Element;
+export {};

package/dist/ComplexSelector/ComplexSelector.doc.d.ts

@@ -0,0 +1,11 @@
+export declare const complexSelectorDoc: {
+    name: string;
+    description: string;
+    props: {
+        name: string;
+        description: string;
+    }[];
+    inheritedProps: string[];
+    example: string;
+    storyId: string;
+};

package/dist/ComplexSelector/ComplexSelector.doc.js

@@ -0,0 +1,24 @@
+import "../styles/stylex.css";
+export const complexSelectorDoc = {
+  name: 'ComplexSelector',
+  description: 'Chooses one option from grouped lists.',
+  props: [{
+    name: 'defaultValue',
+    description: 'Sets the initial uncontrolled value.'
+  }, {
+    name: 'groups',
+    description: 'Supplies the named groups of options.'
+  }, {
+    name: 'onValueChange',
+    description: 'Receives the newly chosen value.'
+  }, {
+    name: 'placeholder',
+    description: 'Adds a disabled prompt as the first entry.'
+  }, {
+    name: 'value',
+    description: 'Controls the current value.'
+  }],
+  inheritedProps: ['SelectHTMLAttributes<HTMLSelectElement> except children, className, defaultValue, onChange, and value'],
+  example: '<ComplexSelector groups={teams} onValueChange={setOwner} value={owner} />',
+  storyId: 'core-complex-selector--default'
+};

package/dist/ComplexSelector/ComplexSelector.js

@@ -0,0 +1,83 @@
+import * as stylex from '@stylexjs/stylex';
+import { semanticTokens } from '../authoring.stylex.js';
+import { useFieldControl } from '../Field/index.js';
+import "../styles/stylex.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** A named group of related options. */
+
+/** Props for choosing one option from grouped lists. */
+
+/**
+ * Chooses one option from grouped lists. Groups become native `optgroup`
+ * elements, so a screen reader announces which group an option belongs to.
+ */
+export function ComplexSelector({
+  'aria-describedby': ariaDescribedBy,
+  'aria-invalid': ariaInvalid,
+  disabled,
+  groups,
+  id,
+  onValueChange,
+  placeholder,
+  required,
+  ...props
+}) {
+  const field = useFieldControl();
+  const describedBy = [field?.describedBy, ariaDescribedBy].filter(Boolean).join(' ') || undefined;
+  const resolvedInvalid = ariaInvalid ?? field?.invalid;
+  const invalid = resolvedInvalid !== undefined && resolvedInvalid !== false && resolvedInvalid !== 'false';
+  function handleChange(event) {
+    onValueChange?.(event.currentTarget.value);
+  }
+  return /*#__PURE__*/_jsxs("span", {
+    ...{
+      0: {
+        className: "x1qjc9v5 xavu78a x1wxkff4 x8kq9my x1jnjmdy xpxnlqs x9f619 x78zum5 xr8hsnb xb3r6kr x1n2onr6 x1elc2ff xts7igz xxjumz xh8yej3 xc8z1lp x16xryy4 xfswlut xnip9g3 x1lm2vjv x12uk28n"
+      },
+      2: {
+        className: "x1qjc9v5 xavu78a x8kq9my x1jnjmdy xpxnlqs x9f619 x78zum5 xr8hsnb xb3r6kr x1n2onr6 x1elc2ff xts7igz xxjumz xh8yej3 x16xryy4 xfswlut xnip9g3 x1lm2vjv xcf5wgx x9a976t xtku8dq"
+      },
+      1: {
+        className: "x1qjc9v5 x8kq9my x1jnjmdy xpxnlqs x9f619 x78zum5 xr8hsnb xb3r6kr x1n2onr6 x1elc2ff xts7igz xxjumz xh8yej3 xc8z1lp x16xryy4 xfswlut xnip9g3 x1lm2vjv x19blmh3 x1lnk2a9 x1ieeoof"
+      },
+      3: {
+        className: "x1qjc9v5 x8kq9my x1jnjmdy xpxnlqs x9f619 x78zum5 xr8hsnb xb3r6kr x1n2onr6 x1elc2ff xts7igz xxjumz xh8yej3 x16xryy4 xfswlut xnip9g3 x1lm2vjv x9a976t x19blmh3 x1lnk2a9 x1ieeoof"
+      }
+    }[!!(invalid && !disabled) << 1 | !!disabled << 0],
+    children: [/*#__PURE__*/_jsxs("select", {
+      ...props,
+      "aria-describedby": describedBy,
+      "aria-invalid": resolvedInvalid,
+      disabled: disabled,
+      id: field?.controlId ?? id,
+      onChange: handleChange,
+      required: required ?? field?.required,
+      ...{
+        className: "xjyslct xjbqb8w xng3xce xc342km x9f619 x1y4yzzg x1ypdohk xj0sio9 x1ti3rys xgz4m7n x1ezks3f x10y07nz xbdx0pd xiw2ij1 xh8yej3 x609gy3 xtgyt42 xi5y0ii"
+      },
+      children: [placeholder === undefined ? null : /*#__PURE__*/_jsx("option", {
+        disabled: true,
+        value: "",
+        children: placeholder
+      }), groups.map(group => /*#__PURE__*/_jsx("optgroup", {
+        disabled: group.disabled ?? false,
+        label: group.label,
+        children: group.options.map(option => /*#__PURE__*/_jsx("option", {
+          disabled: option.disabled ?? false,
+          value: option.value,
+          children: option.label
+        }, option.value))
+      }, group.label))]
+    }), /*#__PURE__*/_jsx("span", {
+      "aria-hidden": "true",
+      ...{
+        0: {
+          className: "x1oklvbn x1w5tod1 xeq6m5c xuybi62 xs916ma x1plwgly x1ieyhmn x1rcf1qu xwa60dl x10rhgnt x47corl x10l6tqk x11asuhd"
+        },
+        1: {
+          className: "x1w5tod1 xeq6m5c xs916ma x1plwgly x1ieyhmn x1rcf1qu xwa60dl x10rhgnt x47corl x10l6tqk x11asuhd xwpt2ep xq3uh35"
+        }
+      }[!!disabled << 0]
+    })]
+  });
+}

package/dist/ComplexSelector/index.d.ts

@@ -0,0 +1 @@
+export { ComplexSelector, type ComplexSelectorProps, type SelectorGroup, } from './ComplexSelector.js';

package/dist/ComplexSelector/index.js

@@ -0,0 +1,2 @@
+import "../styles/stylex.css";
+export { ComplexSelector } from './ComplexSelector.js';