inconel 0.1.8 → 0.1.10

package/dist/components/Button/Button.js

@@ -1,12 +1,12 @@
-import { jsx as t, jsxs as w } from "react/jsx-runtime";
-import { useMemo as C, useEffect as E } from "react";
+import { jsx as t, jsxs as C } from "react/jsx-runtime";
+import { useMemo as E, useEffect as T } from "react";
 import { classNames as b } from "../shared/classNames.js";
 /* empty css                  */
-import { BUTTON_TYPE_CLASS_NAMES as T } from "./constants.js";
+import { BUTTON_TYPE_CLASS_NAMES as k } from "./constants.js";
 /* empty css           */
-import { createDebouncedCallback as k } from "./utils.js";
-import B from "../Svg/Svg.js";
-function $({
+import { createDebouncedCallback as B } from "./utils.js";
+import Y from "../Svg/Svg.js";
+function q({
   loading: e = !1,
   fullWidth: _ = !1,
   variant: N = "primary",
@@ -16,34 +16,35 @@ function $({
   iconClassName: v,
   iconWidth: n,
   iconHeight: o,
-  iconRight: r = !1,
+  iconRight: i = !1,
   render: x = !0,
   debounceTime: u,
-  isActive: i,
+  isActive: r,
   onClick: m,
-  disabled: s,
+  disabled: l,
   className: y,
   children: A,
   size: M = "md",
-  ...d
+  pill: j = !1,
+  ...f
 }) {
-  const j = S ?? N, l = C(
-    () => k(m, u ?? 0),
+  const w = S ?? N, s = E(
+    () => B(m, u ?? 0),
     [m, u]
   );
-  if (E(() => () => l.cancel(), [l]), !x) return null;
-  const f = h ?? A, p = a ? /* @__PURE__ */ t(
+  if (T(() => () => s.cancel(), [s]), !x) return null;
+  const d = h ?? A, p = a ? /* @__PURE__ */ t(
     "span",
     {
       className: b(
         "inconel-button__icon",
-        r ? "inconel-button__icon--right" : "inconel-button__icon--left",
+        i ? "inconel-button__icon--right" : "inconel-button__icon--left",
         v
       ),
       style: { width: n ?? void 0, height: o ?? void 0 },
       "aria-hidden": "true",
       children: /* @__PURE__ */ t(
-        B,
+        Y,
         {
           src: a,
           beforeInjection: (c) => {
@@ -53,33 +54,34 @@ function $({
       )
     }
   ) : null;
-  return /* @__PURE__ */ w(
+  return /* @__PURE__ */ C(
     "button",
     {
-      ...d,
-      disabled: s || e,
-      "aria-pressed": typeof i == "boolean" ? i : d["aria-pressed"],
-      onClick: s || e ? void 0 : l,
+      ...f,
+      disabled: l || e,
+      "aria-pressed": typeof r == "boolean" ? r : f["aria-pressed"],
+      onClick: l || e ? void 0 : s,
       className: b(
         "inconel-button",
         `inconel-size-${M}`,
-        T[j],
+        k[w],
         _ && "inconel-button--full-width",
+        j && "inconel-button--pill",
         e && "inconel-is-loading",
-        s && "inconel-is-disabled",
-        i && "inconel-is-active",
+        l && "inconel-is-disabled",
+        r && "inconel-is-active",
         y
       ),
       children: [
         e && /* @__PURE__ */ t("span", { className: "inconel-button__spinner", "aria-hidden": "true" }),
-        !r && p,
-        f !== void 0 && /* @__PURE__ */ t("span", { className: "inconel-button__title", children: f }),
-        r && p
+        !i && p,
+        d !== void 0 && /* @__PURE__ */ t("span", { className: "inconel-button__title", children: d }),
+        i && p
       ]
     }
   );
 }
 export {
-  $ as Button
+  q as Button
 };
 //# sourceMappingURL=Button.js.map

package/dist/components/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import {\n  useEffect,\n  useMemo,\n  type ButtonHTMLAttributes,\n  type ReactNode,\n} from 'react'\n\nimport { classNames } from '../shared/classNames'\nimport '../shared/sizes.css'\nimport type { ControlSize } from '../shared/types'\nimport { Svg } from '../Svg'\nimport {\n  BUTTON_TYPE_CLASS_NAMES,\n  type ButtonType,\n} from './constants'\nimport './styles.css'\nimport { createDebouncedCallback } from './utils'\n\nexport interface ButtonProps\n  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onChange'> {\n  label?: ReactNode\n  buttonType?: ButtonType\n  icon?: string | null\n  iconClassName?: string\n  iconWidth?: number | null\n  iconHeight?: number | null\n  iconRight?: boolean\n  render?: boolean\n  debounceTime?: number | null\n  isActive?: boolean | null\n  onChange?: ButtonHTMLAttributes<HTMLButtonElement>['onChange']\n  loading?: boolean\n  fullWidth?: boolean\n  variant?: 'primary' | 'secondary' | 'danger' | 'ghost' | 'warning' | 'dark'\n  size?: ControlSize\n}\n\nexport function Button({\n  loading = false,\n  fullWidth = false,\n  variant = 'primary',\n  label,\n  buttonType,\n  icon,\n  iconClassName,\n  iconWidth,\n  iconHeight,\n  iconRight = false,\n  render = true,\n  debounceTime,\n  isActive,\n  onClick,\n  disabled,\n  className,\n  children,\n  size = 'md',\n  ...props\n}: ButtonProps) {\n  const resolvedType = buttonType ?? variant\n  const debouncedClick = useMemo(\n    () => createDebouncedCallback(onClick, debounceTime ?? 0),\n    [onClick, debounceTime],\n  )\n\n  useEffect(() => () => debouncedClick.cancel(), [debouncedClick])\n\n  if (!render) return null\n\n  const content = label ?? children\n  const iconNode = icon ? (\n    <span\n      className={classNames(\n        'inconel-button__icon',\n        iconRight\n          ? 'inconel-button__icon--right'\n          : 'inconel-button__icon--left',\n        iconClassName,\n      )}\n      style={{ width: iconWidth ?? undefined, height: iconHeight ?? undefined }}\n      aria-hidden=\"true\"\n    >\n      <Svg\n        src={icon}\n        beforeInjection={(svg) => {\n          if (iconWidth) svg.setAttribute('width', String(iconWidth))\n          if (iconHeight) svg.setAttribute('height', String(iconHeight))\n          svg.setAttribute('preserveAspectRatio', 'xMidYMid meet')\n        }}\n      />\n    </span>\n  ) : null\n\n  return (\n    <button\n      {...props}\n      disabled={disabled || loading}\n      aria-pressed={\n        typeof isActive === 'boolean' ? isActive : props['aria-pressed']\n      }\n      onClick={disabled || loading ? undefined : debouncedClick}\n      className={classNames(\n        'inconel-button',\n        `inconel-size-${size}`,\n        BUTTON_TYPE_CLASS_NAMES[resolvedType],\n        fullWidth && 'inconel-button--full-width',\n        loading && 'inconel-is-loading',\n        disabled && 'inconel-is-disabled',\n        isActive && 'inconel-is-active',\n        className,\n      )}\n    >\n      {loading && <span className=\"inconel-button__spinner\" aria-hidden=\"true\" />}\n      {!iconRight && iconNode}\n      {content !== undefined && (\n        <span className=\"inconel-button__title\">{content}</span>\n      )}\n      {iconRight && iconNode}\n    </button>\n  )\n}\n"],"names":["Button","loading","fullWidth","variant","label","buttonType","icon","iconClassName","iconWidth","iconHeight","iconRight","render","debounceTime","isActive","onClick","disabled","className","children","size","props","resolvedType","debouncedClick","useMemo","createDebouncedCallback","useEffect","content","iconNode","jsx","classNames","Svg","svg","jsxs","BUTTON_TYPE_CLASS_NAMES"],"mappings":";;;;;;;;AAqCO,SAASA,EAAO;AAAA,EACrB,SAAAC,IAAU;AAAA,EACV,WAAAC,IAAY;AAAA,EACZ,SAAAC,IAAU;AAAA,EACV,OAAAC;AAAA,EACA,YAAAC;AAAA,EACA,MAAAC;AAAA,EACA,eAAAC;AAAA,EACA,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,QAAAC,IAAS;AAAA,EACT,cAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,GAAGC;AACL,GAAgB;AACd,QAAMC,IAAef,KAAcF,GAC7BkB,IAAiBC;AAAA,IACrB,MAAMC,EAAwBT,GAASF,KAAgB,CAAC;AAAA,IACxD,CAACE,GAASF,CAAY;AAAA,EAAA;AAKxB,MAFAY,EAAU,MAAM,MAAMH,EAAe,UAAU,CAACA,CAAc,CAAC,GAE3D,CAACV,EAAQ,QAAO;AAEpB,QAAMc,IAAUrB,KAASa,GACnBS,IAAWpB,IACf,gBAAAqB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACAlB,IACI,gCACA;AAAA,QACJH;AAAA,MAAA;AAAA,MAEF,OAAO,EAAE,OAAOC,KAAa,QAAW,QAAQC,KAAc,OAAA;AAAA,MAC9D,eAAY;AAAA,MAEZ,UAAA,gBAAAkB;AAAA,QAACE;AAAA,QAAA;AAAA,UACC,KAAKvB;AAAA,UACL,iBAAiB,CAACwB,MAAQ;AACxB,YAAItB,KAAWsB,EAAI,aAAa,SAAS,OAAOtB,CAAS,CAAC,GACtDC,KAAYqB,EAAI,aAAa,UAAU,OAAOrB,CAAU,CAAC,GAC7DqB,EAAI,aAAa,uBAAuB,eAAe;AAAA,UACzD;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EAAA,IAEA;AAEJ,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGZ;AAAA,MACJ,UAAUJ,KAAYd;AAAA,MACtB,gBACE,OAAOY,KAAa,YAAYA,IAAWM,EAAM,cAAc;AAAA,MAEjE,SAASJ,KAAYd,IAAU,SAAYoB;AAAA,MAC3C,WAAWO;AAAA,QACT;AAAA,QACA,gBAAgBV,CAAI;AAAA,QACpBc,EAAwBZ,CAAY;AAAA,QACpClB,KAAa;AAAA,QACbD,KAAW;AAAA,QACXc,KAAY;AAAA,QACZF,KAAY;AAAA,QACZG;AAAA,MAAA;AAAA,MAGD,UAAA;AAAA,QAAAf,KAAW,gBAAA0B,EAAC,QAAA,EAAK,WAAU,2BAA0B,eAAY,QAAO;AAAA,QACxE,CAACjB,KAAagB;AAAA,QACdD,MAAY,UACX,gBAAAE,EAAC,QAAA,EAAK,WAAU,yBAAyB,UAAAF,GAAQ;AAAA,QAElDf,KAAagB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGpB;"}
+{"version":3,"file":"Button.js","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import {\n  useEffect,\n  useMemo,\n  type ButtonHTMLAttributes,\n  type ReactNode,\n} from 'react'\n\nimport { classNames } from '../shared/classNames'\nimport '../shared/sizes.css'\nimport type { ControlSize } from '../shared/types'\nimport { Svg } from '../Svg'\nimport {\n  BUTTON_TYPE_CLASS_NAMES,\n  type ButtonType,\n} from './constants'\nimport './styles.css'\nimport { createDebouncedCallback } from './utils'\n\nexport interface ButtonProps\n  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onChange'> {\n  label?: ReactNode\n  buttonType?: ButtonType\n  icon?: string | null\n  iconClassName?: string\n  iconWidth?: number | null\n  iconHeight?: number | null\n  iconRight?: boolean\n  render?: boolean\n  debounceTime?: number | null\n  isActive?: boolean | null\n  onChange?: ButtonHTMLAttributes<HTMLButtonElement>['onChange']\n  loading?: boolean\n  fullWidth?: boolean\n  variant?: 'primary' | 'secondary' | 'danger' | 'ghost' | 'warning' | 'dark'\n  size?: ControlSize\n  pill?: boolean\n}\n\nexport function Button({\n  loading = false,\n  fullWidth = false,\n  variant = 'primary',\n  label,\n  buttonType,\n  icon,\n  iconClassName,\n  iconWidth,\n  iconHeight,\n  iconRight = false,\n  render = true,\n  debounceTime,\n  isActive,\n  onClick,\n  disabled,\n  className,\n  children,\n  size = 'md',\n  pill = false,\n  ...props\n}: ButtonProps) {\n  const resolvedType = buttonType ?? variant\n  const debouncedClick = useMemo(\n    () => createDebouncedCallback(onClick, debounceTime ?? 0),\n    [onClick, debounceTime],\n  )\n\n  useEffect(() => () => debouncedClick.cancel(), [debouncedClick])\n\n  if (!render) return null\n\n  const content = label ?? children\n  const iconNode = icon ? (\n    <span\n      className={classNames(\n        'inconel-button__icon',\n        iconRight\n          ? 'inconel-button__icon--right'\n          : 'inconel-button__icon--left',\n        iconClassName,\n      )}\n      style={{ width: iconWidth ?? undefined, height: iconHeight ?? undefined }}\n      aria-hidden=\"true\"\n    >\n      <Svg\n        src={icon}\n        beforeInjection={(svg) => {\n          if (iconWidth) svg.setAttribute('width', String(iconWidth))\n          if (iconHeight) svg.setAttribute('height', String(iconHeight))\n          svg.setAttribute('preserveAspectRatio', 'xMidYMid meet')\n        }}\n      />\n    </span>\n  ) : null\n\n  return (\n    <button\n      {...props}\n      disabled={disabled || loading}\n      aria-pressed={\n        typeof isActive === 'boolean' ? isActive : props['aria-pressed']\n      }\n      onClick={disabled || loading ? undefined : debouncedClick}\n      className={classNames(\n        'inconel-button',\n        `inconel-size-${size}`,\n        BUTTON_TYPE_CLASS_NAMES[resolvedType],\n        fullWidth && 'inconel-button--full-width',\n        pill && 'inconel-button--pill',\n        loading && 'inconel-is-loading',\n        disabled && 'inconel-is-disabled',\n        isActive && 'inconel-is-active',\n        className,\n      )}\n    >\n      {loading && <span className=\"inconel-button__spinner\" aria-hidden=\"true\" />}\n      {!iconRight && iconNode}\n      {content !== undefined && (\n        <span className=\"inconel-button__title\">{content}</span>\n      )}\n      {iconRight && iconNode}\n    </button>\n  )\n}\n"],"names":["Button","loading","fullWidth","variant","label","buttonType","icon","iconClassName","iconWidth","iconHeight","iconRight","render","debounceTime","isActive","onClick","disabled","className","children","size","pill","props","resolvedType","debouncedClick","useMemo","createDebouncedCallback","useEffect","content","iconNode","jsx","classNames","Svg","svg","jsxs","BUTTON_TYPE_CLASS_NAMES"],"mappings":";;;;;;;;AAsCO,SAASA,EAAO;AAAA,EACrB,SAAAC,IAAU;AAAA,EACV,WAAAC,IAAY;AAAA,EACZ,SAAAC,IAAU;AAAA,EACV,OAAAC;AAAA,EACA,YAAAC;AAAA,EACA,MAAAC;AAAA,EACA,eAAAC;AAAA,EACA,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,QAAAC,IAAS;AAAA,EACT,cAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,MAAAC,IAAO;AAAA,EACP,GAAGC;AACL,GAAgB;AACd,QAAMC,IAAehB,KAAcF,GAC7BmB,IAAiBC;AAAA,IACrB,MAAMC,EAAwBV,GAASF,KAAgB,CAAC;AAAA,IACxD,CAACE,GAASF,CAAY;AAAA,EAAA;AAKxB,MAFAa,EAAU,MAAM,MAAMH,EAAe,UAAU,CAACA,CAAc,CAAC,GAE3D,CAACX,EAAQ,QAAO;AAEpB,QAAMe,IAAUtB,KAASa,GACnBU,IAAWrB,IACf,gBAAAsB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACAnB,IACI,gCACA;AAAA,QACJH;AAAA,MAAA;AAAA,MAEF,OAAO,EAAE,OAAOC,KAAa,QAAW,QAAQC,KAAc,OAAA;AAAA,MAC9D,eAAY;AAAA,MAEZ,UAAA,gBAAAmB;AAAA,QAACE;AAAA,QAAA;AAAA,UACC,KAAKxB;AAAA,UACL,iBAAiB,CAACyB,MAAQ;AACxB,YAAIvB,KAAWuB,EAAI,aAAa,SAAS,OAAOvB,CAAS,CAAC,GACtDC,KAAYsB,EAAI,aAAa,UAAU,OAAOtB,CAAU,CAAC,GAC7DsB,EAAI,aAAa,uBAAuB,eAAe;AAAA,UACzD;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EAAA,IAEA;AAEJ,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGZ;AAAA,MACJ,UAAUL,KAAYd;AAAA,MACtB,gBACE,OAAOY,KAAa,YAAYA,IAAWO,EAAM,cAAc;AAAA,MAEjE,SAASL,KAAYd,IAAU,SAAYqB;AAAA,MAC3C,WAAWO;AAAA,QACT;AAAA,QACA,gBAAgBX,CAAI;AAAA,QACpBe,EAAwBZ,CAAY;AAAA,QACpCnB,KAAa;AAAA,QACbiB,KAAQ;AAAA,QACRlB,KAAW;AAAA,QACXc,KAAY;AAAA,QACZF,KAAY;AAAA,QACZG;AAAA,MAAA;AAAA,MAGD,UAAA;AAAA,QAAAf,KAAW,gBAAA2B,EAAC,QAAA,EAAK,WAAU,2BAA0B,eAAY,QAAO;AAAA,QACxE,CAAClB,KAAaiB;AAAA,QACdD,MAAY,UACX,gBAAAE,EAAC,QAAA,EAAK,WAAU,yBAAyB,UAAAF,GAAQ;AAAA,QAElDhB,KAAaiB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGpB;"}

package/dist/components/Button/constants.d.ts

@@ -1,4 +1,4 @@
-export declare const BUTTON_TYPES: readonly ["default", "primary", "danger", "warning", "secondary", "success", "light", "dark", "calendar", "circleDanger", "circleSuccess", "circlePrimary", "circleWarning", "circleDark", "circleSecondary", "squareDanger", "squareSuccess", "squarePrimary", "squareWarning", "squareDark", "squareSecondary", "ghost"];
+export declare const BUTTON_TYPES: readonly ["default", "primary", "danger", "warning", "secondary", "success", "light", "dark", "calendar", "circleDanger", "circleSuccess", "circlePrimary", "circleWarning", "circleDark", "circleSecondary", "squareDanger", "squareSuccess", "squarePrimary", "squareWarning", "squareDark", "squareSecondary", "ghost", "outlinePrimary", "outlineSecondary", "outlineDanger", "outlineWarning", "outlineSuccess", "outlineDark"];
 export type ButtonType = (typeof BUTTON_TYPES)[number];
 export declare const BUTTON_TYPE_CLASS_NAMES: Record<ButtonType, string>;
 //# sourceMappingURL=constants.d.ts.map

package/dist/components/Button/constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/components/Button/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,YAAY,4TAuBf,CAAA;AAEV,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAA;AAEtD,eAAO,MAAM,uBAAuB,EAAE,MAAM,CAAC,UAAU,EAAE,MAAM,CAS9B,CAAA"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/components/Button/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,YAAY,saA6Bf,CAAA;AAEV,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAA;AAEtD,eAAO,MAAM,uBAAuB,EAAE,MAAM,CAAC,UAAU,EAAE,MAAM,CAS9B,CAAA"}

package/dist/components/Button/constants.js

@@ -20,7 +20,13 @@ const a = [
   "squareWarning",
   "squareDark",
   "squareSecondary",
-  "ghost"
+  "ghost",
+  "outlinePrimary",
+  "outlineSecondary",
+  "outlineDanger",
+  "outlineWarning",
+  "outlineSuccess",
+  "outlineDark"
 ], c = Object.fromEntries(
   a.map((r) => [
     r,

package/dist/components/Button/constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"constants.js","sources":["../../../src/components/Button/constants.ts"],"sourcesContent":["export const BUTTON_TYPES = [\n  'default',\n  'primary',\n  'danger',\n  'warning',\n  'secondary',\n  'success',\n  'light',\n  'dark',\n  'calendar',\n  'circleDanger',\n  'circleSuccess',\n  'circlePrimary',\n  'circleWarning',\n  'circleDark',\n  'circleSecondary',\n  'squareDanger',\n  'squareSuccess',\n  'squarePrimary',\n  'squareWarning',\n  'squareDark',\n  'squareSecondary',\n  'ghost',\n] as const\n\nexport type ButtonType = (typeof BUTTON_TYPES)[number]\n\nexport const BUTTON_TYPE_CLASS_NAMES: Record<ButtonType, string> =\n  Object.fromEntries(\n    BUTTON_TYPES.map((type) => [\n      type,\n      `inconel-button--${type.replace(\n        /[A-Z]/g,\n        (letter) => `-${letter.toLowerCase()}`,\n      )}`,\n    ]),\n  ) as Record<ButtonType, string>\n"],"names":["BUTTON_TYPES","BUTTON_TYPE_CLASS_NAMES","type","letter"],"mappings":"AAAO,MAAMA,IAAe;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAIaC,IACX,OAAO;AAAA,EACLD,EAAa,IAAI,CAACE,MAAS;AAAA,IACzBA;AAAA,IACA,mBAAmBA,EAAK;AAAA,MACtB;AAAA,MACA,CAACC,MAAW,IAAIA,EAAO,aAAa;AAAA,IAAA,CACrC;AAAA,EAAA,CACF;AACH;"}
+{"version":3,"file":"constants.js","sources":["../../../src/components/Button/constants.ts"],"sourcesContent":["export const BUTTON_TYPES = [\n  'default',\n  'primary',\n  'danger',\n  'warning',\n  'secondary',\n  'success',\n  'light',\n  'dark',\n  'calendar',\n  'circleDanger',\n  'circleSuccess',\n  'circlePrimary',\n  'circleWarning',\n  'circleDark',\n  'circleSecondary',\n  'squareDanger',\n  'squareSuccess',\n  'squarePrimary',\n  'squareWarning',\n  'squareDark',\n  'squareSecondary',\n  'ghost',\n  'outlinePrimary',\n  'outlineSecondary',\n  'outlineDanger',\n  'outlineWarning',\n  'outlineSuccess',\n  'outlineDark',\n] as const\n\nexport type ButtonType = (typeof BUTTON_TYPES)[number]\n\nexport const BUTTON_TYPE_CLASS_NAMES: Record<ButtonType, string> =\n  Object.fromEntries(\n    BUTTON_TYPES.map((type) => [\n      type,\n      `inconel-button--${type.replace(\n        /[A-Z]/g,\n        (letter) => `-${letter.toLowerCase()}`,\n      )}`,\n    ]),\n  ) as Record<ButtonType, string>\n"],"names":["BUTTON_TYPES","BUTTON_TYPE_CLASS_NAMES","type","letter"],"mappings":"AAAO,MAAMA,IAAe;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAIaC,IACX,OAAO;AAAA,EACLD,EAAa,IAAI,CAACE,MAAS;AAAA,IACzBA;AAAA,IACA,mBAAmBA,EAAK;AAAA,MACtB;AAAA,MACA,CAACC,MAAW,IAAIA,EAAO,aAAa;AAAA,IAAA,CACrC;AAAA,EAAA,CACF;AACH;"}

package/dist/components/SlideTabs/SlideTabs.d.ts

@@ -10,6 +10,7 @@ export interface SlideTabsProps {
     activeKey?: string | number | null;
     onChange?: (key: string | number) => void;
     className?: string | null;
+    fullWidth?: boolean;
 }
-export declare function SlideTabs({ tabs, activeKey, onChange, className, }: SlideTabsProps): import("react").JSX.Element | null;
+export declare function SlideTabs({ tabs, activeKey, onChange, className, fullWidth, }: SlideTabsProps): import("react").JSX.Element | null;
 //# sourceMappingURL=SlideTabs.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"SlideTabs.d.ts","sourceRoot":"","sources":["../../../src/components/SlideTabs/SlideTabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,SAAS,EACf,MAAM,OAAO,CAAA;AAGd,OAAO,cAAc,CAAA;AAErB,MAAM,WAAW,QAAQ;IACvB,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;IACpB,KAAK,EAAE,SAAS,CAAA;IAChB,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,IAAI,CAAC,EAAE,OAAO,CAAA;CACf;AAED,MAAM,WAAW,cAAc;IAC7B,IAAI,CAAC,EAAE,QAAQ,EAAE,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAA;IAClC,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAA;IACzC,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CAC1B;AAED,wBAAgB,SAAS,CAAC,EACxB,IAAS,EACT,SAAS,EACT,QAAQ,EACR,SAAS,GACV,EAAE,cAAc,sCAkDhB"}
+{"version":3,"file":"SlideTabs.d.ts","sourceRoot":"","sources":["../../../src/components/SlideTabs/SlideTabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,SAAS,EACf,MAAM,OAAO,CAAA;AAGd,OAAO,cAAc,CAAA;AAErB,MAAM,WAAW,QAAQ;IACvB,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;IACpB,KAAK,EAAE,SAAS,CAAA;IAChB,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,IAAI,CAAC,EAAE,OAAO,CAAA;CACf;AAED,MAAM,WAAW,cAAc;IAC7B,IAAI,CAAC,EAAE,QAAQ,EAAE,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAA;IAClC,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAA;IACzC,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACzB,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAED,wBAAgB,SAAS,CAAC,EACxB,IAAS,EACT,SAAS,EACT,QAAQ,EACR,SAAS,EACT,SAAiB,GAClB,EAAE,cAAc,sCAwDhB"}

package/dist/components/SlideTabs/SlideTabs.js

@@ -1,52 +1,63 @@
-import { jsxs as l, jsx as r } from "react/jsx-runtime";
-import { useRef as h, useState as p, useMemo as y, useEffect as k } from "react";
-import { classNames as c } from "../shared/classNames.js";
+import { jsxs as o, jsx as c } from "react/jsx-runtime";
+import { useRef as p, useState as y, useMemo as k, useEffect as w } from "react";
+import { classNames as r } from "../shared/classNames.js";
 /* empty css           */
 function x({
-  tabs: i = [],
+  tabs: n = [],
   activeKey: f,
   onChange: a,
-  className: d
+  className: d,
+  fullWidth: u = !1
 }) {
-  const s = h({}), [o, m] = p({ left: 0, width: 0 }), t = y(
-    () => i.filter((e) => e.show !== !1),
-    [i]
-  ), n = t.find((e) => e.key === f) ?? t[0];
-  return k(() => {
-    if (!n) return;
-    const e = s.current[String(n.key)];
+  const s = p({}), [l, m] = y({ left: 0, width: 0 }), t = k(
+    () => n.filter((e) => e.show !== !1),
+    [n]
+  ), i = t.find((e) => e.key === f) ?? t[0];
+  return w(() => {
+    if (!i) return;
+    const e = s.current[String(i.key)];
     e && m({ left: e.offsetLeft, width: e.offsetWidth });
-  }, [n, t]), t.length ? /* @__PURE__ */ l("div", { className: c("inconel-slide-tabs", d), children: [
-    /* @__PURE__ */ r(
-      "div",
-      {
-        className: "inconel-slide-tabs__indicator",
-        style: {
-          width: o.width,
-          transform: `translateX(${o.left}px)`
-        }
-      }
-    ),
-    t.map((e) => /* @__PURE__ */ l(
-      "button",
-      {
-        ref: (u) => {
-          s.current[String(e.key)] = u;
-        },
-        type: "button",
-        className: c(
-          "inconel-slide-tabs__item",
-          n.key === e.key && "inconel-is-active"
+  }, [i, t]), t.length ? /* @__PURE__ */ o(
+    "div",
+    {
+      className: r(
+        "inconel-slide-tabs",
+        u && "inconel-slide-tabs--full-width",
+        d
+      ),
+      children: [
+        /* @__PURE__ */ c(
+          "div",
+          {
+            className: "inconel-slide-tabs__indicator",
+            style: {
+              width: l.width,
+              transform: `translateX(${l.left}px)`
+            }
+          }
         ),
-        onClick: () => a?.(e.key),
-        children: [
-          e.label,
-          typeof e.count == "number" && e.count > 0 && /* @__PURE__ */ r("span", { className: "inconel-slide-tabs__count", children: e.count })
-        ]
-      },
-      e.key
-    ))
-  ] }) : null;
+        t.map((e) => /* @__PURE__ */ o(
+          "button",
+          {
+            ref: (h) => {
+              s.current[String(e.key)] = h;
+            },
+            type: "button",
+            className: r(
+              "inconel-slide-tabs__item",
+              i.key === e.key && "inconel-is-active"
+            ),
+            onClick: () => a?.(e.key),
+            children: [
+              e.label,
+              typeof e.count == "number" && e.count > 0 && /* @__PURE__ */ c("span", { className: "inconel-slide-tabs__count", children: e.count })
+            ]
+          },
+          e.key
+        ))
+      ]
+    }
+  ) : null;
 }
 export {
   x as SlideTabs

package/dist/components/SlideTabs/SlideTabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"SlideTabs.js","sources":["../../../src/components/SlideTabs/SlideTabs.tsx"],"sourcesContent":["import {\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  type ReactNode,\n} from 'react'\n\nimport { classNames } from '../shared/classNames'\nimport './styles.css'\n\nexport interface SlideTab {\n  key: string | number\n  label: ReactNode\n  count?: ReactNode\n  show?: boolean\n}\n\nexport interface SlideTabsProps {\n  tabs?: SlideTab[]\n  activeKey?: string | number | null\n  onChange?: (key: string | number) => void\n  className?: string | null\n}\n\nexport function SlideTabs({\n  tabs = [],\n  activeKey,\n  onChange,\n  className,\n}: SlideTabsProps) {\n  const refs = useRef<Record<string, HTMLButtonElement | null>>({})\n  const [indicator, setIndicator] = useState({ left: 0, width: 0 })\n  const visibleTabs = useMemo(\n    () => tabs.filter((tab) => tab.show !== false),\n    [tabs],\n  )\n  const active =\n    visibleTabs.find((tab) => tab.key === activeKey) ?? visibleTabs[0]\n\n  useEffect(() => {\n    if (!active) return\n    const element = refs.current[String(active.key)]\n    if (element) {\n      setIndicator({ left: element.offsetLeft, width: element.offsetWidth })\n    }\n  }, [active, visibleTabs])\n\n  if (!visibleTabs.length) return null\n\n  return (\n    <div className={classNames('inconel-slide-tabs', className)}>\n      <div\n        className=\"inconel-slide-tabs__indicator\"\n        style={{\n          width: indicator.width,\n          transform: `translateX(${indicator.left}px)`,\n        }}\n      />\n      {visibleTabs.map((tab) => (\n        <button\n          key={tab.key}\n          ref={(element) => {\n            refs.current[String(tab.key)] = element\n          }}\n          type=\"button\"\n          className={classNames(\n            'inconel-slide-tabs__item',\n            active.key === tab.key && 'inconel-is-active',\n          )}\n          onClick={() => onChange?.(tab.key)}\n        >\n          {tab.label}\n          {typeof tab.count === 'number' && tab.count > 0 && (\n            <span className=\"inconel-slide-tabs__count\">{tab.count}</span>\n          )}\n        </button>\n      ))}\n    </div>\n  )\n}\n"],"names":["SlideTabs","tabs","activeKey","onChange","className","refs","useRef","indicator","setIndicator","useState","visibleTabs","useMemo","tab","active","useEffect","element","classNames","jsx","jsxs"],"mappings":";;;;AAyBO,SAASA,EAAU;AAAA,EACxB,MAAAC,IAAO,CAAA;AAAA,EACP,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AACF,GAAmB;AACjB,QAAMC,IAAOC,EAAiD,EAAE,GAC1D,CAACC,GAAWC,CAAY,IAAIC,EAAS,EAAE,MAAM,GAAG,OAAO,GAAG,GAC1DC,IAAcC;AAAA,IAClB,MAAMV,EAAK,OAAO,CAACW,MAAQA,EAAI,SAAS,EAAK;AAAA,IAC7C,CAACX,CAAI;AAAA,EAAA,GAEDY,IACJH,EAAY,KAAK,CAACE,MAAQA,EAAI,QAAQV,CAAS,KAAKQ,EAAY,CAAC;AAUnE,SARAI,EAAU,MAAM;AACd,QAAI,CAACD,EAAQ;AACb,UAAME,IAAUV,EAAK,QAAQ,OAAOQ,EAAO,GAAG,CAAC;AAC/C,IAAIE,KACFP,EAAa,EAAE,MAAMO,EAAQ,YAAY,OAAOA,EAAQ,aAAa;AAAA,EAEzE,GAAG,CAACF,GAAQH,CAAW,CAAC,GAEnBA,EAAY,2BAGd,OAAA,EAAI,WAAWM,EAAW,sBAAsBZ,CAAS,GACxD,UAAA;AAAA,IAAA,gBAAAa;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,OAAO;AAAA,UACL,OAAOV,EAAU;AAAA,UACjB,WAAW,cAAcA,EAAU,IAAI;AAAA,QAAA;AAAA,MACzC;AAAA,IAAA;AAAA,IAEDG,EAAY,IAAI,CAACE,MAChB,gBAAAM;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,KAAK,CAACH,MAAY;AAChB,UAAAV,EAAK,QAAQ,OAAOO,EAAI,GAAG,CAAC,IAAIG;AAAA,QAClC;AAAA,QACA,MAAK;AAAA,QACL,WAAWC;AAAA,UACT;AAAA,UACAH,EAAO,QAAQD,EAAI,OAAO;AAAA,QAAA;AAAA,QAE5B,SAAS,MAAMT,IAAWS,EAAI,GAAG;AAAA,QAEhC,UAAA;AAAA,UAAAA,EAAI;AAAA,UACJ,OAAOA,EAAI,SAAU,YAAYA,EAAI,QAAQ,KAC5C,gBAAAK,EAAC,QAAA,EAAK,WAAU,6BAA6B,UAAAL,EAAI,MAAA,CAAM;AAAA,QAAA;AAAA,MAAA;AAAA,MAbpDA,EAAI;AAAA,IAAA,CAgBZ;AAAA,EAAA,GACH,IA9B8B;AAgClC;"}
+{"version":3,"file":"SlideTabs.js","sources":["../../../src/components/SlideTabs/SlideTabs.tsx"],"sourcesContent":["import {\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  type ReactNode,\n} from 'react'\n\nimport { classNames } from '../shared/classNames'\nimport './styles.css'\n\nexport interface SlideTab {\n  key: string | number\n  label: ReactNode\n  count?: ReactNode\n  show?: boolean\n}\n\nexport interface SlideTabsProps {\n  tabs?: SlideTab[]\n  activeKey?: string | number | null\n  onChange?: (key: string | number) => void\n  className?: string | null\n  fullWidth?: boolean\n}\n\nexport function SlideTabs({\n  tabs = [],\n  activeKey,\n  onChange,\n  className,\n  fullWidth = false,\n}: SlideTabsProps) {\n  const refs = useRef<Record<string, HTMLButtonElement | null>>({})\n  const [indicator, setIndicator] = useState({ left: 0, width: 0 })\n  const visibleTabs = useMemo(\n    () => tabs.filter((tab) => tab.show !== false),\n    [tabs],\n  )\n  const active =\n    visibleTabs.find((tab) => tab.key === activeKey) ?? visibleTabs[0]\n\n  useEffect(() => {\n    if (!active) return\n    const element = refs.current[String(active.key)]\n    if (element) {\n      setIndicator({ left: element.offsetLeft, width: element.offsetWidth })\n    }\n  }, [active, visibleTabs])\n\n  if (!visibleTabs.length) return null\n\n  return (\n    <div\n      className={classNames(\n        'inconel-slide-tabs',\n        fullWidth && 'inconel-slide-tabs--full-width',\n        className,\n      )}\n    >\n      <div\n        className=\"inconel-slide-tabs__indicator\"\n        style={{\n          width: indicator.width,\n          transform: `translateX(${indicator.left}px)`,\n        }}\n      />\n      {visibleTabs.map((tab) => (\n        <button\n          key={tab.key}\n          ref={(element) => {\n            refs.current[String(tab.key)] = element\n          }}\n          type=\"button\"\n          className={classNames(\n            'inconel-slide-tabs__item',\n            active.key === tab.key && 'inconel-is-active',\n          )}\n          onClick={() => onChange?.(tab.key)}\n        >\n          {tab.label}\n          {typeof tab.count === 'number' && tab.count > 0 && (\n            <span className=\"inconel-slide-tabs__count\">{tab.count}</span>\n          )}\n        </button>\n      ))}\n    </div>\n  )\n}\n"],"names":["SlideTabs","tabs","activeKey","onChange","className","fullWidth","refs","useRef","indicator","setIndicator","useState","visibleTabs","useMemo","tab","active","useEffect","element","jsxs","classNames","jsx"],"mappings":";;;;AA0BO,SAASA,EAAU;AAAA,EACxB,MAAAC,IAAO,CAAA;AAAA,EACP,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC,IAAY;AACd,GAAmB;AACjB,QAAMC,IAAOC,EAAiD,EAAE,GAC1D,CAACC,GAAWC,CAAY,IAAIC,EAAS,EAAE,MAAM,GAAG,OAAO,GAAG,GAC1DC,IAAcC;AAAA,IAClB,MAAMX,EAAK,OAAO,CAACY,MAAQA,EAAI,SAAS,EAAK;AAAA,IAC7C,CAACZ,CAAI;AAAA,EAAA,GAEDa,IACJH,EAAY,KAAK,CAACE,MAAQA,EAAI,QAAQX,CAAS,KAAKS,EAAY,CAAC;AAUnE,SARAI,EAAU,MAAM;AACd,QAAI,CAACD,EAAQ;AACb,UAAME,IAAUV,EAAK,QAAQ,OAAOQ,EAAO,GAAG,CAAC;AAC/C,IAAIE,KACFP,EAAa,EAAE,MAAMO,EAAQ,YAAY,OAAOA,EAAQ,aAAa;AAAA,EAEzE,GAAG,CAACF,GAAQH,CAAW,CAAC,GAEnBA,EAAY,SAGf,gBAAAM;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACAb,KAAa;AAAA,QACbD;AAAA,MAAA;AAAA,MAGF,UAAA;AAAA,QAAA,gBAAAe;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO;AAAA,cACL,OAAOX,EAAU;AAAA,cACjB,WAAW,cAAcA,EAAU,IAAI;AAAA,YAAA;AAAA,UACzC;AAAA,QAAA;AAAA,QAEDG,EAAY,IAAI,CAACE,MAChB,gBAAAI;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,KAAK,CAACD,MAAY;AAChB,cAAAV,EAAK,QAAQ,OAAOO,EAAI,GAAG,CAAC,IAAIG;AAAA,YAClC;AAAA,YACA,MAAK;AAAA,YACL,WAAWE;AAAA,cACT;AAAA,cACAJ,EAAO,QAAQD,EAAI,OAAO;AAAA,YAAA;AAAA,YAE5B,SAAS,MAAMV,IAAWU,EAAI,GAAG;AAAA,YAEhC,UAAA;AAAA,cAAAA,EAAI;AAAA,cACJ,OAAOA,EAAI,SAAU,YAAYA,EAAI,QAAQ,KAC5C,gBAAAM,EAAC,QAAA,EAAK,WAAU,6BAA6B,UAAAN,EAAI,MAAA,CAAM;AAAA,YAAA;AAAA,UAAA;AAAA,UAbpDA,EAAI;AAAA,QAAA,CAgBZ;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,IAnC2B;AAsClC;"}