@7onic-ui/react 0.3.8 → 0.3.10

package/dist/chunk-Q5WVLK2L.mjs

@@ -0,0 +1,77 @@
+"use client";
+import {
+  cn
+} from "./chunk-53MIUPSY.mjs";
+
+// src/components/ui/button-group.tsx
+import * as React from "react";
+var ButtonGroupContext = React.createContext(null);
+function useButtonGroup() {
+  return React.useContext(ButtonGroupContext);
+}
+var ButtonGroup = React.forwardRef(
+  ({
+    className,
+    orientation = "horizontal",
+    attached = true,
+    variant,
+    size,
+    radius,
+    fontWeight,
+    disabled,
+    children,
+    ...props
+  }, ref) => {
+    const contextValue = React.useMemo(() => ({
+      variant,
+      size,
+      radius,
+      fontWeight,
+      disabled
+    }), [variant, size, radius, fontWeight, disabled]);
+    return /* @__PURE__ */ React.createElement(ButtonGroupContext.Provider, { value: contextValue }, /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        ref,
+        role: "group",
+        className: cn(
+          "inline-flex",
+          orientation === "vertical" ? "flex-col" : "flex-row",
+          // Attached mode: use negative margin to overlap borders, raise z-index on hover/focus
+          attached && orientation === "horizontal" && [
+            "[&>*:not(:first-child)]:rounded-l-none",
+            "[&>*:not(:last-child)]:rounded-r-none",
+            "[&>*:not(:first-child)]:-ml-px",
+            "[&>*]:relative",
+            "[&>*:hover]:z-10",
+            "[&>*:focus-visible]:z-10",
+            "[&>*:active]:scale-none",
+            "[&>*:hover]:border-border"
+          ],
+          attached && orientation === "vertical" && [
+            "[&>*:not(:first-child)]:rounded-t-none",
+            "[&>*:not(:last-child)]:rounded-b-none",
+            "[&>*:not(:first-child)]:-mt-px",
+            "[&>*]:relative",
+            "[&>*]:w-full",
+            "[&>*:hover]:z-10",
+            "[&>*:focus-visible]:z-10",
+            "[&>*:active]:scale-none",
+            "[&>*:hover]:border-border"
+          ],
+          !attached && "gap-2",
+          className
+        ),
+        ...props
+      },
+      children
+    ));
+  }
+);
+ButtonGroup.displayName = "ButtonGroup";
+
+export {
+  useButtonGroup,
+  ButtonGroup
+};
+//# sourceMappingURL=chunk-Q5WVLK2L.mjs.map

package/dist/chunk-Q5WVLK2L.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ui/button-group.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { cn } from '@/lib/utils'\n\n// ButtonGroup Context\ntype ButtonGroupContextValue = {\n  variant?: 'outline' | 'ghost'\n  size?: 'xs' | 'sm' | 'md' | 'default' | 'lg'\n  radius?: 'none' | 'sm' | 'base' | 'default' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n  fontWeight?: 'normal' | 'semibold'\n  disabled?: boolean\n}\n\nconst ButtonGroupContext = React.createContext<ButtonGroupContextValue | null>(null)\n\nexport function useButtonGroup() {\n  return React.useContext(ButtonGroupContext)\n}\n\nexport interface ButtonGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  orientation?: 'horizontal' | 'vertical'\n  attached?: boolean\n  variant?: 'outline' | 'ghost'\n  size?: 'xs' | 'sm' | 'md' | 'default' | 'lg'\n  radius?: 'none' | 'sm' | 'base' | 'default' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n  fontWeight?: 'normal' | 'semibold'\n  disabled?: boolean\n}\n\nconst ButtonGroup = React.forwardRef<HTMLDivElement, ButtonGroupProps>(\n  ({\n    className,\n    orientation = 'horizontal',\n    attached = true,\n    variant,\n    size,\n    radius,\n    fontWeight,\n    disabled,\n    children,\n    ...props\n  }, ref) => {\n    const contextValue = React.useMemo(() => ({\n      variant,\n      size,\n      radius,\n      fontWeight,\n      disabled,\n    }), [variant, size, radius, fontWeight, disabled])\n\n    return (\n      <ButtonGroupContext.Provider value={contextValue}>\n        <div\n          ref={ref}\n          role=\"group\"\n          className={cn(\n            'inline-flex',\n            orientation === 'vertical' ? 'flex-col' : 'flex-row',\n            // Attached mode: use negative margin to overlap borders, raise z-index on hover/focus\n            attached && orientation === 'horizontal' && [\n              '[&>*:not(:first-child)]:rounded-l-none',\n              '[&>*:not(:last-child)]:rounded-r-none',\n              '[&>*:not(:first-child)]:-ml-px',\n              '[&>*]:relative',\n              '[&>*:hover]:z-10',\n              '[&>*:focus-visible]:z-10',\n              '[&>*:active]:scale-none',\n              '[&>*:hover]:border-border',\n            ],\n            attached && orientation === 'vertical' && [\n              '[&>*:not(:first-child)]:rounded-t-none',\n              '[&>*:not(:last-child)]:rounded-b-none',\n              '[&>*:not(:first-child)]:-mt-px',\n              '[&>*]:relative',\n              '[&>*]:w-full',\n              '[&>*:hover]:z-10',\n              '[&>*:focus-visible]:z-10',\n              '[&>*:active]:scale-none',\n              '[&>*:hover]:border-border',\n            ],\n            !attached && 'gap-2',\n            className\n          )}\n          {...props}\n        >\n          {children}\n        </div>\n      </ButtonGroupContext.Provider>\n    )\n  }\n)\nButtonGroup.displayName = 'ButtonGroup'\n\nexport { ButtonGroup }\n"],"mappings":";;;;;;AAEA,YAAY,WAAW;AAYvB,IAAM,qBAA2B,oBAA8C,IAAI;AAE5E,SAAS,iBAAiB;AAC/B,SAAa,iBAAW,kBAAkB;AAC5C;AAYA,IAAM,cAAoB;AAAA,EACxB,CAAC;AAAA,IACC;AAAA,IACA,cAAc;AAAA,IACd,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GAAG,QAAQ;AACT,UAAM,eAAqB,cAAQ,OAAO;AAAA,MACxC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,IAAI,CAAC,SAAS,MAAM,QAAQ,YAAY,QAAQ,CAAC;AAEjD,WACE,oCAAC,mBAAmB,UAAnB,EAA4B,OAAO,gBAClC;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL,WAAW;AAAA,UACT;AAAA,UACA,gBAAgB,aAAa,aAAa;AAAA;AAAA,UAE1C,YAAY,gBAAgB,gBAAgB;AAAA,YAC1C;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UACF;AAAA,UACA,YAAY,gBAAgB,cAAc;AAAA,YACxC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UACF;AAAA,UACA,CAAC,YAAY;AAAA,UACb;AAAA,QACF;AAAA,QACC,GAAG;AAAA;AAAA,MAEH;AAAA,IACH,CACF;AAAA,EAEJ;AACF;AACA,YAAY,cAAc;","names":[]}

package/dist/chunk-RKSB2N5L.mjs

@@ -0,0 +1,206 @@
+"use client";
+import {
+  cn
+} from "./chunk-53MIUPSY.mjs";
+
+// src/components/ui/segmented.tsx
+import * as React from "react";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import { cva } from "class-variance-authority";
+var SegmentedContext = React.createContext({});
+var useSegmentedContext = () => React.useContext(SegmentedContext);
+var segmentedVariants = cva(
+  "inline-flex items-center text-text-subtle",
+  {
+    variants: {
+      variant: {
+        default: "bg-background-muted gap-1",
+        outline: "bg-background border border-border gap-1",
+        underline: "bg-transparent border-b border-border gap-0",
+        ghost: "bg-transparent gap-1"
+      },
+      size: {
+        sm: "h-8",
+        // 32px height
+        md: "h-9",
+        // 36px height
+        default: "h-10",
+        // 40px height
+        lg: "h-12"
+        // 48px height
+      },
+      radius: {
+        none: "rounded-none",
+        sm: "rounded-sm",
+        base: "rounded",
+        default: "rounded-md",
+        lg: "rounded-lg",
+        xl: "rounded-xl",
+        "2xl": "rounded-2xl",
+        "3xl": "rounded-3xl",
+        full: "rounded-full"
+      },
+      fontWeight: {
+        normal: "[&>*]:font-normal",
+        semibold: "[&>*]:font-semibold"
+      }
+    },
+    compoundVariants: [
+      // Padding for default/outline/ghost variants
+      { variant: "default", className: "p-1" },
+      { variant: "outline", className: "p-1" },
+      { variant: "ghost", className: "p-1" },
+      // Underline has no padding
+      { variant: "underline", className: "p-0" }
+    ],
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+      radius: "default",
+      fontWeight: "normal"
+    }
+  }
+);
+var segmentedItemVariants = cva(
+  [
+    "inline-flex items-center justify-center whitespace-nowrap h-full",
+    "transition-all duration-micro ease-out",
+    "focus-visible:focus-ring",
+    "disabled:pointer-events-none disabled:opacity-50"
+  ].join(" "),
+  {
+    variants: {
+      variant: {
+        // Default: light background when selected, text emphasis on hover
+        default: [
+          "hover:text-foreground",
+          "data-[state=checked]:bg-background data-[state=checked]:text-foreground",
+          "data-[state=checked]:shadow-sm"
+        ].join(" "),
+        // Outline: gray background when selected
+        outline: [
+          "data-[state=checked]:bg-background-muted data-[state=checked]:text-foreground",
+          "hover:text-foreground hover:bg-background-muted"
+        ].join(" "),
+        // Underline: bottom border indicator (Stripe/GitHub style)
+        underline: [
+          "border-b-2 border-transparent -mb-px",
+          "hover:text-foreground hover:border-border",
+          "data-[state=checked]:text-foreground data-[state=checked]:border-foreground"
+        ].join(" "),
+        // Ghost: pill background only on selected (Notion/Figma style)
+        ghost: [
+          "hover:text-foreground hover:bg-background-muted",
+          "data-[state=checked]:bg-background-muted data-[state=checked]:text-foreground"
+        ].join(" ")
+      },
+      size: {
+        sm: "text-xs",
+        // 12px
+        md: "text-sm",
+        // 13px
+        default: "text-sm",
+        // 13px
+        lg: "text-md"
+        // 14px
+      },
+      radius: {
+        none: "rounded-none",
+        sm: "rounded-sm",
+        base: "rounded",
+        default: "rounded-md",
+        lg: "rounded-md",
+        xl: "rounded-lg",
+        "2xl": "rounded-xl",
+        "3xl": "rounded-2xl",
+        full: "rounded-full"
+      },
+      // Content type determines padding and aspect ratio
+      contentType: {
+        // Icon only: square aspect ratio like IconButton
+        icon: "aspect-square",
+        // Icon + text: rectangular (gap is set via compoundVariants)
+        "icon-text": "",
+        // Text only: standard button padding
+        text: ""
+      }
+    },
+    compoundVariants: [
+      // Icon + text - same padding rules as Button/Toggle
+      { contentType: "icon-text", size: "sm", className: "px-3 gap-2" },
+      // 12px padding, 8px gap
+      { contentType: "icon-text", size: "md", className: "px-3.5 gap-2" },
+      // 14px padding, 8px gap
+      { contentType: "icon-text", size: "default", className: "px-4 gap-2" },
+      // 16px padding, 8px gap
+      { contentType: "icon-text", size: "lg", className: "px-6 gap-2" },
+      // 24px padding, 8px gap
+      // Text only - same padding rules as Button/Toggle
+      { contentType: "text", size: "sm", className: "px-3.5" },
+      // 14px
+      { contentType: "text", size: "md", className: "px-3.5" },
+      // 14px
+      { contentType: "text", size: "default", className: "px-4" },
+      // 16px
+      { contentType: "text", size: "lg", className: "px-6" },
+      // 24px
+      // Underline variant has no rounded corners
+      { variant: "underline", className: "rounded-none" }
+    ],
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+      radius: "default",
+      contentType: "text"
+    }
+  }
+);
+var Segmented = React.forwardRef(({ className, variant, size, radius, fontWeight, ...props }, ref) => {
+  const resolvedFontWeight = fontWeight ?? "normal";
+  return /* @__PURE__ */ React.createElement(SegmentedContext.Provider, { value: { variant: variant || "default", size: size || "default", radius: radius || "default" } }, /* @__PURE__ */ React.createElement(
+    RadioGroupPrimitive.Root,
+    {
+      className: cn(segmentedVariants({ variant, size, radius, fontWeight: resolvedFontWeight }), className),
+      ...props,
+      ref
+    }
+  ));
+});
+Segmented.displayName = "Segmented";
+var iconSizeClasses = {
+  sm: "[&>svg]:icon-xs",
+  // 14px
+  md: "[&>svg]:icon-sm",
+  // 16px
+  default: "[&>svg]:icon-sm",
+  // 16px
+  lg: "[&>svg]:icon-sm"
+  // 16px
+};
+var SegmentedItem = React.forwardRef(({ className, children, size, radius, contentType, ...props }, ref) => {
+  const { variant, size: contextSize, radius: contextRadius } = useSegmentedContext();
+  const resolvedSize = size || contextSize || "default";
+  const resolvedRadius = radius || contextRadius || "default";
+  return /* @__PURE__ */ React.createElement(
+    RadioGroupPrimitive.Item,
+    {
+      ref,
+      className: cn(
+        segmentedItemVariants({ variant, size: resolvedSize, radius: resolvedRadius, contentType }),
+        iconSizeClasses[resolvedSize],
+        className
+      ),
+      ...props
+    },
+    children
+  );
+});
+SegmentedItem.displayName = "SegmentedItem";
+
+export {
+  segmentedVariants,
+  segmentedItemVariants,
+  Segmented,
+  SegmentedItem
+};
+//# sourceMappingURL=chunk-RKSB2N5L.mjs.map

package/dist/chunk-RKSB2N5L.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ui/segmented.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport * as RadioGroupPrimitive from '@radix-ui/react-radio-group'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\n\n// Context to pass variant and size from Segmented to SegmentedItem\ntype SegmentedContextValue = {\n  variant?: 'default' | 'outline' | 'underline' | 'ghost'\n  size?: 'sm' | 'md' | 'default' | 'lg'\n  radius?: 'none' | 'sm' | 'base' | 'default' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n}\nconst SegmentedContext = React.createContext<SegmentedContextValue>({})\nconst useSegmentedContext = () => React.useContext(SegmentedContext)\n\nconst segmentedVariants = cva(\n  'inline-flex items-center text-text-subtle',\n  {\n    variants: {\n      variant: {\n        default: 'bg-background-muted gap-1',\n        outline: 'bg-background border border-border gap-1',\n        underline: 'bg-transparent border-b border-border gap-0',\n        ghost: 'bg-transparent gap-1',\n      },\n      size: {\n        sm: 'h-8',        // 32px height\n        md: 'h-9',        // 36px height\n        default: 'h-10',  // 40px height\n        lg: 'h-12',       // 48px height\n      },\n      radius: {\n        none: 'rounded-none',\n        sm: 'rounded-sm',\n        base: 'rounded',\n        default: 'rounded-md',\n        lg: 'rounded-lg',\n        xl: 'rounded-xl',\n        '2xl': 'rounded-2xl',\n        '3xl': 'rounded-3xl',\n        full: 'rounded-full',\n      },\n      fontWeight: {\n        normal: '[&>*]:font-normal',\n        semibold: '[&>*]:font-semibold',\n      },\n    },\n    compoundVariants: [\n      // Padding for default/outline/ghost variants\n      { variant: 'default', className: 'p-1' },\n      { variant: 'outline', className: 'p-1' },\n      { variant: 'ghost', className: 'p-1' },\n      // Underline has no padding\n      { variant: 'underline', className: 'p-0' },\n    ],\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n      radius: 'default',\n      fontWeight: 'normal',\n    },\n  }\n)\n\nconst segmentedItemVariants = cva(\n  [\n    'inline-flex items-center justify-center whitespace-nowrap h-full',\n    'transition-all duration-micro ease-out',\n    'focus-visible:focus-ring',\n    'disabled:pointer-events-none disabled:opacity-50',\n  ].join(' '),\n  {\n    variants: {\n      variant: {\n        // Default: light background when selected, text emphasis on hover\n        default: [\n          'hover:text-foreground',\n          'data-[state=checked]:bg-background data-[state=checked]:text-foreground',\n          'data-[state=checked]:shadow-sm',\n        ].join(' '),\n        // Outline: gray background when selected\n        outline: [\n          'data-[state=checked]:bg-background-muted data-[state=checked]:text-foreground',\n          'hover:text-foreground hover:bg-background-muted',\n        ].join(' '),\n        // Underline: bottom border indicator (Stripe/GitHub style)\n        underline: [\n          'border-b-2 border-transparent -mb-px',\n          'hover:text-foreground hover:border-border',\n          'data-[state=checked]:text-foreground data-[state=checked]:border-foreground',\n        ].join(' '),\n        // Ghost: pill background only on selected (Notion/Figma style)\n        ghost: [\n          'hover:text-foreground hover:bg-background-muted',\n          'data-[state=checked]:bg-background-muted data-[state=checked]:text-foreground',\n        ].join(' '),\n      },\n      size: {\n        sm: 'text-xs',      // 12px\n        md: 'text-sm',      // 13px\n        default: 'text-sm', // 13px\n        lg: 'text-md',      // 14px\n      },\n      radius: {\n        none: 'rounded-none',\n        sm: 'rounded-sm',\n        base: 'rounded',\n        default: 'rounded-md',\n        lg: 'rounded-md',\n        xl: 'rounded-lg',\n        '2xl': 'rounded-xl',\n        '3xl': 'rounded-2xl',\n        full: 'rounded-full',\n      },\n      // Content type determines padding and aspect ratio\n      contentType: {\n        // Icon only: square aspect ratio like IconButton\n        icon: 'aspect-square',\n        // Icon + text: rectangular (gap is set via compoundVariants)\n        'icon-text': '',\n        // Text only: standard button padding\n        text: '',\n      },\n    },\n    compoundVariants: [\n      // Icon + text - same padding rules as Button/Toggle\n      { contentType: 'icon-text', size: 'sm', className: 'px-3 gap-2' },      // 12px padding, 8px gap\n      { contentType: 'icon-text', size: 'md', className: 'px-3.5 gap-2' },   // 14px padding, 8px gap\n      { contentType: 'icon-text', size: 'default', className: 'px-4 gap-2' }, // 16px padding, 8px gap\n      { contentType: 'icon-text', size: 'lg', className: 'px-6 gap-2' },      // 24px padding, 8px gap\n      // Text only - same padding rules as Button/Toggle\n      { contentType: 'text', size: 'sm', className: 'px-3.5' },    // 14px\n      { contentType: 'text', size: 'md', className: 'px-3.5' },    // 14px\n      { contentType: 'text', size: 'default', className: 'px-4' }, // 16px\n      { contentType: 'text', size: 'lg', className: 'px-6' },      // 24px\n      // Underline variant has no rounded corners\n      { variant: 'underline', className: 'rounded-none' },\n    ],\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n      radius: 'default',\n      contentType: 'text',\n    },\n  }\n)\n\nexport interface SegmentedProps\n  extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>,\n    VariantProps<typeof segmentedVariants> {}\n\nconst Segmented = React.forwardRef<\n  React.ElementRef<typeof RadioGroupPrimitive.Root>,\n  SegmentedProps\n>(({ className, variant, size, radius, fontWeight, ...props }, ref) => {\n  // All variants default to normal font weight\n  const resolvedFontWeight = fontWeight ?? 'normal'\n\n  return (\n    <SegmentedContext.Provider value={{ variant: variant || 'default', size: size || 'default', radius: radius || 'default' }}>\n      <RadioGroupPrimitive.Root\n        className={cn(segmentedVariants({ variant, size, radius, fontWeight: resolvedFontWeight }), className)}\n        {...props}\n        ref={ref}\n      />\n    </SegmentedContext.Provider>\n  )\n})\nSegmented.displayName = 'Segmented'\n\n// Icon size for segmented control (4-step scale, Icon+Text mode)\n// sm: 14px, md~default~lg: 16px\nconst iconSizeClasses = {\n  sm: '[&>svg]:icon-xs',      // 14px\n  md: '[&>svg]:icon-sm',      // 16px\n  default: '[&>svg]:icon-sm', // 16px\n  lg: '[&>svg]:icon-sm',      // 16px\n}\n\nexport interface SegmentedItemProps\n  extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>,\n    Omit<VariantProps<typeof segmentedItemVariants>, 'variant'> {}\n\nconst SegmentedItem = React.forwardRef<\n  React.ElementRef<typeof RadioGroupPrimitive.Item>,\n  SegmentedItemProps\n>(({ className, children, size, radius, contentType, ...props }, ref) => {\n  const { variant, size: contextSize, radius: contextRadius } = useSegmentedContext()\n  const resolvedSize = size || contextSize || 'default'\n  const resolvedRadius = radius || contextRadius || 'default'\n\n  return (\n    <RadioGroupPrimitive.Item\n      ref={ref}\n      className={cn(\n        segmentedItemVariants({ variant, size: resolvedSize, radius: resolvedRadius, contentType }),\n        iconSizeClasses[resolvedSize],\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </RadioGroupPrimitive.Item>\n  )\n})\nSegmentedItem.displayName = 'SegmentedItem'\n\nexport { Segmented, SegmentedItem, segmentedVariants, segmentedItemVariants }\n"],"mappings":"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","names":[]}

package/dist/chunk-S4DGVKBK.mjs

@@ -0,0 +1,151 @@
+"use client";
+import {
+  cn
+} from "./chunk-53MIUPSY.mjs";
+
+// src/components/ui/toggle-group.tsx
+import * as React from "react";
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
+import { cva } from "class-variance-authority";
+var toggleGroupVariants = cva(
+  "inline-flex items-center justify-center",
+  {
+    variants: {
+      orientation: {
+        horizontal: "flex-row",
+        vertical: "flex-col"
+      }
+    },
+    defaultVariants: {
+      orientation: "horizontal"
+    }
+  }
+);
+var toggleGroupItemVariants = cva(
+  "inline-flex items-center justify-center text-sm text-text-muted transition-all duration-micro focus-visible:focus-ring disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent hover:bg-background-muted hover:text-foreground data-[state=on]:bg-background-muted data-[state=on]:text-foreground",
+        outline: "border border-border bg-transparent hover:bg-background-muted hover:text-foreground data-[state=on]:bg-background-muted data-[state=on]:text-foreground"
+      },
+      fontWeight: {
+        normal: "font-normal",
+        semibold: "font-semibold"
+      },
+      size: {
+        xs: "h-7 px-2.5 text-xs gap-1",
+        // 28px height, 10px paddingX, 12px font
+        sm: "h-8 px-3 text-sm gap-2",
+        // 32px height, 12px paddingX, 13px font
+        md: "h-9 px-3.5 text-md gap-2",
+        // 36px height, 14px paddingX, 14px font
+        default: "h-10 px-4 text-md gap-2",
+        // 40px height, 16px paddingX, 14px font
+        lg: "h-12 px-6 text-base gap-2"
+        // 48px height, 24px paddingX, 16px font
+      },
+      radius: {
+        none: "rounded-none",
+        sm: "rounded-sm",
+        base: "rounded",
+        default: "rounded-md",
+        lg: "rounded-lg",
+        xl: "rounded-xl",
+        "2xl": "rounded-2xl",
+        "3xl": "rounded-3xl",
+        full: "rounded-full"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+      radius: "default",
+      fontWeight: "normal"
+    }
+  }
+);
+var ToggleGroupContext = React.createContext({
+  variant: "default",
+  size: "default",
+  radius: "default",
+  fontWeight: "normal"
+});
+var ToggleGroup = React.forwardRef(({ className, orientation, variant, size, radius, fontWeight, children, ...props }, ref) => /* @__PURE__ */ React.createElement(
+  ToggleGroupPrimitive.Root,
+  {
+    ref,
+    className: cn(
+      toggleGroupVariants({ orientation }),
+      // Attached style for horizontal
+      orientation !== "vertical" && [
+        "[&>*:not(:first-child)]:rounded-l-none",
+        "[&>*:not(:last-child)]:rounded-r-none",
+        "[&>*:not(:first-child)]:-ml-px",
+        "[&>*]:relative",
+        "[&>*:hover]:z-10",
+        "[&>*:focus-visible]:z-10",
+        "[&>*:active]:scale-none"
+      ],
+      // Attached style for vertical
+      orientation === "vertical" && [
+        "[&>*:not(:first-child)]:rounded-t-none",
+        "[&>*:not(:last-child)]:rounded-b-none",
+        "[&>*:not(:first-child)]:-mt-px",
+        "[&>*]:relative",
+        "[&>*]:w-full",
+        "[&>*:hover]:z-10",
+        "[&>*:focus-visible]:z-10",
+        "[&>*:active]:scale-none"
+      ],
+      className
+    ),
+    orientation,
+    ...props
+  },
+  /* @__PURE__ */ React.createElement(ToggleGroupContext.Provider, { value: { variant, size, radius, fontWeight } }, children)
+));
+ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
+var iconSizeClasses = {
+  xs: "[&>svg]:icon-xs",
+  // 14px
+  sm: "[&>svg]:icon-xs",
+  // 14px
+  md: "[&>svg]:icon-sm",
+  // 16px
+  default: "[&>svg]:icon-sm",
+  // 16px
+  lg: "[&>svg]:icon-sm"
+  // 16px
+};
+var ToggleGroupItem = React.forwardRef(({ className, variant, size, radius, fontWeight, children, ...props }, ref) => {
+  const context = React.useContext(ToggleGroupContext);
+  const resolvedSize = size || context.size || "default";
+  return /* @__PURE__ */ React.createElement(
+    ToggleGroupPrimitive.Item,
+    {
+      ref,
+      className: cn(
+        toggleGroupItemVariants({
+          variant: variant || context.variant,
+          size: resolvedSize,
+          radius: radius || context.radius,
+          fontWeight: fontWeight || context.fontWeight
+        }),
+        iconSizeClasses[resolvedSize],
+        className
+      ),
+      ...props
+    },
+    children
+  );
+});
+ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
+
+export {
+  toggleGroupVariants,
+  toggleGroupItemVariants,
+  ToggleGroup,
+  ToggleGroupItem
+};
+//# sourceMappingURL=chunk-S4DGVKBK.mjs.map

package/dist/chunk-S4DGVKBK.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ui/toggle-group.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\n\nconst toggleGroupVariants = cva(\n  'inline-flex items-center justify-center',\n  {\n    variants: {\n      orientation: {\n        horizontal: 'flex-row',\n        vertical: 'flex-col',\n      },\n    },\n    defaultVariants: {\n      orientation: 'horizontal',\n    },\n  }\n)\n\nconst toggleGroupItemVariants = cva(\n  'inline-flex items-center justify-center text-sm text-text-muted transition-all duration-micro focus-visible:focus-ring disabled:pointer-events-none disabled:opacity-50',\n  {\n    variants: {\n      variant: {\n        default: 'bg-transparent hover:bg-background-muted hover:text-foreground data-[state=on]:bg-background-muted data-[state=on]:text-foreground',\n        outline: 'border border-border bg-transparent hover:bg-background-muted hover:text-foreground data-[state=on]:bg-background-muted data-[state=on]:text-foreground',\n      },\n      fontWeight: {\n        normal: 'font-normal',\n        semibold: 'font-semibold',\n      },\n      size: {\n        xs: 'h-7 px-2.5 text-xs gap-1',      // 28px height, 10px paddingX, 12px font\n        sm: 'h-8 px-3 text-sm gap-2',        // 32px height, 12px paddingX, 13px font\n        md: 'h-9 px-3.5 text-md gap-2',      // 36px height, 14px paddingX, 14px font\n        default: 'h-10 px-4 text-md gap-2',  // 40px height, 16px paddingX, 14px font\n        lg: 'h-12 px-6 text-base gap-2',     // 48px height, 24px paddingX, 16px font\n      },\n      radius: {\n        none: 'rounded-none',\n        sm: 'rounded-sm',\n        base: 'rounded',\n        default: 'rounded-md',\n        lg: 'rounded-lg',\n        xl: 'rounded-xl',\n        '2xl': 'rounded-2xl',\n        '3xl': 'rounded-3xl',\n        full: 'rounded-full',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n      radius: 'default',\n      fontWeight: 'normal',\n    },\n  }\n)\n\nconst ToggleGroupContext = React.createContext<\n  VariantProps<typeof toggleGroupItemVariants>\n>({\n  variant: 'default',\n  size: 'default',\n  radius: 'default',\n  fontWeight: 'normal',\n})\n\ntype ToggleGroupSingleProps = {\n  type: 'single'\n  value?: string\n  defaultValue?: string\n  onValueChange?: (value: string) => void\n}\n\ntype ToggleGroupMultipleProps = {\n  type: 'multiple'\n  value?: string[]\n  defaultValue?: string[]\n  onValueChange?: (value: string[]) => void\n}\n\ntype ToggleGroupBaseProps = Omit<\n  React.ComponentPropsWithoutRef<'div'>,\n  'defaultValue' | 'dir'\n> & {\n  disabled?: boolean\n  rovingFocus?: boolean\n  orientation?: 'horizontal' | 'vertical'\n  dir?: 'ltr' | 'rtl'\n  loop?: boolean\n  children?: React.ReactNode\n}\n\nexport type ToggleGroupProps = ToggleGroupBaseProps &\n  VariantProps<typeof toggleGroupVariants> &\n  VariantProps<typeof toggleGroupItemVariants> &\n  (ToggleGroupSingleProps | ToggleGroupMultipleProps)\n\nconst ToggleGroup = React.forwardRef<\n  React.ElementRef<typeof ToggleGroupPrimitive.Root>,\n  ToggleGroupProps\n>(({ className, orientation, variant, size, radius, fontWeight, children, ...props }, ref) => (\n  <ToggleGroupPrimitive.Root\n    ref={ref}\n    className={cn(\n      toggleGroupVariants({ orientation }),\n      // Attached style for horizontal\n      orientation !== 'vertical' && [\n        '[&>*:not(:first-child)]:rounded-l-none',\n        '[&>*:not(:last-child)]:rounded-r-none',\n        '[&>*:not(:first-child)]:-ml-px',\n        '[&>*]:relative',\n        '[&>*:hover]:z-10',\n        '[&>*:focus-visible]:z-10',\n        '[&>*:active]:scale-none',\n      ],\n      // Attached style for vertical\n      orientation === 'vertical' && [\n        '[&>*:not(:first-child)]:rounded-t-none',\n        '[&>*:not(:last-child)]:rounded-b-none',\n        '[&>*:not(:first-child)]:-mt-px',\n        '[&>*]:relative',\n        '[&>*]:w-full',\n        '[&>*:hover]:z-10',\n        '[&>*:focus-visible]:z-10',\n        '[&>*:active]:scale-none',\n      ],\n      className\n    )}\n    orientation={orientation}\n    {...(props as React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root>)}\n  >\n    <ToggleGroupContext.Provider value={{ variant, size, radius, fontWeight }}>\n      {children}\n    </ToggleGroupContext.Provider>\n  </ToggleGroupPrimitive.Root>\n))\nToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName\n\nexport interface ToggleGroupItemProps\n  extends React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item>,\n    Omit<VariantProps<typeof toggleGroupItemVariants>, 'fontWeight'> {\n  fontWeight?: 'normal' | 'semibold'\n}\n\n// Icon size for toggle group (5-step scale, Icon+Text mode)\n// xs~sm: 14px, md~default~lg: 16px\nconst iconSizeClasses = {\n  xs: '[&>svg]:icon-xs',      // 14px\n  sm: '[&>svg]:icon-xs',      // 14px\n  md: '[&>svg]:icon-sm',      // 16px\n  default: '[&>svg]:icon-sm', // 16px\n  lg: '[&>svg]:icon-sm',      // 16px\n}\n\nconst ToggleGroupItem = React.forwardRef<\n  React.ElementRef<typeof ToggleGroupPrimitive.Item>,\n  ToggleGroupItemProps\n>(({ className, variant, size, radius, fontWeight, children, ...props }, ref) => {\n  const context = React.useContext(ToggleGroupContext)\n  const resolvedSize = size || context.size || 'default'\n\n  return (\n    <ToggleGroupPrimitive.Item\n      ref={ref}\n      className={cn(\n        toggleGroupItemVariants({\n          variant: variant || context.variant,\n          size: resolvedSize,\n          radius: radius || context.radius,\n          fontWeight: fontWeight || context.fontWeight,\n        }),\n        iconSizeClasses[resolvedSize],\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </ToggleGroupPrimitive.Item>\n  )\n})\nToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName\n\nexport { ToggleGroup, ToggleGroupItem, toggleGroupVariants, toggleGroupItemVariants }\n"],"mappings":"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","names":[]}

package/dist/chunk-S4T4PU7F.mjs

@@ -0,0 +1,114 @@
+"use client";
+import {
+  cn
+} from "./chunk-53MIUPSY.mjs";
+
+// src/components/ui/typing-indicator.tsx
+import * as React from "react";
+import { cva } from "class-variance-authority";
+var DOT_SIZES = { sm: 4, default: 6, lg: 8 };
+var DOT_GAP = { sm: 3, default: 4, lg: 5 };
+var SPEED_MS = { slow: 1600, default: 1100, fast: 700 };
+var DOT_COUNT = 3;
+var bgColorMap = {
+  default: "bg-foreground",
+  primary: "bg-primary",
+  muted: "bg-text-subtle"
+};
+var typingIndicatorVariants = cva(
+  "inline-flex items-center",
+  {
+    variants: {
+      size: {
+        sm: "gap-1.5 text-xs",
+        default: "gap-2 text-sm",
+        lg: "gap-2.5 text-base"
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+var TypingIndicator = React.forwardRef(
+  ({
+    className,
+    variant = "dots",
+    size,
+    color = "muted",
+    speed = "default",
+    label = "Typing",
+    showLabel = false,
+    ...props
+  }, ref) => {
+    const resolvedSize = size ?? "default";
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        ref,
+        role: "status",
+        "aria-live": "polite",
+        "aria-label": label,
+        className: cn(typingIndicatorVariants({ size }), className),
+        ...props
+      },
+      variant === "dots" && /* @__PURE__ */ React.createElement(DotsIndicator, { size: resolvedSize, color, speed }),
+      variant === "cursor" && /* @__PURE__ */ React.createElement(CursorIndicator, { size: resolvedSize, color }),
+      showLabel && /* @__PURE__ */ React.createElement("span", { className: "text-text-muted select-none" }, label)
+    );
+  }
+);
+TypingIndicator.displayName = "TypingIndicator";
+function DotsIndicator({
+  size,
+  color,
+  speed
+}) {
+  const dotSize = DOT_SIZES[size];
+  const gap = DOT_GAP[size];
+  const duration = SPEED_MS[speed];
+  return /* @__PURE__ */ React.createElement("div", { className: "inline-flex items-center", style: { gap } }, Array.from({ length: DOT_COUNT }, (_, i) => /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      key: i,
+      className: cn(
+        "rounded-full animate-spinner-dot motion-reduce:animate-none motion-reduce:opacity-60",
+        bgColorMap[color]
+      ),
+      style: {
+        width: dotSize,
+        height: dotSize,
+        animationDuration: `${duration}ms`,
+        animationDelay: `${i * (duration / DOT_COUNT / 1.5)}ms`
+      }
+    }
+  )));
+}
+var CURSOR_SIZE = {
+  sm: { width: 2, height: 14 },
+  default: { width: 2.5, height: 20 },
+  lg: { width: 3, height: 26 }
+};
+function CursorIndicator({
+  size,
+  color
+}) {
+  const { width, height } = CURSOR_SIZE[size];
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      "aria-hidden": "true",
+      className: cn(
+        "rounded-full animate-typing-cursor motion-reduce:animate-none motion-reduce:opacity-60",
+        bgColorMap[color]
+      ),
+      style: { width, height, animationDuration: "1200ms" }
+    }
+  );
+}
+
+export {
+  typingIndicatorVariants,
+  TypingIndicator
+};
+//# sourceMappingURL=chunk-S4T4PU7F.mjs.map

package/dist/chunk-S4T4PU7F.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ui/typing-indicator.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\n\n// ============================================================================\n// Constants\n// ============================================================================\n\n/** Dot diameter per size (px) */\nconst DOT_SIZES = { sm: 4, default: 6, lg: 8 } as const\n\n/** Gap between dots per size (px) */\nconst DOT_GAP = { sm: 3, default: 4, lg: 5 } as const\n\n/** Animation speed in ms */\nconst SPEED_MS = { slow: 1600, default: 1100, fast: 700 } as const\n\n/** Number of dots */\nconst DOT_COUNT = 3\n\n// ============================================================================\n// Color mapping\n// ============================================================================\n\nconst bgColorMap = {\n  default: 'bg-foreground',\n  primary: 'bg-primary',\n  muted:   'bg-text-subtle',\n} as const\n\n// ============================================================================\n// Variants (CVA)\n// ============================================================================\n\nconst typingIndicatorVariants = cva(\n  'inline-flex items-center',\n  {\n    variants: {\n      size: {\n        sm:      'gap-1.5 text-xs',\n        default: 'gap-2 text-sm',\n        lg:      'gap-2.5 text-base',\n      },\n    },\n    defaultVariants: {\n      size: 'default',\n    },\n  }\n)\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface TypingIndicatorProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof typingIndicatorVariants> {\n  /** Animation style */\n  variant?: 'dots' | 'cursor'\n  /** Indicator color */\n  color?: 'default' | 'primary' | 'muted'\n  /** Animation speed */\n  speed?: 'slow' | 'default' | 'fast'\n  /** Accessible label (also shown as visual text when showLabel is true) */\n  label?: string\n  /** Render label text alongside the indicator */\n  showLabel?: boolean\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nconst TypingIndicator = React.forwardRef<HTMLDivElement, TypingIndicatorProps>(\n  (\n    {\n      className,\n      variant = 'dots',\n      size,\n      color = 'muted',\n      speed = 'default',\n      label = 'Typing',\n      showLabel = false,\n      ...props\n    },\n    ref\n  ) => {\n    const resolvedSize = size ?? 'default'\n\n    return (\n      <div\n        ref={ref}\n        role=\"status\"\n        aria-live=\"polite\"\n        aria-label={label}\n        className={cn(typingIndicatorVariants({ size }), className)}\n        {...props}\n      >\n        {variant === 'dots' && (\n          <DotsIndicator size={resolvedSize} color={color} speed={speed} />\n        )}\n        {variant === 'cursor' && (\n          <CursorIndicator size={resolvedSize} color={color} />\n        )}\n        {showLabel && (\n          <span className=\"text-text-muted select-none\">{label}</span>\n        )}\n      </div>\n    )\n  }\n)\nTypingIndicator.displayName = 'TypingIndicator'\n\n// ============================================================================\n// Dots Indicator — 3 staggered bouncing dots (reuses animate-spinner-dot)\n// ============================================================================\n\nfunction DotsIndicator({\n  size,\n  color,\n  speed,\n}: {\n  size: 'sm' | 'default' | 'lg'\n  color: 'default' | 'primary' | 'muted'\n  speed: 'slow' | 'default' | 'fast'\n}) {\n  const dotSize = DOT_SIZES[size]\n  const gap = DOT_GAP[size]\n  const duration = SPEED_MS[speed]\n\n  return (\n    <div className=\"inline-flex items-center\" style={{ gap }}>\n      {Array.from({ length: DOT_COUNT }, (_, i) => (\n        <div\n          key={i}\n          className={cn(\n            'rounded-full animate-spinner-dot motion-reduce:animate-none motion-reduce:opacity-60',\n            bgColorMap[color]\n          )}\n          style={{\n            width: dotSize,\n            height: dotSize,\n            animationDuration: `${duration}ms`,\n            animationDelay: `${i * (duration / DOT_COUNT / 1.5)}ms`,\n          }}\n        />\n      ))}\n    </div>\n  )\n}\n\n// ============================================================================\n// Cursor sizes per component size\n// ============================================================================\n\nconst CURSOR_SIZE = {\n  sm:      { width: 2, height: 14 },\n  default: { width: 2.5, height: 20 },\n  lg:      { width: 3, height: 26 },\n} as const\n\n// ============================================================================\n// Cursor Indicator — blinking cursor (text-cursor style)\n// ============================================================================\n\nfunction CursorIndicator({\n  size,\n  color,\n}: {\n  size: 'sm' | 'default' | 'lg'\n  color: 'default' | 'primary' | 'muted'\n}) {\n  const { width, height } = CURSOR_SIZE[size]\n\n  return (\n    <div\n      aria-hidden=\"true\"\n      className={cn(\n        'rounded-full animate-typing-cursor motion-reduce:animate-none motion-reduce:opacity-60',\n        bgColorMap[color]\n      )}\n      style={{ width, height, animationDuration: '1200ms' }}\n    />\n  )\n}\n\nexport { TypingIndicator, typingIndicatorVariants }\n"],"mappings":";;;;;;AAEA,YAAY,WAAW;AACvB,SAAS,WAA8B;AAQvC,IAAM,YAAY,EAAE,IAAI,GAAG,SAAS,GAAG,IAAI,EAAE;AAG7C,IAAM,UAAU,EAAE,IAAI,GAAG,SAAS,GAAG,IAAI,EAAE;AAG3C,IAAM,WAAW,EAAE,MAAM,MAAM,SAAS,MAAM,MAAM,IAAI;AAGxD,IAAM,YAAY;AAMlB,IAAM,aAAa;AAAA,EACjB,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAS;AACX;AAMA,IAAM,0BAA0B;AAAA,EAC9B;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,IAAS;AAAA,QACT,SAAS;AAAA,QACT,IAAS;AAAA,MACX;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,MAAM;AAAA,IACR;AAAA,EACF;AACF;AAyBA,IAAM,kBAAwB;AAAA,EAC5B,CACE;AAAA,IACE;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,eAAe,QAAQ;AAE7B,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL,aAAU;AAAA,QACV,cAAY;AAAA,QACZ,WAAW,GAAG,wBAAwB,EAAE,KAAK,CAAC,GAAG,SAAS;AAAA,QACzD,GAAG;AAAA;AAAA,MAEH,YAAY,UACX,oCAAC,iBAAc,MAAM,cAAc,OAAc,OAAc;AAAA,MAEhE,YAAY,YACX,oCAAC,mBAAgB,MAAM,cAAc,OAAc;AAAA,MAEpD,aACC,oCAAC,UAAK,WAAU,iCAA+B,KAAM;AAAA,IAEzD;AAAA,EAEJ;AACF;AACA,gBAAgB,cAAc;AAM9B,SAAS,cAAc;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,QAAM,UAAU,UAAU,IAAI;AAC9B,QAAM,MAAM,QAAQ,IAAI;AACxB,QAAM,WAAW,SAAS,KAAK;AAE/B,SACE,oCAAC,SAAI,WAAU,4BAA2B,OAAO,EAAE,IAAI,KACpD,MAAM,KAAK,EAAE,QAAQ,UAAU,GAAG,CAAC,GAAG,MACrC;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAW;AAAA,QACT;AAAA,QACA,WAAW,KAAK;AAAA,MAClB;AAAA,MACA,OAAO;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,mBAAmB,GAAG,QAAQ;AAAA,QAC9B,gBAAgB,GAAG,KAAK,WAAW,YAAY,IAAI;AAAA,MACrD;AAAA;AAAA,EACF,CACD,CACH;AAEJ;AAMA,IAAM,cAAc;AAAA,EAClB,IAAS,EAAE,OAAO,GAAG,QAAQ,GAAG;AAAA,EAChC,SAAS,EAAE,OAAO,KAAK,QAAQ,GAAG;AAAA,EAClC,IAAS,EAAE,OAAO,GAAG,QAAQ,GAAG;AAClC;AAMA,SAAS,gBAAgB;AAAA,EACvB;AAAA,EACA;AACF,GAGG;AACD,QAAM,EAAE,OAAO,OAAO,IAAI,YAAY,IAAI;AAE1C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAY;AAAA,MACZ,WAAW;AAAA,QACT;AAAA,QACA,WAAW,KAAK;AAAA,MAClB;AAAA,MACA,OAAO,EAAE,OAAO,QAAQ,mBAAmB,SAAS;AAAA;AAAA,EACtD;AAEJ;","names":[]}