@oneplatformdev/ui 0.0.1-beta.4 → 0.0.1-beta.40

package/FormTextarea/FormTextarea.types.d.ts

@@ -1,7 +1,6 @@
 import { TextareaProps } from '../Textarea';
 import { FormRenderControlExtendProps } from '../Form';
-import { UseFormReturn } from 'react-hook-form';
 import { FieldValues } from 'react-hook-form/dist/types/fields';
 
-export interface FormTextareaProps<Data extends FieldValues, Form extends UseFormReturn<Data>> extends FormRenderControlExtendProps<Data, Form>, Omit<TextareaProps, 'form' | 'name'> {
+export interface FormTextareaProps<Data extends FieldValues> extends FormRenderControlExtendProps<Data>, Omit<TextareaProps, 'form' | 'name'> {
 }

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.d.ts

@@ -1,4 +1,3 @@
 export * from './Input';
 export { Input as default } from './Input';
-export * from './inputVariants';
 export type * from './Input.types';

package/Input/index.mjs

@@ -1,9 +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";
+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 as f } from "../Input/Input.mjs";
-import "../Input/inputVariants.mjs";
 import { useDebounceCallback as v } from "@oneplatformdev/hooks";
 import { cn as d } from "@oneplatformdev/utils";
-const k = (t) => {
+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 = v(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: 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/Select/Select.mjs

@@ -1,59 +1,59 @@
 import { jsxs as d, jsx as a } from "react/jsx-runtime";
 import { Button as f } from "../Button/Button.mjs";
 import "../Button/buttonVariants.mjs";
-import { SelectRoot as p, SelectContent as h, SelectItem as u, SelectTrigger as g, SelectValue as v } from "./SelectRoot.mjs";
-import { isValidReactElement as i } from "@oneplatformdev/utils";
+import { SelectRoot as g, SelectContent as p, SelectTrigger as h, SelectValue as v, SelectItem as u } from "./SelectRoot.mjs";
+import { isValidReactElement as c } from "@oneplatformdev/utils";
 const S = (o) => {
-  const { placeholder: t, renderTrigger: e } = o, n = /* @__PURE__ */ a(g, { children: /* @__PURE__ */ a(v, { placeholder: t }) });
-  return e && typeof e == "function" && i(e(o, n)) ? e(o, n) : n;
+  const { placeholder: l, renderTrigger: e, slotProps: t } = o, n = /* @__PURE__ */ a(h, { ...(t == null ? void 0 : t.triggerProps) || {}, children: /* @__PURE__ */ a(v, { placeholder: l }) });
+  return e && typeof e == "function" && c(e(o, n)) ? e(o, n) : n;
 }, C = (o) => {
-  const { renderOption: t, option: e, index: n, options: l, ...c } = o, r = /* @__PURE__ */ a(u, { value: e.value, children: e.label }, e.value);
-  return t && typeof t == "function" && i(t(
+  const { renderOption: l, option: e, index: t, options: n, ...i } = o, r = /* @__PURE__ */ a(u, { value: e.value, children: e.label }, e.value);
+  return l && typeof l == "function" && c(l(
     e,
+    t,
     n,
-    l,
-    { ...c, options: l },
+    { ...i, options: n },
     r
-  )) ? i(t(
+  )) ? c(l(
     e,
+    t,
     n,
-    l,
-    { ...c, options: l },
+    { ...i, options: n },
     r
-  ), u) ? i(t(
+  ), u) ? c(l(
     e,
+    t,
     n,
-    l,
-    { ...c, options: l },
+    { ...i, options: n },
     r
-  )) : /* @__PURE__ */ a(u, { value: e.value, children: t(
+  )) : /* @__PURE__ */ a(u, { value: e.value, children: l(
     e,
+    t,
     n,
-    l,
-    { ...c, options: l },
+    { ...i, options: n },
     r
   ) }, e.value) : r;
 }, T = (o) => {
   const {
-    value: t,
+    value: l,
     options: e,
-    onChange: n,
-    nullable: l = !1,
-    clearLabel: c = "Clear",
+    onChange: t,
+    nullable: n = !1,
+    clearLabel: i = "Clear",
     disabled: r
   } = o;
   return /* @__PURE__ */ d(
-    p,
+    g,
     {
-      value: t,
-      onValueChange: n,
+      value: l,
+      onValueChange: t,
       disabled: r,
       children: [
         /* @__PURE__ */ a(S, { ...o }),
-        /* @__PURE__ */ d(h, { children: [
-          l && /* @__PURE__ */ a(f, { className: "w-full px-2", variant: "secondary", size: "sm", onClick: () => {
-            n("");
-          }, children: c }),
+        /* @__PURE__ */ d(p, { children: [
+          n && /* @__PURE__ */ a(f, { className: "w-full px-2", variant: "secondary", size: "sm", onClick: () => {
+            t("");
+          }, children: i }),
           e.map((s, m) => /* @__PURE__ */ a(
             C,
             {

package/Select/Select.types.d.ts

@@ -1,5 +1,6 @@
-import { ReactNode } from 'react';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
 
+import * as SelectPrimitive from '@radix-ui/react-select';
 export interface SelectOption<ExtendOptionData> {
     value: string;
     label?: ReactNode;
@@ -26,4 +27,9 @@ export interface SelectProps<ExtendOptionData> {
     renderTrigger?: SelectRenderTrigger<ExtendOptionData>;
     /** Render custom option. */
     renderOption?: SelectRenderOption<ExtendOptionData>;
+    /** Select Slot props */
+    slotProps?: {
+        /** Select Default Trigger Props */
+        triggerProps?: ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>;
+    };
 }

package/Sidebar/Sidebar.mjs

@@ -7,7 +7,6 @@ import { cn as d } from "@oneplatformdev/utils";
 import { Button as E } from "../Button/Button.mjs";
 import "../Button/buttonVariants.mjs";
 import { Input as z } from "../Input/Input.mjs";
-import "../Input/inputVariants.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";

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
 };

package/Textarea/Textarea.d.ts

@@ -1,4 +1,4 @@
 import { TextareaProps } from './Textarea.types';
-import * as React from "react";
+import * as React from 'react';
 declare const Textarea: React.ForwardRefExoticComponent<Omit<TextareaProps, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;
 export { Textarea };

package/Textarea/Textarea.mjs

@@ -1,18 +1,74 @@
-import { jsx as t } from "react/jsx-runtime";
-import * as a from "react";
-import { cn as s } from "@oneplatformdev/utils";
-const i = a.forwardRef(({ className: e, ...r }, o) => /* @__PURE__ */ t(
-  "textarea",
-  {
-    className: s(
-      "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-      e
-    ),
-    ref: o,
-    ...r
+import { jsxs as u, Fragment as p, jsx as h } from "react/jsx-runtime";
+import * as v from "react";
+import { useId as w, useRef as z, useState as A, useImperativeHandle as N, useEffect as y } from "react";
+import { cn as d } from "@oneplatformdev/utils";
+import { useAutosizeTextArea as S } from "./useAutosizeTextArea.mjs";
+const T = v.forwardRef(
+  (m, c) => {
+    const {
+      className: f,
+      value: r = "",
+      maxHeight: i = Number.MAX_SAFE_INTEGER,
+      minHeight: o = 0,
+      resizeble: g = !0,
+      counter: s = !1,
+      id: n = "",
+      ...e
+    } = m, a = w(), t = z(null), [x, b] = A("");
+    return S({
+      textAreaRef: t,
+      triggerAutoSize: x,
+      maxHeight: i,
+      minHeight: o
+    }), N(c, () => ({
+      ...t.current ?? {},
+      textArea: t.current,
+      focus: () => {
+        var l;
+        return (l = t == null ? void 0 : t.current) == null ? void 0 : l.focus();
+      },
+      maxHeight: i,
+      minHeight: o
+    })), y(() => {
+      b(r);
+    }, [e == null ? void 0 : e.defaultValue, r]), /* @__PURE__ */ u(p, { children: [
+      /* @__PURE__ */ h(
+        "textarea",
+        {
+          id: n || a,
+          ...e,
+          ref: t,
+          value: r,
+          className: d(
+            "flex min-h-10 w-full px-3 py-2 text-base relative",
+            "rounded-md border border-input bg-transparent shadow-sm",
+            "placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+            g ? "resize" : "resize-none",
+            s && "pb-2",
+            f
+          )
+        }
+      ),
+      s && /* @__PURE__ */ u(
+        "label",
+        {
+          htmlFor: n || a,
+          className: d(
+            "w-full text-right inline-flex items-center justify-end",
+            "text-sm font-normal text-muted-foreground",
+            "leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+          ),
+          children: [
+            String(r || "").length,
+            " / ",
+            e == null ? void 0 : e.maxLength
+          ]
+        }
+      )
+    ] });
   }
-));
-i.displayName = "Textarea";
+);
+T.displayName = "Textarea";
 export {
-  i as Textarea
+  T as Textarea
 };

package/Textarea/Textarea.types.d.ts

@@ -1,4 +1,18 @@
-import { ComponentProps } from 'react';
+import { ComponentProps, RefObject } from 'react';
 
-export interface TextareaProps extends ComponentProps<'textarea'> {
+export interface IUseAutosizeTextAreaProps {
+    textAreaRef: RefObject<HTMLTextAreaElement | null>;
+    triggerAutoSize: string;
+    /**
+     * The minimum height of the textarea.
+     */
+    minHeight?: number;
+    /**
+     * The maximum height of the textarea.
+     */
+    maxHeight?: number;
+}
+export interface TextareaProps extends ComponentProps<'textarea'>, Pick<IUseAutosizeTextAreaProps, 'minHeight' | 'maxHeight'> {
+    resizeble?: boolean;
+    counter?: boolean;
 }

package/Textarea/useAutosizeTextArea.d.ts

@@ -0,0 +1,3 @@
+import { IUseAutosizeTextAreaProps } from '..';
+
+export declare const useAutosizeTextArea: ({ textAreaRef, triggerAutoSize, maxHeight, minHeight, }: IUseAutosizeTextAreaProps) => void;

package/Textarea/useAutosizeTextArea.mjs

@@ -0,0 +1,20 @@
+import * as f from "react";
+const u = ({
+  textAreaRef: r,
+  triggerAutoSize: l,
+  maxHeight: t = Number.MAX_SAFE_INTEGER,
+  minHeight: s = 0
+}) => {
+  const [c, i] = f.useState(!0);
+  f.useEffect(() => {
+    const e = r.current;
+    if (e) {
+      c && (e.style.minHeight = `${s + 0}px`, t > s && (e.style.maxHeight = `${t}px`), i(!1)), e.style.height = `${s + 0}px`;
+      const o = e.scrollHeight;
+      o > t ? e.style.height = `${t}px` : e.style.height = `${o + 0}px`;
+    }
+  }, [r.current, l]);
+};
+export {
+  u as useAutosizeTextArea
+};

package/Toast/toastVariants.mjs

@@ -6,9 +6,9 @@ const a = t(
       variant: {
         default: "border bg-background text-foreground",
         destructive: "destructive group border-destructive bg-destructive text-destructive-foreground",
-        success: "",
-        info: "",
-        update: ""
+        success: "border bg-primary text-white",
+        info: "border bg-blue-400 text-white",
+        update: "border bg-orange-400 text-white"
       }
     },
     defaultVariants: {