@oneplatformdev/ui 0.0.1-beta.3 → 0.0.1-beta.30

package/Dropzone/index.mjs

@@ -0,0 +1,7 @@
+import { Dropzone as r } from "./Dropzone.mjs";
+import { D as T, a as _ } from "../DropzoneFilePreview-Dhtv8F4u.js";
+export {
+  T as DEFAULT_FILE_TYPES,
+  _ as DEFAULT_IMAGES_TYPES,
+  r as Dropzone
+};

package/Dropzone/package.json

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

package/DropzoneFilePreview-Dhtv8F4u.js

@@ -0,0 +1,67 @@
+import { jsx as l, jsxs as d } from "react/jsx-runtime";
+import { useState as m, useEffect as f } from "react";
+import { File as s } from "lucide-react";
+import { isFile as o } from "./Dropzone/DropzoneUtils.mjs";
+import { cn as c } from "@oneplatformdev/utils";
+const h = [
+  "application/msword",
+  "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+  "text/csv",
+  "text/plain",
+  "application/pdf"
+], u = [
+  "image/png",
+  "image/jpeg",
+  "image/jpg",
+  "image/webp",
+  "image/gif"
+], j = ({ item: e, styles: r }) => {
+  const [t, a] = m(null), p = o(e) && u.includes(e.type);
+  return f(() => {
+    let n = null;
+    if (o(e) && p) {
+      const i = new FileReader();
+      return i.onloadend = () => a(i.result), i.readAsDataURL(e), () => a(null);
+    } else {
+      if (typeof e == "string")
+        return n = new Image(), n.src = e, n.onload = () => a(e), n.onerror = () => a(null), () => {
+          n.onload = null, n.onerror = null;
+        };
+      a(null);
+    }
+    return () => a(null);
+  }, [e, p]), /* @__PURE__ */ l(
+    "div",
+    {
+      className: c(
+        "w-32 h-32 border border-gray-300 rounded-md overflow-hidden flex items-center justify-center",
+        r == null ? void 0 : r.previewWraper
+      ),
+      children: t ? /* @__PURE__ */ l(
+        "img",
+        {
+          src: t,
+          alt: o(e) ? e.name : "external-image",
+          className: c("w-full h-full object-cover", r == null ? void 0 : r.previewImage)
+        }
+      ) : /* @__PURE__ */ d(
+        "div",
+        {
+          className: c(
+            "flex flex-col items-center justify-center text-gray-500 text-sm p-2 text-center",
+            r == null ? void 0 : r.previewFile
+          ),
+          children: [
+            /* @__PURE__ */ l(s, { className: "w-6 h-6" }),
+            o(e) ? /* @__PURE__ */ l("span", { className: "text-xs break-all", children: e.name }) : /* @__PURE__ */ l("span", { className: "text-xs break-all", children: e })
+          ]
+        }
+      )
+    }
+  );
+};
+export {
+  h as D,
+  j as F,
+  u as a
+};

package/FormDropzone/FormDropzone.d.ts

@@ -0,0 +1,4 @@
+import { FormDropzoneProps } from './FormDropzone.types';
+import { FieldValues, UseFormReturn } from 'react-hook-form';
+
+export declare const FormDropzone: <Data extends FieldValues, Form extends UseFormReturn<Data>>(props: FormDropzoneProps<Data, Form>) => import("react/jsx-runtime").JSX.Element;

package/FormDropzone/FormDropzone.mjs

@@ -0,0 +1,26 @@
+import { jsx as o } from "react/jsx-runtime";
+import { FormControl as a } from "../Form/Form.mjs";
+import { FormRenderControl as l } from "../Form/FormRenderControl.mjs";
+import { Dropzone as f } from "../Dropzone/Dropzone.mjs";
+const h = (n) => {
+  const { form: e, label: m, name: t, ...p } = n;
+  return /* @__PURE__ */ o(
+    l,
+    {
+      form: e,
+      label: m,
+      name: t,
+      render: ({ field: r }) => /* @__PURE__ */ o(a, { children: /* @__PURE__ */ o(
+        f,
+        {
+          ...p,
+          ...r,
+          onChangeValue: r.onChange
+        }
+      ) })
+    }
+  );
+};
+export {
+  h as FormDropzone
+};

package/FormDropzone/FormDropzone.types.d.ts

@@ -0,0 +1,7 @@
+import { FormRenderControlExtendProps } from '../Form';
+import { DropzoneProps } from '../Dropzone';
+import { UseFormReturn } from 'react-hook-form';
+import { FieldValues } from 'react-hook-form/dist/types/fields';
+
+export interface FormDropzoneProps<Data extends FieldValues, Form extends UseFormReturn<Data>> extends FormRenderControlExtendProps<Data, Form>, DropzoneProps {
+}

package/FormDropzone/index.d.ts

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

package/FormDropzone/index.mjs

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

package/FormDropzone/package.json

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

package/FormInput/FormInput.mjs

@@ -1,18 +1,17 @@
 import { jsx as r } from "react/jsx-runtime";
 import { FormControl as l } from "../Form/Form.mjs";
-import { FormRenderControl as i } from "../Form/FormRenderControl.mjs";
-import "../Input/index.mjs";
-import { Input as u } from "../Input/Input.mjs";
-const d = (m) => {
+import { FormRenderControl as u } from "../Form/FormRenderControl.mjs";
+import { Input as a } from "../Input/Input.mjs";
+const F = (m) => {
   const { form: t, label: e, name: n, ...p } = m;
   return /* @__PURE__ */ r(
-    i,
+    u,
     {
       form: t,
       name: n,
       label: e,
       render: ({ field: o }) => /* @__PURE__ */ r(l, { children: /* @__PURE__ */ r(
-        u,
+        a,
         {
           ...o,
           value: o.value || "",
@@ -23,5 +22,5 @@ const d = (m) => {
   );
 };
 export {
-  d as FormInput
+  F as FormInput
 };

package/FormSelect/FormSelect.types.d.ts

@@ -1,7 +1,8 @@
+import { PartialOne } from '../../../utils/src';
 import { SelectProps } from '../Select';
 import { FormRenderControlExtendProps } from '../Form';
 import { UseFormReturn } from 'react-hook-form';
 import { FieldValues } from 'react-hook-form/dist/types/fields';
 
-export interface FormSelectProps<Data extends FieldValues, Form extends UseFormReturn<Data>, ExtendOptionData> extends FormRenderControlExtendProps<Data, Form>, SelectProps<ExtendOptionData> {
+export interface FormSelectProps<Data extends FieldValues, Form extends UseFormReturn<Data>, ExtendOptionData> extends FormRenderControlExtendProps<Data, Form>, PartialOne<SelectProps<ExtendOptionData>, 'onChange'> {
 }

package/Input/Input.mjs

@@ -1,61 +1,66 @@
-import { jsxs as c, jsx as s } from "react/jsx-runtime";
-import l, { useState as d } from "react";
-import { Eye as f, EyeOff as y } from "lucide-react";
-import { inputVariants as N } from "./inputVariants.mjs";
-import { cn as b } from "@oneplatformdev/utils";
-const p = l.forwardRef(
-  (t, e) => {
+import { jsxs as f, jsx as s } from "react/jsx-runtime";
+import u, { useState as N } from "react";
+import { Eye as g, EyeOff as b } from "lucide-react";
+import { inputVariants as v } from "./inputVariants.mjs";
+import { cn as h } from "@oneplatformdev/utils";
+const c = u.forwardRef(
+  (t, a) => {
     const {
-      className: a,
-      variant: r,
-      type: o,
-      slotProps: { input: n } = {},
-      ...u
-    } = t, { startAdornment: i } = n || {};
-    return /* @__PURE__ */ c("div", { className: "relative", children: [
-      !!i && /* @__PURE__ */ s("span", { className: "absolute left-[10px] top-1/2 -translate-y-1/2", children: i }),
+      className: e,
+      variant: o,
+      type: i,
+      slotProps: { input: l } = {},
+      onChange: m,
+      onTransform: n,
+      ...y
+    } = t, { startAdornment: p } = l || {};
+    return /* @__PURE__ */ f("div", { className: "relative", children: [
+      !!p && /* @__PURE__ */ s("span", { className: "absolute left-[10px] top-1/2 -translate-y-1/2", children: p }),
       /* @__PURE__ */ s(
         "input",
         {
-          type: o,
-          className: b(
-            N({ variant: r, className: a }),
-            !!i && "pl-8"
+          type: i,
+          className: h(
+            v({ variant: o, className: e }),
+            !!p && "pl-8"
           ),
-          ref: e,
-          ...u
+          ref: a,
+          ...y,
+          onChange: (r) => {
+            typeof (n == null ? void 0 : n(r.target.value, r)) == "string" && (r.target.value = n(r.target.value, r)), m && m(r);
+          }
         }
       )
     ] });
   }
 );
-p.displayName = "Input";
-const m = l.forwardRef(
-  (t, e) => {
-    const [a, r] = d(!1), o = a ? "text" : "password", n = () => {
-      r(!a);
+c.displayName = "Input";
+const d = u.forwardRef(
+  (t, a) => {
+    const [e, o] = N(!1), i = e ? "text" : "password", l = () => {
+      o(!e);
     };
-    return /* @__PURE__ */ c("div", { className: "relative", children: [
-      /* @__PURE__ */ s(p, { ...t, type: o, className: "pr-8", ref: e }),
-      /* @__PURE__ */ s(w, { isVisible: a, onClick: n })
+    return /* @__PURE__ */ f("div", { className: "relative", children: [
+      /* @__PURE__ */ s(c, { ...t, type: i, className: "pr-8", ref: a }),
+      /* @__PURE__ */ s(w, { isVisible: e, onClick: l })
     ] });
   }
 );
-m.displayName = "PasswordInput";
-const w = ({ isVisible: t, onClick: e }) => /* @__PURE__ */ s(
+d.displayName = "PasswordInput";
+const w = ({ isVisible: t, onClick: a }) => /* @__PURE__ */ s(
   "button",
   {
     type: "button",
-    onClick: e,
+    onClick: a,
     className: "absolute top-1/2 right-3 transform -translate-y-1/2",
-    children: t ? /* @__PURE__ */ s(f, { size: 16 }) : /* @__PURE__ */ s(y, { size: 16 })
+    children: t ? /* @__PURE__ */ s(g, { size: 16 }) : /* @__PURE__ */ s(b, { size: 16 })
   }
-), I = l.forwardRef(
-  ({ type: t, ...e }, a) => t === "password" ? /* @__PURE__ */ s(m, { type: t, ...e, ref: a }) : /* @__PURE__ */ s(p, { type: t, ...e, ref: a })
+), I = u.forwardRef(
+  ({ type: t, ...a }, e) => t === "password" ? /* @__PURE__ */ s(d, { type: t, ...a, ref: e }) : /* @__PURE__ */ s(c, { type: t, ...a, ref: e })
 );
 I.displayName = "Input";
 export {
-  p as BaseInput,
+  c as BaseInput,
   I as Input,
-  m as PasswordInput
+  d as PasswordInput
 };

package/Input/Input.types.d.ts

@@ -1,6 +1,6 @@
 import { inputVariants } from './inputVariants';
 import { VariantProps } from 'class-variance-authority';
-import { default as React, ReactNode } from 'react';
+import { default as React, ChangeEvent, ReactNode } from 'react';
 
 export interface InputSlotInputProps {
     startAdornment?: ReactNode;
@@ -10,4 +10,6 @@ export interface InputSlotProps {
 }
 export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>, VariantProps<typeof inputVariants> {
     slotProps?: InputSlotProps;
+    /** func transform event.target.value before onChange event call*/
+    onTransform?: (value: string, event: ChangeEvent<HTMLInputElement>) => string;
 }

package/Input/index.mjs

@@ -1,10 +1,7 @@
-import { BaseInput as a, Input as n, PasswordInput as r, Input as u } from "./Input.mjs";
-import { inputVariants as s } from "./inputVariants.mjs";
-e;
+import { BaseInput as u, Input as a, PasswordInput as n, Input as s } from "./Input.mjs";
 export {
-  a as BaseInput,
-  n as Input,
-  r as PasswordInput,
-  u as default,
-  s as inputVariants
+  u as BaseInput,
+  a as Input,
+  n as PasswordInput,
+  s as default
 };

package/Search/Search.mjs

@@ -1,10 +1,9 @@
 import { jsx as o } from "react/jsx-runtime";
 import { useState as S } from "react";
-import "../Input/index.mjs";
-import { useDebounceCallback as f } from "@oneplatformdev/hooks";
-import { cn as v } from "@oneplatformdev/utils";
-import { Input as d } from "../Input/Input.mjs";
-const k = (t) => {
+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) => {
   const {
     search: a,
     onChange: e,
@@ -12,20 +11,20 @@ const k = (t) => {
     placeholder: s = "Search",
     className: n,
     ...m
-  } = t, [i, l] = S(a), p = f(c, 1e3), h = (r) => {
+  } = t, [i, l] = S(a), h = v(c, 1e3), p = (r) => {
     const u = r.target.value;
-    l(u), e == null || e(r), p(r.target.value);
+    l(u), e == null || e(r), h(r.target.value);
   };
-  return /* @__PURE__ */ o("div", { className: v("space-y-4", n), children: /* @__PURE__ */ o(
-    d,
+  return /* @__PURE__ */ o("div", { className: d("space-y-4", n), children: /* @__PURE__ */ o(
+    f,
     {
       placeholder: s,
       value: i,
-      onChange: h,
+      onChange: p,
       ...m
     }
   ) });
 };
 export {
-  k as Search
+  j as Search
 };

package/Sidebar/Sidebar.mjs

@@ -6,13 +6,12 @@ import { PanelLeft as k } from "lucide-react";
 import { cn as d } from "@oneplatformdev/utils";
 import { Button as E } from "../Button/Button.mjs";
 import "../Button/buttonVariants.mjs";
-import "../Input/index.mjs";
-import { Separator as z } from "../Separator/Separator.mjs";
-import { Sheet as B, SheetContent as T } from "../Sheet/Sheet.mjs";
+import { Input as z } from "../Input/Input.mjs";
+import { Separator as B } from "../Separator/Separator.mjs";
+import { Sheet as T, SheetContent as A } from "../Sheet/Sheet.mjs";
 import { Skeleton as M } from "../Skeleton/Skeleton.mjs";
-import { TooltipProvider as A, TooltipTrigger as D, TooltipContent as O } from "../Tooltip/TooltipRoot.mjs";
-import { Tooltip as L } from "../Tooltip/Tooltip.mjs";
-import { Input as G } from "../Input/Input.mjs";
+import { TooltipProvider as D, TooltipTrigger as O, TooltipContent as L } from "../Tooltip/TooltipRoot.mjs";
+import { Tooltip as G } from "../Tooltip/Tooltip.mjs";
 const K = 768;
 function H(a = {}) {
   const {
@@ -67,7 +66,7 @@ const V = i.forwardRef(
       }),
       [y, g, x, c, p, u, w]
     );
-    return /* @__PURE__ */ r(R.Provider, { value: I, children: /* @__PURE__ */ r(A, { delayDuration: 0, children: /* @__PURE__ */ r(
+    return /* @__PURE__ */ r(R.Provider, { value: I, children: /* @__PURE__ */ r(D, { delayDuration: 0, children: /* @__PURE__ */ r(
       "div",
       {
         style: {
@@ -108,8 +107,8 @@ const U = i.forwardRef(
         ...s,
         children: n
       }
-    ) : m ? /* @__PURE__ */ r(B, { open: p, onOpenChange: u, ...s, children: /* @__PURE__ */ r(
-      T,
+    ) : m ? /* @__PURE__ */ r(T, { open: p, onOpenChange: u, ...s, children: /* @__PURE__ */ r(
+      A,
       {
         "data-sidebar": "sidebar",
         "data-mobile": "true",
@@ -229,7 +228,7 @@ const J = i.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ r(
 ));
 J.displayName = "SidebarInset";
 const Q = i.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ r(
-  G,
+  z,
   {
     ref: t,
     "data-sidebar": "input",
@@ -262,7 +261,7 @@ const ee = i.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ r(
 ));
 ee.displayName = "SidebarFooter";
 const ae = i.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ r(
-  z,
+  B,
   {
     ref: t,
     "data-sidebar": "separator",
@@ -396,10 +395,10 @@ const le = C(
     );
     return n ? (typeof n == "string" && (n = {
       children: n
-    }), /* @__PURE__ */ S(L, { children: [
-      /* @__PURE__ */ r(D, { asChild: !0, children: v }),
+    }), /* @__PURE__ */ S(G, { children: [
+      /* @__PURE__ */ r(O, { asChild: !0, children: v }),
       /* @__PURE__ */ r(
-        O,
+        L,
         {
           side: "right",
           align: "center",

package/Tabs/Tabs.d.ts

@@ -1,4 +1,5 @@
 import { TabsProps } from './Tabs.types';
-import { FC } from 'react';
+import { FC, PropsWithChildren } from 'react';
 
-export declare const Tabs: FC<TabsProps>;
+export declare const TabRender: FC<TabsProps>;
+export declare const Tabs: FC<PropsWithChildren<TabsProps>>;

package/Tabs/Tabs.mjs

@@ -1,9 +1,23 @@
-import { jsx as e } from "react/jsx-runtime";
-import { TabsRoot as n, TabsList as t, TabsTrigger as c } from "./TabsRoot.mjs";
-const p = (r) => {
-  const { tab: s, tabs: l, onChange: o } = r;
-  return /* @__PURE__ */ e(n, { value: s, onValueChange: o, children: /* @__PURE__ */ e(t, { className: "px-2 py-6 bg-[#E0E7FF] rounded-[6px]", children: l.map((a) => /* @__PURE__ */ e(c, { value: a.value, className: "h-8", children: a.label }, a.value)) }) });
+import { jsx as o, jsxs as c } from "react/jsx-runtime";
+import { Children as p } from "react";
+import { TabsContent as m, TabsRoot as b, TabsList as i, TabsTrigger as h } from "./TabsRoot.mjs";
+const T = (a) => {
+  const { tabs: s = [], contents: t } = a;
+  return p.map(t, (n, r) => {
+    var l;
+    if (!n || !s[r]) return null;
+    const e = (l = s[r]) == null ? void 0 : l.value, u = n.props || {};
+    return /* @__PURE__ */ o(m, { value: e, ...u, children: n }, e);
+  });
+}, f = (a) => {
+  const { tab: s, tabs: t = [], onChange: n, children: r } = a;
+  return /* @__PURE__ */ c(b, { value: s, onValueChange: n, children: [
+    /* @__PURE__ */ o(i, { className: "px-2 py-6 bg-[#E0E7FF] rounded-[6px]", children: t.map((e) => /* @__PURE__ */ o(h, { value: e.value, className: "h-8", children: e.label }, e.value)) }),
+    r,
+    !r && /* @__PURE__ */ o(T, { ...a })
+  ] });
 };
 export {
-  p as Tabs
+  T as TabRender,
+  f as Tabs
 };

package/Tabs/Tabs.types.d.ts

@@ -1,9 +1,12 @@
+import { ReactElement } from 'react';
+
 export interface TabItemProps {
     value: string;
     label: string;
 }
 export interface TabsProps {
     tabs: TabItemProps[];
-    tab: string;
-    onChange: (value: string) => void;
+    tab?: string;
+    onChange?: (value: string) => void;
+    contents?: ReactElement[];
 }

package/Tabs/index.mjs

@@ -1,9 +1,10 @@
-import { TabsContent as s, TabsList as t, TabsRoot as T, TabsTrigger as a } from "./TabsRoot.mjs";
-import { Tabs as e } from "./Tabs.mjs";
+import { TabsContent as T, TabsList as a, TabsRoot as b, TabsTrigger as e } from "./TabsRoot.mjs";
+import { TabRender as t, Tabs as n } from "./Tabs.mjs";
 export {
-  e as Tabs,
-  s as TabsContent,
-  t as TabsList,
-  T as TabsRoot,
-  a as TabsTrigger
+  t as TabRender,
+  n as Tabs,
+  T as TabsContent,
+  a as TabsList,
+  b as TabsRoot,
+  e as TabsTrigger
 };