@next-degree/pickle-shared-js 0.13.1 → 0.13.5

package/dist/chunk-ZSNEG5J7.js

@@ -0,0 +1,263 @@
+import { cn } from './chunk-2FGZQI42.js';
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'cva';
+import { Loader2 } from 'lucide-react';
+import { forwardRef } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var Button = forwardRef(
+  ({
+    className,
+    variant,
+    size,
+    asChild = false,
+    type = "button",
+    children,
+    isLoading = false,
+    ...props
+  }, ref) => {
+    const Component = asChild ? Slot : "button";
+    return /* @__PURE__ */ jsx(
+      Component,
+      {
+        className: cn(buttonVariants({ variant, size, className, isLoading, asChild })),
+        type,
+        ref,
+        ...props,
+        children: asChild ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
+          children,
+          isLoading && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-white/30 backdrop-blur-[0.5px]", children: /* @__PURE__ */ jsx(Loader2, { className: "h-5 w-5 animate-spin text-gray-800" }) })
+        ] })
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+var buttonVariants = cva(
+  [
+    "relative",
+    "flex",
+    "items-center",
+    "justify-center",
+    "gap-2",
+    "rounded-full",
+    "font-bold",
+    "outline-2",
+    "outline-offset-2",
+    "outline-dashed",
+    "outline-transparent",
+    "overflow-hidden"
+  ],
+  {
+    variants: {
+      variant: {
+        neutral: [
+          "bg-black",
+          "text-white",
+          "hover:bg-grey-90",
+          "active:bg-grey-80",
+          "focus:outline-purple-100",
+          "disabled:text-grey-40",
+          "disabled:bg-grey-10"
+        ],
+        primary: [
+          "bg-pickle-100",
+          "text-black",
+          "hover:bg-pickle-80",
+          "active:bg-pickle-60",
+          "focus:outline-purple-100",
+          "disabled:text-grey-40",
+          "disabled:bg-grey-10"
+        ],
+        secondary: [
+          "bg-green-80",
+          "text-white",
+          "hover:bg-green-90",
+          "active:bg-green-100",
+          "focus:outline-pickle-100",
+          "disabled:text-grey-40",
+          "disabled:bg-grey-10"
+        ],
+        transparent: [
+          "text-white",
+          "hover:bg-green-80",
+          "active:bg-green-100",
+          "focus:outline-pickle-100",
+          "disabled:text-grey-40"
+        ],
+        link: [
+          "leading-tight",
+          "text-black",
+          "underline",
+          "hover:text-purple-100",
+          "focus:text-black",
+          "focus:outline-purple-100",
+          "active:text-purple-80"
+        ],
+        "outline-primary": [
+          "bg-transparent",
+          "border-2",
+          "border-pickle-100",
+          "text-pickle-100",
+          "hover:bg-pickle-100",
+          "hover:text-black",
+          "active:bg-pickle-80",
+          "active:text-black",
+          "focus:outline-purple-100",
+          "disabled:text-grey-40",
+          "disabled:border-grey-40",
+          "disabled:hover:bg-transparent",
+          "disabled:hover:text-grey-40"
+        ],
+        "outline-secondary": [
+          "bg-transparent",
+          "border-2",
+          "border-green-80",
+          "text-green-80",
+          "hover:bg-green-80",
+          "hover:text-white",
+          "active:bg-green-90",
+          "active:text-white",
+          "focus:outline-pickle-100",
+          "disabled:text-grey-40",
+          "disabled:border-grey-40",
+          "disabled:hover:bg-transparent",
+          "disabled:hover:text-grey-40"
+        ],
+        "icon-outline": [
+          "bg-transparent",
+          "text-black",
+          "hover:bg-grey-5",
+          "active:bg-grey-10",
+          "focus:outline-purple-100",
+          "disabled:text-grey-40",
+          "disabled:hover:bg-transparent",
+          "disabled:hover:text-grey-40"
+        ],
+        "icon-primary": [
+          "bg-pickle-100",
+          "text-black",
+          "hover:bg-pickle-80",
+          "active:bg-pickle-60",
+          "focus:outline-purple-100",
+          "disabled:text-grey-40",
+          "disabled:bg-grey-10"
+        ],
+        "icon-secondary": [
+          "bg-green-80",
+          "text-white",
+          "hover:bg-green-90",
+          "active:bg-green-100",
+          "focus:outline-pickle-100",
+          "disabled:text-grey-40",
+          "disabled:bg-grey-10"
+        ]
+      },
+      size: {
+        "extra-small": ["h-8", "text-xs", "px-3", "py-1"],
+        small: ["h-10", "text-sm", "px-4", "py-2"],
+        medium: ["h-12", "text-base", "px-6", "py-3"],
+        large: ["h-14", "text-lg", "px-8", "py-4"]
+      },
+      isLoading: {
+        true: ["cursor-not-allowed", "pointer-events-none"]
+      },
+      asChild: {
+        true: [],
+        false: ["cursor-pointer", "pointer-events-auto"]
+      }
+    },
+    defaultVariants: {
+      variant: "neutral",
+      size: "medium",
+      isLoading: false,
+      asChild: false
+    },
+    compoundVariants: [
+      {
+        variant: "link",
+        size: "extra-small",
+        class: ["h-3", "text-xs", "p-0"]
+      },
+      {
+        variant: "link",
+        size: "small",
+        class: ["h-3", "text-xs", "p-0"]
+      },
+      {
+        variant: "link",
+        size: "medium",
+        class: ["h-4", "text-sm", "p-0"]
+      },
+      {
+        variant: "link",
+        size: "large",
+        class: ["h-6", "text-base", "p-0"]
+      },
+      {
+        variant: "icon-outline",
+        size: "extra-small",
+        class: ["h-8", "w-8", "p-1.5", "[&>svg]:w-5", "[&>svg]:h-5"]
+      },
+      {
+        variant: "icon-outline",
+        size: "small",
+        class: ["h-10", "w-10", "p-2", "[&>svg]:w-6", "[&>svg]:h-6"]
+      },
+      {
+        variant: "icon-outline",
+        size: "medium",
+        class: ["h-12", "w-12", "p-2.5", "[&>svg]:w-7", "[&>svg]:h-7"]
+      },
+      {
+        variant: "icon-outline",
+        size: "large",
+        class: ["h-14", "w-14", "p-3", "[&>svg]:w-8", "[&>svg]:h-8"]
+      },
+      {
+        variant: "icon-primary",
+        size: "extra-small",
+        class: ["h-8", "w-8", "p-1.5", "[&>svg]:w-5", "[&>svg]:h-5"]
+      },
+      {
+        variant: "icon-primary",
+        size: "small",
+        class: ["h-10", "w-10", "p-2", "[&>svg]:w-6", "[&>svg]:h-6"]
+      },
+      {
+        variant: "icon-primary",
+        size: "medium",
+        class: ["h-12", "w-12", "p-2.5", "[&>svg]:w-7", "[&>svg]:h-7"]
+      },
+      {
+        variant: "icon-primary",
+        size: "large",
+        class: ["h-14", "w-14", "p-3", "[&>svg]:w-8", "[&>svg]:h-8"]
+      },
+      {
+        variant: "icon-secondary",
+        size: "extra-small",
+        class: ["h-8", "w-8", "p-1.5", "[&>svg]:w-5", "[&>svg]:h-5"]
+      },
+      {
+        variant: "icon-secondary",
+        size: "small",
+        class: ["h-10", "w-10", "p-2", "[&>svg]:w-6", "[&>svg]:h-6"]
+      },
+      {
+        variant: "icon-secondary",
+        size: "medium",
+        class: ["h-12", "w-12", "p-2.5", "[&>svg]:w-7", "[&>svg]:h-7"]
+      },
+      {
+        variant: "icon-secondary",
+        size: "large",
+        class: ["h-14", "w-14", "p-3", "[&>svg]:w-8", "[&>svg]:h-8"]
+      }
+    ]
+  }
+);
+
+export { Button, buttonVariants };
+//# sourceMappingURL=chunk-ZSNEG5J7.js.map
+//# sourceMappingURL=chunk-ZSNEG5J7.js.map

package/dist/chunk-ZSNEG5J7.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ui/Button.tsx"],"names":[],"mappings":"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","file":"chunk-ZSNEG5J7.js","sourcesContent":["'use client'\n\nimport { Slot } from '@radix-ui/react-slot'\nimport { cva, type VariantProps } from 'cva'\nimport { Loader2 } from 'lucide-react'\nimport React, { forwardRef } from 'react'\n\nimport { cn } from '@/lib/utils'\n\n/**\n * Props for the Button component.\n * @interface ButtonProps\n * @extends {React.ButtonHTMLAttributes<HTMLButtonElement>}\n * @extends {VariantProps<typeof buttonVariants>}\n */\ninterface ButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {}\n\n/**\n * A versatile button component that supports multiple variants and sizes.\n *\n * @component\n * @example\n * ```tsx\n * // Default button\n * <Button>Click me</Button>\n *\n * // Primary variant with large size\n * <Button variant=\"primary\" size=\"lg\">Large Button</Button>\n *\n * // As a link\n * <Button asChild>\n *   <a href=\"/somewhere\">Go somewhere</a>\n * </Button>\n * ```\n */\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      className,\n      variant,\n      size,\n      asChild = false,\n      type = 'button',\n      children,\n      isLoading = false,\n      ...props\n    },\n    ref\n  ) => {\n    const Component = asChild ? Slot : 'button'\n\n    return (\n      <Component\n        className={cn(buttonVariants({ variant, size, className, isLoading, asChild }))}\n        type={type}\n        ref={ref}\n        {...props}\n      >\n        {asChild ? (\n          children\n        ) : (\n          <>\n            {children}\n            {isLoading && (\n              <div className=\"absolute inset-0 flex items-center justify-center bg-white/30 backdrop-blur-[0.5px]\">\n                <Loader2 className=\"h-5 w-5 animate-spin text-gray-800\" />\n              </div>\n            )}\n          </>\n        )}\n      </Component>\n    )\n  }\n)\nButton.displayName = 'Button'\n\n/**\n * Variant definitions for the Button component using class-variance-authority.\n * Provides consistent styling across different button variations.\n */\nexport const buttonVariants = cva(\n  [\n    'relative',\n    'flex',\n    'items-center',\n    'justify-center',\n    'gap-2',\n    'rounded-full',\n    'font-bold',\n    'outline-2',\n    'outline-offset-2',\n    'outline-dashed',\n    'outline-transparent',\n    'overflow-hidden',\n  ],\n  {\n    variants: {\n      variant: {\n        neutral: [\n          'bg-black',\n          'text-white',\n          'hover:bg-grey-90',\n          'active:bg-grey-80',\n          'focus:outline-purple-100',\n          'disabled:text-grey-40',\n          'disabled:bg-grey-10',\n        ],\n        primary: [\n          'bg-pickle-100',\n          'text-black',\n          'hover:bg-pickle-80',\n          'active:bg-pickle-60',\n          'focus:outline-purple-100',\n          'disabled:text-grey-40',\n          'disabled:bg-grey-10',\n        ],\n        secondary: [\n          'bg-green-80',\n          'text-white',\n          'hover:bg-green-90',\n          'active:bg-green-100',\n          'focus:outline-pickle-100',\n          'disabled:text-grey-40',\n          'disabled:bg-grey-10',\n        ],\n        transparent: [\n          'text-white',\n          'hover:bg-green-80',\n          'active:bg-green-100',\n          'focus:outline-pickle-100',\n          'disabled:text-grey-40',\n        ],\n        link: [\n          'leading-tight',\n          'text-black',\n          'underline',\n          'hover:text-purple-100',\n          'focus:text-black',\n          'focus:outline-purple-100',\n          'active:text-purple-80',\n        ],\n        'outline-primary': [\n          'bg-transparent',\n          'border-2',\n          'border-pickle-100',\n          'text-pickle-100',\n          'hover:bg-pickle-100',\n          'hover:text-black',\n          'active:bg-pickle-80',\n          'active:text-black',\n          'focus:outline-purple-100',\n          'disabled:text-grey-40',\n          'disabled:border-grey-40',\n          'disabled:hover:bg-transparent',\n          'disabled:hover:text-grey-40',\n        ],\n        'outline-secondary': [\n          'bg-transparent',\n          'border-2',\n          'border-green-80',\n          'text-green-80',\n          'hover:bg-green-80',\n          'hover:text-white',\n          'active:bg-green-90',\n          'active:text-white',\n          'focus:outline-pickle-100',\n          'disabled:text-grey-40',\n          'disabled:border-grey-40',\n          'disabled:hover:bg-transparent',\n          'disabled:hover:text-grey-40',\n        ],\n        'icon-outline': [\n          'bg-transparent',\n          'text-black',\n          'hover:bg-grey-5',\n          'active:bg-grey-10',\n          'focus:outline-purple-100',\n          'disabled:text-grey-40',\n          'disabled:hover:bg-transparent',\n          'disabled:hover:text-grey-40',\n        ],\n        'icon-primary': [\n          'bg-pickle-100',\n          'text-black',\n          'hover:bg-pickle-80',\n          'active:bg-pickle-60',\n          'focus:outline-purple-100',\n          'disabled:text-grey-40',\n          'disabled:bg-grey-10',\n        ],\n        'icon-secondary': [\n          'bg-green-80',\n          'text-white',\n          'hover:bg-green-90',\n          'active:bg-green-100',\n          'focus:outline-pickle-100',\n          'disabled:text-grey-40',\n          'disabled:bg-grey-10',\n        ],\n      },\n      size: {\n        'extra-small': ['h-8', 'text-xs', 'px-3', 'py-1'],\n        small: ['h-10', 'text-sm', 'px-4', 'py-2'],\n        medium: ['h-12', 'text-base', 'px-6', 'py-3'],\n        large: ['h-14', 'text-lg', 'px-8', 'py-4'],\n      },\n      isLoading: {\n        true: ['cursor-not-allowed', 'pointer-events-none'],\n      },\n      asChild: {\n        true: [],\n        false: ['cursor-pointer', 'pointer-events-auto'],\n      },\n    },\n    defaultVariants: {\n      variant: 'neutral',\n      size: 'medium',\n      isLoading: false,\n      asChild: false,\n    },\n    compoundVariants: [\n      {\n        variant: 'link',\n        size: 'extra-small',\n        class: ['h-3', 'text-xs', 'p-0'],\n      },\n      {\n        variant: 'link',\n        size: 'small',\n        class: ['h-3', 'text-xs', 'p-0'],\n      },\n      {\n        variant: 'link',\n        size: 'medium',\n        class: ['h-4', 'text-sm', 'p-0'],\n      },\n      {\n        variant: 'link',\n        size: 'large',\n        class: ['h-6', 'text-base', 'p-0'],\n      },\n      {\n        variant: 'icon-outline',\n        size: 'extra-small',\n        class: ['h-8', 'w-8', 'p-1.5', '[&>svg]:w-5', '[&>svg]:h-5'],\n      },\n      {\n        variant: 'icon-outline',\n        size: 'small',\n        class: ['h-10', 'w-10', 'p-2', '[&>svg]:w-6', '[&>svg]:h-6'],\n      },\n      {\n        variant: 'icon-outline',\n        size: 'medium',\n        class: ['h-12', 'w-12', 'p-2.5', '[&>svg]:w-7', '[&>svg]:h-7'],\n      },\n      {\n        variant: 'icon-outline',\n        size: 'large',\n        class: ['h-14', 'w-14', 'p-3', '[&>svg]:w-8', '[&>svg]:h-8'],\n      },\n      {\n        variant: 'icon-primary',\n        size: 'extra-small',\n        class: ['h-8', 'w-8', 'p-1.5', '[&>svg]:w-5', '[&>svg]:h-5'],\n      },\n      {\n        variant: 'icon-primary',\n        size: 'small',\n        class: ['h-10', 'w-10', 'p-2', '[&>svg]:w-6', '[&>svg]:h-6'],\n      },\n      {\n        variant: 'icon-primary',\n        size: 'medium',\n        class: ['h-12', 'w-12', 'p-2.5', '[&>svg]:w-7', '[&>svg]:h-7'],\n      },\n      {\n        variant: 'icon-primary',\n        size: 'large',\n        class: ['h-14', 'w-14', 'p-3', '[&>svg]:w-8', '[&>svg]:h-8'],\n      },\n      {\n        variant: 'icon-secondary',\n        size: 'extra-small',\n        class: ['h-8', 'w-8', 'p-1.5', '[&>svg]:w-5', '[&>svg]:h-5'],\n      },\n      {\n        variant: 'icon-secondary',\n        size: 'small',\n        class: ['h-10', 'w-10', 'p-2', '[&>svg]:w-6', '[&>svg]:h-6'],\n      },\n      {\n        variant: 'icon-secondary',\n        size: 'medium',\n        class: ['h-12', 'w-12', 'p-2.5', '[&>svg]:w-7', '[&>svg]:h-7'],\n      },\n      {\n        variant: 'icon-secondary',\n        size: 'large',\n        class: ['h-14', 'w-14', 'p-3', '[&>svg]:w-8', '[&>svg]:h-8'],\n      },\n    ],\n  }\n)\n"]}