@kolking/react-ui 1.6.0 → 1.7.0

package/dist/components/Tag/Tag.js

@@ -1,10 +1,12 @@
-import { jsx as f, jsxs as i, Fragment as T } from "react/jsx-runtime";
+import { jsx as n, jsxs as f, Fragment as T } from "react/jsx-runtime";
 import c from "classnames";
 import { wrapNode as t, cssProps as p } from "../../utils/helpers.js";
 const y = "Tag_tag_-ovOm", _ = {
   tag: y,
   "default-gray": "Tag_default-gray_Ju2wo",
   "solid-gray": "Tag_solid-gray_q6GO4",
+  "default-brown": "Tag_default-brown_csCrz",
+  "solid-brown": "Tag_solid-brown_5IxVx",
   "default-red": "Tag_default-red_5NeXY",
   "solid-red": "Tag_solid-red_uPhj-",
   "default-orange": "Tag_default-orange_fuy0F",
@@ -23,8 +25,6 @@ const y = "Tag_tag_-ovOm", _ = {
   "solid-indigo": "Tag_solid-indigo_2gfJj",
   "default-purple": "Tag_default-purple_oBbek",
   "solid-purple": "Tag_solid-purple_e10WH",
-  "default-brown": "Tag_default-brown_csCrz",
-  "solid-brown": "Tag_solid-brown_5IxVx",
   "default-accent": "Tag_default-accent_uUXnO",
   "solid-accent": "Tag_solid-accent_bbTSM"
 }, j = ({
@@ -33,23 +33,23 @@ const y = "Tag_tag_-ovOm", _ = {
   scheme: l = "gray",
   title: e,
   icon: d,
-  iconPosition: g = "start",
+  iconPosition: o = "start",
   className: r,
   style: u,
-  children: o,
-  ...n
-}) => /* @__PURE__ */ f(
+  children: g,
+  ...i
+}) => /* @__PURE__ */ n(
   "span",
   {
-    ...n,
+    ...i,
     "data-tag": a,
     "data-scheme": l,
     className: c(_.tag, _[`${a}-${l}`], r),
     style: { ...u, ...p({ size: s }) },
-    children: o ? t(o, "span") : /* @__PURE__ */ i(T, { children: [
-      g === "start" && d,
-      e && t(e, "span"),
-      g === "end" && d
+    children: g ? t(g, "span") : /* @__PURE__ */ f(T, { children: [
+      o === "start" && d,
+      e !== void 0 && t(e, "span"),
+      o === "end" && d
     ] })
   }
 );

package/dist/components/ToggleButton/ToggleButton.d.ts

@@ -1,5 +1,19 @@
+import { default as React } from 'react';
 import { ButtonProps } from '../Button';
 export type ToggleButtonProps = Omit<ButtonProps, 'variant'> & {
     selected?: boolean;
 };
-export declare const ToggleButton: ({ selected, role, ...props }: ToggleButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ToggleButton: React.ForwardRefExoticComponent<Omit<ButtonProps, "variant"> & {
+    selected?: boolean;
+} & React.RefAttributes<(<T extends React.ElementType = "button">(props: {
+    as?: T | undefined;
+    size?: "xs" | "sm" | "md" | "lg" | "xl";
+    variant?: "primary" | "secondary" | "tertiary";
+    scheme?: "default" | "negative" | "positive" | "warning";
+    minWidth?: React.CSSProperties["minWidth"];
+    maxWidth?: React.CSSProperties["maxWidth"];
+    busy?: boolean;
+    title?: React.ReactNode;
+    icon?: React.ReactElement;
+    iconPosition?: "start" | "end";
+} & Omit<React.PropsWithoutRef<React.ComponentProps<T>>, "title" | "size" | "as" | "icon" | "scheme" | "minWidth" | "maxWidth" | "variant" | "busy" | "iconPosition"> & React.RefAttributes<unknown>) => React.ReactElement | null)>>;

package/dist/components/ToggleButton/ToggleButton.js

@@ -1,16 +1,21 @@
 import { jsx as i } from "react/jsx-runtime";
-import { Button as t } from "../Button/Button.js";
-const n = ({ selected: a = !1, role: o, ...r }) => /* @__PURE__ */ i(
-  t,
-  {
-    ...r,
-    role: o,
-    "aria-checked": o === "radio" ? a : void 0,
-    "aria-pressed": o !== "radio" ? a : void 0,
-    "data-selected": a,
-    variant: a ? "primary" : "secondary"
-  }
+import d from "react";
+import { Button as f } from "../Button/Button.js";
+const e = d.forwardRef(
+  ({ selected: a = !1, role: o, ...r }, t) => /* @__PURE__ */ i(
+    f,
+    {
+      ...r,
+      ref: t,
+      role: o,
+      "data-toggle-button": !0,
+      "data-selected": a,
+      variant: a ? "primary" : "secondary",
+      "aria-checked": o === "radio" ? a : void 0,
+      "aria-pressed": o !== "radio" ? a : void 0
+    }
+  )
 );
 export {
-  n as ToggleButton
+  e as ToggleButton
 };

package/dist/components/ToggleButton/ToggleGroup.js

@@ -1,43 +1,46 @@
-import { jsx as _ } from "react/jsx-runtime";
-import e from "react";
-import x from "classnames";
-import { cssProps as h } from "../../utils/helpers.js";
-const k = "ToggleButton_group_yo9Nc", t = {
-  group: k
-}, T = ({
+import { jsx as e } from "react/jsx-runtime";
+import t from "react";
+import { Composite as _, CompositeItem as x } from "@floating-ui/react";
+import h from "classnames";
+import { cssProps as k } from "../../utils/helpers.js";
+const B = "ToggleButton_group_yo9Nc", l = {
+  group: B
+}, E = ({
   variant: o = "inline",
-  selected: l,
-  disabled: s,
-  equalWidth: c,
-  minWidth: p,
-  maxWidth: i,
+  selected: s,
+  disabled: p,
+  equalWidth: i,
+  minWidth: m,
+  maxWidth: c,
   className: n,
   style: g,
-  children: m,
-  onSelect: u,
-  ...d
+  children: u,
+  onSelect: d,
+  ...a
 }) => {
-  const a = o === "block" ? "flex" : void 0, f = c ? "0" : void 0;
-  return /* @__PURE__ */ _(
-    "div",
+  const f = o === "block" ? "flex" : void 0, y = i ? "0" : void 0;
+  return /* @__PURE__ */ e(
+    _,
     {
-      ...d,
+      ...a,
       role: "radiogroup",
       "data-toggle-group": !0,
-      className: x(t.group, t[o], n),
-      style: { ...g, ...h({ display: a, flexBasis: f, minWidth: p, maxWidth: i }) },
-      children: e.Children.map(
-        m,
-        (y, r) => e.cloneElement(y, {
-          role: "radio",
-          disabled: s,
-          selected: r === l,
-          onClick: () => u(r)
-        })
-      )
+      className: h(l.group, l[o], n),
+      style: { ...g, ...k({ display: f, flexBasis: y, minWidth: m, maxWidth: c }) },
+      children: t.Children.map(u, (C, r) => /* @__PURE__ */ e(
+        x,
+        {
+          render: t.cloneElement(C, {
+            role: "radio",
+            disabled: p,
+            selected: r === s,
+            onClick: () => d(r)
+          })
+        }
+      ))
     }
   );
 };
 export {
-  T as ToggleGroup
+  E as ToggleGroup
 };

package/dist/components/Tooltip/Tooltip.js

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

package/dist/styles/_theme-default.scss

@@ -5,10 +5,11 @@ $font-family: (
 );
 
 $font-weight: (
-  normal: 400,
-  medium: 600,
-  bold:   700,
-  black:  800,
+  normal:  400,
+  medium:  600,
+  bold:    700,
+  black:   800,
+  heading: 700,
 );
 
 $font-size: (
@@ -66,11 +67,11 @@ $ease-out-bounce: cubic-bezier(0.1, 1.3, 0.7, 1.1);
 $light-colors: (
   black:      #000000,
   white:      #FFFFFF,
-  fg:         #191919,
+  fg:         #101010,
   bg:         #FFFFFF,
+  input:      #FFFFFF,
   popup:      #FFFFFF,
   dialog:     #FFFFFF,
-  input:      #FFFFFF,
   backdrop:   rgb(0 0 0 / 50%),
   focus:      var(--color-accent-400),
   link:       var(--color-blue-500),
@@ -79,28 +80,28 @@ $light-colors: (
 );
 
 $dark-colors: (
-  fg:         #E6E6E6,
-  bg:         #161616,
-  popup:      #262626,
+  fg:         #F0F0F0,
+  bg:         #131313,
+  input:      #0C0C0C,
+  popup:      #202020,
   dialog:     #191919,
-  input:      #101010,
-  backdrop:   rgb(0 0 0 / 65%),
+  backdrop:   rgb(0 0 0 / 70%),
 );
 
 $light-palette: (
   colors: (
-    gray:   #8E8E99,
-    red:    #FF3B30,
-    orange: #FF9500,
-    yellow: #FFCC00,
-    green:  #34C759,
-    teal:   #30B0C7,
-    cyan:   #32ADE6,
-    blue:   #007AFF,
-    indigo: #5856D6,
-    purple: #AF52DE,
-    brown:  #A2845E,
-    accent: #007AFF,
+    gray:   #8D8D96,
+    brown:  #A08060,
+    red:    #F03020,
+    orange: #FF8000,
+    yellow: #FFBB00,
+    green:  #20B610,
+    teal:   #30B0C0,
+    cyan:   #30B0F0,
+    blue:   #0070F7,
+    indigo: #6056ED,
+    purple: #A949D9,
+    accent: #0070F7,
   ),
   tints: (
     50:  95%,
@@ -117,18 +118,18 @@ $light-palette: (
 
 $dark-palette: (
   colors: (
-    gray:   #737380,
-    red:    #FF453A,
-    orange: #FF9E0B,
-    yellow: #FED709,
-    green:  #31D158,
-    teal:   #40C8E0,
-    cyan:   #64D3FF,
-    blue:   #0B84FF,
-    indigo: #5E5CE6,
-    purple: #BF5AF2,
-    brown:  #AC8E68,
-    accent: #0B84FF,
+    gray:   #656573,
+    brown:  #A08060,
+    red:    #F03020,
+    orange: #FF8000,
+    yellow: #FFBB00,
+    green:  #20B610,
+    teal:   #30B0C0,
+    cyan:   #30B0F0,
+    blue:   #0080FF,
+    indigo: #7369FF,
+    purple: #B353E3,
+    accent: #0080FF,
   ),
   tints: (
     50:  95%,