@vkzstudio/muza-ui 1.0.0 → 1.0.1

package/dist/components/Tag/Tag.js

@@ -0,0 +1,94 @@
+import { jsxs as g, jsx as r } from "react/jsx-runtime";
+import "react";
+import { Slot as m } from "@radix-ui/react-slot";
+import { cva as d } from "class-variance-authority";
+import f from "../../node_modules/color/index.js";
+import { Typography as x } from "../Typography/Typography.js";
+import { cn as b } from "../../utils/cn.js";
+const u = d(
+  "inline-flex w-fit shrink-0 items-center justify-center gap-xs rounded-full whitespace-nowrap [&>svg]:pointer-events-none",
+  {
+    variants: {
+      variant: {
+        filled: "border border-stroke-base-primary bg-surface-base-secondary text-text-dark-primary-def",
+        outlined: "border border-stroke-base-primary text-text-dark-primary-def",
+        warning: "bg-surface-state-bg-warning text-comp-alert-text-warning",
+        success: "bg-surface-state-bg-success text-comp-alert-text-success",
+        error: "bg-surface-state-bg-error text-comp-alert-text-error",
+        info: "bg-surface-state-bg-info text-comp-alert-text-info",
+        invert: "border border-stroke-base-disabled bg-surface-icon-bg-light text-text-invert-def backdrop-blur-[7.5px]"
+      },
+      size: {
+        small: "px-sm py-2xs",
+        default: "px-md py-xs"
+      },
+      isInTable: {
+        true: "[&>svg]:size-comp-tag-dot-size",
+        false: "[&>svg]:size-comp-tag-ico-size"
+      }
+    },
+    defaultVariants: {
+      variant: "outlined",
+      size: "default",
+      isInTable: !1
+    }
+  }
+), N = ({
+  className: a,
+  variant: s,
+  asChild: o = !1,
+  children: i,
+  size: n,
+  icon: c,
+  isInTable: t = !1,
+  style: l,
+  color: e,
+  ...p
+}) => /* @__PURE__ */ g(
+  o ? m : "span",
+  {
+    "data-slot": "badge",
+    className: b(
+      u({ variant: s, size: n, isInTable: t }),
+      {
+        "border-transparent bg-(--tag-bg-color) text-(--tag-text-color)": e
+      },
+      a
+    ),
+    style: {
+      "--tag-bg-color": f(e).alpha(0.1),
+      "--tag-text-color": e,
+      ...l
+    },
+    ...p,
+    children: [
+      t ? /* @__PURE__ */ r(
+        "svg",
+        {
+          xmlns: "http://www.w3.org/2000/svg",
+          width: "6",
+          height: "6",
+          viewBox: "0 0 6 6",
+          fill: "none",
+          children: /* @__PURE__ */ r("circle", { cx: "3", cy: "3", r: "3", fill: "currentColor" })
+        }
+      ) : c,
+      /* @__PURE__ */ r(
+        x,
+        {
+          component: "span",
+          variant: "body",
+          weight: "medium",
+          size: t ? "sm" : "caption",
+          className: "truncate text-inherit",
+          fixY: !0,
+          children: i
+        }
+      )
+    ]
+  }
+);
+export {
+  N as Tag,
+  u as tagVariants
+};

package/dist/components/Tag/Tag.stories.d.ts

@@ -3,18 +3,8 @@ import { Tag } from './Tag';
 declare const meta: Meta<typeof Tag>;
 export default meta;
 type Story = StoryObj<typeof Tag>;
-export declare const Outlined: Story;
-export declare const OutlinedForUseInTable: Story;
-export declare const Warning: Story;
-export declare const WarningForUseInTable: Story;
-export declare const Success: Story;
-export declare const SuccessForUseInTable: Story;
-export declare const Error: Story;
-export declare const ErrorForUseInTable: Story;
-export declare const Info: Story;
-export declare const InfoForUseInTable: Story;
-export declare const Invert: Story;
-export declare const InvertForUseInTable: Story;
+export declare const Default: Story;
 export declare const AllVariants: Story;
+export declare const CustomColor: Story;
 export declare const AllVariantsInTable: Story;
 //# sourceMappingURL=Tag.stories.d.ts.map

package/dist/components/Tag/Tag.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/Tag.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAC3D,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAG3B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,GAAG,CAyD1B,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,GAAG,CAAC,CAAA;AAEjC,eAAO,MAAM,QAAQ,EAAE,KAgDtB,CAAA;AAED,eAAO,MAAM,qBAAqB,EAAE,KAmCnC,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KA6CrB,CAAA;AAED,eAAO,MAAM,oBAAoB,EAAE,KAkClC,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KA6CrB,CAAA;AAED,eAAO,MAAM,oBAAoB,EAAE,KAkClC,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KA6CnB,CAAA;AAED,eAAO,MAAM,kBAAkB,EAAE,KAkChC,CAAA;AAED,eAAO,MAAM,IAAI,EAAE,KA6ClB,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KAkC/B,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KA6CpB,CAAA;AAED,eAAO,MAAM,mBAAmB,EAAE,KAmCjC,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAgEzB,CAAA;AAED,eAAO,MAAM,kBAAkB,EAAE,KAmDhC,CAAA"}
+{"version":3,"file":"Tag.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/Tag.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAE3D,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAE3B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,GAAG,CAiE1B,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,GAAG,CAAC,CAAA;AAEjC,eAAO,MAAM,OAAO,EAAE,KAkBrB,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAuEzB,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KA6CzB,CAAA;AAED,eAAO,MAAM,kBAAkB,EAAE,KAwDhC,CAAA"}

package/dist/components/Textarea/Textarea.d.ts

@@ -1,5 +1,5 @@
-import * as React from 'react';
-interface TextareaProps extends React.ComponentProps<'textarea'> {
+import { ComponentProps } from 'react';
+interface TextareaProps extends ComponentProps<'textarea'> {
     resize?: 'none' | 'vertical' | 'horizontal' | 'both';
     label?: string;
     hint?: string;
@@ -8,6 +8,6 @@ interface TextareaProps extends React.ComponentProps<'textarea'> {
     name?: string;
     autoResize?: boolean;
 }
-declare function Textarea({ className, label, hint, id, error, resize, autoResize, errorMessage, ...props }: TextareaProps): import("react/jsx-runtime").JSX.Element;
-export { Textarea };
+export declare const Textarea: import('react').ForwardRefExoticComponent<Omit<TextareaProps, "ref"> & import('react').RefAttributes<HTMLTextAreaElement>>;
+export {};
 //# sourceMappingURL=Textarea.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../../src/components/Textarea/Textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AA0C9B,UAAU,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC;IAC9D,MAAM,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,YAAY,GAAG,MAAM,CAAA;IACpD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB;AAED,iBAAS,QAAQ,CAAC,EAChB,SAAS,EACT,KAAK,EACL,IAAI,EACJ,EAAE,EACF,KAAK,EACL,MAAM,EACN,UAAU,EACV,YAAY,EACZ,GAAG,KAAK,EACT,EAAE,aAAa,2CA4Df;AAED,OAAO,EAAE,QAAQ,EAAE,CAAA"}
+{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../../src/components/Textarea/Textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAA6B,MAAM,OAAO,CAAA;AAyCtE,UAAU,aAAc,SAAQ,cAAc,CAAC,UAAU,CAAC;IACxD,MAAM,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,YAAY,GAAG,MAAM,CAAA;IACpD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB;AAED,eAAO,MAAM,QAAQ,4HA0EpB,CAAA"}

package/dist/components/Textarea/Textarea.js

@@ -0,0 +1,102 @@
+import { jsxs as v, jsx as r } from "react/jsx-runtime";
+import { forwardRef as w, useId as I, useRef as k } from "react";
+import { cva as N } from "class-variance-authority";
+import { Typography as d, typographyVariants as R } from "../Typography/Typography.js";
+import { cn as c } from "../../utils/cn.js";
+const T = N(
+  [
+    R({
+      variant: "body",
+      weight: "medium",
+      size: "base"
+    }),
+    "w-full bg-comp-input-fill-def px-comp-input-p-hor py-xl font-text text-comp-input-text-primary transition-colors",
+    "placeholder:font-regular placeholder:text-comp-input-text-placeholder",
+    "rounded-xl border border-comp-input-stroke-def",
+    "hover:border-comp-input-stroke-hover",
+    "disabled:cursor-not-allowed disabled:border-comp-input-stroke-disabled disabled:bg-comp-input-fill-disabled",
+    "outline-none focus:border-comp-input-stroke-focused"
+  ],
+  {
+    variants: {
+      error: {
+        true: "border-comp-input-stroke-error-def"
+      },
+      resize: {
+        none: "resize-none",
+        vertical: "resize-y",
+        horizontal: "resize-x",
+        both: "resize"
+      },
+      autoResize: {
+        true: "overflow-hidden"
+      }
+    },
+    defaultVariants: {
+      error: !1,
+      resize: "none"
+    }
+  }
+), V = w(
+  ({
+    className: m,
+    label: a,
+    hint: i,
+    id: u,
+    error: o,
+    resize: x,
+    autoResize: n,
+    errorMessage: s,
+    ...f
+  }, l) => {
+    const h = I(), e = u ?? h, b = `${e}-hint`, g = `${e}-label`, y = k(null), p = (typeof l == "function" ? null : l) ?? y, z = () => {
+      const t = p.current;
+      t && (t.style.height = "auto", t.style.height = `${t.scrollHeight + 2}px`);
+    };
+    return /* @__PURE__ */ v("div", { className: "flex flex-col gap-comp-input-gap", children: [
+      a && /* @__PURE__ */ r(
+        d,
+        {
+          component: "label",
+          weight: "regular",
+          size: "sm",
+          htmlFor: e,
+          id: g,
+          className: "text-comp-input-text-primary",
+          children: a
+        }
+      ),
+      /* @__PURE__ */ r(
+        "textarea",
+        {
+          "data-slot": "textarea",
+          ref: p,
+          id: e,
+          className: c(
+            T({ error: o, resize: x, autoResize: n }),
+            m
+          ),
+          ...f,
+          onInput: n ? z : void 0
+        }
+      ),
+      i && /* @__PURE__ */ r(
+        d,
+        {
+          component: "span",
+          size: "sm",
+          weight: "regular",
+          className: c("text-comp-input-text-secondary", {
+            "text-comp-input-text-error": o
+          }),
+          id: b,
+          children: o && s ? s : i
+        }
+      )
+    ] });
+  }
+);
+V.displayName = "Textarea";
+export {
+  V as Textarea
+};

package/dist/components/Textarea/Textarea.stories.d.ts

@@ -4,10 +4,10 @@ declare const meta: Meta<typeof Textarea>;
 export default meta;
 type Story = StoryObj<typeof Textarea>;
 export declare const Default: Story;
+export declare const WithTitleAndHint: Story;
 export declare const Filled: Story;
 export declare const Error: Story;
 export declare const Disabled: Story;
 export declare const AutoResize: Story;
 export declare const ResizableHandles: Story;
-export declare const NoTitleOrHint: Story;
 //# sourceMappingURL=Textarea.stories.d.ts.map

package/dist/components/Textarea/Textarea.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Textarea/Textarea.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAC3D,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAErC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,QAAQ,CAgF/B,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,QAAQ,CAAC,CAAA;AAEtC,eAAO,MAAM,OAAO,EAAE,KAcrB,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAepB,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAgBnB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAetB,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAexB,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KAe9B,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAY3B,CAAA"}
+{"version":3,"file":"Textarea.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Textarea/Textarea.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAC3D,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAErC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,QAAQ,CAgF/B,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,QAAQ,CAAC,CAAA;AAEtC,eAAO,MAAM,OAAO,EAAE,KAarB,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KAc9B,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAepB,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAgBnB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAetB,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAgBxB,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KAgB9B,CAAA"}

package/dist/components/TimePicker/TimePicker.d.ts

@@ -0,0 +1,4 @@
+import { InputProps } from '../Input';
+declare const TimePicker: ({ placeholder, ...props }: Omit<InputProps, "type" | "suffix">) => import("react/jsx-runtime").JSX.Element;
+export { TimePicker };
+//# sourceMappingURL=TimePicker.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TimePicker.d.ts","sourceRoot":"","sources":["../../../src/components/TimePicker/TimePicker.tsx"],"names":[],"mappings":"AACA,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,UAAU,CAAA;AAEjD,QAAA,MAAM,UAAU,GAAI,2BAGjB,IAAI,CAAC,UAAU,EAAE,MAAM,GAAG,QAAQ,CAAC,4CAcrC,CAAA;AAED,OAAO,EAAE,UAAU,EAAE,CAAA"}

package/dist/components/TimePicker/TimePicker.js

@@ -0,0 +1,19 @@
+import { jsx as t } from "react/jsx-runtime";
+import { Input as i } from "../Input/Input.js";
+import { ClockCircleBold as m } from "@solar-icons/react-perf";
+const s = ({
+  placeholder: e,
+  ...o
+}) => /* @__PURE__ */ t(
+  i,
+  {
+    type: e ? "text" : "time",
+    placeholder: e,
+    suffix: /* @__PURE__ */ t(m, { className: "size-icon-medium text-icon-dark-secondary-def" }),
+    onFocus: () => document.activeElement.type = "time",
+    ...o
+  }
+);
+export {
+  s as TimePicker
+};

package/dist/components/TimePicker/TimePicker.stories.d.ts

@@ -0,0 +1,11 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { TimePicker } from './TimePicker';
+declare const meta: Meta<typeof TimePicker>;
+export default meta;
+type Story = StoryObj<typeof TimePicker>;
+export declare const Default: Story;
+export declare const TimePickerWithLabelAndHint: Story;
+export declare const TimePickerWithError: Story;
+export declare const DisabledTimePicker: Story;
+export declare const AllSizes: Story;
+//# sourceMappingURL=TimePicker.stories.d.ts.map

package/dist/components/TimePicker/TimePicker.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimePicker.stories.d.ts","sourceRoot":"","sources":["../../../src/components/TimePicker/TimePicker.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAC3D,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAEzC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CAuEjC,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,UAAU,CAAC,CAAA;AAExC,eAAO,MAAM,OAAO,EAAE,KAarB,CAAA;AAED,eAAO,MAAM,0BAA0B,EAAE,KAexC,CAAA;AAED,eAAO,MAAM,mBAAmB,EAAE,KAejC,CAAA;AAED,eAAO,MAAM,kBAAkB,EAAE,KAgBhC,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAmCtB,CAAA"}

package/dist/components/TimePicker/index.d.ts

@@ -0,0 +1,2 @@
+export * from './TimePicker';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/TimePicker/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/TimePicker/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"Toggle.d.ts","sourceRoot":"","sources":["../../../src/components/Toggle/Toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAA;AACzD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAIjE,QAAA,MAAM,cAAc;;8EA4BnB,CAAA;AAED,MAAM,WAAW,WACf,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,EACvD,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB;AAED,QAAA,MAAM,MAAM,oGAmDX,CAAA;AAGD,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAA"}
+{"version":3,"file":"Toggle.d.ts","sourceRoot":"","sources":["../../../src/components/Toggle/Toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAA;AACzD,OAAO,EAAE,KAAK,YAAY,EAAO,MAAM,0BAA0B,CAAA;AAIjE,QAAA,MAAM,cAAc;;8EA4BnB,CAAA;AAED,MAAM,WAAW,WACf,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,EACvD,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB;AAED,QAAA,MAAM,MAAM,oGAoDX,CAAA;AAGD,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAA"}

package/dist/components/Toggle/Toggle.js

@@ -0,0 +1,88 @@
+import { jsxs as m, jsx as e } from "react/jsx-runtime";
+import * as p from "react";
+import * as f from "@radix-ui/react-toggle";
+import { cva as u } from "class-variance-authority";
+import { Typography as r } from "../Typography/Typography.js";
+import { cn as o } from "../../utils/cn.js";
+const b = u(
+  [
+    "group inline-flex items-center justify-center gap-sm",
+    "font-cta text-xs font-medium whitespace-nowrap outline-none",
+    "[&>svg]:size-icon-small",
+    "transition-colors duration-200",
+    // Default state (off)
+    "bg-surface-brand-brand-tertiary text-comp-button-tertiary-text-def",
+    // Hover state (off)
+    "cursor-pointer hover:bg-surface-base-primary-hover hover:text-comp-button-tertiary-text-def",
+    // Focus state
+    "focus-visible-default",
+    // Active/pressed state (on)
+    "data-[state=on]:bg-comp-button-primary-bg-def data-[state=on]:text-comp-button-primary-text-def",
+    // Disabled state
+    "disabled:pointer-events-none disabled:bg-surface-brand-primary-disabled disabled:text-text-dark-disabled"
+  ],
+  {
+    variants: {
+      variant: {
+        default: ["h-comp-button-h-sm w-max rounded-full px-comp-button-p-sm"],
+        icon: ["size-comp-button-h-sm rounded-full"]
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+), g = p.forwardRef(
+  ({ className: i, variant: a, showNumber: n, number: t, title: s, children: d, ...c }, l) => /* @__PURE__ */ m(
+    f.Root,
+    {
+      ref: l,
+      "data-slot": "toggle",
+      className: o(b({ variant: a, className: i })),
+      ...c,
+      children: [
+        n && t !== void 0 && /* @__PURE__ */ e(
+          "span",
+          {
+            className: o(
+              "flex size-2xl items-center justify-center rounded-3xl",
+              "transition-200 transition-colors",
+              "bg-surface-brand-primary text-text-invert-def",
+              "group-hover:bg-surface-brand-primary-hover",
+              "group-data-[state=on]:bg-surface-base-secondary group-data-[state=on]:text-text-brand-def",
+              "group-disabled:bg-surface-icon-bg-dark group-disabled:text-text-dark-disabled"
+            ),
+            children: /* @__PURE__ */ e(
+              r,
+              {
+                variant: "body",
+                size: "caption",
+                weight: "bold",
+                component: "span",
+                fixY: !0,
+                children: `${Math.min(Math.floor(t), 9)}${Math.floor(t) > 9 ? "+" : ""}`
+              }
+            )
+          }
+        ),
+        d,
+        a !== "icon" && /* @__PURE__ */ e(
+          r,
+          {
+            component: "span",
+            variant: "cta",
+            size: "sm",
+            weight: "medium",
+            fixY: !0,
+            children: s
+          }
+        )
+      ]
+    }
+  )
+);
+g.displayName = "Toggle";
+export {
+  g as Toggle,
+  b as toggleVariants
+};

package/dist/components/Toggle/Toggle.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toggle.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Toggle/Toggle.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAC3D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAGjC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CA0E7B,CAAA;AAED,eAAe,IAAI,CAAA;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,MAAM,CAAC,CAAA;AAEpC,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAoBtB,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAqBxB,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAgBzB,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KAwF/B,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAOxB,CAAA"}
+{"version":3,"file":"Toggle.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Toggle/Toggle.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAE3D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAEjC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CA0E7B,CAAA;AAED,eAAe,IAAI,CAAA;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,MAAM,CAAC,CAAA;AAEpC,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAoBtB,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAsBxB,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAiBzB,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KAwF/B,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAUxB,CAAA"}

package/dist/components/ToggleGroup/ToggleGroup.d.ts

@@ -1,10 +1,10 @@
 import { VariantProps } from 'class-variance-authority';
-import { toggleVariants, ToggleProps } from '../Toggle';
+import { ToggleProps, toggleVariants } from '../Toggle';
 import * as React from 'react';
 import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
 export type ToggleGroupProps = React.ComponentProps<typeof ToggleGroupPrimitive.Root> & VariantProps<typeof toggleVariants>;
-declare function ToggleGroup({ className, variant, children, ...props }: ToggleGroupProps): import("react/jsx-runtime").JSX.Element;
+declare const ToggleGroup: ({ className, variant, children, ...props }: ToggleGroupProps) => import("react/jsx-runtime").JSX.Element;
 export type ToggleGroupItemProps = React.ComponentProps<typeof ToggleGroupPrimitive.Item> & ToggleProps;
-declare function ToggleGroupItem({ className, variant, children, ...props }: ToggleGroupItemProps): import("react/jsx-runtime").JSX.Element;
+declare const ToggleGroupItem: ({ className, variant, children, ...props }: ToggleGroupItemProps) => import("react/jsx-runtime").JSX.Element;
 export { ToggleGroup, ToggleGroupItem };
 //# sourceMappingURL=ToggleGroup.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ToggleGroup.d.ts","sourceRoot":"","sources":["../../../src/components/ToggleGroup/ToggleGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,oBAAoB,MAAM,8BAA8B,CAAA;AACpE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAE5D,OAAO,EAAU,cAAc,EAAE,KAAK,WAAW,EAAE,MAAM,WAAW,CAAA;AAQpE,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,cAAc,CACjD,OAAO,oBAAoB,CAAC,IAAI,CACjC,GACC,YAAY,CAAC,OAAO,cAAc,CAAC,CAAA;AAErC,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,OAAO,EACP,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,gBAAgB,2CAgBlB;AAED,MAAM,MAAM,oBAAoB,GAAG,KAAK,CAAC,cAAc,CACrD,OAAO,oBAAoB,CAAC,IAAI,CACjC,GACC,WAAW,CAAA;AAEb,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,OAAO,EACP,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,oBAAoB,2CAmBtB;AAED,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,CAAA"}
+{"version":3,"file":"ToggleGroup.d.ts","sourceRoot":"","sources":["../../../src/components/ToggleGroup/ToggleGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,oBAAoB,MAAM,8BAA8B,CAAA;AACpE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAE5D,OAAO,EAAU,KAAK,WAAW,EAAE,cAAc,EAAE,MAAM,WAAW,CAAA;AAQpE,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,cAAc,CACjD,OAAO,oBAAoB,CAAC,IAAI,CACjC,GACC,YAAY,CAAC,OAAO,cAAc,CAAC,CAAA;AAErC,QAAA,MAAM,WAAW,GAAI,4CAKlB,gBAAgB,4CAgBlB,CAAA;AAED,MAAM,MAAM,oBAAoB,GAAG,KAAK,CAAC,cAAc,CACrD,OAAO,oBAAoB,CAAC,IAAI,CACjC,GACC,WAAW,CAAA;AAEb,QAAA,MAAM,eAAe,GAAI,4CAKtB,oBAAoB,4CAmBtB,CAAA;AAED,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,CAAA"}

package/dist/components/ToggleGroup/ToggleGroup.js

@@ -0,0 +1,55 @@
+import { jsx as e } from "react/jsx-runtime";
+import * as g from "react";
+import * as l from "@radix-ui/react-toggle-group";
+import "class-variance-authority";
+import { Toggle as m } from "../Toggle/Toggle.js";
+import { cn as p } from "../../utils/cn.js";
+const n = g.createContext({
+  variant: "default"
+}), f = ({
+  className: r,
+  variant: t,
+  children: a,
+  ...o
+}) => /* @__PURE__ */ e(
+  l.Root,
+  {
+    "data-slot": "toggle-group",
+    "data-variant": t,
+    className: p(
+      "group/toggle-group flex w-fit flex-wrap items-center gap-xs",
+      r
+    ),
+    ...o,
+    children: /* @__PURE__ */ e(n.Provider, { value: { variant: t }, children: a })
+  }
+), x = ({
+  className: r,
+  variant: t,
+  children: a,
+  ...o
+}) => {
+  const i = g.useContext(n);
+  return /* @__PURE__ */ e(
+    l.Item,
+    {
+      "data-slot": "toggle-group-item",
+      "data-variant": i.variant || t,
+      ...o,
+      asChild: !0,
+      children: /* @__PURE__ */ e(
+        m,
+        {
+          variant: t ?? i.variant,
+          title: o.title,
+          className: r,
+          children: a
+        }
+      )
+    }
+  );
+};
+export {
+  f as ToggleGroup,
+  x as ToggleGroupItem
+};

package/dist/components/ToggleGroup/ToggleGroup.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleGroup.stories.d.ts","sourceRoot":"","sources":["../../../src/components/ToggleGroup/ToggleGroup.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAC3D,OAAO,EAAE,WAAW,EAAmB,MAAM,eAAe,CAAA;AAK5D,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,WAAW,CA0DlC,CAAA;AAED,eAAe,IAAI,CAAA;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAA;AAEzC,eAAO,MAAM,OAAO,EAAE,KAarB,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAmBnB,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KA6DzB,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KAqB/B,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KA0CvB,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KAqD/B,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KA0BxB,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAaxB,CAAA"}
+{"version":3,"file":"ToggleGroup.stories.d.ts","sourceRoot":"","sources":["../../../src/components/ToggleGroup/ToggleGroup.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAE3D,OAAO,EAAE,WAAW,EAAmB,MAAM,eAAe,CAAA;AAI5D,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,WAAW,CA0DlC,CAAA;AAED,eAAe,IAAI,CAAA;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAA;AAEzC,eAAO,MAAM,OAAO,EAAE,KAgBrB,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAsBnB,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KA6DzB,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KAsB/B,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KA0CvB,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KAqD/B,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KA2BxB,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAgBxB,CAAA"}

package/dist/components/Tooltip/Tooltip.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+declare const TooltipProvider: ({ ...props }: React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Provider>) => import("react/jsx-runtime").JSX.Element;
+declare const Tooltip: React.FC<TooltipPrimitive.TooltipProps>;
+declare const TooltipTrigger: React.ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const TooltipContent: React.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
+//# sourceMappingURL=Tooltip.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,gBAAgB,MAAM,yBAAyB,CAAA;AAI3D,QAAA,MAAM,eAAe,GAAI,cAEtB,KAAK,CAAC,wBAAwB,CAAC,OAAO,gBAAgB,CAAC,QAAQ,CAAC,4CAElE,CAAA;AAED,QAAA,MAAM,OAAO,yCAAwB,CAAA;AAErC,QAAA,MAAM,cAAc,gHAA2B,CAAA;AAE/C,QAAA,MAAM,cAAc,gKAiBlB,CAAA;AAGF,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,eAAe,EAAE,CAAA"}

package/dist/components/Tooltip/Tooltip.js

@@ -0,0 +1,27 @@
+import { jsx as i } from "react/jsx-runtime";
+import * as n from "react";
+import * as o from "@radix-ui/react-tooltip";
+import { Typography as s } from "../Typography/Typography.js";
+import { cn as m } from "../../utils/cn.js";
+const g = ({
+  ...t
+}) => /* @__PURE__ */ i(o.Provider, { delayDuration: 100, ...t }), y = o.Root, T = o.Trigger, l = n.forwardRef(({ className: t, children: e, sideOffset: a = 4, ...r }, d) => /* @__PURE__ */ i(
+  o.Content,
+  {
+    ref: d,
+    sideOffset: a,
+    className: m(
+      "z-50 origin-[--radix-tooltip-content-transform-origin] animate-in overflow-hidden rounded-md bg-surface-brand-brand-tertiary px-lg py-md text-text-brand-def fade-in-0 zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+      t
+    ),
+    ...r,
+    children: /* @__PURE__ */ i(s, { component: "span", variant: "body", weight: "regular", size: "sm", children: e })
+  }
+));
+l.displayName = o.Content.displayName;
+export {
+  y as Tooltip,
+  l as TooltipContent,
+  g as TooltipProvider,
+  T as TooltipTrigger
+};

package/dist/components/Tooltip/Tooltip.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { Tooltip } from './Tooltip';
+declare const meta: Meta<typeof Tooltip>;
+export default meta;
+type Story = StoryObj<typeof Tooltip>;
+export declare const DefaultTooltipComponent: Story;
+export declare const PrefferedSideBottom: Story;
+//# sourceMappingURL=Tooltip.stories.d.ts.map

package/dist/components/Tooltip/Tooltip.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/Tooltip.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAE3D,OAAO,EACL,OAAO,EAIR,MAAM,WAAW,CAAA;AAElB,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,OAAO,CAkB9B,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,OAAO,CAAC,CAAA;AAErC,eAAO,MAAM,uBAAuB,EAAE,KAoBrC,CAAA;AAED,eAAO,MAAM,mBAAmB,EAAE,KAqBjC,CAAA"}

package/dist/components/Tooltip/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Tooltip';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Tooltip/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAA"}

package/dist/components/Typography/Typography.d.ts

@@ -1,10 +1,11 @@
 import { VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 export declare const typographyVariants: (props?: ({
-    size?: "7xl" | "6xl" | "5xl" | "4xl" | "3xl" | "2xl" | "xl" | "lg" | "md" | "base" | "sm" | "caption" | null | undefined;
-    weight?: "light" | "regular" | "medium" | "bold" | null | undefined;
-    variant?: "title" | "body" | "paragraph" | "cta" | null | undefined;
+    size?: "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "caption" | "base" | "input" | null | undefined;
+    weight?: "bold" | "light" | "regular" | "medium" | null | undefined;
+    variant?: "body" | "title" | "paragraph" | "cta" | null | undefined;
     uppercase?: boolean | null | undefined;
+    fixY?: boolean | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export interface TypographyProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof typographyVariants> {
     component: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'strong' | 'i' | 'u' | 'label' | null | undefined;

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

@@ -1 +1 @@
-{"version":3,"file":"Typography.d.ts","sourceRoot":"","sources":["../../../src/components/Typography/Typography.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAGjE,eAAO,MAAM,kBAAkB;;;;;8EAuC7B,CAAA;AAEF,MAAM,WAAW,eACf,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EACvC,YAAY,CAAC,OAAO,kBAAkB,CAAC;IACzC,SAAS,EACL,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,GAAG,GACH,MAAM,GACN,QAAQ,GACR,GAAG,GACH,GAAG,GACH,OAAO,GACP,IAAI,GACJ,SAAS,CAAA;IACb,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB;AAED,QAAA,MAAM,UAAU,qFAkCf,CAAA;AAGD,OAAO,EAAE,UAAU,EAAE,CAAA"}
+{"version":3,"file":"Typography.d.ts","sourceRoot":"","sources":["../../../src/components/Typography/Typography.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,KAAK,YAAY,EAAO,MAAM,0BAA0B,CAAA;AAGjE,eAAO,MAAM,kBAAkB;;;;;;8EAqD7B,CAAA;AAEF,MAAM,WAAW,eACf,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EACvC,YAAY,CAAC,OAAO,kBAAkB,CAAC;IACzC,SAAS,EACL,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,GAAG,GACH,MAAM,GACN,QAAQ,GACR,GAAG,GACH,GAAG,GACH,OAAO,GACP,IAAI,GACJ,SAAS,CAAA;IACb,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB;AAED,QAAA,MAAM,UAAU,qFA0Cf,CAAA;AAGD,OAAO,EAAE,UAAU,EAAE,CAAA"}