achery-ui 0.9.2 → 0.10.2

package/dist/index.d.cts

@@ -2075,4 +2075,109 @@ interface MaterialCardProps extends HTMLAttributes<HTMLDivElement> {
  */
 declare function MaterialCard({ intensity, header, footer, children, className, ...props }: MaterialCardProps): react_jsx_runtime.JSX.Element;
 
-export { AccentColor, type AccentDial, AcheryProvider, type AcheryProviderProps, AppBar, type AppBarProps, Avatar, type AvatarProps, type AvatarSize, type AvatarTone, Badge, type BadgeProps, type BadgeTone, Body, type BodyProps, Button, type ButtonProps, type ButtonVariant, Card, type CardProps, Checkbox, type CheckboxProps, type ColumnDef, Combobox, type ComboboxProps, type ComponentSize, ConfirmDialogProvider, type ConfirmOptions, DatePicker, type DatePickerProps, Display, EntityPill, type EntityPillProps, Eyebrow, type EyebrowProps, Field, type FieldProps, Glyph, GlyphAliases, GlyphCategories, type GlyphCategory, type GlyphName, GlyphPicker, type GlyphPickerProps, type GlyphProps, type GlyphSearchResult, Heading, type HeadingProps, Input, type InputProps, type InputStatus, KpiTile, type KpiTileProps, LetterStamp, type LetterStampProps, type LetterStampSize, type LetterStampTone, Marginalia, type MarginaliaProps, MaterialCard, type MaterialCardProps, type MaterialIntensity, type MaterialSignature, Menu, type MenuItemDef, type MenuProps, type MenuSeparator, Modal, type ModalProps, Mono, type MonoProps, type NavGroupDef, type NavItemDef, ProgressBar, type ProgressBarProps, SearchInput, type SearchInputProps, Select, type SelectProps, Sidebar, type SidebarLinkProps, type SidebarProps, SingleCombobox, type SingleComboboxProps, Skeleton, type SkeletonProps, type SortDirection, Sparkline, type SparklineProps, type SparklineTone, StatePill, type StatePillProps, type SubscriptionState, type TabItem, Table, type TableProps, Tabs, type TabsProps, Textarea, type TextareaProps, type ThemeMode, type ToastData, ToastProvider, type ToastProviderProps, Toggle, type ToggleProps, Tooltip, type TooltipProps, type TransactionType, TypeTag, type TypeTagProps, glyphCategory, glyphLabel, searchGlyphs, useConfirm, useTheme, useToast, vars };
+/** Props for the {@link DetailRail} component. */
+interface DetailRailProps {
+    /** Whether the rail is visible. */
+    open: boolean;
+    /** Called when the user clicks the close button or the backdrop. */
+    onClose: () => void;
+    /** Title rendered in the header. */
+    title: string;
+    /** Optional eyebrow label above the title. */
+    eyebrow?: string;
+    /** Main content area. */
+    children?: ReactNode;
+    /** Footer slot — typically action buttons. */
+    footer?: ReactNode;
+    /**
+     * Width of the rail on desktop.
+     * @default 360
+     */
+    width?: number;
+    className?: string;
+}
+/**
+ * A slide-in detail panel that appears from the right on desktop and slides up
+ * from the bottom on mobile (≤640px). Clicking the backdrop or the close button
+ * dismisses it.
+ *
+ * Useful for showing contextual detail alongside a list or table without
+ * navigating away from the page.
+ *
+ * @example
+ * ```tsx
+ * <DetailRail open={!!selected} onClose={() => setSelected(null)} title={selected?.name} eyebrow="Transaction">
+ *   <Field label="Amount"><Input value={selected?.amount} /></Field>
+ * </DetailRail>
+ * ```
+ */
+declare const DetailRail: ({ open, onClose, title, eyebrow, children, footer, width, className, }: DetailRailProps) => react_jsx_runtime.JSX.Element | null;
+
+/** Props for the {@link ColourInput} component. */
+interface ColourInputProps {
+    /** Current hex colour value, e.g. `'#c46a3a'`. Defaults to `'#000000'`. */
+    value?: string;
+    /** Called with the new hex colour when the value changes. */
+    onChange?: (value: string) => void;
+    /** When true, applies error border colouring. Pair with {@link Field} `error` prop. */
+    error?: boolean;
+    /** Placeholder shown in the text field when empty. */
+    placeholder?: string;
+    /** Disable the input. */
+    disabled?: boolean;
+    className?: string;
+    style?: HTMLAttributes<HTMLDivElement>['style'];
+}
+/**
+ * Hex colour picker combining a native `<input type="color">` swatch and a
+ * text field for direct hex entry. Normalises 3-digit shorthand on blur.
+ * Wrap in {@link Field} to add a label and hint/error text.
+ *
+ * @example
+ * ```tsx
+ * <Field label="Category colour">
+ *   <ColourInput value={colour} onChange={setColour} />
+ * </Field>
+ * ```
+ */
+declare const ColourInput: ({ value, onChange, error, placeholder, disabled, className, style, }: ColourInputProps) => react_jsx_runtime.JSX.Element;
+
+/** A single option within a {@link SegmentedControl}. */
+interface SegmentOption<T extends string = string> {
+    value: T;
+    label: ReactNode;
+}
+/** Props for the {@link SegmentedControl} component. */
+interface SegmentedControlProps<T extends string = string> {
+    /** Available options. */
+    options: SegmentOption<T>[];
+    /** Currently selected value. */
+    value: T;
+    /** Called when the user selects a segment. */
+    onChange: (value: T) => void;
+    /**
+     * Size preset.
+     * @default 'md'
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /** Disable all segments. */
+    disabled?: boolean;
+    className?: string;
+}
+/**
+ * Inline button group where exactly one option is active. Use for mutually
+ * exclusive view modes or filter toggles where showing all options simultaneously
+ * is worth the space.
+ *
+ * @example
+ * ```tsx
+ * <SegmentedControl
+ *   options={[{ value: 'week', label: 'Week' }, { value: 'month', label: 'Month' }]}
+ *   value={period}
+ *   onChange={setPeriod}
+ * />
+ * ```
+ */
+declare const SegmentedControl: <T extends string>({ options, value, onChange, size, disabled, className, }: SegmentedControlProps<T>) => react_jsx_runtime.JSX.Element;
+
+export { AccentColor, type AccentDial, AcheryProvider, type AcheryProviderProps, AppBar, type AppBarProps, Avatar, type AvatarProps, type AvatarSize, type AvatarTone, Badge, type BadgeProps, type BadgeTone, Body, type BodyProps, Button, type ButtonProps, type ButtonVariant, Card, type CardProps, Checkbox, type CheckboxProps, ColourInput, type ColourInputProps, type ColumnDef, Combobox, type ComboboxProps, type ComponentSize, ConfirmDialogProvider, type ConfirmOptions, DatePicker, type DatePickerProps, DetailRail, type DetailRailProps, Display, EntityPill, type EntityPillProps, Eyebrow, type EyebrowProps, Field, type FieldProps, Glyph, GlyphAliases, GlyphCategories, type GlyphCategory, type GlyphName, GlyphPicker, type GlyphPickerProps, type GlyphProps, type GlyphSearchResult, Heading, type HeadingProps, Input, type InputProps, type InputStatus, KpiTile, type KpiTileProps, LetterStamp, type LetterStampProps, type LetterStampSize, type LetterStampTone, Marginalia, type MarginaliaProps, MaterialCard, type MaterialCardProps, type MaterialIntensity, type MaterialSignature, Menu, type MenuItemDef, type MenuProps, type MenuSeparator, Modal, type ModalProps, Mono, type MonoProps, type NavGroupDef, type NavItemDef, ProgressBar, type ProgressBarProps, SearchInput, type SearchInputProps, type SegmentOption, SegmentedControl, type SegmentedControlProps, Select, type SelectProps, Sidebar, type SidebarLinkProps, type SidebarProps, SingleCombobox, type SingleComboboxProps, Skeleton, type SkeletonProps, type SortDirection, Sparkline, type SparklineProps, type SparklineTone, StatePill, type StatePillProps, type SubscriptionState, type TabItem, Table, type TableProps, Tabs, type TabsProps, Textarea, type TextareaProps, type ThemeMode, type ToastData, ToastProvider, type ToastProviderProps, Toggle, type ToggleProps, Tooltip, type TooltipProps, type TransactionType, TypeTag, type TypeTagProps, glyphCategory, glyphLabel, searchGlyphs, useConfirm, useTheme, useToast, vars };

package/dist/index.d.ts

@@ -2075,4 +2075,109 @@ interface MaterialCardProps extends HTMLAttributes<HTMLDivElement> {
  */
 declare function MaterialCard({ intensity, header, footer, children, className, ...props }: MaterialCardProps): react_jsx_runtime.JSX.Element;
 
-export { AccentColor, type AccentDial, AcheryProvider, type AcheryProviderProps, AppBar, type AppBarProps, Avatar, type AvatarProps, type AvatarSize, type AvatarTone, Badge, type BadgeProps, type BadgeTone, Body, type BodyProps, Button, type ButtonProps, type ButtonVariant, Card, type CardProps, Checkbox, type CheckboxProps, type ColumnDef, Combobox, type ComboboxProps, type ComponentSize, ConfirmDialogProvider, type ConfirmOptions, DatePicker, type DatePickerProps, Display, EntityPill, type EntityPillProps, Eyebrow, type EyebrowProps, Field, type FieldProps, Glyph, GlyphAliases, GlyphCategories, type GlyphCategory, type GlyphName, GlyphPicker, type GlyphPickerProps, type GlyphProps, type GlyphSearchResult, Heading, type HeadingProps, Input, type InputProps, type InputStatus, KpiTile, type KpiTileProps, LetterStamp, type LetterStampProps, type LetterStampSize, type LetterStampTone, Marginalia, type MarginaliaProps, MaterialCard, type MaterialCardProps, type MaterialIntensity, type MaterialSignature, Menu, type MenuItemDef, type MenuProps, type MenuSeparator, Modal, type ModalProps, Mono, type MonoProps, type NavGroupDef, type NavItemDef, ProgressBar, type ProgressBarProps, SearchInput, type SearchInputProps, Select, type SelectProps, Sidebar, type SidebarLinkProps, type SidebarProps, SingleCombobox, type SingleComboboxProps, Skeleton, type SkeletonProps, type SortDirection, Sparkline, type SparklineProps, type SparklineTone, StatePill, type StatePillProps, type SubscriptionState, type TabItem, Table, type TableProps, Tabs, type TabsProps, Textarea, type TextareaProps, type ThemeMode, type ToastData, ToastProvider, type ToastProviderProps, Toggle, type ToggleProps, Tooltip, type TooltipProps, type TransactionType, TypeTag, type TypeTagProps, glyphCategory, glyphLabel, searchGlyphs, useConfirm, useTheme, useToast, vars };
+/** Props for the {@link DetailRail} component. */
+interface DetailRailProps {
+    /** Whether the rail is visible. */
+    open: boolean;
+    /** Called when the user clicks the close button or the backdrop. */
+    onClose: () => void;
+    /** Title rendered in the header. */
+    title: string;
+    /** Optional eyebrow label above the title. */
+    eyebrow?: string;
+    /** Main content area. */
+    children?: ReactNode;
+    /** Footer slot — typically action buttons. */
+    footer?: ReactNode;
+    /**
+     * Width of the rail on desktop.
+     * @default 360
+     */
+    width?: number;
+    className?: string;
+}
+/**
+ * A slide-in detail panel that appears from the right on desktop and slides up
+ * from the bottom on mobile (≤640px). Clicking the backdrop or the close button
+ * dismisses it.
+ *
+ * Useful for showing contextual detail alongside a list or table without
+ * navigating away from the page.
+ *
+ * @example
+ * ```tsx
+ * <DetailRail open={!!selected} onClose={() => setSelected(null)} title={selected?.name} eyebrow="Transaction">
+ *   <Field label="Amount"><Input value={selected?.amount} /></Field>
+ * </DetailRail>
+ * ```
+ */
+declare const DetailRail: ({ open, onClose, title, eyebrow, children, footer, width, className, }: DetailRailProps) => react_jsx_runtime.JSX.Element | null;
+
+/** Props for the {@link ColourInput} component. */
+interface ColourInputProps {
+    /** Current hex colour value, e.g. `'#c46a3a'`. Defaults to `'#000000'`. */
+    value?: string;
+    /** Called with the new hex colour when the value changes. */
+    onChange?: (value: string) => void;
+    /** When true, applies error border colouring. Pair with {@link Field} `error` prop. */
+    error?: boolean;
+    /** Placeholder shown in the text field when empty. */
+    placeholder?: string;
+    /** Disable the input. */
+    disabled?: boolean;
+    className?: string;
+    style?: HTMLAttributes<HTMLDivElement>['style'];
+}
+/**
+ * Hex colour picker combining a native `<input type="color">` swatch and a
+ * text field for direct hex entry. Normalises 3-digit shorthand on blur.
+ * Wrap in {@link Field} to add a label and hint/error text.
+ *
+ * @example
+ * ```tsx
+ * <Field label="Category colour">
+ *   <ColourInput value={colour} onChange={setColour} />
+ * </Field>
+ * ```
+ */
+declare const ColourInput: ({ value, onChange, error, placeholder, disabled, className, style, }: ColourInputProps) => react_jsx_runtime.JSX.Element;
+
+/** A single option within a {@link SegmentedControl}. */
+interface SegmentOption<T extends string = string> {
+    value: T;
+    label: ReactNode;
+}
+/** Props for the {@link SegmentedControl} component. */
+interface SegmentedControlProps<T extends string = string> {
+    /** Available options. */
+    options: SegmentOption<T>[];
+    /** Currently selected value. */
+    value: T;
+    /** Called when the user selects a segment. */
+    onChange: (value: T) => void;
+    /**
+     * Size preset.
+     * @default 'md'
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /** Disable all segments. */
+    disabled?: boolean;
+    className?: string;
+}
+/**
+ * Inline button group where exactly one option is active. Use for mutually
+ * exclusive view modes or filter toggles where showing all options simultaneously
+ * is worth the space.
+ *
+ * @example
+ * ```tsx
+ * <SegmentedControl
+ *   options={[{ value: 'week', label: 'Week' }, { value: 'month', label: 'Month' }]}
+ *   value={period}
+ *   onChange={setPeriod}
+ * />
+ * ```
+ */
+declare const SegmentedControl: <T extends string>({ options, value, onChange, size, disabled, className, }: SegmentedControlProps<T>) => react_jsx_runtime.JSX.Element;
+
+export { AccentColor, type AccentDial, AcheryProvider, type AcheryProviderProps, AppBar, type AppBarProps, Avatar, type AvatarProps, type AvatarSize, type AvatarTone, Badge, type BadgeProps, type BadgeTone, Body, type BodyProps, Button, type ButtonProps, type ButtonVariant, Card, type CardProps, Checkbox, type CheckboxProps, ColourInput, type ColourInputProps, type ColumnDef, Combobox, type ComboboxProps, type ComponentSize, ConfirmDialogProvider, type ConfirmOptions, DatePicker, type DatePickerProps, DetailRail, type DetailRailProps, Display, EntityPill, type EntityPillProps, Eyebrow, type EyebrowProps, Field, type FieldProps, Glyph, GlyphAliases, GlyphCategories, type GlyphCategory, type GlyphName, GlyphPicker, type GlyphPickerProps, type GlyphProps, type GlyphSearchResult, Heading, type HeadingProps, Input, type InputProps, type InputStatus, KpiTile, type KpiTileProps, LetterStamp, type LetterStampProps, type LetterStampSize, type LetterStampTone, Marginalia, type MarginaliaProps, MaterialCard, type MaterialCardProps, type MaterialIntensity, type MaterialSignature, Menu, type MenuItemDef, type MenuProps, type MenuSeparator, Modal, type ModalProps, Mono, type MonoProps, type NavGroupDef, type NavItemDef, ProgressBar, type ProgressBarProps, SearchInput, type SearchInputProps, type SegmentOption, SegmentedControl, type SegmentedControlProps, Select, type SelectProps, Sidebar, type SidebarLinkProps, type SidebarProps, SingleCombobox, type SingleComboboxProps, Skeleton, type SkeletonProps, type SortDirection, Sparkline, type SparklineProps, type SparklineTone, StatePill, type StatePillProps, type SubscriptionState, type TabItem, Table, type TableProps, Tabs, type TabsProps, Textarea, type TextareaProps, type ThemeMode, type ToastData, ToastProvider, type ToastProviderProps, Toggle, type ToggleProps, Tooltip, type TooltipProps, type TransactionType, TypeTag, type TypeTagProps, glyphCategory, glyphLabel, searchGlyphs, useConfirm, useTheme, useToast, vars };

package/dist/index.js

@@ -1685,7 +1685,7 @@ function Modal({
   title: title2,
   description: description2,
   children,
-  footer: footer3,
+  footer: footer4,
   trigger: trigger3,
   size = "sm",
   scrollable = false,
@@ -1715,7 +1715,7 @@ function Modal({
                   /* @__PURE__ */ jsx(RadixDialog.Close, { className: closeButton, "aria-label": "Close", children: /* @__PURE__ */ jsx(Glyph, { name: "cross", size: 14, "aria-hidden": "true" }) })
                 ] }),
                 /* @__PURE__ */ jsx("div", { className: scrollable ? bodyScrollable : body2, children }),
-                footer3 && /* @__PURE__ */ jsx("div", { className: footer, children: footer3 })
+                footer4 && /* @__PURE__ */ jsx("div", { className: footer, children: footer4 })
               ]
             }
           )
@@ -1953,7 +1953,7 @@ var cardHeader = "Card_cardHeader__1uprgrr8";
 function Card({
   variant = "flat",
   padding = "md",
-  header: header2,
+  header: header3,
   marginalia: marginalia2,
   marginaliaSize = 80,
   children,
@@ -1966,7 +1966,7 @@ function Card({
       className: [card({ variant, padding }), className].filter(Boolean).join(" "),
       ...props,
       children: [
-        header2 && /* @__PURE__ */ jsx("div", { className: cardHeader, children: header2 }),
+        header3 && /* @__PURE__ */ jsx("div", { className: cardHeader, children: header3 }),
         children,
         marginalia2 && /* @__PURE__ */ jsx(Marginalia, { glyph: marginalia2, size: marginaliaSize })
       ]
@@ -2064,7 +2064,7 @@ function Sidebar({
   activeId,
   onItemClick,
   renderLink,
-  footer: footer3,
+  footer: footer4,
   collapsed,
   onCollapsedChange,
   mobileOpen,
@@ -2125,7 +2125,7 @@ function Sidebar({
             ),
             searchConfig.kbd && /* @__PURE__ */ jsx("span", { children: searchConfig.kbd })
           ] }),
-          footer3 && /* @__PURE__ */ jsx("div", { className: footer2, children: footer3 })
+          footer4 && /* @__PURE__ */ jsx("div", { className: footer2, children: footer4 })
         ] })
       ]
     }
@@ -3247,23 +3247,182 @@ function TypeTag({ type, className }) {
 }
 function MaterialCard({
   intensity = "chrome",
-  header: header2,
-  footer: footer3,
+  header: header3,
+  footer: footer4,
   children,
   className,
   ...props
 }) {
   const classes = ["material", `m-${intensity}`, className].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxs("div", { className: classes, ...props, children: [
-    header2 !== void 0 && /* @__PURE__ */ jsxs("div", { className: "material__bar", children: [
+    header3 !== void 0 && /* @__PURE__ */ jsxs("div", { className: "material__bar", children: [
       /* @__PURE__ */ jsx("span", { className: "material__mark", "aria-hidden": true }),
-      typeof header2 === "string" ? /* @__PURE__ */ jsx("span", { className: "material__title", children: header2 }) : header2
+      typeof header3 === "string" ? /* @__PURE__ */ jsx("span", { className: "material__title", children: header3 }) : header3
     ] }),
     /* @__PURE__ */ jsx("div", { className: "material__body", children }),
-    footer3 !== void 0 && /* @__PURE__ */ jsx("div", { className: "material__foot", children: footer3 })
+    footer4 !== void 0 && /* @__PURE__ */ jsx("div", { className: "material__foot", children: footer4 })
   ] });
 }
 
-export { AcheryProvider, AppBar, Avatar, Badge, Body, Button, Card, Checkbox, Combobox, ConfirmDialogProvider, DatePicker, Display, EntityPill, Eyebrow, Field, Glyph, GlyphAliases, GlyphCategories, GlyphPicker, Heading, Input, KpiTile, LetterStamp, Marginalia, MaterialCard, Menu, Modal, Mono, ProgressBar, SearchInput, Select, Sidebar, SingleCombobox, Skeleton, Sparkline, StatePill, Table, Tabs, Textarea, ToastProvider, Toggle, Tooltip, TypeTag, glyphCategory, glyphLabel, searchGlyphs, useConfirm, useTheme, useToast, vars };
+// src/components/DetailRail/DetailRail.css.ts
+var backdrop2 = "DetailRail_backdrop__1hfojcp3";
+var body3 = "DetailRail_body__1hfojcp8";
+var footer3 = "DetailRail_footer__1hfojcp9";
+var header2 = "DetailRail_header__1hfojcp6";
+var headerText = "DetailRail_headerText__1hfojcp7";
+var rail = "DetailRail_rail__1hfojcp4";
+var DetailRail = ({
+  open,
+  onClose,
+  title: title2,
+  eyebrow: eyebrow2,
+  children,
+  footer: footer4,
+  width = 360,
+  className
+}) => {
+  if (!open) return null;
+  const railStyle = { width };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: backdrop2, onClick: onClose, "aria-hidden": "true" }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: [rail, className].filter(Boolean).join(" "),
+        style: railStyle,
+        role: "complementary",
+        "aria-label": title2,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: header2, children: [
+            /* @__PURE__ */ jsxs("div", { className: headerText, children: [
+              eyebrow2 && /* @__PURE__ */ jsx(Eyebrow, { children: eyebrow2 }),
+              /* @__PURE__ */ jsx(Heading, { level: 3, children: title2 })
+            ] }),
+            /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", glyph: "cross", onClick: onClose, "aria-label": "Close" })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: body3, children }),
+          footer4 && /* @__PURE__ */ jsx("div", { className: footer3, children: footer4 })
+        ]
+      }
+    )
+  ] });
+};
+
+// src/components/ColourInput/ColourInput.css.ts
+var prefix = "ColourInput_prefix__1pnau5c4";
+var root3 = "ColourInput_root__1pnau5c0";
+var swatch = "ColourInput_swatch__1pnau5c1";
+var textInput = "ColourInput_textInput__1pnau5c5";
+var textWrapper = "ColourInput_textWrapper__1pnau5c2";
+var textWrapperError = "ColourInput_textWrapperError__1pnau5c3";
+function normalizeHex(raw) {
+  const stripped = raw.replace(/^#+/, "").toLowerCase();
+  if (/^[0-9a-f]{3}$/.test(stripped)) {
+    const [r, g, b] = stripped;
+    return `#${r}${r}${g}${g}${b}${b}`;
+  }
+  if (/^[0-9a-f]{6}$/.test(stripped)) return `#${stripped}`;
+  return null;
+}
+var ColourInput = ({
+  value: value2 = "#000000",
+  onChange,
+  error = false,
+  placeholder = "000000",
+  disabled = false,
+  className,
+  style
+}) => {
+  const [textValue, setTextValue] = useState(value2.replace(/^#/, ""));
+  useEffect(() => {
+    setTextValue(value2.replace(/^#/, ""));
+  }, [value2]);
+  const handleTextChange = (raw) => {
+    const stripped = raw.replace(/^#+/, "");
+    setTextValue(stripped);
+    if (/^[0-9a-fA-F]{6}$/.test(stripped)) {
+      onChange?.(`#${stripped.toLowerCase()}`);
+    }
+  };
+  const handleTextBlur = () => {
+    const normalized = normalizeHex(textValue);
+    if (normalized) {
+      onChange?.(normalized);
+    } else {
+      setTextValue(value2.replace(/^#/, ""));
+    }
+  };
+  const handleSwatchChange = (hex) => {
+    onChange?.(hex);
+    setTextValue(hex.replace(/^#/, ""));
+  };
+  return /* @__PURE__ */ jsxs("div", { className: [root3, className].filter(Boolean).join(" "), style, children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "color",
+        value: value2,
+        disabled,
+        onChange: (e) => handleSwatchChange(e.target.value),
+        className: swatch
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: [textWrapper, error && textWrapperError].filter(Boolean).join(" "), children: [
+      /* @__PURE__ */ jsx("span", { className: prefix, "aria-hidden": "true", children: "#" }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "text",
+          value: textValue,
+          disabled,
+          onChange: (e) => handleTextChange(e.target.value),
+          onBlur: handleTextBlur,
+          placeholder: placeholder.replace(/^#/, ""),
+          maxLength: 7,
+          className: textInput,
+          "aria-label": "Hex colour",
+          spellCheck: false,
+          autoComplete: "off"
+        }
+      )
+    ] })
+  ] });
+};
+
+// src/components/SegmentedControl/SegmentedControl.css.ts
+var root4 = "SegmentedControl_root__7mno8a0";
+var segment = "SegmentedControl_segment__7mno8a1";
+var segmentActive = "SegmentedControl_segmentActive__7mno8a2";
+var segmentLg = "SegmentedControl_segmentLg__7mno8a4";
+var segmentSm = "SegmentedControl_segmentSm__7mno8a3";
+var SegmentedControl = ({
+  options,
+  value: value2,
+  onChange,
+  size = "md",
+  disabled = false,
+  className
+}) => {
+  const sizeClass = size === "sm" ? segmentSm : size === "lg" ? segmentLg : void 0;
+  return /* @__PURE__ */ jsx("div", { className: [root4, className].filter(Boolean).join(" "), role: "group", children: options.map((opt) => /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      role: "radio",
+      "aria-checked": opt.value === value2,
+      disabled,
+      onClick: () => onChange(opt.value),
+      className: [
+        segment,
+        sizeClass,
+        opt.value === value2 && segmentActive
+      ].filter(Boolean).join(" "),
+      children: opt.label
+    },
+    opt.value
+  )) });
+};
+
+export { AcheryProvider, AppBar, Avatar, Badge, Body, Button, Card, Checkbox, ColourInput, Combobox, ConfirmDialogProvider, DatePicker, DetailRail, Display, EntityPill, Eyebrow, Field, Glyph, GlyphAliases, GlyphCategories, GlyphPicker, Heading, Input, KpiTile, LetterStamp, Marginalia, MaterialCard, Menu, Modal, Mono, ProgressBar, SearchInput, SegmentedControl, Select, Sidebar, SingleCombobox, Skeleton, Sparkline, StatePill, Table, Tabs, Textarea, ToastProvider, Toggle, Tooltip, TypeTag, glyphCategory, glyphLabel, searchGlyphs, useConfirm, useTheme, useToast, vars };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map