@solibo/solibo-ui 0.2.14 → 0.2.15

package/dist/components/nav/index.js

@@ -1,28 +1,96 @@
-import { jsx as n } from "react/jsx-runtime";
-import { t as r } from "../../classix-DG18itHa.js";
-import '../../assets/index2.css';const i = "_nav_tvxly_1", v = "_horizontal_tvxly_11", _ = "_tabs_tvxly_18", c = "_pills_tvxly_38", t = {
-  nav: i,
-  horizontal: v,
-  tabs: _,
-  pills: c
-}, e = {
+import { jsxs as f, jsx as n } from "react/jsx-runtime";
+import { t as _ } from "../../classix-DG18itHa.js";
+import { useRef as p, useState as S } from "react";
+import { Button as v } from "../button/index.js";
+import { Icon as b } from "../icon/index.js";
+import { Input as z } from "../input/index.js";
+import '../../assets/index4.css';const x = "_nav_1es7u_1", y = "_horizontal_1es7u_11", k = "_tabs_1es7u_18", D = "_pills_1es7u_39", I = "_searching_1es7u_119", N = "_search_1es7u_119", t = {
+  nav: x,
+  horizontal: y,
+  tabs: k,
+  pills: D,
+  searching: I,
+  search: N
+}, R = {
   default: "",
-  tabs: t.tabs,
-  pills: t.pills
-}, b = ({ animation: a, children: s, horizontal: l = !1, variant: o = "default" }) => /* @__PURE__ */ n(
-  "nav",
-  {
-    className: r(
-      a && a,
-      l && t.horizontal,
-      t.nav,
-      e[o]
-    ),
-    "data-orientation": l ? "horizontal" : "vertical",
-    children: s
-  }
-);
+  pills: t.pills,
+  tabs: t.tabs
+}, P = ({
+  animation: c,
+  children: d,
+  horizontal: o = !1,
+  variant: u = "default",
+  ...a
+}) => {
+  const s = p(null), [r, l] = S(a.isResultsPage ?? !1), g = a.isSearchable && u === "pills";
+  return /* @__PURE__ */ f(
+    "nav",
+    {
+      className: _(
+        c && c,
+        o && t.horizontal,
+        r && t.searching,
+        t.nav,
+        R[u]
+      ),
+      "data-orientation": o ? "horizontal" : "vertical",
+      children: [
+        d,
+        g && /* @__PURE__ */ f(
+          "form",
+          {
+            onSubmit: (e) => {
+              var m, h;
+              e.preventDefault();
+              const i = ((m = s.current) == null ? void 0 : m.value) ?? "";
+              (h = a.onSearchSubmit) == null || h.call(a, i);
+            },
+            children: [
+              /* @__PURE__ */ n(
+                z,
+                {
+                  ref: s,
+                  onKeyDown: (e) => {
+                    e.key === "Escape" && (l(!1), s.current && (s.current.value = ""));
+                  }
+                }
+              ),
+              r && /* @__PURE__ */ n(
+                v,
+                {
+                  variant: "minimal",
+                  onClick: () => l(!1),
+                  children: /* @__PURE__ */ n(b, { name: "x" })
+                }
+              ),
+              /* @__PURE__ */ n(
+                v,
+                {
+                  className: _(t.search),
+                  onClick: (e) => {
+                    var i;
+                    r || (e == null || e.preventDefault(), l(!0), (i = s.current) == null || i.focus());
+                  },
+                  type: "submit",
+                  variant: "minimal",
+                  children: /* @__PURE__ */ n(
+                    b,
+                    {
+                      name: "search",
+                      size: "medium",
+                      variant: r ? "white" : "default"
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
 export {
-  b as Nav
+  P as Nav
 };
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/nav/index.tsx"],"sourcesContent":["import cx from 'classix';\n\nimport type { AnimationName } from '../../styles/animations.ts';\nimport styles from './styles.module.css';\n\nconst variants = {\n  default: '',\n  tabs: styles.tabs,\n  pills: styles.pills,\n};\n\nexport type NavProps = {\n  animation?: AnimationName;\n  children?: React.ReactNode;\n  horizontal?: boolean;\n  variant?: keyof typeof variants;\n};\n\nexport const Nav = ({ animation, children, horizontal = false, variant = 'default' }: NavProps) => {\n  return (\n    <nav\n      className={cx(\n        animation && animation,\n        horizontal && styles.horizontal,\n        styles.nav,\n        variants[variant]\n      )}\n      data-orientation={horizontal ? 'horizontal' : 'vertical'}\n    >\n      {children}\n    </nav>\n  );\n};\n"],"names":["variants","styles","Nav","animation","children","horizontal","variant","jsx","cx"],"mappings":";;;;;;;GAKMA,IAAW;AAAA,EACf,SAAS;AAAA,EACT,MAAMC,EAAO;AAAA,EACb,OAAOA,EAAO;AAChB,GASaC,IAAM,CAAC,EAAE,WAAAC,GAAW,UAAAC,GAAU,YAAAC,IAAa,IAAO,SAAAC,IAAU,gBAErE,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC;AAAAA,MACTL,KAAaA;AAAA,MACbE,KAAcJ,EAAO;AAAA,MACrBA,EAAO;AAAA,MACPD,EAASM,CAAO;AAAA,IAAA;AAAA,IAElB,oBAAkBD,IAAa,eAAe;AAAA,IAE7C,UAAAD;AAAA,EAAA;AAAA;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/nav/index.tsx"],"sourcesContent":["import cx from 'classix';\nimport { useRef, useState } from 'react';\n\nimport { Button } from '@/components/button';\nimport { Icon } from '@/components/icon';\nimport { Input } from '@/components/input';\n\nimport type { AnimationName } from '../../styles/animations.ts';\nimport styles from './styles.module.css';\n\nconst variants = {\n  default: '',\n  pills: styles.pills,\n  tabs: styles.tabs,\n};\n\nexport type NavProps = {\n  animation?: AnimationName;\n  children?: React.ReactNode;\n  horizontal?: boolean;\n  isResultsPage?: boolean;\n  isSearchable?: boolean;\n  onSearchSubmit?: (value: string) => void;\n  variant?: keyof typeof variants;\n};\n\nexport const Nav = ({\n  animation,\n  children,\n  horizontal = false,\n  variant = 'default',\n  ...props\n}: NavProps) => {\n  const searchInputRef = useRef<HTMLInputElement>(null);\n  const [searching, setSearching] = useState(props.isResultsPage ?? false);\n  const isSearchable = props.isSearchable && variant === 'pills';\n\n  return (\n    <nav\n      className={cx(\n        animation && animation,\n        horizontal && styles.horizontal,\n        searching && styles.searching,\n        styles.nav,\n        variants[variant]\n      )}\n      data-orientation={horizontal ? 'horizontal' : 'vertical'}\n    >\n      {children}\n\n      {isSearchable && (\n        <form\n          onSubmit={(e) => {\n            e.preventDefault();\n            const value = searchInputRef.current?.value ?? '';\n            props.onSearchSubmit?.(value);\n          }}\n        >\n          <Input\n            ref={searchInputRef}\n            onKeyDown={(e) => {\n              if (e.key === 'Escape') {\n                setSearching(false);\n\n                if (searchInputRef.current) searchInputRef.current.value = '';\n              }\n            }}\n          />\n\n          {searching && (\n            <Button\n              variant={'minimal'}\n              onClick={() => setSearching(false)}\n            >\n              <Icon name={'x'} />\n            </Button>\n          )}\n\n          <Button\n            className={cx(styles.search)}\n            onClick={(e) => {\n              if (searching) {\n                return;\n              } else {\n                e?.preventDefault();\n                setSearching(true);\n                searchInputRef.current?.focus();\n              }\n            }}\n            type={'submit'}\n            variant={'minimal'}\n          >\n            <Icon\n              name={'search'}\n              size={'medium'}\n              variant={searching ? 'white' : 'default'}\n            />\n          </Button>\n        </form>\n      )}\n    </nav>\n  );\n};\n"],"names":["variants","styles","Nav","animation","children","horizontal","variant","props","searchInputRef","useRef","searching","setSearching","useState","isSearchable","jsxs","cx","value","_a","_b","jsx","Input","Button","Icon"],"mappings":";;;;;;;;;;;;;GAUMA,IAAW;AAAA,EACf,SAAS;AAAA,EACT,OAAOC,EAAO;AAAA,EACd,MAAMA,EAAO;AACf,GAYaC,IAAM,CAAC;AAAA,EAClB,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,SAAAC,IAAU;AAAA,EACV,GAAGC;AACL,MAAgB;AACd,QAAMC,IAAiBC,EAAyB,IAAI,GAC9C,CAACC,GAAWC,CAAY,IAAIC,EAASL,EAAM,iBAAiB,EAAK,GACjEM,IAAeN,EAAM,gBAAgBD,MAAY;AAEvD,SACE,gBAAAQ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAAA,QACTZ,KAAaA;AAAA,QACbE,KAAcJ,EAAO;AAAA,QACrBS,KAAaT,EAAO;AAAA,QACpBA,EAAO;AAAA,QACPD,EAASM,CAAO;AAAA,MAAA;AAAA,MAElB,oBAAkBD,IAAa,eAAe;AAAA,MAE7C,UAAA;AAAA,QAAAD;AAAA,QAEAS,KACC,gBAAAC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,UAAU,CAAC,MAAM;;AACf,gBAAE,eAAA;AACF,oBAAME,MAAQC,IAAAT,EAAe,YAAf,gBAAAS,EAAwB,UAAS;AAC/C,eAAAC,IAAAX,EAAM,mBAAN,QAAAW,EAAA,KAAAX,GAAuBS;AAAA,YACzB;AAAA,YAEA,UAAA;AAAA,cAAA,gBAAAG;AAAA,gBAACC;AAAA,gBAAA;AAAA,kBACC,KAAKZ;AAAA,kBACL,WAAW,CAAC,MAAM;AAChB,oBAAI,EAAE,QAAQ,aACZG,EAAa,EAAK,GAEdH,EAAe,YAASA,EAAe,QAAQ,QAAQ;AAAA,kBAE/D;AAAA,gBAAA;AAAA,cAAA;AAAA,cAGDE,KACC,gBAAAS;AAAA,gBAACE;AAAA,gBAAA;AAAA,kBACC,SAAS;AAAA,kBACT,SAAS,MAAMV,EAAa,EAAK;AAAA,kBAEjC,UAAA,gBAAAQ,EAACG,GAAA,EAAK,MAAM,IAAA,CAAK;AAAA,gBAAA;AAAA,cAAA;AAAA,cAIrB,gBAAAH;AAAA,gBAACE;AAAA,gBAAA;AAAA,kBACC,WAAWN,EAAGd,EAAO,MAAM;AAAA,kBAC3B,SAAS,CAAC,MAAM;;AACd,oBAAIS,MAGF,eAAG,kBACHC,EAAa,EAAI,IACjBM,IAAAT,EAAe,YAAf,QAAAS,EAAwB;AAAA,kBAE5B;AAAA,kBACA,MAAM;AAAA,kBACN,SAAS;AAAA,kBAET,UAAA,gBAAAE;AAAA,oBAACG;AAAA,oBAAA;AAAA,sBACC,MAAM;AAAA,sBACN,MAAM;AAAA,sBACN,SAASZ,IAAY,UAAU;AAAA,oBAAA;AAAA,kBAAA;AAAA,gBACjC;AAAA,cAAA;AAAA,YACF;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAIR;"}

package/dist/components/picture/index.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index3.css');const n=require("react/jsx-runtime"),g=require("../../classix-5H4IWnMA.cjs"),s=require("react"),P=require("../button/index.cjs"),R=require("../dialog/index.cjs"),k=require("../dropzone/index.cjs"),C=require("../figure/index.cjs"),M=require("../icon/index.cjs"),N="_picture_1ou2v_1",T="_image_1ou2v_17",W="_dropzone_1ou2v_29",O="_visible_1ou2v_36",B="_hidden_1ou2v_41",H="_profile_1ou2v_58",t={picture:N,image:T,dropzone:W,visible:O,hidden:B,"preview-buttons":"_preview-buttons_1ou2v_47",profile:H},$={default:t.default,profile:t.profile},A=({source:a,alt:y,variant:f="default",...e})=>{const[q,u]=s.useState(e.placeholderSrc??a),[F,E]=s.useState(!1),[_,v]=s.useState(null),[U,o]=s.useState(!1),[r,m]=s.useState(!1),[p,c]=s.useState(null),x=e.minimumImagePixelWidth??400,h=e.minimumImagePixelHeight??400,L=s.useRef(null),w=s.useCallback(()=>{m(!1),v(null),u(a),c(null)},[a]),b=["image/jpeg","image/png","image/gif","image/webp","image/bmp","image/svg+xml","image/tiff"];s.useEffect(()=>{if(!a)return;u(a),m(!1);const i=new window.Image(0,0);i.src=a,i.srcset=e.srcSet??a,i.onload=()=>{E(!0)}},[a,e.srcSet]);const S=i=>{const l=i[0];if(!l)return;b.includes(l.type)||c("Unsupported file type. Please upload a valid image.");const j=new FileReader;j.onload=I=>{var z;const d=new window.Image;d.onload=()=>{var D;(d.width<x||d.height<h)&&c(`Image is too small. Minimum size is ${x}x${h}px.`),m(!0),u((D=I.target)==null?void 0:D.result)},d.src=(z=I.target)==null?void 0:z.result},j.readAsDataURL(l),v(l)};return n.jsxs(n.Fragment,{children:[n.jsxs("div",{className:g.t(t.picture,$[f],r?t.previewing:""),onMouseEnter:()=>o(e.canEdit),onMouseLeave:()=>o(!1),onDragOver:i=>{i.preventDefault(),o(e.canEdit)},onDragLeave:()=>o(!1),onDrop:i=>{var l;i.preventDefault(),o(!1),e.canEdit&&S((l=i.dataTransfer)==null?void 0:l.files)},children:[r?null:n.jsx("div",{className:g.t(t.dropzone,U&&t.visible,e.canEdit?"":t.hidden),children:n.jsx(k.Dropzone,{onUpload:i=>{S(i)},mimeTypes:b,inputId:e.inputId})}),f==="profile"&&!a?n.jsx(M.Icon,{name:"user"}):n.jsxs(C.Figure,{label:e.caption,children:[n.jsx("img",{src:q,srcSet:e.srcSet,sizes:e.sizes,alt:y,className:g.t(t.image,r?t.previewing:"",F?"":"loading"),loading:"lazy",ref:L}),r&&n.jsxs("div",{className:t["preview-buttons"],children:[n.jsx(P.Button,{label:"Save",loading:e.isUploading,onClick:()=>{_&&e.handleUpload&&e.handleUpload(_)},variant:"primary"}),n.jsx(P.Button,{label:"Cancel",onClick:()=>w()})]})]})]}),n.jsx(R.Dialog,{open:!!p,button:"Ok",message:p,onSubmit:()=>{c(null),w()}})]})};exports.Picture=A;
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../src/components/picture/index.tsx"],"sourcesContent":["import cx from 'classix';\nimport { useCallback, useEffect, useRef, useState } from 'react';\n\nimport { Button } from '@/components/button';\nimport { Dialog } from '@/components/dialog';\nimport { Dropzone } from '@/components/dropzone';\nimport { Figure } from '@/components/figure';\nimport { Icon } from '@/components/icon';\n\nimport styles from './styles.module.css';\n\nconst variants = {\n  default: styles.default,\n  profile: styles.profile,\n};\n\nexport type ImageProps = {\n  alt: string;\n  canEdit: boolean;\n  caption?: string;\n  handleUpload?: (imageFile: File) => void;\n  inputId?: string;\n  isUploading?: boolean;\n  minimumImagePixelHeight?: number;\n  minimumImagePixelWidth?: number;\n  placeholderSrc?: string;\n  sizes?: string;\n  source?: string;\n  srcSet?: string;\n  variant?: keyof typeof variants;\n};\n\nexport const Picture = ({ source, alt, variant = 'default', ...props }: ImageProps) => {\n  const [imageSrc, setImageSrc] = useState(props.placeholderSrc ?? source);\n  const [imageLoaded, setImageLoaded] = useState(false);\n  const [pendingFile, setPendingFile] = useState<File | null>(null);\n  const [showDropzone, setShowDropzone] = useState(false);\n  const [isPreviewing, setIsPreviewing] = useState(false);\n  const [dialogWarning, setDialogWarning] = useState<string | null>(null);\n\n  const minimumImagePixelWidth = props.minimumImagePixelWidth ?? 400;\n  const minimumImagePixelHeight = props.minimumImagePixelHeight ?? 400;\n  const imgRef = useRef<HTMLImageElement>(null);\n\n  const reset = useCallback(() => {\n    setIsPreviewing(false);\n    setPendingFile(null);\n    setImageSrc(source);\n    setDialogWarning(null);\n  }, [source]);\n\n  const allowedImageFileTypes = [\n    'image/jpeg',\n    'image/png',\n    'image/gif',\n    'image/webp',\n    'image/bmp',\n    'image/svg+xml',\n    'image/tiff',\n  ];\n\n  useEffect(() => {\n    if (!source) {\n      return;\n    }\n\n    setImageSrc(source);\n    setIsPreviewing(false);\n    const img = new window.Image(0, 0);\n    img.src = source;\n    img.srcset = props.srcSet ?? source;\n    img.onload = () => {\n      setImageLoaded(true);\n    };\n  }, [source, props.srcSet]);\n\n  const handleFiles = (files: FileList | File[]) => {\n    const file = files[0];\n    if (!file) return;\n\n    if (!allowedImageFileTypes.includes(file.type)) {\n      setDialogWarning('Unsupported file type. Please upload a valid image.');\n    }\n\n    const reader = new FileReader();\n    reader.onload = (event) => {\n      const img = new window.Image();\n      img.onload = () => {\n        if (img.width < minimumImagePixelWidth || img.height < minimumImagePixelHeight) {\n          setDialogWarning(\n            `Image is too small. Minimum size is ${minimumImagePixelWidth}x${minimumImagePixelHeight}px.`\n          );\n        }\n        setIsPreviewing(true);\n        setImageSrc(event.target?.result as string);\n      };\n      img.src = event.target?.result as string;\n    };\n    reader.readAsDataURL(file);\n    setPendingFile(file);\n  };\n\n  return (\n    <>\n      <div\n        className={cx(styles.picture, variants[variant], isPreviewing ? styles.previewing : '')}\n        onMouseEnter={() => setShowDropzone(props.canEdit)}\n        onMouseLeave={() => setShowDropzone(false)}\n        onDragOver={(e) => {\n          e.preventDefault();\n          setShowDropzone(props.canEdit);\n        }}\n        onDragLeave={() => setShowDropzone(false)}\n        onDrop={(e) => {\n          e.preventDefault();\n          setShowDropzone(false);\n          if (props.canEdit) {\n            handleFiles(e.dataTransfer?.files);\n          }\n        }}\n      >\n        {isPreviewing ? null : (\n          <div\n            className={cx(\n              styles.dropzone,\n              showDropzone && styles.visible,\n              props.canEdit ? '' : styles.hidden\n            )}\n          >\n            <Dropzone\n              onUpload={(files) => {\n                handleFiles(files);\n              }}\n              mimeTypes={allowedImageFileTypes}\n              inputId={props.inputId}\n            />\n          </div>\n        )}\n\n        {variant === 'profile' && !source ? (\n          <Icon name={'user'} />\n        ) : (\n          <Figure label={props.caption}>\n            <img\n              src={imageSrc}\n              srcSet={props.srcSet}\n              sizes={props.sizes}\n              alt={alt}\n              className={cx(\n                styles.image,\n                isPreviewing ? styles.previewing : '',\n                imageLoaded ? '' : 'loading'\n              )}\n              loading={'lazy'}\n              ref={imgRef}\n            />\n            {isPreviewing && (\n              <div className={styles['preview-buttons']}>\n                <Button\n                  label={'Save'}\n                  loading={props.isUploading}\n                  onClick={() => {\n                    if (pendingFile && props.handleUpload) {\n                      props.handleUpload(pendingFile);\n                    }\n                  }}\n                  variant={'primary'}\n                />\n                <Button\n                  label={'Cancel'}\n                  onClick={() => reset()}\n                />\n              </div>\n            )}\n          </Figure>\n        )}\n      </div>\n\n      <Dialog\n        open={!!dialogWarning}\n        button={'Ok'}\n        message={dialogWarning!}\n        onSubmit={() => {\n          setDialogWarning(null);\n          reset();\n        }}\n      />\n    </>\n  );\n};\n"],"names":["variants","styles","Picture","source","alt","variant","props","imageSrc","setImageSrc","useState","imageLoaded","setImageLoaded","pendingFile","setPendingFile","showDropzone","setShowDropzone","isPreviewing","setIsPreviewing","dialogWarning","setDialogWarning","minimumImagePixelWidth","minimumImagePixelHeight","imgRef","useRef","reset","useCallback","allowedImageFileTypes","useEffect","img","handleFiles","files","file","reader","event","_a","jsxs","Fragment","cx","e","jsx","Dropzone","Icon","Figure","Button","Dialog"],"mappings":"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"}

package/dist/components/picture/index.js

@@ -0,0 +1,150 @@
+import { jsxs as g, Fragment as R, jsx as l } from "react/jsx-runtime";
+import { t as f } from "../../classix-DG18itHa.js";
+import { useState as o, useRef as W, useCallback as j, useEffect as M } from "react";
+import { Button as F } from "../button/index.js";
+import { Dialog as T } from "../dialog/index.js";
+import { Dropzone as H } from "../dropzone/index.js";
+import { Figure as O } from "../figure/index.js";
+import { Icon as $ } from "../icon/index.js";
+import '../../assets/index3.css';const A = "_picture_1ou2v_1", B = "_image_1ou2v_17", q = "_dropzone_1ou2v_29", G = "_visible_1ou2v_36", J = "_hidden_1ou2v_41", K = "_profile_1ou2v_58", n = {
+  picture: A,
+  image: B,
+  dropzone: q,
+  visible: G,
+  hidden: J,
+  "preview-buttons": "_preview-buttons_1ou2v_47",
+  profile: K
+}, Q = {
+  default: n.default,
+  profile: n.profile
+}, ae = ({ source: t, alt: E, variant: v = "default", ...e }) => {
+  const [U, c] = o(e.placeholderSrc ?? t), [L, k] = o(!1), [p, h] = o(null), [C, s] = o(!1), [m, u] = o(!1), [_, r] = o(null), w = e.minimumImagePixelWidth ?? 400, b = e.minimumImagePixelHeight ?? 400, N = W(null), I = j(() => {
+    u(!1), h(null), c(t), r(null);
+  }, [t]), z = [
+    "image/jpeg",
+    "image/png",
+    "image/gif",
+    "image/webp",
+    "image/bmp",
+    "image/svg+xml",
+    "image/tiff"
+  ];
+  M(() => {
+    if (!t)
+      return;
+    c(t), u(!1);
+    const i = new window.Image(0, 0);
+    i.src = t, i.srcset = e.srcSet ?? t, i.onload = () => {
+      k(!0);
+    };
+  }, [t, e.srcSet]);
+  const D = (i) => {
+    const a = i[0];
+    if (!a) return;
+    z.includes(a.type) || r("Unsupported file type. Please upload a valid image.");
+    const S = new FileReader();
+    S.onload = (x) => {
+      var P;
+      const d = new window.Image();
+      d.onload = () => {
+        var y;
+        (d.width < w || d.height < b) && r(
+          `Image is too small. Minimum size is ${w}x${b}px.`
+        ), u(!0), c((y = x.target) == null ? void 0 : y.result);
+      }, d.src = (P = x.target) == null ? void 0 : P.result;
+    }, S.readAsDataURL(a), h(a);
+  };
+  return /* @__PURE__ */ g(R, { children: [
+    /* @__PURE__ */ g(
+      "div",
+      {
+        className: f(n.picture, Q[v], m ? n.previewing : ""),
+        onMouseEnter: () => s(e.canEdit),
+        onMouseLeave: () => s(!1),
+        onDragOver: (i) => {
+          i.preventDefault(), s(e.canEdit);
+        },
+        onDragLeave: () => s(!1),
+        onDrop: (i) => {
+          var a;
+          i.preventDefault(), s(!1), e.canEdit && D((a = i.dataTransfer) == null ? void 0 : a.files);
+        },
+        children: [
+          m ? null : /* @__PURE__ */ l(
+            "div",
+            {
+              className: f(
+                n.dropzone,
+                C && n.visible,
+                e.canEdit ? "" : n.hidden
+              ),
+              children: /* @__PURE__ */ l(
+                H,
+                {
+                  onUpload: (i) => {
+                    D(i);
+                  },
+                  mimeTypes: z,
+                  inputId: e.inputId
+                }
+              )
+            }
+          ),
+          v === "profile" && !t ? /* @__PURE__ */ l($, { name: "user" }) : /* @__PURE__ */ g(O, { label: e.caption, children: [
+            /* @__PURE__ */ l(
+              "img",
+              {
+                src: U,
+                srcSet: e.srcSet,
+                sizes: e.sizes,
+                alt: E,
+                className: f(
+                  n.image,
+                  m ? n.previewing : "",
+                  L ? "" : "loading"
+                ),
+                loading: "lazy",
+                ref: N
+              }
+            ),
+            m && /* @__PURE__ */ g("div", { className: n["preview-buttons"], children: [
+              /* @__PURE__ */ l(
+                F,
+                {
+                  label: "Save",
+                  loading: e.isUploading,
+                  onClick: () => {
+                    p && e.handleUpload && e.handleUpload(p);
+                  },
+                  variant: "primary"
+                }
+              ),
+              /* @__PURE__ */ l(
+                F,
+                {
+                  label: "Cancel",
+                  onClick: () => I()
+                }
+              )
+            ] })
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ l(
+      T,
+      {
+        open: !!_,
+        button: "Ok",
+        message: _,
+        onSubmit: () => {
+          r(null), I();
+        }
+      }
+    )
+  ] });
+};
+export {
+  ae as Picture
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/picture/index.tsx"],"sourcesContent":["import cx from 'classix';\nimport { useCallback, useEffect, useRef, useState } from 'react';\n\nimport { Button } from '@/components/button';\nimport { Dialog } from '@/components/dialog';\nimport { Dropzone } from '@/components/dropzone';\nimport { Figure } from '@/components/figure';\nimport { Icon } from '@/components/icon';\n\nimport styles from './styles.module.css';\n\nconst variants = {\n  default: styles.default,\n  profile: styles.profile,\n};\n\nexport type ImageProps = {\n  alt: string;\n  canEdit: boolean;\n  caption?: string;\n  handleUpload?: (imageFile: File) => void;\n  inputId?: string;\n  isUploading?: boolean;\n  minimumImagePixelHeight?: number;\n  minimumImagePixelWidth?: number;\n  placeholderSrc?: string;\n  sizes?: string;\n  source?: string;\n  srcSet?: string;\n  variant?: keyof typeof variants;\n};\n\nexport const Picture = ({ source, alt, variant = 'default', ...props }: ImageProps) => {\n  const [imageSrc, setImageSrc] = useState(props.placeholderSrc ?? source);\n  const [imageLoaded, setImageLoaded] = useState(false);\n  const [pendingFile, setPendingFile] = useState<File | null>(null);\n  const [showDropzone, setShowDropzone] = useState(false);\n  const [isPreviewing, setIsPreviewing] = useState(false);\n  const [dialogWarning, setDialogWarning] = useState<string | null>(null);\n\n  const minimumImagePixelWidth = props.minimumImagePixelWidth ?? 400;\n  const minimumImagePixelHeight = props.minimumImagePixelHeight ?? 400;\n  const imgRef = useRef<HTMLImageElement>(null);\n\n  const reset = useCallback(() => {\n    setIsPreviewing(false);\n    setPendingFile(null);\n    setImageSrc(source);\n    setDialogWarning(null);\n  }, [source]);\n\n  const allowedImageFileTypes = [\n    'image/jpeg',\n    'image/png',\n    'image/gif',\n    'image/webp',\n    'image/bmp',\n    'image/svg+xml',\n    'image/tiff',\n  ];\n\n  useEffect(() => {\n    if (!source) {\n      return;\n    }\n\n    setImageSrc(source);\n    setIsPreviewing(false);\n    const img = new window.Image(0, 0);\n    img.src = source;\n    img.srcset = props.srcSet ?? source;\n    img.onload = () => {\n      setImageLoaded(true);\n    };\n  }, [source, props.srcSet]);\n\n  const handleFiles = (files: FileList | File[]) => {\n    const file = files[0];\n    if (!file) return;\n\n    if (!allowedImageFileTypes.includes(file.type)) {\n      setDialogWarning('Unsupported file type. Please upload a valid image.');\n    }\n\n    const reader = new FileReader();\n    reader.onload = (event) => {\n      const img = new window.Image();\n      img.onload = () => {\n        if (img.width < minimumImagePixelWidth || img.height < minimumImagePixelHeight) {\n          setDialogWarning(\n            `Image is too small. Minimum size is ${minimumImagePixelWidth}x${minimumImagePixelHeight}px.`\n          );\n        }\n        setIsPreviewing(true);\n        setImageSrc(event.target?.result as string);\n      };\n      img.src = event.target?.result as string;\n    };\n    reader.readAsDataURL(file);\n    setPendingFile(file);\n  };\n\n  return (\n    <>\n      <div\n        className={cx(styles.picture, variants[variant], isPreviewing ? styles.previewing : '')}\n        onMouseEnter={() => setShowDropzone(props.canEdit)}\n        onMouseLeave={() => setShowDropzone(false)}\n        onDragOver={(e) => {\n          e.preventDefault();\n          setShowDropzone(props.canEdit);\n        }}\n        onDragLeave={() => setShowDropzone(false)}\n        onDrop={(e) => {\n          e.preventDefault();\n          setShowDropzone(false);\n          if (props.canEdit) {\n            handleFiles(e.dataTransfer?.files);\n          }\n        }}\n      >\n        {isPreviewing ? null : (\n          <div\n            className={cx(\n              styles.dropzone,\n              showDropzone && styles.visible,\n              props.canEdit ? '' : styles.hidden\n            )}\n          >\n            <Dropzone\n              onUpload={(files) => {\n                handleFiles(files);\n              }}\n              mimeTypes={allowedImageFileTypes}\n              inputId={props.inputId}\n            />\n          </div>\n        )}\n\n        {variant === 'profile' && !source ? (\n          <Icon name={'user'} />\n        ) : (\n          <Figure label={props.caption}>\n            <img\n              src={imageSrc}\n              srcSet={props.srcSet}\n              sizes={props.sizes}\n              alt={alt}\n              className={cx(\n                styles.image,\n                isPreviewing ? styles.previewing : '',\n                imageLoaded ? '' : 'loading'\n              )}\n              loading={'lazy'}\n              ref={imgRef}\n            />\n            {isPreviewing && (\n              <div className={styles['preview-buttons']}>\n                <Button\n                  label={'Save'}\n                  loading={props.isUploading}\n                  onClick={() => {\n                    if (pendingFile && props.handleUpload) {\n                      props.handleUpload(pendingFile);\n                    }\n                  }}\n                  variant={'primary'}\n                />\n                <Button\n                  label={'Cancel'}\n                  onClick={() => reset()}\n                />\n              </div>\n            )}\n          </Figure>\n        )}\n      </div>\n\n      <Dialog\n        open={!!dialogWarning}\n        button={'Ok'}\n        message={dialogWarning!}\n        onSubmit={() => {\n          setDialogWarning(null);\n          reset();\n        }}\n      />\n    </>\n  );\n};\n"],"names":["variants","styles","Picture","source","alt","variant","props","imageSrc","setImageSrc","useState","imageLoaded","setImageLoaded","pendingFile","setPendingFile","showDropzone","setShowDropzone","isPreviewing","setIsPreviewing","dialogWarning","setDialogWarning","minimumImagePixelWidth","minimumImagePixelHeight","imgRef","useRef","reset","useCallback","allowedImageFileTypes","useEffect","img","handleFiles","files","file","reader","event","_a","jsxs","Fragment","cx","e","jsx","Dropzone","Icon","Figure","Button","Dialog"],"mappings":"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"}

package/dist/components/toggle/index.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index2.css');const e=require("react/jsx-runtime"),r=require("../../classix-5H4IWnMA.cjs"),d=require("../../styles.module-B_pXIacc.cjs"),g="_toggle_12y8y_1",i="_track_12y8y_15",u="_dot_12y8y_24",t={toggle:g,track:i,dot:u},y=({isChecked:c,isDefaultChecked:l,isDisabled:o,isLoading:s,label:a,onChange:n})=>e.jsxs("label",{className:t.toggle,children:[e.jsx("input",{checked:c,defaultChecked:l,disabled:o||s,onChange:n,type:"checkbox"}),e.jsx("span",{"aria-hidden":"true",className:t.track,children:e.jsx("span",{className:r.t(t.dot,s&&d.loadingStyles.spinner)})}),e.jsx("span",{className:"toggle",children:a})]});exports.Toggle=y;
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../src/components/toggle/index.tsx"],"sourcesContent":["import cx from 'classix';\n\nimport loadingStyles from '../loading/styles.module.css';\nimport styles from './styles.module.css';\n\nexport type ToggleProps = {\n  isChecked?: boolean;\n  isDefaultChecked?: boolean;\n  isDisabled?: boolean;\n  isLoading?: boolean;\n  label?: string;\n  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;\n};\n\nexport const Toggle = ({\n  isChecked,\n  isDefaultChecked,\n  isDisabled,\n  isLoading,\n  label,\n  onChange,\n}: ToggleProps) => {\n  return (\n    <label className={styles.toggle}>\n      <input\n        checked={isChecked}\n        defaultChecked={isDefaultChecked}\n        disabled={isDisabled || isLoading}\n        onChange={onChange}\n        type='checkbox'\n      />\n      <span\n        aria-hidden='true'\n        className={styles.track}\n      >\n        <span className={cx(styles.dot, isLoading && loadingStyles.spinner)}></span>\n      </span>\n      <span className='toggle'>{label}</span>\n    </label>\n  );\n};\n"],"names":["Toggle","isChecked","isDefaultChecked","isDisabled","isLoading","label","onChange","jsxs","styles","jsx","cx","loadingStyles"],"mappings":"gSAcaA,EAAS,CAAC,CACrB,UAAAC,EACA,iBAAAC,EACA,WAAAC,EACA,UAAAC,EACA,MAAAC,EACA,SAAAC,CACF,IAEIC,EAAAA,KAAC,QAAA,CAAM,UAAWC,EAAO,OACvB,SAAA,CAAAC,EAAAA,IAAC,QAAA,CACC,QAASR,EACT,eAAgBC,EAChB,SAAUC,GAAcC,EACxB,SAAAE,EACA,KAAK,UAAA,CAAA,EAEPG,EAAAA,IAAC,OAAA,CACC,cAAY,OACZ,UAAWD,EAAO,MAElB,SAAAC,EAAAA,IAAC,QAAK,UAAWC,EAAAA,EAAGF,EAAO,IAAKJ,GAAaO,EAAAA,cAAc,OAAO,CAAA,CAAG,CAAA,CAAA,EAEvEF,EAAAA,IAAC,OAAA,CAAK,UAAU,SAAU,SAAAJ,CAAA,CAAM,CAAA,EAClC"}

package/dist/components/toggle/index.js

@@ -0,0 +1,39 @@
+import { jsxs as n, jsx as t } from "react/jsx-runtime";
+import { t as d } from "../../classix-DG18itHa.js";
+import { l as g } from "../../styles.module-BhmNqlYd.js";
+import '../../assets/index2.css';const i = "_toggle_12y8y_1", m = "_track_12y8y_15", p = "_dot_12y8y_24", e = {
+  toggle: i,
+  track: m,
+  dot: p
+}, k = ({
+  isChecked: o,
+  isDefaultChecked: a,
+  isDisabled: c,
+  isLoading: s,
+  label: l,
+  onChange: r
+}) => /* @__PURE__ */ n("label", { className: e.toggle, children: [
+  /* @__PURE__ */ t(
+    "input",
+    {
+      checked: o,
+      defaultChecked: a,
+      disabled: c || s,
+      onChange: r,
+      type: "checkbox"
+    }
+  ),
+  /* @__PURE__ */ t(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: e.track,
+      children: /* @__PURE__ */ t("span", { className: d(e.dot, s && g.spinner) })
+    }
+  ),
+  /* @__PURE__ */ t("span", { className: "toggle", children: l })
+] });
+export {
+  k as Toggle
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/toggle/index.tsx"],"sourcesContent":["import cx from 'classix';\n\nimport loadingStyles from '../loading/styles.module.css';\nimport styles from './styles.module.css';\n\nexport type ToggleProps = {\n  isChecked?: boolean;\n  isDefaultChecked?: boolean;\n  isDisabled?: boolean;\n  isLoading?: boolean;\n  label?: string;\n  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;\n};\n\nexport const Toggle = ({\n  isChecked,\n  isDefaultChecked,\n  isDisabled,\n  isLoading,\n  label,\n  onChange,\n}: ToggleProps) => {\n  return (\n    <label className={styles.toggle}>\n      <input\n        checked={isChecked}\n        defaultChecked={isDefaultChecked}\n        disabled={isDisabled || isLoading}\n        onChange={onChange}\n        type='checkbox'\n      />\n      <span\n        aria-hidden='true'\n        className={styles.track}\n      >\n        <span className={cx(styles.dot, isLoading && loadingStyles.spinner)}></span>\n      </span>\n      <span className='toggle'>{label}</span>\n    </label>\n  );\n};\n"],"names":["Toggle","isChecked","isDefaultChecked","isDisabled","isLoading","label","onChange","jsxs","styles","jsx","cx","loadingStyles"],"mappings":";;;;;;;GAcaA,IAAS,CAAC;AAAA,EACrB,WAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,YAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AACF,MAEI,gBAAAC,EAAC,SAAA,EAAM,WAAWC,EAAO,QACvB,UAAA;AAAA,EAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAASR;AAAA,MACT,gBAAgBC;AAAA,MAChB,UAAUC,KAAcC;AAAA,MACxB,UAAAE;AAAA,MACA,MAAK;AAAA,IAAA;AAAA,EAAA;AAAA,EAEP,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAY;AAAA,MACZ,WAAWD,EAAO;AAAA,MAElB,UAAA,gBAAAC,EAAC,UAAK,WAAWC,EAAGF,EAAO,KAAKJ,KAAaO,EAAc,OAAO,EAAA,CAAG;AAAA,IAAA;AAAA,EAAA;AAAA,EAEvE,gBAAAF,EAAC,QAAA,EAAK,WAAU,UAAU,UAAAJ,EAAA,CAAM;AAAA,GAClC;"}

package/dist/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('./assets/index.css');const n=require("./components/accordion/index.cjs"),e=require("./components/aside/index.cjs"),o=require("./components/banner/index.cjs"),r=require("./components/branding/index.cjs"),i=require("./components/button/index.cjs"),t=require("./components/card/index.cjs"),c=require("./components/dialog/index.cjs"),d=require("./components/dropdown/index.cjs"),s=require("./components/editor/index.cjs"),_=require("./components/figure/index.cjs"),u=require("./components/form/index.cjs"),p=require("./components/header/index.cjs"),a=require("./components/icon/index.cjs"),m=require("./components/input/index.cjs"),q=require("./components/link/index.cjs"),x=require("./components/list/index.cjs"),g=require("./components/nav/index.cjs");exports.Accordion=n.Accordion;exports.AccordionGroup=n.AccordionGroup;exports.Aside=e.Aside;exports.Banner=o.Banner;exports.Branding=r.Branding;exports.Button=i.Button;exports.Card=t.Card;exports.Dialog=c.Dialog;exports.Dropdown=d.Dropdown;exports.Editor=s.Editor;exports.Figure=_.Figure;exports.Form=u.Form;exports.Header=p.Header;exports.Icon=a.Icon;exports.Input=m.Input;exports.Link=q.Link;exports.List=x.List;exports.Nav=g.Nav;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('./assets/index.css');const e=require("./components/accordion/index.cjs"),n=require("./components/aside/index.cjs"),o=require("./components/banner/index.cjs"),r=require("./components/branding/index.cjs"),i=require("./components/button/index.cjs"),t=require("./components/card/index.cjs"),c=require("./components/checkbox/index.cjs"),d=require("./components/dialog/index.cjs"),s=require("./components/document/index.cjs"),_=require("./components/dropdown/index.cjs"),u=require("./components/dropzone/index.cjs"),p=require("./components/editor/index.cjs"),m=require("./components/figure/index.cjs"),a=require("./components/footer/index.cjs"),x=require("./components/form/index.cjs"),q=require("./components/grid/index.cjs"),g=require("./components/header/index.cjs"),l=require("./components/icon/index.cjs"),b=require("./components/input/index.cjs"),D=require("./components/layout/index.cjs"),L=require("./components/link/index.cjs"),k=require("./components/list/index.cjs"),A=require("./components/nav/index.cjs"),B=require("./components/loading/index.cjs"),F=require("./components/picture/index.cjs"),y=require("./components/toggle/index.cjs");exports.Accordion=e.Accordion;exports.AccordionGroup=e.AccordionGroup;exports.Aside=n.Aside;exports.Banner=o.Banner;exports.Branding=r.Branding;exports.Button=i.Button;exports.Card=t.Card;exports.Checkbox=c.Checkbox;exports.Dialog=d.Dialog;exports.Document=s.Document;exports.Dropdown=_.Dropdown;exports.Dropzone=u.Dropzone;exports.Editor=p.Editor;exports.Figure=m.Figure;exports.Footer=a.Footer;exports.Form=x.Form;exports.Grid=q.Grid;exports.Header=g.Header;exports.Icon=l.Icon;exports.Input=b.Input;exports.Layout=D.Layout;exports.Link=L.Link;exports.List=k.List;exports.Nav=A.Nav;exports.PageLoader=B.PageLoader;exports.Picture=F.Picture;exports.Toggle=y.Toggle;
 //# sourceMappingURL=index.cjs.map