@music-vine/cadence 0.1.0

package/dist/components/button.js

@@ -0,0 +1,295 @@
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { Loader } from "lucide-react";
+import { Slot as SlotPrimitive } from "radix-ui";
+import { forwardRef } from "react";
+import { cn } from "../lib/utils";
+const sizeClasses = {
+  default: "h-8 px-4 py-2 leading-8",
+  xs: "h-5 gap-1.5 px-2 leading-5",
+  sm: "h-7 px-3 py-2 leading-6",
+  lg: "h-10 px-4 py-2 leading-8",
+  xl: "h-12 px-8 py-3 leading-10",
+  icon: "h-8 w-8 leading-8"
+};
+const fontSizeClasses = {
+  xxs: "text-xxs",
+  xs: "text-xs",
+  sm: "text-sm",
+  base: "text-base",
+  lg: "text-lg",
+  xl: "text-xl"
+};
+const defaultFontSizeForSize = {
+  xs: "xs",
+  sm: "xs",
+  default: "base",
+  lg: "base",
+  icon: "base",
+  xl: "lg"
+};
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap font-normal font-sans text-base transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-pink-500 focus-visible:ring-offset-2 enabled:cursor-pointer disabled:cursor-not-allowed disabled:opacity-50 dark:focus-visible:ring-offset-gray-950",
+  {
+    variants: {
+      variant: {
+        // NEW BRANDING VARIANTS
+        subtle: "border-1 border-gray-150 border-solid bg-white text-gray-950 hover:bg-gray-50 active:border-pink-600 active:bg-pink-50 active:text-pink-600 disabled:bg-gray-50 active:disabled:border-gray-150 active:disabled:bg-gray-50 active:disabled:text-gray-950 dark:border-gray-800 dark:bg-gray-950 dark:text-white dark:disabled:border-gray-900 dark:disabled:bg-gray-950 dark:disabled:text-white dark:active:border-white dark:active:text-white dark:disabled:active:border-gray-900 dark:disabled:active:bg-gray-950 dark:disabled:active:text-white dark:hover:bg-gray-900",
+        pink: "border-1 border-pink-500 border-solid bg-pink-500 font-semibold text-white hover:border-pink-600 hover:bg-pink-600 disabled:hover:bg-pink-600 dark:hover:border-pink-600 dark:hover:bg-pink-600",
+        pinkSecondary: "border-1 border-pink-50 border-solid bg-pink-50 font-semibold text-pink-600 hover:border-pink-100 hover:bg-pink-100 disabled:hover:bg-pink-100 dark:border-gray-900 dark:bg-gray-900 dark:text-white hover:dark:border-gray-800 hover:dark:bg-gray-800 dark:disabled:hover:border-gray-900 dark:disabled:hover:bg-gray-900",
+        bold: "border-gray-950 bg-gray-950 font-semibold text-white dark:border-white dark:bg-white dark:text-gray-950",
+        light: "border-gray-150 bg-gray-100 font-semibold text-gray-950 hover:border-gray-200 hover:bg-gray-200 disabled:hover:border-gray-150 disabled:hover:bg-gray-100 dark:border-gray-800 dark:bg-gray-800 dark:text-white dark:hover:border-gray-700 dark:hover:bg-gray-700 dark:hover:disabled:border-gray-800 dark:hover:disabled:bg-gray-800",
+        transparent: "!border-transparent bg-transparent font-semibold text-gray-950 hover:border-gray-50 hover:bg-gray-50 disabled:hover:border-transparent disabled:hover:bg-transparent dark:text-white dark:hover:border-gray-900 dark:hover:bg-gray-900",
+        contrast: "h border-white bg-white font-semibold text-gray-950 hover:bg-gray-50 hover:disabled:border-white hover:disabled:bg-white",
+        success: "border-green-500 bg-green-500 font-semibold text-white hover:border-green-600 hover:bg-green-600 disabled:hover:border-green-500 disabled:hover:bg-green-500 dark:border-green-400 dark:bg-green-400 dark:hover:border-green-300 dark:hover:bg-green-300 dark:disabled:hover:border-green-400 dark:disabled:hover:bg-green-400",
+        error: "border-red-600 bg-red-600 font-semibold text-white hover:bg-red-700 disabled:hover:border-red-700 disabled:hover:bg-red-700 dark:border-red-500 dark:bg-red-500 dark:hover:border-red-600 dark:hover:bg-red-600 dark:disabled:hover:border-red-600 dark:disabled:hover:bg-red-600"
+      },
+      size: sizeClasses,
+      fontSize: {
+        ...fontSizeClasses,
+        null: ""
+        // No font size class, relies on compound variants
+      },
+      borderRadius: {
+        default: "rounded-lg",
+        sm: "rounded",
+        full: "rounded-full",
+        rounded: "rounded-[100px]"
+      },
+      border: {
+        true: "border border-solid",
+        false: "border-none"
+      },
+      noFeedback: {
+        true: "",
+        false: "transition-scale active:scale-[0.97] disabled:scale-100"
+      }
+    },
+    compoundVariants: [
+      // Size + BorderRadius compounds
+      {
+        size: "sm",
+        borderRadius: "default",
+        className: "rounded-lg"
+      },
+      {
+        size: "xs",
+        borderRadius: "default",
+        className: "rounded-md"
+      },
+      // Variant + Border compounds
+      {
+        variant: "transparent",
+        border: true,
+        className: "border-gray-200 dark:border-gray-800"
+      },
+      {
+        variant: "success",
+        border: true,
+        className: "border-green-dark"
+      },
+      {
+        variant: "contrast",
+        border: true,
+        className: "border-white"
+      },
+      // Size + fontSize compounds (default font size for each size when no explicit fontSize)
+      { size: "xs", fontSize: null, className: "text-xs" },
+      { size: "sm", fontSize: null, className: "text-xs" },
+      { size: "default", fontSize: null, className: "text-base" },
+      { size: "lg", fontSize: null, className: "text-base" },
+      { size: "icon", fontSize: null, className: "text-base" },
+      { size: "xl", fontSize: null, className: "text-lg" }
+    ],
+    defaultVariants: {
+      variant: "bold",
+      size: "default",
+      fontSize: null,
+      borderRadius: "default",
+      border: false,
+      noFeedback: false
+    }
+  }
+);
+const getSizeClasses = (sizeKey) => sizeClasses[sizeKey] || "";
+const getFontSizeClasses = (fontSizeKey) => fontSizeClasses[fontSizeKey] || "";
+function generateResponsiveSizeClasses(size) {
+  if (!size || typeof size === "string") {
+    return "";
+  }
+  const classes = [];
+  const breakpoints = [
+    { prefix: "xxs", value: size.xxs },
+    { prefix: "xs", value: size.xs },
+    { prefix: "sm", value: size.sm },
+    { prefix: "md", value: size.md },
+    { prefix: "lg", value: size.lg },
+    { prefix: "xl", value: size.xl },
+    { prefix: "2xl", value: size["2xl"] }
+  ];
+  for (const breakpoint of breakpoints) {
+    if (breakpoint.value) {
+      const breakpointSizeClasses = getSizeClasses(breakpoint.value);
+      const responsiveClasses = breakpointSizeClasses.split(" ").filter((cls) => cls.trim() !== "").map((cls) => `${breakpoint.prefix}:${cls}`).join(" ");
+      if (responsiveClasses) {
+        classes.push(responsiveClasses);
+      }
+    }
+  }
+  return classes.join(" ");
+}
+function generateResponsiveFontSizeClasses(fontSize) {
+  if (!fontSize || typeof fontSize === "string") {
+    return "";
+  }
+  const classes = [];
+  const breakpoints = [
+    { prefix: "xxs", value: fontSize.xxs },
+    { prefix: "xs", value: fontSize.xs },
+    { prefix: "sm", value: fontSize.sm },
+    { prefix: "md", value: fontSize.md },
+    { prefix: "lg", value: fontSize.lg },
+    { prefix: "xl", value: fontSize.xl },
+    { prefix: "2xl", value: fontSize["2xl"] }
+  ];
+  for (const breakpoint of breakpoints) {
+    if (breakpoint.value) {
+      const breakpointFontSizeClasses = getFontSizeClasses(breakpoint.value);
+      const responsiveClasses = breakpointFontSizeClasses.split(" ").filter((cls) => cls.trim() !== "").map((cls) => `${breakpoint.prefix}:${cls}`).join(" ");
+      if (responsiveClasses) {
+        classes.push(responsiveClasses);
+      }
+    }
+  }
+  return classes.join(" ");
+}
+const Button = forwardRef(
+  ({
+    className,
+    variant,
+    size,
+    borderRadius,
+    border,
+    noFeedback,
+    asChild = false,
+    type,
+    children,
+    fontSize,
+    icon = false,
+    ...props
+  }, ref) => {
+    const Comp = asChild ? SlotPrimitive.Slot : "button";
+    const buttonType = asChild ? void 0 : type ?? "button";
+    const responsiveClasses = typeof size === "object" ? generateResponsiveSizeClasses(size) : void 0;
+    let responsiveFontSizeClasses;
+    if (typeof fontSize === "object") {
+      responsiveFontSizeClasses = generateResponsiveFontSizeClasses(fontSize);
+    } else if (typeof size === "object" && fontSize === void 0) {
+      const autoFontSize = {
+        default: defaultFontSizeForSize[size.default] || "base"
+      };
+      const breakpointMappings = [
+        { sizeKey: "xxs", fontKey: "xxs" },
+        { sizeKey: "xs", fontKey: "xs" },
+        { sizeKey: "sm", fontKey: "sm" },
+        { sizeKey: "md", fontKey: "md" },
+        { sizeKey: "lg", fontKey: "lg" },
+        { sizeKey: "xl", fontKey: "xl" },
+        { sizeKey: "2xl", fontKey: "2xl" }
+      ];
+      for (const { sizeKey, fontKey } of breakpointMappings) {
+        const sizeValue = size[sizeKey];
+        if (sizeValue && sizeValue in defaultFontSizeForSize) {
+          autoFontSize[fontKey] = defaultFontSizeForSize[sizeValue];
+        }
+      }
+      responsiveFontSizeClasses = generateResponsiveFontSizeClasses(autoFontSize);
+    }
+    const cvaSize = typeof size === "object" ? size.default : size;
+    let cvaFontSize = null;
+    if (fontSize) {
+      if (typeof fontSize === "object") {
+        cvaFontSize = fontSize.default || null;
+      } else {
+        cvaFontSize = fontSize;
+      }
+    }
+    let iconClasses = "";
+    if (icon) {
+      iconClasses = "aspect-square p-0";
+      if (typeof size === "object") {
+        const iconResponsiveClasses = [];
+        const breakpointMappings = [
+          { sizeKey: "xxs", prefix: "xxs" },
+          { sizeKey: "xs", prefix: "xs" },
+          { sizeKey: "sm", prefix: "sm" },
+          { sizeKey: "md", prefix: "md" },
+          { sizeKey: "lg", prefix: "lg" },
+          { sizeKey: "xl", prefix: "xl" },
+          { sizeKey: "2xl", prefix: "2xl" }
+        ];
+        for (const { sizeKey, prefix } of breakpointMappings) {
+          const sizeValue = size[sizeKey];
+          if (sizeValue) {
+            iconResponsiveClasses.push(`${prefix}:p-0`);
+          }
+        }
+        if (iconResponsiveClasses.length > 0) {
+          iconClasses += ` ${iconResponsiveClasses.join(" ")}`;
+        }
+      }
+    }
+    return /* @__PURE__ */ jsx(
+      Comp,
+      {
+        className: cn(
+          buttonVariants({
+            variant,
+            size: cvaSize,
+            fontSize: cvaFontSize,
+            borderRadius,
+            border,
+            noFeedback
+          }),
+          responsiveClasses,
+          responsiveFontSizeClasses,
+          iconClasses,
+          className
+        ),
+        ref,
+        type: buttonType,
+        ...props,
+        children
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+const loadingVariants = cva("hidden w-4 text-inherit", {
+  variants: {
+    size: {
+      default: "w-4",
+      lg: "w-5",
+      sm: "w-3",
+      xs: "w-3",
+      icon: "w-4",
+      xl: "w-5"
+    },
+    visible: {
+      true: "block",
+      false: "hidden"
+    }
+  },
+  defaultVariants: {
+    size: "default",
+    visible: false
+  }
+});
+const Loading = ({ size, visible }) => /* @__PURE__ */ jsx(Loader, { className: cn(loadingVariants({ size, visible })) });
+export {
+  Button,
+  Loading,
+  buttonVariants,
+  loadingVariants
+};
+//# sourceMappingURL=button.js.map

package/dist/components/button.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/button.tsx"],
+  "sourcesContent": ["import { cva, type VariantProps } from \"class-variance-authority\";\nimport { Loader } from \"lucide-react\";\nimport { Slot as SlotPrimitive } from \"radix-ui\";\nimport { type ButtonHTMLAttributes, forwardRef } from \"react\";\n\nimport { cn } from \"../lib/utils\";\n\n// Define size classes once as a single source of truth (including leading but not font sizes)\nconst sizeClasses = {\n  default: \"h-8 px-4 py-2 leading-8\",\n  xs: \"h-5 gap-1.5 px-2 leading-5\",\n  sm: \"h-7 px-3 py-2 leading-6\",\n  lg: \"h-10 px-4 py-2 leading-8\",\n  xl: \"h-12 px-8 py-3 leading-10\",\n  icon: \"h-8 w-8 leading-8\",\n} as const;\n\nconst fontSizeClasses = {\n  xxs: \"text-xxs\",\n  xs: \"text-xs\",\n  sm: \"text-sm\",\n  base: \"text-base\",\n  lg: \"text-lg\",\n  xl: \"text-xl\",\n} as const;\n\n// Type definitions for responsive sizes\ntype ButtonSize = \"default\" | \"xs\" | \"sm\" | \"lg\" | \"icon\" | \"xl\";\n\ntype ButtonFontSize = \"xxs\" | \"xs\" | \"sm\" | \"base\" | \"lg\" | \"xl\" | null;\n\n// Default font size mapping based on button size (excludes null)\nconst defaultFontSizeForSize: Record<\n  ButtonSize,\n  Exclude<ButtonFontSize, null>\n> = {\n  xs: \"xs\",\n  sm: \"xs\",\n  default: \"base\",\n  lg: \"base\",\n  icon: \"base\",\n  xl: \"lg\",\n};\n\nconst buttonVariants = cva(\n  \"inline-flex items-center justify-center gap-2 whitespace-nowrap font-normal font-sans text-base transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-pink-500 focus-visible:ring-offset-2 enabled:cursor-pointer disabled:cursor-not-allowed disabled:opacity-50 dark:focus-visible:ring-offset-gray-950\",\n  {\n    variants: {\n      variant: {\n        // NEW BRANDING VARIANTS\n        subtle:\n          \"border-1 border-gray-150 border-solid bg-white text-gray-950 hover:bg-gray-50 active:border-pink-600 active:bg-pink-50 active:text-pink-600 disabled:bg-gray-50 active:disabled:border-gray-150 active:disabled:bg-gray-50 active:disabled:text-gray-950 dark:border-gray-800 dark:bg-gray-950 dark:text-white dark:disabled:border-gray-900 dark:disabled:bg-gray-950 dark:disabled:text-white dark:active:border-white dark:active:text-white dark:disabled:active:border-gray-900 dark:disabled:active:bg-gray-950 dark:disabled:active:text-white dark:hover:bg-gray-900\",\n        pink: \"border-1 border-pink-500 border-solid bg-pink-500 font-semibold text-white hover:border-pink-600 hover:bg-pink-600 disabled:hover:bg-pink-600 dark:hover:border-pink-600 dark:hover:bg-pink-600\",\n        pinkSecondary:\n          \"border-1 border-pink-50 border-solid bg-pink-50 font-semibold text-pink-600 hover:border-pink-100 hover:bg-pink-100 disabled:hover:bg-pink-100 dark:border-gray-900 dark:bg-gray-900 dark:text-white hover:dark:border-gray-800 hover:dark:bg-gray-800 dark:disabled:hover:border-gray-900 dark:disabled:hover:bg-gray-900\",\n        bold: \"border-gray-950 bg-gray-950 font-semibold text-white dark:border-white dark:bg-white dark:text-gray-950\",\n        light:\n          \"border-gray-150 bg-gray-100 font-semibold text-gray-950 hover:border-gray-200 hover:bg-gray-200 disabled:hover:border-gray-150 disabled:hover:bg-gray-100 dark:border-gray-800 dark:bg-gray-800 dark:text-white dark:hover:border-gray-700 dark:hover:bg-gray-700 dark:hover:disabled:border-gray-800 dark:hover:disabled:bg-gray-800\",\n        transparent:\n          \"!border-transparent bg-transparent font-semibold text-gray-950 hover:border-gray-50 hover:bg-gray-50 disabled:hover:border-transparent disabled:hover:bg-transparent dark:text-white dark:hover:border-gray-900 dark:hover:bg-gray-900\",\n        contrast:\n          \"h border-white bg-white font-semibold text-gray-950 hover:bg-gray-50 hover:disabled:border-white hover:disabled:bg-white\",\n        success:\n          \"border-green-500 bg-green-500 font-semibold text-white hover:border-green-600 hover:bg-green-600 disabled:hover:border-green-500 disabled:hover:bg-green-500 dark:border-green-400 dark:bg-green-400 dark:hover:border-green-300 dark:hover:bg-green-300 dark:disabled:hover:border-green-400 dark:disabled:hover:bg-green-400\",\n        error:\n          \"border-red-600 bg-red-600 font-semibold text-white hover:bg-red-700 disabled:hover:border-red-700 disabled:hover:bg-red-700 dark:border-red-500 dark:bg-red-500 dark:hover:border-red-600 dark:hover:bg-red-600 dark:disabled:hover:border-red-600 dark:disabled:hover:bg-red-600\",\n      },\n\n      size: sizeClasses,\n      fontSize: {\n        ...fontSizeClasses,\n        null: \"\", // No font size class, relies on compound variants\n      },\n      borderRadius: {\n        default: \"rounded-lg\",\n        sm: \"rounded\",\n        full: \"rounded-full\",\n        rounded: \"rounded-[100px]\",\n      },\n      border: {\n        true: \"border border-solid\",\n        false: \"border-none\",\n      },\n      noFeedback: {\n        true: \"\",\n        false: \"transition-scale active:scale-[0.97] disabled:scale-100\",\n      },\n    },\n    compoundVariants: [\n      // Size + BorderRadius compounds\n      {\n        size: \"sm\",\n        borderRadius: \"default\",\n        className: \"rounded-lg\",\n      },\n      {\n        size: \"xs\",\n        borderRadius: \"default\",\n        className: \"rounded-md\",\n      },\n\n      // Variant + Border compounds\n      {\n        variant: \"transparent\",\n        border: true,\n        className: \"border-gray-200 dark:border-gray-800\",\n      },\n      {\n        variant: \"success\",\n        border: true,\n        className: \"border-green-dark\",\n      },\n      {\n        variant: \"contrast\",\n        border: true,\n        className: \"border-white\",\n      },\n      // Size + fontSize compounds (default font size for each size when no explicit fontSize)\n      { size: \"xs\", fontSize: null, className: \"text-xs\" },\n      { size: \"sm\", fontSize: null, className: \"text-xs\" },\n      { size: \"default\", fontSize: null, className: \"text-base\" },\n      { size: \"lg\", fontSize: null, className: \"text-base\" },\n      { size: \"icon\", fontSize: null, className: \"text-base\" },\n      { size: \"xl\", fontSize: null, className: \"text-lg\" },\n    ],\n    defaultVariants: {\n      variant: \"bold\",\n      size: \"default\",\n      fontSize: null,\n      borderRadius: \"default\",\n      border: false,\n      noFeedback: false,\n    },\n  }\n);\n\ntype ResponsiveButtonSize =\n  | ButtonSize\n  | {\n      default: ButtonSize;\n      xxs?: ButtonSize;\n      xs?: ButtonSize;\n      sm?: ButtonSize;\n      md?: ButtonSize;\n      lg?: ButtonSize;\n      xl?: ButtonSize;\n      \"2xl\"?: ButtonSize;\n    };\n\ntype ResponsiveButtonFontSize =\n  | Exclude<ButtonFontSize, null>\n  | {\n      default?: Exclude<ButtonFontSize, null>;\n      xxs?: Exclude<ButtonFontSize, null>;\n      xs?: Exclude<ButtonFontSize, null>;\n      sm?: Exclude<ButtonFontSize, null>;\n      md?: Exclude<ButtonFontSize, null>;\n      lg?: Exclude<ButtonFontSize, null>;\n      xl?: Exclude<ButtonFontSize, null>;\n      \"2xl\"?: Exclude<ButtonFontSize, null>;\n    };\n\nconst getSizeClasses = (sizeKey: ButtonSize): string =>\n  sizeClasses[sizeKey] || \"\";\n\nconst getFontSizeClasses = (\n  fontSizeKey: Exclude<ButtonFontSize, null>\n): string => fontSizeClasses[fontSizeKey] || \"\";\n\n// Function to generate responsive Tailwind classes\nfunction generateResponsiveSizeClasses(size?: ResponsiveButtonSize): string {\n  if (!size || typeof size === \"string\") {\n    return \"\";\n  }\n\n  const classes: string[] = [];\n\n  // Add responsive classes for each breakpoint\n  const breakpoints = [\n    { prefix: \"xxs\", value: size.xxs },\n    { prefix: \"xs\", value: size.xs },\n    { prefix: \"sm\", value: size.sm },\n    { prefix: \"md\", value: size.md },\n    { prefix: \"lg\", value: size.lg },\n    { prefix: \"xl\", value: size.xl },\n    { prefix: \"2xl\", value: size[\"2xl\"] },\n  ];\n\n  for (const breakpoint of breakpoints) {\n    if (breakpoint.value) {\n      const breakpointSizeClasses = getSizeClasses(breakpoint.value);\n      const responsiveClasses = breakpointSizeClasses\n        .split(\" \")\n        .filter((cls) => cls.trim() !== \"\")\n        .map((cls) => `${breakpoint.prefix}:${cls}`)\n        .join(\" \");\n      if (responsiveClasses) {\n        classes.push(responsiveClasses);\n      }\n    }\n  }\n\n  return classes.join(\" \");\n}\n\nfunction generateResponsiveFontSizeClasses(\n  fontSize?: ResponsiveButtonFontSize\n): string {\n  if (!fontSize || typeof fontSize === \"string\") {\n    return \"\";\n  }\n\n  const classes: string[] = [];\n\n  // Add responsive classes for each breakpoint\n  const breakpoints = [\n    { prefix: \"xxs\", value: fontSize.xxs },\n    { prefix: \"xs\", value: fontSize.xs },\n    { prefix: \"sm\", value: fontSize.sm },\n    { prefix: \"md\", value: fontSize.md },\n    { prefix: \"lg\", value: fontSize.lg },\n    { prefix: \"xl\", value: fontSize.xl },\n    { prefix: \"2xl\", value: fontSize[\"2xl\"] },\n  ];\n\n  for (const breakpoint of breakpoints) {\n    if (breakpoint.value) {\n      const breakpointFontSizeClasses = getFontSizeClasses(breakpoint.value);\n      const responsiveClasses = breakpointFontSizeClasses\n        .split(\" \")\n        .filter((cls) => cls.trim() !== \"\")\n        .map((cls) => `${breakpoint.prefix}:${cls}`)\n        .join(\" \");\n      if (responsiveClasses) {\n        classes.push(responsiveClasses);\n      }\n    }\n  }\n\n  return classes.join(\" \");\n}\n\nexport interface ButtonProps\n  extends ButtonHTMLAttributes<HTMLButtonElement>,\n    Omit<VariantProps<typeof buttonVariants>, \"size\" | \"fontSize\"> {\n  asChild?: boolean;\n  size?: ResponsiveButtonSize;\n  fontSize?: ResponsiveButtonFontSize;\n  icon?: boolean;\n}\n\nconst Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      className,\n      variant,\n      size,\n      borderRadius,\n      border,\n      noFeedback,\n      asChild = false,\n      type,\n      children,\n      fontSize,\n      icon = false,\n      ...props\n    },\n    ref\n  ) => {\n    const Comp = asChild ? SlotPrimitive.Slot : \"button\";\n    const buttonType = asChild ? undefined : (type ?? \"button\");\n\n    // Generate responsive classes or use the cva size variant\n    const responsiveClasses =\n      typeof size === \"object\"\n        ? generateResponsiveSizeClasses(size)\n        : undefined;\n\n    // Generate responsive font size classes\n    let responsiveFontSizeClasses: string | undefined;\n    if (typeof fontSize === \"object\") {\n      // User provided explicit responsive font sizes\n      responsiveFontSizeClasses = generateResponsiveFontSizeClasses(fontSize);\n    } else if (typeof size === \"object\" && fontSize === undefined) {\n      // Auto-generate responsive font sizes based on responsive sizes\n      const autoFontSize: ResponsiveButtonFontSize = {\n        default: defaultFontSizeForSize[size.default] || \"base\",\n      };\n\n      // Map over the size object to create the auto font size object\n      const breakpointMappings = [\n        { sizeKey: \"xxs\" as const, fontKey: \"xxs\" as const },\n        { sizeKey: \"xs\" as const, fontKey: \"xs\" as const },\n        { sizeKey: \"sm\" as const, fontKey: \"sm\" as const },\n        { sizeKey: \"md\" as const, fontKey: \"md\" as const },\n        { sizeKey: \"lg\" as const, fontKey: \"lg\" as const },\n        { sizeKey: \"xl\" as const, fontKey: \"xl\" as const },\n        { sizeKey: \"2xl\" as const, fontKey: \"2xl\" as const },\n      ];\n\n      for (const { sizeKey, fontKey } of breakpointMappings) {\n        const sizeValue = (size as Record<string, ButtonSize>)[sizeKey];\n        if (sizeValue && sizeValue in defaultFontSizeForSize) {\n          (autoFontSize as Record<string, Exclude<ButtonFontSize, null>>)[\n            fontKey\n          ] = defaultFontSizeForSize[sizeValue as ButtonSize];\n        }\n      }\n\n      responsiveFontSizeClasses =\n        generateResponsiveFontSizeClasses(autoFontSize);\n    }\n\n    // For object sizes, use the default size in the cva\n    const cvaSize = typeof size === \"object\" ? size.default : size;\n\n    // Determine font size for cva\n    let cvaFontSize: ButtonFontSize = null;\n    if (fontSize) {\n      if (typeof fontSize === \"object\") {\n        // If fontSize object has no default, let compound variants handle it (null)\n        cvaFontSize = fontSize.default || null;\n      } else {\n        cvaFontSize = fontSize;\n      }\n    } // null triggers compound variants for default font sizes\n\n    // Generate icon classes if icon prop is true\n    let iconClasses = \"\";\n    if (icon) {\n      iconClasses = \"aspect-square p-0\";\n\n      // If using responsive sizes, we need to override padding at each breakpoint\n      if (typeof size === \"object\") {\n        const iconResponsiveClasses: string[] = [];\n\n        const breakpointMappings = [\n          { sizeKey: \"xxs\" as const, prefix: \"xxs\" },\n          { sizeKey: \"xs\" as const, prefix: \"xs\" },\n          { sizeKey: \"sm\" as const, prefix: \"sm\" },\n          { sizeKey: \"md\" as const, prefix: \"md\" },\n          { sizeKey: \"lg\" as const, prefix: \"lg\" },\n          { sizeKey: \"xl\" as const, prefix: \"xl\" },\n          { sizeKey: \"2xl\" as const, prefix: \"2xl\" },\n        ];\n\n        for (const { sizeKey, prefix } of breakpointMappings) {\n          const sizeValue = (size as Record<string, ButtonSize>)[sizeKey];\n          if (sizeValue) {\n            iconResponsiveClasses.push(`${prefix}:p-0`);\n          }\n        }\n\n        if (iconResponsiveClasses.length > 0) {\n          iconClasses += ` ${iconResponsiveClasses.join(\" \")}`;\n        }\n      }\n    }\n\n    return (\n      <Comp\n        className={cn(\n          buttonVariants({\n            variant,\n            size: cvaSize,\n            fontSize: cvaFontSize,\n            borderRadius,\n            border,\n            noFeedback,\n          }),\n          responsiveClasses,\n          responsiveFontSizeClasses,\n          iconClasses,\n          className\n        )}\n        ref={ref}\n        type={buttonType}\n        {...props}\n      >\n        {children}\n      </Comp>\n    );\n  }\n);\n\nButton.displayName = \"Button\";\n\nconst loadingVariants = cva(\"hidden w-4 text-inherit\", {\n  variants: {\n    size: {\n      default: \"w-4\",\n      lg: \"w-5\",\n      sm: \"w-3\",\n      xs: \"w-3\",\n      icon: \"w-4\",\n      xl: \"w-5\",\n    },\n    visible: {\n      true: \"block\",\n      false: \"hidden\",\n    },\n  },\n  defaultVariants: {\n    size: \"default\",\n    visible: false,\n  },\n});\n\nconst Loading = ({ size, visible }: VariantProps<typeof loadingVariants>) => (\n  <Loader className={cn(loadingVariants({ size, visible }))} />\n);\n\nexport { Button, buttonVariants, Loading, loadingVariants };\nexport type {\n  ResponsiveButtonSize,\n  ButtonSize,\n  ResponsiveButtonFontSize,\n  ButtonFontSize,\n};\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/components/card.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+declare const Card: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent, };
+//# sourceMappingURL=card.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../src/components/card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,QAAA,MAAM,IAAI,6GAYR,CAAC;AAIH,QAAA,MAAM,UAAU,6GASd,CAAC;AAIH,QAAA,MAAM,SAAS,6GAYb,CAAC;AAIH,QAAA,MAAM,eAAe,6GASnB,CAAC;AAIH,QAAA,MAAM,WAAW,6GAKf,CAAC;AAIH,QAAA,MAAM,UAAU,6GASd,CAAC;AAIH,OAAO,EACL,IAAI,EACJ,UAAU,EACV,UAAU,EACV,SAAS,EACT,eAAe,EACf,WAAW,GACZ,CAAC"}

package/dist/components/card.js

@@ -0,0 +1,65 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/utils";
+const Card = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "rounded-lg border border-gray-150 border-solid bg-white text-gray-950 shadow-card dark:border-gray-800 dark:bg-gray-950 dark:text-gray-50",
+      className
+    ),
+    ref,
+    ...props
+  }
+));
+Card.displayName = "Card";
+const CardHeader = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn("flex flex-col space-y-1.5 p-6", className),
+    ref,
+    ...props
+  }
+));
+CardHeader.displayName = "CardHeader";
+const CardTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "font-semibold text-2xl leading-none tracking-tight",
+      className
+    ),
+    ref,
+    ...props
+  }
+));
+CardTitle.displayName = "CardTitle";
+const CardDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn("text-gray-600 text-sm dark:text-gray-400", className),
+    ref,
+    ...props
+  }
+));
+CardDescription.displayName = "CardDescription";
+const CardContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { className: cn("p-6 pt-0", className), ref, ...props }));
+CardContent.displayName = "CardContent";
+const CardFooter = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn("flex items-center p-6 pt-0", className),
+    ref,
+    ...props
+  }
+));
+CardFooter.displayName = "CardFooter";
+export {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle
+};
+//# sourceMappingURL=card.js.map

package/dist/components/card.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/card.tsx"],
+  "sourcesContent": ["import * as React from \"react\";\n\nimport { cn } from \"../lib/utils\";\n\nconst Card = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    className={cn(\n      \"rounded-lg border border-gray-150 border-solid bg-white text-gray-950 shadow-card dark:border-gray-800 dark:bg-gray-950 dark:text-gray-50\",\n      className\n    )}\n    ref={ref}\n    {...props}\n  />\n));\n\nCard.displayName = \"Card\";\n\nconst CardHeader = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    className={cn(\"flex flex-col space-y-1.5 p-6\", className)}\n    ref={ref}\n    {...props}\n  />\n));\n\nCardHeader.displayName = \"CardHeader\";\n\nconst CardTitle = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    className={cn(\n      \"font-semibold text-2xl leading-none tracking-tight\",\n      className\n    )}\n    ref={ref}\n    {...props}\n  />\n));\n\nCardTitle.displayName = \"CardTitle\";\n\nconst CardDescription = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    className={cn(\"text-gray-600 text-sm dark:text-gray-400\", className)}\n    ref={ref}\n    {...props}\n  />\n));\n\nCardDescription.displayName = \"CardDescription\";\n\nconst CardContent = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div className={cn(\"p-6 pt-0\", className)} ref={ref} {...props} />\n));\n\nCardContent.displayName = \"CardContent\";\n\nconst CardFooter = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    className={cn(\"flex items-center p-6 pt-0\", className)}\n    ref={ref}\n    {...props}\n  />\n));\n\nCardFooter.displayName = \"CardFooter\";\n\nexport {\n  Card,\n  CardHeader,\n  CardFooter,\n  CardTitle,\n  CardDescription,\n  CardContent,\n};\n"],
+  "mappings": "AAQE;AARF,YAAY,WAAW;AAEvB,SAAS,UAAU;AAEnB,MAAM,OAAO,MAAM,WAGjB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B;AAAA,EAAC;AAAA;AAAA,IACC,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,IACC,GAAG;AAAA;AACN,CACD;AAED,KAAK,cAAc;AAEnB,MAAM,aAAa,MAAM,WAGvB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B;AAAA,EAAC;AAAA;AAAA,IACC,WAAW,GAAG,iCAAiC,SAAS;AAAA,IACxD;AAAA,IACC,GAAG;AAAA;AACN,CACD;AAED,WAAW,cAAc;AAEzB,MAAM,YAAY,MAAM,WAGtB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B;AAAA,EAAC;AAAA;AAAA,IACC,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,IACC,GAAG;AAAA;AACN,CACD;AAED,UAAU,cAAc;AAExB,MAAM,kBAAkB,MAAM,WAG5B,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B;AAAA,EAAC;AAAA;AAAA,IACC,WAAW,GAAG,4CAA4C,SAAS;AAAA,IACnE;AAAA,IACC,GAAG;AAAA;AACN,CACD;AAED,gBAAgB,cAAc;AAE9B,MAAM,cAAc,MAAM,WAGxB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B,oBAAC,SAAI,WAAW,GAAG,YAAY,SAAS,GAAG,KAAW,GAAG,OAAO,CACjE;AAED,YAAY,cAAc;AAE1B,MAAM,aAAa,MAAM,WAGvB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B;AAAA,EAAC;AAAA;AAAA,IACC,WAAW,GAAG,8BAA8B,SAAS;AAAA,IACrD;AAAA,IACC,GAAG;AAAA;AACN,CACD;AAED,WAAW,cAAc;",
+  "names": []
+}

package/dist/components/carousel-dots.d.ts

@@ -0,0 +1,9 @@
+import type { CarouselApi } from "./carousel";
+interface CarouselDotsProps {
+    api: CarouselApi | null;
+    count: number;
+    className?: string;
+}
+export declare const CarouselDots: ({ api, count, className }: CarouselDotsProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=carousel-dots.d.ts.map

package/dist/components/carousel-dots.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"carousel-dots.d.ts","sourceRoot":"","sources":["../../src/components/carousel-dots.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAE9C,UAAU,iBAAiB;IACzB,GAAG,EAAE,WAAW,GAAG,IAAI,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,YAAY,GAAI,2BAA2B,iBAAiB,4CA8DxE,CAAC"}

package/dist/components/carousel-dots.js

@@ -0,0 +1,55 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/utils";
+import { Button } from "./button";
+const CarouselDots = ({ api, count, className }) => {
+  const [selectedIndex, setSelectedIndex] = React.useState(0);
+  const currentIndexRef = React.useRef(selectedIndex);
+  React.useEffect(() => {
+    if (!api) {
+      return;
+    }
+    const updateIndex = () => {
+      const newIndex = api.selectedScrollSnap();
+      if (currentIndexRef.current !== newIndex) {
+        currentIndexRef.current = newIndex;
+        queueMicrotask(() => {
+          setSelectedIndex(newIndex);
+        });
+      }
+    };
+    api.on("select", updateIndex);
+    updateIndex();
+    return () => {
+      api.off("select", updateIndex);
+    };
+  }, [api]);
+  const onClick = React.useCallback(
+    (index) => {
+      api?.scrollTo(index);
+    },
+    [api]
+  );
+  return /* @__PURE__ */ jsx("div", { className: cn("flex items-center justify-center gap-2", className), children: Array.from({ length: count }).map((_, index) => /* @__PURE__ */ jsx(
+    Button,
+    {
+      "aria-current": selectedIndex === index ? "true" : void 0,
+      "aria-label": `Go to slide ${index + 1}`,
+      border: true,
+      borderRadius: "full",
+      className: cn(
+        "size-2 transition-all duration-300 2xl:size-3",
+        selectedIndex === index ? "hover:!bg-pink-500 border-pink-500 bg-pink-500 hover:border-pink-500 dark:border-pink-500 dark:bg-pink-500 dark:hover:border-pink-500 dark:hover:bg-pink-500" : "hover:!bg-gray-300 dark:hover:!bg-gray-600 border-gray-300 bg-gray-300 dark:border-gray-600 dark:bg-gray-600 dark:hover:border-gray-600"
+      ),
+      icon: true,
+      onClick: () => onClick(index),
+      size: "sm",
+      variant: "bold"
+    },
+    index
+  )) });
+};
+export {
+  CarouselDots
+};
+//# sourceMappingURL=carousel-dots.js.map

package/dist/components/carousel-dots.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/carousel-dots.tsx"],
+  "sourcesContent": ["import * as React from \"react\";\n\nimport { cn } from \"../lib/utils\";\nimport { Button } from \"./button\";\n\nimport type { CarouselApi } from \"./carousel\";\n\ninterface CarouselDotsProps {\n  api: CarouselApi | null;\n  count: number;\n  className?: string;\n}\n\nexport const CarouselDots = ({ api, count, className }: CarouselDotsProps) => {\n  const [selectedIndex, setSelectedIndex] = React.useState(0);\n  const currentIndexRef = React.useRef(selectedIndex);\n\n  React.useEffect(() => {\n    if (!api) {\n      return;\n    }\n\n    const updateIndex = () => {\n      const newIndex = api.selectedScrollSnap();\n\n      if (currentIndexRef.current !== newIndex) {\n        currentIndexRef.current = newIndex;\n        // Schedule state update outside of useEffect\n        queueMicrotask(() => {\n          setSelectedIndex(newIndex);\n        });\n      }\n    };\n\n    // Subscribe to select events\n    api.on(\"select\", updateIndex);\n    // Initial update\n    updateIndex();\n\n    // Cleanup\n    return () => {\n      api.off(\"select\", updateIndex);\n    };\n  }, [api]);\n\n  const onClick = React.useCallback(\n    (index: number) => {\n      api?.scrollTo(index);\n    },\n    [api]\n  );\n\n  return (\n    <div className={cn(\"flex items-center justify-center gap-2\", className)}>\n      {Array.from({ length: count }).map((_, index) => (\n        <Button\n          aria-current={selectedIndex === index ? \"true\" : undefined}\n          aria-label={`Go to slide ${index + 1}`}\n          border\n          borderRadius=\"full\"\n          className={cn(\n            \"size-2 transition-all duration-300 2xl:size-3\",\n            selectedIndex === index\n              ? \"hover:!bg-pink-500 border-pink-500 bg-pink-500 hover:border-pink-500 dark:border-pink-500 dark:bg-pink-500 dark:hover:border-pink-500 dark:hover:bg-pink-500\"\n              : \"hover:!bg-gray-300 dark:hover:!bg-gray-600 border-gray-300 bg-gray-300 dark:border-gray-600 dark:bg-gray-600 dark:hover:border-gray-600\"\n          )}\n          icon\n          key={index}\n          onClick={() => onClick(index)}\n          size=\"sm\"\n          variant=\"bold\"\n        />\n      ))}\n    </div>\n  );\n};\n"],
+  "mappings": "AAuDQ;AAvDR,YAAY,WAAW;AAEvB,SAAS,UAAU;AACnB,SAAS,cAAc;AAUhB,MAAM,eAAe,CAAC,EAAE,KAAK,OAAO,UAAU,MAAyB;AAC5E,QAAM,CAAC,eAAe,gBAAgB,IAAI,MAAM,SAAS,CAAC;AAC1D,QAAM,kBAAkB,MAAM,OAAO,aAAa;AAElD,QAAM,UAAU,MAAM;AACpB,QAAI,CAAC,KAAK;AACR;AAAA,IACF;AAEA,UAAM,cAAc,MAAM;AACxB,YAAM,WAAW,IAAI,mBAAmB;AAExC,UAAI,gBAAgB,YAAY,UAAU;AACxC,wBAAgB,UAAU;AAE1B,uBAAe,MAAM;AACnB,2BAAiB,QAAQ;AAAA,QAC3B,CAAC;AAAA,MACH;AAAA,IACF;AAGA,QAAI,GAAG,UAAU,WAAW;AAE5B,gBAAY;AAGZ,WAAO,MAAM;AACX,UAAI,IAAI,UAAU,WAAW;AAAA,IAC/B;AAAA,EACF,GAAG,CAAC,GAAG,CAAC;AAER,QAAM,UAAU,MAAM;AAAA,IACpB,CAAC,UAAkB;AACjB,WAAK,SAAS,KAAK;AAAA,IACrB;AAAA,IACA,CAAC,GAAG;AAAA,EACN;AAEA,SACE,oBAAC,SAAI,WAAW,GAAG,0CAA0C,SAAS,GACnE,gBAAM,KAAK,EAAE,QAAQ,MAAM,CAAC,EAAE,IAAI,CAAC,GAAG,UACrC;AAAA,IAAC;AAAA;AAAA,MACC,gBAAc,kBAAkB,QAAQ,SAAS;AAAA,MACjD,cAAY,eAAe,QAAQ,CAAC;AAAA,MACpC,QAAM;AAAA,MACN,cAAa;AAAA,MACb,WAAW;AAAA,QACT;AAAA,QACA,kBAAkB,QACd,iKACA;AAAA,MACN;AAAA,MACA,MAAI;AAAA,MAEJ,SAAS,MAAM,QAAQ,KAAK;AAAA,MAC5B,MAAK;AAAA,MACL,SAAQ;AAAA;AAAA,IAHH;AAAA,EAIP,CACD,GACH;AAEJ;",
+  "names": []
+}

package/dist/components/carousel.d.ts

@@ -0,0 +1,33 @@
+import useEmblaCarousel, { type UseEmblaCarouselType } from "embla-carousel-react";
+import * as React from "react";
+type CarouselApi = UseEmblaCarouselType[1];
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
+type CarouselOptions = UseCarouselParameters[0];
+type CarouselPlugin = UseCarouselParameters[1];
+interface CarouselProps {
+    opts?: CarouselOptions;
+    plugins?: CarouselPlugin;
+    orientation?: "horizontal" | "vertical";
+    setApi?: (api: CarouselApi) => void;
+}
+type CarouselContextProps = {
+    carouselRef: ReturnType<typeof useEmblaCarousel>[0];
+    api: ReturnType<typeof useEmblaCarousel>[1];
+    scrollPrev: () => void;
+    scrollNext: () => void;
+    canScrollPrev: boolean;
+    canScrollNext: boolean;
+} & CarouselProps;
+export declare function useCarousel(): CarouselContextProps;
+declare const Carousel: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & CarouselProps & React.RefAttributes<HTMLDivElement>>;
+declare const CarouselContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    containerClassName?: string;
+} & React.RefAttributes<HTMLDivElement>>;
+interface CarouselItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    useCustomStyles?: boolean;
+}
+declare const CarouselItem: React.ForwardRefExoticComponent<CarouselItemProps & React.RefAttributes<HTMLDivElement>>;
+declare const CarouselPrevious: React.ForwardRefExoticComponent<Omit<import("./button").ButtonProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const CarouselNext: React.ForwardRefExoticComponent<Omit<import("./button").ButtonProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, type CarouselApi, type CarouselProps, };
+//# sourceMappingURL=carousel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"carousel.d.ts","sourceRoot":"","sources":["../../src/components/carousel.tsx"],"names":[],"mappings":"AAAA,OAAO,gBAAgB,EAAE,EACvB,KAAK,oBAAoB,EAC1B,MAAM,sBAAsB,CAAC;AAE9B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,KAAK,WAAW,GAAG,oBAAoB,CAAC,CAAC,CAAC,CAAC;AAC3C,KAAK,qBAAqB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AACjE,KAAK,eAAe,GAAG,qBAAqB,CAAC,CAAC,CAAC,CAAC;AAChD,KAAK,cAAc,GAAG,qBAAqB,CAAC,CAAC,CAAC,CAAC;AAE/C,UAAU,aAAa;IACrB,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,WAAW,KAAK,IAAI,CAAC;CACrC;AAED,KAAK,oBAAoB,GAAG;IAC1B,WAAW,EAAE,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC;IACpD,GAAG,EAAE,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC;IAC5C,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,aAAa,EAAE,OAAO,CAAC;IACvB,aAAa,EAAE,OAAO,CAAC;CACxB,GAAG,aAAa,CAAC;AAIlB,wBAAgB,WAAW,yBAQ1B;AAED,QAAA,MAAM,QAAQ,6HAsHb,CAAC;AAIF,QAAA,MAAM,eAAe;yBAGI,MAAM;wCAqB7B,CAAC;AAIH,UAAU,iBAAkB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACtE,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,QAAA,MAAM,YAAY,0FAsBjB,CAAC;AAIF,QAAA,MAAM,gBAAgB,gKA2BpB,CAAC;AAIH,QAAA,MAAM,YAAY,gKA2BhB,CAAC;AAIH,OAAO,EACL,QAAQ,EACR,eAAe,EACf,YAAY,EACZ,YAAY,EACZ,gBAAgB,EAChB,KAAK,WAAW,EAChB,KAAK,aAAa,GACnB,CAAC"}