@customafk/lunas-ui 0.0.2 → 0.0.3-b

package/dist/Atoms/Input/index.js

@@ -1,345 +1,5 @@
 // packages/Atoms/Input/index.tsx
-import {
-  forwardRef as forwardRef2,
-  memo as memo2,
-  useCallback,
-  useEffect,
-  useRef,
-  useState
-} from "react";
-
-// packages/utils/constants.ts
-var DEFAULT_ICON_SIZE = 24;
-
-// packages/Icons/Lucide2XIcon.tsx
-import { jsx } from "react/jsx-runtime";
-var Lucide2XIcon = (props) => {
-  const { color, size } = props;
-  return /* @__PURE__ */ jsx(
-    "svg",
-    {
-      xmlns: "http://www.w3.org/2000/svg",
-      width: size ?? DEFAULT_ICON_SIZE,
-      height: size ?? DEFAULT_ICON_SIZE,
-      viewBox: "0 0 16 16",
-      fill: "none",
-      ...props,
-      children: /* @__PURE__ */ jsx(
-        "path",
-        {
-          d: "M12 4L4 12M4 4L12 12",
-          stroke: color ?? "#434349",
-          strokeWidth: "1.5",
-          strokeLinecap: "round",
-          strokeLinejoin: "round"
-        }
-      )
-    }
-  );
-};
-Lucide2XIcon.displayName = "Lucide2XIcon";
-var Lucide2XIcon_default = Lucide2XIcon;
-
-// packages/Layout/Flex/index.tsx
-import { forwardRef, memo, useMemo } from "react";
-
-// packages/Layout/Flex/flexVariant.ts
-import { cva } from "class-variance-authority";
-var flexVariants = cva("flex flex-row", {
-  variants: {
-    wrap: {
-      nowrap: "flex-nowrap",
-      wrap: "flex-wrap",
-      "wrap-reverse": "flex-wrap-reverse"
-    },
-    justify: {
-      start: "justify-start",
-      end: "justify-end",
-      center: "justify-center",
-      between: "justify-between",
-      around: "justify-around",
-      normal: "justify-normal",
-      stretch: "justify-stretch",
-      evenly: "justify-evenly"
-    },
-    align: {
-      start: "items-start",
-      end: "items-end",
-      center: "items-center",
-      stretch: "items-stretch",
-      baseline: "items-baseline"
-    }
-  },
-  defaultVariants: {
-    wrap: "nowrap",
-    justify: "start",
-    align: "stretch"
-  }
-});
-var flexVariant_default = flexVariants;
-
-// packages/Layout/commons/index.ts
-import { cva as cva2 } from "class-variance-authority";
-var commonLayout = cva2("", {
-  variants: {
-    p: {
-      "0": "p-0",
-      "1": "p-1",
-      "2": "p-2",
-      "3": "p-3",
-      "4": "p-4",
-      "5": "p-5",
-      "6": "p-6",
-      "7": "p-7",
-      "8": "p-8",
-      "9": "p-9",
-      "10": "p-10"
-    },
-    px: {
-      "0": "px-0",
-      "1": "px-1",
-      "2": "px-2",
-      "3": "px-3",
-      "4": "px-4",
-      "5": "px-5",
-      "6": "px-6",
-      "7": "px-7",
-      "8": "px-8",
-      "9": "px-9",
-      "10": "px-10"
-    },
-    py: {
-      "0": "py-0",
-      "1": "py-1",
-      "2": "py-2",
-      "3": "py-3",
-      "4": "py-4",
-      "5": "py-5",
-      "6": "py-6",
-      "7": "py-7",
-      "8": "py-8",
-      "9": "py-9",
-      "10": "py-10"
-    },
-    pt: {
-      "0": "pt-0",
-      "1": "pt-1",
-      "2": "pt-2",
-      "3": "pt-3",
-      "4": "pt-4",
-      "5": "pt-5",
-      "6": "pt-6",
-      "7": "pt-7",
-      "8": "pt-8",
-      "9": "pt-9",
-      "10": "pt-10"
-    },
-    pr: {
-      "0": "pr-0",
-      "1": "pr-1",
-      "2": "pr-2",
-      "3": "pr-3",
-      "4": "pr-4",
-      "5": "pr-5",
-      "6": "pr-6",
-      "7": "pr-7",
-      "8": "pr-8",
-      "9": "pr-9",
-      "10": "pr-10"
-    },
-    pb: {
-      "0": "pb-0",
-      "1": "pb-1",
-      "2": "pb-2",
-      "3": "pb-3",
-      "4": "pb-4",
-      "5": "pb-5",
-      "6": "pb-6",
-      "7": "pb-7",
-      "8": "pb-8",
-      "9": "pb-9",
-      "10": "pb-10"
-    },
-    pl: {
-      "0": "pl-0",
-      "1": "pl-1",
-      "2": "pl-2",
-      "3": "pl-3",
-      "4": "pl-4",
-      "5": "pl-5",
-      "6": "pl-6",
-      "7": "pl-7",
-      "8": "pl-8",
-      "9": "pl-9",
-      "10": "pl-10"
-    },
-    gap: {
-      "0": "gap-0",
-      "1": "gap-1",
-      "2": "gap-2",
-      "3": "gap-3",
-      "4": "gap-4",
-      "5": "gap-5",
-      "6": "gap-6",
-      "7": "gap-7",
-      "8": "gap-8",
-      "9": "gap-9",
-      "10": "gap-10"
-    },
-    gapX: {
-      "0": "gap-x-0",
-      "1": "gap-x-1",
-      "2": "gap-x-2",
-      "3": "gap-x-3",
-      "4": "gap-x-4",
-      "5": "gap-x-5",
-      "6": "gap-x-6",
-      "7": "gap-x-7",
-      "8": "gap-x-8",
-      "9": "gap-x-9",
-      "10": "gap-x-10"
-    },
-    gapY: {
-      "0": "gap-y-0",
-      "1": "gap-y-1",
-      "2": "gap-y-2",
-      "3": "gap-y-3",
-      "4": "gap-y-4",
-      "5": "gap-y-5",
-      "6": "gap-y-6",
-      "7": "gap-y-7",
-      "8": "gap-y-8",
-      "9": "gap-y-9",
-      "10": "gap-y-10"
-    },
-    position: {
-      static: "static",
-      fixed: "fixed",
-      absolute: "absolute",
-      relative: "relative",
-      sticky: "sticky"
-    },
-    top: {
-      "0": "top-0",
-      "1": "top-1",
-      "2": "top-2",
-      "3": "top-3",
-      "4": "top-4",
-      "5": "top-5",
-      "6": "top-6",
-      "7": "top-7",
-      "8": "top-8",
-      "9": "top-9",
-      "-1": "-top-1",
-      "-2": "-top-2",
-      "-3": "-top-3",
-      "-4": "-top-4",
-      "-5": "-top-5",
-      "-6": "-top-6",
-      "-7": "-top-7",
-      "-8": "-top-8",
-      "-9": "-top-9"
-    },
-    right: {
-      "0": "right-0",
-      "1": "right-1",
-      "2": "right-2",
-      "3": "right-3",
-      "4": "right-4",
-      "5": "right-5",
-      "6": "right-6",
-      "7": "right-7",
-      "8": "right-8",
-      "9": "right-9",
-      "-1": "-right-1",
-      "-2": "-right-2",
-      "-3": "-right-3",
-      "-4": "-right-4",
-      "-5": "-right-5",
-      "-6": "-right-6",
-      "-7": "-right-7",
-      "-8": "-right-8",
-      "-9": "-right-9"
-    },
-    bottom: {
-      "0": "bottom-0",
-      "1": "bottom-1",
-      "2": "bottom-2",
-      "3": "bottom-3",
-      "4": "bottom-4",
-      "5": "bottom-5",
-      "6": "bottom-6",
-      "7": "bottom-7",
-      "8": "bottom-8",
-      "9": "bottom-9",
-      "-1": "-bottom-1",
-      "-2": "-bottom-2",
-      "-3": "-bottom-3",
-      "-4": "-bottom-4",
-      "-5": "-bottom-5",
-      "-6": "-bottom-6",
-      "-7": "-bottom-7",
-      "-8": "-bottom-8",
-      "-9": "-bottom-9"
-    },
-    left: {
-      "0": "left-0",
-      "1": "left-1",
-      "2": "left-2",
-      "3": "left-3",
-      "4": "left-4",
-      "5": "left-5",
-      "6": "left-6",
-      "7": "left-7",
-      "8": "left-8",
-      "9": "left-9",
-      "-1": "-left-1",
-      "-2": "-left-2",
-      "-3": "-left-3",
-      "-4": "-left-4",
-      "-5": "-left-5",
-      "-6": "-left-6",
-      "-7": "-left-7",
-      "-8": "-left-8",
-      "-9": "-left-9"
-    },
-    overflow: {
-      auto: "overflow-auto",
-      hidden: "overflow-hidden",
-      clip: "overflow-clip",
-      scroll: "overflow-scroll",
-      visible: "overflow-visible"
-    },
-    overflowX: {
-      auto: "overflow-x-auto",
-      hidden: "overflow-x-hidden",
-      clip: "overflow-x-clip",
-      scroll: "overflow-x-scroll",
-      visible: "overflow-x-visible"
-    },
-    overflowY: {
-      auto: "overflow-y-auto",
-      hidden: "overflow-y-hidden",
-      clip: "overflow-y-clip",
-      scroll: "overflow-y-scroll",
-      visible: "overflow-y-visible"
-    },
-    flexGrow: {
-      0: "grow-0",
-      1: "grow"
-    },
-    flexShrink: {
-      0: "shrink-0",
-      1: "shrink"
-    }
-  },
-  defaultVariants: {
-    position: "relative",
-    overflow: "visible",
-    flexGrow: 0,
-    flexShrink: 1
-  }
-});
+import { forwardRef, memo } from "react";
 
 // packages/tailwindTheme.ts
 var themes = {
@@ -585,222 +245,64 @@ var cn = (...inputs) => {
   return customTwMerge(clsx(inputs));
 };
 
-// packages/Layout/Flex/index.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
-var Flex = memo(
+// packages/Atoms/Input/index.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var Input = memo(
   forwardRef(
     ({
-      vertical = false,
-      wrap = "nowrap",
-      width = "fit",
-      height = "fit",
-      justify = "start",
-      align = "center",
-      gap,
-      gapX,
-      gapY,
-      p,
-      px,
-      py,
-      pt,
-      pr,
-      pb,
-      pl,
-      position,
-      top,
-      right,
-      bottom,
-      left,
-      flexGrow,
-      flexShrink,
-      children,
+      isErrored = false,
+      value,
+      placeholder = "",
+      icon,
       className,
+      inputClassName,
+      onChange,
+      onBlur,
+      onFocus,
       ...props
-    }, reference) => {
-      const generateStyle = useMemo(() => {
-        let widthValue = "fit";
-        let heightValue = "fit";
-        switch (width) {
-          case "full": {
-            widthValue = "100%";
-            break;
-          }
-          case "screen": {
-            widthValue = "100vw";
-            break;
-          }
-          case "auto": {
-            widthValue = "auto";
-            break;
-          }
-          case "fit": {
-            widthValue = "fit-content";
-            break;
-          }
-          default: {
-            widthValue = `${width}px`;
-            break;
-          }
-        }
-        switch (height) {
-          case "full": {
-            heightValue = "100%";
-            break;
-          }
-          case "screen": {
-            heightValue = "100vh";
-            break;
-          }
-          case "auto": {
-            heightValue = "auto";
-            break;
-          }
-          case "fit": {
-            heightValue = "fit-content";
-            break;
-          }
-          default: {
-            heightValue = `${height}px`;
-            break;
-          }
-        }
-        return {
-          width: widthValue,
-          height: heightValue
-        };
-      }, [width, height]);
-      return /* @__PURE__ */ jsx2(
-        "div",
-        {
-          ref: reference,
-          className: cn(
-            flexVariant_default({ wrap, justify, align }),
-            commonLayout({
-              position,
-              top,
-              right,
-              bottom,
-              left,
-              flexGrow,
-              flexShrink
-            }),
-            {
-              [`flex-col`]: vertical,
-              [`p-${p}`]: p,
-              [`px-${px}`]: px,
-              [`py-${py}`]: py,
-              [`pt-${pt}`]: pt,
-              [`pr-${pr}`]: pr,
-              [`pb-${pb}`]: pb,
-              [`pl-${pl}`]: pl,
-              [`gap-${gap}`]: gap,
-              [`gap-x-${gapX}`]: gapX,
-              [`gap-y-${gapY}`]: gapY
-            },
-            className
-          ),
-          style: generateStyle,
-          ...props,
-          children
-        }
-      );
-    }
-  )
-);
-Flex.displayName = "Flex";
-var Flex_default = Flex;
-
-// packages/Atoms/Input/index.tsx
-import { jsx as jsx3, jsxs } from "react/jsx-runtime";
-var Input = memo2(
-  forwardRef2(
-    ({ isErrored = false, placeholder = "", icon, className, onChange, ...props }, reference) => {
-      const inputReference = useRef(null);
-      const [isFocused, setIsFocused] = useState(false);
-      const [inputValue, setInputValue] = useState("");
-      const handleFocus = useCallback(() => {
-        setIsFocused(() => true);
-      }, []);
-      const handleBlur = useCallback(() => {
-        setIsFocused(() => false);
-      }, []);
-      const handleClear = useCallback(() => {
-        setInputValue(() => "");
-      }, []);
-      const handleInputChange = useCallback(
-        (event) => {
-          const {
-            target: { value }
-          } = event;
-          setInputValue(() => value);
-          onChange?.(event);
-        },
-        [onChange]
-      );
-      useEffect(() => {
-        if (isFocused && inputReference.current) {
-          inputReference.current.focus();
-        }
-        return void 0;
-      }, [isFocused]);
+    }, ref) => {
       return /* @__PURE__ */ jsxs(
         "div",
         {
-          ref: reference,
-          className: cn(
-            [
-              "relative flex flex-row items-center justify-start",
-              "rounded-md border border-solid border-neutral-300 px-2",
-              "bg-neutral-50",
-              "hover:border-ui-primary-300",
-              "cursor-text text-ui-note text-ui-text-900",
-              "transition-all duration-300 ease-in-out"
-            ],
-            {
-              "border-ui-primary-400 outline-ui-primary-200 ring-4 ring-ui-primary-200": isFocused,
-              "border-ui-destructive-300 bg-ui-destructive-50 hover:border-ui-destructive-300": isErrored,
-              "border-ui-destructive-400 outline-ui-destructive-200 ring-4 ring-ui-destructive-200": isErrored && isFocused
-            },
-            className
-          ),
-          onFocus: handleFocus,
-          onBlur: handleBlur,
+          ref,
+          className: cn("relative", isErrored && "bg-ui-destructive-50", className),
           ...props,
           children: [
-            /* @__PURE__ */ jsx3(
-              "div",
-              {
-                className: cn("flex h-8 items-center justify-center", {
-                  "mr-2 border-r border-neutral-300 pr-2": Boolean(icon)
-                }),
-                children: icon
-              }
-            ),
-            /* @__PURE__ */ jsx3(
+            /* @__PURE__ */ jsx(
               "input",
               {
-                ref: inputReference,
-                value: inputValue,
-                className: "grow bg-transparent text-sm caret-ui-primary-500 outline-none placeholder:text-ui-text-400",
-                onChange: handleInputChange,
-                placeholder
+                type: "text",
+                placeholder,
+                value,
+                className: cn(
+                  "w-full",
+                  "rounded border border-ui-border-400 bg-transparent",
+                  "px-3 py-1",
+                  "text-ui-note text-ui-text-500",
+                  "outline-none",
+                  "focus-within:text-ui-text-800",
+                  "focus-within:border-ui-primary-500",
+                  "focus-within:ring-4",
+                  "focus-within:ring-ui-primary-100",
+                  "transition-colors duration-300",
+                  icon && "pl-12",
+                  isErrored && "border-ui-destructive-500",
+                  isErrored && "focus-within:border-ui-destructive-500",
+                  isErrored && "focus-within:ring-ui-destructive-100",
+                  inputClassName
+                ),
+                onChange,
+                onBlur,
+                onFocus
               }
             ),
-            /* @__PURE__ */ jsx3(
-              Flex_default,
+            icon && /* @__PURE__ */ jsx(
+              "div",
               {
-                width: 16,
-                height: 16,
-                p: "0",
-                justify: "center",
-                className: cn([
-                  "opacity-1 z-50 rounded-full",
-                  {
-                    "bg-neutral-100": inputValue,
-                    "opacity-0": !isFocused
-                  }
-                ]),
-                children: /* @__PURE__ */ jsx3("button", { onClick: handleClear, children: /* @__PURE__ */ jsx3(Lucide2XIcon_default, { size: 12, color: inputValue ? "#A3A3A3" : "#D4D4D4" }) })
+                className: cn(
+                  "absolute top-1/2 flex h-[2.125rem] w-9 -translate-y-1/2 transform items-center justify-center border-r border-ui-border-400"
+                ),
+                children: icon
               }
             )
           ]

package/dist/Atoms/Label/index.js

@@ -1,3 +1,5 @@
+"use client";
+
 // packages/Atoms/Label/index.tsx
 import * as React from "react";
 

package/dist/Atoms/MenuItem/index.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { ReactNode } from 'react';
+
+interface IProps {
+    name?: string;
+    isActive?: boolean;
+    isDisabled?: boolean;
+    leftIcon?: ReactNode;
+    rightIcon?: ReactNode;
+    onClick?: () => void;
+}
+declare const _default: React.NamedExoticComponent<IProps>;
+
+export { _default as default };