@televet/kibble-ui 4.0.0-beta.7 → 4.0.0-beta.71

package/dist/chunks/switch.component-D5kgSKKx.js

@@ -0,0 +1,2 @@
+"use strict";const i=require("./jsx-runtime-BjDatQAs.js"),c=require("react"),y=require("./withFormControl-_nV7mlmV.js"),w=require("./attr-BMs6szZx.js"),E=require("./create-slot-recipe-context-IwVIgtBt.js"),m=require("./factory-D6tdBUPG.js"),n=require("./use-locale-context-BdqHZ8L8.js"),f=require("./use-field-context--wBJQY1R.js"),l=require("./index-CZ42b9rT.js"),x=require("./index-CzrXl0uD.js"),q=t=>t&&t.__esModule?t:{default:t},N=q(c),[R,u]=n.createContext({name:"SwitchContext",hookName:"useSwitchContext",providerName:"<SwitchProvider />"}),S=c.forwardRef((t,e)=>{const r=u(),s=l.mergeProps(r.getControlProps(),t);return i.jsxRuntimeExports.jsx(n.ark.span,{...s,ref:e})});S.displayName="SwitchControl";const j=c.forwardRef((t,e)=>{const r=u(),s=l.mergeProps(r.getHiddenInputProps(),t),o=f.useFieldContext();return i.jsxRuntimeExports.jsx(n.ark.input,{"aria-describedby":o?.ariaDescribedby,...s,ref:e})});j.displayName="SwitchHiddenInput";const C=c.forwardRef((t,e)=>{const r=u(),s=l.mergeProps(r.getLabelProps(),t);return i.jsxRuntimeExports.jsx(n.ark.span,{...s,ref:e})});C.displayName="SwitchLabel";const I=t=>{const e=c.useId(),{getRootNode:r}=n.useEnvironmentContext(),{dir:s}=n.useLocaleContext(),o=f.useFieldContext(),a={id:e,ids:{label:o?.ids.label,hiddenInput:o?.ids.control},dir:s,disabled:o?.disabled,readOnly:o?.readOnly,invalid:o?.invalid,required:o?.required,getRootNode:r,...t},d=n.useMachine(x.machine,a);return x.connect(d,n.normalizeProps)},b=c.forwardRef((t,e)=>{const[r,s]=n.createSplitProps()(t,["checked","defaultChecked","disabled","form","id","ids","invalid","label","name","onCheckedChange","readOnly","required","value"]),o=I(r),a=l.mergeProps(o.getRootProps(),s);return i.jsxRuntimeExports.jsx(R,{value:o,children:i.jsxRuntimeExports.jsx(n.ark.label,{...a,ref:e})})});b.displayName="SwitchRoot";const P=c.forwardRef((t,e)=>{const[{value:r},s]=n.createSplitProps()(t,["value"]),o=l.mergeProps(r.getRootProps(),s);return i.jsxRuntimeExports.jsx(R,{value:r,children:i.jsxRuntimeExports.jsx(n.ark.label,{...o,ref:e})})});P.displayName="SwitchRootProvider";const k=c.forwardRef((t,e)=>{const r=u(),s=l.mergeProps(r.getThumbProps(),t);return i.jsxRuntimeExports.jsx(n.ark.span,{...s,ref:e})});k.displayName="SwitchThumb";const{withProvider:g,withContext:p,useStyles:_}=E.createSlotRecipeContext({key:"switch"});g(P,"root",{forwardAsChild:!0});const A=g(b,"root",{forwardAsChild:!0}),L=p(C,"label",{forwardAsChild:!0}),$=p(k,"thumb",{forwardAsChild:!0}),F=p(S,"control",{forwardAsChild:!0,defaultProps:{children:i.jsxRuntimeExports.jsx($,{})}});c.forwardRef(function(e,r){const s=u(),o=_(),{fallback:a,children:d,...h}=e;return i.jsxRuntimeExports.jsx(m.chakra.span,{ref:r,"data-checked":w.dataAttr(s.checked),...h,css:[o.indicator,e.css],children:s.checked?d:a})});c.forwardRef(function(e,r){const s=u(),{fallback:o,children:a,...d}=e;return i.jsxRuntimeExports.jsx(m.chakra.span,{ref:r,"data-checked":w.dataAttr(s.checked),...d,children:s.checked?a:o})});const T=j,H=y.withFormControl(({children:t,indeterminate:e=!1,onContrast:r,label:s,size:o="md",switchRef:a,...d})=>{const h=c.useMemo(()=>e?r?"indeterminateOnContrast":"indeterminate":r?"onContrast":"default",[e,r]);return i.jsxRuntimeExports.jsxs(A,{className:"Switch","data-testid":"kibble-switch",ref:a,size:o,variant:h,...d,children:[i.jsxRuntimeExports.jsx(T,{className:"Switch_Input","data-testid":"kibble-switch-input"}),i.jsxRuntimeExports.jsx(F,{className:"Switch_Control","data-testid":"kibble-switch-control"}),!!t&&i.jsxRuntimeExports.jsx(L,{children:t})]})}),v=N.default.forwardRef((t,e)=>i.jsxRuntimeExports.jsx(H,{switchRef:e,...t}));v.displayName="Switch";exports.WrappedSwitch=v;
+//# sourceMappingURL=switch.component-D5kgSKKx.js.map

package/dist/chunks/switch.component-D5kgSKKx.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.component-D5kgSKKx.js","sources":["../../node_modules/@ark-ui/react/dist/components/switch/use-switch-context.js","../../node_modules/@ark-ui/react/dist/components/switch/switch-control.js","../../node_modules/@ark-ui/react/dist/components/switch/switch-hidden-input.js","../../node_modules/@ark-ui/react/dist/components/switch/switch-label.js","../../node_modules/@ark-ui/react/dist/components/switch/use-switch.js","../../node_modules/@ark-ui/react/dist/components/switch/switch-root.js","../../node_modules/@ark-ui/react/dist/components/switch/switch-root-provider.js","../../node_modules/@ark-ui/react/dist/components/switch/switch-thumb.js","../../node_modules/@chakra-ui/react/dist/esm/components/switch/switch.js","../../src/components/Switch/switch.component.tsx"],"sourcesContent":["'use client';\nimport { createContext } from '../../utils/create-context.js';\n\nconst [SwitchProvider, useSwitchContext] = createContext({\n  name: \"SwitchContext\",\n  hookName: \"useSwitchContext\",\n  providerName: \"<SwitchProvider />\"\n});\n\nexport { SwitchProvider, useSwitchContext };\n","'use client';\nimport { jsx } from 'react/jsx-runtime';\nimport { mergeProps } from '@zag-js/react';\nimport { forwardRef } from 'react';\nimport { ark } from '../factory.js';\nimport { useSwitchContext } from './use-switch-context.js';\n\nconst SwitchControl = forwardRef((props, ref) => {\n  const switchContext = useSwitchContext();\n  const mergedProps = mergeProps(switchContext.getControlProps(), props);\n  return /* @__PURE__ */ jsx(ark.span, { ...mergedProps, ref });\n});\nSwitchControl.displayName = \"SwitchControl\";\n\nexport { SwitchControl };\n","'use client';\nimport { jsx } from 'react/jsx-runtime';\nimport { mergeProps } from '@zag-js/react';\nimport { forwardRef } from 'react';\nimport { ark } from '../factory.js';\nimport { useFieldContext } from '../field/use-field-context.js';\nimport { useSwitchContext } from './use-switch-context.js';\n\nconst SwitchHiddenInput = forwardRef((props, ref) => {\n  const switchContext = useSwitchContext();\n  const mergedProps = mergeProps(switchContext.getHiddenInputProps(), props);\n  const field = useFieldContext();\n  return /* @__PURE__ */ jsx(ark.input, { \"aria-describedby\": field?.ariaDescribedby, ...mergedProps, ref });\n});\nSwitchHiddenInput.displayName = \"SwitchHiddenInput\";\n\nexport { SwitchHiddenInput };\n","'use client';\nimport { jsx } from 'react/jsx-runtime';\nimport { mergeProps } from '@zag-js/react';\nimport { forwardRef } from 'react';\nimport { ark } from '../factory.js';\nimport { useSwitchContext } from './use-switch-context.js';\n\nconst SwitchLabel = forwardRef((props, ref) => {\n  const switchContext = useSwitchContext();\n  const mergedProps = mergeProps(switchContext.getLabelProps(), props);\n  return /* @__PURE__ */ jsx(ark.span, { ...mergedProps, ref });\n});\nSwitchLabel.displayName = \"SwitchLabel\";\n\nexport { SwitchLabel };\n","'use client';\nimport { useMachine, normalizeProps } from '@zag-js/react';\nimport * as zagSwitch from '@zag-js/switch';\nimport { useId } from 'react';\nimport { useEnvironmentContext } from '../../providers/environment/use-environment-context.js';\nimport { useLocaleContext } from '../../providers/locale/use-locale-context.js';\nimport { useFieldContext } from '../field/use-field-context.js';\n\nconst useSwitch = (props) => {\n  const id = useId();\n  const { getRootNode } = useEnvironmentContext();\n  const { dir } = useLocaleContext();\n  const field = useFieldContext();\n  const machineProps = {\n    id,\n    ids: {\n      label: field?.ids.label,\n      hiddenInput: field?.ids.control\n    },\n    dir,\n    disabled: field?.disabled,\n    readOnly: field?.readOnly,\n    invalid: field?.invalid,\n    required: field?.required,\n    getRootNode,\n    ...props\n  };\n  const service = useMachine(zagSwitch.machine, machineProps);\n  return zagSwitch.connect(service, normalizeProps);\n};\n\nexport { useSwitch };\n","'use client';\nimport { jsx } from 'react/jsx-runtime';\nimport { mergeProps } from '@zag-js/react';\nimport { forwardRef } from 'react';\nimport { createSplitProps } from '../../utils/create-split-props.js';\nimport { ark } from '../factory.js';\nimport { useSwitch } from './use-switch.js';\nimport { SwitchProvider } from './use-switch-context.js';\n\nconst SwitchRoot = forwardRef((props, ref) => {\n  const [switchProps, localProps] = createSplitProps()(props, [\n    \"checked\",\n    \"defaultChecked\",\n    \"disabled\",\n    \"form\",\n    \"id\",\n    \"ids\",\n    \"invalid\",\n    \"label\",\n    \"name\",\n    \"onCheckedChange\",\n    \"readOnly\",\n    \"required\",\n    \"value\"\n  ]);\n  const switchContext = useSwitch(switchProps);\n  const mergedProps = mergeProps(switchContext.getRootProps(), localProps);\n  return /* @__PURE__ */ jsx(SwitchProvider, { value: switchContext, children: /* @__PURE__ */ jsx(ark.label, { ...mergedProps, ref }) });\n});\nSwitchRoot.displayName = \"SwitchRoot\";\n\nexport { SwitchRoot };\n","'use client';\nimport { jsx } from 'react/jsx-runtime';\nimport { mergeProps } from '@zag-js/react';\nimport { forwardRef } from 'react';\nimport { createSplitProps } from '../../utils/create-split-props.js';\nimport { ark } from '../factory.js';\nimport { SwitchProvider } from './use-switch-context.js';\n\nconst SwitchRootProvider = forwardRef((props, ref) => {\n  const [{ value: api }, localProps] = createSplitProps()(props, [\"value\"]);\n  const mergedProps = mergeProps(api.getRootProps(), localProps);\n  return /* @__PURE__ */ jsx(SwitchProvider, { value: api, children: /* @__PURE__ */ jsx(ark.label, { ...mergedProps, ref }) });\n});\nSwitchRootProvider.displayName = \"SwitchRootProvider\";\n\nexport { SwitchRootProvider };\n","'use client';\nimport { jsx } from 'react/jsx-runtime';\nimport { mergeProps } from '@zag-js/react';\nimport { forwardRef } from 'react';\nimport { ark } from '../factory.js';\nimport { useSwitchContext } from './use-switch-context.js';\n\nconst SwitchThumb = forwardRef((props, ref) => {\n  const switchContext = useSwitchContext();\n  const mergedProps = mergeProps(switchContext.getThumbProps(), props);\n  return /* @__PURE__ */ jsx(ark.span, { ...mergedProps, ref });\n});\nSwitchThumb.displayName = \"SwitchThumb\";\n\nexport { SwitchThumb };\n","\"use strict\";\n\"use client\";\nimport { jsx } from 'react/jsx-runtime';\nimport { Switch, useSwitchContext } from '@ark-ui/react/switch';\nimport { forwardRef } from 'react';\nimport { dataAttr } from '../../utils/attr.js';\nimport { createSlotRecipeContext } from '../../styled-system/create-slot-recipe-context.js';\nimport { chakra } from '../../styled-system/factory.js';\n\nconst {\n  withProvider,\n  withContext,\n  useStyles: useSwitchStyles,\n  PropsProvider\n} = createSlotRecipeContext({ key: \"switch\" });\nconst SwitchRootProvider = withProvider(Switch.RootProvider, \"root\", { forwardAsChild: true });\nconst SwitchRoot = withProvider(\n  Switch.Root,\n  \"root\",\n  { forwardAsChild: true }\n);\nconst SwitchPropsProvider = PropsProvider;\nconst SwitchLabel = withContext(\n  Switch.Label,\n  \"label\",\n  { forwardAsChild: true }\n);\nconst SwitchThumb = withContext(\n  Switch.Thumb,\n  \"thumb\",\n  { forwardAsChild: true }\n);\nconst SwitchControl = withContext(\n  Switch.Control,\n  \"control\",\n  {\n    forwardAsChild: true,\n    defaultProps: { children: /* @__PURE__ */ jsx(SwitchThumb, {}) }\n  }\n);\nconst SwitchIndicator = forwardRef(function SwitchIndicator2(props, ref) {\n  const api = useSwitchContext();\n  const styles = useSwitchStyles();\n  const { fallback, children, ...rest } = props;\n  return /* @__PURE__ */ jsx(\n    chakra.span,\n    {\n      ref,\n      \"data-checked\": dataAttr(api.checked),\n      ...rest,\n      css: [styles.indicator, props.css],\n      children: api.checked ? children : fallback\n    }\n  );\n});\nconst SwitchThumbIndicator = forwardRef(function SwitchThumbIndicator2(props, ref) {\n  const api = useSwitchContext();\n  const { fallback, children, ...rest } = props;\n  return /* @__PURE__ */ jsx(chakra.span, { ref, \"data-checked\": dataAttr(api.checked), ...rest, children: api.checked ? children : fallback });\n});\nconst SwitchContext = Switch.Context;\nconst SwitchHiddenInput = Switch.HiddenInput;\n\nexport { SwitchContext, SwitchControl, SwitchHiddenInput, SwitchIndicator, SwitchLabel, SwitchPropsProvider, SwitchRoot, SwitchRootProvider, SwitchThumb, SwitchThumbIndicator, useSwitchStyles };\n","import React, { ForwardedRef, useMemo } from \"react\";\nimport { Switch as CSwitch } from \"@chakra-ui/react/switch\";\nimport {\n  withFormControl,\n  WithFormControlProps,\n} from \"hocs/withFormControl/withFormControl\";\nimport { FormControlSize } from \"hocs/withFormControl/withFormControl.types\";\n\nexport interface SwitchProps\n  extends WithFormControlProps,\n    Omit<CSwitch.RootProps, \"label\" | \"onChange\"> {\n  indeterminate?: boolean;\n  switchRef?: ForwardedRef<HTMLLabelElement>;\n  size?: FormControlSize;\n}\n\nconst Switch = withFormControl(\n  ({\n    children,\n    indeterminate = false,\n    onContrast,\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    label,\n    size = \"md\",\n    switchRef,\n    ...rest\n  }: SwitchProps): React.JSX.Element => {\n    const _computedVariant = useMemo(() => {\n      if (indeterminate) {\n        return onContrast ? \"indeterminateOnContrast\" : \"indeterminate\";\n      } else {\n        return onContrast ? \"onContrast\" : \"default\";\n      }\n    }, [indeterminate, onContrast]);\n\n    return (\n      <CSwitch.Root\n        className=\"Switch\"\n        data-testid=\"kibble-switch\"\n        ref={switchRef}\n        size={size}\n        variant={_computedVariant}\n        {...rest}\n      >\n        <CSwitch.HiddenInput\n          className=\"Switch_Input\"\n          data-testid=\"kibble-switch-input\"\n        />\n        <CSwitch.Control\n          className=\"Switch_Control\"\n          data-testid=\"kibble-switch-control\"\n        />\n        {!!children && <CSwitch.Label>{children}</CSwitch.Label>}\n      </CSwitch.Root>\n    );\n  },\n);\n\nconst WrappedSwitch = React.forwardRef(\n  (props: SwitchProps, ref: ForwardedRef<HTMLLabelElement>) => (\n    <Switch switchRef={ref} {...props} />\n  ),\n);\n\nWrappedSwitch.displayName = \"Switch\";\n\nexport { WrappedSwitch as Switch };\n"],"names":["SwitchProvider","useSwitchContext","createContext","SwitchControl","forwardRef","props","ref","switchContext","mergedProps","mergeProps","jsx","ark","SwitchHiddenInput","field","useFieldContext","SwitchLabel","useSwitch","id","useId","getRootNode","useEnvironmentContext","dir","useLocaleContext","machineProps","service","useMachine","zagSwitch.machine","zagSwitch.connect","normalizeProps","SwitchRoot","switchProps","localProps","createSplitProps","SwitchRootProvider","api","SwitchThumb","withProvider","withContext","useSwitchStyles","createSlotRecipeContext","Switch.RootProvider","Switch.Root","Switch.Label","Switch.Thumb","Switch.Control","styles","fallback","children","rest","chakra","dataAttr","Switch.HiddenInput","Switch","withFormControl","indeterminate","onContrast","label","size","switchRef","_computedVariant","useMemo","jsxs","CSwitch.Root","CSwitch.HiddenInput","CSwitch.Control","CSwitch.Label","WrappedSwitch","React"],"mappings":"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","x_google_ignoreList":[0,1,2,3,4,5,6,7,8]}

package/dist/chunks/tabs.component-Bi1vanBo.js

@@ -0,0 +1,639 @@
+import { j as c } from "./jsx-runtime-C5mzlN2N.js";
+import { I as S } from "./icon.component-DGNCL1Yc.js";
+import { N as G } from "./notificationCounter.component-Bei8mHSZ.js";
+import { W as z } from "./heading.component-D4rtbYK8.js";
+import { c as Q } from "./create-slot-recipe-context-BJmsuxih.js";
+import { useState as J, useEffect as Z, forwardRef as T, useId as ee } from "react";
+import { c as te, a as x, l as ae, m as se, f as m, h as oe, b as _, i as re, j as ne, k as ie, n as ce } from "./use-locale-context-D-agiW5E.js";
+import { u as le, s as O, R as B } from "./render-strategy-C8hwN3bm.js";
+import { Y as y, c as ue, y as de, a0 as ge, E as fe, aq as be, r as v, ar as pe, as as ve, S as Te, b as me, d as f, i as ye, L as he, m as Re, q as Ce, at as Ee, x as Pe, aj as Ve, P as Ie, Q as Ae } from "./index-CYk-7wwG.js";
+function xe(e, t) {
+  const [s, a] = J(e);
+  return Z(() => {
+    const r = setTimeout(() => {
+      a(e);
+    }, t);
+    return () => {
+      clearTimeout(r);
+    };
+  }, [e, t]), s;
+}
+const [k, F] = te({
+  name: "TabsContext",
+  hookName: "useTabsContext",
+  providerName: "<TabsProvider />"
+}), $ = T((e, t) => {
+  const [s, a] = x()(e, ["value"]), r = F(), o = le(), n = ae({
+    ...o,
+    present: xe(r.value === e.value, 0),
+    immediate: !0
+  }), u = y(r.getContentProps(s), n.getPresenceProps(), a);
+  return /* @__PURE__ */ c.jsx(se, { value: n, children: n.unmounted ? null : /* @__PURE__ */ c.jsx(m.div, { ...u, ref: oe(n.ref, t) }) });
+});
+$.displayName = "TabContent";
+const D = T((e, t) => {
+  const s = F(), a = y(s.getIndicatorProps(), e);
+  return /* @__PURE__ */ c.jsx(m.div, { ...a, ref: t });
+});
+D.displayName = "TabIndicator";
+const U = T((e, t) => {
+  const s = F(), a = y(s.getListProps(), e);
+  return /* @__PURE__ */ c.jsx(m.div, { ...a, ref: t });
+});
+U.displayName = "TabList";
+const W = T((e, t) => {
+  const [s, a] = x()(e, ["disabled", "value"]), r = F(), o = y(r.getTriggerProps(s), a);
+  return /* @__PURE__ */ c.jsx(m.button, { ...o, ref: t });
+});
+W.displayName = "TabTrigger";
+var Fe = me("tabs").parts("root", "list", "trigger", "content", "indicator"), h = Fe.build(), Ne = (e) => e.ids?.root ?? `tabs:${e.id}`, R = (e) => e.ids?.list ?? `tabs:${e.id}:list`, N = (e, t) => e.ids?.content ?? `tabs:${e.id}:content-${t}`, b = (e, t) => e.ids?.trigger ?? `tabs:${e.id}:trigger-${t}`, M = (e) => e.ids?.indicator ?? `tabs:${e.id}:indicator`, _e = (e) => e.getById(R(e)), we = (e, t) => e.getById(N(e, t)), A = (e, t) => e.getById(b(e, t)), j = (e) => e.getById(M(e)), C = (e) => {
+  const s = `[role=tab][data-ownedby='${CSS.escape(R(e))}']:not([disabled])`;
+  return Pe(_e(e), s);
+}, Le = (e) => Ae(C(e)), Se = (e) => Ie(C(e)), je = (e, t) => ve(C(e), b(e, t.value), t.loopFocus), Oe = (e, t) => pe(C(e), b(e, t.value), t.loopFocus), H = (e) => ({
+  left: e?.offsetLeft ?? 0,
+  top: e?.offsetTop ?? 0,
+  width: e?.offsetWidth ?? 0,
+  height: e?.offsetHeight ?? 0
+}), Be = (e, t) => {
+  const s = Ee(C(e), b(e, t));
+  return X(H(s));
+}, X = (e) => ({
+  width: `${e.width}px`,
+  height: `${e.height}px`,
+  left: `${e.left}px`,
+  top: `${e.top}px`
+});
+function ke(e, t) {
+  const { state: s, send: a, context: r, prop: o, scope: n } = e, u = o("translations"), p = s.matches("focused"), P = o("orientation") === "vertical", V = o("orientation") === "horizontal", w = o("composite");
+  function L(i) {
+    return {
+      selected: r.get("value") === i.value,
+      focused: r.get("focusedValue") === i.value,
+      disabled: !!i.disabled
+    };
+  }
+  return {
+    value: r.get("value"),
+    focusedValue: r.get("focusedValue"),
+    setValue(i) {
+      a({ type: "SET_VALUE", value: i });
+    },
+    clearValue() {
+      a({ type: "CLEAR_VALUE" });
+    },
+    setIndicatorRect(i) {
+      const l = b(n, i);
+      a({ type: "SET_INDICATOR_RECT", id: l });
+    },
+    syncTabIndex() {
+      a({ type: "SYNC_TAB_INDEX" });
+    },
+    selectNext(i) {
+      a({ type: "TAB_FOCUS", value: i, src: "selectNext" }), a({ type: "ARROW_NEXT", src: "selectNext" });
+    },
+    selectPrev(i) {
+      a({ type: "TAB_FOCUS", value: i, src: "selectPrev" }), a({ type: "ARROW_PREV", src: "selectPrev" });
+    },
+    focus() {
+      const i = r.get("value");
+      i && A(n, i)?.focus();
+    },
+    getRootProps() {
+      return t.element({
+        ...h.root.attrs,
+        id: Ne(n),
+        "data-orientation": o("orientation"),
+        "data-focus": f(p),
+        dir: o("dir")
+      });
+    },
+    getListProps() {
+      return t.element({
+        ...h.list.attrs,
+        id: R(n),
+        role: "tablist",
+        dir: o("dir"),
+        "data-focus": f(p),
+        "aria-orientation": o("orientation"),
+        "data-orientation": o("orientation"),
+        "aria-label": u?.listLabel,
+        onKeyDown(i) {
+          if (i.defaultPrevented || !he(i) || Re(i)) return;
+          const l = {
+            ArrowDown() {
+              V || a({ type: "ARROW_NEXT", key: "ArrowDown" });
+            },
+            ArrowUp() {
+              V || a({ type: "ARROW_PREV", key: "ArrowUp" });
+            },
+            ArrowLeft() {
+              P || a({ type: "ARROW_PREV", key: "ArrowLeft" });
+            },
+            ArrowRight() {
+              P || a({ type: "ARROW_NEXT", key: "ArrowRight" });
+            },
+            Home() {
+              a({ type: "HOME" });
+            },
+            End() {
+              a({ type: "END" });
+            },
+            Enter() {
+              a({ type: "ENTER" });
+            }
+          };
+          let d = Ce(i, {
+            dir: o("dir"),
+            orientation: o("orientation")
+          });
+          const g = l[d];
+          g && (i.preventDefault(), g(i));
+        }
+      });
+    },
+    getTriggerState: L,
+    getTriggerProps(i) {
+      const { value: l, disabled: d } = i, g = L(i);
+      return t.button({
+        ...h.trigger.attrs,
+        role: "tab",
+        type: "button",
+        disabled: d,
+        dir: o("dir"),
+        "data-orientation": o("orientation"),
+        "data-disabled": f(d),
+        "aria-disabled": d,
+        "data-value": l,
+        "aria-selected": g.selected,
+        "data-selected": f(g.selected),
+        "data-focus": f(g.focused),
+        "aria-controls": g.selected ? N(n, l) : void 0,
+        "data-ownedby": R(n),
+        "data-ssr": f(r.get("ssr")),
+        id: b(n, l),
+        tabIndex: g.selected && w ? 0 : -1,
+        onFocus() {
+          a({ type: "TAB_FOCUS", value: l });
+        },
+        onBlur(I) {
+          I.relatedTarget?.getAttribute("role") !== "tab" && a({ type: "TAB_BLUR" });
+        },
+        onClick(I) {
+          I.defaultPrevented || d || (ye() && I.currentTarget.focus(), a({ type: "TAB_CLICK", value: l }));
+        }
+      });
+    },
+    getContentProps(i) {
+      const { value: l } = i, d = r.get("value") === l;
+      return t.element({
+        ...h.content.attrs,
+        dir: o("dir"),
+        id: N(n, l),
+        tabIndex: w ? 0 : -1,
+        "aria-labelledby": b(n, l),
+        role: "tabpanel",
+        "data-ownedby": R(n),
+        "data-selected": f(d),
+        "data-orientation": o("orientation"),
+        hidden: !d
+      });
+    },
+    getIndicatorProps() {
+      const i = r.get("indicatorRect"), l = r.get("indicatorTransition");
+      return t.element({
+        id: M(n),
+        ...h.indicator.attrs,
+        dir: o("dir"),
+        "data-orientation": o("orientation"),
+        style: {
+          "--transition-property": "left, right, top, bottom, width, height",
+          "--left": i.left,
+          "--top": i.top,
+          "--width": i.width,
+          "--height": i.height,
+          position: "absolute",
+          willChange: "var(--transition-property)",
+          transitionProperty: "var(--transition-property)",
+          transitionDuration: l ? "var(--transition-duration, 150ms)" : "0ms",
+          transitionTimingFunction: "var(--transition-timing-function)",
+          [V ? "left" : "top"]: V ? "var(--left)" : "var(--top)"
+        }
+      });
+    }
+  };
+}
+var { not: $e } = de(), De = ue({
+  props({ props: e }) {
+    return {
+      dir: "ltr",
+      orientation: "horizontal",
+      activationMode: "automatic",
+      loopFocus: !0,
+      composite: !0,
+      navigate(t) {
+        Te(t.node);
+      },
+      defaultValue: null,
+      ...e
+    };
+  },
+  initialState() {
+    return "idle";
+  },
+  context({ prop: e, bindable: t }) {
+    return {
+      value: t(() => ({
+        defaultValue: e("defaultValue"),
+        value: e("value"),
+        onChange(s) {
+          e("onValueChange")?.({ value: s });
+        }
+      })),
+      focusedValue: t(() => ({
+        defaultValue: e("value") || e("defaultValue"),
+        sync: !0,
+        onChange(s) {
+          e("onFocusChange")?.({ focusedValue: s });
+        }
+      })),
+      ssr: t(() => ({ defaultValue: !0 })),
+      indicatorTransition: t(() => ({ defaultValue: !1 })),
+      indicatorRect: t(() => ({
+        defaultValue: { left: "0px", top: "0px", width: "0px", height: "0px" }
+      }))
+    };
+  },
+  watch({ context: e, prop: t, track: s, action: a }) {
+    s([() => e.get("value")], () => {
+      a(["allowIndicatorTransition", "syncIndicatorRect", "syncTabIndex", "navigateIfNeeded"]);
+    }), s([() => t("dir"), () => t("orientation")], () => {
+      a(["syncIndicatorRect"]);
+    });
+  },
+  on: {
+    SET_VALUE: {
+      actions: ["setValue"]
+    },
+    CLEAR_VALUE: {
+      actions: ["clearValue"]
+    },
+    SET_INDICATOR_RECT: {
+      actions: ["setIndicatorRect"]
+    },
+    SYNC_TAB_INDEX: {
+      actions: ["syncTabIndex"]
+    }
+  },
+  entry: ["syncIndicatorRect", "syncTabIndex", "syncSsr"],
+  exit: ["cleanupObserver"],
+  states: {
+    idle: {
+      on: {
+        TAB_FOCUS: {
+          target: "focused",
+          actions: ["setFocusedValue"]
+        },
+        TAB_CLICK: {
+          target: "focused",
+          actions: ["setFocusedValue", "setValue"]
+        }
+      }
+    },
+    focused: {
+      on: {
+        TAB_CLICK: {
+          target: "focused",
+          actions: ["setFocusedValue", "setValue"]
+        },
+        ARROW_PREV: [
+          {
+            guard: "selectOnFocus",
+            actions: ["focusPrevTab", "selectFocusedTab"]
+          },
+          {
+            actions: ["focusPrevTab"]
+          }
+        ],
+        ARROW_NEXT: [
+          {
+            guard: "selectOnFocus",
+            actions: ["focusNextTab", "selectFocusedTab"]
+          },
+          {
+            actions: ["focusNextTab"]
+          }
+        ],
+        HOME: [
+          {
+            guard: "selectOnFocus",
+            actions: ["focusFirstTab", "selectFocusedTab"]
+          },
+          {
+            actions: ["focusFirstTab"]
+          }
+        ],
+        END: [
+          {
+            guard: "selectOnFocus",
+            actions: ["focusLastTab", "selectFocusedTab"]
+          },
+          {
+            actions: ["focusLastTab"]
+          }
+        ],
+        ENTER: {
+          guard: $e("selectOnFocus"),
+          actions: ["selectFocusedTab"]
+        },
+        TAB_FOCUS: {
+          actions: ["setFocusedValue"]
+        },
+        TAB_BLUR: {
+          target: "idle",
+          actions: ["clearFocusedValue"]
+        }
+      }
+    }
+  },
+  implementations: {
+    guards: {
+      selectOnFocus: ({ prop: e }) => e("activationMode") === "automatic"
+    },
+    actions: {
+      selectFocusedTab({ context: e, prop: t }) {
+        v(() => {
+          const s = e.get("focusedValue");
+          if (!s) return;
+          const r = t("deselectable") && e.get("value") === s ? null : s;
+          e.set("value", r);
+        });
+      },
+      setFocusedValue({ context: e, event: t, flush: s }) {
+        t.value != null && s(() => {
+          e.set("focusedValue", t.value);
+        });
+      },
+      clearFocusedValue({ context: e }) {
+        e.set("focusedValue", null);
+      },
+      setValue({ context: e, event: t, prop: s }) {
+        const a = s("deselectable") && e.get("value") === e.get("focusedValue");
+        e.set("value", a ? null : t.value);
+      },
+      clearValue({ context: e }) {
+        e.set("value", null);
+      },
+      focusFirstTab({ scope: e }) {
+        v(() => {
+          Le(e)?.focus();
+        });
+      },
+      focusLastTab({ scope: e }) {
+        v(() => {
+          Se(e)?.focus();
+        });
+      },
+      focusNextTab({ context: e, prop: t, scope: s, event: a }) {
+        const r = a.value ?? e.get("focusedValue");
+        if (!r) return;
+        const o = je(s, {
+          value: r,
+          loopFocus: t("loopFocus")
+        });
+        v(() => {
+          t("composite") ? o?.focus() : o?.dataset.value != null && e.set("focusedValue", o.dataset.value);
+        });
+      },
+      focusPrevTab({ context: e, prop: t, scope: s, event: a }) {
+        const r = a.value ?? e.get("focusedValue");
+        if (!r) return;
+        const o = Oe(s, {
+          value: r,
+          loopFocus: t("loopFocus")
+        });
+        v(() => {
+          t("composite") ? o?.focus() : o?.dataset.value != null && e.set("focusedValue", o.dataset.value);
+        });
+      },
+      syncTabIndex({ context: e, scope: t }) {
+        v(() => {
+          const s = e.get("value");
+          if (!s) return;
+          const a = we(t, s);
+          if (!a) return;
+          Ve(a).length > 0 ? a.removeAttribute("tabindex") : a.setAttribute("tabindex", "0");
+        });
+      },
+      cleanupObserver({ refs: e }) {
+        const t = e.get("indicatorCleanup");
+        t && t();
+      },
+      allowIndicatorTransition({ context: e }) {
+        e.set("indicatorTransition", !0);
+      },
+      setIndicatorRect({ context: e, event: t, scope: s }) {
+        const a = t.id ?? e.get("value");
+        if (!j(s)) return;
+        if (!a) {
+          e.set("indicatorTransition", !1);
+          return;
+        }
+        A(s, a) && (e.set("indicatorRect", Be(s, a)), be(() => {
+          e.set("indicatorTransition", !1);
+        }));
+      },
+      syncSsr({ context: e }) {
+        e.set("ssr", !1);
+      },
+      syncIndicatorRect({ context: e, refs: t, scope: s }) {
+        const a = t.get("indicatorCleanup");
+        a && a();
+        const r = e.get("value");
+        if (!r) {
+          e.set("indicatorTransition", !1);
+          return;
+        }
+        const o = A(s, r), n = j(s);
+        if (!o || !n) return;
+        const u = fe([o], {
+          measure(p) {
+            return H(p);
+          },
+          onEntry({ rects: p }) {
+            const [P] = p;
+            e.set("indicatorRect", X(P));
+          }
+        });
+        t.set("indicatorCleanup", u);
+      },
+      navigateIfNeeded({ context: e, prop: t, scope: s }) {
+        const a = e.get("value");
+        if (!a) return;
+        const r = A(s, a);
+        ge(r) && t("navigate")?.({ value: a, node: r, href: r.href });
+      }
+    }
+  }
+});
+_()([
+  "activationMode",
+  "composite",
+  "deselectable",
+  "dir",
+  "getRootNode",
+  "id",
+  "ids",
+  "loopFocus",
+  "navigate",
+  "onFocusChange",
+  "onValueChange",
+  "orientation",
+  "translations",
+  "value",
+  "defaultValue"
+]);
+_()(["disabled", "value"]);
+_()(["value"]);
+const Ue = (e) => {
+  const t = ee(), { getRootNode: s } = re(), { dir: a } = ne(), r = {
+    id: t,
+    dir: a,
+    getRootNode: s,
+    ...e
+  }, o = ie(De, r);
+  return ke(o, ce);
+}, K = T((e, t) => {
+  const [s, a] = O(e), [r, o] = x()(a, [
+    "activationMode",
+    "composite",
+    "defaultValue",
+    "deselectable",
+    "id",
+    "ids",
+    "loopFocus",
+    "navigate",
+    "onFocusChange",
+    "onValueChange",
+    "orientation",
+    "translations",
+    "value"
+  ]), n = Ue(r), u = y(n.getRootProps(), o);
+  return /* @__PURE__ */ c.jsx(k, { value: n, children: /* @__PURE__ */ c.jsx(B, { value: s, children: /* @__PURE__ */ c.jsx(m.div, { ...u, ref: t }) }) });
+});
+K.displayName = "TabsRoot";
+const q = T((e, t) => {
+  const [s, a] = O(e), [{ value: r }, o] = x()(a, ["value"]), n = y(r.getRootProps(), o);
+  return /* @__PURE__ */ c.jsx(k, { value: r, children: /* @__PURE__ */ c.jsx(B, { value: s, children: /* @__PURE__ */ c.jsx(m.div, { ...n, ref: t }) }) });
+});
+q.displayName = "TabsRootProvider";
+const {
+  withProvider: Y,
+  withContext: E
+} = Q({ key: "tabs" });
+Y(q, "root", { forwardAsChild: !0 });
+const We = Y(
+  K,
+  "root",
+  { forwardAsChild: !0 }
+), Me = E(
+  W,
+  "trigger",
+  { forwardAsChild: !0 }
+), He = E(
+  $,
+  "content",
+  { forwardAsChild: !0 }
+);
+E("div", "contentGroup");
+const Xe = E(
+  U,
+  "list",
+  { forwardAsChild: !0 }
+);
+E(
+  D,
+  "indicator",
+  { forwardAsChild: !0 }
+);
+const Ke = {
+  xs: "sm",
+  sm: "md",
+  md: "md",
+  lg: "lg"
+}, qe = {
+  xs: "xs",
+  sm: "xs",
+  md: "sm",
+  lg: "md"
+}, Ye = ({
+  iconName: e,
+  iconPosition: t = "left",
+  label: s,
+  notificationCounterProps: a,
+  showNotificationCounter: r,
+  size: o = "md",
+  ...n
+}) => /* @__PURE__ */ c.jsxs(Me, { className: "Tab", "data-testid": "kibble-tab", ...n, children: [
+  !!e && t === "left" && /* @__PURE__ */ c.jsx(
+    S,
+    {
+      className: "Tab__Icon",
+      "data-testid": "kibble-tab-icon",
+      name: e,
+      size: o,
+      variant: "default"
+    }
+  ),
+  /* @__PURE__ */ c.jsx(
+    z,
+    {
+      className: "Tab__Label",
+      "data-testid": "kibble-tab-label",
+      size: qe[o],
+      children: s
+    }
+  ),
+  !!e && t === "right" && /* @__PURE__ */ c.jsx(
+    S,
+    {
+      className: "Tab__Icon",
+      "data-testid": "kibble-tab-icon",
+      name: e,
+      size: o
+    }
+  ),
+  r && /* @__PURE__ */ c.jsx(
+    G,
+    {
+      className: "Tab__NotificationCounter",
+      "data-testid": "kibble-tab-notification-counter",
+      ...a,
+      size: Ke[o]
+    }
+  )
+] }), rt = ({
+  align: e = "start",
+  onChange: t,
+  size: s = "md",
+  tabs: a,
+  tabsContents: r,
+  ...o
+}) => /* @__PURE__ */ c.jsxs(
+  We,
+  {
+    className: "Tabs",
+    "data-testid": "kibble-tabs",
+    justify: e || o.justify,
+    size: s,
+    onValueChange: ({ value: n }) => t?.(n),
+    ...o,
+    children: [
+      /* @__PURE__ */ c.jsx(Xe, { className: "Tabs__List", "data-testid": "kibble-tabs-list", children: a.map((n, u) => /* @__PURE__ */ c.jsx(Ye, { ...n }, `tab-${u}`)) }),
+      !!r && r.map((n, u) => /* @__PURE__ */ c.jsx(He, { ...n }, `tabContent-${u}`))
+    ]
+  }
+);
+export {
+  rt as T
+};
+//# sourceMappingURL=tabs.component-Bi1vanBo.js.map