@music-vine/cadence 2.6.2 → 3.0.0

package/dist/components/input.d.ts

@@ -0,0 +1,69 @@
+/**
+ * @module Input
+ *
+ * Styled text input with support for icons, sizes, and clear button.
+ * Includes focus state management and dark mode support.
+ *
+ * @example
+ * // Basic input
+ * <Input placeholder="Enter your email" type="email" />
+ *
+ * @example
+ * // With icons
+ * <Input
+ *   leftIcon={<Search />}
+ *   rightIcon={<ClearInputButton onClick={clearValue} />}
+ *   placeholder="Search..."
+ * />
+ *
+ * @example
+ * // Small size
+ * <Input size="sm" placeholder="Compact input" />
+ *
+ * @example
+ * // With clear button
+ * const [value, setValue] = useState('');
+ *
+ * <Input
+ *   value={value}
+ *   onChange={(e) => setValue(e.target.value)}
+ *   rightIcon={
+ *     value && <ClearInputButton onClick={() => setValue('')} />
+ *   }
+ * />
+ */
+import { type VariantProps } from "class-variance-authority";
+import type { Ref } from "react";
+declare const inputVariants: (props?: ({
+    size?: "sm" | "default" | "auto" | null | undefined;
+    hasLeftIcon?: boolean | null | undefined;
+    hasRightIcon?: boolean | null | undefined;
+    type?: "search" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type InputPropsWithoutSize = Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">;
+type InputVariantsProps = VariantProps<typeof inputVariants>;
+type PublicInputVariantsProps = Omit<InputVariantsProps, "hasLeftIcon" | "hasRightIcon" | "type">;
+/**
+ * Props for the Input component.
+ * @property size - Input size: `"default"`, `"sm"`, or `"auto"`
+ * @property htmlSize - Native HTML size attribute for input width
+ * @property leftIcon - Icon element displayed on the left side
+ * @property rightIcon - Icon element displayed on the right side
+ */
+export interface InputProps extends InputPropsWithoutSize, PublicInputVariantsProps {
+    htmlSize?: number;
+    leftIcon?: React.ReactNode;
+    ref?: Ref<HTMLInputElement>;
+    rightIcon?: React.ReactNode;
+}
+declare const Input: ({ className, size, type, htmlSize, leftIcon, rightIcon, placeholder, ref, ...props }: InputProps) => import("react/jsx-runtime").JSX.Element;
+interface ClearInputButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    ref?: Ref<HTMLButtonElement>;
+}
+/**
+ * Clear/reset button designed for use as Input's rightIcon.
+ * Displays an X icon and handles focus states.
+ */
+declare const ClearInputButton: ({ className, ref, ...props }: ClearInputButtonProps) => import("react/jsx-runtime").JSX.Element;
+export { ClearInputButton, Input, inputVariants };
+//# sourceMappingURL=input.d.ts.map

package/dist/components/input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../src/components/input.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGlE,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAkBjC,QAAA,MAAM,aAAa;;;;;8EAgElB,CAAC;AAEF,KAAK,qBAAqB,GAAG,IAAI,CAC/B,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAC3C,MAAM,CACP,CAAC;AAEF,KAAK,kBAAkB,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC;AAK7D,KAAK,wBAAwB,GAAG,IAAI,CAClC,kBAAkB,EAClB,aAAa,GAAG,cAAc,GAAG,MAAM,CACxC,CAAC;AAEF;;;;;;GAMG;AACH,MAAM,WAAW,UACf,SAAQ,qBAAqB,EAC3B,wBAAwB;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAC5B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAED,QAAA,MAAM,KAAK,GAAI,sFAUZ,UAAU,4CAwDZ,CAAC;AAEF,UAAU,qBACR,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACrD,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC;CAC9B;AAED;;;GAGG;AACH,QAAA,MAAM,gBAAgB,GAAI,8BAIvB,qBAAqB,4CAcvB,CAAC;AAEF,OAAO,EAAE,gBAAgB,EAAE,KAAK,EAAE,aAAa,EAAE,CAAC"}

package/dist/components/input.js

@@ -18,7 +18,7 @@ const inputWrapperVariants = cva("relative flex w-full items-center", {
 });
 const inputVariants = cva(
   [
-    "w-full touch-manipulation self-stretch shadow-none outline-none outline-0 transition duration-200 ease-out disabled:cursor-not-allowed dark:disabled:cursor-not-allowed",
+    "w-full touch-manipulation self-stretch shadow-none outline-hidden outline-0 transition duration-200 ease-out disabled:cursor-not-allowed dark:disabled:cursor-not-allowed",
     // text
     "font-sans text-base text-black antialiased disabled:text-black/60 dark:text-white dark:disabled:text-white/60",
     // placeholder
@@ -95,61 +95,65 @@ const Input = ({
   ...props
 }) => {
   const [isFocused, setIsFocused] = useState(false);
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: cn(inputWrapperVariants({ size })),
-      onBlur: () => {
-        setTimeout(() => {
-          setIsFocused(false);
-        }, 50);
-      },
-      children: [
-        !!leftIcon && /* @__PURE__ */ jsx(
-          SlotPrimitive.Slot,
-          {
-            className: cn(
-              "absolute top-1/2 -translate-y-1/2 text-gray-950 dark:text-gray-300 [&:is(svg)]:pointer-events-none",
-              size === "sm" ? "left-3 size-3" : "left-4 size-4"
-            ),
-            children: leftIcon
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            className: cn(
-              inputVariants({
-                size,
-                hasLeftIcon: !!leftIcon,
-                hasRightIcon: !!rightIcon,
-                type: type === "search" ? "search" : void 0,
-                className
-              })
-            ),
-            onFocus: (e) => {
-              setIsFocused(true);
-              props.onFocus?.(e);
-            },
-            placeholder: isFocused ? " " : placeholder,
-            ref,
-            size: htmlSize,
-            type,
-            ...props
-          }
-        ),
-        !!rightIcon && /* @__PURE__ */ jsx(
-          SlotPrimitive.Slot,
-          {
-            className: cn(
-              "absolute top-1/2 -translate-y-1/2 text-gray-950 dark:text-gray-300 [&:is(svg)]:pointer-events-none",
-              size === "sm" ? "right-3 size-3" : "right-4 size-4"
-            ),
-            children: rightIcon
-          }
-        )
-      ]
-    }
+  return (
+    // biome-ignore lint/a11y/noNoninteractiveElementInteractions: container needs onBlur to coordinate focus state across child input and icon slots
+    // biome-ignore lint/a11y/noStaticElementInteractions: container needs onBlur to coordinate focus state across child input and icon slots
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(inputWrapperVariants({ size })),
+        onBlur: () => {
+          setTimeout(() => {
+            setIsFocused(false);
+          }, 50);
+        },
+        children: [
+          !!leftIcon && /* @__PURE__ */ jsx(
+            SlotPrimitive.Slot,
+            {
+              className: cn(
+                "absolute top-1/2 -translate-y-1/2 text-gray-950 dark:text-gray-300 [&:is(svg)]:pointer-events-none",
+                size === "sm" ? "left-3 size-3" : "left-4 size-4"
+              ),
+              children: leftIcon
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              className: cn(
+                inputVariants({
+                  size,
+                  hasLeftIcon: !!leftIcon,
+                  hasRightIcon: !!rightIcon,
+                  type: type === "search" ? "search" : void 0,
+                  className
+                })
+              ),
+              onFocus: (e) => {
+                setIsFocused(true);
+                props.onFocus?.(e);
+              },
+              placeholder: isFocused ? " " : placeholder,
+              ref,
+              size: htmlSize,
+              type,
+              ...props
+            }
+          ),
+          !!rightIcon && /* @__PURE__ */ jsx(
+            SlotPrimitive.Slot,
+            {
+              className: cn(
+                "absolute top-1/2 -translate-y-1/2 text-gray-950 dark:text-gray-300 [&:is(svg)]:pointer-events-none",
+                size === "sm" ? "right-3 size-3" : "right-4 size-4"
+              ),
+              children: rightIcon
+            }
+          )
+        ]
+      }
+    )
   );
 };
 const ClearInputButton = ({
@@ -162,7 +166,7 @@ const ClearInputButton = ({
     className: cn(
       "absolute top-1/2 -translate-y-1/2 text-gray-950 dark:text-gray-300",
       "focus-visible:ring-2 focus-visible:ring-[var(--focus-ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-gray-100",
-      "rounded-full focus-visible:outline-none dark:focus-visible:ring-[var(--focus-ring)] dark:focus-visible:ring-offset-gray-800",
+      "rounded-full focus-visible:outline-hidden dark:focus-visible:ring-[var(--focus-ring)] dark:focus-visible:ring-offset-gray-800",
       className
     ),
     ref,

package/dist/components/input.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/components/input.tsx"],
-  "sourcesContent": ["/**\n * @module Input\n *\n * Styled text input with support for icons, sizes, and clear button.\n * Includes focus state management and dark mode support.\n *\n * @example\n * // Basic input\n * <Input placeholder=\"Enter your email\" type=\"email\" />\n *\n * @example\n * // With icons\n * <Input\n *   leftIcon={<Search />}\n *   rightIcon={<ClearInputButton onClick={clearValue} />}\n *   placeholder=\"Search...\"\n * />\n *\n * @example\n * // Small size\n * <Input size=\"sm\" placeholder=\"Compact input\" />\n *\n * @example\n * // With clear button\n * const [value, setValue] = useState('');\n *\n * <Input\n *   value={value}\n *   onChange={(e) => setValue(e.target.value)}\n *   rightIcon={\n *     value && <ClearInputButton onClick={() => setValue('')} />\n *   }\n * />\n */\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { X } from \"lucide-react\";\nimport { Slot as SlotPrimitive } from \"radix-ui\";\nimport type { Ref } from \"react\";\nimport { useState } from \"react\";\n\nimport { cn } from \"../lib/utils\";\n\nconst inputWrapperVariants = cva(\"relative flex w-full items-center\", {\n  variants: {\n    size: {\n      auto: \"h-auto w-auto\",\n      default: \"h-10\",\n      sm: \"h-7\",\n    },\n  },\n  defaultVariants: {\n    size: \"default\",\n  },\n});\n\nconst inputVariants = cva(\n  [\n    \"w-full touch-manipulation self-stretch shadow-none outline-none outline-0 transition duration-200 ease-out disabled:cursor-not-allowed dark:disabled:cursor-not-allowed\",\n    // text\n    \"font-sans text-base text-black antialiased disabled:text-black/60 dark:text-white dark:disabled:text-white/60\",\n    // placeholder\n    \"placeholder-gray-700 placeholder:font-sans dark:placeholder-gray-200\",\n    // background\n    \"bg-white focus:bg-white enabled:hover:bg-white disabled:bg-white/60 dark:bg-black dark:disabled:bg-black/60 dark:focus:bg-black dark:enabled:hover:bg-black\",\n    // borders (light)\n    \"rounded-lg border border-gray-150 border-solid invalid:border-red invalid:hover:border-red focus:border-brand-primary enabled:hover:border-gray-200 enabled:focus:hover:border-brand-primary disabled:border-gray-150/60\", // borders light\n    // borders (dark)\n    \"dark:border-gray-800 dark:disabled:border-gray-900 dark:focus:border-white dark:enabled:hover:border-gray-700 dark:enabled:focus:hover:border-white dark:invalid:border-red dark:invalid:hover:border-red\", // borders dark\n  ],\n  {\n    variants: {\n      size: {\n        default: \"px-4\",\n        sm: \"px-3\",\n        auto: \"px-4\",\n      },\n      hasLeftIcon: {\n        true: \"\",\n        false: \"\",\n      },\n      hasRightIcon: {\n        true: \"\",\n        false: \"\",\n      },\n      // Scoped to type=\"search\" only: the Keeper password manager extension\n      // misidentifies inputs that style ::-webkit-search-cancel-button as\n      // search fields and blocks paste, so non-search inputs must not match.\n      type: {\n        search: \"dark:[&::-webkit-search-cancel-button]:hidden\",\n      },\n    },\n    compoundVariants: [\n      {\n        hasLeftIcon: true,\n        size: \"default\",\n        class: \"pl-10\",\n      },\n      {\n        hasLeftIcon: true,\n        size: \"sm\",\n        class: \"pl-8\",\n      },\n      {\n        hasRightIcon: true,\n        size: \"default\",\n        class: \"pr-10\",\n      },\n      {\n        hasRightIcon: true,\n        size: \"sm\",\n        class: \"pr-8\",\n      },\n    ],\n    defaultVariants: {\n      size: \"default\",\n      hasLeftIcon: false,\n      hasRightIcon: false,\n    },\n  }\n);\n\ntype InputPropsWithoutSize = Omit<\n  React.InputHTMLAttributes<HTMLInputElement>,\n  \"size\"\n>;\n\ntype InputVariantsProps = VariantProps<typeof inputVariants>;\n\n// Omit internal-only variants from the public API. `type` is excluded so\n// consumers keep the full HTMLInputTypeAttribute union; CVA still picks up\n// the runtime value via the `type` argument passed in inputVariants().\ntype PublicInputVariantsProps = Omit<\n  InputVariantsProps,\n  \"hasLeftIcon\" | \"hasRightIcon\" | \"type\"\n>;\n\n/**\n * Props for the Input component.\n * @property size - Input size: `\"default\"`, `\"sm\"`, or `\"auto\"`\n * @property htmlSize - Native HTML size attribute for input width\n * @property leftIcon - Icon element displayed on the left side\n * @property rightIcon - Icon element displayed on the right side\n */\nexport interface InputProps\n  extends InputPropsWithoutSize,\n    PublicInputVariantsProps {\n  htmlSize?: number;\n  leftIcon?: React.ReactNode;\n  rightIcon?: React.ReactNode;\n  ref?: Ref<HTMLInputElement>;\n}\n\nconst Input = ({\n  className,\n  size,\n  type = \"text\",\n  htmlSize,\n  leftIcon,\n  rightIcon,\n  placeholder,\n  ref,\n  ...props\n}: InputProps) => {\n  const [isFocused, setIsFocused] = useState(false);\n\n  return (\n    <div\n      className={cn(inputWrapperVariants({ size }))}\n      onBlur={() => {\n        setTimeout(() => {\n          setIsFocused(false);\n        }, 50);\n      }}\n    >\n      {!!leftIcon && (\n        <SlotPrimitive.Slot\n          className={cn(\n            \"absolute top-1/2 -translate-y-1/2 text-gray-950 dark:text-gray-300 [&:is(svg)]:pointer-events-none\",\n            size === \"sm\" ? \"left-3 size-3\" : \"left-4 size-4\"\n          )}\n        >\n          {leftIcon}\n        </SlotPrimitive.Slot>\n      )}\n      <input\n        className={cn(\n          inputVariants({\n            size,\n            hasLeftIcon: !!leftIcon,\n            hasRightIcon: !!rightIcon,\n            type: type === \"search\" ? \"search\" : undefined,\n            className,\n          })\n        )}\n        onFocus={(e) => {\n          setIsFocused(true);\n          props.onFocus?.(e);\n        }}\n        placeholder={isFocused ? \" \" : placeholder}\n        ref={ref}\n        size={htmlSize}\n        type={type}\n        {...props}\n      />\n      {!!rightIcon && (\n        <SlotPrimitive.Slot\n          className={cn(\n            \"absolute top-1/2 -translate-y-1/2 text-gray-950 dark:text-gray-300 [&:is(svg)]:pointer-events-none\",\n            size === \"sm\" ? \"right-3 size-3\" : \"right-4 size-4\"\n          )}\n        >\n          {rightIcon}\n        </SlotPrimitive.Slot>\n      )}\n    </div>\n  );\n};\n\ninterface ClearInputButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  ref?: Ref<HTMLButtonElement>;\n}\n\n/**\n * Clear/reset button designed for use as Input's rightIcon.\n * Displays an X icon and handles focus states.\n */\nconst ClearInputButton = ({\n  className,\n  ref,\n  ...props\n}: ClearInputButtonProps) => (\n  <button\n    className={cn(\n      \"absolute top-1/2 -translate-y-1/2 text-gray-950 dark:text-gray-300\",\n      \"focus-visible:ring-2 focus-visible:ring-[var(--focus-ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-gray-100\",\n      \"rounded-full focus-visible:outline-none dark:focus-visible:ring-[var(--focus-ring)] dark:focus-visible:ring-offset-gray-800\",\n      className\n    )}\n    ref={ref}\n    type=\"button\"\n    {...props}\n  >\n    <X className=\"absolute inset-0 size-full\" strokeWidth={3} />\n  </button>\n);\n\nexport { ClearInputButton, Input, inputVariants };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * @module Input\n *\n * Styled text input with support for icons, sizes, and clear button.\n * Includes focus state management and dark mode support.\n *\n * @example\n * // Basic input\n * <Input placeholder=\"Enter your email\" type=\"email\" />\n *\n * @example\n * // With icons\n * <Input\n *   leftIcon={<Search />}\n *   rightIcon={<ClearInputButton onClick={clearValue} />}\n *   placeholder=\"Search...\"\n * />\n *\n * @example\n * // Small size\n * <Input size=\"sm\" placeholder=\"Compact input\" />\n *\n * @example\n * // With clear button\n * const [value, setValue] = useState('');\n *\n * <Input\n *   value={value}\n *   onChange={(e) => setValue(e.target.value)}\n *   rightIcon={\n *     value && <ClearInputButton onClick={() => setValue('')} />\n *   }\n * />\n */\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { X } from \"lucide-react\";\nimport { Slot as SlotPrimitive } from \"radix-ui\";\nimport type { Ref } from \"react\";\nimport { useState } from \"react\";\n\nimport { cn } from \"../lib/utils\";\n\nconst inputWrapperVariants = cva(\"relative flex w-full items-center\", {\n  variants: {\n    size: {\n      auto: \"h-auto w-auto\",\n      default: \"h-10\",\n      sm: \"h-7\",\n    },\n  },\n  defaultVariants: {\n    size: \"default\",\n  },\n});\n\nconst inputVariants = cva(\n  [\n    \"w-full touch-manipulation self-stretch shadow-none outline-hidden outline-0 transition duration-200 ease-out disabled:cursor-not-allowed dark:disabled:cursor-not-allowed\",\n    // text\n    \"font-sans text-base text-black antialiased disabled:text-black/60 dark:text-white dark:disabled:text-white/60\",\n    // placeholder\n    \"placeholder-gray-700 placeholder:font-sans dark:placeholder-gray-200\",\n    // background\n    \"bg-white focus:bg-white enabled:hover:bg-white disabled:bg-white/60 dark:bg-black dark:disabled:bg-black/60 dark:focus:bg-black dark:enabled:hover:bg-black\",\n    // borders (light)\n    \"rounded-lg border border-gray-150 border-solid invalid:border-red invalid:hover:border-red focus:border-brand-primary enabled:hover:border-gray-200 enabled:focus:hover:border-brand-primary disabled:border-gray-150/60\", // borders light\n    // borders (dark)\n    \"dark:border-gray-800 dark:disabled:border-gray-900 dark:focus:border-white dark:enabled:hover:border-gray-700 dark:enabled:focus:hover:border-white dark:invalid:border-red dark:invalid:hover:border-red\", // borders dark\n  ],\n  {\n    variants: {\n      size: {\n        default: \"px-4\",\n        sm: \"px-3\",\n        auto: \"px-4\",\n      },\n      hasLeftIcon: {\n        true: \"\",\n        false: \"\",\n      },\n      hasRightIcon: {\n        true: \"\",\n        false: \"\",\n      },\n      // Scoped to type=\"search\" only: the Keeper password manager extension\n      // misidentifies inputs that style ::-webkit-search-cancel-button as\n      // search fields and blocks paste, so non-search inputs must not match.\n      type: {\n        search: \"dark:[&::-webkit-search-cancel-button]:hidden\",\n      },\n    },\n    compoundVariants: [\n      {\n        hasLeftIcon: true,\n        size: \"default\",\n        class: \"pl-10\",\n      },\n      {\n        hasLeftIcon: true,\n        size: \"sm\",\n        class: \"pl-8\",\n      },\n      {\n        hasRightIcon: true,\n        size: \"default\",\n        class: \"pr-10\",\n      },\n      {\n        hasRightIcon: true,\n        size: \"sm\",\n        class: \"pr-8\",\n      },\n    ],\n    defaultVariants: {\n      size: \"default\",\n      hasLeftIcon: false,\n      hasRightIcon: false,\n    },\n  }\n);\n\ntype InputPropsWithoutSize = Omit<\n  React.InputHTMLAttributes<HTMLInputElement>,\n  \"size\"\n>;\n\ntype InputVariantsProps = VariantProps<typeof inputVariants>;\n\n// Omit internal-only variants from the public API. `type` is excluded so\n// consumers keep the full HTMLInputTypeAttribute union; CVA still picks up\n// the runtime value via the `type` argument passed in inputVariants().\ntype PublicInputVariantsProps = Omit<\n  InputVariantsProps,\n  \"hasLeftIcon\" | \"hasRightIcon\" | \"type\"\n>;\n\n/**\n * Props for the Input component.\n * @property size - Input size: `\"default\"`, `\"sm\"`, or `\"auto\"`\n * @property htmlSize - Native HTML size attribute for input width\n * @property leftIcon - Icon element displayed on the left side\n * @property rightIcon - Icon element displayed on the right side\n */\nexport interface InputProps\n  extends InputPropsWithoutSize,\n    PublicInputVariantsProps {\n  htmlSize?: number;\n  leftIcon?: React.ReactNode;\n  ref?: Ref<HTMLInputElement>;\n  rightIcon?: React.ReactNode;\n}\n\nconst Input = ({\n  className,\n  size,\n  type = \"text\",\n  htmlSize,\n  leftIcon,\n  rightIcon,\n  placeholder,\n  ref,\n  ...props\n}: InputProps) => {\n  const [isFocused, setIsFocused] = useState(false);\n\n  return (\n    // biome-ignore lint/a11y/noNoninteractiveElementInteractions: container needs onBlur to coordinate focus state across child input and icon slots\n    // biome-ignore lint/a11y/noStaticElementInteractions: container needs onBlur to coordinate focus state across child input and icon slots\n    <div\n      className={cn(inputWrapperVariants({ size }))}\n      onBlur={() => {\n        setTimeout(() => {\n          setIsFocused(false);\n        }, 50);\n      }}\n    >\n      {!!leftIcon && (\n        <SlotPrimitive.Slot\n          className={cn(\n            \"absolute top-1/2 -translate-y-1/2 text-gray-950 dark:text-gray-300 [&:is(svg)]:pointer-events-none\",\n            size === \"sm\" ? \"left-3 size-3\" : \"left-4 size-4\"\n          )}\n        >\n          {leftIcon}\n        </SlotPrimitive.Slot>\n      )}\n      <input\n        className={cn(\n          inputVariants({\n            size,\n            hasLeftIcon: !!leftIcon,\n            hasRightIcon: !!rightIcon,\n            type: type === \"search\" ? \"search\" : undefined,\n            className,\n          })\n        )}\n        onFocus={(e) => {\n          setIsFocused(true);\n          props.onFocus?.(e);\n        }}\n        placeholder={isFocused ? \" \" : placeholder}\n        ref={ref}\n        size={htmlSize}\n        type={type}\n        {...props}\n      />\n      {!!rightIcon && (\n        <SlotPrimitive.Slot\n          className={cn(\n            \"absolute top-1/2 -translate-y-1/2 text-gray-950 dark:text-gray-300 [&:is(svg)]:pointer-events-none\",\n            size === \"sm\" ? \"right-3 size-3\" : \"right-4 size-4\"\n          )}\n        >\n          {rightIcon}\n        </SlotPrimitive.Slot>\n      )}\n    </div>\n  );\n};\n\ninterface ClearInputButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  ref?: Ref<HTMLButtonElement>;\n}\n\n/**\n * Clear/reset button designed for use as Input's rightIcon.\n * Displays an X icon and handles focus states.\n */\nconst ClearInputButton = ({\n  className,\n  ref,\n  ...props\n}: ClearInputButtonProps) => (\n  <button\n    className={cn(\n      \"absolute top-1/2 -translate-y-1/2 text-gray-950 dark:text-gray-300\",\n      \"focus-visible:ring-2 focus-visible:ring-[var(--focus-ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-gray-100\",\n      \"rounded-full focus-visible:outline-hidden dark:focus-visible:ring-[var(--focus-ring)] dark:focus-visible:ring-offset-gray-800\",\n      className\n    )}\n    ref={ref}\n    type=\"button\"\n    {...props}\n  >\n    <X className=\"absolute inset-0 size-full\" strokeWidth={3} />\n  </button>\n);\n\nexport { ClearInputButton, Input, inputVariants };\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/components/label.d.ts

@@ -0,0 +1,36 @@
+/**
+ * @module Label
+ *
+ * Accessible label for form controls. Built on Radix UI Label primitive.
+ * Automatically associates with form elements via `htmlFor` prop.
+ *
+ * @see {@link https://ui.shadcn.com/docs/components/label Shadcn Label}
+ * @see {@link https://www.radix-ui.com/primitives/docs/components/label Radix Label}
+ *
+ * @example
+ * // Basic label with input
+ * <Label htmlFor="email">Email</Label>
+ * <Input id="email" type="email" />
+ *
+ * @example
+ * // With checkbox
+ * <div className="flex items-center gap-2">
+ *   <Checkbox id="terms" />
+ *   <Label htmlFor="terms">Accept terms and conditions</Label>
+ * </div>
+ */
+import { type VariantProps } from "class-variance-authority";
+import { Label as LabelPrimitive } from "radix-ui";
+import type { ComponentPropsWithoutRef, ElementRef, Ref } from "react";
+/** CVA variants for label styling */
+declare const labelVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+interface LabelProps extends ComponentPropsWithoutRef<typeof LabelPrimitive.Root>, VariantProps<typeof labelVariants> {
+    ref?: Ref<ElementRef<typeof LabelPrimitive.Root>>;
+}
+/**
+ * Form label with accessible peer state handling.
+ * Dims when associated form control is disabled.
+ */
+declare const Label: ({ className, ref, ...props }: LabelProps) => import("react/jsx-runtime").JSX.Element;
+export { Label };
+//# sourceMappingURL=label.d.ts.map

package/dist/components/label.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"label.d.ts","sourceRoot":"","sources":["../../src/components/label.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,KAAK,IAAI,cAAc,EAAE,MAAM,UAAU,CAAC;AACnD,OAAO,KAAK,EAAE,wBAAwB,EAAE,UAAU,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAIvE,qCAAqC;AACrC,QAAA,MAAM,aAAa,oFAElB,CAAC;AAEF,UAAU,UACR,SAAQ,wBAAwB,CAAC,OAAO,cAAc,CAAC,IAAI,CAAC,EAC1D,YAAY,CAAC,OAAO,aAAa,CAAC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,UAAU,CAAC,OAAO,cAAc,CAAC,IAAI,CAAC,CAAC,CAAC;CACnD;AAED;;;GAGG;AACH,QAAA,MAAM,KAAK,GAAI,8BAA8B,UAAU,4CAMtD,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,CAAC"}

package/dist/components/popover.d.ts

@@ -0,0 +1,61 @@
+/**
+ * @module Popover
+ *
+ * Floating content panel anchored to a trigger element. Built on Radix UI Popover primitive.
+ * Supports controlled/uncontrolled modes, custom positioning, and focus management.
+ *
+ * @see {@link https://ui.shadcn.com/docs/components/popover Shadcn Popover}
+ * @see {@link https://www.radix-ui.com/primitives/docs/components/popover Radix Popover}
+ *
+ * @example
+ * // Basic popover
+ * <Popover>
+ *   <PopoverTrigger asChild>
+ *     <Button>Open Popover</Button>
+ *   </PopoverTrigger>
+ *   <PopoverContent>
+ *     <p>Popover content here</p>
+ *   </PopoverContent>
+ * </Popover>
+ *
+ * @example
+ * // Controlled popover with custom positioning
+ * const [open, setOpen] = useState(false);
+ *
+ * <Popover open={open} onOpenChange={setOpen}>
+ *   <PopoverTrigger>Settings</PopoverTrigger>
+ *   <PopoverContent align="start" sideOffset={8}>
+ *     <SettingsForm onSave={() => setOpen(false)} />
+ *   </PopoverContent>
+ * </Popover>
+ *
+ * @example
+ * // With custom anchor point
+ * <Popover>
+ *   <PopoverAnchor asChild>
+ *     <div>Anchor element (popover positions relative to this)</div>
+ *   </PopoverAnchor>
+ *   <PopoverTrigger>Open</PopoverTrigger>
+ *   <PopoverContent>Content</PopoverContent>
+ * </Popover>
+ */
+import { Popover as PopoverPrimitive } from "radix-ui";
+import type * as React from "react";
+import type { Ref } from "react";
+/** Root component that manages popover open/closed state. */
+declare const Popover: React.FC<PopoverPrimitive.PopoverProps>;
+/** Element that toggles the popover when clicked. Use `asChild` to wrap custom elements. */
+declare const PopoverTrigger: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+/** Alternative anchor point for popover positioning (separate from trigger). */
+declare const PopoverAnchor: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverAnchorProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Popover content container. Animated on open/close.
+ * @param align - Horizontal alignment: `"start"`, `"center"` (default), or `"end"`
+ * @param sideOffset - Distance from anchor in pixels (default: 4)
+ * @param forceMount - Keep mounted in DOM even when closed
+ */
+declare const PopoverContent: ({ className, forceMount, align, sideOffset, ref, ...props }: React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> & {
+    ref?: Ref<React.ElementRef<typeof PopoverPrimitive.Content>>;
+}) => import("react/jsx-runtime").JSX.Element;
+export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger };
+//# sourceMappingURL=popover.d.ts.map

package/dist/components/popover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../src/components/popover.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,UAAU,CAAC;AACvD,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAIjC,6DAA6D;AAC7D,QAAA,MAAM,OAAO,yCAAwB,CAAC;AAEtC,4FAA4F;AAC5F,QAAA,MAAM,cAAc,gHAA2B,CAAC;AAEhD,gFAAgF;AAChF,QAAA,MAAM,aAAa,4GAA0B,CAAC;AAE9C;;;;;GAKG;AACH,QAAA,MAAM,cAAc,GAAI,6DAOrB,KAAK,CAAC,wBAAwB,CAAC,OAAO,gBAAgB,CAAC,OAAO,CAAC,GAAG;IACnE,GAAG,CAAC,EAAE,GAAG,CAAC,KAAK,CAAC,UAAU,CAAC,OAAO,gBAAgB,CAAC,OAAO,CAAC,CAAC,CAAC;CAC9D,4CAaA,CAAC;AAEF,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,cAAc,EAAE,CAAC"}

package/dist/components/popover.js

@@ -16,7 +16,7 @@ const PopoverContent = ({
   {
     align,
     className: cn(
-      "data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1 z-50 origin-[var(--radix-popover-content-transform-origin)] rounded-md border border-gray-150 border-solid bg-white fill-mode-forwards p-4 text-gray-950 shadow-md outline-none data-[state=closed]:animate-out data-[state=open]:animate-in data-[state=closed]:opacity-0 data-[state=open]:opacity-100 dark:border-gray-800 dark:bg-gray-950 dark:text-gray-50",
+      "data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1 z-50 origin-[var(--radix-popover-content-transform-origin)] rounded-md border border-gray-150 border-solid bg-white fill-mode-forwards p-4 text-gray-950 shadow-md outline-hidden data-[state=closed]:animate-out data-[state=open]:animate-in data-[state=closed]:opacity-0 data-[state=open]:opacity-100 dark:border-gray-800 dark:bg-gray-950 dark:text-gray-50",
       className
     ),
     ref,

package/dist/components/popover.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/components/popover.tsx"],
-  "sourcesContent": ["/**\n * @module Popover\n *\n * Floating content panel anchored to a trigger element. Built on Radix UI Popover primitive.\n * Supports controlled/uncontrolled modes, custom positioning, and focus management.\n *\n * @see {@link https://ui.shadcn.com/docs/components/popover Shadcn Popover}\n * @see {@link https://www.radix-ui.com/primitives/docs/components/popover Radix Popover}\n *\n * @example\n * // Basic popover\n * <Popover>\n *   <PopoverTrigger asChild>\n *     <Button>Open Popover</Button>\n *   </PopoverTrigger>\n *   <PopoverContent>\n *     <p>Popover content here</p>\n *   </PopoverContent>\n * </Popover>\n *\n * @example\n * // Controlled popover with custom positioning\n * const [open, setOpen] = useState(false);\n *\n * <Popover open={open} onOpenChange={setOpen}>\n *   <PopoverTrigger>Settings</PopoverTrigger>\n *   <PopoverContent align=\"start\" sideOffset={8}>\n *     <SettingsForm onSave={() => setOpen(false)} />\n *   </PopoverContent>\n * </Popover>\n *\n * @example\n * // With custom anchor point\n * <Popover>\n *   <PopoverAnchor asChild>\n *     <div>Anchor element (popover positions relative to this)</div>\n *   </PopoverAnchor>\n *   <PopoverTrigger>Open</PopoverTrigger>\n *   <PopoverContent>Content</PopoverContent>\n * </Popover>\n */\nimport { Popover as PopoverPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\nimport type { Ref } from \"react\";\n\nimport { cn } from \"../lib/utils\";\n\n/** Root component that manages popover open/closed state. */\nconst Popover = PopoverPrimitive.Root;\n\n/** Element that toggles the popover when clicked. Use `asChild` to wrap custom elements. */\nconst PopoverTrigger = PopoverPrimitive.Trigger;\n\n/** Alternative anchor point for popover positioning (separate from trigger). */\nconst PopoverAnchor = PopoverPrimitive.Anchor;\n\n/**\n * Popover content container. Animated on open/close.\n * @param align - Horizontal alignment: `\"start\"`, `\"center\"` (default), or `\"end\"`\n * @param sideOffset - Distance from anchor in pixels (default: 4)\n * @param forceMount - Keep mounted in DOM even when closed\n */\nconst PopoverContent = ({\n  className,\n  forceMount,\n  align = \"center\",\n  sideOffset = 4,\n  ref,\n  ...props\n}: React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> & {\n  ref?: Ref<React.ElementRef<typeof PopoverPrimitive.Content>>;\n}) => (\n  <PopoverPrimitive.Portal forceMount={forceMount}>\n    <PopoverPrimitive.Content\n      align={align}\n      className={cn(\n        \"data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1 z-50 origin-[var(--radix-popover-content-transform-origin)] rounded-md border border-gray-150 border-solid bg-white fill-mode-forwards p-4 text-gray-950 shadow-md outline-none data-[state=closed]:animate-out data-[state=open]:animate-in data-[state=closed]:opacity-0 data-[state=open]:opacity-100 dark:border-gray-800 dark:bg-gray-950 dark:text-gray-50\",\n        className\n      )}\n      ref={ref}\n      sideOffset={sideOffset}\n      {...props}\n    />\n  </PopoverPrimitive.Portal>\n);\n\nexport { Popover, PopoverAnchor, PopoverContent, PopoverTrigger };\n"],
+  "sourcesContent": ["/**\n * @module Popover\n *\n * Floating content panel anchored to a trigger element. Built on Radix UI Popover primitive.\n * Supports controlled/uncontrolled modes, custom positioning, and focus management.\n *\n * @see {@link https://ui.shadcn.com/docs/components/popover Shadcn Popover}\n * @see {@link https://www.radix-ui.com/primitives/docs/components/popover Radix Popover}\n *\n * @example\n * // Basic popover\n * <Popover>\n *   <PopoverTrigger asChild>\n *     <Button>Open Popover</Button>\n *   </PopoverTrigger>\n *   <PopoverContent>\n *     <p>Popover content here</p>\n *   </PopoverContent>\n * </Popover>\n *\n * @example\n * // Controlled popover with custom positioning\n * const [open, setOpen] = useState(false);\n *\n * <Popover open={open} onOpenChange={setOpen}>\n *   <PopoverTrigger>Settings</PopoverTrigger>\n *   <PopoverContent align=\"start\" sideOffset={8}>\n *     <SettingsForm onSave={() => setOpen(false)} />\n *   </PopoverContent>\n * </Popover>\n *\n * @example\n * // With custom anchor point\n * <Popover>\n *   <PopoverAnchor asChild>\n *     <div>Anchor element (popover positions relative to this)</div>\n *   </PopoverAnchor>\n *   <PopoverTrigger>Open</PopoverTrigger>\n *   <PopoverContent>Content</PopoverContent>\n * </Popover>\n */\nimport { Popover as PopoverPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\nimport type { Ref } from \"react\";\n\nimport { cn } from \"../lib/utils\";\n\n/** Root component that manages popover open/closed state. */\nconst Popover = PopoverPrimitive.Root;\n\n/** Element that toggles the popover when clicked. Use `asChild` to wrap custom elements. */\nconst PopoverTrigger = PopoverPrimitive.Trigger;\n\n/** Alternative anchor point for popover positioning (separate from trigger). */\nconst PopoverAnchor = PopoverPrimitive.Anchor;\n\n/**\n * Popover content container. Animated on open/close.\n * @param align - Horizontal alignment: `\"start\"`, `\"center\"` (default), or `\"end\"`\n * @param sideOffset - Distance from anchor in pixels (default: 4)\n * @param forceMount - Keep mounted in DOM even when closed\n */\nconst PopoverContent = ({\n  className,\n  forceMount,\n  align = \"center\",\n  sideOffset = 4,\n  ref,\n  ...props\n}: React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> & {\n  ref?: Ref<React.ElementRef<typeof PopoverPrimitive.Content>>;\n}) => (\n  <PopoverPrimitive.Portal forceMount={forceMount}>\n    <PopoverPrimitive.Content\n      align={align}\n      className={cn(\n        \"data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1 z-50 origin-[var(--radix-popover-content-transform-origin)] rounded-md border border-gray-150 border-solid bg-white fill-mode-forwards p-4 text-gray-950 shadow-md outline-hidden data-[state=closed]:animate-out data-[state=open]:animate-in data-[state=closed]:opacity-0 data-[state=open]:opacity-100 dark:border-gray-800 dark:bg-gray-950 dark:text-gray-50\",\n        className\n      )}\n      ref={ref}\n      sideOffset={sideOffset}\n      {...props}\n    />\n  </PopoverPrimitive.Portal>\n);\n\nexport { Popover, PopoverAnchor, PopoverContent, PopoverTrigger };\n"],
   "mappings": "AAyEI;AAhCJ,SAAS,WAAW,wBAAwB;AAI5C,SAAS,UAAU;AAGnB,MAAM,UAAU,iBAAiB;AAGjC,MAAM,iBAAiB,iBAAiB;AAGxC,MAAM,gBAAgB,iBAAiB;AAQvC,MAAM,iBAAiB,CAAC;AAAA,EACtB;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,aAAa;AAAA,EACb;AAAA,EACA,GAAG;AACL,MAGE,oBAAC,iBAAiB,QAAjB,EAAwB,YACvB;AAAA,EAAC,iBAAiB;AAAA,EAAjB;AAAA,IACC;AAAA,IACA,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACC,GAAG;AAAA;AACN,GACF;",
   "names": []
 }

package/dist/components/price-tag.d.ts

@@ -0,0 +1,31 @@
+/**
+ * @module PriceTag
+ *
+ * Displays pricing information with currency symbol and frequency.
+ * Automatically formats decimal values and includes accessible labeling.
+ *
+ * @example
+ * // Basic price display
+ * <PriceTag currencySymbol="$" price="9.99" frequency="month" />
+ *
+ * @example
+ * // Annual pricing
+ * <PriceTag currencySymbol="£" price="99.00" frequency="year" />
+ */
+import type * as React from "react";
+import type { TextProps } from "./typography/text";
+/**
+ * Props for PriceTag component.
+ * @property currencySymbol - Currency symbol (e.g., "$", "£", "€")
+ * @property price - Price value as string (e.g., "9.99")
+ * @property frequency - Billing frequency (e.g., "month", "year")
+ */
+export interface PriceTagProps extends TextProps {
+    currencySymbol: string;
+    frequency: string;
+    price: string;
+    ref?: React.Ref<HTMLParagraphElement>;
+}
+declare function PriceTag({ currencySymbol, price, frequency, ref, ...props }: PriceTagProps): import("react/jsx-runtime").JSX.Element;
+export { PriceTag };
+//# sourceMappingURL=price-tag.d.ts.map

package/dist/components/price-tag.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"price-tag.d.ts","sourceRoot":"","sources":["../../src/components/price-tag.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AACH,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAGnD;;;;;GAKG;AACH,MAAM,WAAW,aAAc,SAAQ,SAAS;IAC9C,cAAc,EAAE,MAAM,CAAC;IACvB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,oBAAoB,CAAC,CAAC;CACvC;AAED,iBAAS,QAAQ,CAAC,EAChB,cAAc,EACd,KAAK,EACL,SAAS,EACT,GAAG,EACH,GAAG,KAAK,EACT,EAAE,aAAa,2CA0Bf;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/components/price-tag.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/components/price-tag.tsx"],
-  "sourcesContent": ["/**\n * @module PriceTag\n *\n * Displays pricing information with currency symbol and frequency.\n * Automatically formats decimal values and includes accessible labeling.\n *\n * @example\n * // Basic price display\n * <PriceTag currencySymbol=\"$\" price=\"9.99\" frequency=\"month\" />\n *\n * @example\n * // Annual pricing\n * <PriceTag currencySymbol=\"\u00A3\" price=\"99.00\" frequency=\"year\" />\n */\nimport type * as React from \"react\";\nimport type { TextProps } from \"./typography/text\";\nimport { Text } from \"./typography/text\";\n\n/**\n * Props for PriceTag component.\n * @property currencySymbol - Currency symbol (e.g., \"$\", \"\u00A3\", \"\u20AC\")\n * @property price - Price value as string (e.g., \"9.99\")\n * @property frequency - Billing frequency (e.g., \"month\", \"year\")\n */\nexport interface PriceTagProps extends TextProps {\n  currencySymbol: string;\n  price: string;\n  frequency: string;\n  ref?: React.Ref<HTMLParagraphElement>;\n}\n\nfunction PriceTag({\n  currencySymbol,\n  price,\n  frequency,\n  ref,\n  ...props\n}: PriceTagProps) {\n  // Split price into main unit and cents/pence\n  const [mainUnit, cents = \"00\"] = price.split(\".\", 2);\n\n  // Create accessible label for screen readers\n  const accessiblePrice = `${currencySymbol}${price} per ${frequency}`;\n\n  return (\n    <Text className=\"font-sans font-normal leading-5\" ref={ref} {...props}>\n      {/* Screen reader only text */}\n      <span className=\"sr-only\">{accessiblePrice}</span>\n\n      {/* Visual presentation hidden from screen readers */}\n      <span aria-hidden=\"true\">\n        <span className=\"text-gray-700 text-xs dark:text-gray-200\">\n          {currencySymbol}\n        </span>\n        <span className=\"font-heading font-semibold text-base text-gray-950 dark:text-white\">\n          {mainUnit}.{cents}\n        </span>\n        <span className=\"text-gray-700 text-xs dark:text-gray-200\">\n          /{frequency}\n        </span>\n      </span>\n    </Text>\n  );\n}\n\nexport { PriceTag };\n"],
+  "sourcesContent": ["/**\n * @module PriceTag\n *\n * Displays pricing information with currency symbol and frequency.\n * Automatically formats decimal values and includes accessible labeling.\n *\n * @example\n * // Basic price display\n * <PriceTag currencySymbol=\"$\" price=\"9.99\" frequency=\"month\" />\n *\n * @example\n * // Annual pricing\n * <PriceTag currencySymbol=\"\u00A3\" price=\"99.00\" frequency=\"year\" />\n */\nimport type * as React from \"react\";\nimport type { TextProps } from \"./typography/text\";\nimport { Text } from \"./typography/text\";\n\n/**\n * Props for PriceTag component.\n * @property currencySymbol - Currency symbol (e.g., \"$\", \"\u00A3\", \"\u20AC\")\n * @property price - Price value as string (e.g., \"9.99\")\n * @property frequency - Billing frequency (e.g., \"month\", \"year\")\n */\nexport interface PriceTagProps extends TextProps {\n  currencySymbol: string;\n  frequency: string;\n  price: string;\n  ref?: React.Ref<HTMLParagraphElement>;\n}\n\nfunction PriceTag({\n  currencySymbol,\n  price,\n  frequency,\n  ref,\n  ...props\n}: PriceTagProps) {\n  // Split price into main unit and cents/pence\n  const [mainUnit, cents = \"00\"] = price.split(\".\", 2);\n\n  // Create accessible label for screen readers\n  const accessiblePrice = `${currencySymbol}${price} per ${frequency}`;\n\n  return (\n    <Text className=\"font-sans font-normal leading-5\" ref={ref} {...props}>\n      {/* Screen reader only text */}\n      <span className=\"sr-only\">{accessiblePrice}</span>\n\n      {/* Visual presentation hidden from screen readers */}\n      <span aria-hidden=\"true\">\n        <span className=\"text-gray-700 text-xs dark:text-gray-200\">\n          {currencySymbol}\n        </span>\n        <span className=\"font-heading font-semibold text-base text-gray-950 dark:text-white\">\n          {mainUnit}.{cents}\n        </span>\n        <span className=\"text-gray-700 text-xs dark:text-gray-200\">\n          /{frequency}\n        </span>\n      </span>\n    </Text>\n  );\n}\n\nexport { PriceTag };\n"],
   "mappings": "AA+CM,cAOE,YAPF;AA/BN,SAAS,YAAY;AAerB,SAAS,SAAS;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAkB;AAEhB,QAAM,CAAC,UAAU,QAAQ,IAAI,IAAI,MAAM,MAAM,KAAK,CAAC;AAGnD,QAAM,kBAAkB,GAAG,cAAc,GAAG,KAAK,QAAQ,SAAS;AAElE,SACE,qBAAC,QAAK,WAAU,mCAAkC,KAAW,GAAG,OAE9D;AAAA,wBAAC,UAAK,WAAU,WAAW,2BAAgB;AAAA,IAG3C,qBAAC,UAAK,eAAY,QAChB;AAAA,0BAAC,UAAK,WAAU,4CACb,0BACH;AAAA,MACA,qBAAC,UAAK,WAAU,sEACb;AAAA;AAAA,QAAS;AAAA,QAAE;AAAA,SACd;AAAA,MACA,qBAAC,UAAK,WAAU,4CAA2C;AAAA;AAAA,QACvD;AAAA,SACJ;AAAA,OACF;AAAA,KACF;AAEJ;",
   "names": []
 }

package/dist/components/radio-group.d.ts

@@ -0,0 +1,15 @@
+import { RadioGroup as RadioGroupPrimitive } from "radix-ui";
+import type { Ref } from "react";
+import * as React from "react";
+interface RadioGroupProps extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root> {
+    ref?: Ref<React.ElementRef<typeof RadioGroupPrimitive.Root>>;
+}
+/** Container for radio items. Manages selection state. */
+declare const RadioGroup: ({ className, ref, ...props }: RadioGroupProps) => import("react/jsx-runtime").JSX.Element;
+interface RadioGroupItemProps extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item> {
+    ref?: Ref<React.ElementRef<typeof RadioGroupPrimitive.Item>>;
+}
+/** Individual radio button with animated selection indicator. */
+declare const RadioGroupItem: ({ className, ref, ...props }: RadioGroupItemProps) => import("react/jsx-runtime").JSX.Element;
+export { RadioGroup, RadioGroupItem };
+//# sourceMappingURL=radio-group.d.ts.map

package/dist/components/radio-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group.d.ts","sourceRoot":"","sources":["../../src/components/radio-group.tsx"],"names":[],"mappings":"AAgCA,OAAO,EAAE,UAAU,IAAI,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAC7D,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,UAAU,eACR,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,mBAAmB,CAAC,IAAI,CAAC;IACvE,GAAG,CAAC,EAAE,GAAG,CAAC,KAAK,CAAC,UAAU,CAAC,OAAO,mBAAmB,CAAC,IAAI,CAAC,CAAC,CAAC;CAC9D;AAED,0DAA0D;AAC1D,QAAA,MAAM,UAAU,GAAI,8BAA8B,eAAe,4CAMhE,CAAC;AAEF,UAAU,mBACR,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,mBAAmB,CAAC,IAAI,CAAC;IACvE,GAAG,CAAC,EAAE,GAAG,CAAC,KAAK,CAAC,UAAU,CAAC,OAAO,mBAAmB,CAAC,IAAI,CAAC,CAAC,CAAC;CAC9D;AAED,iEAAiE;AACjE,QAAA,MAAM,cAAc,GAAI,8BAA8B,mBAAmB,4CAyExE,CAAC;AAEF,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,CAAC"}

package/dist/components/radio-group.js

@@ -46,7 +46,7 @@ const RadioGroupItem = ({ className, ref, ...props }) => {
     RadioGroupPrimitive.Item,
     {
       className: cn(
-        "relative aspect-square size-4 h-4 w-4 rounded-full border border-gray-500 border-solid p-0.5 text-brand-primary ring-offset-brand-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-offset focus-visible:ring-[var(--focus-ring)] disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-brand-primary",
+        "relative aspect-square size-4 h-4 w-4 rounded-full border border-gray-500 border-solid p-0.5 text-brand-primary ring-offset-brand-primary focus:outline-hidden focus-visible:ring-2 focus-visible:ring-offset focus-visible:ring-[var(--focus-ring)] disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-brand-primary",
         className
       ),
       ref: setRefs,

package/dist/components/radio-group.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/components/radio-group.tsx"],
-  "sourcesContent": ["/**\n * @module RadioGroup\n *\n * Single-selection radio button group with animated indicators. Built on Radix UI Radio Group primitive.\n *\n * @see {@link https://ui.shadcn.com/docs/components/radio-group Shadcn Radio Group}\n * @see {@link https://www.radix-ui.com/primitives/docs/components/radio-group Radix Radio Group}\n *\n * @example\n * // Basic radio group\n * <RadioGroup defaultValue=\"option1\">\n *   <div className=\"flex items-center gap-2\">\n *     <RadioGroupItem value=\"option1\" id=\"option1\" />\n *     <Label htmlFor=\"option1\">Option 1</Label>\n *   </div>\n *   <div className=\"flex items-center gap-2\">\n *     <RadioGroupItem value=\"option2\" id=\"option2\" />\n *     <Label htmlFor=\"option2\">Option 2</Label>\n *   </div>\n * </RadioGroup>\n *\n * @example\n * // Controlled radio group\n * const [value, setValue] = useState(\"default\");\n *\n * <RadioGroup value={value} onValueChange={setValue}>\n *   <RadioGroupItem value=\"a\" id=\"a\" />\n *   <RadioGroupItem value=\"b\" id=\"b\" />\n * </RadioGroup>\n */\nimport { Circle } from \"lucide-react\";\nimport { AnimatePresence, motion } from \"motion/react\";\nimport { RadioGroup as RadioGroupPrimitive } from \"radix-ui\";\nimport type { Ref } from \"react\";\nimport * as React from \"react\";\n\nimport { cn } from \"../lib/utils\";\n\ninterface RadioGroupProps\n  extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root> {\n  ref?: Ref<React.ElementRef<typeof RadioGroupPrimitive.Root>>;\n}\n\n/** Container for radio items. Manages selection state. */\nconst RadioGroup = ({ className, ref, ...props }: RadioGroupProps) => (\n  <RadioGroupPrimitive.Root\n    className={cn(\"grid gap-2\", className)}\n    {...props}\n    ref={ref}\n  />\n);\n\ninterface RadioGroupItemProps\n  extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item> {\n  ref?: Ref<React.ElementRef<typeof RadioGroupPrimitive.Item>>;\n}\n\n/** Individual radio button with animated selection indicator. */\nconst RadioGroupItem = ({ className, ref, ...props }: RadioGroupItemProps) => {\n  const [isChecked, setIsChecked] = React.useState(false);\n  const itemRef = React.useRef<HTMLButtonElement | null>(null);\n\n  React.useEffect(() => {\n    const observer = new MutationObserver((mutations) => {\n      mutations.forEach((mutation) => {\n        if (\n          mutation.type === \"attributes\" &&\n          mutation.attributeName === \"data-state\"\n        ) {\n          const newState = itemRef.current?.getAttribute(\"data-state\");\n\n          setIsChecked(newState === \"checked\");\n        }\n      });\n    });\n\n    if (itemRef.current) {\n      observer.observe(itemRef.current, { attributes: true });\n    }\n\n    return () => {\n      observer.disconnect();\n    };\n  }, []);\n\n  // Forward the ref to both our local ref and the passed ref\n  const setRefs = React.useCallback(\n    (element: HTMLButtonElement | null) => {\n      itemRef.current = element;\n\n      // Handle function refs\n      if (typeof ref === \"function\") {\n        ref(element);\n      } else if (ref && \"current\" in ref) {\n        ref.current = element;\n      }\n    },\n    [ref]\n  );\n\n  return (\n    <RadioGroupPrimitive.Item\n      className={cn(\n        \"relative aspect-square size-4 h-4 w-4 rounded-full border border-gray-500 border-solid p-0.5 text-brand-primary ring-offset-brand-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-offset focus-visible:ring-[var(--focus-ring)] disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-brand-primary\",\n        className\n      )}\n      ref={setRefs}\n      {...props}\n    >\n      <AnimatePresence>\n        {isChecked && (\n          <motion.div\n            animate={{ scale: 2, opacity: 0 }}\n            className=\"absolute inset-0 z-0 rounded-full bg-brand-primary\"\n            exit={{ scale: 0, opacity: 0 }}\n            initial={{ scale: 0, opacity: 0.5 }}\n            transition={{ duration: 0.4 }}\n          />\n        )}\n      </AnimatePresence>\n      <motion.div\n        animate={isChecked ? { scale: 1.1 } : { scale: 1 }}\n        className=\"relative\"\n        transition={{ type: \"spring\", stiffness: 300, damping: 20 }}\n      >\n        <RadioGroupPrimitive.Indicator className=\"flex items-center justify-center\">\n          <Circle className=\"size-2.5 fill-current text-current\" />\n        </RadioGroupPrimitive.Indicator>\n      </motion.div>\n    </RadioGroupPrimitive.Item>\n  );\n};\n\nexport { RadioGroup, RadioGroupItem };\n"],
+  "sourcesContent": ["/**\n * @module RadioGroup\n *\n * Single-selection radio button group with animated indicators. Built on Radix UI Radio Group primitive.\n *\n * @see {@link https://ui.shadcn.com/docs/components/radio-group Shadcn Radio Group}\n * @see {@link https://www.radix-ui.com/primitives/docs/components/radio-group Radix Radio Group}\n *\n * @example\n * // Basic radio group\n * <RadioGroup defaultValue=\"option1\">\n *   <div className=\"flex items-center gap-2\">\n *     <RadioGroupItem value=\"option1\" id=\"option1\" />\n *     <Label htmlFor=\"option1\">Option 1</Label>\n *   </div>\n *   <div className=\"flex items-center gap-2\">\n *     <RadioGroupItem value=\"option2\" id=\"option2\" />\n *     <Label htmlFor=\"option2\">Option 2</Label>\n *   </div>\n * </RadioGroup>\n *\n * @example\n * // Controlled radio group\n * const [value, setValue] = useState(\"default\");\n *\n * <RadioGroup value={value} onValueChange={setValue}>\n *   <RadioGroupItem value=\"a\" id=\"a\" />\n *   <RadioGroupItem value=\"b\" id=\"b\" />\n * </RadioGroup>\n */\nimport { Circle } from \"lucide-react\";\nimport { AnimatePresence, motion } from \"motion/react\";\nimport { RadioGroup as RadioGroupPrimitive } from \"radix-ui\";\nimport type { Ref } from \"react\";\nimport * as React from \"react\";\n\nimport { cn } from \"../lib/utils\";\n\ninterface RadioGroupProps\n  extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root> {\n  ref?: Ref<React.ElementRef<typeof RadioGroupPrimitive.Root>>;\n}\n\n/** Container for radio items. Manages selection state. */\nconst RadioGroup = ({ className, ref, ...props }: RadioGroupProps) => (\n  <RadioGroupPrimitive.Root\n    className={cn(\"grid gap-2\", className)}\n    {...props}\n    ref={ref}\n  />\n);\n\ninterface RadioGroupItemProps\n  extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item> {\n  ref?: Ref<React.ElementRef<typeof RadioGroupPrimitive.Item>>;\n}\n\n/** Individual radio button with animated selection indicator. */\nconst RadioGroupItem = ({ className, ref, ...props }: RadioGroupItemProps) => {\n  const [isChecked, setIsChecked] = React.useState(false);\n  const itemRef = React.useRef<HTMLButtonElement | null>(null);\n\n  React.useEffect(() => {\n    const observer = new MutationObserver((mutations) => {\n      mutations.forEach((mutation) => {\n        if (\n          mutation.type === \"attributes\" &&\n          mutation.attributeName === \"data-state\"\n        ) {\n          const newState = itemRef.current?.getAttribute(\"data-state\");\n\n          setIsChecked(newState === \"checked\");\n        }\n      });\n    });\n\n    if (itemRef.current) {\n      observer.observe(itemRef.current, { attributes: true });\n    }\n\n    return () => {\n      observer.disconnect();\n    };\n  }, []);\n\n  // Forward the ref to both our local ref and the passed ref\n  const setRefs = React.useCallback(\n    (element: HTMLButtonElement | null) => {\n      itemRef.current = element;\n\n      // Handle function refs\n      if (typeof ref === \"function\") {\n        ref(element);\n      } else if (ref && \"current\" in ref) {\n        ref.current = element;\n      }\n    },\n    [ref]\n  );\n\n  return (\n    <RadioGroupPrimitive.Item\n      className={cn(\n        \"relative aspect-square size-4 h-4 w-4 rounded-full border border-gray-500 border-solid p-0.5 text-brand-primary ring-offset-brand-primary focus:outline-hidden focus-visible:ring-2 focus-visible:ring-offset focus-visible:ring-[var(--focus-ring)] disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-brand-primary\",\n        className\n      )}\n      ref={setRefs}\n      {...props}\n    >\n      <AnimatePresence>\n        {isChecked && (\n          <motion.div\n            animate={{ scale: 2, opacity: 0 }}\n            className=\"absolute inset-0 z-0 rounded-full bg-brand-primary\"\n            exit={{ scale: 0, opacity: 0 }}\n            initial={{ scale: 0, opacity: 0.5 }}\n            transition={{ duration: 0.4 }}\n          />\n        )}\n      </AnimatePresence>\n      <motion.div\n        animate={isChecked ? { scale: 1.1 } : { scale: 1 }}\n        className=\"relative\"\n        transition={{ type: \"spring\", stiffness: 300, damping: 20 }}\n      >\n        <RadioGroupPrimitive.Indicator className=\"flex items-center justify-center\">\n          <Circle className=\"size-2.5 fill-current text-current\" />\n        </RadioGroupPrimitive.Indicator>\n      </motion.div>\n    </RadioGroupPrimitive.Item>\n  );\n};\n\nexport { RadioGroup, RadioGroupItem };\n"],
   "mappings": "AA6CE,cAwDE,YAxDF;AAfF,SAAS,cAAc;AACvB,SAAS,iBAAiB,cAAc;AACxC,SAAS,cAAc,2BAA2B;AAElD,YAAY,WAAW;AAEvB,SAAS,UAAU;AAQnB,MAAM,aAAa,CAAC,EAAE,WAAW,KAAK,GAAG,MAAM,MAC7C;AAAA,EAAC,oBAAoB;AAAA,EAApB;AAAA,IACC,WAAW,GAAG,cAAc,SAAS;AAAA,IACpC,GAAG;AAAA,IACJ;AAAA;AACF;AASF,MAAM,iBAAiB,CAAC,EAAE,WAAW,KAAK,GAAG,MAAM,MAA2B;AAC5E,QAAM,CAAC,WAAW,YAAY,IAAI,MAAM,SAAS,KAAK;AACtD,QAAM,UAAU,MAAM,OAAiC,IAAI;AAE3D,QAAM,UAAU,MAAM;AACpB,UAAM,WAAW,IAAI,iBAAiB,CAAC,cAAc;AACnD,gBAAU,QAAQ,CAAC,aAAa;AAC9B,YACE,SAAS,SAAS,gBAClB,SAAS,kBAAkB,cAC3B;AACA,gBAAM,WAAW,QAAQ,SAAS,aAAa,YAAY;AAE3D,uBAAa,aAAa,SAAS;AAAA,QACrC;AAAA,MACF,CAAC;AAAA,IACH,CAAC;AAED,QAAI,QAAQ,SAAS;AACnB,eAAS,QAAQ,QAAQ,SAAS,EAAE,YAAY,KAAK,CAAC;AAAA,IACxD;AAEA,WAAO,MAAM;AACX,eAAS,WAAW;AAAA,IACtB;AAAA,EACF,GAAG,CAAC,CAAC;AAGL,QAAM,UAAU,MAAM;AAAA,IACpB,CAAC,YAAsC;AACrC,cAAQ,UAAU;AAGlB,UAAI,OAAO,QAAQ,YAAY;AAC7B,YAAI,OAAO;AAAA,MACb,WAAW,OAAO,aAAa,KAAK;AAClC,YAAI,UAAU;AAAA,MAChB;AAAA,IACF;AAAA,IACA,CAAC,GAAG;AAAA,EACN;AAEA,SACE;AAAA,IAAC,oBAAoB;AAAA,IAApB;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACA,KAAK;AAAA,MACJ,GAAG;AAAA,MAEJ;AAAA,4BAAC,mBACE,uBACC;AAAA,UAAC,OAAO;AAAA,UAAP;AAAA,YACC,SAAS,EAAE,OAAO,GAAG,SAAS,EAAE;AAAA,YAChC,WAAU;AAAA,YACV,MAAM,EAAE,OAAO,GAAG,SAAS,EAAE;AAAA,YAC7B,SAAS,EAAE,OAAO,GAAG,SAAS,IAAI;AAAA,YAClC,YAAY,EAAE,UAAU,IAAI;AAAA;AAAA,QAC9B,GAEJ;AAAA,QACA;AAAA,UAAC,OAAO;AAAA,UAAP;AAAA,YACC,SAAS,YAAY,EAAE,OAAO,IAAI,IAAI,EAAE,OAAO,EAAE;AAAA,YACjD,WAAU;AAAA,YACV,YAAY,EAAE,MAAM,UAAU,WAAW,KAAK,SAAS,GAAG;AAAA,YAE1D,8BAAC,oBAAoB,WAApB,EAA8B,WAAU,oCACvC,8BAAC,UAAO,WAAU,sCAAqC,GACzD;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EACF;AAEJ;",
   "names": []
 }

package/dist/components/scroll-area.d.ts

@@ -0,0 +1,33 @@
+import { ScrollArea as ScrollAreaPrimitive } from "radix-ui";
+import type { Ref } from "react";
+import * as React from "react";
+/** Styled scrollbar component for vertical or horizontal scrolling. */
+declare const ScrollBar: ({ className, orientation, ref, ...props }: React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar> & {
+    ref?: Ref<React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>>;
+}) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Props for FadeAway gradient overlay.
+ * @property direction - Edge to show fade: `"top"`, `"bottom"`, `"right"`, or `"left"`
+ * @property show - Whether the fade is visible
+ */
+interface FadeAwayProps extends React.HTMLAttributes<HTMLDivElement> {
+    direction: "top" | "bottom" | "right" | "left";
+    show: boolean;
+}
+declare const FadeAway: ({ className, direction, show, ref, ...props }: FadeAwayProps & {
+    ref?: Ref<HTMLDivElement>;
+}) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Props for ScrollArea component.
+ * @property fadeAway - Show fade gradients: `true` (all edges), `"top"`, `"bottom"`, `"y"`, `"left"`, `"right"`, `"x"`
+ * @property hideScrollBar - Hide the scrollbar while keeping functionality
+ */
+interface ScrollAreaProps extends React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> {
+    fadeAway?: boolean | "top" | "bottom" | "y" | "left" | "right" | "x";
+    hideScrollBar?: boolean;
+}
+declare const ScrollArea: ({ className, children, fadeAway, hideScrollBar, ref, ...props }: ScrollAreaProps & {
+    ref?: Ref<React.ElementRef<typeof ScrollAreaPrimitive.Root>>;
+}) => import("react/jsx-runtime").JSX.Element;
+export { FadeAway, ScrollArea, type ScrollAreaProps, ScrollBar };
+//# sourceMappingURL=scroll-area.d.ts.map

package/dist/components/scroll-area.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-area.d.ts","sourceRoot":"","sources":["../../src/components/scroll-area.tsx"],"names":[],"mappings":"AA8BA,OAAO,EAAE,UAAU,IAAI,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAC7D,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,uEAAuE;AACvE,QAAA,MAAM,SAAS,GAAI,2CAKhB,KAAK,CAAC,wBAAwB,CAC/B,OAAO,mBAAmB,CAAC,mBAAmB,CAC/C,GAAG;IACF,GAAG,CAAC,EAAE,GAAG,CAAC,KAAK,CAAC,UAAU,CAAC,OAAO,mBAAmB,CAAC,mBAAmB,CAAC,CAAC,CAAC;CAC7E,4CAgBA,CAAC;AAEF;;;;GAIG;AACH,UAAU,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAClE,SAAS,EAAE,KAAK,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;IAC/C,IAAI,EAAE,OAAO,CAAC;CACf;AAED,QAAA,MAAM,QAAQ,GAAI,+CAMf,aAAa,GAAG;IAAE,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAA;CAAE,4CAmB/C,CAAC;AAEF;;;;GAIG;AACH,UAAU,eACR,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,mBAAmB,CAAC,IAAI,CAAC;IACvE,QAAQ,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,GAAG,GAAG,MAAM,GAAG,OAAO,GAAG,GAAG,CAAC;IACrE,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AA0ED,QAAA,MAAM,UAAU,GAAI,iEAOjB,eAAe,GAAG;IACnB,GAAG,CAAC,EAAE,GAAG,CAAC,KAAK,CAAC,UAAU,CAAC,OAAO,mBAAmB,CAAC,IAAI,CAAC,CAAC,CAAC;CAC9D,4CA2CA,CAAC;AAEF,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,SAAS,EAAE,CAAC"}