@kolking/react-ui 1.8.13 → 1.8.15

package/dist/components/Icon/icons.d.ts

@@ -1,2 +1,2 @@
-declare const icons: readonly ["arrow-down-circle", "arrow-down-outline", "arrow-down", "arrow-left-circle", "arrow-left-outline", "arrow-left", "arrow-right-circle", "arrow-right-outline", "arrow-right", "arrow-up-circle", "arrow-up-outline", "arrow-up", "bell", "bubble-outline", "bubble", "bubbles-outline", "bubbles", "bug", "calendar-date", "calendar", "camera", "cart-outline", "cart", "cat", "checkmark-circle", "checkmark-outline", "checkmark", "chevron-left", "chevron-right", "clock-circle", "clock-outline", "close", "cloud-outline", "cloud", "collapse", "cross-circle", "cross-outline", "cross", "delete-outline", "delete", "denied", "disclosure", "dropdown", "envelope-outline", "envelope", "error-circle", "error-outline", "expand", "export", "eye-off", "eye", "eyeglasses", "frame", "gear", "heart-outline", "heart", "help-circle", "help-outline", "import", "info-circle", "info-outline", "key", "location-cross", "location", "lock-open", "lock", "map-outline", "map", "menu", "minus-circle", "minus-outline", "minus", "page-outline", "page", "paper-plane", "paperclip", "pencil-circle", "pencil-outline", "pencil", "person", "phone-circle", "phone-outline", "phone", "photos", "playback-next", "playback-pause", "playback-play", "playback-prev", "playback-stop", "plus-circle", "plus-outline", "plus", "printer", "profile-outline", "profile", "redo-circle", "redo-outline", "refresh", "reorder", "search", "shield-checkmark", "shield-lock", "star-circle", "star-outline", "star", "triangle-down", "triangle-left", "triangle-right", "triangle-up", "undo-circle", "undo-outline", "warning-outline", "warning"];
+declare const icons: readonly ["arrow-down-circle", "arrow-down-outline", "arrow-down", "arrow-left-circle", "arrow-left-outline", "arrow-left", "arrow-right-circle", "arrow-right-outline", "arrow-right", "arrow-up-circle", "arrow-up-outline", "arrow-up", "bell", "bubble-outline", "bubble", "bubbles-outline", "bubbles", "bug", "calendar-checkmark", "calendar-date", "calendar-plus", "calendar", "camera", "cart-outline", "cart", "cat", "checkmark-circle", "checkmark-outline", "checkmark", "chevron-left", "chevron-right", "clock-circle", "clock-outline", "close", "cloud-outline", "cloud", "collapse", "copy", "cross-circle", "cross-outline", "cross", "delete-outline", "delete", "denied", "disclosure", "dropdown", "envelope-outline", "envelope", "error-circle", "error-outline", "expand", "export", "eye-off", "eye", "eyeglasses", "frame", "gear", "heart-outline", "heart", "help-circle", "help-outline", "import", "info-circle", "info-outline", "key", "location-cross", "location", "lock-open", "lock", "map-outline", "map", "menu", "minus-circle", "minus-outline", "minus", "page-outline", "page", "paper-plane", "paperclip", "pencil-circle", "pencil-outline", "pencil", "person", "phone-circle", "phone-outline", "phone", "photos", "playback-next", "playback-pause", "playback-play", "playback-prev", "playback-stop", "plus-circle", "plus-outline", "plus", "printer", "profile-outline", "profile", "redo-circle", "redo-outline", "refresh", "reorder", "search", "shield-checkmark", "shield-lock", "star-circle", "star-outline", "star", "triangle-down", "triangle-left", "triangle-right", "triangle-up", "undo-circle", "undo-outline", "warning-outline", "warning"];
 export default icons;

package/dist/components/Icon/icons.js

@@ -17,7 +17,9 @@ const e = [
   "bubbles-outline",
   "bubbles",
   "bug",
+  "calendar-checkmark",
   "calendar-date",
+  "calendar-plus",
   "calendar",
   "camera",
   "cart-outline",
@@ -34,6 +36,7 @@ const e = [
   "cloud-outline",
   "cloud",
   "collapse",
+  "copy",
   "cross-circle",
   "cross-outline",
   "cross",

package/dist/components/Segmented/Segmented.d.ts

@@ -6,4 +6,4 @@ export type SegmentedProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelec
     margin?: React.CSSProperties['margin'];
     onSelect: (index: number) => void;
 };
-export declare const Segmented: ({ size, items, selected, disabled, margin, className, style, onSelect, ...props }: SegmentedProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Segmented: ({ size, items, selected, disabled, margin, children, className, style, onSelect, ...props }: SegmentedProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Segmented/Segmented.js

@@ -1,49 +1,53 @@
-import { jsx as o } from "react/jsx-runtime";
-import i from "classnames";
-import { Composite as l, CompositeItem as f } from "@floating-ui/react";
-import { cssProps as u, wrapNode as h } from "../../utils/helpers.js";
-const y = "Segmented_segmented_UOs8Z", C = {
-  segmented: y
-}, _ = ({
-  size: r,
-  items: s,
+import { jsxs as l, jsx as s } from "react/jsx-runtime";
+import f from "classnames";
+import { Composite as u, CompositeItem as h } from "@floating-ui/react";
+import { cssProps as y, wrapNode as C } from "../../utils/helpers.js";
+const b = "Segmented_segmented_UOs8Z", j = {
+  segmented: b
+}, w = ({
+  size: m,
+  items: r,
   selected: t,
-  disabled: m,
+  disabled: o,
   margin: a,
-  className: n,
-  style: d,
-  onSelect: p,
-  ...c
-}) => /* @__PURE__ */ o(
-  l,
+  children: n,
+  className: d,
+  style: p,
+  onSelect: c,
+  ...g
+}) => /* @__PURE__ */ l(
+  u,
   {
-    ...c,
+    ...g,
     role: "radiogroup",
     "data-segmented": !0,
-    "data-disabled": m,
-    className: i(C.segmented, n),
-    style: { ...d, ...u({ size: r, margin: a }) },
-    children: s.map((g, e) => /* @__PURE__ */ o(
-      f,
-      {
-        render: /* @__PURE__ */ o(
-          "button",
-          {
-            role: "radio",
-            type: "button",
-            disabled: m,
-            "data-segmented-item": e,
-            "aria-checked": e === t,
-            "data-selected": e === t,
-            onClick: () => e !== t && p(e),
-            children: h(g, "span")
-          }
-        )
-      },
-      e
-    ))
+    "data-disabled": o,
+    className: f(j.segmented, d),
+    style: { ...p, ...y({ size: m, margin: a }) },
+    children: [
+      r.map((i, e) => /* @__PURE__ */ s(
+        h,
+        {
+          render: /* @__PURE__ */ s(
+            "button",
+            {
+              role: "radio",
+              type: "button",
+              disabled: o,
+              "data-segmented-item": e,
+              "aria-checked": e === t,
+              "data-selected": e === t,
+              onClick: () => e !== t && c(e),
+              children: C(i, "span")
+            }
+          )
+        },
+        e
+      )),
+      n
+    ]
   }
 );
 export {
-  _ as Segmented
+  w as Segmented
 };

package/dist/components/Tag/Tag.d.ts

@@ -1,11 +1,21 @@
 import { default as React } from 'react';
+import { PolymorphicProps } from '../../utils/helpers';
 import { PaletteColor } from '../../utils/colors';
-export type TagProps = Omit<React.HTMLAttributes<HTMLSpanElement>, 'title'> & {
+export type TagProps<T extends React.ElementType = 'span'> = PolymorphicProps<T, {
+    as?: T;
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-    variant?: 'default' | 'solid';
+    variant?: 'default' | 'solid' | 'plain';
     scheme?: PaletteColor;
     title?: React.ReactNode;
     icon?: React.ReactElement;
     iconPosition?: 'start' | 'end';
-};
-export declare const Tag: ({ size, variant, scheme, title, icon, iconPosition, className, style, children, ...props }: TagProps) => import("react/jsx-runtime").JSX.Element;
+}>;
+export declare const Tag: <T extends React.ElementType = "span">(props: {
+    as?: T | undefined;
+    size?: "xs" | "sm" | "md" | "lg" | "xl";
+    variant?: "default" | "solid" | "plain";
+    scheme?: PaletteColor;
+    title?: React.ReactNode;
+    icon?: React.ReactElement;
+    iconPosition?: "start" | "end";
+} & Omit<React.PropsWithoutRef<React.ComponentProps<T>>, "title" | "size" | "as" | "icon" | "scheme" | "variant" | "iconPosition"> & React.RefAttributes<unknown>) => React.ReactElement | null;

package/dist/components/Tag/Tag.js

@@ -1,58 +1,76 @@
-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,
+import { jsxs as s } from "react/jsx-runtime";
+import T from "classnames";
+import { fixedForwardRef as f, wrapNode as c, cssProps as y } from "../../utils/helpers.js";
+const b = "Tag_tag_-ovOm", _ = {
+  tag: b,
   "default-gray": "Tag_default-gray_Ju2wo",
   "solid-gray": "Tag_solid-gray_q6GO4",
+  "plain-gray": "Tag_plain-gray_VOC5n",
   "default-brown": "Tag_default-brown_csCrz",
   "solid-brown": "Tag_solid-brown_5IxVx",
+  "plain-brown": "Tag_plain-brown_TtI-e",
   "default-red": "Tag_default-red_5NeXY",
   "solid-red": "Tag_solid-red_uPhj-",
+  "plain-red": "Tag_plain-red_u1m8b",
   "default-orange": "Tag_default-orange_fuy0F",
   "solid-orange": "Tag_solid-orange_DbiG6",
+  "plain-orange": "Tag_plain-orange_-jRyN",
   "default-yellow": "Tag_default-yellow_RMd-J",
   "solid-yellow": "Tag_solid-yellow_nQDFs",
+  "plain-yellow": "Tag_plain-yellow_fI3bA",
   "default-green": "Tag_default-green_YHGrt",
   "solid-green": "Tag_solid-green_2UpBu",
+  "plain-green": "Tag_plain-green_LBoDH",
   "default-teal": "Tag_default-teal_AwZI-",
   "solid-teal": "Tag_solid-teal_fVVK8",
+  "plain-teal": "Tag_plain-teal_8AXj2",
   "default-cyan": "Tag_default-cyan_8KUgG",
   "solid-cyan": "Tag_solid-cyan_s5VjG",
+  "plain-cyan": "Tag_plain-cyan_aXS-K",
   "default-blue": "Tag_default-blue_jKbT1",
   "solid-blue": "Tag_solid-blue_0AuNj",
+  "plain-blue": "Tag_plain-blue_ujHf1",
   "default-indigo": "Tag_default-indigo_b26lU",
   "solid-indigo": "Tag_solid-indigo_2gfJj",
+  "plain-indigo": "Tag_plain-indigo_fYbSc",
   "default-purple": "Tag_default-purple_oBbek",
   "solid-purple": "Tag_solid-purple_e10WH",
+  "plain-purple": "Tag_plain-purple_sVJ5H",
   "default-accent": "Tag_default-accent_uUXnO",
-  "solid-accent": "Tag_solid-accent_bbTSM"
-}, j = ({
-  size: s,
+  "solid-accent": "Tag_solid-accent_bbTSM",
+  "plain-accent": "Tag_plain-accent_cqQHI"
+};
+function w({
+  as: d,
+  size: g,
   variant: a = "default",
   scheme: l = "gray",
-  title: e,
-  icon: d,
-  iconPosition: o = "start",
-  className: r,
-  style: u,
-  children: g,
-  ...i
-}) => /* @__PURE__ */ n(
-  "span",
-  {
-    ...i,
-    "data-tag": a,
-    "data-scheme": l,
-    className: c(_.tag, _[`${a}-${l}`], r),
-    style: { ...u, ...p({ size: s }) },
-    children: g ? t(g, "span") : /* @__PURE__ */ f(T, { children: [
-      o === "start" && d,
-      e !== void 0 && t(e, "span"),
-      o === "end" && d
-    ] })
-  }
-);
+  title: o,
+  icon: e,
+  iconPosition: n = "start",
+  className: i,
+  style: t,
+  children: r,
+  ...u
+}, p) {
+  return /* @__PURE__ */ s(
+    d ?? "span",
+    {
+      ...u,
+      ref: p,
+      "data-tag": a,
+      "data-scheme": l,
+      className: T(_.tag, _[`${a}-${l}`], i),
+      style: { ...t, ...y({ size: g }) },
+      children: [
+        n === "start" && e,
+        c(r || o, "span"),
+        n === "end" && e
+      ]
+    }
+  );
+}
+const x = f(w);
 export {
-  j as Tag
+  x as Tag
 };

package/dist/index.d.ts

@@ -17,3 +17,4 @@ export * from './components/Tag';
 export * from './components/ToggleButton';
 export * from './components/Tooltip';
 export * from './utils/colors';
+export * from './utils/helpers';

package/dist/index.js

@@ -2,20 +2,20 @@ import { Avatar as e } from "./components/Avatar/Avatar.js";
 import { Badge as p } from "./components/Badge/Badge.js";
 import { Breadcrumbs as x } from "./components/Breadcrumbs/Breadcrumbs.js";
 import { Button as a } from "./components/Button/Button.js";
-import { Dialog as l, DialogClose as g, DialogContent as n, DialogFooter as u, DialogTitle as s } from "./components/Dialog/Dialog.js";
-import { useDialog as d } from "./components/Dialog/useDialog.js";
+import { Dialog as l, DialogClose as g, DialogContent as n, DialogFooter as s, DialogTitle as d } from "./components/Dialog/Dialog.js";
+import { useDialog as u } from "./components/Dialog/useDialog.js";
 import { withDialog as T } from "./components/Dialog/withDialog.js";
-import { Flex as F } from "./components/Flex/Flex.js";
-import { Checkbox as C } from "./components/Fields/Checkbox.js";
-import { Field as b, FieldDescription as h, FieldLabel as M } from "./components/Fields/Field.js";
-import { I as v } from "./Input-D46mAsdt.js";
+import { Flex as B } from "./components/Flex/Flex.js";
+import { Checkbox as w } from "./components/Fields/Checkbox.js";
+import { Field as I, FieldDescription as M, FieldLabel as P } from "./components/Fields/Field.js";
+import { I as b } from "./Input-D46mAsdt.js";
 import { Numeric as N } from "./components/Fields/Numeric.js";
-import { Radio as V } from "./components/Fields/Radio.js";
-import { Range as A } from "./components/Fields/Range.js";
-import { Select as H } from "./components/Fields/Select.js";
-import { Switch as j } from "./components/Fields/Switch.js";
-import { Textarea as y } from "./components/Fields/Textarea.js";
-import { V as E } from "./ValidationTooltip-D8d9O6Re.js";
+import { Radio as E } from "./components/Fields/Radio.js";
+import { Range as k } from "./components/Fields/Range.js";
+import { Select as G } from "./components/Fields/Select.js";
+import { Switch as L } from "./components/Fields/Switch.js";
+import { Textarea as q } from "./components/Fields/Textarea.js";
+import { V as z } from "./ValidationTooltip-D8d9O6Re.js";
 import { Heading as K } from "./components/Heading/Heading.js";
 import { Icon as Q } from "./components/Icon/Icon.js";
 import { Menu as W } from "./components/Menu/Menu.js";
@@ -28,28 +28,29 @@ import { ProgressCircular as xo } from "./components/Progress/ProgressCircular.j
 import { Segmented as ao } from "./components/Segmented/Segmented.js";
 import { Spinner as lo } from "./components/Spinner/Spinner.js";
 import { Tag as no } from "./components/Tag/Tag.js";
-import { ToggleButton as so } from "./components/ToggleButton/ToggleButton.js";
+import { ToggleButton as co } from "./components/ToggleButton/ToggleButton.js";
 import { ToggleGroup as Do } from "./components/ToggleButton/ToggleGroup.js";
-import { Tooltip as Bo } from "./components/Tooltip/Tooltip.js";
+import { Tooltip as Fo } from "./components/Tooltip/Tooltip.js";
 import { palette as So } from "./utils/colors.js";
+import { clamp as Co, cssProps as Io, fixedForwardRef as Mo, getElementRef as Po, getErrorMessage as Ro, wrapNode as bo } from "./utils/helpers.js";
 export {
   e as Avatar,
   p as Badge,
   x as Breadcrumbs,
   a as Button,
-  C as Checkbox,
+  w as Checkbox,
   l as Dialog,
   g as DialogClose,
   n as DialogContent,
-  u as DialogFooter,
-  s as DialogTitle,
-  b as Field,
-  h as FieldDescription,
-  M as FieldLabel,
-  F as Flex,
+  s as DialogFooter,
+  d as DialogTitle,
+  I as Field,
+  M as FieldDescription,
+  P as FieldLabel,
+  B as Flex,
   K as Heading,
   Q as Icon,
-  v as Input,
+  b as Input,
   W as Menu,
   Y as MenuItem,
   _ as MenuSeparator,
@@ -58,19 +59,25 @@ export {
   eo as Popover,
   po as ProgressBar,
   xo as ProgressCircular,
-  V as Radio,
-  A as Range,
+  E as Radio,
+  k as Range,
   ao as Segmented,
-  H as Select,
+  G as Select,
   lo as Spinner,
-  j as Switch,
+  L as Switch,
   no as Tag,
-  y as Textarea,
-  so as ToggleButton,
+  q as Textarea,
+  co as ToggleButton,
   Do as ToggleGroup,
-  Bo as Tooltip,
-  E as ValidationTooltip,
+  Fo as Tooltip,
+  z as ValidationTooltip,
+  Co as clamp,
+  Io as cssProps,
+  Mo as fixedForwardRef,
+  Po as getElementRef,
+  Ro as getErrorMessage,
   So as palette,
-  d as useDialog,
-  T as withDialog
+  u as useDialog,
+  T as withDialog,
+  bo as wrapNode
 };