@solibo/solibo-ui 0.2.17 → 0.3.0

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+import { default as default_2 } from 'react';
 import { DetailedHTMLProps } from 'react';
 import { ForwardRefExoticComponent } from 'react';
 import { InputHTMLAttributes } from 'react';
@@ -6,14 +7,6 @@ import { RefAttributes } from 'react';
 
 export declare const Accordion: ({ children, icon, label, open }: AccordionProps) => JSX.Element;
 
-export declare function AccordionGroup({ animation, children, className }: AccordionGroupProps): JSX.Element;
-
-declare type AccordionGroupProps = {
-    animation?: AnimationName;
-    children: React.ReactNode;
-    className?: string;
-};
-
 declare type AccordionProps = {
     children: React.ReactNode;
     icon?: IconName;
@@ -27,7 +20,7 @@ export declare const Aside: ({ children, className, sticky, variant }: AsideProp
 
 declare type AsideProps = {
     className?: string;
-    children?: React.ReactNode;
+    children: React.ReactNode;
     open?: boolean;
     sticky?: boolean;
     variant?: keyof typeof variants;
@@ -90,25 +83,13 @@ declare type DialogProps = React.DialogHTMLAttributes<HTMLDialogElement> & {
     children: React.ReactNode;
 };
 
-export declare const Dropdown: ({ children, inline, label, placeholder, ...props }: DropdownProps) => JSX.Element;
-
-declare type DropdownProps = React.SelectHTMLAttributes<HTMLSelectElement> & {
-    children?: React.ReactNode;
-    inline?: boolean;
-    label?: string;
-    placeholder?: string;
-};
-
-export declare const Dropzone: (props: DropzoneProps) => JSX.Element;
+export declare const Dropzone: ({ accepts, label, multiple, onChange, ...props }: DropzoneProps) => JSX.Element;
 
 declare type DropzoneProps = {
-    allowDirectoryUpload?: boolean;
-    inputId?: string;
-    isMultiple?: boolean;
-    label?: string;
-    maxFileSizeMB?: number;
-    mimeTypes?: string[];
-    onUpload: (uploadContent: File[] | FileList) => void;
+    accepts?: string;
+    label: string;
+    multiple?: boolean;
+    onChange?: React.ChangeEventHandler<HTMLInputElement>;
 };
 
 export declare const Editor: ({ autofocus, autolink, content, inline, onChange, }: EditorProps) => JSX.Element;
@@ -121,11 +102,12 @@ declare type EditorProps = {
     onChange?: (html: string) => void;
 };
 
-export declare const Figure: ({ children, label }: FigureProps) => JSX.Element;
+export declare const Figure: ({ children, label, offset }: FigureProps) => JSX.Element;
 
 declare type FigureProps = {
     children?: React.ReactNode;
     label?: string;
+    offset?: 'left' | 'right';
 };
 
 declare const File_2: ({ name, url }: FileProps) => JSX.Element;
@@ -136,12 +118,6 @@ declare type FileProps = {
     url: string;
 };
 
-export declare const Footer: ({ children, ...props }: FooterProps) => JSX.Element;
-
-declare type FooterProps = {
-    children?: React.ReactNode;
-};
-
 export declare const Form: ({ animation, children, inline, ...props }: FormProps) => JSX.Element;
 
 declare type FormProps = React.FormHTMLAttributes<HTMLFormElement> & {
@@ -150,14 +126,18 @@ declare type FormProps = React.FormHTMLAttributes<HTMLFormElement> & {
     inline?: boolean;
 };
 
-export declare const Header: ({ children, size, label, ...props }: HeaderProps) => JSX.Element;
+export declare const Group: ({ animation, children, className }: GroupProps) => JSX.Element;
+
+declare type GroupProps = {
+    animation?: AnimationName;
+    children: React.ReactNode;
+    className?: string;
+};
+
+export declare const Header: ({ children }: HeaderProps) => JSX.Element;
 
 declare type HeaderProps = {
-    children?: React.ReactNode;
-    label?: string;
-    size?: 1 | 2 | 3;
-    superHeader?: string;
-    subHeader?: string;
+    children: React.ReactNode;
 };
 
 export declare const Icon: ({ name, size, variant }: IconProps) => JSX.Element;
@@ -173,6 +153,7 @@ declare const iconPaths: {
     gear: string;
     document: string;
     home: string;
+    image: string;
     italic: string;
     link: string;
     list: string;
@@ -181,7 +162,6 @@ declare const iconPaths: {
     phone: string;
     plus: string;
     search: string;
-    toDocument: string;
     upload: string;
     user: string;
     x: string;
@@ -213,7 +193,7 @@ export declare const Link: ({ children, className, to, label, ...props }: LinkPr
 declare type LinkProps = React.AnchorHTMLAttributes<HTMLAnchorElement> & {
     children?: React.ReactNode;
     className?: string;
-    label?: string;
+    label: string;
     to?: string;
 };
 
@@ -224,24 +204,52 @@ declare type ListProps = {
     className?: string;
 };
 
-export declare const Nav: ({ animation, children, horizontal, variant, ...props }: NavProps) => JSX.Element;
+export declare const Nav: ({ animation, children, horizontal, variant }: NavProps) => JSX.Element;
 
 declare type NavProps = {
     animation?: AnimationName;
     children?: React.ReactNode;
     horizontal?: boolean;
-    isResultsPage?: boolean;
-    isSearchable?: boolean;
-    onSearchSubmit?: (value: string) => void;
     variant?: keyof typeof variants_5;
 };
 
+export declare const Portal: ({ children, portals }: PortalProps) => JSX.Element;
+
+declare type PortalProps = {
+    children?: React.ReactNode;
+    portals?: React.ReactNode;
+};
+
+export declare const Select: ({ children, inline, label, placeholder, ...props }: SelectProps) => JSX.Element;
+
+declare type SelectProps = React.SelectHTMLAttributes<HTMLSelectElement> & {
+    children: React.ReactNode;
+    inline?: boolean;
+    label?: string;
+    placeholder?: string;
+};
+
 declare const sizes: {
     large: string;
     medium: string;
     small: string;
 };
 
+/**
+ * Children must provide a stable `data-id` for emits `{ id, weight }` and `key` (reconciliation).
+ */
+export declare function Sortable({ children, onChangeOrder }: SortableProps): JSX.Element;
+
+declare type SortableProps = {
+    children?: default_2.ReactNode;
+    onChangeOrder?: (order: SortItem[]) => void;
+};
+
+declare type SortItem = {
+    id: string;
+    weight: number;
+};
+
 export declare const Toggle: ({ checked, disabled, isLoading, label, onChange }: ToggleProps) => JSX.Element;
 
 declare type ToggleProps = {
@@ -254,13 +262,11 @@ declare type ToggleProps = {
 
 declare const variants: {
     default: string;
-    nav: string;
     meta: string;
 };
 
 declare const variants_2: {
     default: string;
-    gradient: string;
     white: string;
 };
 

package/dist/index.js

@@ -1,50 +1,53 @@
-import { Accordion as e, AccordionGroup as t } from "./components/accordion/index.js";
-import { Aside as m } from "./components/aside/index.js";
-import { Banner as f } from "./components/banner/index.js";
-import { Branding as i } from "./components/branding/index.js";
-import { Button as a } from "./components/button/index.js";
-import { Card as g } from "./components/card/index.js";
-import { Checkbox as F } from "./components/checkbox/index.js";
+import { Card as e } from "./components/_card/index.js";
+import { Dropzone as p } from "./components/_dropzone/index.js";
+import { Editor as x } from "./components/_editor/index.js";
+import { Portal as n } from "./components/_portal/index.js";
+import { Accordion as i } from "./components/accordion/index.js";
+import { Aside as l } from "./components/aside/index.js";
+import { Banner as g } from "./components/banner/index.js";
+import { Branding as B } from "./components/branding/index.js";
+import { Button as L } from "./components/button/index.js";
+import { Checkbox as k } from "./components/checkbox/index.js";
 import { Dialog as A } from "./components/dialog/index.js";
-import { Dropdown as D } from "./components/dropdown/index.js";
-import { Dropzone as k } from "./components/dropzone/index.js";
-import { Editor as C } from "./components/editor/index.js";
-import { Figure as b } from "./components/figure/index.js";
-import { File as v } from "./components/file/index.js";
-import { Footer as y } from "./components/footer/index.js";
-import { Form as E } from "./components/form/index.js";
-import { Header as H } from "./components/header/index.js";
-import { Icon as T } from "./components/icon/index.js";
-import { Input as q } from "./components/input/index.js";
-import { Layout as K } from "./components/layout/index.js";
-import { Link as O } from "./components/link/index.js";
-import { List as Q } from "./components/list/index.js";
-import { Nav as S } from "./components/nav/index.js";
-import { Toggle as V } from "./components/toggle/index.js";
+import { Figure as D } from "./components/figure/index.js";
+import { File as S } from "./components/file/index.js";
+import { Form as v } from "./components/form/index.js";
+import { Group as z } from "./components/group/index.js";
+import { Header as G } from "./components/header/index.js";
+import { Icon as N } from "./components/icon/index.js";
+import { Input as T } from "./components/input/index.js";
+import { Layout as q } from "./components/layout/index.js";
+import { Link as J } from "./components/link/index.js";
+import { List as M } from "./components/list/index.js";
+import { Nav as Q } from "./components/nav/index.js";
+import { Select as U } from "./components/select/index.js";
+import { Sortable as W } from "./components/sortable/index.js";
+import { Toggle as Y } from "./components/toggle/index.js";
 import './assets/index.css';export {
-  e as Accordion,
-  t as AccordionGroup,
-  m as Aside,
-  f as Banner,
-  i as Branding,
-  a as Button,
-  g as Card,
-  F as Checkbox,
+  i as Accordion,
+  l as Aside,
+  g as Banner,
+  B as Branding,
+  L as Button,
+  e as Card,
+  k as Checkbox,
   A as Dialog,
-  D as Dropdown,
-  k as Dropzone,
-  C as Editor,
-  b as Figure,
-  v as File,
-  y as Footer,
-  E as Form,
-  H as Header,
-  T as Icon,
-  q as Input,
-  K as Layout,
-  O as Link,
-  Q as List,
-  S as Nav,
-  V as Toggle
+  p as Dropzone,
+  x as Editor,
+  D as Figure,
+  S as File,
+  v as Form,
+  z as Group,
+  G as Header,
+  N as Icon,
+  T as Input,
+  q as Layout,
+  J as Link,
+  M as List,
+  Q as Nav,
+  n as Portal,
+  U as Select,
+  W as Sortable,
+  Y as Toggle
 };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solibo/solibo-ui",
-  "version": "0.2.17",
+  "version": "0.3.0",
   "type": "module",
   "scripts": {
     "dev": "vite build --watch",
@@ -68,7 +68,7 @@
     "eslint-plugin-react-refresh": "^0.4.20",
     "eslint-plugin-simple-import-sort": "^12.1.1",
     "eslint-plugin-storybook": "^0.11.6",
-    "glob": "^11.0.3",
+    "glob": "^11.1.0",
     "globals": "^15.15.0",
     "jsdom": "^25.0.1",
     "npm-snapshot": "^1.1.2",
@@ -78,7 +78,7 @@
     "stylelint-config-standard": "^36.0.1",
     "typescript": "~5.6.3",
     "typescript-eslint": "^8.39.1",
-    "vite": "^5.4.19",
+    "vite": "^5.4.21",
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-lib-inject-css": "^2.2.2",
     "vite-tsconfig-paths": "^5.1.4",

package/dist/components/card/index.cjs

@@ -1,2 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index18.css');const c=require("react/jsx-runtime"),d=require("../../classix-5H4IWnMA.cjs"),n="_card_19834_1",o="_draft_19834_7",r={card:n,draft:o},i=({children:t,draft:e,image:s,onClick:a})=>c.jsxs("article",{className:d.t(r.card,e&&r.draft),onClick:a,children:[s,t]});exports.Card=i;
-//# sourceMappingURL=index.cjs.map

package/dist/components/card/index.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/components/card/index.tsx"],"sourcesContent":["import cx from 'classix';\n\nimport styles from './styles.module.css';\n\nexport type CardProps = {\n  children: React.ReactNode;\n  draft?: boolean;\n  image?: React.ReactNode;\n  onClick?: React.MouseEventHandler<HTMLElement>;\n};\n\nexport const Card = ({ children, draft, image, onClick }: CardProps) => {\n  return (\n    <article\n      className={cx(styles.card, draft && styles.draft)}\n      onClick={onClick}\n    >\n      {image}\n      {children}\n    </article>\n  );\n};\n"],"names":["Card","children","draft","image","onClick","jsxs","cx","styles"],"mappings":"qNAWaA,EAAO,CAAC,CAAE,SAAAC,EAAU,MAAAC,EAAO,MAAAC,EAAO,QAAAC,KAE3CC,EAAAA,KAAC,UAAA,CACC,UAAWC,EAAAA,EAAGC,EAAO,KAAML,GAASK,EAAO,KAAK,EAChD,QAAAH,EAEC,SAAA,CAAAD,EACAF,CAAA,CAAA,CAAA"}

package/dist/components/card/index.js

@@ -1,20 +0,0 @@
-import { jsxs as s } from "react/jsx-runtime";
-import { t as o } from "../../classix-DG18itHa.js";
-import '../../assets/index18.css';const e = "_card_19834_1", f = "_draft_19834_7", r = {
-  card: e,
-  draft: f
-}, m = ({ children: t, draft: a, image: c, onClick: d }) => /* @__PURE__ */ s(
-  "article",
-  {
-    className: o(r.card, a && r.draft),
-    onClick: d,
-    children: [
-      c,
-      t
-    ]
-  }
-);
-export {
-  m as Card
-};
-//# sourceMappingURL=index.js.map

package/dist/components/card/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/card/index.tsx"],"sourcesContent":["import cx from 'classix';\n\nimport styles from './styles.module.css';\n\nexport type CardProps = {\n  children: React.ReactNode;\n  draft?: boolean;\n  image?: React.ReactNode;\n  onClick?: React.MouseEventHandler<HTMLElement>;\n};\n\nexport const Card = ({ children, draft, image, onClick }: CardProps) => {\n  return (\n    <article\n      className={cx(styles.card, draft && styles.draft)}\n      onClick={onClick}\n    >\n      {image}\n      {children}\n    </article>\n  );\n};\n"],"names":["Card","children","draft","image","onClick","jsxs","cx","styles"],"mappings":";;;;;GAWaA,IAAO,CAAC,EAAE,UAAAC,GAAU,OAAAC,GAAO,OAAAC,GAAO,SAAAC,QAE3C,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC,EAAGC,EAAO,MAAML,KAASK,EAAO,KAAK;AAAA,IAChD,SAAAH;AAAA,IAEC,UAAA;AAAA,MAAAD;AAAA,MACAF;AAAA,IAAA;AAAA,EAAA;AAAA;"}

package/dist/components/dropdown/index.cjs

@@ -1,2 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index15.css');const n=require("react/jsx-runtime"),c=require("../../classix-5H4IWnMA.cjs"),d="_dropdown_128nx_1",a="_inline_128nx_15",u="_label_128nx_25",e={dropdown:d,inline:a,label:u},_=({children:t,inline:i,label:s,placeholder:o,...r})=>{const l=n.jsxs("select",{className:c.t(e.dropdown,i&&e.inline),...r,children:[o&&n.jsx("option",{value:"",hidden:!0,children:o}),t]});return s?n.jsxs("label",{className:e.label,children:[s,l]}):l};exports.Dropdown=_;
-//# sourceMappingURL=index.cjs.map

package/dist/components/dropdown/index.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/components/dropdown/index.tsx"],"sourcesContent":["import cx from 'classix';\n\nimport styles from './styles.module.css';\n\nexport type DropdownProps = React.SelectHTMLAttributes<HTMLSelectElement> & {\n  children?: React.ReactNode;\n  inline?: boolean;\n  label?: string;\n  placeholder?: string;\n};\n\nexport const Dropdown = ({ children, inline, label, placeholder, ...props }: DropdownProps) => {\n  const selectElement = (\n    <select\n      className={cx(styles.dropdown, inline && styles.inline)}\n      {...props}\n    >\n      {placeholder && (\n        <option\n          value={''}\n          hidden\n        >\n          {placeholder}\n        </option>\n      )}\n      {children}\n    </select>\n  );\n\n  if (!label) {\n    return selectElement;\n  }\n\n  return (\n    <label className={styles.label}>\n      {label}\n      {selectElement}\n    </label>\n  );\n};\n"],"names":["Dropdown","children","inline","label","placeholder","props","selectElement","jsxs","cx","styles","jsx"],"mappings":"4PAWaA,EAAW,CAAC,CAAE,SAAAC,EAAU,OAAAC,EAAQ,MAAAC,EAAO,YAAAC,EAAa,GAAGC,KAA2B,CAC7F,MAAMC,EACJC,EAAAA,KAAC,SAAA,CACC,UAAWC,EAAAA,EAAGC,EAAO,SAAUP,GAAUO,EAAO,MAAM,EACrD,GAAGJ,EAEH,SAAA,CAAAD,GACCM,EAAAA,IAAC,SAAA,CACC,MAAO,GACP,OAAM,GAEL,SAAAN,CAAA,CAAA,EAGJH,CAAA,CAAA,CAAA,EAIL,OAAKE,EAKHI,EAAAA,KAAC,QAAA,CAAM,UAAWE,EAAO,MACtB,SAAA,CAAAN,EACAG,CAAA,EACH,EAPOA,CASX"}

package/dist/components/dropdown/index.js

@@ -1,34 +0,0 @@
-import { jsxs as t, jsx as d } from "react/jsx-runtime";
-import { t as c } from "../../classix-DG18itHa.js";
-import '../../assets/index15.css';const _ = "_dropdown_128nx_1", a = "_inline_128nx_15", p = "_label_128nx_25", n = {
-  dropdown: _,
-  inline: a,
-  label: p
-}, w = ({ children: r, inline: s, label: e, placeholder: o, ...i }) => {
-  const l = /* @__PURE__ */ t(
-    "select",
-    {
-      className: c(n.dropdown, s && n.inline),
-      ...i,
-      children: [
-        o && /* @__PURE__ */ d(
-          "option",
-          {
-            value: "",
-            hidden: !0,
-            children: o
-          }
-        ),
-        r
-      ]
-    }
-  );
-  return e ? /* @__PURE__ */ t("label", { className: n.label, children: [
-    e,
-    l
-  ] }) : l;
-};
-export {
-  w as Dropdown
-};
-//# sourceMappingURL=index.js.map

package/dist/components/dropdown/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/dropdown/index.tsx"],"sourcesContent":["import cx from 'classix';\n\nimport styles from './styles.module.css';\n\nexport type DropdownProps = React.SelectHTMLAttributes<HTMLSelectElement> & {\n  children?: React.ReactNode;\n  inline?: boolean;\n  label?: string;\n  placeholder?: string;\n};\n\nexport const Dropdown = ({ children, inline, label, placeholder, ...props }: DropdownProps) => {\n  const selectElement = (\n    <select\n      className={cx(styles.dropdown, inline && styles.inline)}\n      {...props}\n    >\n      {placeholder && (\n        <option\n          value={''}\n          hidden\n        >\n          {placeholder}\n        </option>\n      )}\n      {children}\n    </select>\n  );\n\n  if (!label) {\n    return selectElement;\n  }\n\n  return (\n    <label className={styles.label}>\n      {label}\n      {selectElement}\n    </label>\n  );\n};\n"],"names":["Dropdown","children","inline","label","placeholder","props","selectElement","jsxs","cx","styles","jsx"],"mappings":";;;;;;GAWaA,IAAW,CAAC,EAAE,UAAAC,GAAU,QAAAC,GAAQ,OAAAC,GAAO,aAAAC,GAAa,GAAGC,QAA2B;AAC7F,QAAMC,IACJ,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAGC,EAAO,UAAUP,KAAUO,EAAO,MAAM;AAAA,MACrD,GAAGJ;AAAA,MAEH,UAAA;AAAA,QAAAD,KACC,gBAAAM;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAO;AAAA,YACP,QAAM;AAAA,YAEL,UAAAN;AAAA,UAAA;AAAA,QAAA;AAAA,QAGJH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIL,SAAKE,IAKH,gBAAAI,EAAC,SAAA,EAAM,WAAWE,EAAO,OACtB,UAAA;AAAA,IAAAN;AAAA,IACAG;AAAA,EAAA,GACH,IAPOA;AASX;"}

package/dist/components/dropzone/index.cjs

@@ -1,2 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index14.css');const l=require("react/jsx-runtime"),T=require("../../classix-5H4IWnMA.cjs"),o=require("react"),_=require("../icon/index.cjs"),q="_dropzone_1cqsl_1",M="_highlight_1cqsl_41",z={dropzone:q,highlight:M},I=e=>{var d;const[f,y]=o.useState(!1),[F,v]=o.useState({empty:[],oversize:[],wrongType:[]}),[p,x]=o.useState([]),[D,a]=o.useState(!1),r=(t,i)=>s=>{s.preventDefault(),s.stopPropagation(),t(i)},c=r(a,!0),S=r(a,!1),g=t=>{if(!t)return;const i=Array.from(t),s=i.filter(n=>n.size===0),u=e.maxFileSizeMB?i.filter(n=>n.size>e.maxFileSizeMB*1024*1024):[],m=e.mimeTypes?i.filter(n=>{var h;return!((h=e.mimeTypes)!=null&&h.includes(n.type))}):[],j=i.filter(n=>n.size>0&&(e.maxFileSizeMB?n.size<=e.maxFileSizeMB*1024*1024:!0)&&(e.mimeTypes?e.mimeTypes.includes(n.type):!0));x(j),s.length>0||u.length>0||m.length>0?(v({empty:s,oversize:u,wrongType:m}),y(!0),console.log("validFiles",p),console.log("invalidFiles",F)):e.onUpload(t),a(!1)};return l.jsxs("div",{className:T.t(z.dropzone,D?z.highlight:""),onDragEnter:c,onDragLeave:S,onDragOver:c,onDrop:t=>{var i;t.preventDefault(),g((i=t.dataTransfer)==null?void 0:i.files)},children:[f&&l.jsx(l.Fragment,{}),l.jsxs("label",{htmlFor:e.inputId??"file-upload",children:[l.jsx(_.Icon,{name:"upload",size:"large"}),l.jsx("span",{children:e.label}),l.jsx("input",{type:"file",multiple:e.isMultiple,accept:(d=e.mimeTypes)==null?void 0:d.join(", "),id:e.inputId??"file-upload",onChange:t=>g(t.target.files)})]})]})};exports.Dropzone=I;
-//# sourceMappingURL=index.cjs.map

package/dist/components/dropzone/index.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/components/dropzone/index.tsx"],"sourcesContent":["import cx from 'classix';\nimport { useState } from 'react';\n\nimport { Icon } from '@/components/icon';\n\nimport styles from './styles.module.css';\n\nexport type DropzoneProps = {\n  allowDirectoryUpload?: boolean;\n  inputId?: string;\n  isMultiple?: boolean;\n  label?: string;\n  maxFileSizeMB?: number;\n  mimeTypes?: string[];\n  onUpload: (uploadContent: File[] | FileList) => void;\n};\n\nexport const Dropzone = (props: DropzoneProps) => {\n  const [showWarning, setShowWarning] = useState(false);\n  const [invalidFiles, setInvalidFiles] = useState<{\n    empty: File[];\n    oversize: File[];\n    wrongType: File[];\n  }>({ empty: [], oversize: [], wrongType: [] });\n  const [validFiles, setValidFiles] = useState<File[]>([]);\n  const [dragging, setDragging] = useState(false);\n\n  const makeDragHandler = (set: (v: boolean) => void, value: boolean) => (e: React.DragEvent) => {\n    e.preventDefault();\n    e.stopPropagation();\n    set(value);\n  };\n\n  const onDragIn = makeDragHandler(setDragging, true);\n  const onDragOut = makeDragHandler(setDragging, false);\n\n  const handleUpload = (files: FileList | null) => {\n    if (!files) {\n      return;\n    }\n\n    const fileList = Array.from(files);\n\n    const emptyFiles = fileList.filter((file) => file.size === 0);\n    const oversizeFiles = props.maxFileSizeMB\n      ? fileList.filter((file) => file.size > props.maxFileSizeMB! * 1024 * 1024)\n      : [];\n    const unsupportedFiles = props.mimeTypes\n      ? fileList.filter((file) => !props.mimeTypes?.includes(file.type))\n      : [];\n    const validatedFiles = fileList.filter(\n      (file) =>\n        file.size > 0 &&\n        (props.maxFileSizeMB ? file.size <= props.maxFileSizeMB * 1024 * 1024 : true) &&\n        (props.mimeTypes ? props.mimeTypes.includes(file.type) : true)\n    );\n\n    setValidFiles(validatedFiles);\n\n    if (emptyFiles.length > 0 || oversizeFiles.length > 0 || unsupportedFiles.length > 0) {\n      setInvalidFiles({ empty: emptyFiles, oversize: oversizeFiles, wrongType: unsupportedFiles });\n      setShowWarning(true);\n      console.log('validFiles', validFiles);\n      console.log('invalidFiles', invalidFiles);\n    } else {\n      props.onUpload(files);\n    }\n\n    setDragging(false);\n  };\n\n  return (\n    <div\n      className={cx(styles.dropzone, dragging ? styles.highlight : '')}\n      onDragEnter={onDragIn}\n      onDragLeave={onDragOut}\n      onDragOver={onDragIn}\n      onDrop={(e) => {\n        e.preventDefault();\n        handleUpload(e.dataTransfer?.files);\n      }}\n    >\n      {/*TODO: show invalid files*/}\n      {showWarning && <></>}\n\n      <label htmlFor={props.inputId ?? 'file-upload'}>\n        <Icon\n          name={'upload'}\n          size={'large'}\n        />\n        <span>{props.label}</span>\n        <input\n          type='file'\n          multiple={props.isMultiple}\n          accept={props.mimeTypes?.join(', ')}\n          id={props.inputId ?? 'file-upload'}\n          onChange={(e) => handleUpload(e.target.files)}\n        />\n      </label>\n    </div>\n  );\n};\n"],"names":["Dropzone","props","showWarning","setShowWarning","useState","invalidFiles","setInvalidFiles","validFiles","setValidFiles","dragging","setDragging","makeDragHandler","set","value","e","onDragIn","onDragOut","handleUpload","files","fileList","emptyFiles","file","oversizeFiles","unsupportedFiles","_a","validatedFiles","jsxs","cx","styles","jsx","Fragment","Icon"],"mappings":"wRAiBaA,EAAYC,GAAyB,OAChD,KAAM,CAACC,EAAaC,CAAc,EAAIC,EAAAA,SAAS,EAAK,EAC9C,CAACC,EAAcC,CAAe,EAAIF,EAAAA,SAIrC,CAAE,MAAO,CAAA,EAAI,SAAU,CAAA,EAAI,UAAW,CAAA,EAAI,EACvC,CAACG,EAAYC,CAAa,EAAIJ,EAAAA,SAAiB,CAAA,CAAE,EACjD,CAACK,EAAUC,CAAW,EAAIN,EAAAA,SAAS,EAAK,EAExCO,EAAkB,CAACC,EAA2BC,IAAoBC,GAAuB,CAC7FA,EAAE,eAAA,EACFA,EAAE,gBAAA,EACFF,EAAIC,CAAK,CACX,EAEME,EAAWJ,EAAgBD,EAAa,EAAI,EAC5CM,EAAYL,EAAgBD,EAAa,EAAK,EAE9CO,EAAgBC,GAA2B,CAC/C,GAAI,CAACA,EACH,OAGF,MAAMC,EAAW,MAAM,KAAKD,CAAK,EAE3BE,EAAaD,EAAS,OAAQE,GAASA,EAAK,OAAS,CAAC,EACtDC,EAAgBrB,EAAM,cACxBkB,EAAS,OAAQE,GAASA,EAAK,KAAOpB,EAAM,cAAiB,KAAO,IAAI,EACxE,CAAA,EACEsB,EAAmBtB,EAAM,UAC3BkB,EAAS,OAAQE,GAAA,OAAS,SAACG,EAAAvB,EAAM,YAAN,MAAAuB,EAAiB,SAASH,EAAK,OAAK,EAC/D,CAAA,EACEI,EAAiBN,EAAS,OAC7BE,GACCA,EAAK,KAAO,IACXpB,EAAM,cAAgBoB,EAAK,MAAQpB,EAAM,cAAgB,KAAO,KAAO,MACvEA,EAAM,UAAYA,EAAM,UAAU,SAASoB,EAAK,IAAI,EAAI,GAAA,EAG7Db,EAAciB,CAAc,EAExBL,EAAW,OAAS,GAAKE,EAAc,OAAS,GAAKC,EAAiB,OAAS,GACjFjB,EAAgB,CAAE,MAAOc,EAAY,SAAUE,EAAe,UAAWC,EAAkB,EAC3FpB,EAAe,EAAI,EACnB,QAAQ,IAAI,aAAcI,CAAU,EACpC,QAAQ,IAAI,eAAgBF,CAAY,GAExCJ,EAAM,SAASiB,CAAK,EAGtBR,EAAY,EAAK,CACnB,EAEA,OACEgB,EAAAA,KAAC,MAAA,CACC,UAAWC,EAAAA,EAAGC,EAAO,SAAUnB,EAAWmB,EAAO,UAAY,EAAE,EAC/D,YAAab,EACb,YAAaC,EACb,WAAYD,EACZ,OAASD,GAAM,OACbA,EAAE,eAAA,EACFG,GAAaO,EAAAV,EAAE,eAAF,YAAAU,EAAgB,KAAK,CACpC,EAGC,SAAA,CAAAtB,GAAe2B,EAAAA,IAAAC,EAAAA,SAAA,EAAE,EAElBJ,EAAAA,KAAC,QAAA,CAAM,QAASzB,EAAM,SAAW,cAC/B,SAAA,CAAA4B,EAAAA,IAACE,EAAAA,KAAA,CACC,KAAM,SACN,KAAM,OAAA,CAAA,EAERF,EAAAA,IAAC,OAAA,CAAM,SAAA5B,EAAM,KAAA,CAAM,EACnB4B,EAAAA,IAAC,QAAA,CACC,KAAK,OACL,SAAU5B,EAAM,WAChB,QAAQuB,EAAAvB,EAAM,YAAN,YAAAuB,EAAiB,KAAK,MAC9B,GAAIvB,EAAM,SAAW,cACrB,SAAWa,GAAMG,EAAaH,EAAE,OAAO,KAAK,CAAA,CAAA,CAC9C,CAAA,CACF,CAAA,CAAA,CAAA,CAGN"}

package/dist/components/dropzone/index.js

@@ -1,63 +0,0 @@
-import { jsxs as f, jsx as o, Fragment as I } from "react/jsx-runtime";
-import { t as M } from "../../classix-DG18itHa.js";
-import { useState as s } from "react";
-import { Icon as w } from "../icon/index.js";
-import '../../assets/index14.css';const B = "_dropzone_1cqsl_1", j = "_highlight_1cqsl_41", z = {
-  dropzone: B,
-  highlight: j
-}, U = (e) => {
-  var d;
-  const [p, F] = s(!1), [y, v] = s({ empty: [], oversize: [], wrongType: [] }), [D, T] = s([]), [x, a] = s(!1), r = (i, t) => (n) => {
-    n.preventDefault(), n.stopPropagation(), i(t);
-  }, g = r(a, !0), S = r(a, !1), m = (i) => {
-    if (!i)
-      return;
-    const t = Array.from(i), n = t.filter((l) => l.size === 0), c = e.maxFileSizeMB ? t.filter((l) => l.size > e.maxFileSizeMB * 1024 * 1024) : [], h = e.mimeTypes ? t.filter((l) => {
-      var u;
-      return !((u = e.mimeTypes) != null && u.includes(l.type));
-    }) : [], _ = t.filter(
-      (l) => l.size > 0 && (e.maxFileSizeMB ? l.size <= e.maxFileSizeMB * 1024 * 1024 : !0) && (e.mimeTypes ? e.mimeTypes.includes(l.type) : !0)
-    );
-    T(_), n.length > 0 || c.length > 0 || h.length > 0 ? (v({ empty: n, oversize: c, wrongType: h }), F(!0), console.log("validFiles", D), console.log("invalidFiles", y)) : e.onUpload(i), a(!1);
-  };
-  return /* @__PURE__ */ f(
-    "div",
-    {
-      className: M(z.dropzone, x ? z.highlight : ""),
-      onDragEnter: g,
-      onDragLeave: S,
-      onDragOver: g,
-      onDrop: (i) => {
-        var t;
-        i.preventDefault(), m((t = i.dataTransfer) == null ? void 0 : t.files);
-      },
-      children: [
-        p && /* @__PURE__ */ o(I, {}),
-        /* @__PURE__ */ f("label", { htmlFor: e.inputId ?? "file-upload", children: [
-          /* @__PURE__ */ o(
-            w,
-            {
-              name: "upload",
-              size: "large"
-            }
-          ),
-          /* @__PURE__ */ o("span", { children: e.label }),
-          /* @__PURE__ */ o(
-            "input",
-            {
-              type: "file",
-              multiple: e.isMultiple,
-              accept: (d = e.mimeTypes) == null ? void 0 : d.join(", "),
-              id: e.inputId ?? "file-upload",
-              onChange: (i) => m(i.target.files)
-            }
-          )
-        ] })
-      ]
-    }
-  );
-};
-export {
-  U as Dropzone
-};
-//# sourceMappingURL=index.js.map

package/dist/components/dropzone/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/dropzone/index.tsx"],"sourcesContent":["import cx from 'classix';\nimport { useState } from 'react';\n\nimport { Icon } from '@/components/icon';\n\nimport styles from './styles.module.css';\n\nexport type DropzoneProps = {\n  allowDirectoryUpload?: boolean;\n  inputId?: string;\n  isMultiple?: boolean;\n  label?: string;\n  maxFileSizeMB?: number;\n  mimeTypes?: string[];\n  onUpload: (uploadContent: File[] | FileList) => void;\n};\n\nexport const Dropzone = (props: DropzoneProps) => {\n  const [showWarning, setShowWarning] = useState(false);\n  const [invalidFiles, setInvalidFiles] = useState<{\n    empty: File[];\n    oversize: File[];\n    wrongType: File[];\n  }>({ empty: [], oversize: [], wrongType: [] });\n  const [validFiles, setValidFiles] = useState<File[]>([]);\n  const [dragging, setDragging] = useState(false);\n\n  const makeDragHandler = (set: (v: boolean) => void, value: boolean) => (e: React.DragEvent) => {\n    e.preventDefault();\n    e.stopPropagation();\n    set(value);\n  };\n\n  const onDragIn = makeDragHandler(setDragging, true);\n  const onDragOut = makeDragHandler(setDragging, false);\n\n  const handleUpload = (files: FileList | null) => {\n    if (!files) {\n      return;\n    }\n\n    const fileList = Array.from(files);\n\n    const emptyFiles = fileList.filter((file) => file.size === 0);\n    const oversizeFiles = props.maxFileSizeMB\n      ? fileList.filter((file) => file.size > props.maxFileSizeMB! * 1024 * 1024)\n      : [];\n    const unsupportedFiles = props.mimeTypes\n      ? fileList.filter((file) => !props.mimeTypes?.includes(file.type))\n      : [];\n    const validatedFiles = fileList.filter(\n      (file) =>\n        file.size > 0 &&\n        (props.maxFileSizeMB ? file.size <= props.maxFileSizeMB * 1024 * 1024 : true) &&\n        (props.mimeTypes ? props.mimeTypes.includes(file.type) : true)\n    );\n\n    setValidFiles(validatedFiles);\n\n    if (emptyFiles.length > 0 || oversizeFiles.length > 0 || unsupportedFiles.length > 0) {\n      setInvalidFiles({ empty: emptyFiles, oversize: oversizeFiles, wrongType: unsupportedFiles });\n      setShowWarning(true);\n      console.log('validFiles', validFiles);\n      console.log('invalidFiles', invalidFiles);\n    } else {\n      props.onUpload(files);\n    }\n\n    setDragging(false);\n  };\n\n  return (\n    <div\n      className={cx(styles.dropzone, dragging ? styles.highlight : '')}\n      onDragEnter={onDragIn}\n      onDragLeave={onDragOut}\n      onDragOver={onDragIn}\n      onDrop={(e) => {\n        e.preventDefault();\n        handleUpload(e.dataTransfer?.files);\n      }}\n    >\n      {/*TODO: show invalid files*/}\n      {showWarning && <></>}\n\n      <label htmlFor={props.inputId ?? 'file-upload'}>\n        <Icon\n          name={'upload'}\n          size={'large'}\n        />\n        <span>{props.label}</span>\n        <input\n          type='file'\n          multiple={props.isMultiple}\n          accept={props.mimeTypes?.join(', ')}\n          id={props.inputId ?? 'file-upload'}\n          onChange={(e) => handleUpload(e.target.files)}\n        />\n      </label>\n    </div>\n  );\n};\n"],"names":["Dropzone","props","showWarning","setShowWarning","useState","invalidFiles","setInvalidFiles","validFiles","setValidFiles","dragging","setDragging","makeDragHandler","set","value","e","onDragIn","onDragOut","handleUpload","files","fileList","emptyFiles","file","oversizeFiles","unsupportedFiles","_a","validatedFiles","jsxs","cx","styles","jsx","Fragment","Icon"],"mappings":";;;;;;;GAiBaA,IAAW,CAACC,MAAyB;;AAChD,QAAM,CAACC,GAAaC,CAAc,IAAIC,EAAS,EAAK,GAC9C,CAACC,GAAcC,CAAe,IAAIF,EAIrC,EAAE,OAAO,CAAA,GAAI,UAAU,CAAA,GAAI,WAAW,CAAA,GAAI,GACvC,CAACG,GAAYC,CAAa,IAAIJ,EAAiB,CAAA,CAAE,GACjD,CAACK,GAAUC,CAAW,IAAIN,EAAS,EAAK,GAExCO,IAAkB,CAACC,GAA2BC,MAAmB,CAACC,MAAuB;AAC7F,IAAAA,EAAE,eAAA,GACFA,EAAE,gBAAA,GACFF,EAAIC,CAAK;AAAA,EACX,GAEME,IAAWJ,EAAgBD,GAAa,EAAI,GAC5CM,IAAYL,EAAgBD,GAAa,EAAK,GAE9CO,IAAe,CAACC,MAA2B;AAC/C,QAAI,CAACA;AACH;AAGF,UAAMC,IAAW,MAAM,KAAKD,CAAK,GAE3BE,IAAaD,EAAS,OAAO,CAACE,MAASA,EAAK,SAAS,CAAC,GACtDC,IAAgBrB,EAAM,gBACxBkB,EAAS,OAAO,CAACE,MAASA,EAAK,OAAOpB,EAAM,gBAAiB,OAAO,IAAI,IACxE,CAAA,GACEsB,IAAmBtB,EAAM,YAC3BkB,EAAS,OAAO,CAACE,MAAA;;AAAS,gBAACG,IAAAvB,EAAM,cAAN,QAAAuB,EAAiB,SAASH,EAAK;AAAA,KAAK,IAC/D,CAAA,GACEI,IAAiBN,EAAS;AAAA,MAC9B,CAACE,MACCA,EAAK,OAAO,MACXpB,EAAM,gBAAgBoB,EAAK,QAAQpB,EAAM,gBAAgB,OAAO,OAAO,QACvEA,EAAM,YAAYA,EAAM,UAAU,SAASoB,EAAK,IAAI,IAAI;AAAA,IAAA;AAG7D,IAAAb,EAAciB,CAAc,GAExBL,EAAW,SAAS,KAAKE,EAAc,SAAS,KAAKC,EAAiB,SAAS,KACjFjB,EAAgB,EAAE,OAAOc,GAAY,UAAUE,GAAe,WAAWC,GAAkB,GAC3FpB,EAAe,EAAI,GACnB,QAAQ,IAAI,cAAcI,CAAU,GACpC,QAAQ,IAAI,gBAAgBF,CAAY,KAExCJ,EAAM,SAASiB,CAAK,GAGtBR,EAAY,EAAK;AAAA,EACnB;AAEA,SACE,gBAAAgB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAGC,EAAO,UAAUnB,IAAWmB,EAAO,YAAY,EAAE;AAAA,MAC/D,aAAab;AAAA,MACb,aAAaC;AAAA,MACb,YAAYD;AAAA,MACZ,QAAQ,CAACD,MAAM;;AACb,QAAAA,EAAE,eAAA,GACFG,GAAaO,IAAAV,EAAE,iBAAF,gBAAAU,EAAgB,KAAK;AAAA,MACpC;AAAA,MAGC,UAAA;AAAA,QAAAtB,KAAe,gBAAA2B,EAAAC,GAAA,EAAE;AAAA,QAElB,gBAAAJ,EAAC,SAAA,EAAM,SAASzB,EAAM,WAAW,eAC/B,UAAA;AAAA,UAAA,gBAAA4B;AAAA,YAACE;AAAA,YAAA;AAAA,cACC,MAAM;AAAA,cACN,MAAM;AAAA,YAAA;AAAA,UAAA;AAAA,UAER,gBAAAF,EAAC,QAAA,EAAM,UAAA5B,EAAM,MAAA,CAAM;AAAA,UACnB,gBAAA4B;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,UAAU5B,EAAM;AAAA,cAChB,SAAQuB,IAAAvB,EAAM,cAAN,gBAAAuB,EAAiB,KAAK;AAAA,cAC9B,IAAIvB,EAAM,WAAW;AAAA,cACrB,UAAU,CAACa,MAAMG,EAAaH,EAAE,OAAO,KAAK;AAAA,YAAA;AAAA,UAAA;AAAA,QAC9C,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}