@kolking/react-ui 1.0.0

package/dist/components/Menu/MenuItem.js

@@ -0,0 +1,50 @@
+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 { 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,
+  scheme: p = "default",
+  icon: c,
+  title: s,
+  children: r,
+  className: u,
+  style: f,
+  onClick: e,
+  ...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);
+    },
+    [o, e]
+  );
+  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], u),
+      style: { ...f, ...A({ size: t }) },
+      ...l({ onClick: I }),
+      children: r ? a(r) : /* @__PURE__ */ h(j, { children: [
+        c,
+        s && a(s)
+      ] })
+    }
+  );
+};
+export {
+  D as MenuItem
+};

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

@@ -0,0 +1,2 @@
+export * from './Menu';
+export * from './MenuItem';

package/dist/components/Menu/index.js

@@ -0,0 +1,6 @@
+import { Menu as r } from "./Menu.js";
+import { MenuItem as t } from "./MenuItem.js";
+export {
+  r as Menu,
+  t as MenuItem
+};

package/dist/components/Notice/Notice.d.ts

@@ -0,0 +1,15 @@
+import { default as React } from 'react';
+type Scheme = 'info' | 'warning' | 'error' | 'success' | 'neutral';
+export type NoticeProps = React.HTMLAttributes<HTMLDivElement> & {
+    error?: unknown;
+    scheme?: Scheme;
+    variant?: 'default' | 'plain';
+    layout?: 'horizontal' | 'vertical';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    icon?: React.ReactElement | null;
+    accessory?: React.ReactNode;
+    margin?: React.CSSProperties['margin'];
+    padding?: React.CSSProperties['padding'];
+};
+export declare const Notice: ({ error, scheme, layout, variant, size, icon, accessory, margin, padding, className, style, children, ...props }: NoticeProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Notice/Notice.js

@@ -0,0 +1,56 @@
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import { c as v } from "../../index-DyIdU--j.js";
+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 = {
+  info: h,
+  error: z,
+  success: j,
+  warning: x,
+  neutral: C,
+  container: F,
+  content: I,
+  message: k,
+  accessory: M,
+  vertical: Q,
+  plain: U
+}, a = {
+  info: "info-circle",
+  warning: "warning",
+  error: "error-circle",
+  success: "checkmark-circle",
+  neutral: "info-outline"
+}, E = ({
+  error: n,
+  scheme: o = n ? "error" : "neutral",
+  layout: t = "horizontal",
+  variant: l = "default",
+  size: _,
+  icon: s,
+  accessory: r,
+  margin: N,
+  padding: m,
+  className: d,
+  style: f,
+  children: g,
+  ...u
+}) => /* @__PURE__ */ i(
+  "div",
+  {
+    ...u,
+    "data-notice": o,
+    "data-layout": t,
+    className: v(c.container, c[o], c[t], c[l], d),
+    style: { ...f, ...p({ size: _, margin: N, padding: m }) },
+    children: [
+      /* @__PURE__ */ i("div", { className: c.content, children: [
+        s !== void 0 ? s : a[o] && /* @__PURE__ */ e(w, { name: a[o] }),
+        /* @__PURE__ */ e("div", { className: c.message, children: n ? y(n) : g })
+      ] }),
+      r && /* @__PURE__ */ e("div", { className: c.accessory, children: r })
+    ]
+  }
+);
+export {
+  E as Notice
+};

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

@@ -0,0 +1 @@
+export * from './Notice';

package/dist/components/Notice/index.js

@@ -0,0 +1,4 @@
+import { Notice as r } from "./Notice.js";
+export {
+  r as Notice
+};

package/dist/components/Progress/ProgressBar.d.ts

@@ -0,0 +1,21 @@
+import { default as React } from 'react';
+export type ProgressBarProps = React.HTMLAttributes<HTMLDivElement> & {
+    value: number | null;
+    width?: string | number;
+    height?: string | number;
+    color?: string;
+    trackColor?: string;
+    margin?: React.CSSProperties['margin'];
+    minWidth?: React.CSSProperties['minWidth'];
+    maxWidth?: React.CSSProperties['maxWidth'];
+};
+export declare const ProgressBar: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    value: number | null;
+    width?: string | number;
+    height?: string | number;
+    color?: string;
+    trackColor?: string;
+    margin?: React.CSSProperties["margin"];
+    minWidth?: React.CSSProperties["minWidth"];
+    maxWidth?: React.CSSProperties["maxWidth"];
+} & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Progress/ProgressBar.js

@@ -0,0 +1,47 @@
+import { jsx as a } from "react/jsx-runtime";
+import f from "react";
+import { c as _ } from "../../index-DyIdU--j.js";
+import { cssProps as u, clamp as v } from "../../utils/helpers.js";
+const P = "Progress_progress_LSrhF", w = "Progress_bar_ywPS-", e = {
+  progress: P,
+  bar: w
+}, R = f.forwardRef(
+  ({
+    value: s,
+    width: o,
+    height: t,
+    color: i,
+    trackColor: p,
+    minWidth: n,
+    maxWidth: m,
+    margin: c,
+    style: l,
+    className: g,
+    ...d
+  }, b) => {
+    const r = s ? v(s, 0, 100) : void 0;
+    return /* @__PURE__ */ a(
+      "div",
+      {
+        ...d,
+        ref: b,
+        role: "progressbar",
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        "aria-valuenow": r,
+        "aria-label": r ? `${r} percent` : "indeterminate",
+        "data-progress": "bar",
+        "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 })
+        },
+        children: /* @__PURE__ */ a("span", { className: e.bar, style: { width: `${r}%` } })
+      }
+    );
+  }
+);
+export {
+  R as ProgressBar
+};

package/dist/components/Progress/ProgressCircular.d.ts

@@ -0,0 +1,25 @@
+import { default as React } from 'react';
+export type ProgressCircularProps = React.HTMLAttributes<HTMLDivElement> & {
+    min?: number;
+    max?: number;
+    value: number | null;
+    size?: string | number;
+    countdown?: boolean;
+    thickness?: number;
+    linecap?: 'round';
+    color?: string;
+    trackColor?: string;
+    margin?: React.CSSProperties['margin'];
+};
+export declare const ProgressCircular: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    min?: number;
+    max?: number;
+    value: number | null;
+    size?: string | number;
+    countdown?: boolean;
+    thickness?: number;
+    linecap?: "round";
+    color?: string;
+    trackColor?: string;
+    margin?: React.CSSProperties["margin"];
+} & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Progress/ProgressCircular.js

@@ -0,0 +1,71 @@
+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 { 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,
+  container: h,
+  range: x,
+  progress: y,
+  track: C
+};
+function F(r, s, e) {
+  return e !== void 0 ? ((e - r) / (s - r) * 100).toString() : e;
+}
+const H = j.forwardRef(
+  ({
+    min: r = 0,
+    max: s = 100,
+    value: e,
+    size: i,
+    countdown: l,
+    thickness: g,
+    linecap: u,
+    color: d,
+    trackColor: p,
+    margin: m,
+    className: _,
+    style: f,
+    children: t,
+    ...v
+  }, P) => {
+    const o = e !== null ? w(e, r, s) : void 0;
+    return /* @__PURE__ */ c(
+      "div",
+      {
+        ...v,
+        ref: P,
+        role: "progressbar",
+        "aria-valuemin": r,
+        "aria-valuemax": s,
+        "aria-valuenow": o,
+        "data-progress": "circular",
+        "data-countdown": l,
+        "data-progress-value": o ?? "indeterminate",
+        className: N(a.container, _),
+        style: {
+          ...f,
+          ...k({
+            size: i,
+            thickness: g,
+            linecap: u,
+            color: d,
+            trackColor: p,
+            margin: m,
+            value: F(r, s, o)
+          })
+        },
+        children: [
+          /* @__PURE__ */ c("svg", { "aria-hidden": !0, className: a.progress, children: [
+            /* @__PURE__ */ n("circle", { fill: "none", className: a.track }),
+            /* @__PURE__ */ n("circle", { fill: "none", className: a.range })
+          ] }),
+          t && /* @__PURE__ */ n("div", { className: a.inner, children: t })
+        ]
+      }
+    );
+  }
+);
+export {
+  H as ProgressCircular
+};

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

@@ -0,0 +1,2 @@
+export * from './ProgressBar';
+export * from './ProgressCircular';

package/dist/components/Progress/index.js

@@ -0,0 +1,6 @@
+import { ProgressBar as e } from "./ProgressBar.js";
+import { ProgressCircular as a } from "./ProgressCircular.js";
+export {
+  e as ProgressBar,
+  a as ProgressCircular
+};

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

@@ -0,0 +1,9 @@
+export type SegmentedProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> & {
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    items: React.ReactNode[];
+    selected: number;
+    disabled?: boolean;
+    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;

package/dist/components/Segmented/Segmented.js

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

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

@@ -0,0 +1 @@
+export * from './Segmented';

package/dist/components/Segmented/index.js

@@ -0,0 +1,4 @@
+import { Segmented as o } from "./Segmented.js";
+export {
+  o as Segmented
+};

package/dist/components/Spinner/Spinner.d.ts

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+export type SpinnerProps = React.HTMLAttributes<HTMLSpanElement> & {
+    size?: string | number;
+    color?: string;
+    overlay?: boolean;
+    overlayColor?: string;
+};
+export declare const Spinner: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & {
+    size?: string | number;
+    color?: string;
+    overlay?: boolean;
+    overlayColor?: string;
+} & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/Spinner/Spinner.js

@@ -0,0 +1,31 @@
+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 { 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,
+  spinner: g,
+  track: S,
+  range: k
+}, N = m.forwardRef(
+  ({ size: e, color: a, overlay: s, overlayColor: i, className: t, style: c, ...o }, l) => /* @__PURE__ */ r(
+    "span",
+    {
+      ...o,
+      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 }) },
+      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 })
+      ] })
+    }
+  )
+);
+export {
+  N as Spinner
+};

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

@@ -0,0 +1 @@
+export * from './Spinner';

package/dist/components/Spinner/index.js

@@ -0,0 +1,4 @@
+import { Spinner as n } from "./Spinner.js";
+export {
+  n as Spinner
+};

package/dist/components/Tooltip/Tooltip.d.ts

@@ -0,0 +1,14 @@
+import { default as React } from 'react';
+import { Placement } from '@floating-ui/react';
+type Trigger = 'hover' | 'focus' | 'click' | 'hover focus' | 'hover click' | 'focus click' | 'hover focus click';
+export type TooltipProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'content' | 'children'> & {
+    trigger?: Trigger;
+    disabled?: boolean;
+    placement?: Placement;
+    content: React.ReactNode;
+    children: React.JSX.Element;
+    minWidth?: React.CSSProperties['minWidth'];
+    maxWidth?: React.CSSProperties['maxWidth'];
+};
+export declare const Tooltip: ({ trigger, placement, content, disabled, minWidth, maxWidth, className, children, ...props }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Tooltip/Tooltip.js

@@ -0,0 +1,78 @@
+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 = {
+  tooltip: J,
+  arrow: K,
+  content: L
+}, ee = ({
+  trigger: a = "hover focus",
+  placement: c = "top",
+  content: h,
+  disabled: l,
+  minWidth: w,
+  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({
+    open: p,
+    placement: c,
+    onOpenChange: v,
+    whileElementsMounted: G,
+    middleware: [
+      I(8),
+      V(),
+      $(),
+      z(({ placement: o, rects: s }) => (O(
+        s.floating.width < s.reference.width && (o.endsWith("-start") || o.endsWith("-end"))
+      ), { element: f, 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([
+    n.setReference,
+    "ref" in t ? t.ref : null
+  ]);
+  return P(() => {
+    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(
+      "div",
+      {
+        ..._,
+        ref: n.setFloating,
+        "data-tooltip": c,
+        className: S(i.tooltip, F),
+        style: { ...N, minWidth: w, maxWidth: R },
+        ...k(),
+        children: [
+          /* @__PURE__ */ r(
+            H,
+            {
+              width: 12,
+              height: 6,
+              ref: f,
+              context: e,
+              className: i.arrow,
+              staticOffset: x ? 8 : null
+            }
+          ),
+          /* @__PURE__ */ r("div", { className: i.content, children: h })
+        ]
+      }
+    ) })
+  ] });
+};
+export {
+  ee as Tooltip
+};

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

@@ -0,0 +1 @@
+export * from './Tooltip';

package/dist/components/Tooltip/index.js

@@ -0,0 +1,4 @@
+import { Tooltip as r } from "./Tooltip.js";
+export {
+  r as Tooltip
+};