ics-ui-kit 0.1.0-alpha.4 → 0.1.0-alpha.42

package/README.md

@@ -0,0 +1,32 @@
+# ICS UI Kit
+
+Библиотека React компонентов для создания современных пользовательских интерфейсов.
+
+## 🚀 Установка
+
+```bash
+npm install ics-ui-kit
+```
+
+## 📖 Использование
+
+```jsx
+import { Button, Card, Modal } from 'ics-ui-kit';
+import 'ics-ui-kit/styles.css';
+
+function App() {
+  return (
+    <Card>
+      <Button variant="primary">
+        Нажми меня
+      </Button>
+    </Card>
+  );
+}
+```
+
+## Ссылки
+
+- **Репозиторий**: [GitLab](https://gitlab.ics-it.ru/ics/ui-kit)
+- **NPM пакет**: [ics-ui-kit](https://www.npmjs.com/package/ics-ui-kit)
+- **Storybook**: [Демо версия](https://ui-kit.ics-it.ru)

package/dist/AlertContext-CxjW1LVL.js

@@ -0,0 +1,13 @@
+import e from "react";
+const o = e.createContext({}), c = (t) => {
+  const s = e.useContext(o);
+  return {
+    status: t?.status ?? s.status,
+    focus: t?.focus ?? s.focus
+  };
+};
+export {
+  o as A,
+  c as u
+};
+//# sourceMappingURL=AlertContext-CxjW1LVL.js.map

package/dist/AlertContext-CxjW1LVL.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AlertContext-CxjW1LVL.js","sources":["../src/components/alert/AlertContext.tsx"],"sourcesContent":["import React from \"react\";\r\nimport { AlertVariants } from \"./Alert\";\r\n\r\nexport const AlertContext = React.createContext<AlertVariants>({});\r\n\r\n/**\r\n * Хук для получения значений контекста Alert\r\n * Если переданы props, они имеют приоритет над значениями из контекста\r\n *\r\n * @example\r\n * ```tsx\r\n * const { status, focus } = useAlert({ status: props.status, focus: props.focus });\r\n * ```\r\n */\r\n\r\nexport const useAlert = (props?: AlertVariants) => {\r\n\tconst context = React.useContext(AlertContext);\r\n\r\n\treturn {\r\n\t\tstatus: props?.status ?? context.status,\r\n\t\tfocus: props?.focus ?? context.focus\r\n\t};\r\n};\r\n"],"names":["AlertContext","React","useAlert","props","context"],"mappings":";AAGO,MAAMA,IAAeC,EAAM,cAA6B,CAAE,CAAA,GAYpDC,IAAW,CAACC,MAA0B;AAC5C,QAAAC,IAAUH,EAAM,WAAWD,CAAY;AAEtC,SAAA;AAAA,IACN,QAAQG,GAAO,UAAUC,EAAQ;AAAA,IACjC,OAAOD,GAAO,SAASC,EAAQ;AAAA,EAChC;AACD;"}

package/dist/AlertIcon-DQs4wtDT.js

@@ -0,0 +1,96 @@
+import { jsx as o } from "react/jsx-runtime";
+import * as i from "react";
+import d from "react";
+import { T as c } from "./index-BVqs-uqP.js";
+import { A as b, u as l } from "./AlertContext-CxjW1LVL.js";
+import { I as f } from "./Icon-DH3ev9GK.js";
+const g = c({
+  base: [
+    "group relative w-full items-start rounded-xl border border-secondary-border bg-secondary-bg px-4 py-3 text-sm",
+    "grid grid-cols-[auto_1fr_auto] gap-y-1.5"
+  ],
+  variants: {
+    status: {
+      success: "border-status-success-border bg-status-success-bg",
+      warning: "border-status-warning-border bg-status-warning-bg",
+      error: "border-status-error-border bg-status-error-bg",
+      info: "border-status-info-border bg-status-info-bg"
+    },
+    focus: {
+      low: "border-secondary-border bg-secondary-bg",
+      medium: "border-secondary-border bg-secondary-bg",
+      // Не задаем bg, чтобы не переопределять status. Определяем в compoundVariants.
+      high: ""
+    }
+  },
+  compoundVariants: [
+    {
+      status: void 0,
+      focus: "high",
+      class: "bg-status-neutral-fg"
+    }
+  ],
+  defaultVariants: {
+    focus: "low"
+  }
+}), m = i.forwardRef(
+  ({ className: r, status: t, focus: s = "low", children: e, ...a }, u) => {
+    const n = i.useMemo(
+      () => ({
+        status: t,
+        focus: s
+      }),
+      [t, s]
+    );
+    return /* @__PURE__ */ o(b.Provider, { value: n, children: /* @__PURE__ */ o("div", { ref: u, role: "alert", className: g({ status: t, focus: s, className: r }), ...a, children: e }) });
+  }
+);
+m.displayName = "Alert";
+const x = c({
+  base: "col-start-2 text-sm text-muted",
+  variants: {
+    status: {
+      success: "text-status-success",
+      warning: "text-status-warning",
+      error: "text-status-error",
+      info: "text-status-info"
+    },
+    focus: {
+      low: "text-muted",
+      medium: "",
+      high: ""
+    }
+  },
+  defaultVariants: {
+    focus: "low"
+  }
+}), p = d.forwardRef(
+  ({ className: r, focus: t, status: s, ...e }, a) => {
+    const { status: u, focus: n } = l({ status: s, focus: t });
+    return /* @__PURE__ */ o("div", { ref: a, className: x({ className: r, focus: n, status: u }), ...e });
+  }
+);
+p.displayName = "AlertDescription";
+const w = c({
+  base: "text-status-default mr-3 translate-y-0.5",
+  variants: {
+    status: {
+      success: "text-status-success-hover",
+      warning: "text-status-warning-hover",
+      error: "text-status-error-hover",
+      info: "text-status-info-hover"
+    }
+  }
+}), y = d.forwardRef(
+  ({ className: r, status: t, ...s }, e) => {
+    const { status: a } = l({ status: t });
+    return /* @__PURE__ */ o(f, { ref: e, className: w({ status: a, className: r }), ...s });
+  }
+);
+y.displayName = "AlertIcon";
+export {
+  m as A,
+  p as a,
+  y as b
+};
+//# sourceMappingURL=AlertIcon-DQs4wtDT.js.map

package/dist/AlertIcon-DQs4wtDT.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AlertIcon-DQs4wtDT.js","sources":["../src/components/alert/Alert.tsx","../src/components/alert/components/AlertDescription.tsx","../src/components/alert/components/AlertIcon.tsx"],"sourcesContent":["import * as React from \"react\";\r\nimport { tv } from \"tailwind-variants\";\r\nimport { AlertContext } from \"./AlertContext\";\r\nimport { VariantsConfig } from \"@/lib/utils/variants\";\r\n\r\nexport interface AlertVariants {\r\n\t/** Статус алерта */\r\n\tstatus?: \"success\" | \"warning\" | \"error\" | \"info\";\r\n\t/** Состояние фокуса */\r\n\tfocus?: \"low\" | \"medium\" | \"high\";\r\n}\r\n\r\nconst alertStyles = tv({\r\n\tbase: [\r\n\t\t\"group relative w-full items-start rounded-xl border border-secondary-border bg-secondary-bg px-4 py-3 text-sm\",\r\n\t\t\"grid grid-cols-[auto_1fr_auto] gap-y-1.5\"\r\n\t],\r\n\tvariants: {\r\n\t\tstatus: {\r\n\t\t\tsuccess: \"border-status-success-border bg-status-success-bg\",\r\n\t\t\twarning: \"border-status-warning-border bg-status-warning-bg\",\r\n\t\t\terror: \"border-status-error-border bg-status-error-bg\",\r\n\t\t\tinfo: \"border-status-info-border bg-status-info-bg\"\r\n\t\t},\r\n\t\tfocus: {\r\n\t\t\tlow: \"border-secondary-border bg-secondary-bg\",\r\n\t\t\tmedium: \"border-secondary-border bg-secondary-bg\",\r\n\t\t\t// Не задаем bg, чтобы не переопределять status. Определяем в compoundVariants.\r\n\t\t\thigh: \"\"\r\n\t\t}\r\n\t} satisfies VariantsConfig<AlertVariants>,\r\n\tcompoundVariants: [\r\n\t\t{\r\n\t\t\tstatus: undefined,\r\n\t\t\tfocus: \"high\",\r\n\t\t\tclass: \"bg-status-neutral-fg\"\r\n\t\t}\r\n\t],\r\n\tdefaultVariants: {\r\n\t\tfocus: \"low\"\r\n\t}\r\n});\r\n\r\nexport type AlertProps = React.HTMLAttributes<HTMLDivElement> & AlertVariants;\r\n\r\n/**\r\n * Компонент Alert для отображения уведомлений и сообщений\r\n */\r\nexport const Alert = React.forwardRef<HTMLDivElement, AlertProps>(\r\n\t({ className, status, focus = \"low\", children, ...props }, ref) => {\r\n\t\tconst contextValue = React.useMemo(\r\n\t\t\t() => ({\r\n\t\t\t\tstatus,\r\n\t\t\t\tfocus\r\n\t\t\t}),\r\n\t\t\t[status, focus]\r\n\t\t);\r\n\r\n\t\treturn (\r\n\t\t\t<AlertContext.Provider value={contextValue}>\r\n\t\t\t\t<div ref={ref} role=\"alert\" className={alertStyles({ status, focus, className })} {...props}>\r\n\t\t\t\t\t{children}\r\n\t\t\t\t</div>\r\n\t\t\t</AlertContext.Provider>\r\n\t\t);\r\n\t}\r\n);\r\n\r\nAlert.displayName = \"Alert\";\r\n","import { tv } from \"tailwind-variants\";\r\nimport React from \"react\";\r\nimport { useAlert } from \"../AlertContext\";\r\nimport { VariantsConfig } from \"@/lib/utils/variants\";\r\nimport { AlertVariants } from \"../Alert\";\r\n\r\nconst alertDescriptionStyles = tv({\r\n\tbase: \"col-start-2 text-sm text-muted\",\r\n\tvariants: {\r\n\t\tstatus: {\r\n\t\t\tsuccess: \"text-status-success\",\r\n\t\t\twarning: \"text-status-warning\",\r\n\t\t\terror: \"text-status-error\",\r\n\t\t\tinfo: \"text-status-info\"\r\n\t\t},\r\n\t\tfocus: {\r\n\t\t\tlow: \"text-muted\",\r\n\t\t\tmedium: \"\",\r\n\t\t\thigh: \"\"\r\n\t\t}\r\n\t} satisfies VariantsConfig<AlertVariants>,\r\n\tdefaultVariants: {\r\n\t\tfocus: \"low\"\r\n\t}\r\n});\r\n\r\nexport type AlertDescriptionProps = React.HTMLAttributes<HTMLParagraphElement> & AlertVariants;\r\n\r\n/**\r\n * Компонент AlertDescription для отображения описания алерта\r\n */\r\nexport const AlertDescription = React.forwardRef<HTMLParagraphElement, AlertDescriptionProps>(\r\n\t({ className, focus: focusProp, status: statusProp, ...props }, ref) => {\r\n\t\tconst { status, focus } = useAlert({ status: statusProp, focus: focusProp });\r\n\r\n\t\treturn <div ref={ref} className={alertDescriptionStyles({ className, focus, status })} {...props} />;\r\n\t}\r\n);\r\n\r\nAlertDescription.displayName = \"AlertDescription\";\r\n","import { Icon, IconProps } from \"@/components/icon/Icon\";\r\nimport React from \"react\";\r\nimport { tv } from \"tailwind-variants\";\r\nimport { useAlert } from \"../AlertContext\";\r\nimport { AlertVariants } from \"../Alert\";\r\nimport { VariantsConfig } from \"@/lib/utils/variants\";\r\n\r\ntype AlertIconVariants = Omit<AlertVariants, \"focus\">;\r\n\r\nconst alertIconStyles = tv({\r\n\tbase: \"text-status-default mr-3 translate-y-0.5\",\r\n\tvariants: {\r\n\t\tstatus: {\r\n\t\t\tsuccess: \"text-status-success-hover\",\r\n\t\t\twarning: \"text-status-warning-hover\",\r\n\t\t\terror: \"text-status-error-hover\",\r\n\t\t\tinfo: \"text-status-info-hover\"\r\n\t\t}\r\n\t} satisfies VariantsConfig<AlertIconVariants>\r\n});\r\n\r\nexport type AlertIconProps = IconProps & AlertIconVariants;\r\n\r\n/**\r\n * Компонент AlertIcon для отображения иконки алерта\r\n */\r\nexport const AlertIcon = React.forwardRef<SVGSVGElement, AlertIconProps>(\r\n\t({ className, status: statusProp, ...props }, ref) => {\r\n\t\tconst { status } = useAlert({ status: statusProp });\r\n\r\n\t\treturn <Icon ref={ref} className={alertIconStyles({ status, className })} {...props} />;\r\n\t}\r\n);\r\n\r\nAlertIcon.displayName = \"AlertIcon\";\r\n"],"names":["alertStyles","tv","Alert","React","className","status","focus","children","props","ref","contextValue","jsx","AlertContext","alertDescriptionStyles","AlertDescription","focusProp","statusProp","useAlert","alertIconStyles","AlertIcon","Icon"],"mappings":";;;;;;AAYA,MAAMA,IAAcC,EAAG;AAAA,EACtB,MAAM;AAAA,IACL;AAAA,IACA;AAAA,EACD;AAAA,EACA,UAAU;AAAA,IACT,QAAQ;AAAA,MACP,SAAS;AAAA,MACT,SAAS;AAAA,MACT,OAAO;AAAA,MACP,MAAM;AAAA,IACP;AAAA,IACA,OAAO;AAAA,MACN,KAAK;AAAA,MACL,QAAQ;AAAA;AAAA,MAER,MAAM;AAAA,IAAA;AAAA,EAER;AAAA,EACA,kBAAkB;AAAA,IACjB;AAAA,MACC,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,OAAO;AAAA,IAAA;AAAA,EAET;AAAA,EACA,iBAAiB;AAAA,IAChB,OAAO;AAAA,EAAA;AAET,CAAC,GAOYC,IAAQC,EAAM;AAAA,EAC1B,CAAC,EAAE,WAAAC,GAAW,QAAAC,GAAQ,OAAAC,IAAQ,OAAO,UAAAC,GAAU,GAAGC,EAAM,GAAGC,MAAQ;AAClE,UAAMC,IAAeP,EAAM;AAAA,MAC1B,OAAO;AAAA,QACN,QAAAE;AAAA,QACA,OAAAC;AAAA,MAAA;AAAA,MAED,CAACD,GAAQC,CAAK;AAAA,IACf;AAGC,WAAA,gBAAAK,EAACC,EAAa,UAAb,EAAsB,OAAOF,GAC7B,UAAA,gBAAAC,EAAC,OAAI,EAAA,KAAAF,GAAU,MAAK,SAAQ,WAAWT,EAAY,EAAE,QAAAK,GAAQ,OAAAC,GAAO,WAAAF,EAAW,CAAA,GAAI,GAAGI,GACpF,UAAAD,EAAA,CACF,EACD,CAAA;AAAA,EAAA;AAGH;AAEAL,EAAM,cAAc;AC9DpB,MAAMW,IAAyBZ,EAAG;AAAA,EACjC,MAAM;AAAA,EACN,UAAU;AAAA,IACT,QAAQ;AAAA,MACP,SAAS;AAAA,MACT,SAAS;AAAA,MACT,OAAO;AAAA,MACP,MAAM;AAAA,IACP;AAAA,IACA,OAAO;AAAA,MACN,KAAK;AAAA,MACL,QAAQ;AAAA,MACR,MAAM;AAAA,IAAA;AAAA,EAER;AAAA,EACA,iBAAiB;AAAA,IAChB,OAAO;AAAA,EAAA;AAET,CAAC,GAOYa,IAAmBX,EAAM;AAAA,EACrC,CAAC,EAAE,WAAAC,GAAW,OAAOW,GAAW,QAAQC,GAAY,GAAGR,EAAM,GAAGC,MAAQ;AACjE,UAAA,EAAE,QAAAJ,GAAQ,OAAAC,EAAA,IAAUW,EAAS,EAAE,QAAQD,GAAY,OAAOD,GAAW;AAE3E,WAAQ,gBAAAJ,EAAA,OAAA,EAAI,KAAAF,GAAU,WAAWI,EAAuB,EAAE,WAAAT,GAAW,OAAAE,GAAO,QAAAD,EAAO,CAAC,GAAI,GAAGG,EAAO,CAAA;AAAA,EAAA;AAEpG;AAEAM,EAAiB,cAAc;AC9B/B,MAAMI,IAAkBjB,EAAG;AAAA,EAC1B,MAAM;AAAA,EACN,UAAU;AAAA,IACT,QAAQ;AAAA,MACP,SAAS;AAAA,MACT,SAAS;AAAA,MACT,OAAO;AAAA,MACP,MAAM;AAAA,IAAA;AAAA,EACP;AAEF,CAAC,GAOYkB,IAAYhB,EAAM;AAAA,EAC9B,CAAC,EAAE,WAAAC,GAAW,QAAQY,GAAY,GAAGR,KAASC,MAAQ;AACrD,UAAM,EAAE,QAAAJ,EAAO,IAAIY,EAAS,EAAE,QAAQD,GAAY;AAE3C,WAAA,gBAAAL,EAACS,GAAK,EAAA,KAAAX,GAAU,WAAWS,EAAgB,EAAE,QAAAb,GAAQ,WAAAD,EAAU,CAAC,GAAI,GAAGI,EAAO,CAAA;AAAA,EAAA;AAEvF;AAEAW,EAAU,cAAc;"}

package/dist/Button-BJDYzLSW.js

@@ -0,0 +1,36 @@
+import { jsx as t, jsxs as f } from "react/jsx-runtime";
+import p from "react";
+import { T as u } from "./index-BVqs-uqP.js";
+import { B as h } from "./ButtonBase-BaTjE6Rs.js";
+const w = u({
+  slots: {
+    container: "flex items-center justify-center gap-2 overflow-hidden",
+    icon: "h-4 w-4"
+  },
+  variants: {
+    size: {
+      xs: { icon: "h-3 w-3" },
+      sm: { icon: "h-3.5 w-3.5" },
+      md: {},
+      lg: {},
+      xl: { icon: "h-5 w-5", container: "gap-3" }
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+}), x = p.forwardRef(
+  ({ startIcon: o, endIcon: e, size: n, children: c, iconClassName: a, containerClassName: r, ...i }, l) => {
+    const s = w({ size: n }), m = o && /* @__PURE__ */ t(o, { className: s.icon({ className: a }) }), d = e && /* @__PURE__ */ t(e, { className: s.icon({ className: a }) });
+    return /* @__PURE__ */ t(h, { ...i, size: n, ref: l, children: /* @__PURE__ */ f("div", { className: s.container({ className: r }), children: [
+      m,
+      c,
+      d
+    ] }) });
+  }
+);
+x.displayName = "Button";
+export {
+  x as B
+};
+//# sourceMappingURL=Button-BJDYzLSW.js.map

package/dist/Button-BJDYzLSW.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button-BJDYzLSW.js","sources":["../src/components/button/button/Button.tsx"],"sourcesContent":["import React, { PropsWithChildren } from \"react\";\r\nimport { tv } from \"tailwind-variants\";\r\nimport { ButtonBase, ButtonBaseProps, ButtonBaseVariants } from \"../button-base/ButtonBase\";\r\nimport { VariantsConfig } from \"@/lib/utils/variants\";\r\n\r\ntype ButtonVariants = Pick<ButtonBaseVariants, \"size\">;\r\n\r\nconst buttonStyles = tv({\r\n\tslots: {\r\n\t\tcontainer: \"flex items-center justify-center gap-2 overflow-hidden\",\r\n\t\ticon: \"h-4 w-4\"\r\n\t},\r\n\tvariants: {\r\n\t\tsize: {\r\n\t\t\txs: { icon: \"h-3 w-3\" },\r\n\t\t\tsm: { icon: \"h-3.5 w-3.5\" },\r\n\t\t\tmd: {},\r\n\t\t\tlg: {},\r\n\t\t\txl: { icon: \"h-5 w-5\", container: \"gap-3\" }\r\n\t\t}\r\n\t} satisfies VariantsConfig<ButtonVariants>,\r\n\tdefaultVariants: {\r\n\t\tsize: \"md\"\r\n\t}\r\n});\r\n\r\nexport type ButtonProps = PropsWithChildren<\r\n\tButtonBaseProps &\r\n\t\tButtonVariants & {\r\n\t\t\tstartIcon?: React.ElementType;\r\n\t\t\tendIcon?: React.ElementType;\r\n\t\t\tcontainerClassName?: string;\r\n\t\t\ticonClassName?: string;\r\n\t\t}\r\n>;\r\n\r\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\r\n\t({ startIcon: StartIcon, endIcon: EndIcon, size, children, iconClassName, containerClassName, ...props }, ref) => {\r\n\t\tconst styles = buttonStyles({ size });\r\n\r\n\t\tconst startIconEl = StartIcon && <StartIcon className={styles.icon({ className: iconClassName })} />;\r\n\t\tconst endIconEl = EndIcon && <EndIcon className={styles.icon({ className: iconClassName })} />;\r\n\r\n\t\treturn (\r\n\t\t\t<ButtonBase {...props} size={size} ref={ref}>\r\n\t\t\t\t<div className={styles.container({ className: containerClassName })}>\r\n\t\t\t\t\t{startIconEl}\r\n\t\t\t\t\t{children}\r\n\t\t\t\t\t{endIconEl}\r\n\t\t\t\t</div>\r\n\t\t\t</ButtonBase>\r\n\t\t);\r\n\t}\r\n);\r\n\r\nButton.displayName = \"Button\";\r\n"],"names":["buttonStyles","tv","Button","React","StartIcon","EndIcon","size","children","iconClassName","containerClassName","props","ref","styles","startIconEl","jsx","endIconEl","ButtonBase","jsxs"],"mappings":";;;;AAOA,MAAMA,IAAeC,EAAG;AAAA,EACvB,OAAO;AAAA,IACN,WAAW;AAAA,IACX,MAAM;AAAA,EACP;AAAA,EACA,UAAU;AAAA,IACT,MAAM;AAAA,MACL,IAAI,EAAE,MAAM,UAAU;AAAA,MACtB,IAAI,EAAE,MAAM,cAAc;AAAA,MAC1B,IAAI,CAAC;AAAA,MACL,IAAI,CAAC;AAAA,MACL,IAAI,EAAE,MAAM,WAAW,WAAW,QAAQ;AAAA,IAAA;AAAA,EAE5C;AAAA,EACA,iBAAiB;AAAA,IAChB,MAAM;AAAA,EAAA;AAER,CAAC,GAYYC,IAASC,EAAM;AAAA,EAC3B,CAAC,EAAE,WAAWC,GAAW,SAASC,GAAS,MAAAC,GAAM,UAAAC,GAAU,eAAAC,GAAe,oBAAAC,GAAoB,GAAGC,EAAA,GAASC,MAAQ;AACjH,UAAMC,IAASZ,EAAa,EAAE,MAAAM,GAAM,GAE9BO,IAAcT,KAAa,gBAAAU,EAACV,GAAU,EAAA,WAAWQ,EAAO,KAAK,EAAE,WAAWJ,EAAc,CAAC,EAAG,CAAA,GAC5FO,IAAYV,KAAW,gBAAAS,EAACT,GAAQ,EAAA,WAAWO,EAAO,KAAK,EAAE,WAAWJ,EAAc,CAAC,EAAG,CAAA;AAE5F,WACE,gBAAAM,EAAAE,GAAA,EAAY,GAAGN,GAAO,MAAAJ,GAAY,KAAAK,GAClC,UAAA,gBAAAM,EAAC,OAAI,EAAA,WAAWL,EAAO,UAAU,EAAE,WAAWH,EAAA,CAAoB,GAChE,UAAA;AAAA,MAAAI;AAAA,MACAN;AAAA,MACAQ;AAAA,IAAA,EAAA,CACF,EACD,CAAA;AAAA,EAAA;AAGH;AAEAb,EAAO,cAAc;"}

package/dist/ButtonBase-BaTjE6Rs.js

@@ -0,0 +1,158 @@
+import { jsx as u } from "react/jsx-runtime";
+import { S as g } from "./index-5Bhkapwi.js";
+import b from "react";
+import { T as c } from "./index-BVqs-uqP.js";
+const v = c({
+  base: "inline-flex cursor-pointer select-none items-center justify-center overflow-hidden rounded-lg font-medium text-primary-fg transition-all focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary disabled:pointer-events-none disabled:opacity-50",
+  variants: {
+    variant: {
+      primary: "bg-primary-accent text-primary-bg shadow-soft-base hover:bg-primary-accent-hover",
+      secondary: "bg-secondary-bg-hover hover:bg-primary-bg-hover",
+      outline: "border border-solid border-secondary-border bg-secondary-bg shadow-soft-sm hover:border-primary-border hover:bg-secondary-bg-hover",
+      ghost: "bg-transparent hover:bg-secondary-bg-hover",
+      link: "bg-transparent text-muted underline hover:text-primary-fg",
+      text: "bg-transparent text-muted hover:text-primary-fg"
+    },
+    status: {
+      default: "",
+      info: "text-status-info",
+      success: "text-status-success",
+      warning: "text-status-warning",
+      error: "text-status-error"
+    },
+    size: {
+      xs: "h-7 gap-2 px-2.5 py-1.5 text-xs",
+      sm: "h-8 gap-2 px-3 py-2 text-xs",
+      md: "h-9 gap-2 px-4 py-2 text-sm",
+      lg: "h-10 gap-2 px-5 py-2 text-sm",
+      xl: "h-11 gap-3 px-6 py-3 text-base"
+    }
+  },
+  defaultVariants: {
+    variant: "primary",
+    size: "md",
+    status: "default"
+  },
+  compoundVariants: [
+    /*
+     * Statuses
+     */
+    // Primary
+    {
+      variant: "primary",
+      status: ["info", "success", "warning", "error"],
+      class: "text-white hover:text-white"
+    },
+    {
+      variant: "primary",
+      status: "info",
+      class: "bg-status-info hover:bg-status-info-hover"
+    },
+    {
+      variant: "primary",
+      status: "success",
+      class: "bg-status-success hover:bg-status-success-hover"
+    },
+    {
+      variant: "primary",
+      status: "warning",
+      class: "bg-status-warning hover:bg-status-warning-hover"
+    },
+    {
+      variant: "primary",
+      status: "error",
+      class: "bg-status-error hover:bg-status-error-hover"
+    },
+    // Secondary
+    {
+      variant: "secondary",
+      status: "info",
+      class: "bg-status-info-bg hover:bg-status-info-bg-hover"
+    },
+    {
+      variant: "secondary",
+      status: "success",
+      class: "bg-status-success-bg hover:bg-status-success-bg-hover"
+    },
+    {
+      variant: "secondary",
+      status: "warning",
+      class: "bg-status-warning-bg hover:bg-status-warning-bg-hover"
+    },
+    {
+      variant: "secondary",
+      status: "error",
+      class: "bg-status-error-bg hover:bg-status-error-bg-hover"
+    },
+    // Outline
+    {
+      variant: "outline",
+      status: "info",
+      class: "border-status-info-border hover:border-status-info-border hover:bg-status-info-bg"
+    },
+    {
+      variant: "outline",
+      status: "success",
+      class: "border-status-success-border hover:border-status-success-border hover:bg-status-success-bg"
+    },
+    {
+      variant: "outline",
+      status: "warning",
+      class: "border-status-warning-border hover:border-status-warning-border hover:bg-status-warning-bg"
+    },
+    {
+      variant: "outline",
+      status: "error",
+      class: "border-status-error-border hover:border-status-error-border hover:bg-status-error-bg"
+    },
+    // Ghost
+    {
+      variant: "ghost",
+      status: "info",
+      class: "text-status-info hover:bg-status-info-bg"
+    },
+    {
+      variant: "ghost",
+      status: "success",
+      class: "text-status-success hover:bg-status-success-bg"
+    },
+    {
+      variant: "ghost",
+      status: "warning",
+      class: "text-status-warning hover:bg-status-warning-bg"
+    },
+    {
+      variant: "ghost",
+      status: "error",
+      class: "text-status-error hover:bg-status-error-bg"
+    },
+    // Text & Link
+    {
+      variant: ["text", "link"],
+      status: "info",
+      class: "text-status-info/70 hover:text-status-info"
+    },
+    {
+      variant: ["text", "link"],
+      status: "success",
+      class: "text-status-success/70 hover:text-status-success"
+    },
+    {
+      variant: ["text", "link"],
+      status: "warning",
+      class: "text-status-warning/70 hover:text-status-warning"
+    },
+    {
+      variant: ["text", "link"],
+      status: "error",
+      class: "text-status-error/70 hover:text-status-error"
+    }
+  ]
+}), h = b.forwardRef(
+  ({ variant: s, size: t, children: r, status: a, className: e, asChild: o = !1, ...n }, i) => /* @__PURE__ */ u(o ? g : "button", { className: v({ variant: s, size: t, status: a, className: e }), ref: i, ...n, children: r })
+);
+h.displayName = "ButtonBase";
+export {
+  h as B
+};
+//# sourceMappingURL=ButtonBase-BaTjE6Rs.js.map

package/dist/ButtonBase-BaTjE6Rs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonBase-BaTjE6Rs.js","sources":["../src/components/button/button-base/ButtonBase.tsx"],"sourcesContent":["import { VariantsConfig } from \"@/lib/utils/variants\";\r\nimport { Slot } from \"@radix-ui/react-slot\";\r\nimport React, { PropsWithChildren } from \"react\";\r\nimport { tv } from \"tailwind-variants\";\r\n\r\nexport interface ButtonBaseVariants {\r\n\tvariant?: \"primary\" | \"secondary\" | \"outline\" | \"ghost\" | \"link\" | \"text\";\r\n\tstatus?: \"default\" | \"info\" | \"success\" | \"warning\" | \"error\";\r\n\tsize?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\r\n}\r\n\r\nconst buttonBaseStyles = tv({\r\n\tbase: \"inline-flex cursor-pointer select-none items-center justify-center overflow-hidden rounded-lg font-medium text-primary-fg transition-all focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary disabled:pointer-events-none disabled:opacity-50\",\r\n\tvariants: {\r\n\t\tvariant: {\r\n\t\t\tprimary: \"bg-primary-accent text-primary-bg shadow-soft-base hover:bg-primary-accent-hover\",\r\n\t\t\tsecondary: \"bg-secondary-bg-hover hover:bg-primary-bg-hover\",\r\n\t\t\toutline:\r\n\t\t\t\t\"border border-solid border-secondary-border bg-secondary-bg shadow-soft-sm hover:border-primary-border hover:bg-secondary-bg-hover\",\r\n\t\t\tghost: \"bg-transparent hover:bg-secondary-bg-hover\",\r\n\t\t\tlink: \"bg-transparent text-muted underline hover:text-primary-fg\",\r\n\t\t\ttext: \"bg-transparent text-muted hover:text-primary-fg\"\r\n\t\t},\r\n\t\tstatus: {\r\n\t\t\tdefault: \"\",\r\n\t\t\tinfo: \"text-status-info\",\r\n\t\t\tsuccess: \"text-status-success\",\r\n\t\t\twarning: \"text-status-warning\",\r\n\t\t\terror: \"text-status-error\"\r\n\t\t},\r\n\t\tsize: {\r\n\t\t\txs: \"h-7 gap-2 px-2.5 py-1.5 text-xs\",\r\n\t\t\tsm: \"h-8 gap-2 px-3 py-2 text-xs\",\r\n\t\t\tmd: \"h-9 gap-2 px-4 py-2 text-sm\",\r\n\t\t\tlg: \"h-10 gap-2 px-5 py-2 text-sm\",\r\n\t\t\txl: \"h-11 gap-3 px-6 py-3 text-base\"\r\n\t\t}\r\n\t} satisfies VariantsConfig<ButtonBaseVariants>,\r\n\tdefaultVariants: {\r\n\t\tvariant: \"primary\",\r\n\t\tsize: \"md\",\r\n\t\tstatus: \"default\"\r\n\t},\r\n\tcompoundVariants: [\r\n\t\t/*\r\n\t\t * Statuses\r\n\t\t */\r\n\t\t// Primary\r\n\t\t{\r\n\t\t\tvariant: \"primary\",\r\n\t\t\tstatus: [\"info\", \"success\", \"warning\", \"error\"],\r\n\t\t\tclass: \"text-white hover:text-white\"\r\n\t\t},\r\n\t\t{\r\n\t\t\tvariant: \"primary\",\r\n\t\t\tstatus: \"info\",\r\n\t\t\tclass: \"bg-status-info hover:bg-status-info-hover\"\r\n\t\t},\r\n\t\t{\r\n\t\t\tvariant: \"primary\",\r\n\t\t\tstatus: \"success\",\r\n\t\t\tclass: \"bg-status-success hover:bg-status-success-hover\"\r\n\t\t},\r\n\t\t{\r\n\t\t\tvariant: \"primary\",\r\n\t\t\tstatus: \"warning\",\r\n\t\t\tclass: \"bg-status-warning hover:bg-status-warning-hover\"\r\n\t\t},\r\n\t\t{\r\n\t\t\tvariant: \"primary\",\r\n\t\t\tstatus: \"error\",\r\n\t\t\tclass: \"bg-status-error hover:bg-status-error-hover\"\r\n\t\t},\r\n\t\t// Secondary\r\n\t\t{\r\n\t\t\tvariant: \"secondary\",\r\n\t\t\tstatus: \"info\",\r\n\t\t\tclass: \"bg-status-info-bg hover:bg-status-info-bg-hover\"\r\n\t\t},\r\n\t\t{\r\n\t\t\tvariant: \"secondary\",\r\n\t\t\tstatus: \"success\",\r\n\t\t\tclass: \"bg-status-success-bg hover:bg-status-success-bg-hover\"\r\n\t\t},\r\n\t\t{\r\n\t\t\tvariant: \"secondary\",\r\n\t\t\tstatus: \"warning\",\r\n\t\t\tclass: \"bg-status-warning-bg hover:bg-status-warning-bg-hover\"\r\n\t\t},\r\n\t\t{\r\n\t\t\tvariant: \"secondary\",\r\n\t\t\tstatus: \"error\",\r\n\t\t\tclass: \"bg-status-error-bg hover:bg-status-error-bg-hover\"\r\n\t\t},\r\n\t\t// Outline\r\n\t\t{\r\n\t\t\tvariant: \"outline\",\r\n\t\t\tstatus: \"info\",\r\n\t\t\tclass: \"border-status-info-border hover:border-status-info-border hover:bg-status-info-bg\"\r\n\t\t},\r\n\t\t{\r\n\t\t\tvariant: \"outline\",\r\n\t\t\tstatus: \"success\",\r\n\t\t\tclass: \"border-status-success-border hover:border-status-success-border hover:bg-status-success-bg\"\r\n\t\t},\r\n\t\t{\r\n\t\t\tvariant: \"outline\",\r\n\t\t\tstatus: \"warning\",\r\n\t\t\tclass: \"border-status-warning-border hover:border-status-warning-border hover:bg-status-warning-bg\"\r\n\t\t},\r\n\t\t{\r\n\t\t\tvariant: \"outline\",\r\n\t\t\tstatus: \"error\",\r\n\t\t\tclass: \"border-status-error-border hover:border-status-error-border hover:bg-status-error-bg\"\r\n\t\t},\r\n\t\t// Ghost\r\n\t\t{\r\n\t\t\tvariant: \"ghost\",\r\n\t\t\tstatus: \"info\",\r\n\t\t\tclass: \"text-status-info hover:bg-status-info-bg\"\r\n\t\t},\r\n\t\t{\r\n\t\t\tvariant: \"ghost\",\r\n\t\t\tstatus: \"success\",\r\n\t\t\tclass: \"text-status-success hover:bg-status-success-bg\"\r\n\t\t},\r\n\t\t{\r\n\t\t\tvariant: \"ghost\",\r\n\t\t\tstatus: \"warning\",\r\n\t\t\tclass: \"text-status-warning hover:bg-status-warning-bg\"\r\n\t\t},\r\n\t\t{\r\n\t\t\tvariant: \"ghost\",\r\n\t\t\tstatus: \"error\",\r\n\t\t\tclass: \"text-status-error hover:bg-status-error-bg\"\r\n\t\t},\r\n\t\t// Text & Link\r\n\t\t{\r\n\t\t\tvariant: [\"text\", \"link\"],\r\n\t\t\tstatus: \"info\",\r\n\t\t\tclass: \"text-status-info/70 hover:text-status-info\"\r\n\t\t},\r\n\t\t{\r\n\t\t\tvariant: [\"text\", \"link\"],\r\n\t\t\tstatus: \"success\",\r\n\t\t\tclass: \"text-status-success/70 hover:text-status-success\"\r\n\t\t},\r\n\t\t{\r\n\t\t\tvariant: [\"text\", \"link\"],\r\n\t\t\tstatus: \"warning\",\r\n\t\t\tclass: \"text-status-warning/70 hover:text-status-warning\"\r\n\t\t},\r\n\t\t{\r\n\t\t\tvariant: [\"text\", \"link\"],\r\n\t\t\tstatus: \"error\",\r\n\t\t\tclass: \"text-status-error/70 hover:text-status-error\"\r\n\t\t}\r\n\t]\r\n});\r\n\r\nexport type ButtonBaseProps = React.ButtonHTMLAttributes<HTMLButtonElement> &\r\n\tButtonBaseVariants & {\r\n\t\tasChild?: boolean;\r\n\t};\r\n\r\nexport const ButtonBase = React.forwardRef<HTMLButtonElement, PropsWithChildren<ButtonBaseProps>>(\r\n\t({ variant, size, children, status, className, asChild = false, ...props }, ref) => {\r\n\t\tconst Comp = asChild ? Slot : \"button\";\r\n\t\treturn (\r\n\t\t\t<Comp className={buttonBaseStyles({ variant, size, status, className })} ref={ref} {...props}>\r\n\t\t\t\t{children}\r\n\t\t\t</Comp>\r\n\t\t);\r\n\t}\r\n);\r\n\r\nButtonBase.displayName = \"ButtonBase\";\r\n"],"names":["buttonBaseStyles","tv","ButtonBase","React","variant","size","children","status","className","asChild","props","ref","jsx","Slot"],"mappings":"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"}