@oneplatformdev/ui 0.1.99-beta.1 → 0.1.99-beta.11

package/Button/Button.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.stories.js","sources":["../../src/Button/Button.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from '@storybook/react';\n\nimport { Button } from './Button';\nimport type { ButtonProps } from './Button.types';\nimport React, { PropsWithChildren } from 'react';\nimport { PlusIcon } from 'lucide-react'\n\nconst Template = (props: ButtonProps) => (\n  <Button {...props}/>\n);\n\nconst DashedWrapper = (props: PropsWithChildren) => {\n  return (\n    <div\n      style={{\n        padding: '0px 20px',\n        display: 'flex',\n        gap: '32px',\n        alignItems: 'flex-start',\n      }}\n    >\n      <div\n        style={{\n          position: 'relative',\n          border: '2px dashed rgba(139, 92, 246, 0.7)',\n          borderRadius: '24px',\n          padding: '24px 32px',\n          display: 'flex',\n          gap: '32px',\n        }}\n      >\n        {props.children}\n      </div>\n    </div>\n  )\n}\n\nconst States = (props: ButtonProps) => (\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        <Button\n          key={state}\n          id={state}\n          {...props}\n          disabled={state === 'disabled' || props.disabled}\n        >\n          {props.children}\n        </Button>\n      ))}\n  </div>\n);\n\nconst variants: ButtonProps['variant'][] = [ 'transparent', 'none', 'contained', 'outlined', 'ghost' ]\nconst colors: ButtonProps['color'][] = [ 'primary', 'secondary', 'error' ]\nconst sizes: ButtonProps['size'][] = [ 'sm', 'lg' ]\n\nconst meta = {\n  title: 'Button',\n  component: Button,\n  render: Template,\n  args: {\n    variant: variants[0],\n    color: colors[0],\n    size: sizes[0],\n    disabled: false,\n    asChild: false,\n  },\n  argTypes: {\n    asChild: { control: false },\n    variant: { options: variants, control: { type: 'select' } },\n    color: { options: colors, control: { type: 'select' } },\n    size: { options: sizes, control: { type: 'select' } },\n  },\n  parameters: {\n    pseudo: {\n      hover: '#hover',\n      focus: '#focus',\n      active: '#active',\n      disabled: '#disabled',\n    },\n  }\n} satisfies Meta<typeof Button>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\nconst args: Story['args'] = {\n  disabled: false,\n  loading: false,\n  asChild: false,\n  startAdornment: <PlusIcon/>,\n  endAdornment: <PlusIcon/>,\n  children: 'children',\n}\n\nexport const Default: Story = { args };\n\nexport const Primary: Story = {\n  args: {\n    ...args,\n    color: 'primary',\n    size: 'lg',\n    children: 'Створити',\n  },\n  argTypes: {\n    variant: { control: false },\n    color: { control: false },\n  },\n  render: (props) => (\n    <div className='flex'>\n      <DashedWrapper>\n        <States {...props} variant='contained'/>\n        <States {...props} variant='outlined'/>\n        <States {...props} variant='ghost'/>\n      </DashedWrapper>\n    </div>\n  ),\n};\n\nexport const Secondary: Story = {\n  args: {\n    ...args,\n    color: 'secondary',\n    size: 'lg',\n    children: 'Створити',\n  },\n  argTypes: {\n    variant: { control: false },\n    color: { control: false },\n  },\n  render: (props) => (\n    <div className='flex'>\n      <DashedWrapper>\n        <States {...props} variant='contained'/>\n        <States {...props} variant='outlined'/>\n        <States {...props} variant='ghost'/>\n      </DashedWrapper>\n    </div>\n  ),\n};\n\nexport const Error: Story = {\n  args: {\n    ...args,\n    color: 'error',\n    size: 'lg',\n    children: 'Створити',\n  },\n  argTypes: {\n    variant: { control: false },\n    color: { control: false },\n  },\n  render: (props) => (\n    <div className='flex'>\n      <DashedWrapper>\n        <States {...props} variant='contained'/>\n        <States {...props} variant='outlined'/>\n        <States {...props} variant='ghost'/>\n      </DashedWrapper>\n    </div>\n  ),\n};\n\n"],"names":["Template","props","jsx","Button","DashedWrapper","States","state","variants","colors","sizes","meta","args","PlusIcon","Default","Primary","Secondary","Error"],"mappings":"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"}
+{"version":3,"file":"Button.stories.js","sources":["../../src/Button/Button.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from '@storybook/react';\n\nimport { Button } from './Button';\nimport { ButtonProps } from './Button.types';\nimport React from 'react';\nimport { PlusIcon, Trash2Icon, FileDownIcon } from 'lucide-react';\nimport { DashedWrapper } from \"../../.storybook/Wrappers\";\n\nconst States = (props: ButtonProps) => (\n  <div\n    style={{\n      position: 'relative',\n      display: 'flex',\n      flexDirection: 'column',\n      gap: '16px',\n    }}\n  >\n    {[ 'default', 'hover', 'focus', 'active', 'disabled', 'loading' ]\n      .map((state) => (\n        <Button\n          key={state}\n          id={state}\n          {...props}\n          disabled={state === 'disabled' || props.disabled}\n          loading={state === 'loading' || props.loading}\n        >\n          {props.children}\n        </Button>\n      ))}\n  </div>\n);\n\nconst variants: ButtonProps['variant'][] = [ 'none', 'contained', 'outlined', 'ghost' ]\nconst colors: ButtonProps['color'][] = [ 'primary', 'secondary', 'error' ]\nconst sizes: ButtonProps['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 meta = {\n  title: 'Button',\n  component: Button,\n  // render: Template,\n  args: {\n    tooltip: undefined,\n    asChild: false,\n    //\n    variant: variant_default,\n    color: color_default,\n    size: size_default,\n    loading: false,\n    disabled: false,\n    startAdornment: undefined,\n    endAdornment: undefined,\n    slotProps: {},\n    tooltipProps: {}\n  },\n  argTypes: {\n    tooltip: {\n      name: 'tooltip',\n      description: 'Button tooltip from ButtonProps [deprecated, use title and message instead]',\n      control: false,\n    },\n    asChild: {\n      name: 'asChild',\n      description: 'Button asChild from ButtonProps [boolean]',\n      control: false\n    },\n    variant: {\n      name: 'variant',\n      description: 'Button variant from ButtonProps',\n      options: variants,\n      control: { type: 'inline-radio', }\n    },\n    color: {\n      name: 'color',\n      description: 'Button color from ButtonProps',\n      options: colors,\n      control: { type: 'inline-radio' }\n    },\n    size: {\n      name: 'size',\n      description: 'Button size from ButtonProps',\n      options: sizes,\n      control: { type: 'inline-radio' }\n    },\n    title: {\n      name: 'title',\n      description: \"Button tooltip title from HTMLAttributes<HTMLButtonElement> [string only]\",\n      control: { type: 'text' },\n    },\n    message: {\n      name: 'message',\n      description: 'Button tooltip message from ButtonProps [ReactNode]',\n      control: { type: \"object\" },\n    },\n    startAdornment: {\n      name: 'startAdornment',\n      description: 'Button startAdornment from ButtonProps [`undefined` | `ComponentType<SVGProps<SVGSVGElement>>` | `ReactElement<SVGProps<SVGSVGElement>>`]',\n      options: Object.keys(iconMap),\n      mapping: iconMap,\n      control: { type: 'inline-radio' },\n    },\n    endAdornment: {\n      name: 'endAdornment',\n      description: 'Button endAdornment from ButtonProps [`undefined` | `ComponentType<SVGProps<SVGSVGElement>>` | `ReactElement<SVGProps<SVGSVGElement>>`]',\n      options: Object.keys(iconMap),\n      mapping: iconMap,\n      control: { type: 'inline-radio' },\n    },\n    slotProps: {\n      name: 'slotProps',\n      description: 'Button slotProps from ButtonProps [object]',\n      control: { type: \"object\" },\n    },\n    tooltipProps: {\n      name: 'tooltipProps',\n      description: 'Button tooltipProps from ButtonProps [object]',\n      control: { type: \"object\" },\n    },\n  },\n  parameters: {\n    pseudo: {\n      hover: '#hover',\n      focus: '#focus',\n      active: '#active',\n      disabled: '#disabled',\n    },\n  }\n} satisfies Meta<typeof Button>;\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\nconst args: Story['args'] = {\n  ...meta.args,\n  startAdornment: <PlusIcon/>,\n  endAdornment: <PlusIcon/>,\n  children: 'children',\n}\n\nexport const Default: Story = {\n  args: {\n    ...meta.args,\n    children: '_children_',\n  }\n};\n\nexport const Disabled: Story = {\n  render: (props) => (\n    <DashedWrapper>\n      <Button {...props} />\n      <Button {...props} startAdornment={<PlusIcon/>}/>\n      <Button {...props} startAdornment={<PlusIcon/>} endAdornment={<PlusIcon/>}/>\n      <Button {...props} endAdornment={<PlusIcon/>}/>\n    </DashedWrapper>\n  ),\n  args: {\n    ...meta.args,\n    disabled: true,\n    children: 'disabled',\n  }\n};\n\nexport const Loading: Story = {\n  render: (props) => (\n    <DashedWrapper>\n      <Button {...props} />\n      <Button {...props} startAdornment={<PlusIcon/>}/>\n      <Button {...props} startAdornment={<PlusIcon/>} endAdornment={<PlusIcon/>}/>\n      <Button {...props} endAdornment={<PlusIcon/>}/>\n    </DashedWrapper>\n  ),\n  args: {\n    children: 'Loading…',\n    loading: true,\n  },\n};\n\nexport const Tooltips: Story = {\n  render: (props) => (\n    <DashedWrapper>\n      <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>\n        <Button\n          {...props}\n          title='delayDuration: 0'\n          tooltipProps={{ delayDuration: 0 }}\n        >\n          delayDuration: 0\n        </Button>\n        <Button\n          {...props}\n          title='delayDuration: 300 [default]'\n          tooltipProps={{ delayDuration: 300 }}\n        >\n          delayDuration: 300\n        </Button>\n        <Button\n          {...props}\n          title='delayDuration: 700'\n          tooltipProps={{ delayDuration: 700 }}\n        >\n          delayDuration: 700\n        </Button>\n\n        <Button {...props} title='title_string'>title</Button>\n        <Button {...props} message='message_string'>message: string</Button>\n        <Button\n          {...props}\n          message={<span>message_node_span</span>}\n        >\n          message: ReactNode\n        </Button>\n        <Button\n          {...props}\n          message='message_string'\n          tooltipProps={{\n            showQuestionMark: true\n          }}\n        >\n          showQuestionMark: true\n        </Button>\n      </div>\n    </DashedWrapper>\n  ),\n  args: {\n    children: 'tooltips',\n    tooltipProps: {\n      defaultOpen: true\n    },\n  },\n};\n\nexport const Primary: Story = {\n  args: {\n    ...args,\n    color: 'primary',\n    size: 'lg',\n    children: 'Створити',\n  },\n  argTypes: {\n    variant: { control: false },\n    color: { control: false },\n  },\n  render: (props) => (\n    <div className='flex'>\n      <DashedWrapper>\n        <States {...props} variant='contained'/>\n        <States {...props} variant='outlined'/>\n        <States {...props} variant='ghost'/>\n      </DashedWrapper>\n    </div>\n  ),\n};\n\nexport const Secondary: Story = {\n  args: {\n    ...args,\n    color: 'secondary',\n    size: 'lg',\n    children: 'Створити',\n  },\n  argTypes: {\n    variant: { control: false },\n    color: { control: false },\n  },\n  render: (props) => (\n    <div className='flex'>\n      <DashedWrapper>\n        <States {...props} variant='contained'/>\n        <States {...props} variant='outlined'/>\n        <States {...props} variant='ghost'/>\n      </DashedWrapper>\n    </div>\n  ),\n};\n\nexport const Error: Story = {\n  args: {\n    ...args,\n    color: 'error',\n    size: 'lg',\n    children: 'Створити',\n  },\n  argTypes: {\n    variant: { control: false },\n    color: { control: false },\n  },\n  render: (props) => (\n    <div className='flex'>\n      <DashedWrapper>\n        <States {...props} variant='contained'/>\n        <States {...props} variant='outlined'/>\n        <States {...props} variant='ghost'/>\n      </DashedWrapper>\n    </div>\n  ),\n};\n"],"names":["States","props","jsx","state","Button","variants","colors","sizes","variant_default","color_default","size_default","iconMap","PlusIcon","Trash2Icon","FileDownIcon","meta","args","Default","Disabled","jsxs","DashedWrapper","Loading","Tooltips","Primary","Secondary","Error"],"mappings":"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"}

package/Button/Button.types.d.ts

@@ -1,13 +1,59 @@
-import { ButtonHTMLAttributes, ReactNode } from 'react';
-import { ButtonVariantProps } from './buttonVariants';
+import { ButtonHTMLAttributes, ComponentType, ReactElement, SVGProps, ReactNode } from 'react';
 import { TooltipProps } from '../Tooltip';
-export interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color'>, ButtonVariantProps, Pick<TooltipProps, 'message'> {
-    loading?: boolean;
+import { ButtonVarianceProps } from './buttonVariants';
+type ButtonAttributes = ButtonHTMLAttributes<HTMLButtonElement>;
+type ButtonScreenReaderOptions = {
+    /** Text to be read by screen readers when the button is in a loading state. */
+    text?: string;
+};
+export type ButtonScreenReader = ButtonScreenReaderOptions['text'] | ButtonScreenReaderOptions;
+export type ButtonCounterBadgeReaderOptions = {
+    /**
+     * Count to display in the counter badge (e.g., number of notifications).
+     * If omitted, the badge will not be rendered.
+     */
+    count?: number;
+};
+export type ButtonCounterBadgeReader = ButtonCounterBadgeReaderOptions['count'] | ButtonCounterBadgeReaderOptions;
+export interface ButtonDefaultProps extends Omit<ButtonAttributes, 'color' | 'title' | 'disabled'> {
     asChild?: boolean;
+    loading?: boolean;
+    disabled?: boolean;
+    /**
+     * Screen reader text or options used for accessibility (e.g., when the button is loading).
+     * Accepts a string or an object with a `text` property for more control.
+     */
+    screenReader?: ButtonScreenReader;
+    /**
+     * Field for rendering a count badge on the button (e.g., notifications).
+     */
+    counter?: ButtonCounterBadgeReader;
+}
+export interface ButtonTooltipProps {
+    /**
+     * Tooltip text shown by the native `title` attribute.
+     * Use a string value only.
+     */
+    title?: ButtonAttributes['title'];
+    /**
+     * Tooltip content rendered by the Tooltip component.
+     * Can be a React node (JSX, string, element).
+     */
+    message?: TooltipProps['message'];
     /**@deprecated: use message instead.  */
     tooltip?: ReactNode;
     tooltipProps?: TooltipProps;
-    startAdornment?: ReactNode;
-    endAdornment?: ReactNode;
 }
+export type ButtonBaseProps<VariantProps extends object = object, SlotProps = unknown> = ButtonDefaultProps & ButtonTooltipProps & VariantProps & {
+    slotProps?: SlotProps;
+};
+export interface ButtonSlotProps {
+}
+export type ButtonIconType = ComponentType<SVGProps<SVGSVGElement>> | ReactElement<SVGProps<SVGSVGElement>>;
+export type ButtonAdornmentProps = ButtonIconType;
+export interface ButtonProps extends ButtonBaseProps<ButtonVarianceProps, ButtonSlotProps> {
+    startAdornment?: ButtonAdornmentProps;
+    endAdornment?: ButtonAdornmentProps;
+}
+export {};
 //# sourceMappingURL=Button.types.d.ts.map

package/Button/Button.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.types.d.ts","sourceRoot":"","sources":["../../src/Button/Button.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAA;AAC5C,OAAO,EAAE,KAAK,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAC3D,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAE1C,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,OAAO,CAAC,EAC5D,kBAAkB,EAClB,IAAI,CAAC,YAAY,EAAE,SAAS,CAAC;IAC/B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IAEjB,wCAAwC;IACxC,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,YAAY,CAAC,EAAE,YAAY,CAAC;IAE5B,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,YAAY,CAAC,EAAE,SAAS,CAAC;CAC1B"}
+{"version":3,"file":"Button.types.d.ts","sourceRoot":"","sources":["../../src/Button/Button.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,aAAa,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACnF,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAC1C,OAAO,EAAE,KAAK,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAE5D,KAAK,gBAAgB,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;AAEhE,KAAK,yBAAyB,GAAG;IAC/B,+EAA+E;IAC/E,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAA;AACD,MAAM,MAAM,kBAAkB,GAAG,yBAAyB,CAAC,MAAM,CAAC,GAAG,yBAAyB,CAAA;AAE9F,MAAM,MAAM,+BAA+B,GAAG;IAC5C;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAA;AACD,MAAM,MAAM,wBAAwB,GAAG,+BAA+B,CAAC,OAAO,CAAC,GAAG,+BAA+B,CAAA;AAEjH,MAAM,WAAW,kBACf,SAAQ,IAAI,CAAC,gBAAgB,EAAE,OAAO,GAAG,OAAO,GAAG,UAAU,CAAC;IAC9D,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,YAAY,CAAC,EAAE,kBAAkB,CAAC;IAClC;;OAEG;IACH,OAAO,CAAC,EAAE,wBAAwB,CAAC;CACpC;AAED,MAAM,WAAW,kBAAkB;IACjC;;;OAGG;IACH,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC,SAAS,CAAC,CAAC;IAClC,wCAAwC;IACxC,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,YAAY,CAAC,EAAE,YAAY,CAAC;CAC7B;AAED,MAAM,MAAM,eAAe,CACzB,YAAY,SAAS,MAAM,GAAG,MAAM,EACpC,SAAS,GAAG,OAAO,IAEnB,kBAAkB,GAClB,kBAAkB,GAClB,YAAY,GAAG;IACf,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB,CAAC;AAEF,MAAM,WAAW,eAAe;CAAG;AAEnC,MAAM,MAAM,cAAc,GACtB,aAAa,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,GACtC,YAAY,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC;AAE1C,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC;AAElD,MAAM,WAAW,WACf,SAAQ,eAAe,CAAC,mBAAmB,EAAE,eAAe,CAAC;IAC7D,cAAc,CAAC,EAAE,oBAAoB,CAAC;IACtC,YAAY,CAAC,EAAE,oBAAoB,CAAC;CACrC"}

package/Button/ButtonCounterBadge.d.ts

@@ -0,0 +1,7 @@
+import { ButtonCounterBadgeReader } from './Button.types';
+import { ButtonBadgeCVAProps } from './buttonVariants';
+export interface ButtonCounterBadgeProps extends ButtonBadgeCVAProps {
+    counter?: ButtonCounterBadgeReader;
+}
+export declare const ButtonCounterBadge: (props: ButtonCounterBadgeProps) => import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=ButtonCounterBadge.d.ts.map

package/Button/ButtonCounterBadge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonCounterBadge.d.ts","sourceRoot":"","sources":["../../src/Button/ButtonCounterBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAmC,MAAM,gBAAgB,CAAC;AAC3F,OAAO,EAAE,KAAK,mBAAmB,EAAuB,MAAM,kBAAkB,CAAC;AAGjF,MAAM,WAAW,uBAAwB,SAAQ,mBAAmB;IAClE,OAAO,CAAC,EAAE,wBAAwB,CAAC;CACpC;AAgBD,eAAO,MAAM,kBAAkB,GAAI,OAAO,uBAAuB,mDAiBhE,CAAA"}

package/Button/ButtonCounterBadge.js

@@ -0,0 +1,23 @@
+import { jsxs as i, jsx as s } from "react/jsx-runtime";
+import { buttonBadgeVariants as c } from "./buttonVariants.js";
+import { cn as u } from "@oneplatformdev/utils";
+const a = (t) => t ? typeof t == "number" ? { count: t } : t : null, o = 99, l = (t) => Math.max(0, Math.min(t || 0, o)), m = (t) => t > o, x = (t) => {
+  const { counter: r, ...e } = t, n = a(r);
+  return n?.count ? /* @__PURE__ */ i(
+    "div",
+    {
+      className: u(
+        "bg-red-300",
+        c({ ...e })
+      ),
+      children: [
+        l(n.count),
+        m(n.count) && /* @__PURE__ */ s("span", { className: "relative -top-[0.5px]", children: "+" })
+      ]
+    }
+  ) : null;
+};
+export {
+  x as ButtonCounterBadge
+};
+//# sourceMappingURL=ButtonCounterBadge.js.map

package/Button/ButtonCounterBadge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonCounterBadge.js","sources":["../../src/Button/ButtonCounterBadge.tsx"],"sourcesContent":["import { ButtonCounterBadgeReader, ButtonCounterBadgeReaderOptions } from \"./Button.types\";\nimport { type ButtonBadgeCVAProps, buttonBadgeVariants } from \"./buttonVariants\";\nimport { cn } from \"@oneplatformdev/utils\";\n\nexport interface ButtonCounterBadgeProps extends ButtonBadgeCVAProps {\n  counter?: ButtonCounterBadgeReader;\n}\n\nconst normalizeCounter = (counter: ButtonCounterBadgeReader): ButtonCounterBadgeReaderOptions | null => {\n  if(!counter) return null\n  if(typeof counter === 'number') return { count: counter };\n  return counter;\n}\n\nconst MIN_COUNT = 99;\nconst normalizeCount = (count: number): number => {\n  const c = count || 0;\n  return Math.max(0, Math.min(c, MIN_COUNT));\n}\n\nconst isOverflown = (count: number): boolean => count > MIN_COUNT\n\nexport const ButtonCounterBadge = (props: ButtonCounterBadgeProps) => {\n  const {counter: initializeCounter, ...rest} = props;\n  const counter = normalizeCounter(initializeCounter);\n  if(!counter?.count) return null;\n  return (\n    <div\n      className={cn(\n        'bg-red-300',\n        buttonBadgeVariants({ ...rest }),\n      )}\n    >\n      {normalizeCount(counter.count)}\n      {isOverflown(counter.count) && (\n        <span className=\"relative -top-[0.5px]\">+</span>\n      )}\n    </div>\n  )\n}\n"],"names":["normalizeCounter","counter","MIN_COUNT","normalizeCount","count","isOverflown","ButtonCounterBadge","props","initializeCounter","rest","jsxs","cn","buttonBadgeVariants"],"mappings":";;;AAQA,MAAMA,IAAmB,CAACC,MACpBA,IACD,OAAOA,KAAY,WAAiB,EAAE,OAAOA,EAAA,IACzCA,IAFa,MAKhBC,IAAY,IACZC,IAAiB,CAACC,MAEf,KAAK,IAAI,GAAG,KAAK,IADdA,KAAS,GACYF,CAAS,CAAC,GAGrCG,IAAc,CAACD,MAA2BA,IAAQF,GAE3CI,IAAqB,CAACC,MAAmC;AACpE,QAAM,EAAC,SAASC,GAAmB,GAAGC,MAAQF,GACxCN,IAAUD,EAAiBQ,CAAiB;AAClD,SAAIP,GAAS,QAEX,gBAAAS;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACAC,EAAoB,EAAE,GAAGH,EAAA,CAAM;AAAA,MAAA;AAAA,MAGhC,UAAA;AAAA,QAAAN,EAAeF,EAAQ,KAAK;AAAA,QAC5BI,EAAYJ,EAAQ,KAAK,uBACvB,QAAA,EAAK,WAAU,yBAAwB,UAAA,IAAA,CAAC;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,IAVpB;AAc7B;"}

package/Button/buttonVariants.d.ts

@@ -1,33 +1,16 @@
 import { VariantProps } from 'class-variance-authority';
 export declare const buttonVariants: (props?: ({
-    variant?: "link" | "none" | "default" | "destructive" | "outline" | "secondary" | "transparent" | "contained" | "outlined" | "ghost" | null | undefined;
-    color?: "secondary" | "primary" | "error" | null | undefined;
-    size?: "icon" | "sm" | "lg" | null | undefined;
+    variant?: "none" | "contained" | "outlined" | "ghost" | null | undefined;
+    color?: "primary" | "secondary" | "error" | null | undefined;
+    size?: "xs" | "sm" | "md" | "lg" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export type ButtonCVAProps = VariantProps<typeof buttonVariants>;
-type ButtonCVANoVariantProps = Omit<VariantProps<typeof buttonVariants>, 'variant'>;
-type ButtonCVANoSizeProps = Omit<VariantProps<typeof buttonVariants>, 'size'>;
-type ButtonCVAVariants = ButtonCVAProps['variant'];
-/** @deprecated use "variant=contained color=primary" instead */
-type LegacyDefaultVariant = 'default';
-/** @deprecated use "variant=outlined color=primary" instead */
-type LegacyOutlineVariant = 'outline';
-/** @deprecated use "variant=text color=primary" instead */
-type LegacyGhostVariant = 'ghost';
-/** @deprecated use "variant=contained color=secondary" instead */
-type LegacySecondaryVariant = 'secondary';
-/** @deprecated use "variant=contained color=error" instead */
-type LegacyDestructiveVariant = 'destructive';
-/** @deprecated use "?? no implemented yet" instead */
-type LegacyLinkVariant = 'link';
-type ModernVariant = Exclude<ButtonCVAVariants, 'default' | 'outline' | 'ghost' | 'link' | 'secondary' | 'destructive'> | LegacyDefaultVariant | LegacyOutlineVariant | LegacyGhostVariant | LegacySecondaryVariant | LegacyDestructiveVariant | LegacyLinkVariant;
-type ButtonCVASizes = ButtonCVAProps['size'];
-/** @deprecated use "<ButtonIcon/>" instead */
-type LegacyIconSize = 'icon';
-type ModernSize = Exclude<ButtonCVASizes, 'icon'> | LegacyIconSize;
-export interface ButtonVariantProps extends ButtonCVANoVariantProps, ButtonCVANoSizeProps {
-    variant?: ModernVariant;
-    size?: ModernSize;
-}
-export {};
+export type ButtonVarianceProps = VariantProps<typeof buttonVariants>;
+export declare const buttonBadgeVariants: (props?: ({
+    variant?: "none" | "contained" | "outlined" | "ghost" | null | undefined;
+    color?: "primary" | "secondary" | "error" | null | undefined;
+    size?: "xs" | "sm" | "md" | "lg" | null | undefined;
+    rounded?: boolean | null | undefined;
+    disabled?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type ButtonBadgeCVAProps = VariantProps<typeof buttonBadgeVariants>;
 //# sourceMappingURL=buttonVariants.d.ts.map

package/Button/buttonVariants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"buttonVariants.d.ts","sourceRoot":"","sources":["../../src/Button/buttonVariants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGlE,eAAO,MAAM,cAAc;;;;8EAoJ1B,CAAA;AAED,MAAM,MAAM,cAAc,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC;AAEjE,KAAK,uBAAuB,GAAG,IAAI,CAAC,YAAY,CAAC,OAAO,cAAc,CAAC,EAAE,SAAS,CAAC,CAAA;AACnF,KAAK,oBAAoB,GAAG,IAAI,CAAC,YAAY,CAAC,OAAO,cAAc,CAAC,EAAE,MAAM,CAAC,CAAA;AAE7E,KAAK,iBAAiB,GAAG,cAAc,CAAC,SAAS,CAAC,CAAC;AAEnD,gEAAgE;AAChE,KAAK,oBAAoB,GAAG,SAAS,CAAC;AACtC,+DAA+D;AAC/D,KAAK,oBAAoB,GAAG,SAAS,CAAC;AACtC,2DAA2D;AAC3D,KAAK,kBAAkB,GAAG,OAAO,CAAC;AAClC,kEAAkE;AAClE,KAAK,sBAAsB,GAAG,WAAW,CAAC;AAC1C,8DAA8D;AAC9D,KAAK,wBAAwB,GAAG,aAAa,CAAC;AAC9C,sDAAsD;AACtD,KAAK,iBAAiB,GAAG,MAAM,CAAC;AAEhC,KAAK,aAAa,GACd,OAAO,CAAC,iBAAiB,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,WAAW,GAAG,aAAa,CAAC,GAClG,oBAAoB,GACpB,oBAAoB,GACpB,kBAAkB,GAClB,sBAAsB,GACtB,wBAAwB,GACxB,iBAAiB,CAAC;AAEtB,KAAK,cAAc,GAAG,cAAc,CAAC,MAAM,CAAC,CAAC;AAE7C,8CAA8C;AAC9C,KAAK,cAAc,GAAG,MAAM,CAAC;AAE7B,KAAK,UAAU,GACX,OAAO,CAAC,cAAc,EAAE,MAAM,CAAC,GAC/B,cAAc,CAAC;AAEnB,MAAM,WAAW,kBAAmB,SAAQ,uBAAuB,EAAE,oBAAoB;IACvF,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,IAAI,CAAC,EAAE,UAAU,CAAA;CAClB"}
+{"version":3,"file":"buttonVariants.d.ts","sourceRoot":"","sources":["../../src/Button/buttonVariants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGlE,eAAO,MAAM,cAAc;;;;8EA8I1B,CAAA;AAED,MAAM,MAAM,mBAAmB,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC;AAEtE,eAAO,MAAM,mBAAmB;;;;;;8EAoE/B,CAAA;AACD,MAAM,MAAM,mBAAmB,GAAG,YAAY,CAAC,OAAO,mBAAmB,CAAC,CAAC"}

package/Button/buttonVariants.js

@@ -1,24 +1,17 @@
 import { cva as r } from "class-variance-authority";
 import { cn as e } from "@oneplatformdev/utils";
-const o = r(
+const s = r(
   [
     "inline-flex items-center justify-center",
     "whitespace-nowrap font-medium",
     "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]:size-4 [&_svg]:shrink-0"
+    "[&_svg]:pointer-events-none [&_svg]:shrink-0"
   ],
   {
     variants: {
       variant: {
-        default: "deprecated.do_not_use",
-        outline: "deprecated.do_not_use",
-        secondary: "deprecated.do_not_use",
-        destructive: "deprecated.do_not_use",
-        link: "deprecated.do_not_use",
-        //
-        transparent: "bg-transparent hover:bg-transparent hover:text-accent-foreground",
         none: "",
         contained: "",
         outlined: "",
@@ -30,8 +23,9 @@ const o = r(
         error: ""
       },
       size: {
-        icon: "deprecated.do_not_use",
-        sm: e(
+        xs: "rounded-sm p-1 gap-1 text-xs min-h-4 min-w-14",
+        sm: "rounded-md p-1 gap-1 text-sm min-h-6 min-w-20",
+        md: e(
           "min-h-8 min-w-[102px] rounded-lg gap-1 px-2 py-1",
           "text-sm leading-[1.12] [&_svg]:size-6"
         ),
@@ -148,8 +142,76 @@ const o = r(
       size: "lg"
     }
   }
+), o = r(
+  [
+    "absolute z-0",
+    "flex items-center justify-center text-center p-0",
+    "font-medium leading-none tracking-tighter",
+    "rounded-full w-fit min-w-3 h-3 text-[8px] px-px box-border"
+  ],
+  {
+    variants: {
+      variant: {
+        none: "",
+        contained: "",
+        outlined: "",
+        ghost: ""
+      },
+      color: {
+        primary: "",
+        secondary: "",
+        error: ""
+      },
+      size: {
+        xs: "",
+        sm: "",
+        md: "",
+        lg: "-top-[2px] left-[14px]"
+      },
+      rounded: {
+        true: "left-1/2 -translate-x-1/2 -translate-y-1/2",
+        false: ""
+      },
+      disabled: {
+        true: "",
+        false: ""
+      }
+    },
+    compoundVariants: [
+      // SIZE XS
+      { size: "xs", rounded: !1, className: "-top-px -right-px translate-x-1/2 -translate-y-1/2" },
+      { size: "xs", rounded: !0, className: "-top-px" },
+      // SIZE SM
+      { size: "sm", rounded: !1, className: "top-0 right-0 translate-x-1/2 -translate-y-1/2" },
+      { size: "sm", rounded: !0, className: "-top-[3px]" },
+      // SIZE MD
+      { size: "md", rounded: !1, className: "-top-[4px] left-[12px]" },
+      { size: "md", rounded: !0, className: "-top-[6px]" },
+      // SIZE LG
+      { size: "lg", rounded: !1, className: "-top-[4px] left-[12px]" },
+      { size: "lg", rounded: !0, className: "-top-2" },
+      // COLORS
+      {
+        color: ["primary", "secondary", "error"],
+        className: "bg-[#9368FF] text-[#FCFCFC]"
+      },
+      {
+        color: ["primary", "secondary", "error"],
+        disabled: !0,
+        className: "bg-[#666A78] text-[#FCFCFC]"
+      }
+    ],
+    defaultVariants: {
+      color: "primary",
+      variant: "contained",
+      size: "lg",
+      disabled: !1,
+      rounded: !1
+    }
+  }
 );
 export {
-  o as buttonVariants
+  o as buttonBadgeVariants,
+  s as buttonVariants
 };
 //# sourceMappingURL=buttonVariants.js.map

package/Button/buttonVariants.js.map

@@ -1 +1 @@
-{"version":3,"file":"buttonVariants.js","sources":["../../src/Button/buttonVariants.ts"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from \"@oneplatformdev/utils\";\n\nexport const buttonVariants = cva(\n  [\n    \"inline-flex items-center justify-center\",\n    'whitespace-nowrap font-medium',\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]:size-4 [&_svg]:shrink-0\",\n  ],\n  {\n    variants: {\n      variant: {\n        default: \"deprecated.do_not_use\",\n        outline: \"deprecated.do_not_use\",\n        secondary: \"deprecated.do_not_use\",\n        destructive: \"deprecated.do_not_use\",\n        link: \"deprecated.do_not_use\",\n        //\n        transparent: \"bg-transparent hover:bg-transparent hover:text-accent-foreground\",\n        none: \"\",\n        contained: \"\",\n        outlined: \"\",\n        ghost: '',\n      },\n      color: {\n        primary: '',\n        secondary: '',\n        error: '',\n      },\n      size: {\n        icon: \"deprecated.do_not_use\",\n        sm: cn(\n          'min-h-8 min-w-[102px] rounded-lg gap-1 px-2 py-1',\n          'text-sm leading-[1.12] [&_svg]:size-6',\n        ),\n        lg: cn(\n          \"min-h-10 min-w-35 rounded-lg gap-1 px-3 py-2\",\n          'text-base leading-normal [&_svg]:size-6',\n        )\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    ],\n    defaultVariants: {\n      variant: 'contained',\n      color: 'primary',\n      size: 'lg',\n    },\n  }\n)\n\nexport type ButtonCVAProps = VariantProps<typeof buttonVariants>;\n\ntype ButtonCVANoVariantProps = Omit<VariantProps<typeof buttonVariants>, 'variant'>\ntype ButtonCVANoSizeProps = Omit<VariantProps<typeof buttonVariants>, 'size'>\n\ntype ButtonCVAVariants = ButtonCVAProps['variant'];\n\n/** @deprecated use \"variant=contained color=primary\" instead */\ntype LegacyDefaultVariant = 'default';\n/** @deprecated use \"variant=outlined color=primary\" instead */\ntype LegacyOutlineVariant = 'outline';\n/** @deprecated use \"variant=text color=primary\" instead */\ntype LegacyGhostVariant = 'ghost';\n/** @deprecated use \"variant=contained color=secondary\" instead */\ntype LegacySecondaryVariant = 'secondary';\n/** @deprecated use \"variant=contained color=error\" instead */\ntype LegacyDestructiveVariant = 'destructive';\n/** @deprecated use \"?? no implemented yet\" instead */\ntype LegacyLinkVariant = 'link';\n\ntype ModernVariant =\n  | Exclude<ButtonCVAVariants, 'default' | 'outline' | 'ghost' | 'link' | 'secondary' | 'destructive'>\n  | LegacyDefaultVariant\n  | LegacyOutlineVariant\n  | LegacyGhostVariant\n  | LegacySecondaryVariant\n  | LegacyDestructiveVariant\n  | LegacyLinkVariant;\n\ntype ButtonCVASizes = ButtonCVAProps['size'];\n\n/** @deprecated use \"<ButtonIcon/>\" instead */\ntype LegacyIconSize = 'icon';\n\ntype ModernSize =\n  | Exclude<ButtonCVASizes, 'icon'>\n  | LegacyIconSize;\n\nexport interface ButtonVariantProps extends ButtonCVANoVariantProps, ButtonCVANoSizeProps {\n  variant?: ModernVariant;\n  size?: ModernSize\n}\n"],"names":["buttonVariants","cva","cn"],"mappings":";;AAGO,MAAMA,IAAiBC;AAAA,EAC5B;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAAA,EAEF;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SAAS;AAAA,QACT,SAAS;AAAA,QACT,WAAW;AAAA,QACX,aAAa;AAAA,QACb,MAAM;AAAA;AAAA,QAEN,aAAa;AAAA,QACb,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,MAAM;AAAA,QACN,IAAIC;AAAA,UACF;AAAA,UACA;AAAA,QAAA;AAAA,QAEF,IAAIA;AAAA,UACF;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA,IACF;AAAA,IAEF,kBAAkB;AAAA;AAAA,MAEhB;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,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,IACF;AAAA,IAEF,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,OAAO;AAAA,MACP,MAAM;AAAA,IAAA;AAAA,EACR;AAEJ;"}
+{"version":3,"file":"buttonVariants.js","sources":["../../src/Button/buttonVariants.ts"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from \"@oneplatformdev/utils\";\n\nexport const buttonVariants = cva(\n  [\n    \"inline-flex items-center justify-center\",\n    'whitespace-nowrap font-medium',\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: 'rounded-sm p-1 gap-1 text-xs min-h-4 min-w-14',\n        sm: 'rounded-md p-1 gap-1 text-sm min-h-6 min-w-20',\n        md: cn(\n          'min-h-8 min-w-[102px] rounded-lg gap-1 px-2 py-1',\n          'text-sm leading-[1.12] [&_svg]:size-6',\n        ),\n        lg: cn(\n          \"min-h-10 min-w-35 rounded-lg gap-1 px-3 py-2\",\n          'text-base leading-normal [&_svg]:size-6',\n        )\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    ],\n    defaultVariants: {\n      variant: 'contained',\n      color: 'primary',\n      size: 'lg',\n    },\n  }\n)\n\nexport type ButtonVarianceProps = VariantProps<typeof buttonVariants>;\n\nexport const buttonBadgeVariants = cva(\n  [\n    'absolute z-0',\n    'flex items-center justify-center text-center p-0',\n    'font-medium leading-none tracking-tighter',\n    'rounded-full w-fit min-w-3 h-3 text-[8px] px-px box-border',\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: '',\n        sm: '',\n        md: '',\n        lg: '-top-[2px] left-[14px]',\n      },\n      rounded: {\n        true: 'left-1/2 -translate-x-1/2 -translate-y-1/2',\n        false: '',\n      },\n      disabled: {\n        true: '',\n        false: '',\n      }\n    },\n    compoundVariants: [\n      // SIZE XS\n      { size: 'xs', rounded: false, className: '-top-px -right-px translate-x-1/2 -translate-y-1/2' },\n      { size: 'xs', rounded: true, className: '-top-px' },\n      // SIZE SM\n      { size: 'sm', rounded: false, className: 'top-0 right-0 translate-x-1/2 -translate-y-1/2' },\n      { size: 'sm', rounded: true, className: '-top-[3px]' },\n      // SIZE MD\n      { size: 'md', rounded: false, className: '-top-[4px] left-[12px]' },\n      { size: 'md', rounded: true, className: '-top-[6px]' },\n      // SIZE LG\n      { size: 'lg', rounded: false, className: '-top-[4px] left-[12px]' },\n      { size: 'lg', rounded: true, className: '-top-2' },\n\n      // COLORS\n      {\n        color: ['primary', 'secondary', 'error'],\n        className: 'bg-[#9368FF] text-[#FCFCFC]',\n      },\n      {\n        color: ['primary', 'secondary', 'error'],\n        disabled: true,\n        className: 'bg-[#666A78] text-[#FCFCFC]'\n      },\n    ],\n    defaultVariants: {\n      color: \"primary\",\n      variant: \"contained\",\n      size: \"lg\",\n      disabled: false,\n      rounded: false,\n    },\n  }\n)\nexport type ButtonBadgeCVAProps = VariantProps<typeof buttonBadgeVariants>;\n"],"names":["buttonVariants","cva","cn","buttonBadgeVariants"],"mappings":"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"}

package/Button/index.js

@@ -1,8 +1,9 @@
-import { Button as r, Button as a } from "./Button.js";
-import { buttonVariants as u } from "./buttonVariants.js";
+import { Button as a, Button as n } from "./Button.js";
+import { buttonBadgeVariants as u, buttonVariants as e } from "./buttonVariants.js";
 export {
-  r as Button,
-  u as buttonVariants,
-  a as default
+  a as Button,
+  u as buttonBadgeVariants,
+  e as buttonVariants,
+  n as default
 };
 //# sourceMappingURL=index.js.map

package/ButtonIcon/ButtonIcon.d.ts

@@ -1,4 +1,60 @@
 import { ButtonIconProps } from './ButtonIcon.types';
 import * as React from "react";
+/**
+ * Icon-only version of the Button component.
+ *
+ * `ButtonIcon` is used for compact actions represented by an icon instead of text.
+ * Supports all core features of Button: variants, sizes, tooltips, disabled and loading state.
+ *
+ * @public
+ * @see [Documentation](#) // TODO: add link to docs
+ *
+ * @example
+ * > Import:
+ * ```tsx
+ * import { ButtonIcon } from '@oneplatformdev/ui/ButtonIcon';
+ * ```
+ * > Basic usage by icon:
+ * ```tsx
+ *<ButtonIcon icon={<PlusIcon />}/>
+ *<ButtonIcon icon={PlusIcon}/>
+ * ```
+ * > Basic usage by children:
+ * ```tsx
+ *<ButtonIcon>
+ *  <PlusIcon />
+ *</ButtonIcon>
+ * ```
+ * > With variant & color:
+ * ```tsx
+ *<ButtonIcon variant="outline" color="primary">
+ *  <Search />
+ *</ButtonIcon>
+ * ```
+ * > With tooltip message:
+ * ```tsx
+ *<ButtonIcon message="Edit item">
+ *  <PencilLine />
+ *</ButtonIcon>
+ * ```
+ * > Loading state:
+ * ```tsx
+ *<ButtonIcon loading>
+ *  <Trash2 />
+ *</ButtonIcon>
+ * ```
+ * > Badge counter:
+ * ```tsx
+ *<ButtonIcon counter={5} icon={MessageCircleMoreIcon}/>
+ *<ButtonIcon counter={{ count: 8 }} icon={MessageCircleMoreIcon}/>
+ * ```
+ *
+ * @remarks
+ * - Designed for icon-only usage. If you need text, use `Button`.
+ * - Works with any SVG React component or element, e.g. lucide-react, heroicons, custom icons.
+ *
+ * @see {@link Button} for regular text buttons
+ */
 export declare const ButtonIcon: React.ForwardRefExoticComponent<ButtonIconProps & React.RefAttributes<HTMLButtonElement>>;
+export default ButtonIcon;
 //# sourceMappingURL=ButtonIcon.d.ts.map

package/ButtonIcon/ButtonIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonIcon.d.ts","sourceRoot":"","sources":["../../src/ButtonIcon/ButtonIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAMrD,eAAO,MAAM,UAAU,2FAsDtB,CAAA"}
+{"version":3,"file":"ButtonIcon.d.ts","sourceRoot":"","sources":["../../src/ButtonIcon/ButtonIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAerD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsDG;AACH,eAAO,MAAM,UAAU,2FAgFtB,CAAA;AAED,eAAe,UAAU,CAAC"}

package/ButtonIcon/ButtonIcon.js

@@ -1,60 +1,85 @@
-import { jsx as n } from "react/jsx-runtime";
-import * as I from "react";
-import { cn as N } from "@oneplatformdev/utils";
-import { buttonIconVariants as x } from "./buttonIconVariants.js";
-import { Slot as B } from "@radix-ui/react-slot";
+import { jsxs as g, Fragment as R, jsx as r } from "react/jsx-runtime";
+import * as j from "react";
+import { isValidElement as E, createElement as I } from "react";
+import { cn as V } from "@oneplatformdev/utils";
+import { buttonIconVariants as w } from "./buttonIconVariants.js";
+import { Slot as z } from "@radix-ui/react-slot";
 import "@radix-ui/react-tooltip";
-import { Tooltip as C } from "../Tooltip/Tooltip.js";
-import { LoadedIcon as R } from "../LoadedIcon/LoadedIcon.js";
-const j = I.forwardRef(
-  (m, c) => {
+import { Tooltip as F } from "../Tooltip/Tooltip.js";
+import { LoadedIcon as L } from "../LoadedIcon/LoadedIcon.js";
+import { ButtonCounterBadge as P } from "../Button/ButtonCounterBadge.js";
+const S = (t) => t ? E(t) ? t : I(t) : null, T = j.forwardRef(
+  (t, h) => {
     const {
-      asChild: r,
-      children: o,
-      disabled: s = !1,
-      loading: t = !1,
-      message: p,
-      title: l = "",
-      tooltipProps: i = {},
-      className: d,
-      variant: f,
-      color: u,
-      size: b,
-      rounded: g,
-      ...h
-    } = m, v = r ? B : "button", e = p || l, y = r ? o : !!o && /* @__PURE__ */ n(R, { loading: t, children: o }), a = /* @__PURE__ */ n(
-      v,
+      asChild: a,
+      children: m,
+      icon: b,
+      disabled: e = !1,
+      loading: n = !1,
+      message: y,
+      title: x = "",
+      tooltipProps: l = {},
+      className: B,
+      variant: c,
+      color: p,
+      size: s,
+      rounded: u,
+      screenReader: o,
+      counter: N,
+      ...v
+    } = t, C = a ? z : "button", i = y || x, d = a ? m : /* @__PURE__ */ g(R, { children: [
+      /* @__PURE__ */ g(L, { loading: n, size: s, children: [
+        S(b) ?? m,
+        /* @__PURE__ */ r(
+          P,
+          {
+            counter: N,
+            variant: c,
+            color: p,
+            size: s,
+            disabled: e,
+            rounded: u
+          }
+        )
+      ] }),
+      !!o && /* @__PURE__ */ r("span", { className: "sr-only", children: typeof o == "string" ? o : o.text })
+    ] });
+    if (!d) return null;
+    const f = /* @__PURE__ */ r(
+      C,
       {
         type: "button",
-        ref: c,
-        disabled: s,
-        className: N(
-          x({
-            variant: f,
-            size: b,
-            color: u,
-            rounded: g,
-            className: d
+        ref: h,
+        disabled: e,
+        className: V(
+          "group group/button group/button-icon",
+          w({
+            variant: c,
+            size: s,
+            color: p,
+            rounded: u,
+            className: B
           }),
-          t && "pointer-events-none opacity-80"
+          n && "pointer-events-none opacity-80"
         ),
-        ...h,
-        children: y
+        ...v,
+        children: d
       }
     );
-    return e ? /* @__PURE__ */ n(
-      C,
+    return i ? /* @__PURE__ */ r(
+      F,
       {
-        ...i || {},
-        open: i.open ?? (s || t || !e) ? !1 : void 0,
-        message: e,
-        children: a
+        ...l || {},
+        open: l.open ?? (e || n || !i) ? !1 : void 0,
+        message: i,
+        children: f
       }
-    ) : a;
+    ) : f;
   }
 );
-j.displayName = "Button";
+T.displayName = "Button";
 export {
-  j as ButtonIcon
+  T as ButtonIcon,
+  T as default
 };
 //# sourceMappingURL=ButtonIcon.js.map