@kolking/react-ui 1.0.0 → 1.2.0

package/dist/components/Menu/Menu.js

@@ -1,77 +1,78 @@
-import { jsxs as j, Fragment as z, jsx as t } from "react/jsx-runtime";
-import I, { useState as i, useRef as d, useMemo as N, useEffect as b } from "react";
-import { a as B, o as D, f as L, s as O, b as W, r as _, c as k, d as A, e as H, g as U, h as q, F as G, i as J, j as K } from "../../floating-ui.react-KLg1MUz0.js";
-import { c as Q } from "../../index-DyIdU--j.js";
+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 se = ({
+const ne = ({
   placement: p = "bottom-start",
-  trigger: r,
+  trigger: a,
   minWidth: g,
   maxWidth: h,
-  className: x,
-  children: F,
-  ...R
+  className: R,
+  children: v,
+  ...x
 }) => {
-  const [l, c] = i(!1), [a, v] = i(null), [y, M] = i({}), m = d([]), u = d(null), { refs: s, context: e, floatingStyles: P } = B({
+  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,
     onOpenChange: c,
-    whileElementsMounted: W,
+    whileElementsMounted: k,
     middleware: [
-      D(5),
-      L({ padding: 10 }),
-      O({
+      W(5),
+      _({ padding: 10 }),
+      b({
         padding: 10,
-        apply({ rects: o, availableWidth: n, availableHeight: S }) {
-          _.flushSync(() => {
+        apply({ rects: n, availableWidth: s, availableHeight: z }) {
+          L(() => {
             M({
-              minWidth: o.reference.width,
-              maxWidth: n,
-              maxHeight: S
+              minWidth: n.reference.width,
+              maxWidth: s,
+              maxHeight: z
             });
           });
         }
       })
     ]
-  }), { getReferenceProps: w, getFloatingProps: C, getItemProps: f } = k([
-    A(e),
+  }), { getReferenceProps: w, getFloatingProps: C, getItemProps: f } = A([
+    D(e),
     H(e, { role: "menu" }),
     U(e, { event: "mousedown" }),
     q(e, {
       listRef: m,
       loop: !0,
-      activeIndex: a,
-      onNavigate: v
+      activeIndex: i,
+      onNavigate: F
     })
-  ]), E = N(
-    () => ({ active: a, setOpen: c, getItemProps: f }),
-    [a, f]
+  ]), S = j(
+    () => ({ active: i, setOpen: c, getItemProps: f }),
+    [i, f]
   );
-  return b(() => {
-    var n;
-    const o = (n = s.domReference.current) == null ? void 0 : n.closest("[data-floating-root]");
-    o && (u.current = o);
-  }, [s]), /* @__PURE__ */ j(z, { children: [
-    I.cloneElement(r, {
-      ref: s.setReference,
+  return B(() => {
+    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, {
+      ref: o.setReference,
       "data-menu": "trigger",
-      ...w(r.props)
+      ...w(a.props)
     }),
-    /* @__PURE__ */ t(T.Provider, { value: E, children: l && /* @__PURE__ */ t(G, { root: u, children: /* @__PURE__ */ t(J, { context: e, modal: !1, initialFocus: -1, children: /* @__PURE__ */ t(
+    /* @__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(
       "div",
       {
-        ...R,
-        ref: s.setFloating,
+        ...x,
+        ref: o.setFloating,
         "data-menu": "content",
-        className: Q(V.menu, x),
+        className: Q(V.menu, R),
         style: { ...P, ...y, minWidth: g, maxWidth: h },
         ...C(),
-        children: /* @__PURE__ */ t(K, { elementsRef: m, children: F })
+        children: /* @__PURE__ */ t(K, { elementsRef: m, children: v })
       }
     ) }) }) })
   ] });
 };
 export {
-  se as Menu
+  ne as Menu
 };

package/dist/components/Menu/MenuItem.js

@@ -1,7 +1,7 @@
 import { jsx as i, jsxs as h, Fragment as j } from "react/jsx-runtime";
 import { useContext as M, useCallback as N } from "react";
-import { u as P } from "../../floating-ui.react-KLg1MUz0.js";
-import { c as v } from "../../index-DyIdU--j.js";
+import { useListItem as P } from "@floating-ui/react";
+import v 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";
@@ -12,10 +12,10 @@ const D = ({
   size: t,
   scheme: p = "default",
   icon: c,
-  title: s,
-  children: r,
-  className: u,
-  style: f,
+  title: r,
+  children: s,
+  className: f,
+  style: u,
   onClick: e,
   ...d
 }) => {
@@ -35,12 +35,12 @@ const D = ({
       "data-menu": "item",
       "data-active": m,
       tabIndex: m ? 0 : -1,
-      className: v(n.menuitem, n[p], u),
-      style: { ...f, ...A({ size: t }) },
+      className: v(n.menuitem, n[p], f),
+      style: { ...u, ...A({ size: t }) },
       ...l({ onClick: I }),
-      children: r ? a(r) : /* @__PURE__ */ h(j, { children: [
+      children: s ? a(s) : /* @__PURE__ */ h(j, { children: [
         c,
-        s && a(s)
+        r && a(r)
       ] })
     }
   );

package/dist/components/Notice/Notice.js

@@ -1,5 +1,5 @@
 import { jsxs as i, jsx as e } from "react/jsx-runtime";
-import { c as v } from "../../index-DyIdU--j.js";
+import v from "classnames";
 import { cssProps as p, getErrorMessage as y } from "../../utils/helpers.js";
 import { Icon as w } from "../Icon/Icon.js";
 const h = "Notice_info_tgW7c", z = "Notice_error_ClIfR", j = "Notice_success_-vXfu", x = "Notice_warning_zFUFN", C = "Notice_neutral_Vryzr", F = "Notice_container_d9QoU", I = "Notice_content_cvC5c", k = "Notice_message_hI1yz", M = "Notice_accessory_AjvqC", Q = "Notice_vertical_DsMZQ", U = "Notice_plain_l9FV5", c = {

package/dist/components/Progress/ProgressBar.js

@@ -1,6 +1,6 @@
 import { jsx as a } from "react/jsx-runtime";
 import f from "react";
-import { c as _ } from "../../index-DyIdU--j.js";
+import _ from "classnames";
 import { cssProps as u, clamp as v } from "../../utils/helpers.js";
 const P = "Progress_progress_LSrhF", w = "Progress_bar_ywPS-", e = {
   progress: P,
@@ -14,8 +14,8 @@ const P = "Progress_progress_LSrhF", w = "Progress_bar_ywPS-", e = {
     trackColor: p,
     minWidth: n,
     maxWidth: m,
-    margin: c,
-    style: l,
+    margin: l,
+    style: c,
     className: g,
     ...d
   }, b) => {
@@ -34,8 +34,8 @@ const P = "Progress_progress_LSrhF", w = "Progress_bar_ywPS-", e = {
         "data-progress-value": r ?? "indeterminate",
         className: _(e.progress, g),
         style: {
-          ...l,
-          ...u({ width: o, height: t, color: i, trackColor: p, minWidth: n, maxWidth: m, margin: c })
+          ...c,
+          ...u({ width: o, height: t, color: i, trackColor: p, minWidth: n, maxWidth: m, margin: l })
         },
         children: /* @__PURE__ */ a("span", { className: e.bar, style: { width: `${r}%` } })
       }

package/dist/components/Progress/ProgressCircular.js

@@ -1,6 +1,6 @@
 import { jsxs as c, jsx as n } from "react/jsx-runtime";
 import j from "react";
-import { c as N } from "../../index-DyIdU--j.js";
+import N from "classnames";
 import { cssProps as k, clamp as w } from "../../utils/helpers.js";
 const b = "Progress_inner_Zoiac", h = "Progress_container_tFVew", x = "Progress_range_uqjFb", y = "Progress_progress_MHEjj", C = "Progress_track_jWvrX", a = {
   inner: b,

package/dist/components/Segmented/Segmented.js

@@ -1,40 +1,40 @@
-import { jsx as s } from "react/jsx-runtime";
-import { c as p } from "../../index-DyIdU--j.js";
+import { jsx as o } from "react/jsx-runtime";
+import p from "classnames";
 import { cssProps as i } from "../../utils/helpers.js";
 const h = "Segmented_segmented_UOs8Z", S = {
   segmented: h
 }, u = ({
-  size: o,
+  size: s,
   items: n,
   selected: t,
   disabled: m,
   margin: r,
   className: g,
   style: c,
-  onSelect: a,
-  ...d
-}) => /* @__PURE__ */ s(
+  onSelect: d,
+  ...a
+}) => /* @__PURE__ */ o(
   "div",
   {
-    ...d,
+    ...a,
     "data-segmented": t,
     className: p(S.segmented, g),
     style: {
       ...c,
       ...i({
-        size: o,
+        size: s,
         margin: r,
         length: n.length.toString(),
         selected: t.toString()
       })
     },
-    children: n.map((l, e) => /* @__PURE__ */ s(
+    children: n.map((l, e) => /* @__PURE__ */ o(
       "button",
       {
         type: "button",
         disabled: m,
         "data-selected": e === t,
-        onClick: () => e !== t && a(e),
+        onClick: () => e !== t && d(e),
         children: l
       },
       e

package/dist/components/Spinner/Spinner.js

@@ -1,6 +1,6 @@
 import { jsx as r, jsxs as p } from "react/jsx-runtime";
 import m from "react";
-import { c as d } from "../../index-DyIdU--j.js";
+import d from "classnames";
 import { cssProps as _ } from "../../utils/helpers.js";
 const f = "Spinner_container_CGGmW", g = "Spinner_spinner_vU3LR", S = "Spinner_track_y1d33", k = "Spinner_range_BVoTJ", n = {
   container: f,
@@ -8,17 +8,17 @@ const f = "Spinner_container_CGGmW", g = "Spinner_spinner_vU3LR", S = "Spinner_t
   track: S,
   range: k
 }, N = m.forwardRef(
-  ({ size: e, color: a, overlay: s, overlayColor: i, className: t, style: c, ...o }, l) => /* @__PURE__ */ r(
+  ({ size: e, color: a, overlay: s, overlayColor: i, className: t, style: o, ...c }, l) => /* @__PURE__ */ r(
     "span",
     {
-      ...o,
+      ...c,
       ref: l,
       role: "status",
       "aria-label": "loading",
       "data-spinner": !0,
       "data-overlay": s,
       className: d(n.container, t),
-      style: { ...c, ..._({ size: e, color: a, overlayColor: i }) },
+      style: { ...o, ..._({ size: e, color: a, overlayColor: i }) },
       children: /* @__PURE__ */ p("svg", { "aria-hidden": !0, viewBox: "0 0 100 100", className: n.spinner, children: [
         /* @__PURE__ */ r("circle", { fill: "none", className: n.track }),
         /* @__PURE__ */ r("circle", { fill: "none", className: n.range })

package/dist/components/Tooltip/Tooltip.js

@@ -1,73 +1,73 @@
-import { jsxs as d, Fragment as E, jsx as r } from "react/jsx-runtime";
-import M, { useRef as m, useState as g, useEffect as P } from "react";
-import { c as S } from "../../index-DyIdU--j.js";
-import { a as b, c as j, d as C, e as U, k as W, l as q, g as A, m as B, F as D, n as H, o as I, f as V, p as $, q as z, b as G } from "../../floating-ui.react-KLg1MUz0.js";
-const J = "Tooltip_tooltip_u1Uix", K = "Tooltip_arrow_NBFiV", L = "Tooltip_content_lfpfM", i = {
+import { jsxs as d, Fragment as M, jsx as i } from "react/jsx-runtime";
+import P, { useRef as m, useState as w, useEffect as S } from "react";
+import j from "classnames";
+import { useFloating as k, offset as C, flip as U, shift as W, arrow as b, autoUpdate as A, useInteractions as B, useDismiss as D, useRole as H, useHover as I, useFocus as V, useClick as $, useMergeRefs as q, FloatingPortal as z, FloatingArrow as G } from "@floating-ui/react";
+const J = "Tooltip_tooltip_u1Uix", K = "Tooltip_arrow_NBFiV", L = "Tooltip_content_lfpfM", a = {
   tooltip: J,
   arrow: K,
   content: L
 }, ee = ({
-  trigger: a = "hover focus",
-  placement: c = "top",
-  content: h,
+  trigger: r = "hover focus",
+  placement: f = "top",
+  content: g,
   disabled: l,
-  minWidth: w,
+  minWidth: h,
   maxWidth: R,
   className: F,
   children: t,
   ..._
 }) => {
-  const f = m(null), u = m(null), [p, v] = g(!1), [x, O] = g(!1), { refs: n, context: e, floatingStyles: N } = b({
+  const c = m(null), u = m(null), [p, v] = w(!1), [x, O] = w(!1), { refs: n, context: e, floatingStyles: N } = k({
     open: p,
-    placement: c,
+    placement: f,
     onOpenChange: v,
-    whileElementsMounted: G,
+    whileElementsMounted: A,
     middleware: [
-      I(8),
-      V(),
-      $(),
-      z(({ placement: o, rects: s }) => (O(
+      C(8),
+      U(),
+      W(),
+      b(({ placement: o, rects: s }) => (O(
         s.floating.width < s.reference.width && (o.endsWith("-start") || o.endsWith("-end"))
-      ), { element: f, padding: 8 }))
+      ), { element: c, padding: 8 }))
     ]
-  }), { getReferenceProps: T, getFloatingProps: k } = j([
-    C(e),
-    U(e, { role: "tooltip" }),
-    W(e, { move: !1, enabled: a.includes("hover") }),
-    q(e, { enabled: a.includes("focus") }),
-    A(e, { enabled: a.includes("click") })
-  ]), y = B([
+  }), { getReferenceProps: T, getFloatingProps: y } = B([
+    D(e),
+    H(e, { role: "tooltip" }),
+    I(e, { move: !1, enabled: r.includes("hover") }),
+    V(e, { enabled: r.includes("focus") }),
+    $(e, { enabled: r.includes("click") })
+  ]), E = q([
     n.setReference,
     "ref" in t ? t.ref : null
   ]);
-  return P(() => {
+  return S(() => {
     var s;
     const o = (s = n.domReference.current) == null ? void 0 : s.closest("[data-floating-root]");
     !l && o && (u.current = o);
-  }, [n, l]), l ? t : /* @__PURE__ */ d(E, { children: [
-    M.cloneElement(t, T({ ref: y, ...t.props })),
-    p && /* @__PURE__ */ r(D, { root: u, children: /* @__PURE__ */ d(
+  }, [n, l]), l ? t : /* @__PURE__ */ d(M, { children: [
+    P.cloneElement(t, T({ ref: E, ...t.props })),
+    p && /* @__PURE__ */ i(z, { root: u, children: /* @__PURE__ */ d(
       "div",
       {
         ..._,
         ref: n.setFloating,
-        "data-tooltip": c,
-        className: S(i.tooltip, F),
-        style: { ...N, minWidth: w, maxWidth: R },
-        ...k(),
+        "data-tooltip": f,
+        className: j(a.tooltip, F),
+        style: { ...N, minWidth: h, maxWidth: R },
+        ...y(),
         children: [
-          /* @__PURE__ */ r(
-            H,
+          /* @__PURE__ */ i(
+            G,
             {
               width: 12,
               height: 6,
-              ref: f,
+              ref: c,
               context: e,
-              className: i.arrow,
+              className: a.arrow,
               staticOffset: x ? 8 : null
             }
           ),
-          /* @__PURE__ */ r("div", { className: i.content, children: h })
+          /* @__PURE__ */ i("div", { className: a.content, children: g })
         ]
       }
     ) })

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+export * from './components/Badge';
 export * from './components/Button';
 export * from './components/Dialog';
 export * from './components/Flex';

package/dist/index.js

@@ -1,54 +1,56 @@
-import { Button as e } from "./components/Button/Button.js";
-import { Dialog as p, DialogClose as x, DialogContent as m, DialogFooter as i, DialogTitle as f } from "./components/Dialog/Dialog.js";
-import { useDialog as l } from "./components/Dialog/useDialog.js";
-import { withDialog as g } from "./components/Dialog/withDialog.js";
-import { Flex as D } from "./components/Flex/Flex.js";
-import { Checkbox as u } from "./components/Fields/Checkbox.js";
-import { Field as F, FieldDescription as C, FieldLabel as I } from "./components/Fields/Field.js";
-import { I as S } from "./Input-Lz3ft8Tp.js";
-import { Quantity as h } from "./components/Fields/Quantity.js";
-import { Radio as M } from "./components/Fields/Radio.js";
-import { Select as V } from "./components/Fields/Select.js";
-import { Textarea as w } from "./components/Fields/Textarea.js";
-import { V as H } from "./ValidationTooltip-BgSwl0hJ.js";
-import { Heading as N } from "./components/Heading/Heading.js";
-import { Icon as R } from "./components/Icon/Icon.js";
-import { Menu as q } from "./components/Menu/Menu.js";
-import { MenuItem as z } from "./components/Menu/MenuItem.js";
-import { Notice as E } from "./components/Notice/Notice.js";
-import { ProgressBar as J } from "./components/Progress/ProgressBar.js";
-import { ProgressCircular as O } from "./components/Progress/ProgressCircular.js";
-import { Segmented as W } from "./components/Segmented/Segmented.js";
-import { Spinner as Y } from "./components/Spinner/Spinner.js";
-import { Tooltip as _ } from "./components/Tooltip/Tooltip.js";
+import { Badge as e } from "./components/Badge/Badge.js";
+import { Button as p } from "./components/Button/Button.js";
+import { Dialog as m, DialogClose as f, DialogContent as i, DialogFooter as a, DialogTitle as l } from "./components/Dialog/Dialog.js";
+import { useDialog as g } from "./components/Dialog/useDialog.js";
+import { withDialog as d } from "./components/Dialog/withDialog.js";
+import { Flex as u } from "./components/Flex/Flex.js";
+import { Checkbox as F } from "./components/Fields/Checkbox.js";
+import { Field as I, FieldDescription as T, FieldLabel as B } from "./components/Fields/Field.js";
+import { I as b } from "./Input-DE1QkW7S.js";
+import { Quantity as M } from "./components/Fields/Quantity.js";
+import { Radio as V } from "./components/Fields/Radio.js";
+import { Select as w } from "./components/Fields/Select.js";
+import { Textarea as H } from "./components/Fields/Textarea.js";
+import { V as N } from "./ValidationTooltip-BgSwl0hJ.js";
+import { Heading as R } from "./components/Heading/Heading.js";
+import { Icon as q } from "./components/Icon/Icon.js";
+import { Menu as z } from "./components/Menu/Menu.js";
+import { MenuItem as E } from "./components/Menu/MenuItem.js";
+import { Notice as J } from "./components/Notice/Notice.js";
+import { ProgressBar as O } from "./components/Progress/ProgressBar.js";
+import { ProgressCircular as W } from "./components/Progress/ProgressCircular.js";
+import { Segmented as Y } from "./components/Segmented/Segmented.js";
+import { Spinner as _ } from "./components/Spinner/Spinner.js";
+import { Tooltip as oo } from "./components/Tooltip/Tooltip.js";
 export {
-  e as Button,
-  u as Checkbox,
-  p as Dialog,
-  x as DialogClose,
-  m as DialogContent,
-  i as DialogFooter,
-  f as DialogTitle,
-  F as Field,
-  C as FieldDescription,
-  I as FieldLabel,
-  D as Flex,
-  N as Heading,
-  R as Icon,
-  S as Input,
-  q as Menu,
-  z as MenuItem,
-  E as Notice,
-  J as ProgressBar,
-  O as ProgressCircular,
-  h as Quantity,
-  M as Radio,
-  W as Segmented,
-  V as Select,
-  Y as Spinner,
-  w as Textarea,
-  _ as Tooltip,
-  H as ValidationTooltip,
-  l as useDialog,
-  g as withDialog
+  e as Badge,
+  p as Button,
+  F as Checkbox,
+  m as Dialog,
+  f as DialogClose,
+  i as DialogContent,
+  a as DialogFooter,
+  l as DialogTitle,
+  I as Field,
+  T as FieldDescription,
+  B as FieldLabel,
+  u as Flex,
+  R as Heading,
+  q as Icon,
+  b as Input,
+  z as Menu,
+  E as MenuItem,
+  J as Notice,
+  O as ProgressBar,
+  W as ProgressCircular,
+  M as Quantity,
+  V as Radio,
+  Y as Segmented,
+  w as Select,
+  _ as Spinner,
+  H as Textarea,
+  oo as Tooltip,
+  N as ValidationTooltip,
+  g as useDialog,
+  d as withDialog
 };