@dgshahr/ui-kit 0.0.1

package/dist/Button/index.cjs

@@ -0,0 +1,119 @@
+'use strict';
+
+require('../assets/Button.css');const jsxRuntime = require('react/jsx-runtime');
+const clsx = require('../clsx-BtxeOLZW.cjs');
+
+const variantStyle = {
+  primary: {
+    primary: "bg-primary-500 active:bg-primary-600 hover:bg-primary-300 text-white border-transparent",
+    success: "bg-success-500 active:bg-success-600 hover:bg-success-300 text-white border-transparent",
+    error: "bg-error-500 active:bg-error-600 hover:bg-error-300 text-white border-transparent",
+    warning: "bg-warning-500 active:bg-warning-600 hover:bg-warning-300 text-gray-900 border-transparent",
+    gray: "bg-gray-500 active:bg-gray-600 hover:bg-gray-300 text-white border-transparent"
+  },
+  secondary: {
+    primary: "text-primary-500 bg-gray-100 active:bg-gray-200 hover:bg-gray-50 disabled:bg-gray-100 border-transparent",
+    success: "text-gray-700 hover:text-gray-600 active:text-gray-800 bg-success-100 active:bg-success-200 hover:bg-success-50 disabled:bg-success-100 border-transparent",
+    error: "text-gray-700 hover:text-gray-600 active:text-gray-800 bg-error-100 active:bg-error-200 hover:bg-error-50 disabled:bg-error-100 border-transparent",
+    warning: "text-gray-700 hover:text-gray-600 active:text-gray-800 bg-warning-100 active:bg-warning-200 hover:bg-warning-50 disabled:bg-warning-100 border-transparent",
+    gray: "text-gray-700 hover:text-gray-600 active:text-gray-800 bg-gray-100 active:bg-gray-200 hover:bg-gray-50 disabled:bg-gray-100 border-transparent"
+  },
+  outline: {
+    primary: "text-primary-500 border-primary-300 hover:border-primary-200 active:border-primary-600 active:text-primary-600",
+    success: "text-success-600 hover:text-success-400 border-success-500 hover:border-success-400 active:border-success-600 active:text-success-800",
+    error: "text-error-600 hover:text-error-400 border-error-500 hover:border-error-400 active:border-error-600 active:text-error-800",
+    warning: "text-warning-600 hover:text-warning-400 border-warning-500 hover:border-warning-400 active:border-warning-600 active:text-warning-800",
+    gray: "text-gray-600 hover:text-gray-400 border-gray-500 hover:border-gray-400 active:border-gray-600 active:text-gray-800"
+  },
+  text: {
+    primary: "text-primary-500 hover:text-primary-300 border-transparent active:text-primary-700",
+    success: "text-success-700 hover:text-success-600 border-transparent active:text-success-800",
+    error: "text-error-700 hover:text-error-600 border-transparent active:text-error-800",
+    warning: "text-warning-700 hover:text-warning-600 border-transparent active:text-warning-800",
+    gray: "text-gray-700 hover:text-gray-600 border-transparent active:text-gray-800"
+  }
+};
+const sizeStyle = {
+  small: "button-small-icon py-2.5 px-4 font-button-small",
+  medium: "button-medium-icon py-3 px-5 font-button-medium",
+  large: "button-large-icon py-3 px-6 font-button-large"
+};
+const iconOnlyButtonSizeStyle = {
+  small: "button-small-icon p-[10px]",
+  medium: "button-medium-icon p-3",
+  large: "button-large-icon p-3"
+};
+
+const REMOVE_OPACITY_CLASS = "opacity-0";
+function styleButton({
+  variant = "primary",
+  color = "primary",
+  isFullWidth,
+  className,
+  size = "medium",
+  children
+}) {
+  const defaultClassName = "border relative rounded-lg min-w-max h-fit disabled:cursor-not-allowed transition-all duration-300 flex items-center disabled:opacity-40";
+  return [
+    defaultClassName,
+    isFullWidth ? "w-full justify-center" : "w-fit",
+    variantStyle[variant][color],
+    children ? sizeStyle[size] : iconOnlyButtonSizeStyle[size],
+    Number(className?.length) > 0 && className
+  ].slice().join(" ");
+}
+const Button = ({
+  variant = "primary",
+  color = "primary",
+  isFullWidth,
+  className,
+  size,
+  leftIcon,
+  rightIcon,
+  isLoading,
+  children,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      className: styleButton({
+        variant,
+        color,
+        isFullWidth,
+        className,
+        size,
+        children
+      }) + " rounded-lg",
+      ...props,
+      children: [
+        rightIcon && /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: clsx.clsx(
+              "block icon-button",
+              { "ml-2": children },
+              { [REMOVE_OPACITY_CLASS]: isLoading }
+            ),
+            children: rightIcon
+          }
+        ),
+        children && /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx.clsx({ [REMOVE_OPACITY_CLASS]: isLoading }), children }),
+        isLoading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-0 left-0 w-full h-full flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "dot-flashing" }) }),
+        leftIcon && /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: clsx.clsx(
+              "block icon-button",
+              { "mr-2": children },
+              { [REMOVE_OPACITY_CLASS]: isLoading }
+            ),
+            children: leftIcon
+          }
+        )
+      ]
+    }
+  );
+};
+
+module.exports = Button;

package/dist/Button/index.d.ts

@@ -0,0 +1,13 @@
+import { FC, PropsWithChildren } from 'react';
+export interface ButtonProps extends React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
+    variant?: 'primary' | 'secondary' | 'outline' | 'text';
+    color?: 'primary' | 'warning' | 'error' | 'success' | 'gray';
+    isFullWidth?: boolean;
+    size?: 'small' | 'medium' | 'large';
+    leftIcon?: JSX.Element;
+    rightIcon?: JSX.Element;
+    isLoading?: boolean;
+}
+declare const Button: FC<PropsWithChildren<ButtonProps>>;
+export default Button;
+//# sourceMappingURL=index.d.ts.map

package/dist/Button/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/Button/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAInD,OAAO,cAAc,CAAC;AAEtB,MAAM,WAAW,WACf,SAAQ,KAAK,CAAC,iBAAiB,CAC7B,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAC7C,iBAAiB,CAClB;IACD,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,MAAM,CAAC;IACvD,KAAK,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;IAC7D,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AA0BD,QAAA,MAAM,MAAM,EAAE,EAAE,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAwD9C,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/dist/Button/index.js

@@ -0,0 +1,117 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { c as clsx } from '../clsx-ChV9xqsO.js';
+
+import '../assets/Button.css';const variantStyle = {
+  primary: {
+    primary: "bg-primary-500 active:bg-primary-600 hover:bg-primary-300 text-white border-transparent",
+    success: "bg-success-500 active:bg-success-600 hover:bg-success-300 text-white border-transparent",
+    error: "bg-error-500 active:bg-error-600 hover:bg-error-300 text-white border-transparent",
+    warning: "bg-warning-500 active:bg-warning-600 hover:bg-warning-300 text-gray-900 border-transparent",
+    gray: "bg-gray-500 active:bg-gray-600 hover:bg-gray-300 text-white border-transparent"
+  },
+  secondary: {
+    primary: "text-primary-500 bg-gray-100 active:bg-gray-200 hover:bg-gray-50 disabled:bg-gray-100 border-transparent",
+    success: "text-gray-700 hover:text-gray-600 active:text-gray-800 bg-success-100 active:bg-success-200 hover:bg-success-50 disabled:bg-success-100 border-transparent",
+    error: "text-gray-700 hover:text-gray-600 active:text-gray-800 bg-error-100 active:bg-error-200 hover:bg-error-50 disabled:bg-error-100 border-transparent",
+    warning: "text-gray-700 hover:text-gray-600 active:text-gray-800 bg-warning-100 active:bg-warning-200 hover:bg-warning-50 disabled:bg-warning-100 border-transparent",
+    gray: "text-gray-700 hover:text-gray-600 active:text-gray-800 bg-gray-100 active:bg-gray-200 hover:bg-gray-50 disabled:bg-gray-100 border-transparent"
+  },
+  outline: {
+    primary: "text-primary-500 border-primary-300 hover:border-primary-200 active:border-primary-600 active:text-primary-600",
+    success: "text-success-600 hover:text-success-400 border-success-500 hover:border-success-400 active:border-success-600 active:text-success-800",
+    error: "text-error-600 hover:text-error-400 border-error-500 hover:border-error-400 active:border-error-600 active:text-error-800",
+    warning: "text-warning-600 hover:text-warning-400 border-warning-500 hover:border-warning-400 active:border-warning-600 active:text-warning-800",
+    gray: "text-gray-600 hover:text-gray-400 border-gray-500 hover:border-gray-400 active:border-gray-600 active:text-gray-800"
+  },
+  text: {
+    primary: "text-primary-500 hover:text-primary-300 border-transparent active:text-primary-700",
+    success: "text-success-700 hover:text-success-600 border-transparent active:text-success-800",
+    error: "text-error-700 hover:text-error-600 border-transparent active:text-error-800",
+    warning: "text-warning-700 hover:text-warning-600 border-transparent active:text-warning-800",
+    gray: "text-gray-700 hover:text-gray-600 border-transparent active:text-gray-800"
+  }
+};
+const sizeStyle = {
+  small: "button-small-icon py-2.5 px-4 font-button-small",
+  medium: "button-medium-icon py-3 px-5 font-button-medium",
+  large: "button-large-icon py-3 px-6 font-button-large"
+};
+const iconOnlyButtonSizeStyle = {
+  small: "button-small-icon p-[10px]",
+  medium: "button-medium-icon p-3",
+  large: "button-large-icon p-3"
+};
+
+const REMOVE_OPACITY_CLASS = "opacity-0";
+function styleButton({
+  variant = "primary",
+  color = "primary",
+  isFullWidth,
+  className,
+  size = "medium",
+  children
+}) {
+  const defaultClassName = "border relative rounded-lg min-w-max h-fit disabled:cursor-not-allowed transition-all duration-300 flex items-center disabled:opacity-40";
+  return [
+    defaultClassName,
+    isFullWidth ? "w-full justify-center" : "w-fit",
+    variantStyle[variant][color],
+    children ? sizeStyle[size] : iconOnlyButtonSizeStyle[size],
+    Number(className?.length) > 0 && className
+  ].slice().join(" ");
+}
+const Button = ({
+  variant = "primary",
+  color = "primary",
+  isFullWidth,
+  className,
+  size,
+  leftIcon,
+  rightIcon,
+  isLoading,
+  children,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      className: styleButton({
+        variant,
+        color,
+        isFullWidth,
+        className,
+        size,
+        children
+      }) + " rounded-lg",
+      ...props,
+      children: [
+        rightIcon && /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: clsx(
+              "block icon-button",
+              { "ml-2": children },
+              { [REMOVE_OPACITY_CLASS]: isLoading }
+            ),
+            children: rightIcon
+          }
+        ),
+        children && /* @__PURE__ */ jsx("div", { className: clsx({ [REMOVE_OPACITY_CLASS]: isLoading }), children }),
+        isLoading && /* @__PURE__ */ jsx("div", { className: "absolute top-0 left-0 w-full h-full flex items-center justify-center", children: /* @__PURE__ */ jsx("div", { className: "dot-flashing" }) }),
+        leftIcon && /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: clsx(
+              "block icon-button",
+              { "mr-2": children },
+              { [REMOVE_OPACITY_CLASS]: isLoading }
+            ),
+            children: leftIcon
+          }
+        )
+      ]
+    }
+  );
+};
+
+export { Button as default };

package/dist/Button/variants.d.ts

@@ -0,0 +1,5 @@
+import { ButtonProps } from '.';
+export declare const variantStyle: Record<Required<ButtonProps>['variant'], Record<Required<ButtonProps>['color'], string>>;
+export declare const sizeStyle: Record<Required<ButtonProps>['size'], string>;
+export declare const iconOnlyButtonSizeStyle: Record<Required<ButtonProps>['size'], string>;
+//# sourceMappingURL=variants.d.ts.map

package/dist/Button/variants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"variants.d.ts","sourceRoot":"","sources":["../../src/components/Button/variants.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,GAAG,CAAC;AAErC,eAAO,MAAM,YAAY,EAAE,MAAM,CAC/B,QAAQ,CAAC,WAAW,CAAC,CAAC,SAAS,CAAC,EAChC,MAAM,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC,CAyC/C,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,MAAM,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC,MAAM,CAAC,EAAE,MAAM,CAInE,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,MAAM,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC,MAAM,CAAC,EAAE,MAAM,CAIjF,CAAC"}

package/dist/Divider/index.cjs

@@ -0,0 +1,25 @@
+'use strict';
+
+require('../assets/styles.css');const jsxRuntime = require('react/jsx-runtime');
+;/* empty css                   */
+
+function styleDivider({ type, size = "thin", color = "gray", className }) {
+  const typeClassName = type === "horizontal" ? "w-full" : "h-full";
+  const sizeClassName = {
+    horizontal: {
+      thin: "h-[1px]",
+      thick: "h-1"
+    },
+    vertical: {
+      thin: "w-[1px]",
+      thick: "w-1"
+    }
+  };
+  const colorClassName = color === "gray" ? "bg-gray-200" : "bg-gray-100";
+  return [typeClassName, sizeClassName[type][size], colorClassName, className ?? ""].slice().join(" ");
+}
+const Divider = (props) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styleDivider(props) });
+};
+
+module.exports = Divider;

package/dist/Divider/index.d.ts

@@ -0,0 +1,9 @@
+interface DividerProps {
+    type: 'horizontal' | 'vertical';
+    size?: 'thin' | 'thick';
+    color?: 'white' | 'gray';
+    className?: string;
+}
+declare const Divider: (props: DividerProps) => import("react/jsx-runtime").JSX.Element;
+export default Divider;
+//# sourceMappingURL=index.d.ts.map

package/dist/Divider/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/Divider/index.tsx"],"names":[],"mappings":"AAAA,OAAO,kBAAkB,CAAC;AAE1B,UAAU,YAAY;IACpB,IAAI,EAAE,YAAY,GAAG,UAAU,CAAC;IAChC,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACxB,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA0BD,QAAA,MAAM,OAAO,UAAW,YAAY,4CAEnC,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/dist/Divider/index.js

@@ -0,0 +1,23 @@
+import { jsx } from 'react/jsx-runtime';
+import '../assets/styles.css';/* empty css                 */
+
+function styleDivider({ type, size = "thin", color = "gray", className }) {
+  const typeClassName = type === "horizontal" ? "w-full" : "h-full";
+  const sizeClassName = {
+    horizontal: {
+      thin: "h-[1px]",
+      thick: "h-1"
+    },
+    vertical: {
+      thin: "w-[1px]",
+      thick: "w-1"
+    }
+  };
+  const colorClassName = color === "gray" ? "bg-gray-200" : "bg-gray-100";
+  return [typeClassName, sizeClassName[type][size], colorClassName, className ?? ""].slice().join(" ");
+}
+const Divider = (props) => {
+  return /* @__PURE__ */ jsx("div", { className: styleDivider(props) });
+};
+
+export { Divider as default };

package/dist/Form/Checkbox/index.cjs

@@ -0,0 +1,72 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const clsx = require('../../clsx-BtxeOLZW.cjs');
+const SelectableInputWrapper = require('../../SelectableInputWrapper-D2aYQb9J.cjs');
+
+const Minus4Icon = (props) => /* @__PURE__ */ jsxRuntime.jsx(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    ...props,
+    children: /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        fill: "currentColor",
+        d: "M6 11a.75.75 0 0 0 0 1.5zm12 1.5a.75.75 0 0 0 0-1.5zm-12 0h12V11H6z"
+      }
+    )
+  }
+);
+
+const CheckmarkIcon = (props) => /* @__PURE__ */ jsxRuntime.jsx(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    ...props,
+    children: /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        fill: "currentColor",
+        d: "M9.613 17.57a.75.75 0 0 1-.53-.22l-4.375-4.376a.75.75 0 0 1 1.06-1.06l3.845 3.844 9.1-9.1a.75.75 0 1 1 1.06 1.061l-9.635 9.63a.75.75 0 0 1-.525.22"
+      }
+    )
+  }
+);
+
+const Checkbox = (props) => {
+  const { className, isIndeterminate, ...rest } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx(SelectableInputWrapper.SelectableInputWrapper, { ...rest, children: ({ inputClassName, checkedInputClassName }) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        type: "checkbox",
+        className: clsx.clsx("rounded", inputClassName, className),
+        ...rest
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: checkedInputClassName, children: isIndeterminate ? /* @__PURE__ */ jsxRuntime.jsx(
+      Minus4Icon,
+      {
+        width: 16,
+        height: 16
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsx(
+      CheckmarkIcon,
+      {
+        width: 16,
+        height: 16
+      }
+    ) })
+  ] }) });
+};
+
+module.exports = Checkbox;

package/dist/Form/Checkbox/index.d.ts

@@ -0,0 +1,8 @@
+import { SelectableInputBaseUnionProps } from '../Wrappers/SelectableInputWrapper/SelectableInputWrapper';
+import { DetailedHTMLProps, InputHTMLAttributes } from 'react';
+type CheckboxProps = SelectableInputBaseUnionProps & Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, 'type'> & {
+    isIndeterminate?: boolean;
+};
+declare const Checkbox: (props: CheckboxProps) => import("react/jsx-runtime").JSX.Element;
+export default Checkbox;
+//# sourceMappingURL=index.d.ts.map

package/dist/Form/Checkbox/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Form/Checkbox/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,2DAA2D,CAAC;AAC/G,OAAO,KAAK,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAKpE,KAAK,aAAa,GAAG,6BAA6B,GAChD,IAAI,CAAC,iBAAiB,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,gBAAgB,CAAC,EAAE,MAAM,CAAC,GAAG;IACzF,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC;AAEJ,QAAA,MAAM,QAAQ,UAAW,aAAa,4CA4BrC,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/Form/Checkbox/index.js

@@ -0,0 +1,70 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { c as clsx } from '../../clsx-ChV9xqsO.js';
+import { S as SelectableInputWrapper } from '../../SelectableInputWrapper-DAj8v1nv.js';
+
+const Minus4Icon = (props) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    ...props,
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        fill: "currentColor",
+        d: "M6 11a.75.75 0 0 0 0 1.5zm12 1.5a.75.75 0 0 0 0-1.5zm-12 0h12V11H6z"
+      }
+    )
+  }
+);
+
+const CheckmarkIcon = (props) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    ...props,
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        fill: "currentColor",
+        d: "M9.613 17.57a.75.75 0 0 1-.53-.22l-4.375-4.376a.75.75 0 0 1 1.06-1.06l3.845 3.844 9.1-9.1a.75.75 0 1 1 1.06 1.061l-9.635 9.63a.75.75 0 0 1-.525.22"
+      }
+    )
+  }
+);
+
+const Checkbox = (props) => {
+  const { className, isIndeterminate, ...rest } = props;
+  return /* @__PURE__ */ jsx(SelectableInputWrapper, { ...rest, children: ({ inputClassName, checkedInputClassName }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "checkbox",
+        className: clsx("rounded", inputClassName, className),
+        ...rest
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: checkedInputClassName, children: isIndeterminate ? /* @__PURE__ */ jsx(
+      Minus4Icon,
+      {
+        width: 16,
+        height: 16
+      }
+    ) : /* @__PURE__ */ jsx(
+      CheckmarkIcon,
+      {
+        width: 16,
+        height: 16
+      }
+    ) })
+  ] }) });
+};
+
+export { Checkbox as default };

package/dist/Form/Input/index.cjs

@@ -0,0 +1,182 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const clsx = require('../../clsx-BtxeOLZW.cjs');
+const react = require('react');
+const TextFieldWrapper = require('../../TextFieldWrapper-C80myx6j.cjs');
+
+const CloseSquareIcon = (props) => /* @__PURE__ */ jsxRuntime.jsxs(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          fill: "currentColor",
+          fillRule: "evenodd",
+          d: "m15.456 9.595-5.852 5.852-1.061-1.06 5.853-5.853z",
+          clipRule: "evenodd"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          fill: "currentColor",
+          fillRule: "evenodd",
+          d: "m9.6 8.532 5.856 5.858-1.06 1.06-5.857-5.857z",
+          clipRule: "evenodd"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          fill: "currentColor",
+          fillRule: "evenodd",
+          d: "M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12m10-8.5a8.5 8.5 0 1 0 0 17 8.5 8.5 0 0 0 0-17",
+          clipRule: "evenodd"
+        }
+      )
+    ]
+  }
+);
+
+const EyeIcon = (props) => /* @__PURE__ */ jsxRuntime.jsxs(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          fill: "currentColor",
+          d: "M12.247 20.812c-4.033 0-7.654-2.828-9.686-7.558a.75.75 0 0 1 0-.592c2.034-4.732 5.655-7.557 9.687-7.557s7.657 2.825 9.69 7.557a.75.75 0 0 1 0 .592c-2.032 4.73-5.653 7.554-9.685 7.557zm-8.182-7.853c1.806 3.983 4.846 6.352 8.18 6.352 3.334.002 6.373-2.369 8.18-6.352-1.808-3.986-4.848-6.354-8.182-6.354s-6.37 2.368-8.176 6.354z"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          fill: "currentColor",
+          d: "M12.247 16.789a3.825 3.825 0 1 1 0-7.651 3.825 3.825 0 0 1 0 7.65m0-6.152a2.326 2.326 0 1 0 0 4.651 2.326 2.326 0 0 0 0-4.651"
+        }
+      )
+    ]
+  }
+);
+
+const HideIcon = (props) => /* @__PURE__ */ jsxRuntime.jsx(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    ...props,
+    children: /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        fill: "currentColor",
+        fillRule: "evenodd",
+        d: "M20.417 3.22a.75.75 0 0 1 0 1.06L4.643 20.055a.744.744 0 0 1-1.06 0 .75.75 0 0 1 0-1.06l1.972-1.971c-1.413-1.293-2.613-3.036-3.493-5.089a.75.75 0 0 1 0-.593C3.082 8.977 4.52 7.02 6.22 5.683c3.292-2.606 7.621-2.744 11.048-.375l2.088-2.088a.75.75 0 0 1 1.06 0m-.37 4.82c.724.962 1.36 2.073 1.891 3.299a.74.74 0 0 1 0 .595C19.842 16.79 16.128 19.69 12 19.69a8.8 8.8 0 0 1-2.769-.451.75.75 0 0 1 .474-1.424A7.3 7.3 0 0 0 12 18.19c3.428 0 6.561-2.442 8.43-6.553a14.5 14.5 0 0 0-1.58-2.694.75.75 0 0 1 1.197-.902M7.15 6.862c-1.437 1.13-2.67 2.776-3.58 4.778.794 1.752 1.836 3.23 3.047 4.322l2.138-2.138a3.87 3.87 0 0 1-.67-2.184A3.92 3.92 0 0 1 12 7.722a3.9 3.9 0 0 1 2.187.669l2.001-2.002c-2.853-1.844-6.325-1.676-9.038.472m8.088 4.6a.75.75 0 0 1 .606.872 3.92 3.92 0 0 1-3.141 3.147.75.75 0 0 1-.268-1.476 2.41 2.41 0 0 0 1.932-1.937.754.754 0 0 1 .87-.606M12 9.221a2.418 2.418 0 0 0-2.152 3.509l3.245-3.246A2.4 2.4 0 0 0 12 9.222",
+        clipRule: "evenodd"
+      }
+    )
+  }
+);
+
+const Input = react.forwardRef(function Input2(props, ref) {
+  const {
+    dir = "rtl",
+    placeholderDir = dir,
+    containerClassName,
+    leftIcon,
+    prefix,
+    postfix,
+    isClearOption,
+    onClear,
+    ...restProps
+  } = props;
+  const [type, setType] = react.useState(restProps.type);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    TextFieldWrapper.TextFieldWrapper,
+    {
+      ...props,
+      containerClassName: clsx.clsx("items-center", containerClassName),
+      children: ({ handleChangeField, value, setValue }) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        prefix && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-p1-regular text-gray-500", children: prefix }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            ...restProps,
+            ref,
+            className: clsx.clsx(
+              "bg-transparent focus:outline-none flex-1",
+              dir === "rtl" ? "text-right" : "!text-left",
+              placeholderDir === "rtl" ? "placeholder:text-right" : "placeholder:text-left",
+              {
+                ss02: restProps.type != "password"
+              },
+              props.className
+            ),
+            ...dir === "ltr" ? { style: { direction: "ltr" } } : {},
+            value,
+            onChange: handleChangeField,
+            type
+          }
+        ),
+        isClearOption && value && value.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: () => {
+              setValue("");
+              if (typeof onClear === "function") onClear();
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              CloseSquareIcon,
+              {
+                className: "text-gray-600",
+                width: 20,
+                height: 20
+              }
+            )
+          }
+        ),
+        postfix && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-p1-regular text-gray-500", children: postfix }),
+        leftIcon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-gray-600", children: leftIcon }),
+        restProps.type === "password" && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: () => setType((prv) => prv === "text" ? "password" : "text"),
+            className: "text-gray-600",
+            children: type === "password" ? /* @__PURE__ */ jsxRuntime.jsx(
+              EyeIcon,
+              {
+                width: 20,
+                height: 20
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsx(
+              HideIcon,
+              {
+                width: 20,
+                height: 20
+              }
+            )
+          }
+        )
+      ] })
+    }
+  );
+});
+
+module.exports = Input;