@oneplatformdev/ui 0.1.99-beta.5 → 0.1.99-beta.51

package/ButtonIcon/ButtonIcon.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonIcon.stories.js","sources":["../../src/ButtonIcon/ButtonIcon.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from '@storybook/react';\n\nimport { ButtonIcon } from './ButtonIcon';\nimport type { ButtonIconProps } from './ButtonIcon.types';\nimport React from 'react';\nimport { FileDownIcon, PlusIcon, Trash2Icon } from 'lucide-react'\nimport { DashedWrapper } from \"../../.storybook/Wrappers\";\nimport { ButtonProps } from \"../Button\";\n\nconst Template = (props: ButtonIconProps) => <ButtonIcon {...props}/>\nTemplate.args = {\n  onClick: { action: (e: React.MouseEvent<HTMLButtonElement>) => e },\n};\n\nconst States = (props: ButtonIconProps) => (\n  <div\n    style={{\n      position: 'relative',\n      display: 'flex',\n      flexDirection: 'column',\n      gap: '16px',\n    }}\n  >\n    {[ 'default', 'hover', 'focus', 'active', 'disabled' ]\n      .map((state) => (\n        <ButtonIcon\n          key={state}\n          id={state}\n          {...props}\n          disabled={state === 'disabled' || props.disabled}\n        >\n          {props.children}\n        </ButtonIcon>\n      ))}\n  </div>\n);\n\nconst StateRender = (props: ButtonIconProps) => (\n  <div className='flex'>\n    <DashedWrapper>\n      <States {...props} variant='contained'/>\n      <States {...props} variant='outlined'/>\n      <States {...props} variant='ghost'/>\n    </DashedWrapper>\n    <DashedWrapper>\n      <States {...props} variant='contained' rounded/>\n      <States {...props} variant='outlined' rounded/>\n      <States {...props} variant='ghost' rounded/>\n    </DashedWrapper>\n  </div>\n);\n\nconst variants: ButtonIconProps['variant'][] = [ 'contained', 'outlined', 'ghost' ]\nconst colors: ButtonIconProps['color'][] = [ 'primary', 'secondary', 'error' ]\nconst sizes: ButtonIconProps['size'][] = [ 'xs', 'sm', 'md', 'lg' ]\n\nconst variant_default: ButtonProps['variant'] = 'contained';\nconst color_default: ButtonProps['color'] = 'primary';\nconst size_default: ButtonProps['size'] = 'lg';\n\nconst iconMap = {\n  'undefined': undefined,\n  \"<PlusIcon />\": <PlusIcon/>,\n  \"<Trash2Icon />\": <Trash2Icon/>,\n  \"<FileDownIcon />\": <FileDownIcon/>,\n  PlusIcon: PlusIcon,\n  Trash2Icon: Trash2Icon,\n  FileDownIcon: FileDownIcon,\n};\n\nconst iconChildrenMap = {\n  \"<PlusIcon />\": <PlusIcon/>,\n  \"<Trash2Icon />\": <Trash2Icon/>,\n  \"<FileDownIcon />\": <FileDownIcon/>,\n};\n\nconst meta = {\n  title: 'ButtonIcon',\n  component: ButtonIcon,\n  render: Template,\n  args: {\n    asChild: false,\n    disabled: false,\n    loading: false,\n    rounded: false,\n    variant: variant_default,\n    color: color_default,\n    size: size_default,\n    children: <PlusIcon/>,\n    icon: undefined,\n    message: undefined,\n    title: undefined,\n  },\n  argTypes: {\n    tooltip: {\n      name: 'tooltip',\n      description: 'ButtonIcon tooltip from ButtonIconProps [deprecated, use title and message instead]',\n      control: false,\n    },\n    asChild: {\n      name: 'asChild',\n      description: 'ButtonIcon asChild from ButtonIconProps [boolean]',\n      control: false\n    },\n    variant: {\n      name: 'variant',\n      description: 'ButtonIcon variant',\n      defaultValue: variants[0],\n      options: variants,\n      control: { type: 'inline-radio', },\n    },\n    color: {\n      name: 'color',\n      description: 'ButtonIcon color',\n      defaultValue: colors[0],\n      options: colors,\n      control: { type: 'inline-radio' },\n    },\n    size: {\n      name: 'size',\n      description: 'ButtonIcon size',\n      defaultValue: sizes[0],\n      options: sizes,\n      control: { type: 'inline-radio' },\n    },\n    title: {\n      name: 'title',\n      description: \"ButtonIcon tooltip title from HTMLAttributes<HTMLButtonElement> [string only]\",\n      control: { type: 'text' },\n    },\n    message: {\n      name: 'message',\n      description: 'ButtonIcon tooltip message from ButtonProps [ReactNode]',\n      control: { type: \"object\" },\n    },\n    disabled: {\n      name: 'disabled',\n      description: 'ButtonIcon disabled',\n      control: { type: 'boolean' }\n    },\n    rounded: {\n      name: 'rounded',\n      description: 'ButtonIcon rounded',\n      control: { type: 'boolean' }\n    },\n    loading: {\n      name: 'loading',\n      description: 'ButtonIcon loading',\n      control: { type: 'boolean' }\n    },\n    icon: {\n      name: 'icon',\n      description: 'ButtonIcon icon from ButtonIconProps [`undefined` | `ComponentType<SVGProps<SVGSVGElement>>` | `ReactElement<SVGProps<SVGSVGElement>>`]',\n      options: Object.keys(iconMap),\n      mapping: iconMap,\n      control: { type: 'inline-radio' },\n    },\n    children: {\n      name: 'children',\n      description: 'ButtonIcon children from ButtonIconProps [`ReactNode`]',\n      options: Object.keys(iconChildrenMap),\n      mapping: iconChildrenMap,\n      control: { type: 'inline-radio' },\n    },\n  },\n  parameters: {\n    pseudo: {\n      hover: '#hover',\n      focus: '#focus',\n      active: '#active',\n      disabled: '#disabled',\n    },\n  }\n} satisfies Meta<typeof ButtonIcon>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\nconst args: Story['args'] = {\n  asChild: false,\n  disabled: false,\n  loading: false,\n  rounded: false,\n  children: <PlusIcon/>,\n}\n\nexport const Default: Story = {\n  args: {\n    ...meta.args,\n    icon: FileDownIcon,\n    children: undefined,\n  }\n};\n\nexport const Primary: Story = {\n  args: {\n    ...args,\n    color: 'primary',\n    size: 'lg',\n  },\n  argTypes: {\n    variant: { control: false },\n    color: { control: false },\n  },\n  render: StateRender,\n};\nPrimary.parameters = {\n  controls: { exclude: [ 'variant', 'color' ] },\n}\n\nexport const Secondary: Story = {\n  args: {\n    ...args,\n    color: 'secondary',\n    size: 'lg',\n  },\n  argTypes: {\n    variant: { control: false },\n    color: { control: false },\n  },\n  render: StateRender,\n};\nSecondary.parameters = {\n  controls: { exclude: [ 'variant', 'color' ] },\n}\n\nexport const Error: Story = {\n  args: {\n    ...args,\n    color: 'error',\n    size: 'lg',\n  },\n  argTypes: {\n    variant: { control: false },\n    color: { control: false },\n  },\n  render: StateRender,\n};\nError.parameters = {\n  controls: { exclude: [ 'variant', 'color' ] },\n}\n"],"names":["Template","props","jsx","ButtonIcon","States","state","StateRender","jsxs","DashedWrapper","variants","colors","sizes","variant_default","color_default","size_default","iconMap","PlusIcon","Trash2Icon","FileDownIcon","iconChildrenMap","meta","args","Default","Primary","Secondary","Error"],"mappings":"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"}
+{"version":3,"file":"ButtonIcon.stories.js","sources":["../../src/ButtonIcon/ButtonIcon.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from '@storybook/react';\n\nimport { ButtonIcon } from './ButtonIcon';\nimport type { ButtonIconProps } from './ButtonIcon.types';\nimport React from 'react';\nimport { FileDownIcon, PlusIcon, Trash2Icon, MessageCircleMoreIcon } from 'lucide-react'\nimport { DashedWrapper } from \"../../.storybook/Wrappers\";\nimport { ButtonProps } from \"../Button\";\n\nconst Template = (props: ButtonIconProps) => <ButtonIcon {...props}/>\nTemplate.args = {\n  onClick: { action: (e: React.MouseEvent<HTMLButtonElement>) => e },\n};\n\nconst States = (props: ButtonIconProps) => (\n  <div\n    style={{\n      position: 'relative',\n      display: 'flex',\n      flexDirection: 'column',\n      gap: '16px',\n    }}\n  >\n    {[ 'default', 'hover', 'focus', 'active', 'disabled' ]\n      .map((state) => (\n        <ButtonIcon\n          key={state}\n          id={state}\n          {...props}\n          disabled={state === 'disabled' || props.disabled}\n        >\n          {props.children}\n        </ButtonIcon>\n      ))}\n  </div>\n);\n\nconst StateRender = (props: ButtonIconProps) => (\n  <div className='flex'>\n    <DashedWrapper>\n      <States {...props} variant='contained'/>\n      <States {...props} variant='outlined'/>\n      <States {...props} variant='ghost'/>\n    </DashedWrapper>\n    <DashedWrapper>\n      <States {...props} variant='contained' rounded/>\n      <States {...props} variant='outlined' rounded/>\n      <States {...props} variant='ghost' rounded/>\n    </DashedWrapper>\n  </div>\n);\n\nconst variants: ButtonIconProps['variant'][] = [ 'contained', 'outlined', 'ghost' ]\nconst colors: ButtonIconProps['color'][] = [ 'primary', 'secondary', 'error' ]\nconst sizes: ButtonIconProps['size'][] = [ 'xs', 'sm', 'md', 'lg' ]\n\nconst variant_default: ButtonProps['variant'] = 'contained';\nconst color_default: ButtonProps['color'] = 'primary';\nconst size_default: ButtonProps['size'] = 'lg';\n\nconst iconMap = {\n  'undefined': undefined,\n  \"<PlusIcon />\": <PlusIcon/>,\n  \"<Trash2Icon />\": <Trash2Icon/>,\n  \"<FileDownIcon />\": <FileDownIcon/>,\n  PlusIcon: PlusIcon,\n  Trash2Icon: Trash2Icon,\n  FileDownIcon: FileDownIcon,\n};\n\nconst iconChildrenMap = {\n  \"<PlusIcon />\": <PlusIcon/>,\n  \"<Trash2Icon />\": <Trash2Icon/>,\n  \"<FileDownIcon />\": <FileDownIcon/>,\n};\n\nconst meta = {\n  title: 'ButtonIcon',\n  component: ButtonIcon,\n  render: Template,\n  args: {\n    asChild: false,\n    disabled: false,\n    loading: false,\n    rounded: false,\n    variant: variant_default,\n    color: color_default,\n    size: size_default,\n    children: <PlusIcon/>,\n    icon: undefined,\n    message: undefined,\n    title: undefined,\n  },\n  argTypes: {\n    tooltip: {\n      name: 'tooltip',\n      description: 'ButtonIcon tooltip from ButtonIconProps [deprecated, use title and message instead]',\n      control: false,\n    },\n    asChild: {\n      name: 'asChild',\n      description: 'ButtonIcon asChild from ButtonIconProps [boolean]',\n      control: false\n    },\n    variant: {\n      name: 'variant',\n      description: 'ButtonIcon variant',\n      defaultValue: variants[0],\n      options: variants,\n      control: { type: 'inline-radio', },\n    },\n    color: {\n      name: 'color',\n      description: 'ButtonIcon color',\n      defaultValue: colors[0],\n      options: colors,\n      control: { type: 'inline-radio' },\n    },\n    size: {\n      name: 'size',\n      description: 'ButtonIcon size',\n      defaultValue: sizes[0],\n      options: sizes,\n      control: { type: 'inline-radio' },\n    },\n    title: {\n      name: 'title',\n      description: \"ButtonIcon tooltip title from HTMLAttributes<HTMLButtonElement> [string only]\",\n      control: { type: 'text' },\n    },\n    message: {\n      name: 'message',\n      description: 'ButtonIcon tooltip message from ButtonProps [ReactNode]',\n      control: { type: \"object\" },\n    },\n    disabled: {\n      name: 'disabled',\n      description: 'ButtonIcon disabled',\n      control: { type: 'boolean' }\n    },\n    rounded: {\n      name: 'rounded',\n      description: 'ButtonIcon rounded',\n      control: { type: 'boolean' }\n    },\n    loading: {\n      name: 'loading',\n      description: 'ButtonIcon loading',\n      control: { type: 'boolean' }\n    },\n    icon: {\n      name: 'icon',\n      description: 'ButtonIcon icon from ButtonIconProps [`undefined` | `ComponentType<SVGProps<SVGSVGElement>>` | `ReactElement<SVGProps<SVGSVGElement>>`]',\n      options: Object.keys(iconMap),\n      mapping: iconMap,\n      control: { type: 'inline-radio' },\n    },\n    children: {\n      name: 'children',\n      description: 'ButtonIcon children from ButtonIconProps [`ReactNode`]',\n      options: Object.keys(iconChildrenMap),\n      mapping: iconChildrenMap,\n      control: { type: 'inline-radio' },\n    },\n    counter: {\n      name: 'counter',\n      description: 'ButtonIcon counter from ButtonIconProps [`number` | `ButtonCounterBadgeReaderOptions`]',\n      control: { type: 'number' },\n    }\n  },\n  parameters: {\n    pseudo: {\n      hover: '#hover',\n      focus: '#focus',\n      active: '#active',\n      disabled: '#disabled',\n    },\n  }\n} satisfies Meta<typeof ButtonIcon>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\nconst args: Story['args'] = {\n  asChild: false,\n  disabled: false,\n  loading: false,\n  rounded: false,\n  children: <PlusIcon/>,\n}\n\nexport const Default: Story = {\n  args: {\n    ...meta.args,\n    icon: FileDownIcon,\n    children: undefined,\n  }\n};\n\nexport const Counter: Story = {\n  render: (props) => (\n    <div className='flex flex-col gap-3'>\n      {sizes.map((size) => (\n        <DashedWrapper key={size}>\n          <ButtonIcon {...props} size={size} message='from counter'/>\n          <ButtonIcon {...props} size={size} counter={0} message='count=0'/>\n          <ButtonIcon {...props} size={size} counter={9} message='count=9'/>\n          <ButtonIcon {...props} size={size} counter={99} message='count=99'/>\n          <ButtonIcon {...props} size={size} counter={999} message='count=999'/>\n        </DashedWrapper>\n      ))}\n    </div>\n  ),\n  args: {\n    ...meta.args,\n    variant: 'ghost',\n    color: 'secondary',\n    icon: MessageCircleMoreIcon,\n    counter: 12,\n    title: 'counter',\n  },\n  parameters: {\n    controls: {\n      include: ['counter', 'variant', 'color', 'disabled', 'loading', 'rounded' ],\n    },\n  },\n};\n\nexport const Primary: Story = {\n  args: {\n    ...args,\n    color: 'primary',\n    size: 'lg',\n  },\n  argTypes: {\n    variant: { control: false },\n    color: { control: false },\n  },\n  render: StateRender,\n};\nPrimary.parameters = {\n  controls: { exclude: [ 'variant', 'color' ] },\n}\n\nexport const Secondary: Story = {\n  args: {\n    ...args,\n    color: 'secondary',\n    size: 'lg',\n  },\n  argTypes: {\n    variant: { control: false },\n    color: { control: false },\n  },\n  render: StateRender,\n};\nSecondary.parameters = {\n  controls: { exclude: [ 'variant', 'color' ] },\n}\n\nexport const Error: Story = {\n  args: {\n    ...args,\n    color: 'error',\n    size: 'lg',\n  },\n  argTypes: {\n    variant: { control: false },\n    color: { control: false },\n  },\n  render: StateRender,\n};\nError.parameters = {\n  controls: { exclude: [ 'variant', 'color' ] },\n}\n"],"names":["Template","props","jsx","ButtonIcon","States","state","StateRender","jsxs","DashedWrapper","variants","colors","sizes","variant_default","color_default","size_default","iconMap","PlusIcon","Trash2Icon","FileDownIcon","iconChildrenMap","meta","args","Default","Counter","size","MessageCircleMoreIcon","Primary","Secondary","Error"],"mappings":"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"}

package/ButtonIcon/buttonIconVariants.d.ts

@@ -1,7 +1,7 @@
 import { VariantProps } from 'class-variance-authority';
 export declare const buttonIconVariants: (props?: ({
     variant?: "none" | "contained" | "outlined" | "ghost" | null | undefined;
-    color?: "secondary" | "primary" | "error" | null | undefined;
+    color?: "primary" | "secondary" | "error" | null | undefined;
     size?: "xs" | "sm" | "md" | "lg" | null | undefined;
     rounded?: boolean | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/ButtonIcon/buttonIconVariants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"buttonIconVariants.d.ts","sourceRoot":"","sources":["../../src/ButtonIcon/buttonIconVariants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGlE,eAAO,MAAM,kBAAkB;;;;;8EAsJ9B,CAAA;AAED,MAAM,MAAM,uBAAuB,GAAG,YAAY,CAAC,OAAO,kBAAkB,CAAC,CAAC"}
+{"version":3,"file":"buttonIconVariants.d.ts","sourceRoot":"","sources":["../../src/ButtonIcon/buttonIconVariants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGlE,eAAO,MAAM,kBAAkB;;;;;8EAuJ9B,CAAA;AAED,MAAM,MAAM,uBAAuB,GAAG,YAAY,CAAC,OAAO,kBAAkB,CAAC,CAAC"}

package/ButtonIcon/buttonIconVariants.js

@@ -2,12 +2,13 @@ import { cva as r } from "class-variance-authority";
 import { cn as e } from "@oneplatformdev/utils";
 const a = r(
   [
-    "inline-flex items-center justify-center",
+    "inline-flex items-center justify-center relative",
     "whitespace-nowrap font-medium aspect-square",
     "cursor-pointer box-border",
     "transition-colors focus-visible:outline-hidden focus-visible:ring-none focus-visible:ring-transparent",
     "disabled:pointer-events-none disabled:cursor-default",
-    "[&_svg]:pointer-events-none [&_svg]:shrink-0"
+    "[&_svg]:pointer-events-none [&_svg]:shrink-0",
+    "transition-transform duration-200 [&_svg]:transition-transform [&_svg]:duration-200"
   ],
   {
     variants: {
@@ -23,10 +24,10 @@ const a = r(
         error: ""
       },
       size: {
-        xs: "w-4 h-4 size-4 rounded-lg p-0 [&_svg]:size-3",
-        sm: "w-6 h-6 size-6 rounded-lg p-0 [&_svg]:size-4",
+        xs: "w-4 h-4 size-4 rounded-sm p-0 [&_svg]:size-3",
+        sm: "w-6 h-6 size-6 rounded-md p-0 [&_svg]:size-4",
         md: "w-8 h-8 size-8 rounded-lg p-1 [&_svg]:size-5",
-        lg: "w-10 h-10 size-10 rounded-lg p-2 [&_svg]:size-6"
+        lg: "w-10 h-10 size-10 rounded-lg p-1 [&_svg]:size-6"
       },
       rounded: {
         true: "rounded-full",
@@ -138,7 +139,7 @@ const a = r(
         variant: "ghost",
         rounded: !0,
         className: e(
-          "shadow-[-1px_-1px_10px_rgba(6,8,13,0.06),_1px_1px_10px_rgba(6,8,13,0.06)]",
+          "bg-[#FCFCFC] shadow-[-1px_-1px_10px_rgba(6,8,13,0.06),_1px_1px_10px_rgba(6,8,13,0.06)]",
           "disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]"
         )
       }

package/ButtonIcon/buttonIconVariants.js.map

@@ -1 +1 @@
-{"version":3,"file":"buttonIconVariants.js","sources":["../../src/ButtonIcon/buttonIconVariants.ts"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from \"@oneplatformdev/utils\";\n\nexport const buttonIconVariants = cva(\n  [\n    \"inline-flex items-center justify-center\",\n    'whitespace-nowrap font-medium aspect-square',\n    'cursor-pointer box-border',\n    \"transition-colors focus-visible:outline-hidden focus-visible:ring-none focus-visible:ring-transparent\",\n    \"disabled:pointer-events-none disabled:cursor-default\",\n    \"[&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  ],\n  {\n    variants: {\n      variant: {\n        none: '',\n        contained: '',\n        outlined: '',\n        ghost: \"\",\n      },\n      color: {\n        primary: \"\",\n        secondary: \"\",\n        error: \"\"\n      },\n      size: {\n        xs: 'w-4 h-4 size-4 rounded-lg p-0 [&_svg]:size-3',\n        sm: 'w-6 h-6 size-6 rounded-lg p-0 [&_svg]:size-4',\n        md: 'w-8 h-8 size-8 rounded-lg p-1 [&_svg]:size-5',\n        lg: 'w-10 h-10 size-10 rounded-lg p-2 [&_svg]:size-6',\n      },\n      rounded: {\n        true: \"rounded-full\",\n        false: \"\",\n      },\n    },\n    compoundVariants: [\n      // PRIMARY BUTTON VARIANTS\n      {\n        color: 'primary',\n        variant: 'contained',\n        className: cn(\n          'bg-[#9368FF] border border-[#9368FF] text-[#FCFCFC] [&_svg]:text-[#FCFCFC]',\n          'hover:bg-[#7F4EEB]',\n          'focus:bg-[#7F4EEB] focus:border-[#6B3DD9]',\n          'active:bg-[#6B3DD9]',\n          'disabled:bg-[#E8E9EB] disabled:border-[#E8E9EB] disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\n        ),\n      },\n      {\n        color: 'primary',\n        variant: 'outlined',\n        className: cn(\n          'bg-transparent border border-[#9368FF] text-[#9368FF] [&_svg]:text-[#9368FF]',\n          'hover:bg-[#9368FF0F]',\n          'active:bg-[#9368FF0F] active:border-[#6B3DD9]',\n          'disabled:border-[#EBEBEB] disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\n        ),\n      },\n      {\n        color: 'primary',\n        variant: 'ghost',\n        className: cn(\n          'bg-transparent border border-transparent text-[#9368FF] [&_svg]:text-[#9368FF]',\n          'hover:text-[#6B3DD9] hover:[&_svg]:text-[#6B3DD9]',\n          'focus:text-[#6B3DD9] focus:[&_svg]:text-[#6B3DD9]',\n          'active:bg-[#9368FF0F]',\n          'disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\n        ),\n      },\n      // SECONDARY BUTTON VARIANTS\n      {\n        color: 'secondary',\n        variant: 'contained',\n        className: cn(\n          'bg-[#FCFCFC] border border-[#E1E1E5] text-[#06080D] [&_svg]:text-[#06080D]',\n          'hover:bg-[#F9FAFB] hover:border-[#E1E1E5]',\n          'focus:bg-[#FCFCFC] focus:border-[#C5C7CD]',\n          'active:bg-[#F9FAFB] active:border-[#C5C7CD]',\n          'disabled:bg-[#FCFCFC] disabled:border-[#EBEBEB] disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\n        ),\n      },\n      {\n        color: 'secondary',\n        variant: 'outlined',\n        className: cn(\n          'bg-transparent border border-[#E1E1E5] text-[#06080D] [&_svg]:text-[#06080D]',\n          'hover:bg-[#F9FAFB] hover:border-[#E1E1E5]',\n          'focus:bg-[#FCFCFC] focus:border-[#C5C7CD]',\n          'active:bg-[#F9FAFB] active:border-[#C5C7CD]',\n          'disabled:bg-[#FCFCFC] disabled:border-[#EBEBEB] disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\n        ),\n      },\n      {\n        color: 'secondary',\n        variant: 'ghost',\n        className: cn(\n          'text-[#06080D] [&_svg]:text-[#06080D] bg-transparent border border-transparent',\n          'hover:bg-[#F9FAFB]',\n          'focus:bg-[#FCFCFC]',\n          'active:bg-[#F9FAFB]',\n          'disabled:bg-[#FCFCFC] disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\n        ),\n      },\n      // ERROR BUTTON VARIANTS\n      {\n        color: 'error',\n        variant: 'contained',\n        className: cn(\n          'bg-[#EF4444] border border-[#EF4444] text-[#FCFCFC] [&_svg]:text-[#FCFCFC]',\n          'hover:bg-[#DC2626]',\n          'focus:bg-[#DC2626]',\n          'active:bg-[#DC2626]',\n          'disabled:bg-[#E8E9EB] disabled:border-[#E8E9EB] disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\n        ),\n      },\n      {\n        color: 'error',\n        variant: 'outlined',\n        className: cn(\n          'bg-transparent border border-[#EF4444] text-[#EF4444] [&_svg]:text-[#EF4444]',\n          'hover:bg-[#EF44440F]',\n          'active:bg-[#DC26260F] active:border-[#DC2626]',\n          'disabled:border-[#EBEBEB] disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\n        ),\n      },\n      {\n        color: 'error',\n        variant: 'ghost',\n        className: cn(\n          'bg-transparent border border-transparent text-[#EF4444] [&_svg]:text-[#EF4444]',\n          'hover:bg-[#EF44440F] hover:text-[#DC2626] hover:[&_svg]:text-[#DC2626]',\n          'active:bg-[#DC26260F] active:border-[#DC2626]',\n          'disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\n        ),\n      },\n      // ROUNDED BUTTON VARIANTS\n      {\n        variant: 'ghost',\n        rounded: true,\n        className: cn(\n        'shadow-[-1px_-1px_10px_rgba(6,8,13,0.06),_1px_1px_10px_rgba(6,8,13,0.06)]',\n          'disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\n        ),\n      },\n    ],\n    defaultVariants: {\n      color: \"primary\",\n      variant: \"contained\",\n      size: \"lg\",\n      rounded: false,\n    },\n  }\n)\n\nexport type ButtonIconVarianceProps = VariantProps<typeof buttonIconVariants>;\n"],"names":["buttonIconVariants","cva","cn"],"mappings":";;AAGO,MAAMA,IAAqBC;AAAA,EAChC;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAAA,EAEF;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,MAAM;AAAA,QACN,WAAW;AAAA,QACX,UAAU;AAAA,QACV,OAAO;AAAA,MAAA;AAAA,MAET,OAAO;AAAA,QACL,SAAS;AAAA,QACT,WAAW;AAAA,QACX,OAAO;AAAA,MAAA;AAAA,MAET,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MAAA;AAAA,MAEN,SAAS;AAAA,QACP,MAAM;AAAA,QACN,OAAO;AAAA,MAAA;AAAA,IACT;AAAA,IAEF,kBAAkB;AAAA;AAAA,MAEhB;AAAA,QACE,OAAO;AAAA,QACP,SAAS;AAAA,QACT,WAAWC;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA,MAEF;AAAA,QACE,OAAO;AAAA,QACP,SAAS;AAAA,QACT,WAAWA;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA,MAEF;AAAA,QACE,OAAO;AAAA,QACP,SAAS;AAAA,QACT,WAAWA;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA;AAAA,MAGF;AAAA,QACE,OAAO;AAAA,QACP,SAAS;AAAA,QACT,WAAWA;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA,MAEF;AAAA,QACE,OAAO;AAAA,QACP,SAAS;AAAA,QACT,WAAWA;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA,MAEF;AAAA,QACE,OAAO;AAAA,QACP,SAAS;AAAA,QACT,WAAWA;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA;AAAA,MAGF;AAAA,QACE,OAAO;AAAA,QACP,SAAS;AAAA,QACT,WAAWA;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA,MAEF;AAAA,QACE,OAAO;AAAA,QACP,SAAS;AAAA,QACT,WAAWA;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA,MAEF;AAAA,QACE,OAAO;AAAA,QACP,SAAS;AAAA,QACT,WAAWA;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA;AAAA,MAGF;AAAA,QACE,SAAS;AAAA,QACT,SAAS;AAAA,QACT,WAAWA;AAAA,UACX;AAAA,UACE;AAAA,QAAA;AAAA,MACF;AAAA,IACF;AAAA,IAEF,iBAAiB;AAAA,MACf,OAAO;AAAA,MACP,SAAS;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,IAAA;AAAA,EACX;AAEJ;"}
+{"version":3,"file":"buttonIconVariants.js","sources":["../../src/ButtonIcon/buttonIconVariants.ts"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from \"@oneplatformdev/utils\";\n\nexport const buttonIconVariants = cva(\n  [\n    \"inline-flex items-center justify-center relative\",\n    'whitespace-nowrap font-medium aspect-square',\n    'cursor-pointer box-border',\n    \"transition-colors focus-visible:outline-hidden focus-visible:ring-none focus-visible:ring-transparent\",\n    \"disabled:pointer-events-none disabled:cursor-default\",\n    \"[&_svg]:pointer-events-none [&_svg]:shrink-0\",\n    'transition-transform duration-200 [&_svg]:transition-transform [&_svg]:duration-200',\n  ],\n  {\n    variants: {\n      variant: {\n        none: '',\n        contained: '',\n        outlined: '',\n        ghost: \"\",\n      },\n      color: {\n        primary: \"\",\n        secondary: \"\",\n        error: \"\"\n      },\n      size: {\n        xs: 'w-4 h-4 size-4 rounded-sm p-0 [&_svg]:size-3',\n        sm: 'w-6 h-6 size-6 rounded-md p-0 [&_svg]:size-4',\n        md: 'w-8 h-8 size-8 rounded-lg p-1 [&_svg]:size-5',\n        lg: 'w-10 h-10 size-10 rounded-lg p-1 [&_svg]:size-6',\n      },\n      rounded: {\n        true: \"rounded-full\",\n        false: \"\",\n      },\n    },\n    compoundVariants: [\n      // PRIMARY BUTTON VARIANTS\n      {\n        color: 'primary',\n        variant: 'contained',\n        className: cn(\n          'bg-[#9368FF] border border-[#9368FF] text-[#FCFCFC] [&_svg]:text-[#FCFCFC]',\n          'hover:bg-[#7F4EEB]',\n          'focus:bg-[#7F4EEB] focus:border-[#6B3DD9]',\n          'active:bg-[#6B3DD9]',\n          'disabled:bg-[#E8E9EB] disabled:border-[#E8E9EB] disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\n        ),\n      },\n      {\n        color: 'primary',\n        variant: 'outlined',\n        className: cn(\n          'bg-transparent border border-[#9368FF] text-[#9368FF] [&_svg]:text-[#9368FF]',\n          'hover:bg-[#9368FF0F]',\n          'active:bg-[#9368FF0F] active:border-[#6B3DD9]',\n          'disabled:border-[#EBEBEB] disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\n        ),\n      },\n      {\n        color: 'primary',\n        variant: 'ghost',\n        className: cn(\n          'bg-transparent border border-transparent text-[#9368FF] [&_svg]:text-[#9368FF]',\n          'hover:text-[#6B3DD9] hover:[&_svg]:text-[#6B3DD9]',\n          'focus:text-[#6B3DD9] focus:[&_svg]:text-[#6B3DD9]',\n          'active:bg-[#9368FF0F]',\n          'disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\n        ),\n      },\n      // SECONDARY BUTTON VARIANTS\n      {\n        color: 'secondary',\n        variant: 'contained',\n        className: cn(\n          'bg-[#FCFCFC] border border-[#E1E1E5] text-[#06080D] [&_svg]:text-[#06080D]',\n          'hover:bg-[#F9FAFB] hover:border-[#E1E1E5]',\n          'focus:bg-[#FCFCFC] focus:border-[#C5C7CD]',\n          'active:bg-[#F9FAFB] active:border-[#C5C7CD]',\n          'disabled:bg-[#FCFCFC] disabled:border-[#EBEBEB] disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\n        ),\n      },\n      {\n        color: 'secondary',\n        variant: 'outlined',\n        className: cn(\n          'bg-transparent border border-[#E1E1E5] text-[#06080D] [&_svg]:text-[#06080D]',\n          'hover:bg-[#F9FAFB] hover:border-[#E1E1E5]',\n          'focus:bg-[#FCFCFC] focus:border-[#C5C7CD]',\n          'active:bg-[#F9FAFB] active:border-[#C5C7CD]',\n          'disabled:bg-[#FCFCFC] disabled:border-[#EBEBEB] disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\n        ),\n      },\n      {\n        color: 'secondary',\n        variant: 'ghost',\n        className: cn(\n          'text-[#06080D] [&_svg]:text-[#06080D] bg-transparent border border-transparent',\n          'hover:bg-[#F9FAFB]',\n          'focus:bg-[#FCFCFC]',\n          'active:bg-[#F9FAFB]',\n          'disabled:bg-[#FCFCFC] disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\n        ),\n      },\n      // ERROR BUTTON VARIANTS\n      {\n        color: 'error',\n        variant: 'contained',\n        className: cn(\n          'bg-[#EF4444] border border-[#EF4444] text-[#FCFCFC] [&_svg]:text-[#FCFCFC]',\n          'hover:bg-[#DC2626]',\n          'focus:bg-[#DC2626]',\n          'active:bg-[#DC2626]',\n          'disabled:bg-[#E8E9EB] disabled:border-[#E8E9EB] disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\n        ),\n      },\n      {\n        color: 'error',\n        variant: 'outlined',\n        className: cn(\n          'bg-transparent border border-[#EF4444] text-[#EF4444] [&_svg]:text-[#EF4444]',\n          'hover:bg-[#EF44440F]',\n          'active:bg-[#DC26260F] active:border-[#DC2626]',\n          'disabled:border-[#EBEBEB] disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\n        ),\n      },\n      {\n        color: 'error',\n        variant: 'ghost',\n        className: cn(\n          'bg-transparent border border-transparent text-[#EF4444] [&_svg]:text-[#EF4444]',\n          'hover:bg-[#EF44440F] hover:text-[#DC2626] hover:[&_svg]:text-[#DC2626]',\n          'active:bg-[#DC26260F] active:border-[#DC2626]',\n          'disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\n        ),\n      },\n      // ROUNDED BUTTON VARIANTS\n      {\n        variant: 'ghost',\n        rounded: true,\n        className: cn(\n        'bg-[#FCFCFC] shadow-[-1px_-1px_10px_rgba(6,8,13,0.06),_1px_1px_10px_rgba(6,8,13,0.06)]',\n          'disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\n        ),\n      }\n    ],\n    defaultVariants: {\n      color: \"primary\",\n      variant: \"contained\",\n      size: \"lg\",\n      rounded: false,\n    },\n  }\n)\n\nexport type ButtonIconVarianceProps = VariantProps<typeof buttonIconVariants>;\n"],"names":["buttonIconVariants","cva","cn"],"mappings":";;AAGO,MAAMA,IAAqBC;AAAA,EAChC;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAAA,EAEF;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,MAAM;AAAA,QACN,WAAW;AAAA,QACX,UAAU;AAAA,QACV,OAAO;AAAA,MAAA;AAAA,MAET,OAAO;AAAA,QACL,SAAS;AAAA,QACT,WAAW;AAAA,QACX,OAAO;AAAA,MAAA;AAAA,MAET,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MAAA;AAAA,MAEN,SAAS;AAAA,QACP,MAAM;AAAA,QACN,OAAO;AAAA,MAAA;AAAA,IACT;AAAA,IAEF,kBAAkB;AAAA;AAAA,MAEhB;AAAA,QACE,OAAO;AAAA,QACP,SAAS;AAAA,QACT,WAAWC;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA,MAEF;AAAA,QACE,OAAO;AAAA,QACP,SAAS;AAAA,QACT,WAAWA;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA,MAEF;AAAA,QACE,OAAO;AAAA,QACP,SAAS;AAAA,QACT,WAAWA;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA;AAAA,MAGF;AAAA,QACE,OAAO;AAAA,QACP,SAAS;AAAA,QACT,WAAWA;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA,MAEF;AAAA,QACE,OAAO;AAAA,QACP,SAAS;AAAA,QACT,WAAWA;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA,MAEF;AAAA,QACE,OAAO;AAAA,QACP,SAAS;AAAA,QACT,WAAWA;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA;AAAA,MAGF;AAAA,QACE,OAAO;AAAA,QACP,SAAS;AAAA,QACT,WAAWA;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA,MAEF;AAAA,QACE,OAAO;AAAA,QACP,SAAS;AAAA,QACT,WAAWA;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA,MAEF;AAAA,QACE,OAAO;AAAA,QACP,SAAS;AAAA,QACT,WAAWA;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA;AAAA,MAGF;AAAA,QACE,SAAS;AAAA,QACT,SAAS;AAAA,QACT,WAAWA;AAAA,UACX;AAAA,UACE;AAAA,QAAA;AAAA,MACF;AAAA,IACF;AAAA,IAEF,iBAAiB;AAAA,MACf,OAAO;AAAA,MACP,SAAS;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,IAAA;AAAA,EACX;AAEJ;"}