@oneplatformdev/ui 0.0.1-beta.11

package/Chart/Chart.mjs

@@ -0,0 +1,210 @@
+import { jsx as s, jsxs as m, Fragment as P } from "react/jsx-runtime";
+import * as g from "react";
+import * as C from "recharts";
+import { cn as i } from "@oneplatformdev/utils";
+const I = { light: "", dark: ".dark" }, j = g.createContext(null);
+function $() {
+  const o = g.useContext(j);
+  if (!o)
+    throw new Error("useChart must be used within a <ChartContainer />");
+  return o;
+}
+const S = g.forwardRef(({ id: o, className: e, children: n, config: r, ...a }, f) => {
+  const l = g.useId(), c = `chart-${o || l.replace(/:/g, "")}`;
+  return /* @__PURE__ */ s(j.Provider, { value: { config: r }, children: /* @__PURE__ */ m(
+    "div",
+    {
+      "data-chart": c,
+      ref: f,
+      className: i(
+        "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
+        e
+      ),
+      ...a,
+      children: [
+        /* @__PURE__ */ s(E, { id: c, config: r }),
+        /* @__PURE__ */ s(C.ResponsiveContainer, { children: n })
+      ]
+    }
+  ) });
+});
+S.displayName = "Chart";
+const E = ({ id: o, config: e }) => {
+  const n = Object.entries(e).filter(
+    ([, r]) => r.theme || r.color
+  );
+  return n.length ? /* @__PURE__ */ s(
+    "style",
+    {
+      dangerouslySetInnerHTML: {
+        __html: Object.entries(I).map(
+          ([r, a]) => `
+${a} [data-chart=${o}] {
+${n.map(([f, l]) => {
+            var h;
+            const c = ((h = l.theme) == null ? void 0 : h[r]) || l.color;
+            return c ? `  --color-${f}: ${c};` : null;
+          }).join(`
+`)}
+}
+`
+        ).join(`
+`)
+      }
+    }
+  ) : null;
+}, q = C.Tooltip, K = g.forwardRef(
+  ({
+    active: o,
+    payload: e,
+    className: n,
+    indicator: r = "dot",
+    hideLabel: a = !1,
+    hideIndicator: f = !1,
+    label: l,
+    labelFormatter: c,
+    labelClassName: h,
+    formatter: u,
+    color: L,
+    nameKey: R,
+    labelKey: _
+  }, T) => {
+    const { config: p } = $(), N = g.useMemo(() => {
+      var x;
+      if (a || !(e != null && e.length))
+        return null;
+      const [t] = e, w = `${_ || t.dataKey || t.name || "value"}`, v = k(p, t, w), d = !_ && typeof l == "string" ? ((x = p[l]) == null ? void 0 : x.label) || l : v == null ? void 0 : v.label;
+      return c ? /* @__PURE__ */ s("div", { className: i("font-medium", h), children: c(d, e) }) : d ? /* @__PURE__ */ s("div", { className: i("font-medium", h), children: d }) : null;
+    }, [
+      l,
+      c,
+      e,
+      a,
+      h,
+      p,
+      _
+    ]);
+    if (!o || !(e != null && e.length))
+      return null;
+    const b = e.length === 1 && r !== "dot";
+    return /* @__PURE__ */ m(
+      "div",
+      {
+        ref: T,
+        className: i(
+          "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
+          n
+        ),
+        children: [
+          b ? null : N,
+          /* @__PURE__ */ s("div", { className: "grid gap-1.5", children: e.map((t, w) => {
+            const v = `${R || t.name || t.dataKey || "value"}`, d = k(p, t, v), x = L || t.payload.fill || t.color;
+            return /* @__PURE__ */ s(
+              "div",
+              {
+                className: i(
+                  "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
+                  r === "dot" && "items-center"
+                ),
+                children: u && (t == null ? void 0 : t.value) !== void 0 && t.name ? u(t.value, t.name, t, w, t.payload) : /* @__PURE__ */ m(P, { children: [
+                  d != null && d.icon ? /* @__PURE__ */ s(d.icon, {}) : !f && /* @__PURE__ */ s(
+                    "div",
+                    {
+                      className: i(
+                        "shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",
+                        {
+                          "h-2.5 w-2.5": r === "dot",
+                          "w-1": r === "line",
+                          "w-0 border-[1.5px] border-dashed bg-transparent": r === "dashed",
+                          "my-0.5": b && r === "dashed"
+                        }
+                      ),
+                      style: {
+                        "--color-bg": x,
+                        "--color-border": x
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ m(
+                    "div",
+                    {
+                      className: i(
+                        "flex flex-1 justify-between leading-none",
+                        b ? "items-end" : "items-center"
+                      ),
+                      children: [
+                        /* @__PURE__ */ m("div", { className: "grid gap-1.5", children: [
+                          b ? N : null,
+                          /* @__PURE__ */ s("span", { className: "text-muted-foreground", children: (d == null ? void 0 : d.label) || t.name })
+                        ] }),
+                        t.value && /* @__PURE__ */ s("span", { className: "font-mono font-medium tabular-nums text-foreground", children: t.value.toLocaleString() })
+                      ]
+                    }
+                  )
+                ] })
+              },
+              t.dataKey
+            );
+          }) })
+        ]
+      }
+    );
+  }
+);
+K.displayName = "ChartTooltip";
+const y = C.Legend, M = g.forwardRef(
+  ({ className: o, hideIcon: e = !1, payload: n, verticalAlign: r = "bottom", nameKey: a }, f) => {
+    const { config: l } = $();
+    return n != null && n.length ? /* @__PURE__ */ s(
+      "div",
+      {
+        ref: f,
+        className: i(
+          "flex items-center justify-center gap-4",
+          r === "top" ? "pb-3" : "pt-3",
+          o
+        ),
+        children: n.map((c) => {
+          const h = `${a || c.dataKey || "value"}`, u = k(l, c, h);
+          return /* @__PURE__ */ m(
+            "div",
+            {
+              className: i(
+                "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"
+              ),
+              children: [
+                u != null && u.icon && !e ? /* @__PURE__ */ s(u.icon, {}) : /* @__PURE__ */ s(
+                  "div",
+                  {
+                    className: "h-2 w-2 shrink-0 rounded-[2px]",
+                    style: {
+                      backgroundColor: c.color
+                    }
+                  }
+                ),
+                u == null ? void 0 : u.label
+              ]
+            },
+            c.value
+          );
+        })
+      }
+    ) : null;
+  }
+);
+M.displayName = "ChartLegend";
+function k(o, e, n) {
+  if (typeof e != "object" || e === null)
+    return;
+  const r = "payload" in e && typeof e.payload == "object" && e.payload !== null ? e.payload : void 0;
+  let a = n;
+  return n in e && typeof e[n] == "string" ? a = e[n] : r && n in r && typeof r[n] == "string" && (a = r[n]), a in o ? o[a] : o[n];
+}
+export {
+  S as ChartContainer,
+  y as ChartLegend,
+  M as ChartLegendContent,
+  E as ChartStyle,
+  q as ChartTooltip,
+  K as ChartTooltipContent
+};

package/Chart/index.d.ts

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

package/Chart/index.mjs

@@ -0,0 +1,9 @@
+import { ChartContainer as o, ChartLegend as r, ChartLegendContent as C, ChartStyle as n, ChartTooltip as a, ChartTooltipContent as h } from "./Chart.mjs";
+export {
+  o as ChartContainer,
+  r as ChartLegend,
+  C as ChartLegendContent,
+  n as ChartStyle,
+  a as ChartTooltip,
+  h as ChartTooltipContent
+};

package/Chart/package.json

@@ -0,0 +1,7 @@
+{
+  "sideEffects": false,
+  "main": "./index.mjs",
+  "module": "./index.mjs",
+  "default": "./index.mjs",
+  "types": "./index.d.ts"
+}

package/Checkbox/Checkbox.d.ts

@@ -0,0 +1,4 @@
+import * as React from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export { Checkbox };

package/Checkbox/Checkbox.mjs

@@ -0,0 +1,27 @@
+import { jsx as e } from "react/jsx-runtime";
+import * as s from "react";
+import * as r from "@radix-ui/react-checkbox";
+import { Check as c } from "lucide-react";
+import { cn as o } from "@oneplatformdev/utils";
+const d = s.forwardRef(({ className: i, ...t }, a) => /* @__PURE__ */ e(
+  r.Root,
+  {
+    ref: a,
+    className: o(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      i
+    ),
+    ...t,
+    children: /* @__PURE__ */ e(
+      r.Indicator,
+      {
+        className: o("flex items-center justify-center text-current"),
+        children: /* @__PURE__ */ e(c, { className: "h-4 w-4" })
+      }
+    )
+  }
+));
+d.displayName = r.Root.displayName;
+export {
+  d as Checkbox
+};

package/Checkbox/index.d.ts

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

package/Checkbox/index.mjs

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

package/Checkbox/package.json

@@ -0,0 +1,7 @@
+{
+  "sideEffects": false,
+  "main": "./index.mjs",
+  "module": "./index.mjs",
+  "default": "./index.mjs",
+  "types": "./index.d.ts"
+}

package/Collapsible/Collapsible.d.ts

@@ -0,0 +1,5 @@
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+declare const Collapsible: import('react').ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleProps & import('react').RefAttributes<HTMLDivElement>>;
+declare const CollapsibleTrigger: import('react').ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleTriggerProps & import('react').RefAttributes<HTMLButtonElement>>;
+declare const CollapsibleContent: import('react').ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleContentProps & import('react').RefAttributes<HTMLDivElement>>;
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };

package/Collapsible/Collapsible.mjs

@@ -0,0 +1,7 @@
+import * as l from "@radix-ui/react-collapsible";
+const o = l.Root, e = l.CollapsibleTrigger, i = l.CollapsibleContent;
+export {
+  o as Collapsible,
+  i as CollapsibleContent,
+  e as CollapsibleTrigger
+};

package/Collapsible/index.d.ts

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

package/Collapsible/index.mjs

@@ -0,0 +1,6 @@
+import { Collapsible as o, CollapsibleContent as i, CollapsibleTrigger as p } from "./Collapsible.mjs";
+export {
+  o as Collapsible,
+  i as CollapsibleContent,
+  p as CollapsibleTrigger
+};

package/Collapsible/package.json

@@ -0,0 +1,7 @@
+{
+  "sideEffects": false,
+  "main": "./index.mjs",
+  "module": "./index.mjs",
+  "default": "./index.mjs",
+  "types": "./index.d.ts"
+}

package/Combobox/Combobox.d.ts

@@ -0,0 +1,4 @@
+import { ComboboxProps } from './Combobox.types';
+import { FC } from 'react';
+
+export declare const Combobox: FC<ComboboxProps>;

package/Combobox/Combobox.mjs

@@ -0,0 +1,126 @@
+import { jsx as a, jsxs as t } from "react/jsx-runtime";
+import n, { useEffect as E } from "react";
+import { LoadingMask as I } from "../LoadingMask/LoadingMask.mjs";
+import { Popover as U, PopoverTrigger as _, PopoverContent as B } from "../Popover/Popover.mjs";
+import { Button as F } from "../Button/Button.mjs";
+import "../Button/buttonVariants.mjs";
+import { Command as G, CommandInput as M, CommandList as R, CommandEmpty as V, CommandGroup as W, CommandItem as X } from "../Command/Command.mjs";
+import { cn as g } from "@oneplatformdev/utils";
+import { useDebounceCallback as q } from "@oneplatformdev/hooks";
+import { X as z, ChevronsUpDown as A, Check as H } from "lucide-react";
+const te = (w) => {
+  var C;
+  const {
+    value: o,
+    onChange: y,
+    placeholder: x,
+    disabled: N,
+    searchLabel: S,
+    fetchOptions: L,
+    options: r,
+    emptyLabel: O = "No options"
+  } = w, [l, d] = n.useState(!1), [P, m] = n.useState(""), [p, h] = n.useState([]), [s, u] = n.useState(), [f, b] = n.useState(!1);
+  E(() => {
+    r != null && r.length && h(r);
+  }, [r]);
+  const j = async () => {
+    l || (v(), m(""));
+  }, v = async (e) => {
+    b(!0);
+    try {
+      const i = await L(e);
+      h(i);
+    } catch (i) {
+      console.error("Unexpected error while get option:", i);
+    } finally {
+      b(!1);
+    }
+  }, k = q(v, 1e3), D = (e) => {
+    m(e), k(e);
+  }, c = (e) => {
+    y(e.value), u(e);
+  }, T = () => {
+    c({ value: "", label: "" }), u(void 0);
+  };
+  return /* @__PURE__ */ a("div", { className: "w-full", children: /* @__PURE__ */ t(
+    U,
+    {
+      open: l,
+      onOpenChange: (e) => {
+        d(e), e && j();
+      },
+      children: [
+        /* @__PURE__ */ a(_, { asChild: !0, className: "border-border", children: /* @__PURE__ */ t(
+          F,
+          {
+            variant: "outline",
+            role: "combobox",
+            "aria-expanded": l,
+            className: g(
+              "w-full justify-between font-normal text-sm border bg-input",
+              l ? "border-2 border-sidebar-accent" : "border-border"
+            ),
+            disabled: N,
+            children: [
+              /* @__PURE__ */ a("span", { className: "truncate max-w-[calc(100%-1.5rem)] overflow-hidden whitespace-nowrap", children: o ? ((C = p.find((e) => e.value === o)) == null ? void 0 : C.label) || (s == null ? void 0 : s.label) : /* @__PURE__ */ a("span", { className: "text-gray-400", children: x }) }),
+              o ? /* @__PURE__ */ a(
+                z,
+                {
+                  className: "opacity-50 w-4 h-4 cursor-pointer hover:opacity-100",
+                  onClick: (e) => {
+                    e.stopPropagation(), T();
+                  }
+                }
+              ) : /* @__PURE__ */ a(A, { className: "opacity-50 w-4 h-4" })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ a(
+          B,
+          {
+            className: "w-[var(--radix-popper-anchor-width)] max-w-none p-0",
+            align: "start",
+            children: /* @__PURE__ */ t(G, { shouldFilter: !1, children: [
+              /* @__PURE__ */ a(
+                M,
+                {
+                  placeholder: S,
+                  value: P,
+                  onValueChange: D
+                }
+              ),
+              /* @__PURE__ */ t(R, { children: [
+                !f && /* @__PURE__ */ a(V, { children: O }),
+                /* @__PURE__ */ a(W, { children: f ? /* @__PURE__ */ a("div", { className: "flex justify-center", children: /* @__PURE__ */ a(I, {}) }) : p.map((e) => /* @__PURE__ */ t(
+                  X,
+                  {
+                    value: e.value,
+                    onSelect: () => {
+                      o === e.value ? c({ value: "", label: "" }) : c(e), d(!1);
+                    },
+                    children: [
+                      e.label,
+                      /* @__PURE__ */ a(
+                        H,
+                        {
+                          className: g(
+                            "ml-auto",
+                            o === e.value ? "opacity-100" : "opacity-0"
+                          )
+                        }
+                      )
+                    ]
+                  },
+                  e.value
+                )) })
+              ] })
+            ] })
+          }
+        )
+      ]
+    }
+  ) });
+};
+export {
+  te as Combobox
+};

package/Combobox/Combobox.types.d.ts

@@ -0,0 +1,15 @@
+export interface ComboboxOption {
+    value: string;
+    label: string;
+}
+export interface ComboboxProps {
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+    searchLabel?: string;
+    disabled?: boolean;
+    fetchOptions: (search?: string) => Promise<ComboboxOption[]>;
+    options?: ComboboxOption[];
+    /** CommandEmpty label*/
+    emptyLabel?: string;
+}

package/Combobox/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Combobox';
+export type * from './Combobox.types';

package/Combobox/index.mjs

@@ -0,0 +1,4 @@
+import { Combobox as m } from "./Combobox.mjs";
+export {
+  m as Combobox
+};

package/Combobox/package.json

@@ -0,0 +1,7 @@
+{
+  "sideEffects": false,
+  "main": "./index.mjs",
+  "module": "./index.mjs",
+  "default": "./index.mjs",
+  "types": "./index.d.ts"
+}

package/Command/Command.d.ts

@@ -0,0 +1,80 @@
+import { DialogProps } from '@radix-ui/react-dialog';
+import * as React from "react";
+declare const Command: React.ForwardRefExoticComponent<Omit<{
+    children?: React.ReactNode;
+} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
+    label?: string;
+    shouldFilter?: boolean;
+    filter?: (value: string, search: string, keywords?: string[]) => number;
+    defaultValue?: string;
+    value?: string;
+    onValueChange?: (value: string) => void;
+    loop?: boolean;
+    disablePointerSelection?: boolean;
+    vimBindings?: boolean;
+} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const CommandDialog: ({ children, ...props }: DialogProps) => import("react/jsx-runtime").JSX.Element;
+declare const CommandInput: React.ForwardRefExoticComponent<Omit<Omit<Pick<Pick<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof React.InputHTMLAttributes<HTMLInputElement>> & {
+    ref?: React.Ref<HTMLInputElement>;
+} & {
+    asChild?: boolean;
+}, "key" | "asChild" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "onChange" | "value" | "type"> & {
+    value?: string;
+    onValueChange?: (search: string) => void;
+} & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
+declare const CommandList: React.ForwardRefExoticComponent<Omit<{
+    children?: React.ReactNode;
+} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
+    label?: string;
+} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const CommandEmpty: React.ForwardRefExoticComponent<Omit<{
+    children?: React.ReactNode;
+} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const CommandGroup: React.ForwardRefExoticComponent<Omit<{
+    children?: React.ReactNode;
+} & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild">, "heading" | "value"> & {
+    heading?: React.ReactNode;
+    value?: string;
+    forceMount?: boolean;
+} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const CommandSeparator: React.ForwardRefExoticComponent<Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
+    alwaysRender?: boolean;
+} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const CommandItem: React.ForwardRefExoticComponent<Omit<{
+    children?: React.ReactNode;
+} & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild">, "onSelect" | "disabled" | "value"> & {
+    disabled?: boolean;
+    onSelect?: (value: string) => void;
+    value?: string;
+    keywords?: string[];
+    forceMount?: boolean;
+} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const CommandShortcut: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, CommandSeparator, };