@edifice.io/react 2.0.0-develop-rc.4 → 2.0.0-develop-rc.10

package/dist/components/Form/FormControl.js

@@ -1,33 +1,34 @@
-import { jsx } from "react/jsx-runtime";
-import { forwardRef, useMemo } from "react";
-import { Context } from "./FormContext.js";
-import { FormText } from "./FormText.js";
-import { Label } from "../Label/Label.js";
-import { Input } from "../Input/Input.js";
-const Root = /* @__PURE__ */ forwardRef(({
-  children,
-  className,
-  id,
-  isOptional,
-  isReadOnly,
-  isRequired,
-  status,
-  ...restProps
-}, ref) => {
-  const values = useMemo(() => ({
-    id,
-    isOptional,
-    isRequired,
-    isReadOnly,
-    status
-  }), [id, isOptional, isReadOnly, isRequired, status]);
-  return /* @__PURE__ */ jsx(Context.Provider, { value: values, children: /* @__PURE__ */ jsx("div", { ref, className, ...restProps, children }) });
-}), FormControl = /* @__PURE__ */ Object.assign(Root, {
-  Label,
-  Input,
-  Text: FormText
+import { jsx as f } from "react/jsx-runtime";
+import { forwardRef as i, useMemo as l } from "react";
+import { Context as s } from "./FormContext.js";
+import { FormText as u } from "./FormText.js";
+import { Label as v } from "../Label/Label.js";
+import { Input as b } from "../Input/Input.js";
+const d = /* @__PURE__ */ i(({
+  children: n,
+  className: p,
+  id: o,
+  isOptional: r,
+  isReadOnly: t,
+  isRequired: m,
+  status: e,
+  ...c
+}, x) => {
+  const a = l(() => ({
+    id: o,
+    isOptional: r,
+    isRequired: m,
+    isReadOnly: t,
+    status: e
+  }), [o, r, t, m, e]);
+  return /* @__PURE__ */ f(s.Provider, { value: a, children: /* @__PURE__ */ f("div", { ref: x, className: p, ...c, children: n }) });
+}), w = /* @__PURE__ */ Object.assign(d, {
+  Label: v,
+  Input: b,
+  Text: u
 });
 export {
-  FormControl,
-  FormControl as default
+  w as FormControl,
+  w as default
 };
+//# sourceMappingURL=FormControl.js.map

package/dist/components/Form/FormControl.js.map

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

package/dist/components/Form/FormText.js

@@ -1,18 +1,19 @@
-import { jsx } from "react/jsx-runtime";
-import clsx from "clsx";
-import { useFormControl } from "./FormContext.js";
-const FormText = ({
-  children
+import { jsx as s } from "react/jsx-runtime";
+import i from "clsx";
+import { useFormControl as m } from "./FormContext.js";
+const n = ({
+  children: t
 }) => {
   const {
-    status
-  } = useFormControl(), classes = clsx("form-text", {
-    "is-invalid": status === "invalid",
-    valid: status === "valid"
+    status: o
+  } = m(), r = i("form-text", {
+    "is-invalid": o === "invalid",
+    valid: o === "valid"
   });
-  return /* @__PURE__ */ jsx("p", { className: classes, children: /* @__PURE__ */ jsx("em", { children }) });
+  return /* @__PURE__ */ s("p", { className: r, children: /* @__PURE__ */ s("em", { children: t }) });
 };
 export {
-  FormText,
-  FormText as default
+  n as FormText,
+  n as default
 };
+//# sourceMappingURL=FormText.js.map

package/dist/components/Form/FormText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormText.js","sources":["../../../src/components/Form/FormText.tsx"],"sourcesContent":["import { ReactNode } from 'react';\n\nimport clsx from 'clsx';\n\nimport { useFormControl } from './FormContext';\n\nexport const FormText = ({ children }: { children: ReactNode }) => {\n  const { status } = useFormControl();\n  const classes = clsx('form-text', {\n    'is-invalid': status === 'invalid',\n    valid: status === 'valid',\n  });\n\n  return (\n    <p className={classes}>\n      <em>{children}</em>\n    </p>\n  );\n};\n\nFormText.displayName = 'Text';\n\nexport default FormText;\n"],"names":["FormText","children","status","useFormControl","classes","clsx","valid","jsx"],"mappings":";;;AAMO,MAAMA,IAAWA,CAAC;AAAA,EAAEC,UAAAA;AAAkC,MAAM;AAC3D,QAAA;AAAA,IAAEC,QAAAA;AAAAA,MAAWC,EAAe,GAC5BC,IAAUC,EAAK,aAAa;AAAA,IAChC,cAAcH,MAAW;AAAA,IACzBI,OAAOJ,MAAW;AAAA,EAAA,CACnB;AAED,2BACG,KAAE,EAAA,WAAWE,GACZ,UAAC,gBAAAG,EAAA,MAAA,EAAIN,UAAAA,EAAS,CAAA,EAChB,CAAA;AAEJ;"}

package/dist/components/Grid/Grid.js

@@ -1,32 +1,33 @@
-import { jsx } from "react/jsx-runtime";
-import clsx from "clsx";
-const Grid = ({
-  children,
-  className,
-  ...restProps
+import { jsx as t } from "react/jsx-runtime";
+import n from "clsx";
+const p = ({
+  children: r,
+  className: o,
+  ...s
 }) => {
-  const classes = clsx("grid", className);
-  return /* @__PURE__ */ jsx("div", { className: classes, ...restProps, children });
-}, Column = ({
-  sm,
-  md,
-  lg,
-  xl,
-  children,
-  className,
-  as,
-  ...restProps
+  const c = n("grid", o);
+  return /* @__PURE__ */ t("div", { className: c, ...s, children: r });
+}, $ = ({
+  sm: r,
+  md: o,
+  lg: s,
+  xl: c,
+  children: l,
+  className: e,
+  as: a,
+  ...i
 }) => {
-  const Component = as || "div", classes = clsx({
-    [`g-col-${sm}`]: sm,
-    [md ? `g-col-md-${md}` : ""]: md,
-    [lg ? `g-col-lg-${lg}` : ""]: lg,
-    [xl ? `g-col-xl-${xl}` : ""]: xl
-  }, className);
-  return /* @__PURE__ */ jsx(Component, { className: classes, ...restProps, children });
+  const m = a || "div", g = n({
+    [`g-col-${r}`]: r,
+    [o ? `g-col-md-${o}` : ""]: o,
+    [s ? `g-col-lg-${s}` : ""]: s,
+    [c ? `g-col-xl-${c}` : ""]: c
+  }, e);
+  return /* @__PURE__ */ t(m, { className: g, ...i, children: l });
 };
-Grid.Col = Column;
+p.Col = $;
 export {
-  Column,
-  Grid
+  $ as Column,
+  p as Grid
 };
+//# sourceMappingURL=Grid.js.map

package/dist/components/Grid/Grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.js","sources":["../../../src/components/Grid/Grid.tsx"],"sourcesContent":["import { ReactNode } from 'react';\n\nimport clsx from 'clsx';\n\nexport interface GridProps {\n  /**\n   * Content inside the Grid component. Usually GridCol components\n   */\n  children: ReactNode;\n  /**\n   * Optional class for styling purpose\n   */\n  className?: string;\n}\n\nexport interface GridColProps extends React.ComponentPropsWithoutRef<'div'> {\n  /**\n   * Size on Mobile\n   */\n  sm: string;\n  /**\n   * Size on Tablet\n   */\n  md?: string;\n  /**\n   * Size on Small Desktop\n   */\n  lg?: string;\n  /**\n   * Size on Large Desktop\n   */\n  xl?: string;\n  /**\n   * Accept content as children\n   */\n  children: ReactNode;\n  /**\n   * Optional class for styling purpose\n   */\n  className?: string;\n  /**\n   * As Prop\n   */\n  as?: React.ElementType;\n}\n\n/**\n * Grid of 12 columns on Desktop, 8 on Tablet and 4 on Mobile\n */\n\nexport const Grid = ({ children, className, ...restProps }: GridProps) => {\n  const classes = clsx('grid', className);\n  return (\n    <div className={classes} {...restProps}>\n      {children}\n    </div>\n  );\n};\n\nexport const Column = ({\n  sm,\n  md,\n  lg,\n  xl,\n  children,\n  className,\n  as,\n  ...restProps\n}: GridColProps) => {\n  const Component = as || 'div';\n  const classes = clsx(\n    {\n      [`g-col-${sm}`]: sm,\n      [md ? `g-col-md-${md}` : '']: md,\n      [lg ? `g-col-lg-${lg}` : '']: lg,\n      [xl ? `g-col-xl-${xl}` : '']: xl,\n    },\n    className,\n  );\n  return (\n    <Component className={classes} {...restProps}>\n      {children}\n    </Component>\n  );\n};\n\nGrid.displayName = 'Grid';\nColumn.displayName = 'Grid.Col';\n\nGrid.Col = Column;\n"],"names":["Grid","children","className","restProps","classes","clsx","Column","sm","md","lg","xl","as","Component","Col"],"mappings":";;AAkDO,MAAMA,IAAOA,CAAC;AAAA,EAAEC,UAAAA;AAAAA,EAAUC,WAAAA;AAAAA,EAAW,GAAGC;AAAqB,MAAM;AAClEC,QAAAA,IAAUC,EAAK,QAAQH,CAAS;AACtC,2BACG,OAAI,EAAA,WAAWE,GAAaD,GAAAA,GAC1BF,UAAAA,EACH,CAAA;AAEJ,GAEaK,IAASA,CAAC;AAAA,EACrBC,IAAAA;AAAAA,EACAC,IAAAA;AAAAA,EACAC,IAAAA;AAAAA,EACAC,IAAAA;AAAAA,EACAT,UAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAS,IAAAA;AAAAA,EACA,GAAGR;AACS,MAAM;AAClB,QAAMS,IAAYD,KAAM,OAClBP,IAAUC,EACd;AAAA,IACE,CAAC,SAASE,CAAE,EAAE,GAAGA;AAAAA,IACjB,CAACC,IAAK,YAAYA,CAAE,KAAK,EAAE,GAAGA;AAAAA,IAC9B,CAACC,IAAK,YAAYA,CAAE,KAAK,EAAE,GAAGA;AAAAA,IAC9B,CAACC,IAAK,YAAYA,CAAE,KAAK,EAAE,GAAGA;AAAAA,KAEhCR,CACF;AACA,2BACGU,GAAU,EAAA,WAAWR,GAAaD,GAAAA,GAChCF,UAAAA,EACH,CAAA;AAEJ;AAKAD,EAAKa,MAAMP;"}

package/dist/components/Heading/Heading.js

@@ -1,17 +1,18 @@
-import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import clsx from "clsx";
-const Heading = /* @__PURE__ */ forwardRef(({
-  level: Component = "h1",
-  headingStyle = "h1",
-  children,
-  className,
-  ...restProps
-}, ref) => {
-  const classes = clsx(headingStyle, className);
-  return /* @__PURE__ */ jsx(Component, { ref, className: classes, ...restProps, children });
+import { jsx as f } from "react/jsx-runtime";
+import { forwardRef as l } from "react";
+import c from "clsx";
+const d = /* @__PURE__ */ l(({
+  level: r = "h1",
+  headingStyle: o = "h1",
+  children: s,
+  className: e,
+  ...t
+}, a) => {
+  const m = c(o, e);
+  return /* @__PURE__ */ f(r, { ref: a, className: m, ...t, children: s });
 });
 export {
-  Heading,
-  Heading as default
+  d as Heading,
+  d as default
 };
+//# sourceMappingURL=Heading.js.map

package/dist/components/Heading/Heading.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Heading.js","sources":["../../../src/components/Heading/Heading.tsx"],"sourcesContent":["import { ReactNode, forwardRef } from 'react';\n\nimport clsx from 'clsx';\n\nexport type HeadingElement = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n\nexport interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {\n  /**\n   * Level of Heading\n   * `\"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\"`\n   */\n  level?: HeadingElement;\n  /**\n   * Apply Bootstrap utility Class\n   * `\"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\"`\n   */\n  headingStyle?: HeadingElement;\n  /**\n   * Text to render\n   */\n  children: ReactNode;\n  /**\n   * Optional class for styling purpose\n   */\n  className?: string;\n}\n\n/**\n * Heading component to display heading elements\n */\nexport const Heading = forwardRef<HTMLHeadingElement, HeadingProps>(\n  (\n    {\n      level: Component = 'h1',\n      headingStyle = 'h1',\n      children,\n      className,\n      ...restProps\n    }: HeadingProps,\n    ref,\n  ) => {\n    const classes = clsx(headingStyle, className);\n    return (\n      <Component ref={ref} className={classes} {...restProps}>\n        {children}\n      </Component>\n    );\n  },\n);\n\nHeading.displayName = 'Heading';\n\nexport default Heading;\n"],"names":["Heading","level","Component","headingStyle","children","className","restProps","ref","classes","clsx"],"mappings":";;;AA8BaA,MAAAA,sBACX,CACE;AAAA,EACEC,OAAOC,IAAY;AAAA,EACnBC,cAAAA,IAAe;AAAA,EACfC,UAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACA,GAAGC;AACS,GACdC,MACG;AACGC,QAAAA,IAAUC,EAAKN,GAAcE,CAAS;AAC5C,2BACGH,GAAU,EAAA,KAAAK,GAAU,WAAWC,GAAS,GAAIF,GAC1CF,UAAAA,EACH,CAAA;AAEJ,CACF;"}

package/dist/components/Icon/Icon.js

@@ -1,10 +1,11 @@
-import { jsx } from "react/jsx-runtime";
-import spriteHref from "@edifice.io/icons/icons.svg";
-const Icon = ({
-  name,
-  size = "24",
-  ...props
-}) => /* @__PURE__ */ jsx("svg", { ...props, width: size, height: size, children: /* @__PURE__ */ jsx("use", { href: `${spriteHref}#${name}` }) });
+import { jsx as t } from "react/jsx-runtime";
+import h from "@edifice.io/icons/icons.svg";
+const m = ({
+  name: e,
+  size: r = "24",
+  ...o
+}) => /* @__PURE__ */ t("svg", { ...o, width: r, height: r, children: /* @__PURE__ */ t("use", { href: `${h}#${e}` }) });
 export {
-  Icon
+  m as Icon
 };
+//# sourceMappingURL=Icon.js.map

package/dist/components/Icon/Icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.js","sources":["../../../src/components/Icon/Icon.tsx"],"sourcesContent":["import type { IconName } from '@edifice.io/icons';\nimport spriteHref from '@edifice.io/icons/icons.svg';\nimport type { SVGProps } from 'react';\n\n/**\n * IconSize (default to 24x24)\n */\ntype IconSize =\n  | '16'\n  | '18'\n  | '20'\n  | '22'\n  | '24'\n  | '40'\n  | '36'\n  | '48'\n  | (string & {});\n\n/**\n * Icon component displays any icon from `@edifice.io/icons`\n */\nexport const Icon = ({\n  name,\n  size = '24',\n  ...props\n}: SVGProps<SVGSVGElement> & {\n  name: IconName;\n  size?: IconSize;\n}) => {\n  return (\n    <svg {...props} width={size} height={size}>\n      <use href={`${spriteHref}#${name}`} />\n    </svg>\n  );\n};\n\nIcon.displayName = 'Icon';\n"],"names":["Icon","name","size","props","jsx","spriteHref"],"mappings":";;AAqBO,MAAMA,IAAOA,CAAC;AAAA,EACnBC,MAAAA;AAAAA,EACAC,MAAAA,IAAO;AAAA,EACP,GAAGC;AAIL,wBAEK,OAAQA,EAAAA,GAAAA,GAAO,OAAOD,GAAM,QAAQA,GACnC,UAAC,gBAAAE,EAAA,OAAA,EAAI,MAAM,GAAGC,CAAU,IAAIJ,CAAI,IAAG,EACrC,CAAA;"}

package/dist/components/Image/Image.js

@@ -1,42 +1,43 @@
-import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import clsx from "clsx";
-import usePaths from "../../core/usePaths/usePaths.js";
-import useImage from "../../hooks/useImage/useImage.js";
-const Image = /* @__PURE__ */ forwardRef(({
-  src,
-  alt,
-  imgPlaceholder,
-  ratio,
-  objectFit,
-  className,
-  ...restProps
-}, ref) => {
-  const [imagePath] = usePaths(), placeholder = imgPlaceholder ?? `${imagePath}/common/image-placeholder.png`, {
-    imgSrc,
-    onError
-  } = useImage({
-    src,
-    placeholder
-  }), ratioImage = {
-    "ratio ratio-1x1": ratio === "1",
-    "ratio ratio-4x3": ratio === "4",
-    "ratio ratio-16x9": ratio === "16",
-    "ratio ratio-21x9": ratio === "21"
-  }, objectImage = {
-    "object-fit-contain": objectFit === "contain",
-    "object-fit-cover": objectFit === "cover",
-    "object-fit-fill": objectFit === "fill",
-    "object-fit-scale": objectFit === "scale",
-    "object-fit-none": objectFit === "none"
-  }, ratioClasses = clsx({
-    ...ratioImage
-  }), classes = clsx({
-    ...objectImage
-  }, className), renderImage = /* @__PURE__ */ jsx("img", { alt, onError, ref, src: imgSrc, className: classes, ...restProps });
-  return ratio ? /* @__PURE__ */ jsx("div", { className: ratioClasses, children: renderImage }) : renderImage;
+import { jsx as t } from "react/jsx-runtime";
+import { forwardRef as j } from "react";
+import a from "clsx";
+import v from "../../core/usePaths/usePaths.js";
+import b from "../../hooks/useImage/useImage.js";
+const R = /* @__PURE__ */ j(({
+  src: s,
+  alt: c,
+  imgPlaceholder: n,
+  ratio: o,
+  objectFit: r,
+  className: i,
+  ...m
+}, l) => {
+  const [f] = v(), g = n ?? `${f}/common/image-placeholder.png`, {
+    imgSrc: p,
+    onError: d
+  } = b({
+    src: s,
+    placeholder: g
+  }), x = {
+    "ratio ratio-1x1": o === "1",
+    "ratio ratio-4x3": o === "4",
+    "ratio ratio-16x9": o === "16",
+    "ratio ratio-21x9": o === "21"
+  }, h = {
+    "object-fit-contain": r === "contain",
+    "object-fit-cover": r === "cover",
+    "object-fit-fill": r === "fill",
+    "object-fit-scale": r === "scale",
+    "object-fit-none": r === "none"
+  }, u = a({
+    ...x
+  }), I = a({
+    ...h
+  }, i), e = /* @__PURE__ */ t("img", { alt: c, onError: d, ref: l, src: p, className: I, ...m });
+  return o ? /* @__PURE__ */ t("div", { className: u, children: e }) : e;
 });
 export {
-  Image,
-  Image as default
+  R as Image,
+  R as default
 };
+//# sourceMappingURL=Image.js.map

package/dist/components/Image/Image.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Image.js","sources":["../../../src/components/Image/Image.tsx"],"sourcesContent":["import { forwardRef, Ref } from 'react';\n\nimport clsx from 'clsx';\n\nimport usePaths from '../../core/usePaths/usePaths';\nimport useImage from '../../hooks/useImage/useImage';\n\nexport interface ImageProps extends React.ComponentPropsWithRef<'img'> {\n  /**\n   * Image URL\n   */\n  src: string;\n  /**\n   * Alternative text for a11y\n   */\n  alt: string;\n  /**\n   * Image ratio\n   */\n  ratio?: '1' | '4' | '16' | '21';\n  /**\n   * Object fit property\n   */\n  objectFit?: 'contain' | 'cover' | 'fill' | 'scale' | 'none';\n  /**\n   * Placeholder image as fallback\n   */\n  imgPlaceholder?: string;\n  /**\n   * Optional class for styling purpose\n   */\n  className?: string;\n}\n\nexport const Image = forwardRef(\n  (\n    {\n      src,\n      alt,\n      imgPlaceholder,\n      ratio,\n      objectFit,\n      className,\n      ...restProps\n    }: ImageProps,\n    ref: Ref<HTMLImageElement>,\n  ) => {\n    const [imagePath] = usePaths();\n    const placeholder =\n      imgPlaceholder ?? `${imagePath}/common/image-placeholder.png`;\n\n    const { imgSrc, onError } = useImage({ src, placeholder });\n\n    const ratioImage = {\n      'ratio ratio-1x1': ratio === '1',\n      'ratio ratio-4x3': ratio === '4',\n      'ratio ratio-16x9': ratio === '16',\n      'ratio ratio-21x9': ratio === '21',\n    };\n\n    const objectImage = {\n      'object-fit-contain': objectFit === 'contain',\n      'object-fit-cover': objectFit === 'cover',\n      'object-fit-fill': objectFit === 'fill',\n      'object-fit-scale': objectFit === 'scale',\n      'object-fit-none': objectFit === 'none',\n    };\n\n    const ratioClasses = clsx({\n      ...ratioImage,\n    });\n\n    const classes = clsx(\n      {\n        ...objectImage,\n      },\n      className,\n    );\n\n    const renderImage = (\n      <img\n        alt={alt}\n        onError={onError}\n        ref={ref}\n        src={imgSrc}\n        className={classes}\n        {...restProps}\n      />\n    );\n\n    if (ratio) {\n      return <div className={ratioClasses}>{renderImage}</div>;\n    }\n\n    return renderImage;\n  },\n);\n\nImage.displayName = 'Image';\n\nexport default Image;\n"],"names":["Image","src","alt","imgPlaceholder","ratio","objectFit","className","restProps","ref","imagePath","usePaths","placeholder","imgSrc","onError","useImage","ratioImage","objectImage","ratioClasses","clsx","classes","renderImage","jsx"],"mappings":";;;;;AAkCaA,MAAAA,sBACX,CACE;AAAA,EACEC,KAAAA;AAAAA,EACAC,KAAAA;AAAAA,EACAC,gBAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACA,GAAGC;AACO,GACZC,MACG;AACG,QAAA,CAACC,CAAS,IAAIC,KACdC,IACJR,KAAkB,GAAGM,CAAS,iCAE1B;AAAA,IAAEG,QAAAA;AAAAA,IAAQC,SAAAA;AAAAA,MAAYC,EAAS;AAAA,IAAEb,KAAAA;AAAAA,IAAKU,aAAAA;AAAAA,EAAAA,CAAa,GAEnDI,IAAa;AAAA,IACjB,mBAAmBX,MAAU;AAAA,IAC7B,mBAAmBA,MAAU;AAAA,IAC7B,oBAAoBA,MAAU;AAAA,IAC9B,oBAAoBA,MAAU;AAAA,EAAA,GAG1BY,IAAc;AAAA,IAClB,sBAAsBX,MAAc;AAAA,IACpC,oBAAoBA,MAAc;AAAA,IAClC,mBAAmBA,MAAc;AAAA,IACjC,oBAAoBA,MAAc;AAAA,IAClC,mBAAmBA,MAAc;AAAA,EAAA,GAG7BY,IAAeC,EAAK;AAAA,IACxB,GAAGH;AAAAA,EAAAA,CACJ,GAEKI,IAAUD,EACd;AAAA,IACE,GAAGF;AAAAA,KAELV,CACF,GAEMc,IACH,gBAAAC,EAAA,OAAA,EACC,KAAAnB,GACA,SAAAW,GACA,KAAAL,GACA,KAAKI,GACL,WAAWO,GACPZ,GAAAA,EAEP,CAAA;AAED,SAAIH,IACM,gBAAAiB,EAAA,OAAA,EAAI,WAAWJ,GAAeG,UAAYA,EAAA,CAAA,IAG7CA;AACT,CACF;"}

package/dist/components/ImagePicker/ImagePicker.d.ts

@@ -1,5 +1,5 @@
 import { ComponentPropsWithRef } from 'react';
-import { IWebApp } from 'edifice-ts-client';
+import { IWebApp } from '@edifice.io/ts-client';
 export interface ImagePickerProps extends ComponentPropsWithRef<'input'> {
     /**
      * Description of the ImagePicker label.

package/dist/components/ImagePicker/ImagePicker.js

@@ -1,58 +1,59 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { forwardRef, useState, useEffect } from "react";
-import clsx from "clsx";
-import useDropzone from "../../hooks/useDropzone/useDropzone.js";
-import { FormControl } from "../Form/FormControl.js";
-import { IconButton } from "../Button/IconButton.js";
-import { Icon } from "../Icon/Icon.js";
-import { Input } from "../Input/Input.js";
-import { Avatar } from "../Avatar/Avatar.js";
-import { AppIcon } from "../AppIcon/AppIcon.js";
-const ImagePicker = /* @__PURE__ */ forwardRef(({
-  label,
-  addButtonLabel = "Add image",
-  deleteButtonLabel = "Delete image",
-  src,
-  className,
-  app,
-  onUploadImage,
-  onDeleteImage
-}, ref) => {
-  const [preview, setPreview] = useState(src || ""), {
-    inputRef,
-    files,
-    deleteFile,
-    handleOnChange,
-    handleDragging,
-    handleDragLeave,
-    handleDrop
-  } = useDropzone();
-  useEffect(() => {
-    if (files.length > 0) {
-      deleteFile(files[0]), setPreview("");
-      const file = files == null ? void 0 : files[0];
-      if (!file) return;
-      setPreview(URL.createObjectURL(file)), onUploadImage(file);
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import { forwardRef as j, useState as R, useEffect as w } from "react";
+import A from "clsx";
+import F from "../../hooks/useDropzone/useDropzone.js";
+import { FormControl as m } from "../Form/FormControl.js";
+import { IconButton as s } from "../Button/IconButton.js";
+import { Icon as p } from "../Icon/Icon.js";
+import { Input as N } from "../Input/Input.js";
+import { Avatar as O } from "../Avatar/Avatar.js";
+import { AppIcon as E } from "../AppIcon/AppIcon.js";
+const Q = /* @__PURE__ */ j(({
+  label: d,
+  addButtonLabel: g = "Add image",
+  deleteButtonLabel: f = "Delete image",
+  src: u,
+  className: h,
+  app: v,
+  onUploadImage: D,
+  onDeleteImage: b
+}, C) => {
+  const [a, i] = R(u || ""), {
+    inputRef: t,
+    files: r,
+    deleteFile: c,
+    handleOnChange: k,
+    handleDragging: l,
+    handleDragLeave: x,
+    handleDrop: y
+  } = F();
+  w(() => {
+    if (r.length > 0) {
+      c(r[0]), i("");
+      const n = r == null ? void 0 : r[0];
+      if (!n) return;
+      i(URL.createObjectURL(n)), D(n);
     }
-  }, [files]);
-  const handleClick = () => {
-    var _a;
-    (_a = inputRef.current) == null || _a.click();
-  }, handleClean = () => {
-    inputRef.current && (inputRef.current.value = ""), deleteFile(files[0]), setPreview(""), onDeleteImage();
-  }, classes = clsx("image-input", className);
-  return /* @__PURE__ */ jsxs(FormControl, { id: "image-input", className: classes, onDragEnter: handleDragging, onDragOver: handleDragging, onDragLeave: handleDragLeave, onDrop: handleDrop, ref, children: [
-    /* @__PURE__ */ jsxs("div", { className: "image-input-actions gap-8", children: [
-      /* @__PURE__ */ jsx(IconButton, { "aria-label": addButtonLabel, color: "tertiary", icon: /* @__PURE__ */ jsx(Icon, { name: "edit" }), onClick: handleClick, type: "button", variant: "ghost" }),
-      /* @__PURE__ */ jsx(IconButton, { "aria-label": deleteButtonLabel, color: "danger", disabled: !preview, icon: /* @__PURE__ */ jsx(Icon, { name: "delete", size: "20" }), onClick: handleClean, type: "button", variant: "ghost" })
+  }, [r]);
+  const z = () => {
+    var n;
+    (n = t.current) == null || n.click();
+  }, I = () => {
+    t.current && (t.current.value = ""), c(r[0]), i(""), b();
+  }, L = A("image-input", h);
+  return /* @__PURE__ */ o(m, { id: "image-input", className: L, onDragEnter: l, onDragOver: l, onDragLeave: x, onDrop: y, ref: C, children: [
+    /* @__PURE__ */ o("div", { className: "image-input-actions gap-8", children: [
+      /* @__PURE__ */ e(s, { "aria-label": g, color: "tertiary", icon: /* @__PURE__ */ e(p, { name: "edit" }), onClick: z, type: "button", variant: "ghost" }),
+      /* @__PURE__ */ e(s, { "aria-label": f, color: "danger", disabled: !a, icon: /* @__PURE__ */ e(p, { name: "delete", size: "20" }), onClick: I, type: "button", variant: "ghost" })
     ] }),
-    /* @__PURE__ */ jsxs(FormControl.Label, { children: [
-      /* @__PURE__ */ jsx("span", { className: "visually-hidden", children: label }),
-      /* @__PURE__ */ jsx(Input, { accept: "image/jpeg, image/png", hidden: !0, onChange: handleOnChange, ref: inputRef, size: "sm", type: "file" }),
-      preview ? /* @__PURE__ */ jsx(Avatar, { alt: "", src: preview, size: "xl" }) : /* @__PURE__ */ jsx(AppIcon, { app, iconFit: "ratio", size: "160", variant: "rounded" })
+    /* @__PURE__ */ o(m.Label, { children: [
+      /* @__PURE__ */ e("span", { className: "visually-hidden", children: d }),
+      /* @__PURE__ */ e(N, { accept: "image/jpeg, image/png", hidden: !0, onChange: k, ref: t, size: "sm", type: "file" }),
+      a ? /* @__PURE__ */ e(O, { alt: "", src: a, size: "xl" }) : /* @__PURE__ */ e(E, { app: v, iconFit: "ratio", size: "160", variant: "rounded" })
     ] })
   ] });
 });
 export {
-  ImagePicker
+  Q as ImagePicker
 };
+//# sourceMappingURL=ImagePicker.js.map

package/dist/components/ImagePicker/ImagePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImagePicker.js","sources":["../../../src/components/ImagePicker/ImagePicker.tsx"],"sourcesContent":["import {\n  ComponentPropsWithRef,\n  forwardRef,\n  Ref,\n  useEffect,\n  useState,\n} from 'react';\n\nimport { IWebApp } from '@edifice.io/ts-client';\nimport clsx from 'clsx';\n\nimport { Icon } from '..';\nimport { useDropzone } from '../../hooks';\nimport { AppIcon } from '../AppIcon';\nimport { Avatar } from '../Avatar';\nimport { IconButton } from '../Button';\nimport { FormControl } from '../Form';\nimport { Input } from '../Input';\n\nexport interface ImagePickerProps extends ComponentPropsWithRef<'input'> {\n  /**\n   * Description of the ImagePicker label.\n   */\n  label: string;\n  /**\n   * Accessible description of the add button\n   */\n  addButtonLabel: string;\n  /**\n   * Accessible description of the delete button\n   */\n  deleteButtonLabel: string;\n  /**\n   * Provide a default image as placeholder\n   */\n  src?: string;\n  /**\n   * To show the icon of an application\n   */\n  app?: IWebApp | undefined;\n\n  appCode?: string;\n  /**\n   * Optional class for styling purpose\n   */\n  className?: string;\n  /**\n   * Callback when uploading image\n   */\n  onUploadImage: (file: File) => void;\n  /**\n   * Callback when deleting image\n   */\n  onDeleteImage: () => void;\n}\n\nexport const ImagePicker = forwardRef(\n  (\n    {\n      label,\n      addButtonLabel = 'Add image',\n      deleteButtonLabel = 'Delete image',\n      src,\n      className,\n      app,\n      onUploadImage,\n      onDeleteImage,\n    }: ImagePickerProps,\n    ref: Ref<HTMLInputElement>,\n  ) => {\n    const [preview, setPreview] = useState<string>(src || '');\n\n    const {\n      inputRef,\n      files,\n      deleteFile,\n      handleOnChange,\n      handleDragging,\n      handleDragLeave,\n      handleDrop,\n    } = useDropzone();\n\n    useEffect(() => {\n      if (files.length > 0) {\n        deleteFile(files[0]);\n        setPreview('');\n\n        const file = files?.[0];\n        if (!file) return;\n\n        setPreview(URL.createObjectURL(file));\n        onUploadImage(file);\n      }\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [files]);\n\n    const handleClick = () => {\n      inputRef.current?.click();\n    };\n\n    const handleClean = () => {\n      if (inputRef.current) {\n        inputRef.current.value = '';\n      }\n\n      deleteFile(files[0]);\n      setPreview('');\n      onDeleteImage();\n    };\n\n    const classes = clsx('image-input', className);\n\n    return (\n      <FormControl\n        id=\"image-input\"\n        className={classes}\n        onDragEnter={handleDragging}\n        onDragOver={handleDragging}\n        onDragLeave={handleDragLeave}\n        onDrop={handleDrop}\n        ref={ref}\n      >\n        <div className=\"image-input-actions gap-8\">\n          <IconButton\n            aria-label={addButtonLabel}\n            color=\"tertiary\"\n            icon={<Icon name=\"edit\" />}\n            onClick={handleClick}\n            type=\"button\"\n            variant=\"ghost\"\n          />\n          <IconButton\n            aria-label={deleteButtonLabel}\n            color=\"danger\"\n            disabled={!preview}\n            icon={<Icon name=\"delete\" size=\"20\" />}\n            onClick={handleClean}\n            type=\"button\"\n            variant=\"ghost\"\n          />\n        </div>\n        <FormControl.Label>\n          <span className=\"visually-hidden\">{label}</span>\n          <Input\n            accept=\"image/jpeg, image/png\"\n            hidden\n            onChange={handleOnChange}\n            ref={inputRef}\n            size=\"sm\"\n            type=\"file\"\n          />\n          {preview ? (\n            <Avatar alt=\"\" src={preview} size=\"xl\" />\n          ) : (\n            <AppIcon app={app} iconFit=\"ratio\" size=\"160\" variant=\"rounded\" />\n          )}\n        </FormControl.Label>\n      </FormControl>\n    );\n  },\n);\n\nImagePicker.displayName = 'ImagePicker';\n"],"names":["ImagePicker","label","addButtonLabel","deleteButtonLabel","src","className","app","onUploadImage","onDeleteImage","ref","preview","setPreview","useState","inputRef","files","deleteFile","handleOnChange","handleDragging","handleDragLeave","handleDrop","useDropzone","useEffect","length","file","URL","createObjectURL","handleClick","current","click","handleClean","value","classes","clsx","jsxs","FormControl","jsx","IconButton","Icon","Input","Avatar","AppIcon"],"mappings":";;;;;;;;;;AAwDaA,MAAAA,sBACX,CACE;AAAA,EACEC,OAAAA;AAAAA,EACAC,gBAAAA,IAAiB;AAAA,EACjBC,mBAAAA,IAAoB;AAAA,EACpBC,KAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,KAAAA;AAAAA,EACAC,eAAAA;AAAAA,EACAC,eAAAA;AACgB,GAClBC,MACG;AACH,QAAM,CAACC,GAASC,CAAU,IAAIC,EAAiBR,KAAO,EAAE,GAElD;AAAA,IACJS,UAAAA;AAAAA,IACAC,OAAAA;AAAAA,IACAC,YAAAA;AAAAA,IACAC,gBAAAA;AAAAA,IACAC,gBAAAA;AAAAA,IACAC,iBAAAA;AAAAA,IACAC,YAAAA;AAAAA,MACEC,EAAY;AAEhBC,EAAAA,EAAU,MAAM;AACVP,QAAAA,EAAMQ,SAAS,GAAG;AACTR,MAAAA,EAAAA,EAAM,CAAC,CAAC,GACnBH,EAAW,EAAE;AAEPY,YAAAA,IAAOT,KAAAA,gBAAAA,EAAQ;AACrB,UAAI,CAACS,EAAM;AAEAC,MAAAA,EAAAA,IAAIC,gBAAgBF,CAAI,CAAC,GACpChB,EAAcgB,CAAI;AAAA,IACpB;AAAA,EAAA,GAEC,CAACT,CAAK,CAAC;AAEV,QAAMY,IAAcA,MAAM;;AACxBb,KAAAA,IAAAA,EAASc,YAATd,QAAAA,EAAkBe;AAAAA,EAAM,GAGpBC,IAAcA,MAAM;AACxB,IAAIhB,EAASc,YACXd,EAASc,QAAQG,QAAQ,KAGhBhB,EAAAA,EAAM,CAAC,CAAC,GACnBH,EAAW,EAAE,GACCH;EAAA,GAGVuB,IAAUC,EAAK,eAAe3B,CAAS;AAE7C,SACG,gBAAA4B,EAAAC,GAAA,EACC,IAAG,eACH,WAAWH,GACX,aAAad,GACb,YAAYA,GACZ,aAAaC,GACb,QAAQC,GACR,KAAAV,GAEA,UAAA;AAAA,IAAC,gBAAAwB,EAAA,OAAA,EAAI,WAAU,6BACb,UAAA;AAAA,MAAA,gBAAAE,EAACC,KACC,cAAYlC,GACZ,OAAM,YACN,MAAO,gBAAAiC,EAAAE,GAAA,EAAK,MAAK,OAAA,CAAM,GACvB,SAASX,GACT,MAAK,UACL,SAAQ,SAAO;AAAA,MAEjB,gBAAAS,EAACC,KACC,cAAYjC,GACZ,OAAM,UACN,UAAU,CAACO,GACX,MAAM,gBAAAyB,EAACE,KAAK,MAAK,UAAS,MAAK,KAAO,CAAA,GACtC,SAASR,GACT,MAAK,UACL,SAAQ,QAAO,CAAA;AAAA,IAAA,GAEnB;AAAA,IACA,gBAAAI,EAACC,EAAY,OAAZ,EACC,UAAA;AAAA,MAAC,gBAAAC,EAAA,QAAA,EAAK,WAAU,mBAAmBlC,UAAMA,GAAA;AAAA,MACxC,gBAAAkC,EAAAG,GAAA,EACC,QAAO,yBACP,QAAM,IACN,UAAUtB,GACV,KAAKH,GACL,MAAK,MACL,MAAK,QAAM;AAAA,MAEZH,IACE,gBAAAyB,EAAAI,GAAA,EAAO,KAAI,IAAG,KAAK7B,GAAS,MAAK,KAAI,CAAA,IAEtC,gBAAAyB,EAACK,KAAQ,KAAAlC,GAAU,SAAQ,SAAQ,MAAK,OAAM,SAAQ,WACvD;AAAA,IAAA,GACH;AAAA,EACF,EAAA,CAAA;AAEJ,CACF;"}

package/dist/components/Input/Input.js

@@ -1,32 +1,33 @@
-import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import clsx from "clsx";
-import { useFormControl } from "../Form/FormContext.js";
-const Input = /* @__PURE__ */ forwardRef(({
-  noValidationIcon,
-  placeholder,
-  size = "md",
-  type = "text",
-  className,
-  ...restProps
-}, ref) => {
+import { jsx as f } from "react/jsx-runtime";
+import { forwardRef as p } from "react";
+import u from "clsx";
+import { useFormControl as v } from "../Form/FormContext.js";
+const y = /* @__PURE__ */ p(({
+  noValidationIcon: i,
+  placeholder: l,
+  size: r = "md",
+  type: n = "text",
+  className: s,
+  ...m
+}, a) => {
   const {
-    id,
-    isRequired,
-    isReadOnly,
-    status
-  } = useFormControl(), classes = clsx({
-    "form-control": !isReadOnly,
-    "form-control-lg": size === "lg",
-    "form-control-sm": size === "sm",
-    "is-invalid": status === "invalid",
-    "is-valid": status === "valid",
-    "form-control-plaintext": isReadOnly,
-    "no-validation-icon": noValidationIcon
-  }, className);
-  return /* @__PURE__ */ jsx("input", { ref, id, className: classes, type, placeholder, required: isRequired, readOnly: isReadOnly, ...restProps });
+    id: e,
+    isRequired: d,
+    isReadOnly: o,
+    status: t
+  } = v(), c = u({
+    "form-control": !o,
+    "form-control-lg": r === "lg",
+    "form-control-sm": r === "sm",
+    "is-invalid": t === "invalid",
+    "is-valid": t === "valid",
+    "form-control-plaintext": o,
+    "no-validation-icon": i
+  }, s);
+  return /* @__PURE__ */ f("input", { ref: a, id: e, className: c, type: n, placeholder: l, required: d, readOnly: o, ...m });
 });
 export {
-  Input,
-  Input as default
+  y as Input,
+  y as default
 };
+//# sourceMappingURL=Input.js.map

package/dist/components/Input/Input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.js","sources":["../../../src/components/Input/Input.tsx"],"sourcesContent":["import { forwardRef, Ref } from 'react';\n\nimport clsx from 'clsx';\n\nimport { Size } from '../../types';\nimport { useFormControl } from '../Form/FormContext';\n\nexport type OmitInputProps =\n  | 'disabled'\n  | 'required'\n  | 'size'\n  | 'id'\n  | 'readOnly';\n\nexport interface InputProps\n  extends Omit<React.ComponentPropsWithRef<'input'>, OmitInputProps> {\n  /**\n   * Control size of input\n   */\n  size: Size;\n  /**\n   * Type of input (text, password, ..)\n   */\n  type: string;\n  /**\n   * Change text of placeholder\n   */\n  placeholder?: string;\n  /**\n   * Disabled status\n   */\n  disabled?: boolean;\n  /**\n   * Remove validation icon\n   */\n  noValidationIcon?: boolean;\n  /**\n   * Optional class for styling purpose\n   */\n  className?: string;\n}\n\n/**\n * Input Form Component\n */\n\nexport const Input = forwardRef(\n  (\n    {\n      noValidationIcon,\n      placeholder,\n      size = 'md',\n      type = 'text',\n      className,\n      ...restProps\n    }: InputProps,\n    ref: Ref<HTMLInputElement>,\n  ) => {\n    const { id, isRequired, isReadOnly, status } = useFormControl();\n\n    const classes = clsx(\n      {\n        'form-control': !isReadOnly,\n        'form-control-lg': size === 'lg',\n        'form-control-sm': size === 'sm',\n        'is-invalid': status === 'invalid',\n        'is-valid': status === 'valid',\n        'form-control-plaintext': isReadOnly,\n        'no-validation-icon': noValidationIcon,\n      },\n      className,\n    );\n\n    return (\n      <input\n        ref={ref}\n        id={id}\n        className={classes}\n        type={type}\n        placeholder={placeholder}\n        required={isRequired}\n        readOnly={isReadOnly}\n        {...restProps}\n      />\n    );\n  },\n);\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"names":["Input","noValidationIcon","placeholder","size","type","className","restProps","ref","id","isRequired","isReadOnly","status","useFormControl","classes","clsx","jsx"],"mappings":";;;;AA8CaA,MAAAA,sBACX,CACE;AAAA,EACEC,kBAAAA;AAAAA,EACAC,aAAAA;AAAAA,EACAC,MAAAA,IAAO;AAAA,EACPC,MAAAA,IAAO;AAAA,EACPC,WAAAA;AAAAA,EACA,GAAGC;AACO,GACZC,MACG;AACG,QAAA;AAAA,IAAEC,IAAAA;AAAAA,IAAIC,YAAAA;AAAAA,IAAYC,YAAAA;AAAAA,IAAYC,QAAAA;AAAAA,MAAWC,EAAe,GAExDC,IAAUC,EACd;AAAA,IACE,gBAAgB,CAACJ;AAAAA,IACjB,mBAAmBP,MAAS;AAAA,IAC5B,mBAAmBA,MAAS;AAAA,IAC5B,cAAcQ,MAAW;AAAA,IACzB,YAAYA,MAAW;AAAA,IACvB,0BAA0BD;AAAAA,IAC1B,sBAAsBT;AAAAA,KAExBI,CACF;AAEA,SACG,gBAAAU,EAAA,SAAA,EACC,KAAAR,GACA,IAAAC,GACA,WAAWK,GACX,MAAAT,GACA,aAAAF,GACA,UAAUO,GACV,UAAUC,GACV,GAAIJ,EACJ,CAAA;AAEN,CACF;"}

package/dist/components/Label/Label.js

@@ -1,38 +1,39 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { forwardRef, useEffect } from "react";
-import clsx from "clsx";
-import { useTranslation } from "react-i18next";
-import { useFormControl } from "../Form/FormContext.js";
-const Label = /* @__PURE__ */ forwardRef(({
-  leftIcon,
-  optionalText,
-  requiredText = "*",
-  children,
-  className
-}, ref) => {
+import { jsxs as t, jsx as u } from "react/jsx-runtime";
+import { forwardRef as h, useEffect as x } from "react";
+import b from "clsx";
+import { useTranslation as q } from "react-i18next";
+import { useFormControl as w } from "../Form/FormContext.js";
+const R = /* @__PURE__ */ h(({
+  leftIcon: r,
+  optionalText: s,
+  requiredText: a = "*",
+  children: i,
+  className: l
+}, n) => {
   const {
-    id,
-    isOptional,
-    isRequired
-  } = useFormControl(), {
-    t
-  } = useTranslation(), classes = clsx("form-label", {
-    "has-icon": leftIcon
-  }, className), optionalState = isOptional && !isRequired, requiredState = isRequired && !isOptional;
-  return useEffect(() => {
-    if (isOptional && isRequired)
+    id: m,
+    isOptional: o,
+    isRequired: e
+  } = w(), {
+    t: c
+  } = q(), p = b("form-label", {
+    "has-icon": r
+  }, l), d = o && !e, f = e && !o;
+  return x(() => {
+    if (o && e)
       throw new Error("Cannot be optional and required at the same time");
-  }, [isOptional, isRequired]), /* @__PURE__ */ jsxs("label", { ref, htmlFor: id, className: classes, children: [
-    leftIcon,
-    children,
-    optionalState && /* @__PURE__ */ jsxs("em", { className: "optional", children: [
+  }, [o, e]), /* @__PURE__ */ t("label", { ref: n, htmlFor: m, className: p, children: [
+    r,
+    i,
+    d && /* @__PURE__ */ t("em", { className: "optional", children: [
       "- ",
-      optionalText ?? t("explorer.optional")
+      s ?? c("explorer.optional")
     ] }),
-    requiredState && /* @__PURE__ */ jsx("em", { className: "required", children: requiredText })
+    f && /* @__PURE__ */ u("em", { className: "required", children: a })
   ] });
 });
 export {
-  Label,
-  Label as default
+  R as Label,
+  R as default
 };
+//# sourceMappingURL=Label.js.map