@kolking/react-ui 1.4.0 → 1.6.0

package/dist/components/Fields/Numeric.js

@@ -0,0 +1,62 @@
+import { jsxs as p, jsx as t } from "react/jsx-runtime";
+import b from "classnames";
+import f, { useRef as y, useImperativeHandle as _, useCallback as c } from "react";
+import { Icon as i } from "../Icon/Icon.js";
+import { Button as o } from "../Button/Button.js";
+import { I as h } from "../../Input-D46mAsdt.js";
+const v = "styles_numeric_dzUSE", w = "styles_increase_5S-Jo", E = "styles_decrease_j8UR6", s = {
+  numeric: v,
+  increase: w,
+  decrease: E
+}, j = f.forwardRef(
+  ({ className: l, ...a }, u) => {
+    const e = y(null);
+    _(u, () => e.current);
+    const m = c(() => {
+      var n, r;
+      (n = e.current) == null || n.stepUp(), (r = e.current) == null || r.dispatchEvent(new Event("change", { bubbles: !0 }));
+    }, []), d = c(() => {
+      var n, r;
+      (n = e.current) == null || n.stepDown(), (r = e.current) == null || r.dispatchEvent(new Event("change", { bubbles: !0 }));
+    }, []);
+    return /* @__PURE__ */ p(
+      h,
+      {
+        ...a,
+        ref: e,
+        type: "number",
+        wrapperType: "numeric",
+        className: b(s.numeric, l),
+        children: [
+          /* @__PURE__ */ t(
+            o,
+            {
+              type: "button",
+              variant: "secondary",
+              "aria-label": "Increase",
+              disabled: a.disabled,
+              className: s.increase,
+              icon: /* @__PURE__ */ t(i, { name: "triangle-up" }),
+              onClick: m
+            }
+          ),
+          /* @__PURE__ */ t(
+            o,
+            {
+              type: "button",
+              variant: "secondary",
+              "aria-label": "Decrease",
+              disabled: a.disabled,
+              className: s.decrease,
+              icon: /* @__PURE__ */ t(i, { name: "triangle-down" }),
+              onClick: d
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+export {
+  j as Numeric
+};

package/dist/components/Fields/Radio.js

@@ -2,7 +2,7 @@ import { jsxs as l, jsx as o } from "react/jsx-runtime";
 import c from "classnames";
 import f from "react";
 import { cssProps as n } from "../../utils/helpers.js";
-import { I as u, s } from "../../Input-DE1QkW7S.js";
+import { I as u, s } from "../../Input-D46mAsdt.js";
 const I = f.forwardRef(
   ({ size: r, error: t, label: a, className: e, style: i, required: d, ...m }, p) => /* @__PURE__ */ l(
     "label",

package/dist/components/Fields/Range.d.ts

@@ -0,0 +1,20 @@
+import { default as React } from 'react';
+import { BaseInputProps } from './Input';
+type TickMarksProps = {
+    ticks: number | (string | number)[];
+};
+export type RangeProps = Omit<BaseInputProps, 'min' | 'max' | 'value' | 'defaultValue'> & {
+    min?: number;
+    max?: number;
+    value?: number;
+    defaultValue?: number;
+    ticks?: TickMarksProps['ticks'];
+};
+export declare const Range: React.ForwardRefExoticComponent<Omit<BaseInputProps, "max" | "min" | "defaultValue" | "value"> & {
+    min?: number;
+    max?: number;
+    value?: number;
+    defaultValue?: number;
+    ticks?: TickMarksProps["ticks"];
+} & React.RefAttributes<HTMLInputElement>>;
+export {};

package/dist/components/Fields/Range.js

@@ -0,0 +1,54 @@
+import { jsxs as g, jsx as t } from "react/jsx-runtime";
+import R from "classnames";
+import w, { useRef as x, useState as T, useEffect as j, useCallback as P } from "react";
+import { V } from "../../ValidationTooltip-D8d9O6Re.js";
+import { cssProps as A, wrapNode as E } from "../../utils/helpers.js";
+const J = "styles_range_j9iED", D = "styles_range_thumb_6aftN", F = "styles_range_wrapper_LTcAf", H = "styles_range_track_HdlJx", L = "styles_ticks_YaeJb", n = {
+  range: J,
+  range_thumb: D,
+  range_wrapper: F,
+  range_track: H,
+  ticks: L
+};
+function f(r, a, e, s) {
+  r == null || r.style.setProperty("--progress", `${(s - a) / (e - a)}`);
+}
+const M = ({ ticks: r }) => {
+  const a = typeof r == "number" ? [...Array(r)] : r;
+  return a.length < 2 ? null : /* @__PURE__ */ t("ul", { "data-range-ticks": !0, className: n.ticks, children: a.map((e, s) => /* @__PURE__ */ t("li", { children: e !== void 0 && /* @__PURE__ */ t("small", { children: e }) }, s)) });
+}, B = w.forwardRef(
+  ({ size: r, height: a, error: e, ticks: s, className: m, style: y, children: u, onChange: c, ...i }, h) => {
+    const { min: l = 0, max: o = 100, defaultValue: v = 50, value: p = v } = i, d = x(null), [k, b] = T(null);
+    j(() => {
+      f(d.current, l, o, p);
+    }, [l, o, p]);
+    const N = P(
+      (_) => {
+        f(d.current, l, o, parseFloat(_.currentTarget.value)), c == null || c(_);
+      },
+      [l, o, c]
+    );
+    return /* @__PURE__ */ g(
+      "div",
+      {
+        ref: d,
+        "data-input": "range",
+        "data-disabled": i.disabled,
+        "data-invalid": e ? !0 : void 0,
+        className: R(n.range, m),
+        style: { ...y, ...A({ size: r, height: a }) },
+        children: [
+          /* @__PURE__ */ g("div", { className: n.range_wrapper, children: [
+            /* @__PURE__ */ t("div", { "data-range-track": !0, className: n.range_track }),
+            /* @__PURE__ */ t("div", { ref: b, "data-range-thumb": !0, className: n.range_thumb, children: u !== void 0 && E(u, "small") }),
+            /* @__PURE__ */ t(V, { content: e, placement: "top", anchor: k, children: /* @__PURE__ */ t("input", { ...i, ref: h, type: "range", onChange: N }) })
+          ] }),
+          s !== void 0 && /* @__PURE__ */ t(M, { ticks: s })
+        ]
+      }
+    );
+  }
+);
+export {
+  B as Range
+};

package/dist/components/Fields/Select.js

@@ -2,7 +2,7 @@ import { jsx as e } from "react/jsx-runtime";
 import l from "classnames";
 import c from "react";
 import { cssProps as m } from "../../utils/helpers.js";
-import { V as d, s as f } from "../../ValidationTooltip-BgSwl0hJ.js";
+import { V as d, s as f } from "../../ValidationTooltip-D8d9O6Re.js";
 const y = c.forwardRef(
   ({ size: o, error: t, className: s, style: a, ...r }, i) => /* @__PURE__ */ e(d, { content: t, children: /* @__PURE__ */ e(
     "select",

package/dist/components/Fields/Switch.d.ts

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+import { BaseInputProps } from './Input';
+export type SwitchProps = BaseInputProps & {
+    label?: React.ReactNode;
+    checkedColor?: string;
+};
+export declare const Switch: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & {
+    size?: "xs" | "sm" | "md" | "lg" | "xl";
+    error?: string;
+} & {
+    label?: React.ReactNode;
+    checkedColor?: string;
+} & React.RefAttributes<HTMLInputElement>>;

package/dist/components/Fields/Switch.js

@@ -0,0 +1,36 @@
+import { jsxs as d, jsx as t } from "react/jsx-runtime";
+import m from "react";
+import h from "classnames";
+import { cssProps as u } from "../../utils/helpers.js";
+import { V as f } from "../../ValidationTooltip-D8d9O6Re.js";
+const _ = "styles_label_p-D4Y", w = "styles_input_VteBP", s = {
+  switch: "styles_switch_UNvH8",
+  label: _,
+  input: w
+}, V = m.forwardRef(
+  ({ size: a, error: i, label: e, required: l, checkedColor: o, className: c, style: n, ...r }, p) => /* @__PURE__ */ d(
+    "label",
+    {
+      "data-input": "switch",
+      "data-required": l,
+      className: h(s.switch, c),
+      style: { ...n, ...u({ size: a, checkedColor: o }) },
+      children: [
+        /* @__PURE__ */ t(f, { content: i, children: /* @__PURE__ */ t(
+          "input",
+          {
+            ...r,
+            ref: p,
+            type: "checkbox",
+            "data-invalid": i ? !0 : void 0,
+            className: s.input
+          }
+        ) }),
+        e && /* @__PURE__ */ t("div", { className: s.label, children: e })
+      ]
+    }
+  )
+);
+export {
+  V as Switch
+};

package/dist/components/Fields/Textarea.js

@@ -3,7 +3,7 @@ import c from "classnames";
 import d from "react";
 import f from "react-textarea-autosize";
 import { cssProps as l } from "../../utils/helpers.js";
-import { V as x, s as u } from "../../ValidationTooltip-BgSwl0hJ.js";
+import { V as x, s as u } from "../../ValidationTooltip-D8d9O6Re.js";
 const _ = d.forwardRef(
   ({ autosize: t = !0, size: e, error: o, className: s, style: m, ...a }, i) => {
     const n = t ? f : "textarea", p = t ? { minRows: 2, ...a } : a;

package/dist/components/Fields/ValidationTooltip.d.ts

@@ -1,2 +1,2 @@
 import { TooltipProps } from '../Tooltip';
-export declare const ValidationTooltip: (props: TooltipProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ValidationTooltip: ({ className, ...props }: TooltipProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Fields/ValidationTooltip.js

@@ -1,6 +1,7 @@
 import "react/jsx-runtime";
+import "classnames";
 import "../Tooltip/Tooltip.js";
-import { V as r } from "../../ValidationTooltip-BgSwl0hJ.js";
+import { V as m } from "../../ValidationTooltip-D8d9O6Re.js";
 export {
-  r as ValidationTooltip
+  m as ValidationTooltip
 };

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

@@ -1,8 +1,10 @@
 export * from './Checkbox';
 export * from './Field';
 export * from './Input';
-export * from './Quantity';
+export * from './Numeric';
 export * from './Radio';
+export * from './Range';
 export * from './Select';
+export * from './Switch';
 export * from './Textarea';
 export * from './ValidationTooltip';

package/dist/components/Fields/index.js

@@ -1,20 +1,24 @@
-import { Checkbox as r } from "./Checkbox.js";
-import { Field as p, FieldDescription as i, FieldLabel as x } from "./Field.js";
-import { I as f } from "../../Input-DE1QkW7S.js";
-import { Quantity as l } from "./Quantity.js";
-import { Radio as n } from "./Radio.js";
-import { Select as s } from "./Select.js";
-import { Textarea as b } from "./Textarea.js";
-import { V as I } from "../../ValidationTooltip-BgSwl0hJ.js";
+import { Checkbox as e } from "./Checkbox.js";
+import { Field as p, FieldDescription as x, FieldLabel as i } from "./Field.js";
+import { I as f } from "../../Input-D46mAsdt.js";
+import { Numeric as l } from "./Numeric.js";
+import { Radio as d } from "./Radio.js";
+import { Range as s } from "./Range.js";
+import { Select as b } from "./Select.js";
+import { Switch as u } from "./Switch.js";
+import { Textarea as R } from "./Textarea.js";
+import { V as T } from "../../ValidationTooltip-D8d9O6Re.js";
 export {
-  r as Checkbox,
+  e as Checkbox,
   p as Field,
-  i as FieldDescription,
-  x as FieldLabel,
+  x as FieldDescription,
+  i as FieldLabel,
   f as Input,
-  l as Quantity,
-  n as Radio,
-  s as Select,
-  b as Textarea,
-  I as ValidationTooltip
+  l as Numeric,
+  d as Radio,
+  s as Range,
+  b as Select,
+  u as Switch,
+  R as Textarea,
+  T as ValidationTooltip
 };

package/dist/components/Flex/Flex.d.ts

@@ -19,4 +19,4 @@ export declare const Flex: <T extends React.ElementType = "div">(props: {
     wrap?: React.CSSProperties["flexWrap"];
     marginStart?: React.CSSProperties["marginBlockStart"];
     marginEnd?: React.CSSProperties["marginBlockEnd"];
-} & Omit<React.PropsWithoutRef<React.ComponentProps<T>>, "direction" | "as" | "align" | "wrap" | "justify" | "gap" | "marginStart" | "marginEnd"> & React.RefAttributes<unknown>) => React.ReactElement | null;
+} & Omit<React.PropsWithoutRef<React.ComponentProps<T>>, "direction" | "as" | "align" | "wrap" | "justify" | "marginStart" | "marginEnd" | "gap"> & React.RefAttributes<unknown>) => React.ReactElement | null;

package/dist/components/Flex/Flex.js

@@ -1,36 +1,37 @@
-import { jsx as a } from "react/jsx-runtime";
+import { jsx as p } from "react/jsx-runtime";
 import d from "classnames";
-import { fixedForwardRef as i, cssProps as p } from "../../utils/helpers.js";
-const y = "Flex_flex_GBHBA", F = {
-  flex: y
+import { fixedForwardRef as i, cssProps as F } from "../../utils/helpers.js";
+const u = "Flex_flex_GBHBA", w = {
+  flex: u
 };
-function u({
-  as: l,
+function y({
+  as: o,
   direction: e = "row",
-  gap: o,
-  align: r,
+  gap: r,
+  align: t,
   justify: s,
-  wrap: f,
-  marginStart: n,
-  marginEnd: x,
-  className: m,
-  ...t
-}, c) {
-  return /* @__PURE__ */ a(
-    l ?? "div",
+  wrap: l,
+  marginStart: f,
+  marginEnd: n,
+  className: x,
+  style: m,
+  ...c
+}, a) {
+  return /* @__PURE__ */ p(
+    o ?? "div",
     {
-      ...t,
-      ref: c,
+      ...c,
+      ref: a,
       "data-flex": e,
-      className: d(F.flex, m),
+      className: d(w.flex, x),
       style: {
-        ...t.style,
-        ...p({ gap: o, align: r, justify: s, direction: e, wrap: f, marginStart: n, marginEnd: x })
+        ...m,
+        ...F({ gap: r, align: t, justify: s, direction: e, wrap: l, marginStart: f, marginEnd: n })
       }
     }
   );
 }
-const j = i(u);
+const v = i(y);
 export {
-  j as Flex
+  v as Flex
 };

package/dist/components/Menu/Menu.d.ts

@@ -1,9 +1,13 @@
 import { default as React } from 'react';
 import { Placement } from '@floating-ui/react';
-export type MenuProps = React.HTMLAttributes<HTMLDivElement> & {
+export type MenuProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> & {
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
     placement?: Placement;
     trigger: React.JSX.Element;
     minWidth?: React.CSSProperties['minWidth'];
     maxWidth?: React.CSSProperties['maxWidth'];
+    minHeight?: React.CSSProperties['minHeight'];
+    maxHeight?: React.CSSProperties['maxHeight'];
+    onSelect?: (index: number) => void;
 };
-export declare const Menu: ({ placement, trigger, minWidth, maxWidth, className, children, ...props }: MenuProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Menu: ({ size, placement, trigger, minWidth, maxWidth, minHeight, maxHeight, className, children, onSelect, ...props }: MenuProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Menu/Menu.js

@@ -1,78 +1,84 @@
-import { jsxs as E, Fragment as I, jsx as t } from "react/jsx-runtime";
-import N, { useState as r, useRef as d, useMemo as j, useEffect as B } from "react";
-import { flushSync as L } from "react-dom";
-import { useFloating as O, offset as W, flip as _, size as b, autoUpdate as k, useInteractions as A, useDismiss as D, useRole as H, useClick as U, useListNavigation as q, FloatingPortal as G, FloatingFocusManager as J, FloatingList as K } from "@floating-ui/react";
-import Q from "classnames";
-import { MenuContext as T } from "./MenuContext.js";
-import { s as V } from "../../styles.module-CUhWny5T.js";
-const ne = ({
-  placement: p = "bottom-start",
+import { jsxs as B, Fragment as L, jsx as t } from "react/jsx-runtime";
+import O, { useState as r, useRef as p, useMemo as W, useEffect as _ } from "react";
+import { flushSync as b } from "react-dom";
+import { useFloating as k, offset as A, flip as D, size as H, autoUpdate as U, useInteractions as q, useDismiss as G, useRole as J, useClick as K, useListNavigation as Q, FloatingPortal as T, FloatingFocusManager as V, FloatingList as X } from "@floating-ui/react";
+import Y from "classnames";
+import { MenuContext as Z } from "./MenuContext.js";
+import { cssProps as $ } from "../../utils/helpers.js";
+import { s as ee } from "../../styles.module-D1F3R7Vi.js";
+const me = ({
+  size: g,
+  placement: h = "bottom-start",
   trigger: a,
-  minWidth: g,
-  maxWidth: h,
-  className: R,
-  children: v,
-  ...x
+  minWidth: R,
+  maxWidth: v,
+  minHeight: x,
+  maxHeight: F,
+  className: P,
+  children: y,
+  onSelect: l,
+  ...z
 }) => {
-  const [l, c] = r(!1), [i, F] = r(null), [y, M] = r({}), m = d([]), u = d(null), { refs: o, context: e, floatingStyles: P } = O({
-    open: l,
-    placement: p,
+  const [m, c] = r(!1), [i, M] = r(null), [w, C] = r({}), u = p([]), f = p(null), { refs: o, context: e, floatingStyles: E } = k({
+    open: m,
+    placement: h,
     onOpenChange: c,
-    whileElementsMounted: k,
+    whileElementsMounted: U,
     middleware: [
-      W(5),
-      _({ padding: 10 }),
-      b({
+      A(5),
+      D({ padding: 10 }),
+      H({
         padding: 10,
-        apply({ rects: n, availableWidth: s, availableHeight: z }) {
-          L(() => {
-            M({
-              minWidth: n.reference.width,
-              maxWidth: s,
-              maxHeight: z
+        apply({ rects: n, availableWidth: s, availableHeight: j }) {
+          b(() => {
+            C({
+              minHeight: x,
+              minWidth: R ?? n.reference.width,
+              maxWidth: v ?? s,
+              maxHeight: F ?? j
             });
           });
         }
       })
     ]
-  }), { getReferenceProps: w, getFloatingProps: C, getItemProps: f } = A([
-    D(e),
-    H(e, { role: "menu" }),
-    U(e, { event: "mousedown" }),
-    q(e, {
-      listRef: m,
+  }), { getReferenceProps: I, getFloatingProps: N, getItemProps: d } = q([
+    G(e),
+    J(e, { role: "menu" }),
+    K(e, { event: "mousedown" }),
+    Q(e, {
+      listRef: u,
       loop: !0,
       activeIndex: i,
-      onNavigate: F
+      onNavigate: M
     })
-  ]), S = j(
-    () => ({ active: i, setOpen: c, getItemProps: f }),
-    [i, f]
+  ]), S = W(
+    () => ({ active: i, setOpen: c, getItemProps: d, onSelect: l }),
+    [i, d, l]
   );
-  return B(() => {
+  return _(() => {
     var s;
     const n = (s = o.domReference.current) == null ? void 0 : s.closest("[data-floating-root]");
-    n && (u.current = n);
-  }, [o]), /* @__PURE__ */ E(I, { children: [
-    N.cloneElement(a, {
+    n && (f.current = n);
+  }, [o]), /* @__PURE__ */ B(L, { children: [
+    O.cloneElement(a, {
       ref: o.setReference,
-      "data-menu": "trigger",
-      ...w(a.props)
+      ...I(a.props),
+      "data-menu-trigger": !0
     }),
-    /* @__PURE__ */ t(T.Provider, { value: S, children: l && /* @__PURE__ */ t(G, { root: u, children: /* @__PURE__ */ t(J, { context: e, modal: !1, initialFocus: -1, children: /* @__PURE__ */ t(
+    /* @__PURE__ */ t(Z.Provider, { value: S, children: m && /* @__PURE__ */ t(T, { root: f, children: /* @__PURE__ */ t(V, { context: e, modal: !1, initialFocus: -1, children: /* @__PURE__ */ t(
       "div",
       {
-        ...x,
+        ...z,
+        ...N(),
         ref: o.setFloating,
-        "data-menu": "content",
-        className: Q(V.menu, R),
-        style: { ...P, ...y, minWidth: g, maxWidth: h },
-        ...C(),
-        children: /* @__PURE__ */ t(K, { elementsRef: m, children: v })
+        "data-menu": !0,
+        className: Y(ee.menu, P),
+        style: { ...E, ...w, ...$({ size: g }) },
+        children: /* @__PURE__ */ t(X, { elementsRef: u, children: y })
       }
     ) }) }) })
   ] });
 };
 export {
-  ne as Menu
+  me as Menu
 };

package/dist/components/Menu/MenuContext.d.ts

@@ -4,5 +4,6 @@ export type MenuContextProps = {
     active: number | null;
     setOpen: (value: boolean) => void;
     getItemProps: UseInteractionsReturn['getItemProps'];
+    onSelect?: (index: number) => void;
 };
 export declare const MenuContext: React.Context<MenuContextProps>;

package/dist/components/Menu/MenuItem.d.ts

@@ -1,7 +1,6 @@
-export type MenuItemProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
-    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type MenuItemProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'title'> & {
     scheme?: 'default' | 'negative' | 'positive' | 'warning';
     icon?: React.ReactElement;
     title?: React.ReactNode;
 };
-export declare const MenuItem: ({ size, scheme, icon, title, children, className, style, onClick, ...props }: MenuItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MenuItem: ({ scheme, icon, title, children, className, onClick, ...props }: MenuItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Menu/MenuItem.js

@@ -1,50 +1,44 @@
-import { jsx as i, jsxs as h, Fragment as j } from "react/jsx-runtime";
-import { useContext as M, useCallback as N } from "react";
-import { useListItem as P } from "@floating-ui/react";
-import v from "classnames";
+import { jsx as I, jsxs as g, Fragment as h } from "react/jsx-runtime";
+import { useContext as j, useCallback as y } from "react";
+import { useListItem as M } from "@floating-ui/react";
+import N from "classnames";
 import { MenuContext as w } from "./MenuContext.js";
-import { cssProps as A } from "../../utils/helpers.js";
-import { s as n } from "../../styles.module-CUhWny5T.js";
-function a(t) {
-  return typeof t == "string" ? /* @__PURE__ */ i("span", { children: t }) : t;
-}
-const D = ({
-  size: t,
+import { wrapNode as n } from "../../utils/helpers.js";
+import { s as i } from "../../styles.module-D1F3R7Vi.js";
+const B = ({
   scheme: p = "default",
-  icon: c,
+  icon: u,
   title: r,
   children: s,
   className: f,
-  style: u,
-  onClick: e,
+  onClick: t,
   ...d
 }) => {
-  const { active: x, setOpen: o, getItemProps: l } = M(w), { ref: b, index: y } = P(), m = y === x, I = N(
-    (g) => {
-      o(!1), e == null || e(g);
+  const { active: c, setOpen: o, getItemProps: x, onSelect: e } = j(w), { ref: b, index: m } = M(), a = m === c, l = y(
+    (v) => {
+      o(!1), e == null || e(m), t == null || t(v);
     },
-    [o, e]
+    [m, o, e, t]
   );
-  return /* @__PURE__ */ i(
+  return /* @__PURE__ */ I(
     "button",
     {
       ...d,
       ref: b,
       type: "button",
       role: "menuitem",
-      "data-menu": "item",
-      "data-active": m,
-      tabIndex: m ? 0 : -1,
-      className: v(n.menuitem, n[p], f),
-      style: { ...u, ...A({ size: t }) },
-      ...l({ onClick: I }),
-      children: s ? a(s) : /* @__PURE__ */ h(j, { children: [
-        c,
-        r && a(r)
+      "data-menu-item": !0,
+      "data-active": a,
+      tabIndex: a ? 0 : -1,
+      className: N(i.menuitem, i[p], f),
+      ...x({ onClick: l }),
+      children: s ? n(s, "span") : /* @__PURE__ */ g(h, { children: [
+        u,
+        r !== void 0 && n(r, "span")
       ] })
     }
   );
 };
 export {
-  D as MenuItem
+  B as MenuItem
 };