@hai-dev/ui-kit 1.0.0 → 1.0.1

package/dist/components/button/button.js

@@ -0,0 +1,65 @@
+import { jsx as t } from "react/jsx-runtime";
+import { c as U } from "../../index-B2JRaoNz.js";
+import { ButtonContent as a } from "./button-content.js";
+import { BUTTON_COLOR_GRAY as h, BUTTON_SIZE_DEFAULT as I, BUTTON_VARIANT_OUTLINED as x, MIN_WIDTH_DEFAULT as C, BUTTON_WEIGHT_MEDIUM as E } from "./constants.js";
+import { s as A } from "../../button.module-BZPPmSAS.js";
+import { B as D } from "../../ButtonBase-Bw_3RZmN.js";
+import { getButtonClassnames as L } from "./utils/get-button-classnames.js";
+const F = (m) => {
+  const {
+    buttonColor: l = h,
+    buttonSize: c = I,
+    buttonVariant: T = x,
+    isLink: u,
+    href: o,
+    description: n,
+    className: B,
+    children: s,
+    minWidth: f = C,
+    sx: p,
+    buttonWeight: N = E,
+    startContent: r,
+    endContent: i,
+    disabled: e,
+    buttonSlots: _,
+    ...b
+  } = m, d = Object.assign({}, p, {
+    minWidth: f,
+    fontWeight: N
+  }), O = _?.link;
+  return /* @__PURE__ */ t(
+    D,
+    {
+      className: L({
+        className: B,
+        buttonColor: l,
+        buttonSize: c,
+        buttonVariant: T,
+        disabled: e
+      }),
+      sx: d,
+      disabled: e,
+      ...b,
+      children: u && o ? O || /* @__PURE__ */ t("a", { className: U(A.link), href: o, children: /* @__PURE__ */ t(
+        a,
+        {
+          description: n,
+          startContent: r,
+          endContent: i,
+          children: s
+        }
+      ) }) : /* @__PURE__ */ t(
+        a,
+        {
+          description: n,
+          startContent: r,
+          endContent: i,
+          children: s
+        }
+      )
+    }
+  );
+};
+export {
+  F as Button
+};

package/dist/components/button/button.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { Button } from './';
+type ButtonMeta = Meta<typeof Button>;
+type ButtonStory = StoryObj<typeof Button>;
+declare const meta: ButtonMeta;
+export default meta;
+export declare const Base: ButtonStory;

package/dist/components/button/constants.d.ts

@@ -0,0 +1,12 @@
+export declare const BUTTON_COLOR_WHITE = "white";
+export declare const BUTTON_COLOR_BLUE = "blue";
+export declare const BUTTON_COLOR_GRAY = "gray";
+export declare const BUTTON_VARIANT_FILLED = "filled";
+export declare const BUTTON_VARIANT_OUTLINED = "outlined";
+export declare const BUTTON_VARIANT_TEXT = "text";
+export declare const BUTTON_SIZE_DEFAULT = "default";
+export declare const BUTTON_SIZE_SMALL = "small";
+export declare const BUTTON_WEIGHT_MEDIUM = 500;
+export declare const BUTTON_WEIGHT_SEMI_BOLD = 600;
+export declare const BUTTON_WEIGHT_BOLD = 700;
+export declare const MIN_WIDTH_DEFAULT = 240;

package/dist/components/button/constants.js

@@ -0,0 +1,15 @@
+const T = "white", _ = "blue", O = "gray", t = "filled", N = "outlined", U = "text", I = "default", o = "small", B = 500, E = 600, n = 700, s = 240;
+export {
+  _ as BUTTON_COLOR_BLUE,
+  O as BUTTON_COLOR_GRAY,
+  T as BUTTON_COLOR_WHITE,
+  I as BUTTON_SIZE_DEFAULT,
+  o as BUTTON_SIZE_SMALL,
+  t as BUTTON_VARIANT_FILLED,
+  N as BUTTON_VARIANT_OUTLINED,
+  U as BUTTON_VARIANT_TEXT,
+  n as BUTTON_WEIGHT_BOLD,
+  B as BUTTON_WEIGHT_MEDIUM,
+  E as BUTTON_WEIGHT_SEMI_BOLD,
+  s as MIN_WIDTH_DEFAULT
+};

package/dist/components/button/index.d.ts

@@ -0,0 +1 @@
+export { Button } from './button';

package/dist/components/button/index.js

@@ -0,0 +1,4 @@
+import { Button as r } from "./button.js";
+export {
+  r as Button
+};

package/dist/components/button/types.d.ts

@@ -0,0 +1,38 @@
+import { ReactNode } from 'react';
+import { ButtonBaseProps } from '@mui/material';
+import { BUTTON_COLOR_BLUE, BUTTON_COLOR_GRAY, BUTTON_COLOR_WHITE, BUTTON_SIZE_DEFAULT, BUTTON_SIZE_SMALL, BUTTON_VARIANT_FILLED, BUTTON_VARIANT_OUTLINED, BUTTON_VARIANT_TEXT, BUTTON_WEIGHT_BOLD, BUTTON_WEIGHT_MEDIUM, BUTTON_WEIGHT_SEMI_BOLD } from './constants';
+export type ButtonColor = typeof BUTTON_COLOR_BLUE | typeof BUTTON_COLOR_WHITE | typeof BUTTON_COLOR_GRAY;
+export type ButtonVariant = typeof BUTTON_VARIANT_OUTLINED | typeof BUTTON_VARIANT_FILLED | typeof BUTTON_VARIANT_TEXT;
+export type ButtonWeight = typeof BUTTON_WEIGHT_MEDIUM | typeof BUTTON_WEIGHT_SEMI_BOLD | typeof BUTTON_WEIGHT_BOLD;
+export type ButtonSize = typeof BUTTON_SIZE_DEFAULT | typeof BUTTON_SIZE_SMALL;
+export type ButtonWidth = number | string;
+export type ButtonSlots = {
+    link?: ReactNode;
+};
+export type ButtonCustomProps = {
+    buttonColor?: ButtonColor;
+    buttonVariant?: ButtonVariant;
+    buttonSize?: ButtonSize;
+    buttonWeight?: ButtonWeight;
+    isLink?: boolean;
+    href?: string;
+    description?: string;
+    minWidth?: ButtonWidth;
+    startContent?: ReactNode;
+    endContent?: ReactNode;
+    buttonSlots?: ButtonSlots;
+};
+export type ButtonProps = ButtonBaseProps & ButtonCustomProps;
+export type GetButtonClassnamesParams = {
+    className?: string;
+    buttonColor: ButtonColor;
+    buttonVariant: ButtonVariant;
+    buttonSize: ButtonSize;
+    disabled?: boolean;
+};
+export type ButtonContentProps = {
+    children: ReactNode;
+    description?: string;
+    startContent?: ReactNode;
+    endContent?: ReactNode;
+};

package/dist/components/button/types.js

@@ -0,0 +1 @@
+

package/dist/components/button/utils/get-button-classnames.d.ts

@@ -0,0 +1,2 @@
+import { GetButtonClassnamesParams } from '../types';
+export declare const getButtonClassnames: (params: GetButtonClassnamesParams) => string;

package/dist/components/button/utils/get-button-classnames.js

@@ -0,0 +1,17 @@
+import { c as i } from "../../../index-B2JRaoNz.js";
+import { s as t } from "../../../button.module-BZPPmSAS.js";
+const l = (s) => {
+  const { className: o, buttonColor: a, buttonSize: e, buttonVariant: n, disabled: r } = s;
+  return i(
+    t.button,
+    t.specific,
+    t[a],
+    t[e],
+    t[n],
+    r && t.disabled,
+    o
+  );
+};
+export {
+  l as getButtonClassnames
+};

package/dist/components/button/utils/index.d.ts

@@ -0,0 +1 @@
+export { getButtonClassnames } from './get-button-classnames';

package/dist/components/button/utils/index.js

@@ -0,0 +1,4 @@
+import { getButtonClassnames as o } from "./get-button-classnames.js";
+export {
+  o as getButtonClassnames
+};

package/dist/components/index.d.ts

@@ -1 +1,2 @@
 export { PhotoCropUploader } from './photo-crop-uploader';
+export { Button } from './button';

package/dist/components/index.js

@@ -1,4 +1,6 @@
-import { PhotoCropUploader as p } from "./photo-crop-uploader/photo-crop-uploader.js";
+import { PhotoCropUploader as t } from "./photo-crop-uploader/photo-crop-uploader.js";
+import { Button as e } from "./button/button.js";
 export {
-  p as PhotoCropUploader
+  e as Button,
+  t as PhotoCropUploader
 };

package/dist/components/photo-crop-uploader/components/error-upload-dialog/error-upload-dialog.js

@@ -1,33 +1,34 @@
 import { jsxs as d, jsx as o } from "react/jsx-runtime";
-import { c as a, B as g } from "../../../../Button-BjNjCLw8.js";
+import { c as a } from "../../../../index-B2JRaoNz.js";
 import { localizedText as i } from "../../locale.js";
-import { EN_LOCALE as m } from "../../../../constants.js";
-import { D as x, a as p, b as E, c as D, d as h } from "../../../../DialogTitle-1A3dJ174.js";
+import { EN_LOCALE as g } from "../../../../constants.js";
+import { D as m, a as p, b as x, c as E, d as D } from "../../../../DialogTitle-iOQ7wKEt.js";
+import { B as h } from "../../../../Button-0AB7oP6Y.js";
 import '../../../../assets/error-upload-dialog.css';const T = "_dialog_lyvu5_1", _ = "_dialogErrorText_lyvu5_1", t = {
   dialog: T,
   dialogErrorText: _
-}, b = (s) => {
+}, j = (s) => {
   const {
     photoError: e,
     onCloseErrorDialog: r,
-    locale: l = m,
+    locale: l = g,
     className: c,
     ...n
   } = s;
   return /* @__PURE__ */ d(
-    x,
+    m,
     {
       className: a(t.dialog, c),
       onClose: r,
       ...n,
       children: [
         /* @__PURE__ */ o(p, { children: i[l].error }),
-        /* @__PURE__ */ o(E, { children: /* @__PURE__ */ o(D, { className: a(t.dialogErrorText), children: e }) }),
-        /* @__PURE__ */ o(h, { children: /* @__PURE__ */ o(g, { onClick: r, children: i[l].back }) })
+        /* @__PURE__ */ o(x, { children: /* @__PURE__ */ o(E, { className: a(t.dialogErrorText), children: e }) }),
+        /* @__PURE__ */ o(D, { children: /* @__PURE__ */ o(h, { onClick: r, children: i[l].back }) })
       ]
     }
   );
 };
 export {
-  b as ErrorUploadDialog
+  j as ErrorUploadDialog
 };

package/dist/components/photo-crop-uploader/components/upload-button/constants.d.ts

@@ -1,3 +1,3 @@
 export declare const UPLOAD_BUTTON_IMAGE_SIZE = 20;
 export declare const UPLOAD_BUTTON_TAB_INDEX = -1;
-export declare const UPLOAD_BUTTON_WIDTH_DEFAULT = 260;
+export declare const UPLOAD_BUTTON_WIDTH_DEFAULT = "auto";

package/dist/components/photo-crop-uploader/components/upload-button/constants.js

@@ -1,4 +1,4 @@
-const T = 20, _ = -1, U = 260;
+const T = 20, _ = -1, U = "auto";
 export {
   T as UPLOAD_BUTTON_IMAGE_SIZE,
   _ as UPLOAD_BUTTON_TAB_INDEX,

package/dist/components/photo-crop-uploader/components/upload-button/types.d.ts

@@ -1,4 +1,4 @@
-import { InputHTMLAttributes } from 'react';
+import { DragEvent, InputHTMLAttributes, ReactNode } from 'react';
 import { Locale } from '../../../../types';
 import { PhotoExtension } from '../../types';
 type UploadButtonCustonProps = {
@@ -7,6 +7,10 @@ type UploadButtonCustonProps = {
     locale?: Locale;
     width?: number | string;
     allowedExtensions?: PhotoExtension[];
+    onDragOver?: (event: DragEvent<HTMLDivElement>) => unknown;
+    onDragLeave?: (event: DragEvent<HTMLDivElement>) => unknown;
+    onDragDrop?: (event: DragEvent<HTMLDivElement>) => unknown;
+    button?: ReactNode;
 };
 export type UploadButtonProps = InputHTMLAttributes<HTMLInputElement> & UploadButtonCustonProps;
 export {};

package/dist/components/photo-crop-uploader/components/upload-button/upload-button.js

@@ -1,82 +1,105 @@
-import { jsx as a, jsxs as B } from "react/jsx-runtime";
-import { useState as I, useRef as N } from "react";
-import { c as n, B as S } from "../../../../Button-BjNjCLw8.js";
-import { localizedText as c } from "../../locale.js";
-import { EN_LOCALE as C } from "../../../../constants.js";
-import { SUPPORTED_IMAGE_EXTENSIONS as P } from "../../constants.js";
-import { UPLOAD_BUTTON_WIDTH_DEFAULT as U, UPLOAD_BUTTON_TAB_INDEX as A, UPLOAD_BUTTON_IMAGE_SIZE as d } from "./constants.js";
-import '../../../../assets/upload-button.css';const G = "data:image/svg+xml,%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3c!--%20Uploaded%20to:%20SVG%20Repo,%20www.svgrepo.com,%20Transformed%20by:%20SVG%20Repo%20Mixer%20Tools%20--%3e%3csvg%20width='800px'%20height='800px'%20viewBox='0%200%201024%201024'%20xmlns='http://www.w3.org/2000/svg'%20fill='%23000000'%3e%3cg%20id='SVGRepo_bgCarrier'%20stroke-width='0'/%3e%3cg%20id='SVGRepo_tracerCarrier'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cg%20id='SVGRepo_iconCarrier'%3e%3cpath%20fill='%23ffffff'%20d='M544%20864V672h128L512%20480%20352%20672h128v192H320v-1.6c-5.376.32-10.496%201.6-16%201.6A240%20240%200%200%201%2064%20624c0-123.136%2093.12-223.488%20212.608-237.248A239.808%20239.808%200%200%201%20512%20192a239.872%20239.872%200%200%201%20235.456%20194.752c119.488%2013.76%20212.48%20114.112%20212.48%20237.248a240%20240%200%200%201-240%20240c-5.376%200-10.56-1.28-16-1.6v1.6H544z'/%3e%3c/g%3e%3c/svg%3e", L = "_dragDropWrapper_z6dm0_1", b = "_uploadButton_z6dm0_1", R = "_input_z6dm0_1", s = {
-  dragDropWrapper: L,
-  uploadButton: b,
-  input: R
-}, H = (g) => {
+import { jsx as r, jsxs as h, Fragment as U } from "react/jsx-runtime";
+import { useState as A, useRef as B } from "react";
+import { c as t } from "../../../../index-B2JRaoNz.js";
+import { localizedText as m } from "../../locale.js";
+import { EN_LOCALE as G } from "../../../../constants.js";
+import { SUPPORTED_IMAGE_EXTENSIONS as b } from "../../constants.js";
+import { UPLOAD_BUTTON_WIDTH_DEFAULT as R, UPLOAD_BUTTON_TAB_INDEX as V, UPLOAD_BUTTON_IMAGE_SIZE as _ } from "./constants.js";
+import { B as k } from "../../../../Button-0AB7oP6Y.js";
+import '../../../../assets/upload-button.css';const y = "data:image/svg+xml,%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3c!--%20Uploaded%20to:%20SVG%20Repo,%20www.svgrepo.com,%20Transformed%20by:%20SVG%20Repo%20Mixer%20Tools%20--%3e%3csvg%20width='800px'%20height='800px'%20viewBox='0%200%201024%201024'%20xmlns='http://www.w3.org/2000/svg'%20fill='%23000000'%3e%3cg%20id='SVGRepo_bgCarrier'%20stroke-width='0'/%3e%3cg%20id='SVGRepo_tracerCarrier'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cg%20id='SVGRepo_iconCarrier'%3e%3cpath%20fill='%23ffffff'%20d='M544%20864V672h128L512%20480%20352%20672h128v192H320v-1.6c-5.376.32-10.496%201.6-16%201.6A240%20240%200%200%201%2064%20624c0-123.136%2093.12-223.488%20212.608-237.248A239.808%20239.808%200%200%201%20512%20192a239.872%20239.872%200%200%201%20235.456%20194.752c119.488%2013.76%20212.48%20114.112%20212.48%20237.248a240%20240%200%200%201-240%20240c-5.376%200-10.56-1.28-16-1.6v1.6H544z'/%3e%3c/g%3e%3c/svg%3e", W = "_dragDropWrapper_cgx9x_1", j = "_input_cgx9x_4", a = {
+  dragDropWrapper: W,
+  input: j
+}, J = (v) => {
   const {
-    buttonClassname: u,
-    buttonDisabled: o = !1,
-    children: f,
-    className: m,
-    onChange: e,
-    locale: p = C,
-    width: h = U,
-    allowedExtensions: D = P,
-    ...v
-  } = g, [_, r] = I(!1), T = N(null), i = (t) => {
-    t && t.length > 0 && e && e({
+    buttonClassname: x,
+    buttonDisabled: n = !1,
+    children: T,
+    className: c,
+    onChange: o,
+    locale: l = G,
+    width: w = R,
+    allowedExtensions: d = b,
+    onDragOver: E = () => {
+    },
+    onDragLeave: O = () => {
+    },
+    onDragDrop: C = () => {
+    },
+    button: s,
+    ...g
+  } = v, [N, i] = A(!1), p = B(null), f = (e) => {
+    e && e.length > 0 && o && o({
       target: {
-        files: t,
+        files: e,
         value: ""
       }
     });
-  }, w = (t) => {
-    t.preventDefault(), t.stopPropagation(), o || r(!0);
-  }, E = (t) => {
-    t.preventDefault(), t.stopPropagation(), r(!1);
-  }, x = (t) => {
-    if (t.preventDefault(), t.stopPropagation(), r(!1), o) return;
-    const l = t.dataTransfer?.files;
-    i(l);
-  }, O = (t) => {
-    i(t.target.files), e && e(t);
+  }, I = (e) => {
+    e.preventDefault(), e.stopPropagation(), E(e), n || i(!0);
+  }, S = (e) => {
+    e.preventDefault(), e.stopPropagation(), O(e), i(!1);
+  }, L = (e) => {
+    if (e.preventDefault(), e.stopPropagation(), C(e), i(!1), n) return;
+    const D = e.dataTransfer?.files;
+    f(D);
+  }, P = () => {
+    s && p.current?.click();
+  }, u = (e) => {
+    f(e.target.files), o && o(e);
   };
-  return /* @__PURE__ */ a(
+  return /* @__PURE__ */ r(
     "div",
     {
-      className: n(s.dragDropWrapper),
-      onDragOver: w,
-      onDragLeave: E,
-      onDrop: x,
-      children: /* @__PURE__ */ B(
-        S,
+      className: t(a.dragDropWrapper),
+      onDragOver: I,
+      onDragLeave: S,
+      onDrop: L,
+      onClick: P,
+      children: s ? /* @__PURE__ */ h(U, { children: [
+        s,
+        /* @__PURE__ */ r(
+          "input",
+          {
+            ref: p,
+            className: t(a.input, c),
+            type: "file",
+            accept: d.join(", "),
+            onChange: u,
+            ...g
+          }
+        )
+      ] }) : /* @__PURE__ */ h(
+        k,
         {
           component: "label",
           sx: {
-            width: h
+            width: w
           },
           role: "none",
           variant: "contained",
-          disabled: o,
-          tabIndex: A,
-          className: n(s.uploadButton, u),
-          startIcon: /* @__PURE__ */ a(
+          disabled: n,
+          tabIndex: V,
+          className: t(a.uploadButton, x),
+          startIcon: /* @__PURE__ */ r(
             "img",
             {
-              width: d,
-              height: d,
-              src: G,
-              alt: c[p].upload
+              width: _,
+              height: _,
+              src: y,
+              alt: m[l].upload
             }
           ),
           children: [
-            _ ? c[p].drop : f,
-            /* @__PURE__ */ a(
+            N ? m[l].drop : T,
+            /* @__PURE__ */ r(
               "input",
               {
-                ref: T,
-                className: n(s.input, m),
+                ref: p,
+                className: t(a.input, c),
                 type: "file",
-                accept: D.join(", "),
-                onChange: O,
-                ...v
+                accept: d.join(", "),
+                onChange: u,
+                ...g
               }
             )
           ]
@@ -86,5 +109,5 @@ import '../../../../assets/upload-button.css';const G = "data:image/svg+xml,%3c!
   );
 };
 export {
-  H as UploadButton
+  J as UploadButton
 };