@oneplatformdev/ui 0.0.1-beta.11 → 0.0.1-beta.110

package/LoadingMask/LoadingMask.mjs

@@ -1,59 +1,21 @@
-import { jsx as r, jsxs as o } from "react/jsx-runtime";
-const t = () => /* @__PURE__ */ r("div", { className: "flex flex-1 items-center justify-center", children: /* @__PURE__ */ o(
-  "svg",
-  {
-    className: "h-8 w-8 animate-spin text-gray-900 dark:text-gray-50",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    children: [
-      /* @__PURE__ */ r("path", { d: "M12 4.75V6.25", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
-      /* @__PURE__ */ r(
-        "path",
-        {
-          d: "M17.1475 6.8525L16.0625 7.9375",
-          stroke: "currentColor",
-          strokeWidth: "2",
-          strokeLinecap: "round",
-          strokeLinejoin: "round"
-        }
+import { jsx as e } from "react/jsx-runtime";
+import { RenderLoadingMask as r } from "./RenderLoadingMask.mjs";
+import { cn as o } from "@oneplatformdev/utils";
+const f = (t) => {
+  const { fullWidth: s = !1, className: i, ...n } = t;
+  return s ? /* @__PURE__ */ e(
+    "div",
+    {
+      ...n,
+      className: o(
+        "absolute inset-0",
+        "flex items-center justify-center",
+        i
       ),
-      /* @__PURE__ */ r("path", { d: "M19.25 12H17.75", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
-      /* @__PURE__ */ r(
-        "path",
-        {
-          d: "M17.1475 17.1475L16.0625 16.0625",
-          stroke: "currentColor",
-          strokeWidth: "2",
-          strokeLinecap: "round",
-          strokeLinejoin: "round"
-        }
-      ),
-      /* @__PURE__ */ r("path", { d: "M12 17.75V19.25", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
-      /* @__PURE__ */ r(
-        "path",
-        {
-          d: "M6.8525 17.1475L7.9375 16.0625",
-          stroke: "currentColor",
-          strokeWidth: "2",
-          strokeLinecap: "round",
-          strokeLinejoin: "round"
-        }
-      ),
-      /* @__PURE__ */ r("path", { d: "M4.75 12H6.25", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
-      /* @__PURE__ */ r(
-        "path",
-        {
-          d: "M6.8525 6.8525L7.9375 7.9375",
-          stroke: "currentColor",
-          strokeWidth: "2",
-          strokeLinecap: "round",
-          strokeLinejoin: "round"
-        }
-      )
-    ]
-  }
-) });
+      children: /* @__PURE__ */ e(r, {})
+    }
+  ) : /* @__PURE__ */ e(r, {});
+};
 export {
-  t as LoadingMask
+  f as LoadingMask
 };

package/LoadingMask/LoadingMask.types.d.ts

@@ -0,0 +1,5 @@
+import { HTMLAttributes } from 'react';
+
+export interface ILoadingMaskProps extends HTMLAttributes<HTMLDivElement> {
+    fullWidth?: boolean;
+}

package/LoadingMask/RenderLoadingMask.d.ts

@@ -0,0 +1,3 @@
+import { HTMLAttributes } from 'react';
+
+export declare const RenderLoadingMask: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;

package/LoadingMask/RenderLoadingMask.mjs

@@ -0,0 +1,108 @@
+import { jsx as r, jsxs as s } from "react/jsx-runtime";
+import { forwardRef as i } from "react";
+import { cn as d } from "@oneplatformdev/utils";
+const u = i((o, e) => {
+  const { className: t, ...n } = o;
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      ...n,
+      ref: e,
+      className: d("flex flex-1 items-center justify-center", t),
+      children: /* @__PURE__ */ s(
+        "svg",
+        {
+          className: "h-8 w-8 animate-spin text-gray-900 dark:text-gray-50",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          xmlns: "http://www.w3.org/2000/svg",
+          children: [
+            /* @__PURE__ */ r(
+              "path",
+              {
+                d: "M12 4.75V6.25",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+              }
+            ),
+            /* @__PURE__ */ r(
+              "path",
+              {
+                d: "M17.1475 6.8525L16.0625 7.9375",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+              }
+            ),
+            /* @__PURE__ */ r(
+              "path",
+              {
+                d: "M19.25 12H17.75",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+              }
+            ),
+            /* @__PURE__ */ r(
+              "path",
+              {
+                d: "M17.1475 17.1475L16.0625 16.0625",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+              }
+            ),
+            /* @__PURE__ */ r(
+              "path",
+              {
+                d: "M12 17.75V19.25",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+              }
+            ),
+            /* @__PURE__ */ r(
+              "path",
+              {
+                d: "M6.8525 17.1475L7.9375 16.0625",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+              }
+            ),
+            /* @__PURE__ */ r(
+              "path",
+              {
+                d: "M4.75 12H6.25",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+              }
+            ),
+            /* @__PURE__ */ r(
+              "path",
+              {
+                d: "M6.8525 6.8525L7.9375 7.9375",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+});
+export {
+  u as RenderLoadingMask
+};

package/LoadingMask/index.d.ts

@@ -1 +1,3 @@
 export { LoadingMask } from './LoadingMask';
+export { RenderLoadingMask } from './RenderLoadingMask';
+export type * from './LoadingMask.types';

package/LoadingMask/index.mjs

@@ -1,4 +1,6 @@
-import { LoadingMask as r } from "./LoadingMask.mjs";
+import { LoadingMask as a } from "./LoadingMask.mjs";
+import { RenderLoadingMask as d } from "./RenderLoadingMask.mjs";
 export {
-  r as LoadingMask
+  a as LoadingMask,
+  d as RenderLoadingMask
 };

package/Popover/Popover.d.ts

@@ -1,5 +1,5 @@
-import * as React from "react";
-import * as PopoverPrimitive from "@radix-ui/react-popover";
+import * as React from 'react';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
 declare const Popover: React.FC<PopoverPrimitive.PopoverProps>;
 declare const PopoverTrigger: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>>;
 declare const PopoverAnchor: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverAnchorProps & React.RefAttributes<HTMLDivElement>>;

package/Popover/Popover.mjs

@@ -1,24 +1,28 @@
 import { jsx as t } from "react/jsx-runtime";
-import * as n from "react";
+import * as s from "react";
 import * as o from "@radix-ui/react-popover";
-import { cn as s } from "@oneplatformdev/utils";
-const l = o.Root, c = o.Trigger, g = o.Anchor, m = n.forwardRef(({ className: e, align: a = "center", sideOffset: r = 4, ...d }, i) => /* @__PURE__ */ t(o.Portal, { children: /* @__PURE__ */ t(
+import { cn as m } from "@oneplatformdev/utils";
+const c = o.Root, v = o.Trigger, g = o.Anchor, p = s.forwardRef(({ className: e, align: a = "center", sideOffset: r = 4, style: d, ...n }, i) => /* @__PURE__ */ t(o.Portal, { children: /* @__PURE__ */ t(
   o.Content,
   {
     ref: i,
     align: a,
     sideOffset: r,
-    className: s(
+    className: m(
       "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       e
     ),
-    ...d
+    style: {
+      pointerEvents: "auto",
+      ...d
+    },
+    ...n
   }
 ) }));
-m.displayName = o.Content.displayName;
+p.displayName = o.Content.displayName;
 export {
-  l as Popover,
+  c as Popover,
   g as PopoverAnchor,
-  m as PopoverContent,
-  c as PopoverTrigger
+  p as PopoverContent,
+  v as PopoverTrigger
 };

package/Radio/Radio.d.ts

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

package/Radio/Radio.mjs

@@ -0,0 +1,12 @@
+import { jsx as a } from "react/jsx-runtime";
+import { RadioGroup as c, RadioGroupLabel as u } from "../RadioGroup/RadioGroup.mjs";
+const l = (e) => {
+  const { options: f = [], renderOption: r, ...s } = e;
+  return /* @__PURE__ */ a(c, { ...s, children: f.map((t) => {
+    const o = /* @__PURE__ */ a(u, { ...t }, t.value);
+    return !r || typeof r != "function" || !(r != null && r(t, u)) ? o : r == null ? void 0 : r(t, u);
+  }) });
+};
+export {
+  l as Radio
+};

package/Radio/Radio.types.d.ts

@@ -0,0 +1,11 @@
+import { RadioGroup, RadioGroupLabel } from '../RadioGroup/RadioGroup';
+import { ComponentPropsWithoutRef, FC, ReactNode } from 'react';
+
+export interface RadioOptionProps<Value extends string | number = string> {
+    value: Value;
+    label: ReactNode;
+}
+export interface RadioProps extends Partial<ComponentPropsWithoutRef<typeof RadioGroup>> {
+    options?: RadioOptionProps[];
+    renderOption?: (option: RadioOptionProps, DefaultOptionComponent: FC<ComponentPropsWithoutRef<typeof RadioGroupLabel>>) => ReactNode | null;
+}

package/Radio/index.d.ts

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

package/Radio/index.mjs

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

package/Radio/package.json

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

package/RadioGroup/RadioGroup.d.ts

@@ -1,5 +1,11 @@
-import * as React from "react";
-import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import * as React from 'react';
 declare const RadioGroup: React.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const RadioGroupItem: React.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupItemProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-export { RadioGroup, RadioGroupItem };
+declare const RadioGroupLabel: React.ForwardRefExoticComponent<{
+    label: React.ReactNode;
+    value: string;
+} & {
+    children?: React.ReactNode | undefined;
+} & React.RefAttributes<HTMLLabelElement>>;
+export { RadioGroup, RadioGroupItem, RadioGroupLabel };

package/RadioGroup/RadioGroup.mjs

@@ -1,31 +1,49 @@
-import { jsx as e } from "react/jsx-runtime";
+import { jsx as e, jsxs as l } from "react/jsx-runtime";
+import * as i from "@radix-ui/react-radio-group";
+import { Circle as c } from "lucide-react";
 import * as s from "react";
-import * as r from "@radix-ui/react-radio-group";
-import { Circle as m } from "lucide-react";
 import { cn as t } from "@oneplatformdev/utils";
-const d = s.forwardRef(({ className: o, ...i }, a) => /* @__PURE__ */ e(
-  r.Root,
+import { Label as p } from "../Label/Label.mjs";
+const f = s.forwardRef(({ className: r, ...a }, o) => /* @__PURE__ */ e(
+  i.Root,
   {
-    className: t("grid gap-2", o),
-    ...i,
-    ref: a
+    className: t("grid gap-0", r),
+    ...a,
+    ref: o
   }
 ));
-d.displayName = r.Root.displayName;
-const l = s.forwardRef(({ className: o, ...i }, a) => /* @__PURE__ */ e(
-  r.Item,
+f.displayName = i.Root.displayName;
+const m = s.forwardRef(({ className: r, ...a }, o) => /* @__PURE__ */ e(
+  i.Item,
   {
-    ref: a,
+    ref: o,
     className: t(
-      "aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
-      o
+      "aspect-square size-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+      r
     ),
-    ...i,
-    children: /* @__PURE__ */ e(r.Indicator, { className: "flex items-center justify-center", children: /* @__PURE__ */ e(m, { className: "h-3.5 w-3.5 fill-primary" }) })
+    ...a,
+    children: /* @__PURE__ */ e(i.Indicator, { className: "flex items-center justify-center ", children: /* @__PURE__ */ e(c, { className: "size-2.5 fill-primary" }) })
   }
 ));
-l.displayName = r.Item.displayName;
+m.displayName = i.Item.displayName;
+const n = s.forwardRef(({ value: r, label: a, children: o }, d) => /* @__PURE__ */ l(
+  p,
+  {
+    ref: d,
+    htmlFor: r,
+    className: "flex w-full items-start gap-3 font-normal py-3 cursor-pointer",
+    children: [
+      /* @__PURE__ */ e(m, { value: r, id: r }),
+      /* @__PURE__ */ l("div", { className: "flex flex-col w-full gap-3", children: [
+        /* @__PURE__ */ e("span", { className: "flex flex-col justify-start leading-[16px]", children: a }),
+        o
+      ] })
+    ]
+  }
+));
+n.displayName = "RadioGroupLabel";
 export {
-  d as RadioGroup,
-  l as RadioGroupItem
+  f as RadioGroup,
+  m as RadioGroupItem,
+  n as RadioGroupLabel
 };

package/RadioGroup/index.mjs

@@ -1,5 +1,6 @@
-import { RadioGroup as p, RadioGroupItem as a } from "./RadioGroup.mjs";
+import { RadioGroup as a, RadioGroupItem as p, RadioGroupLabel as d } from "./RadioGroup.mjs";
 export {
-  p as RadioGroup,
-  a as RadioGroupItem
+  a as RadioGroup,
+  p as RadioGroupItem,
+  d as RadioGroupLabel
 };

package/ScrollArea/ScrollArea.d.ts

@@ -1,5 +1,5 @@
-import * as React from "react";
-import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+import * as React from 'react';
 declare const ScrollArea: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const ScrollBar: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaScrollbarProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export { ScrollArea, ScrollBar };

package/ScrollArea/ScrollArea.mjs

@@ -1,38 +1,51 @@
-import { jsxs as d, jsx as e } from "react/jsx-runtime";
-import * as s from "react";
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
 import * as r from "@radix-ui/react-scroll-area";
-import { cn as t } from "@oneplatformdev/utils";
-const m = s.forwardRef(({ className: o, children: l, ...a }, c) => /* @__PURE__ */ d(
+import * as t from "react";
+import { cn as s } from "@oneplatformdev/utils";
+const m = t.forwardRef(({ className: o, children: l, ...a }, c) => /* @__PURE__ */ i(
   r.Root,
   {
     ref: c,
-    className: t("relative overflow-hidden", o),
+    className: s(
+      "relative overflow-hidden pr-2",
+      // '[&:has([data-orientation=vertical])]:pr-2',
+      o
+    ),
     ...a,
     children: [
       /* @__PURE__ */ e(r.Viewport, { className: "h-full w-full rounded-[inherit]", children: l }),
-      /* @__PURE__ */ e(i, {}),
+      /* @__PURE__ */ e(d, {}),
       /* @__PURE__ */ e(r.Corner, {})
     ]
   }
 ));
 m.displayName = r.Root.displayName;
-const i = s.forwardRef(({ className: o, orientation: l = "vertical", ...a }, c) => /* @__PURE__ */ e(
+const d = t.forwardRef(({ className: o, orientation: l = "vertical", ...a }, c) => /* @__PURE__ */ e(
   r.ScrollAreaScrollbar,
   {
     ref: c,
     orientation: l,
-    className: t(
+    className: s(
       "flex touch-none select-none transition-colors",
-      l === "vertical" && "h-full w-2.5 border-l border-l-transparent p-[1px]",
-      l === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+      "p-[1px] bg-[#DCDDE1] rounded-full",
+      l === "vertical" && "h-full w-1.5 border-l border-l-transparent",
+      l === "horizontal" && "h-1.5 flex-col border-t border-t-transparent",
       o
     ),
     ...a,
-    children: /* @__PURE__ */ e(r.ScrollAreaThumb, { className: "relative flex-1 rounded-full bg-border" })
+    children: /* @__PURE__ */ e(
+      r.ScrollAreaThumb,
+      {
+        className: s(
+          "relative flex-1 rounded-full bg-border",
+          "bg-[#FCFCFC]"
+        )
+      }
+    )
   }
 ));
-i.displayName = r.ScrollAreaScrollbar.displayName;
+d.displayName = r.ScrollAreaScrollbar.displayName;
 export {
   m as ScrollArea,
-  i as ScrollBar
+  d as ScrollBar
 };

package/Search/Search.d.ts

@@ -1,4 +1,3 @@
 import { SearchProps } from './Search.types';
-import { FC } from 'react';
 
-export declare const Search: FC<SearchProps>;
+export declare const Search: (props: SearchProps) => import("react/jsx-runtime").JSX.Element;

package/Search/Search.mjs

@@ -1,30 +1,42 @@
-import { jsx as o } from "react/jsx-runtime";
+import { jsx as r } from "react/jsx-runtime";
 import { useState as S } from "react";
-import { Input as f } from "../Input/Input.mjs";
-import { useDebounceCallback as v } from "@oneplatformdev/hooks";
-import { cn as d } from "@oneplatformdev/utils";
-const j = (t) => {
+import { Input as v } from "../Input/Input.mjs";
+import { useDebounceCallback as g } from "@oneplatformdev/hooks";
+import { cn as b } from "@oneplatformdev/utils";
+import { SearchIcon as x } from "lucide-react";
+import { LoadedIcon as I } from "../LoadedIcon/LoadedIcon.mjs";
+const A = (a) => {
   const {
-    search: a,
-    onChange: e,
-    onSearch: c,
+    search: c,
+    onChange: o,
+    onSearch: n,
     placeholder: s = "Search",
-    className: n,
-    ...m
-  } = t, [i, l] = S(a), h = v(c, 1e3), p = (r) => {
-    const u = r.target.value;
-    l(u), e == null || e(r), h(r.target.value);
+    className: m,
+    loading: i = !1,
+    slotProps: e,
+    ...p
+  } = a, [l, h] = S(c), u = g(n, 1e3), d = (t) => {
+    const f = t.target.value;
+    h(f), o == null || o(t), u(t.target.value);
   };
-  return /* @__PURE__ */ o("div", { className: d("space-y-4", n), children: /* @__PURE__ */ o(
-    f,
+  return /* @__PURE__ */ r("div", { className: b("space-y-4 min-w-[340px]", m), children: /* @__PURE__ */ r(
+    v,
     {
       placeholder: s,
-      value: i,
-      onChange: p,
-      ...m
+      value: l,
+      onChange: d,
+      ...p,
+      ...e || {},
+      slotProps: {
+        ...e || {},
+        input: {
+          startAdornment: /* @__PURE__ */ r(I, { loading: i, size: "sm", children: /* @__PURE__ */ r(x, {}) }),
+          ...(e == null ? void 0 : e.input) || {}
+        }
+      }
     }
   ) });
 };
 export {
-  j as Search
+  A as Search
 };

package/Search/Search.types.d.ts

@@ -3,4 +3,5 @@ import { InputProps } from '../Input';
 export interface SearchProps extends InputProps {
     search: string;
     onSearch: (value?: string) => void;
+    loading?: boolean;
 }