@music-vine/cadence 0.1.0

package/dist/components/input.js

@@ -0,0 +1,174 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { X } from "lucide-react";
+import { Slot as SlotPrimitive } from "radix-ui";
+import * as React from "react";
+import { useState } from "react";
+import { cn } from "../lib/utils";
+const inputWrapperVariants = cva("relative flex w-full items-center", {
+  variants: {
+    size: {
+      auto: "h-auto w-auto",
+      default: "h-10",
+      sm: "h-7"
+    }
+  },
+  defaultVariants: {
+    size: "default"
+  }
+});
+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",
+    // text
+    "font-sans text-base text-black antialiased disabled:text-black/60 dark:text-white dark:disabled:text-white/60",
+    // placeholder
+    "placeholder-gray-700 placeholder:font-sans dark:placeholder-gray-200",
+    // background
+    "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",
+    // borders (light)
+    "rounded-lg border border-gray-150 border-solid invalid:border-red invalid:hover:border-red focus:border-pink-500 enabled:hover:border-gray-200 enabled:focus:hover:border-pink-500 disabled:border-gray-150/60",
+    // borders light
+    // borders (dark)
+    "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
+    // default clear button
+    "dark:[&::-webkit-search-cancel-button]:hidden"
+  ],
+  {
+    variants: {
+      size: {
+        default: "px-4",
+        sm: "px-3",
+        auto: "px-4"
+      },
+      hasLeftIcon: {
+        true: "",
+        false: ""
+      },
+      hasRightIcon: {
+        true: "",
+        false: ""
+      }
+    },
+    compoundVariants: [
+      {
+        hasLeftIcon: true,
+        size: "default",
+        class: "pl-10"
+      },
+      {
+        hasLeftIcon: true,
+        size: "sm",
+        class: "pl-8"
+      },
+      {
+        hasRightIcon: true,
+        size: "default",
+        class: "pr-10"
+      },
+      {
+        hasRightIcon: true,
+        size: "sm",
+        class: "pr-8"
+      }
+    ],
+    defaultVariants: {
+      size: "default",
+      hasLeftIcon: false,
+      hasRightIcon: false
+    }
+  }
+);
+const Input = React.forwardRef(
+  ({
+    className,
+    size,
+    type = "text",
+    htmlSize,
+    leftIcon,
+    rightIcon,
+    placeholder,
+    ...props
+  }, ref) => {
+    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,
+                  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
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Input.displayName = "Input";
+const ClearInputButton = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "button",
+  {
+    className: cn(
+      "absolute top-1/2 -translate-y-1/2 text-gray-950 dark:text-gray-300",
+      "focus-visible:ring-2 focus-visible:ring-pink-500 focus-visible:ring-offset-2 focus-visible:ring-offset-gray-100",
+      "rounded-full focus-visible:outline-none dark:focus-visible:ring-pink-500 dark:focus-visible:ring-offset-gray-800",
+      className
+    ),
+    ref,
+    type: "button",
+    ...props,
+    children: /* @__PURE__ */ jsx(X, { className: "absolute inset-0 size-full fill-none", strokeWidth: 3 })
+  }
+));
+ClearInputButton.displayName = "ClearInputButton";
+export {
+  ClearInputButton,
+  Input,
+  inputVariants
+};
+//# sourceMappingURL=input.js.map

package/dist/components/input.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/input.tsx"],
+  "sourcesContent": ["import { cva, type VariantProps } from \"class-variance-authority\";\nimport { X } from \"lucide-react\";\nimport { Slot as SlotPrimitive } from \"radix-ui\";\nimport * as React 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-pink-500 enabled:hover:border-gray-200 enabled:focus:hover:border-pink-500 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    // default clear button\n    \"dark:[&::-webkit-search-cancel-button]:hidden\",\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    },\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 hasLeftIcon and hasRightIcon from the public API\ntype PublicInputVariantsProps = Omit<\n  InputVariantsProps,\n  \"hasLeftIcon\" | \"hasRightIcon\"\n>;\n\nexport interface InputProps\n  extends InputPropsWithoutSize,\n    PublicInputVariantsProps {\n  htmlSize?: number;\n  leftIcon?: React.ReactNode;\n  rightIcon?: React.ReactNode;\n}\n\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(\n  (\n    {\n      className,\n      size,\n      type = \"text\",\n      htmlSize,\n      leftIcon,\n      rightIcon,\n      placeholder,\n      ...props\n    },\n    ref\n  ) => {\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              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);\n\nInput.displayName = \"Input\";\n\ntype ClearInputButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement>;\n\nconst ClearInputButton = React.forwardRef<\n  HTMLButtonElement,\n  ClearInputButtonProps\n>(({ className, ...props }, ref) => (\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-pink-500 focus-visible:ring-offset-2 focus-visible:ring-offset-gray-100\",\n      \"rounded-full focus-visible:outline-none dark:focus-visible:ring-pink-500 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 fill-none\" strokeWidth={3} />\n  </button>\n));\n\nClearInputButton.displayName = \"ClearInputButton\";\n\nexport { ClearInputButton, Input, inputVariants };\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/components/label.d.ts

@@ -0,0 +1,6 @@
+import { type VariantProps } from "class-variance-authority";
+import { Label as LabelPrimitive } from "radix-ui";
+import * as React from "react";
+declare const Label: React.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React.RefAttributes<HTMLLabelElement>, "ref"> & VariantProps<(props?: import("class-variance-authority/types").ClassProp | undefined) => string> & React.RefAttributes<HTMLLabelElement>>;
+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,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,KAAK,IAAI,cAAc,EAAE,MAAM,UAAU,CAAC;AACnD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,QAAA,MAAM,KAAK,4PAUT,CAAC;AAIH,OAAO,EAAE,KAAK,EAAE,CAAC"}

package/dist/components/label.js

@@ -0,0 +1,21 @@
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { Label as LabelPrimitive } from "radix-ui";
+import * as React from "react";
+import { cn } from "../lib/utils";
+const labelVariants = cva(
+  "font-semibold text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+);
+const Label = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  LabelPrimitive.Root,
+  {
+    className: cn(labelVariants(), className),
+    ref,
+    ...props
+  }
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+export {
+  Label
+};
+//# sourceMappingURL=label.js.map

package/dist/components/label.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/label.tsx"],
+  "sourcesContent": ["import { cva, type VariantProps } from \"class-variance-authority\";\nimport { Label as LabelPrimitive } from \"radix-ui\";\nimport * as React from \"react\";\n\nimport { cn } from \"../lib/utils\";\n\nconst labelVariants = cva(\n  \"font-semibold text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n);\n\nconst Label = React.forwardRef<\n  React.ElementRef<typeof LabelPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &\n    VariantProps<typeof labelVariants>\n>(({ className, ...props }, ref) => (\n  <LabelPrimitive.Root\n    className={cn(labelVariants(), className)}\n    ref={ref}\n    {...props}\n  />\n));\n\nLabel.displayName = LabelPrimitive.Root.displayName;\n\nexport { Label };\n"],
+  "mappings": "AAeE;AAfF,SAAS,WAA8B;AACvC,SAAS,SAAS,sBAAsB;AACxC,YAAY,WAAW;AAEvB,SAAS,UAAU;AAEnB,MAAM,gBAAgB;AAAA,EACpB;AACF;AAEA,MAAM,QAAQ,MAAM,WAIlB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B;AAAA,EAAC,eAAe;AAAA,EAAf;AAAA,IACC,WAAW,GAAG,cAAc,GAAG,SAAS;AAAA,IACxC;AAAA,IACC,GAAG;AAAA;AACN,CACD;AAED,MAAM,cAAc,eAAe,KAAK;",
+  "names": []
+}

package/dist/components/popover.d.ts

@@ -0,0 +1,8 @@
+import { Popover as PopoverPrimitive } from "radix-ui";
+import * as React from "react";
+declare const Popover: React.FC<PopoverPrimitive.PopoverProps>;
+declare const PopoverTrigger: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const PopoverAnchor: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverAnchorProps & React.RefAttributes<HTMLDivElement>>;
+declare const PopoverContent: React.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+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,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,UAAU,CAAC;AACvD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,QAAA,MAAM,OAAO,yCAAwB,CAAC;AAEtC,QAAA,MAAM,cAAc,gHAA2B,CAAC;AAEhD,QAAA,MAAM,aAAa,4GAA0B,CAAC;AAE9C,QAAA,MAAM,cAAc,gKA6BnB,CAAC;AAIF,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,cAAc,EAAE,CAAC"}

package/dist/components/popover.js

@@ -0,0 +1,38 @@
+import { jsx } from "react/jsx-runtime";
+import { Popover as PopoverPrimitive } from "radix-ui";
+import * as React from "react";
+import { cn } from "../lib/utils";
+const Popover = PopoverPrimitive.Root;
+const PopoverTrigger = PopoverPrimitive.Trigger;
+const PopoverAnchor = PopoverPrimitive.Anchor;
+const PopoverContent = React.forwardRef(
+  ({
+    className,
+    forceMount = false,
+    align = "center",
+    sideOffset = 4,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { forceMount: forceMount || void 0, children: /* @__PURE__ */ jsx(
+      PopoverPrimitive.Content,
+      {
+        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",
+          className
+        ),
+        ref,
+        sideOffset,
+        ...props
+      }
+    ) });
+  }
+);
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+export {
+  Popover,
+  PopoverAnchor,
+  PopoverContent,
+  PopoverTrigger
+};
+//# sourceMappingURL=popover.js.map

package/dist/components/popover.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/popover.tsx"],
+  "sourcesContent": ["import { Popover as PopoverPrimitive } from \"radix-ui\";\nimport * as React from \"react\";\n\nimport { cn } from \"../lib/utils\";\n\nconst Popover = PopoverPrimitive.Root;\n\nconst PopoverTrigger = PopoverPrimitive.Trigger;\n\nconst PopoverAnchor = PopoverPrimitive.Anchor;\n\nconst PopoverContent = React.forwardRef<\n  React.ElementRef<typeof PopoverPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>\n>(\n  (\n    {\n      className,\n      forceMount = false,\n      align = \"center\",\n      sideOffset = 4,\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <PopoverPrimitive.Portal forceMount={forceMount || undefined}>\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  }\n);\n\nPopoverContent.displayName = PopoverPrimitive.Content.displayName;\n\nexport { Popover, PopoverAnchor, PopoverContent, PopoverTrigger };\n"],
+  "mappings": "AA2BQ;AA3BR,SAAS,WAAW,wBAAwB;AAC5C,YAAY,WAAW;AAEvB,SAAS,UAAU;AAEnB,MAAM,UAAU,iBAAiB;AAEjC,MAAM,iBAAiB,iBAAiB;AAExC,MAAM,gBAAgB,iBAAiB;AAEvC,MAAM,iBAAiB,MAAM;AAAA,EAI3B,CACE;AAAA,IACE;AAAA,IACA,aAAa;AAAA,IACb,QAAQ;AAAA,IACR,aAAa;AAAA,IACb,GAAG;AAAA,EACL,GACA,QACG;AACH,WACE,oBAAC,iBAAiB,QAAjB,EAAwB,YAAY,cAAc,QACjD;AAAA,MAAC,iBAAiB;AAAA,MAAjB;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QACF;AAAA,QACA;AAAA,QACA;AAAA,QACC,GAAG;AAAA;AAAA,IACN,GACF;AAAA,EAEJ;AACF;AAEA,eAAe,cAAc,iBAAiB,QAAQ;",
+  "names": []
+}

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

@@ -0,0 +1,11 @@
+import type * as React from "react";
+import type { TextProps } from "./typography/text";
+export interface PriceTagProps extends TextProps {
+    currencySymbol: string;
+    price: string;
+    frequency: 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,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAGnD,MAAM,WAAW,aAAc,SAAQ,SAAS;IAC9C,cAAc,EAAE,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,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

@@ -0,0 +1,31 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Text } from "./typography/text";
+function PriceTag({
+  currencySymbol,
+  price,
+  frequency,
+  ref,
+  ...props
+}) {
+  const [mainUnit, cents = "00"] = price.split(".", 2);
+  const accessiblePrice = `${currencySymbol}${price} per ${frequency}`;
+  return /* @__PURE__ */ jsxs(Text, { className: "font-sans font-normal leading-5", ref, ...props, children: [
+    /* @__PURE__ */ jsx("span", { className: "sr-only", children: accessiblePrice }),
+    /* @__PURE__ */ jsxs("span", { "aria-hidden": "true", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-gray-700 text-xs dark:text-gray-200", children: currencySymbol }),
+      /* @__PURE__ */ jsxs("span", { className: "font-heading font-semibold text-base text-gray-950 dark:text-white", children: [
+        mainUnit,
+        ".",
+        cents
+      ] }),
+      /* @__PURE__ */ jsxs("span", { className: "text-gray-700 text-xs dark:text-gray-200", children: [
+        "/",
+        frequency
+      ] })
+    ] })
+  ] });
+}
+export {
+  PriceTag
+};
+//# sourceMappingURL=price-tag.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/price-tag.tsx"],
+  "sourcesContent": ["import type * as React from \"react\";\nimport type { TextProps } from \"./typography/text\";\nimport { Text } from \"./typography/text\";\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"],
+  "mappings": "AA2BM,cAOE,YAPF;AAzBN,SAAS,YAAY;AASrB,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,6 @@
+import { RadioGroup as RadioGroupPrimitive } from "radix-ui";
+import * as React from "react";
+declare const RadioGroup: React.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const RadioGroupItem: React.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupItemProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+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":"AAEA,OAAO,EAAE,UAAU,IAAI,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAC7D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,QAAA,MAAM,UAAU,+JASd,CAAC;AAIH,QAAA,MAAM,cAAc,yKA4ElB,CAAC;AAIH,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,CAAC"}

package/dist/components/radio-group.js

@@ -0,0 +1,84 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Circle } from "lucide-react";
+import { AnimatePresence, motion } from "motion/react";
+import { RadioGroup as RadioGroupPrimitive } from "radix-ui";
+import * as React from "react";
+import { cn } from "../lib/utils";
+const RadioGroup = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  RadioGroupPrimitive.Root,
+  {
+    className: cn("grid gap-2", className),
+    ...props,
+    ref
+  }
+));
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
+const RadioGroupItem = React.forwardRef(({ className, ...props }, ref) => {
+  const [isChecked, setIsChecked] = React.useState(false);
+  const itemRef = React.useRef(null);
+  React.useEffect(() => {
+    const observer = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        if (mutation.type === "attributes" && mutation.attributeName === "data-state") {
+          const newState = itemRef.current?.getAttribute("data-state");
+          setIsChecked(newState === "checked");
+        }
+      });
+    });
+    if (itemRef.current) {
+      observer.observe(itemRef.current, { attributes: true });
+    }
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+  const setRefs = React.useCallback(
+    (element) => {
+      itemRef.current = element;
+      if (typeof ref === "function") {
+        ref(element);
+      } else if (ref && "current" in ref) {
+        ref.current = element;
+      }
+    },
+    [ref]
+  );
+  return /* @__PURE__ */ jsxs(
+    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-pink-500 ring-offset-pink-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset focus-visible:ring-pink-500 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-pink-500",
+        className
+      ),
+      ref: setRefs,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(AnimatePresence, { children: isChecked && /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            animate: { scale: 2, opacity: 0 },
+            className: "absolute inset-0 z-0 rounded-full bg-pink-500",
+            exit: { scale: 0, opacity: 0 },
+            initial: { scale: 0, opacity: 0.5 },
+            transition: { duration: 0.4 }
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            animate: isChecked ? { scale: 1.1 } : { scale: 1 },
+            className: "relative",
+            transition: { type: "spring", stiffness: 300, damping: 20 },
+            children: /* @__PURE__ */ jsx(RadioGroupPrimitive.Indicator, { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx(Circle, { className: "size-2.5 fill-current text-current" }) })
+          }
+        )
+      ]
+    }
+  );
+});
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
+export {
+  RadioGroup,
+  RadioGroupItem
+};
+//# sourceMappingURL=radio-group.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/radio-group.tsx"],
+  "sourcesContent": ["import { Circle } from \"lucide-react\";\nimport { AnimatePresence, motion } from \"motion/react\";\nimport { RadioGroup as RadioGroupPrimitive } from \"radix-ui\";\nimport * as React from \"react\";\n\nimport { cn } from \"../lib/utils\";\n\nconst RadioGroup = React.forwardRef<\n  React.ElementRef<typeof RadioGroupPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>\n>(({ className, ...props }, ref) => (\n  <RadioGroupPrimitive.Root\n    className={cn(\"grid gap-2\", className)}\n    {...props}\n    ref={ref}\n  />\n));\n\nRadioGroup.displayName = RadioGroupPrimitive.Root.displayName;\n\nconst RadioGroupItem = React.forwardRef<\n  React.ElementRef<typeof RadioGroupPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>\n>(({ className, ...props }, ref) => {\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-pink-500 ring-offset-pink-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset focus-visible:ring-pink-500 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-pink-500\",\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-pink-500\"\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\nRadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;\n\nexport { RadioGroup, RadioGroupItem };\n"],
+  "mappings": "AAWE,cAuDE,YAvDF;AAXF,SAAS,cAAc;AACvB,SAAS,iBAAiB,cAAc;AACxC,SAAS,cAAc,2BAA2B;AAClD,YAAY,WAAW;AAEvB,SAAS,UAAU;AAEnB,MAAM,aAAa,MAAM,WAGvB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B;AAAA,EAAC,oBAAoB;AAAA,EAApB;AAAA,IACC,WAAW,GAAG,cAAc,SAAS;AAAA,IACpC,GAAG;AAAA,IACJ;AAAA;AACF,CACD;AAED,WAAW,cAAc,oBAAoB,KAAK;AAElD,MAAM,iBAAiB,MAAM,WAG3B,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAAQ;AAClC,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,CAAC;AAED,eAAe,cAAc,oBAAoB,KAAK;",
+  "names": []
+}

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

@@ -0,0 +1,15 @@
+import { ScrollArea as ScrollAreaPrimitive } from "radix-ui";
+import * as React from "react";
+declare const ScrollBar: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaScrollbarProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+interface FadeAwayProps extends React.HTMLAttributes<HTMLDivElement> {
+    direction: "top" | "bottom" | "right" | "left";
+    show: boolean;
+}
+declare const FadeAway: React.ForwardRefExoticComponent<FadeAwayProps & React.RefAttributes<HTMLDivElement>>;
+interface ScrollAreaProps extends React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> {
+    fadeAway?: boolean | "top" | "bottom" | "y" | "left" | "right" | "x";
+    hideScrollBar?: boolean;
+}
+declare const ScrollArea: React.ForwardRefExoticComponent<ScrollAreaProps & React.RefAttributes<HTMLDivElement>>;
+export { FadeAway, ScrollArea, ScrollBar, type ScrollAreaProps };
+//# 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":"AACA,OAAO,EAAE,UAAU,IAAI,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAC7D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,QAAA,MAAM,SAAS,wKAmBb,CAAC;AAIH,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,sFAqBb,CAAC;AAIF,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,wFA8Cd,CAAC;AAIH,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,SAAS,EAAE,KAAK,eAAe,EAAE,CAAC"}

package/dist/components/scroll-area.js

@@ -0,0 +1,132 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import throttle from "lodash/throttle";
+import { ScrollArea as ScrollAreaPrimitive } from "radix-ui";
+import * as React from "react";
+import { cn } from "../lib/utils";
+const ScrollBar = React.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsx(
+  ScrollAreaPrimitive.ScrollAreaScrollbar,
+  {
+    className: cn(
+      "flex touch-none select-none transition-colors",
+      orientation === "vertical" && "h-full w-2.5 border-0 border-l border-l-transparent border-solid p-[1px]",
+      orientation === "horizontal" && "h-2.5 flex-col border-0 border-t border-t-transparent border-solid p-[1px]",
+      className
+    ),
+    orientation,
+    ref,
+    ...props,
+    children: /* @__PURE__ */ jsx(ScrollAreaPrimitive.ScrollAreaThumb, { className: "relative flex-1 rounded-full bg-gray-200 dark:bg-gray-800" })
+  }
+));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+const FadeAway = React.forwardRef(
+  ({ className, direction, show, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "pointer-events-none absolute z-[8] transition-opacity duration-200",
+        direction === "top" && "top-0 right-0 left-0 h-[var(--fade-away-top-height,32px)] bg-gradient-to-b",
+        direction === "bottom" && "right-0 bottom-0 left-0 h-[var(--fade-away-bottom-height,32px)] bg-gradient-to-t",
+        direction === "right" && "top-0 right-0 bottom-0 w-[var(--fade-away-right-width,32px)] bg-gradient-to-l",
+        direction === "left" && "top-0 bottom-0 left-0 w-[var(--fade-away-left-width,32px)] bg-gradient-to-r",
+        "from-[var(--fade-away-from,rgb(255_255_255))] to-[var(--fade-away-to,rgb(255_255_255_/_0))] dark:from-[var(--fade-away-from-dark,rgb(21_25_25))] dark:to-[var(--fade-away-to-dark,rgb(21_25_25_/_0))]",
+        show ? "opacity-100" : "opacity-0",
+        className
+      ),
+      ref,
+      ...props
+    }
+  )
+);
+FadeAway.displayName = "FadeAway";
+const useScrollFade = ({ viewportRef, enabled }) => {
+  const [showTopFade, setShowTopFade] = React.useState(false);
+  const [showBottomFade, setShowBottomFade] = React.useState(true);
+  const [showLeftFade, setShowLeftFade] = React.useState(false);
+  const [showRightFade, setShowRightFade] = React.useState(true);
+  const handleScroll = React.useCallback(() => {
+    if (!enabled) {
+      return;
+    }
+    if (viewportRef.current) {
+      const {
+        scrollTop,
+        scrollLeft,
+        scrollHeight,
+        scrollWidth,
+        clientHeight,
+        clientWidth
+      } = viewportRef.current;
+      setShowTopFade(scrollTop > 0);
+      setShowBottomFade(scrollTop < scrollHeight - clientHeight - 1);
+      setShowLeftFade(scrollLeft > 0);
+      setShowRightFade(scrollLeft < scrollWidth - clientWidth - 1);
+    }
+  }, [viewportRef, enabled]);
+  const throttledHandleScroll = React.useMemo(
+    () => throttle(handleScroll, 50),
+    [handleScroll]
+  );
+  React.useEffect(() => {
+    if (!enabled) {
+      return;
+    }
+    const viewport = viewportRef.current;
+    if (!viewport) {
+      return;
+    }
+    throttledHandleScroll();
+    viewport.addEventListener("scroll", throttledHandleScroll, {
+      passive: true
+    });
+    const resizeObserver = new ResizeObserver(throttledHandleScroll);
+    resizeObserver.observe(viewport);
+    return () => {
+      viewport.removeEventListener("scroll", throttledHandleScroll);
+      resizeObserver.disconnect();
+      throttledHandleScroll.cancel();
+    };
+  }, [throttledHandleScroll, viewportRef, enabled]);
+  return { showTopFade, showBottomFade, showLeftFade, showRightFade };
+};
+const ScrollArea = React.forwardRef(({ className, children, fadeAway = false, hideScrollBar, ...props }, ref) => {
+  const viewportRef = React.useRef(null);
+  const { showTopFade, showBottomFade, showLeftFade, showRightFade } = useScrollFade({
+    viewportRef,
+    enabled: !!fadeAway
+  });
+  const shouldHideScrollBar = "hideScrollBar" in props || hideScrollBar === true;
+  return /* @__PURE__ */ jsxs(
+    ScrollAreaPrimitive.Root,
+    {
+      className: cn("relative overflow-hidden", className),
+      ref,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs(
+          ScrollAreaPrimitive.Viewport,
+          {
+            className: "h-full w-full rounded-[inherit]",
+            ref: viewportRef,
+            children: [
+              fadeAway && (fadeAway === true || fadeAway === "top" || fadeAway === "y") && /* @__PURE__ */ jsx(FadeAway, { direction: "top", show: showTopFade }),
+              fadeAway && (fadeAway === true || fadeAway === "left" || fadeAway === "x") && /* @__PURE__ */ jsx(FadeAway, { direction: "left", show: showLeftFade }),
+              children,
+              fadeAway && (fadeAway === true || fadeAway === "bottom" || fadeAway === "y") && /* @__PURE__ */ jsx(FadeAway, { direction: "bottom", show: showBottomFade }),
+              fadeAway && (fadeAway === true || fadeAway === "right" || fadeAway === "x") && /* @__PURE__ */ jsx(FadeAway, { direction: "right", show: showRightFade })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(ScrollBar, { className: shouldHideScrollBar ? "hidden opacity-0" : "" }),
+        /* @__PURE__ */ jsx(ScrollAreaPrimitive.Corner, {})
+      ]
+    }
+  );
+});
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+export {
+  FadeAway,
+  ScrollArea,
+  ScrollBar
+};
+//# sourceMappingURL=scroll-area.js.map