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

package/FormInput/FormInput.mjs

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

package/Input/Input.d.ts

@@ -1,4 +1,6 @@
 import { InputProps } from './Input.types';
-import * as React from "react";
-declare const Input: React.ForwardRefExoticComponent<Omit<InputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
-export { Input };
+import { default as React } from 'react';
+
+export declare const BaseInput: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+export declare const PasswordInput: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;

package/Input/Input.mjs

@@ -1,21 +1,61 @@
-import { jsx as i } from "react/jsx-runtime";
-import * as n from "react";
-import { cn as s } from "@oneplatformdev/utils";
-const l = n.forwardRef(
-  ({ className: e, type: r, ...o }, t) => /* @__PURE__ */ i(
-    "input",
-    {
-      type: r,
-      className: s(
-        "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground 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: t,
-      ...o
-    }
-  )
+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) => {
+    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 }),
+      /* @__PURE__ */ s(
+        "input",
+        {
+          type: o,
+          className: b(
+            N({ variant: r, className: a }),
+            !!i && "pl-8"
+          ),
+          ref: e,
+          ...u
+        }
+      )
+    ] });
+  }
 );
-l.displayName = "Input";
+p.displayName = "Input";
+const m = l.forwardRef(
+  (t, e) => {
+    const [a, r] = d(!1), o = a ? "text" : "password", n = () => {
+      r(!a);
+    };
+    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 })
+    ] });
+  }
+);
+m.displayName = "PasswordInput";
+const w = ({ isVisible: t, onClick: e }) => /* @__PURE__ */ s(
+  "button",
+  {
+    type: "button",
+    onClick: e,
+    className: "absolute top-1/2 right-3 transform -translate-y-1/2",
+    children: t ? /* @__PURE__ */ s(f, { size: 16 }) : /* @__PURE__ */ s(y, { 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.displayName = "Input";
 export {
-  l as Input
+  p as BaseInput,
+  I as Input,
+  m as PasswordInput
 };

package/Input/Input.types.d.ts

@@ -1,4 +1,13 @@
-import { ComponentProps } from 'react';
+import { inputVariants } from './inputVariants';
+import { VariantProps } from 'class-variance-authority';
+import { default as React, ReactNode } from 'react';
 
-export interface InputProps extends ComponentProps<'input'> {
+export interface InputSlotInputProps {
+    startAdornment?: ReactNode;
+}
+export interface InputSlotProps {
+    input?: InputSlotInputProps;
+}
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>, VariantProps<typeof inputVariants> {
+    slotProps?: InputSlotProps;
 }

package/Input/index.d.ts

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

package/Input/index.mjs

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

package/Input/inputVariants.d.ts

@@ -0,0 +1,3 @@
+export declare const inputVariants: (props?: ({
+    variant?: "default" | "grey" | null | undefined;
+} & import('class-variance-authority/dist/types').ClassProp) | undefined) => string;

package/Input/inputVariants.mjs

@@ -0,0 +1,18 @@
+import { cva as e } from "class-variance-authority";
+const r = e(
+  "flex h-10 w-full rounded-md border border-input px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-background",
+        grey: "bg-slate-200"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+export {
+  r as inputVariants
+};

package/LazyLoader/LazyLoader.d.ts

@@ -1,3 +1,20 @@
 import { default as React, JSX } from 'react';
 
+/**
+ * Component lazy load component.
+ * @public
+ * @see [Documentation](#)
+ * @example
+ * ```tsx
+ * import { lazy } from 'react';
+ * import { LazyLoader } from '@oneplatformdev/ui/LazyLoader';
+ *
+ * const ModuleComponentViewLazy = LazyLoader(
+ *  lazy(() => import('path/to/module').then(module => ({
+ *      default: module.ModuleComponentView,
+ *    })),
+ *  ),
+ * );
+ * ```
+ */
 export declare const LazyLoader: (Component: React.LazyExoticComponent<any>, showLoader?: boolean) => (props: any) => JSX.Element;

package/LazyLoader/index.d.ts

@@ -1 +1 @@
-export { LazyLoader } from './LazyLoader';
+export { LazyLoader as default, LazyLoader } from './LazyLoader';

package/LazyLoader/index.mjs

@@ -1,4 +1,5 @@
-import { LazyLoader as a } from "./LazyLoader.mjs";
+import { LazyLoader as o, LazyLoader as r } from "./LazyLoader.mjs";
 export {
-  a as LazyLoader
+  o as LazyLoader,
+  r as default
 };

package/Search/Search.mjs

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

package/Search/index.d.ts

@@ -1,2 +1,3 @@
 export * from './Search';
+export { Search as default } from './Search';
 export type * from './Search.types';

package/Search/index.mjs

@@ -1,4 +1,5 @@
-import { Search as o } from "./Search.mjs";
+import { Search as r, Search as c } from "./Search.mjs";
 export {
-  o as Search
+  r as Search,
+  c as default
 };

package/Sidebar/Sidebar.d.ts

@@ -25,7 +25,7 @@ declare const Sidebar: React.ForwardRefExoticComponent<Omit<React.ClassAttribute
 declare const SidebarTrigger: React.ForwardRefExoticComponent<Omit<import('../Button').ButtonProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 declare const SidebarRail: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 declare const SidebarInset: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const SidebarInput: React.ForwardRefExoticComponent<Omit<Omit<import('../Input').InputProps, "ref"> & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
+declare const SidebarInput: React.ForwardRefExoticComponent<Omit<import('../Input').InputProps & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
 declare const SidebarHeader: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const SidebarFooter: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const SidebarSeparator: React.ForwardRefExoticComponent<Omit<Omit<import('@radix-ui/react-separator').SeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/Sidebar/Sidebar.mjs

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