@kolking/react-ui 1.8.14 → 1.8.16

package/dist/components/Badge/Badge.js

@@ -1,10 +1,11 @@
 import { jsx as h } from "react/jsx-runtime";
 import { useRef as _, useLayoutEffect as w, useEffect as l } from "react";
 import E from "classnames";
-import { wrapNode as P, cssProps as M } from "../../utils/helpers.js";
-const x = "Badge_badge_-mEE7", H = "Badge_appear_LbxbS", L = "Badge_gray_7jA-J", I = "Badge_brown_x1GS7", R = "Badge_red_zPgCR", S = "Badge_orange_EoLmF", X = "Badge_yellow_qvbb6", j = "Badge_green_XX-1c", v = "Badge_teal_VHoFK", C = "Badge_cyan_1ksBn", F = "Badge_blue_YulfT", K = "Badge_indigo_2KXUy", N = "Badge_purple_o55fQ", O = "Badge_accent_BIYve", g = {
-  badge: x,
-  appear: H,
+import { wrapNode as P, cssProps as H } from "../../utils/helpers.js";
+const M = "Badge_badge_-mEE7", k = "Badge_appear_LbxbS", x = "Badge_accent_BIYve", L = "Badge_gray_7jA-J", I = "Badge_brown_x1GS7", R = "Badge_red_zPgCR", S = "Badge_orange_EoLmF", X = "Badge_yellow_qvbb6", j = "Badge_green_XX-1c", v = "Badge_teal_VHoFK", C = "Badge_cyan_1ksBn", F = "Badge_blue_YulfT", K = "Badge_indigo_2KXUy", N = "Badge_purple_o55fQ", O = "Badge_pink_T5H--", g = {
+  badge: M,
+  appear: k,
+  accent: x,
   gray: L,
   brown: I,
   red: R,
@@ -16,9 +17,9 @@ const x = "Badge_badge_-mEE7", H = "Badge_appear_LbxbS", L = "Badge_gray_7jA-J",
   blue: F,
   indigo: K,
   purple: N,
-  accent: O
+  pink: O
 };
-function Y(a) {
+function T(a) {
   const n = _();
   return l(() => {
     n.current = a;
@@ -34,7 +35,7 @@ const A = ({
   style: f,
   ...y
 }) => {
-  const e = !o, p = Y(e), t = _(null);
+  const e = !o, p = T(e), t = _(null);
   if (w(() => {
     var r;
     p && !e && ((r = t.current) == null || r.classList.add(g.appear));
@@ -43,12 +44,12 @@ const A = ({
       const r = t.current.clientHeight, d = t.current.parentElement, i = d ? Math.min(
         parseInt(getComputedStyle(d).getPropertyValue("border-radius")),
         d.clientHeight / 2
-      ) : 0, B = i * (1 - Math.sin(45 * Math.PI / 180)), m = (1 + Math.min(i / r, 1)) * (r / 4);
-      t.current.style.setProperty("--offset", `${B - m}px`);
+      ) : 0, b = i * (1 - Math.sin(45 * Math.PI / 180)), m = (1 + Math.min(i / r, 1)) * (r / 4);
+      t.current.style.setProperty("--offset", `${b - m}px`);
     }
   }, [e, s]), e)
     return null;
-  const b = typeof o == "number" && c > 0 && o > c;
+  const B = typeof o == "number" && c > 0 && o > c;
   return /* @__PURE__ */ h(
     "div",
     {
@@ -57,8 +58,8 @@ const A = ({
       "data-badge": n,
       "data-placement": s,
       className: E(g.badge, g[n], u),
-      style: { ...f, ...M({ size: a }) },
-      children: P(b ? `${c}+` : o, "span")
+      style: { ...f, ...H({ size: a }) },
+      children: P(B ? `${c}+` : o, "span")
     }
   );
 };

package/dist/components/Dialog/withDialog.d.ts

@@ -1,11 +1,12 @@
 import { default as React } from 'react';
 import { DialogProps } from './Dialog';
 import { DialogOptions, DialogType } from './useDialog';
-type ComponentProps<T, R> = Omit<DialogProps, 'children' | 'ref' | 'requestClose'> & DialogOptions<T, R> & {
+type PartialDialogProps = Omit<DialogProps, 'children' | 'ref' | 'requestClose'>;
+type ComponentProps<T, R> = PartialDialogProps & DialogOptions<T, R> & {
     children: (dialog: DialogType<T, R>) => React.ReactNode;
 };
 export type WithDialogProps<T extends object, R> = T & {
     dialog: DialogType<T, R>;
 };
-export declare function withDialog<T extends object, R>(Component: React.ComponentType<WithDialogProps<T, R>>): React.ComponentType<ComponentProps<T, R>>;
+export declare function withDialog<T extends object, R>(Component: React.ComponentType<WithDialogProps<T, R>>, withProps?: PartialDialogProps): React.ComponentType<ComponentProps<T, R>>;
 export {};

package/dist/components/Dialog/withDialog.js

@@ -1,23 +1,23 @@
-import { jsxs as s, Fragment as c, jsx as o } from "react/jsx-runtime";
-import { Dialog as d } from "./Dialog.js";
-import { useDialog as f } from "./useDialog.js";
-function x(t) {
-  function i({
-    children: a,
-    defaultOpen: n,
+import { jsxs as d, Fragment as g, jsx as r } from "react/jsx-runtime";
+import { Dialog as f } from "./Dialog.js";
+import { useDialog as u } from "./useDialog.js";
+function j(t, i) {
+  function a({
+    children: n,
+    defaultOpen: p,
     onShow: e,
-    onConfirm: p,
-    onCancel: m,
-    ...l
+    onConfirm: s,
+    onCancel: l,
+    ...m
   }) {
-    const r = f({ defaultOpen: n, onShow: e, onConfirm: p, onCancel: m });
-    return /* @__PURE__ */ s(c, { children: [
-      a(r),
-      /* @__PURE__ */ o(d, { ...l, ...r.props, children: r.data && /* @__PURE__ */ o(t, { ...r.data, dialog: r }) })
+    const o = u({ defaultOpen: p, onShow: e, onConfirm: s, onCancel: l }), c = { ...i, ...m, ...o.props };
+    return /* @__PURE__ */ d(g, { children: [
+      n(o),
+      /* @__PURE__ */ r(f, { ...c, children: o.data && /* @__PURE__ */ r(t, { ...o.data, dialog: o }) })
     ] });
   }
-  return i;
+  return a;
 }
 export {
-  x as withDialog
+  j as withDialog
 };

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

@@ -2,6 +2,7 @@ import { default as React } from 'react';
 export interface FieldConfig {
     id?: string;
     label?: React.ReactNode;
+    labelId?: string;
     labelAccessory?: React.ReactNode;
     help?: React.ReactNode;
     required?: boolean;
@@ -14,7 +15,7 @@ export type FieldLabelProps = React.LabelHTMLAttributes<HTMLLabelElement> & {
     required?: boolean;
 };
 export declare const FieldLabel: ({ label, required, className, children, ...props }: FieldLabelProps) => import("react/jsx-runtime").JSX.Element;
-export type FieldDescriptionProps = React.HTMLAttributes<HTMLDivElement>;
+export type FieldDescriptionProps = React.HTMLAttributes<HTMLSpanElement>;
 export declare const FieldDescription: ({ className, children, ...props }: FieldDescriptionProps) => import("react/jsx-runtime").JSX.Element;
 export type FieldProps = React.HTMLAttributes<HTMLDivElement> & FieldConfig;
-export declare const Field: ({ id, label, labelAccessory, help, required, minWidth, maxWidth, className, children, style, ...props }: FieldProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Field: ({ id, label, labelId, labelAccessory, help, required, minWidth, maxWidth, className, children, style, ...props }: FieldProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Fields/Field.js

@@ -1,53 +1,54 @@
-import { jsxs as i, jsx as r } from "react/jsx-runtime";
+import { jsxs as i, jsx as a } from "react/jsx-runtime";
 import d from "classnames";
-import _ from "react";
-import { cssProps as p } from "../../utils/helpers.js";
-const u = "styles_field_hqzKT", b = "styles_header_Iwsz6", N = "styles_label_zRVTS", F = "styles_accessory_S4ccn", v = "styles_description_fZnNW", a = {
-  field: u,
-  header: b,
-  label: N,
-  accessory: F,
-  description: v
-}, x = ({ label: e, required: s, className: l, children: t, ...c }) => /* @__PURE__ */ i("div", { "data-field-header": !0, className: a.header, children: [
-  /* @__PURE__ */ r(
+import p from "react";
+import { cssProps as u } from "../../utils/helpers.js";
+const b = "styles_field_hqzKT", N = "styles_header_Iwsz6", F = "styles_label_zRVTS", v = "styles_accessory_S4ccn", x = "styles_description_fZnNW", t = {
+  field: b,
+  header: N,
+  label: F,
+  accessory: v,
+  description: x
+}, z = ({ label: e, required: s, className: l, children: r, ...c }) => /* @__PURE__ */ i("div", { "data-field-header": !0, className: t.header, children: [
+  /* @__PURE__ */ a(
     "label",
     {
       ...c,
       "data-field-label": !0,
       "data-required": s,
-      className: d(a.label, l),
+      className: d(t.label, l),
       children: e
     }
   ),
-  _.Children.toArray(t).length > 0 && /* @__PURE__ */ r("div", { "data-field-accessory": !0, className: a.accessory, children: t })
-] }), z = ({ className: e, children: s, ...l }) => /* @__PURE__ */ r("small", { ...l, "data-field-description": !0, className: d(a.description, e), children: s }), T = ({
+  p.Children.toArray(r).length > 0 && /* @__PURE__ */ a("div", { "data-field-accessory": !0, className: t.accessory, children: r })
+] }), j = ({ className: e, children: s, ...l }) => /* @__PURE__ */ a("small", { ...l, "data-field-description": !0, className: d(t.description, e), children: s }), g = ({
   id: e,
   label: s,
-  labelAccessory: l,
-  help: t,
-  required: c,
-  minWidth: o,
-  maxWidth: n,
-  className: f,
-  children: m,
-  style: y,
-  ...h
+  labelId: l,
+  labelAccessory: r,
+  help: c,
+  required: o,
+  minWidth: n,
+  maxWidth: f,
+  className: m,
+  children: y,
+  style: h,
+  ..._
 }) => /* @__PURE__ */ i(
   "div",
   {
-    ...h,
+    ..._,
     "data-field": e || !0,
-    className: d(a.field, f),
-    style: { ...y, ...p({ minWidth: o, maxWidth: n }) },
+    className: d(t.field, m),
+    style: { ...h, ...u({ minWidth: n, maxWidth: f }) },
     children: [
-      s && /* @__PURE__ */ r(x, { htmlFor: e, label: s, required: c, children: l }),
-      m,
-      t && /* @__PURE__ */ r(z, { children: t })
+      s && /* @__PURE__ */ a(z, { id: l, htmlFor: e, label: s, required: o, children: r }),
+      y,
+      c && /* @__PURE__ */ a(j, { children: c })
     ]
   }
 );
 export {
-  T as Field,
-  z as FieldDescription,
-  x as FieldLabel
+  g as Field,
+  j as FieldDescription,
+  z as FieldLabel
 };