@solibo/solibo-ui 2.0.1 → 2.0.3

package/dist/index-Ds-Ocs4L.js

@@ -0,0 +1,83 @@
+import { jsxs as g, Fragment as k, jsx as r } from "react/jsx-runtime";
+import { t as m } from "./classix-DG18itHa.js";
+import { useId as A, useState as T, useEffect as V } from "react";
+import { i as D } from "./icons-dUP7sKyt.js";
+import { u as J, c as K } from "./use-touched-B999bBr8.js";
+import './assets/index48.css';function O(n) {
+  return n && `${n[0].toLocaleUpperCase()}${n.slice(1)}`;
+}
+function Q(n) {
+  const o = O(n);
+  return o && !o.endsWith(":") ? `${o}:` : o;
+}
+const R = "_field_w1cmd_3", X = "_input_w1cmd_8", Y = "_touched_w1cmd_48", Z = "_label_w1cmd_57", q = "_inline_w1cmd_78", M = "_error_w1cmd_99", ee = "_code_w1cmd_106", e = {
+  field: R,
+  input: X,
+  touched: Y,
+  label: Z,
+  inline: q,
+  error: M,
+  code: ee
+};
+function ae({
+  className: n,
+  defaultCountryCode: o = "+47",
+  disabled: c = !1,
+  errorMessage: w,
+  icon: I,
+  invalid: h = !1,
+  label: p,
+  onBlur: y,
+  placeholder: x,
+  ref: B,
+  required: _,
+  style: N,
+  type: t = "text",
+  variant: f = "default",
+  ...a
+}) {
+  const z = A(), [v, L] = T(""), [l, j] = T(""), {
+    name: C,
+    onChange: s,
+    pattern: G,
+    value: d,
+    ...H
+  } = a, {
+    touched: E,
+    onBlur: U
+  } = J(d === ""), u = I && t !== "radio" && t !== "datetime-local" ? I : void 0, $ = p && f === "inline" ? Q(p) : p, b = h && w ? z : void 0, F = [a["aria-describedby"], b].filter(Boolean).join(" ") || void 0, P = u ? {
+    ...N,
+    "--icon-svg": D(u)
+  } : N, S = K(U, y);
+  V(() => {
+    if (s && t === "tel") {
+      const i = {
+        name: C,
+        value: l ? (v || o).split(" ").join("") + l.split(" ").join("") : void 0
+      };
+      s({
+        target: i,
+        currentTarget: i
+      });
+    }
+  }, [v, o, C, s, l, t]), V(() => {
+    t === "tel" && !d && (j(""), L(""));
+  }, [t, d]);
+  const W = /* @__PURE__ */ g(k, { children: [
+    /* @__PURE__ */ r("input", { disabled: c, hidden: !0, onChange: s, pattern: void 0, placeholder: x, ref: B, type: t, value: d }),
+    /* @__PURE__ */ r("input", { type: "text", className: m(e.code, e.input), disabled: c, maxLength: 5, onChange: (i) => L(i.target.value), placeholder: o, value: v }),
+    /* @__PURE__ */ r("input", { ...H, "aria-describedby": F, "aria-invalid": h ? !0 : a["aria-invalid"], type: "tel", className: m(e.input, n, E && e.touched), "data-icon": u ? "true" : void 0, disabled: c, maxLength: 14, name: void 0, onChange: (i) => j(i.target.value), onBlur: S, pattern: G, required: _, style: P, value: l })
+  ] });
+  return /* @__PURE__ */ g("div", { className: e.field, "data-component": "input", children: [
+    /* @__PURE__ */ g("label", { className: m(e.label, f === "inline" && e.inline), children: [
+      $ && /* @__PURE__ */ r("span", { "data-required": _ && f !== "inline" ? !0 : void 0, children: $ }),
+      t === "tel" ? W : /* @__PURE__ */ r("input", { ...a, "aria-describedby": F, "aria-invalid": h ? !0 : a["aria-invalid"], ref: B, className: m(e.input, n, E && e.touched), "data-icon": u ? "true" : void 0, disabled: c, onBlur: S, placeholder: x, required: _, style: P, type: t })
+    ] }),
+    b && /* @__PURE__ */ r("span", { className: e.error, id: b, role: "alert", children: w })
+  ] });
+}
+export {
+  ae as I,
+  Q as f
+};
+//# sourceMappingURL=index-Ds-Ocs4L.js.map

package/dist/{index-CbJ2-IPc.js.map → index-Ds-Ocs4L.js.map}

@@ -1 +1 @@
-{"version":3,"file":"index-CbJ2-IPc.js","sources":["../src/utils/text.ts","../src/components/input/index.tsx"],"sourcesContent":["export function capitalizeFirstLetter(value: string): string {\n  return value ? `${value[0].toLocaleUpperCase()}${value.slice(1)}` : value;\n}\n\nexport function formatInlineLabel(value: string): string {\n  const label = capitalizeFirstLetter(value);\n  return label && !label.endsWith(':') ? `${label}:` : label;\n}\n","import cx from 'classix';\nimport { useEffect, useId, useState } from 'react';\n\nimport { IconName, iconSVG } from '@/components/icon/icons.ts';\nimport { composeEventHandlers } from '@/utils/compose-event-handlers';\nimport { formatInlineLabel } from '@/utils/text';\nimport { useTouched } from '@/utils/use-touched';\n\nimport styles from './styles.module.css';\n\nexport type InputProps = React.ComponentPropsWithRef<'input'> & {\n  defaultCountryCode?: string;\n  disabled?: boolean;\n  errorMessage?: React.ReactNode;\n  icon?: IconName;\n  invalid?: boolean;\n  label?: string;\n  onClick?: React.MouseEventHandler<HTMLInputElement>;\n  placeholder?: string;\n  variant?: 'default' | 'inline';\n  type?:\n    | 'date'\n    | 'datetime-local'\n    | 'email'\n    | 'number'\n    | 'password'\n    | 'radio'\n    | 'search'\n    | 'tel'\n    | 'text';\n};\n\nexport function Input({\n  className,\n  defaultCountryCode = '+47',\n  disabled = false,\n  errorMessage,\n  icon,\n  invalid = false,\n  label,\n  onBlur: onBlurProp,\n  placeholder,\n  ref,\n  required,\n  style,\n  type = 'text',\n  variant = 'default',\n  ...props\n}: InputProps) {\n  const generatedErrorId = useId();\n  const [countryCode, setCountryCode] = useState('');\n  const [phoneNumber, setPhoneNumber] = useState('');\n  const { name, onChange, pattern, value, ...restProps } = props;\n  const { touched, onBlur } = useTouched(value === '');\n  const inputIcon = icon && type !== 'radio' && type !== 'datetime-local' ? icon : undefined;\n  const displayLabel = label && variant === 'inline' ? formatInlineLabel(label) : label;\n  const errorId = invalid && errorMessage ? generatedErrorId : undefined;\n  const describedBy = [props['aria-describedby'], errorId].filter(Boolean).join(' ') || undefined;\n\n  type withVars =\n    | (React.CSSProperties & {\n        '--icon-svg'?: string;\n      })\n    | undefined;\n\n  const withVars: withVars = inputIcon\n    ? {\n        ...style,\n        '--icon-svg': iconSVG(inputIcon),\n      }\n    : style;\n  const handleBlur = composeEventHandlers(onBlur, onBlurProp);\n\n  useEffect(() => {\n    if (onChange && type === 'tel') {\n      const target = {\n        name,\n        value: phoneNumber\n          ? (countryCode || defaultCountryCode).split(' ').join('') +\n            phoneNumber.split(' ').join('')\n          : undefined,\n      } as unknown as HTMLInputElement;\n\n      onChange({ target, currentTarget: target } as React.ChangeEvent<HTMLInputElement>);\n    }\n  }, [countryCode, defaultCountryCode, name, onChange, phoneNumber, type]);\n\n  useEffect(() => {\n    if (type === 'tel' && !value) {\n      setPhoneNumber('');\n      setCountryCode('');\n    }\n  }, [type, value]);\n\n  const telephoneInput = (\n    <>\n      <input\n        disabled={disabled}\n        hidden\n        onChange={onChange}\n        pattern={undefined}\n        placeholder={placeholder}\n        ref={ref}\n        type={type}\n        value={value}\n      />\n      <input\n        type='text'\n        className={cx(styles.code, styles.input)}\n        disabled={disabled}\n        maxLength={5}\n        onChange={(e) => setCountryCode(e.target.value)}\n        placeholder={defaultCountryCode}\n        value={countryCode}\n      />\n      <input\n        {...restProps}\n        aria-describedby={describedBy}\n        aria-invalid={invalid ? true : props['aria-invalid']}\n        type='tel'\n        className={cx(styles.input, className, touched && styles.touched)}\n        data-icon={inputIcon ? 'true' : undefined}\n        disabled={disabled}\n        maxLength={14}\n        name={undefined}\n        onChange={(e) => setPhoneNumber(e.target.value)}\n        onBlur={handleBlur}\n        pattern={pattern}\n        required={required}\n        style={withVars}\n        value={phoneNumber}\n      />\n    </>\n  );\n\n  return (\n    <div className={styles.field}>\n      <label className={cx(styles.label, variant === 'inline' && styles.inline)}>\n        {displayLabel && (\n          <span data-required={required && variant !== 'inline' ? true : undefined}>\n            {displayLabel}\n          </span>\n        )}\n        {type === 'tel' ? (\n          telephoneInput\n        ) : (\n          <input\n            {...props}\n            aria-describedby={describedBy}\n            aria-invalid={invalid ? true : props['aria-invalid']}\n            ref={ref}\n            className={cx(styles.input, className, touched && styles.touched)}\n            data-icon={inputIcon ? 'true' : undefined}\n            disabled={disabled}\n            onBlur={handleBlur}\n            placeholder={placeholder}\n            required={required}\n            style={withVars}\n            type={type}\n          />\n        )}\n      </label>\n      {errorId && (\n        <span\n          className={styles.error}\n          id={errorId}\n          role='alert'\n        >\n          {errorMessage}\n        </span>\n      )}\n    </div>\n  );\n}\n"],"names":["capitalizeFirstLetter","value","toLocaleUpperCase","slice","formatInlineLabel","label","endsWith","Input","className","defaultCountryCode","disabled","errorMessage","icon","invalid","onBlur","onBlurProp","placeholder","ref","required","style","type","variant","props","generatedErrorId","useId","countryCode","setCountryCode","useState","phoneNumber","setPhoneNumber","name","onChange","pattern","restProps","touched","useTouched","inputIcon","undefined","displayLabel","errorId","describedBy","filter","Boolean","join","withVars","iconSVG","handleBlur","composeEventHandlers","useEffect","target","split","currentTarget","telephoneInput","jsxs","Fragment","jsx","cx","styles","code","input","e","field","inline","error"],"mappings":"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"}
+{"version":3,"file":"index-Ds-Ocs4L.js","sources":["../src/utils/text.ts","../src/components/input/index.tsx"],"sourcesContent":["export function capitalizeFirstLetter(value: string): string {\n  return value ? `${value[0].toLocaleUpperCase()}${value.slice(1)}` : value;\n}\n\nexport function formatInlineLabel(value: string): string {\n  const label = capitalizeFirstLetter(value);\n  return label && !label.endsWith(':') ? `${label}:` : label;\n}\n","import cx from 'classix';\nimport { useEffect, useId, useState } from 'react';\n\nimport { IconName, iconSVG } from '@/components/icon/icons.ts';\nimport { composeEventHandlers } from '@/utils/compose-event-handlers';\nimport { formatInlineLabel } from '@/utils/text';\nimport { useTouched } from '@/utils/use-touched';\n\nimport styles from './styles.module.css';\n\nexport type InputProps = React.ComponentPropsWithRef<'input'> & {\n  defaultCountryCode?: string;\n  disabled?: boolean;\n  errorMessage?: React.ReactNode;\n  icon?: IconName;\n  invalid?: boolean;\n  label?: string;\n  onClick?: React.MouseEventHandler<HTMLInputElement>;\n  placeholder?: string;\n  variant?: 'default' | 'inline';\n  type?:\n    | 'date'\n    | 'datetime-local'\n    | 'email'\n    | 'number'\n    | 'password'\n    | 'radio'\n    | 'search'\n    | 'tel'\n    | 'text';\n};\n\nexport function Input({\n  className,\n  defaultCountryCode = '+47',\n  disabled = false,\n  errorMessage,\n  icon,\n  invalid = false,\n  label,\n  onBlur: onBlurProp,\n  placeholder,\n  ref,\n  required,\n  style,\n  type = 'text',\n  variant = 'default',\n  ...props\n}: InputProps) {\n  const generatedErrorId = useId();\n  const [countryCode, setCountryCode] = useState('');\n  const [phoneNumber, setPhoneNumber] = useState('');\n  const { name, onChange, pattern, value, ...restProps } = props;\n  const { touched, onBlur } = useTouched(value === '');\n  const inputIcon = icon && type !== 'radio' && type !== 'datetime-local' ? icon : undefined;\n  const displayLabel = label && variant === 'inline' ? formatInlineLabel(label) : label;\n  const errorId = invalid && errorMessage ? generatedErrorId : undefined;\n  const describedBy = [props['aria-describedby'], errorId].filter(Boolean).join(' ') || undefined;\n\n  type withVars =\n    | (React.CSSProperties & {\n        '--icon-svg'?: string;\n      })\n    | undefined;\n\n  const withVars: withVars = inputIcon\n    ? {\n        ...style,\n        '--icon-svg': iconSVG(inputIcon),\n      }\n    : style;\n  const handleBlur = composeEventHandlers(onBlur, onBlurProp);\n\n  useEffect(() => {\n    if (onChange && type === 'tel') {\n      const target = {\n        name,\n        value: phoneNumber\n          ? (countryCode || defaultCountryCode).split(' ').join('') +\n            phoneNumber.split(' ').join('')\n          : undefined,\n      } as unknown as HTMLInputElement;\n\n      onChange({ target, currentTarget: target } as React.ChangeEvent<HTMLInputElement>);\n    }\n  }, [countryCode, defaultCountryCode, name, onChange, phoneNumber, type]);\n\n  useEffect(() => {\n    if (type === 'tel' && !value) {\n      setPhoneNumber('');\n      setCountryCode('');\n    }\n  }, [type, value]);\n\n  const telephoneInput = (\n    <>\n      <input\n        disabled={disabled}\n        hidden\n        onChange={onChange}\n        pattern={undefined}\n        placeholder={placeholder}\n        ref={ref}\n        type={type}\n        value={value}\n      />\n      <input\n        type='text'\n        className={cx(styles.code, styles.input)}\n        disabled={disabled}\n        maxLength={5}\n        onChange={(e) => setCountryCode(e.target.value)}\n        placeholder={defaultCountryCode}\n        value={countryCode}\n      />\n      <input\n        {...restProps}\n        aria-describedby={describedBy}\n        aria-invalid={invalid ? true : props['aria-invalid']}\n        type='tel'\n        className={cx(styles.input, className, touched && styles.touched)}\n        data-icon={inputIcon ? 'true' : undefined}\n        disabled={disabled}\n        maxLength={14}\n        name={undefined}\n        onChange={(e) => setPhoneNumber(e.target.value)}\n        onBlur={handleBlur}\n        pattern={pattern}\n        required={required}\n        style={withVars}\n        value={phoneNumber}\n      />\n    </>\n  );\n\n  return (\n    <div className={styles.field}>\n      <label className={cx(styles.label, variant === 'inline' && styles.inline)}>\n        {displayLabel && (\n          <span data-required={required && variant !== 'inline' ? true : undefined}>\n            {displayLabel}\n          </span>\n        )}\n        {type === 'tel' ? (\n          telephoneInput\n        ) : (\n          <input\n            {...props}\n            aria-describedby={describedBy}\n            aria-invalid={invalid ? true : props['aria-invalid']}\n            ref={ref}\n            className={cx(styles.input, className, touched && styles.touched)}\n            data-icon={inputIcon ? 'true' : undefined}\n            disabled={disabled}\n            onBlur={handleBlur}\n            placeholder={placeholder}\n            required={required}\n            style={withVars}\n            type={type}\n          />\n        )}\n      </label>\n      {errorId && (\n        <span\n          className={styles.error}\n          id={errorId}\n          role='alert'\n        >\n          {errorMessage}\n        </span>\n      )}\n    </div>\n  );\n}\n"],"names":["capitalizeFirstLetter","value","toLocaleUpperCase","slice","formatInlineLabel","label","endsWith","Input","className","defaultCountryCode","disabled","errorMessage","icon","invalid","onBlur","onBlurProp","placeholder","ref","required","style","type","variant","props","generatedErrorId","useId","countryCode","setCountryCode","useState","phoneNumber","setPhoneNumber","name","onChange","pattern","restProps","touched","useTouched","inputIcon","undefined","displayLabel","errorId","describedBy","filter","Boolean","join","withVars","iconSVG","handleBlur","composeEventHandlers","useEffect","target","split","currentTarget","telephoneInput","jsxs","Fragment","jsx","cx","styles","code","input","e","field","inline","error"],"mappings":"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"}

package/dist/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('./assets/index.css');const o=require("./components/app-link/index.cjs"),t=require("./components/app-shell/index.cjs"),r=require("./components/aside/index.cjs"),i=require("./components/avatar/index.cjs"),s=require("./components/badge/index.cjs"),c=require("./components/banner/index.cjs"),p=require("./components/branding/index.cjs"),_=require("./components/button/index.cjs"),a=require("./components/card/index.cjs"),d=require("./components/checkbox/index.cjs"),u=require("./components/chip/index.cjs"),m=require("./components/collapsible/index.cjs"),l=require("./components/controls/index.cjs"),x=require("./components/croppable/index.cjs"),q=require("./components/dialog/index.cjs"),g=require("./components/divider/index.cjs"),b=require("./components/dropdown/index.cjs"),v=require("./components/dropzone/index.cjs"),h=require("./components/editor/index.cjs"),S=require("./components/empty-state/index.cjs"),T=require("./components/fieldset/index.cjs"),L=require("./components/figure/index.cjs"),C=require("./components/file/index.cjs"),I=require("./components/footer/index.cjs"),F=require("./components/form/index.cjs"),f=require("./components/graph/index.cjs"),k=require("./components/group/index.cjs"),y=require("./components/header/index.cjs"),A=require("./components/icon/index.cjs"),B=require("./components/iframe/index.cjs"),D=require("./components/image/index.cjs"),M=require("./index-CQlMdqOp.cjs"),P=require("./components/link/index.cjs"),N=require("./components/list/index.cjs"),O=require("./components/loading/index.cjs"),j=require("./components/menu/index.cjs"),w=require("./components/message/index.cjs"),E=require("./components/messages/index.cjs"),e=require("./components/nav/index.cjs"),G=require("./components/object/index.cjs"),z=require("./components/page-layout/index.cjs"),H=require("./components/popover/index.cjs"),W=require("./components/portal/index.cjs"),J=require("./components/search/index.cjs"),K=require("./index-Bt7vnwji.cjs"),n=require("./components/sortable/index.cjs"),Q=require("./components/table/index.cjs"),R=require("./components/textarea/index.cjs"),U=require("./components/toast/index.cjs"),V=require("./components/toasts/index.cjs"),X=require("./components/toggle/index.cjs"),Y=require("./components/toolbar/index.cjs"),Z=require("./components/tooltip/index.cjs"),$=require("./components/widget/index.cjs");exports.AppLink=o.AppLink;exports.AppShell=t.AppShell;exports.Aside=r.Aside;exports.Avatar=i.Avatar;exports.Badge=s.Badge;exports.Banner=c.Banner;exports.Branding=p.Branding;exports.Button=_.Button;exports.Card=a.Card;exports.Checkbox=d.Checkbox;exports.Chip=u.Chip;exports.Collapsible=m.Collapsible;exports.Controls=l.Controls;exports.Croppable=x.Croppable;exports.Dialog=q.Dialog;exports.Divider=g.Divider;exports.Dropdown=b.Dropdown;exports.Dropzone=v.Dropzone;exports.Editor=h.Editor;exports.EmptyState=S.EmptyState;exports.Fieldset=T.Fieldset;exports.Figure=L.Figure;exports.File=C.File;exports.Footer=I.Footer;exports.Form=F.Form;exports.Graph=f.Graph;exports.Group=k.Group;exports.Header=y.Header;exports.Icon=A.Icon;exports.Iframe=B.Iframe;exports.Image=D.Image;exports.Input=M.Input;exports.Link=P.Link;exports.List=N.List;exports.Loading=O.Loading;exports.Menu=j.Menu;exports.Message=w.Message;exports.Messages=E.Messages;exports.Nav=e.Nav;exports.NavItem=e.NavItem;exports.NavLabel=e.NavLabel;exports.Object=G.Object;exports.PageLayout=z.PageLayout;exports.Popover=H.Popover;exports.Portal=W.Portal;exports.Search=J.Search;exports.Select=K.Select;exports.Sortable=n.Sortable;exports.useOptionalSortableItem=n.useOptionalSortableItem;exports.Table=Q.Table;exports.Textarea=R.Textarea;exports.Toast=U.Toast;exports.Toasts=V.Toasts;exports.Toggle=X.Toggle;exports.Toolbar=Y.Toolbar;exports.Tooltip=Z.Tooltip;exports.Widget=$.Widget;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('./assets/index.css');const o=require("./components/app-link/index.cjs"),t=require("./components/app-shell/index.cjs"),r=require("./components/aside/index.cjs"),i=require("./components/avatar/index.cjs"),s=require("./components/badge/index.cjs"),c=require("./components/banner/index.cjs"),p=require("./components/branding/index.cjs"),_=require("./components/button/index.cjs"),a=require("./components/card/index.cjs"),d=require("./components/checkbox/index.cjs"),u=require("./components/chip/index.cjs"),m=require("./components/collapsible/index.cjs"),l=require("./components/controls/index.cjs"),x=require("./components/croppable/index.cjs"),q=require("./components/dialog/index.cjs"),g=require("./components/divider/index.cjs"),b=require("./components/dropdown/index.cjs"),v=require("./components/dropzone/index.cjs"),h=require("./components/editor/index.cjs"),S=require("./components/empty-state/index.cjs"),T=require("./components/fieldset/index.cjs"),L=require("./components/figure/index.cjs"),C=require("./components/file/index.cjs"),I=require("./components/footer/index.cjs"),F=require("./components/form/index.cjs"),f=require("./components/graph/index.cjs"),k=require("./components/group/index.cjs"),y=require("./components/header/index.cjs"),A=require("./components/icon/index.cjs"),B=require("./components/iframe/index.cjs"),D=require("./components/image/index.cjs"),M=require("./index-DWDp66fp.cjs"),P=require("./components/link/index.cjs"),N=require("./components/list/index.cjs"),O=require("./components/loading/index.cjs"),j=require("./components/menu/index.cjs"),w=require("./components/message/index.cjs"),E=require("./components/messages/index.cjs"),e=require("./components/nav/index.cjs"),G=require("./components/object/index.cjs"),z=require("./components/page-layout/index.cjs"),H=require("./components/popover/index.cjs"),W=require("./components/portal/index.cjs"),J=require("./components/search/index.cjs"),K=require("./index-Bt7vnwji.cjs"),n=require("./components/sortable/index.cjs"),Q=require("./components/table/index.cjs"),R=require("./components/textarea/index.cjs"),U=require("./components/toast/index.cjs"),V=require("./components/toasts/index.cjs"),X=require("./components/toggle/index.cjs"),Y=require("./components/toolbar/index.cjs"),Z=require("./components/tooltip/index.cjs"),$=require("./components/widget/index.cjs");exports.AppLink=o.AppLink;exports.AppShell=t.AppShell;exports.Aside=r.Aside;exports.Avatar=i.Avatar;exports.Badge=s.Badge;exports.Banner=c.Banner;exports.Branding=p.Branding;exports.Button=_.Button;exports.Card=a.Card;exports.Checkbox=d.Checkbox;exports.Chip=u.Chip;exports.Collapsible=m.Collapsible;exports.Controls=l.Controls;exports.Croppable=x.Croppable;exports.Dialog=q.Dialog;exports.Divider=g.Divider;exports.Dropdown=b.Dropdown;exports.Dropzone=v.Dropzone;exports.Editor=h.Editor;exports.EmptyState=S.EmptyState;exports.Fieldset=T.Fieldset;exports.Figure=L.Figure;exports.File=C.File;exports.Footer=I.Footer;exports.Form=F.Form;exports.Graph=f.Graph;exports.Group=k.Group;exports.Header=y.Header;exports.Icon=A.Icon;exports.Iframe=B.Iframe;exports.Image=D.Image;exports.Input=M.Input;exports.Link=P.Link;exports.List=N.List;exports.Loading=O.Loading;exports.Menu=j.Menu;exports.Message=w.Message;exports.Messages=E.Messages;exports.Nav=e.Nav;exports.NavItem=e.NavItem;exports.NavLabel=e.NavLabel;exports.Object=G.Object;exports.PageLayout=z.PageLayout;exports.Popover=H.Popover;exports.Portal=W.Portal;exports.Search=J.Search;exports.Select=K.Select;exports.Sortable=n.Sortable;exports.useOptionalSortableItem=n.useOptionalSortableItem;exports.Table=Q.Table;exports.Textarea=R.Textarea;exports.Toast=U.Toast;exports.Toasts=V.Toasts;exports.Toggle=X.Toggle;exports.Toolbar=Y.Toolbar;exports.Tooltip=Z.Tooltip;exports.Widget=$.Widget;
 //# sourceMappingURL=index.cjs.map

package/dist/index.d.ts

@@ -649,11 +649,13 @@ declare type MenuSharedProps = {
     onItemSelect?: (item: MenuItem) => void;
 };
 
-export declare const Message: ({ appearance, attachments, author, authorColor, authorImageUrl, authorLink, authorRole, content, iconName, id, preview, timestamp, timestampText, type, }: MessageOptions) => JSX.Element;
+export declare const Message: ({ actions, appearance, attachments, author, authorColor, authorImageUrl, authorLink, authorRole, content, iconName, id, preview, timestamp, timestampText, type, }: MessageOptions) => JSX.Element;
 
 declare type MessageItem = MessageOptions;
 
 export declare type MessageOptions = {
+    /** Controls shown under the message, e.g. a delete button for the author's own message. */
+    actions?: React.ReactNode;
     appearance?: 'default' | 'document' | 'file';
     attachments?: React.ReactNode;
     author?: string;

package/dist/index.js

@@ -29,7 +29,7 @@ import { Header as eo } from "./components/header/index.js";
 import { Icon as po } from "./components/icon/index.js";
 import { Iframe as xo } from "./components/iframe/index.js";
 import { Image as ao } from "./components/image/index.js";
-import { I as io } from "./index-CbJ2-IPc.js";
+import { I as io } from "./index-Ds-Ocs4L.js";
 import { Link as no } from "./components/link/index.js";
 import { List as bo } from "./components/list/index.js";
 import { Loading as Io } from "./components/loading/index.js";

package/dist/tokens.json

@@ -363,7 +363,7 @@
     },
     "com.solibo": {
       "packageName": "@solibo/solibo-ui",
-      "packageVersion": "2.0.1"
+      "packageVersion": "2.0.3"
     }
   },
   "$name": "TEST Solibo UI Tokens (Copy)",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solibo/solibo-ui",
-  "version": "2.0.1",
+  "version": "2.0.3",
   "type": "module",
   "scripts": {
     "dev": "pnpm run tokens:build && vite build --watch",

package/dist/index-CQlMdqOp.cjs

@@ -1,2 +0,0 @@
-"use strict";require('./assets/index48.css');const e=require("react/jsx-runtime"),_=require("./classix-5H4IWnMA.cjs"),r=require("react"),U=require("./icons-Dv_p0bUF.cjs"),F=require("./use-touched-Bq5Gjbpz.cjs");function W(n){return n&&`${n[0].toLocaleUpperCase()}${n.slice(1)}`}function P(n){const o=W(n);return o&&!o.endsWith(":")?`${o}:`:o}const k="_field_yagit_3",A="_input_yagit_8",D="_touched_yagit_48",J="_label_yagit_57",K="_inline_yagit_78",O="_error_yagit_99",Q="_code_yagit_106",t={field:k,input:A,touched:D,label:J,inline:K,error:O,code:Q};function X({className:n,defaultCountryCode:o="+47",disabled:c=!1,errorMessage:b,icon:j,invalid:g=!1,label:m,onBlur:R,placeholder:I,ref:y,required:f,style:B,type:i="text",variant:p="default",...s}){const V=r.useId(),[v,L]=r.useState(""),[l,N]=r.useState(""),{name:q,onChange:u,pattern:w,value:d,...z}=s,{touched:E,onBlur:G}=F.useTouched(d===""),h=j&&i!=="radio"&&i!=="datetime-local"?j:void 0,C=m&&p==="inline"?P(m):m,x=g&&b?V:void 0,S=[s["aria-describedby"],x].filter(Boolean).join(" ")||void 0,T=h?{...B,"--icon-svg":U.iconSVG(h)}:B,$=F.composeEventHandlers(G,R);r.useEffect(()=>{if(u&&i==="tel"){const a={name:q,value:l?(v||o).split(" ").join("")+l.split(" ").join(""):void 0};u({target:a,currentTarget:a})}},[v,o,q,u,l,i]),r.useEffect(()=>{i==="tel"&&!d&&(N(""),L(""))},[i,d]);const H=e.jsxs(e.Fragment,{children:[e.jsx("input",{disabled:c,hidden:!0,onChange:u,pattern:void 0,placeholder:I,ref:y,type:i,value:d}),e.jsx("input",{type:"text",className:_.t(t.code,t.input),disabled:c,maxLength:5,onChange:a=>L(a.target.value),placeholder:o,value:v}),e.jsx("input",{...z,"aria-describedby":S,"aria-invalid":g?!0:s["aria-invalid"],type:"tel",className:_.t(t.input,n,E&&t.touched),"data-icon":h?"true":void 0,disabled:c,maxLength:14,name:void 0,onChange:a=>N(a.target.value),onBlur:$,pattern:w,required:f,style:T,value:l})]});return e.jsxs("div",{className:t.field,"data-component":"input",children:[e.jsxs("label",{className:_.t(t.label,p==="inline"&&t.inline),children:[C&&e.jsx("span",{"data-required":f&&p!=="inline"?!0:void 0,children:C}),i==="tel"?H:e.jsx("input",{...s,"aria-describedby":S,"aria-invalid":g?!0:s["aria-invalid"],ref:y,className:_.t(t.input,n,E&&t.touched),"data-icon":h?"true":void 0,disabled:c,onBlur:$,placeholder:I,required:f,style:T,type:i})]}),x&&e.jsx("span",{className:t.error,id:x,role:"alert",children:b})]})}exports.Input=X;exports.formatInlineLabel=P;
-//# sourceMappingURL=index-CQlMdqOp.cjs.map

package/dist/index-CbJ2-IPc.js

@@ -1,83 +0,0 @@
-import { jsxs as b, Fragment as k, jsx as a } from "react/jsx-runtime";
-import { t as m } from "./classix-DG18itHa.js";
-import { useId as A, useState as T, useEffect as V } from "react";
-import { i as D } from "./icons-dUP7sKyt.js";
-import { u as J, c as K } from "./use-touched-B999bBr8.js";
-import './assets/index48.css';function O(t) {
-  return t && `${t[0].toLocaleUpperCase()}${t.slice(1)}`;
-}
-function Q(t) {
-  const i = O(t);
-  return i && !i.endsWith(":") ? `${i}:` : i;
-}
-const R = "_field_yagit_3", X = "_input_yagit_8", Y = "_touched_yagit_48", Z = "_label_yagit_57", q = "_inline_yagit_78", M = "_error_yagit_99", ee = "_code_yagit_106", e = {
-  field: R,
-  input: X,
-  touched: Y,
-  label: Z,
-  inline: q,
-  error: M,
-  code: ee
-};
-function re({
-  className: t,
-  defaultCountryCode: i = "+47",
-  disabled: c = !1,
-  errorMessage: y,
-  icon: I,
-  invalid: h = !1,
-  label: p,
-  onBlur: w,
-  placeholder: x,
-  ref: B,
-  required: _,
-  style: N,
-  type: n = "text",
-  variant: f = "default",
-  ...r
-}) {
-  const z = A(), [g, L] = T(""), [l, j] = T(""), {
-    name: C,
-    onChange: s,
-    pattern: G,
-    value: d,
-    ...H
-  } = r, {
-    touched: E,
-    onBlur: U
-  } = J(d === ""), u = I && n !== "radio" && n !== "datetime-local" ? I : void 0, $ = p && f === "inline" ? Q(p) : p, v = h && y ? z : void 0, F = [r["aria-describedby"], v].filter(Boolean).join(" ") || void 0, P = u ? {
-    ...N,
-    "--icon-svg": D(u)
-  } : N, S = K(U, w);
-  V(() => {
-    if (s && n === "tel") {
-      const o = {
-        name: C,
-        value: l ? (g || i).split(" ").join("") + l.split(" ").join("") : void 0
-      };
-      s({
-        target: o,
-        currentTarget: o
-      });
-    }
-  }, [g, i, C, s, l, n]), V(() => {
-    n === "tel" && !d && (j(""), L(""));
-  }, [n, d]);
-  const W = /* @__PURE__ */ b(k, { children: [
-    /* @__PURE__ */ a("input", { disabled: c, hidden: !0, onChange: s, pattern: void 0, placeholder: x, ref: B, type: n, value: d }),
-    /* @__PURE__ */ a("input", { type: "text", className: m(e.code, e.input), disabled: c, maxLength: 5, onChange: (o) => L(o.target.value), placeholder: i, value: g }),
-    /* @__PURE__ */ a("input", { ...H, "aria-describedby": F, "aria-invalid": h ? !0 : r["aria-invalid"], type: "tel", className: m(e.input, t, E && e.touched), "data-icon": u ? "true" : void 0, disabled: c, maxLength: 14, name: void 0, onChange: (o) => j(o.target.value), onBlur: S, pattern: G, required: _, style: P, value: l })
-  ] });
-  return /* @__PURE__ */ b("div", { className: e.field, "data-component": "input", children: [
-    /* @__PURE__ */ b("label", { className: m(e.label, f === "inline" && e.inline), children: [
-      $ && /* @__PURE__ */ a("span", { "data-required": _ && f !== "inline" ? !0 : void 0, children: $ }),
-      n === "tel" ? W : /* @__PURE__ */ a("input", { ...r, "aria-describedby": F, "aria-invalid": h ? !0 : r["aria-invalid"], ref: B, className: m(e.input, t, E && e.touched), "data-icon": u ? "true" : void 0, disabled: c, onBlur: S, placeholder: x, required: _, style: P, type: n })
-    ] }),
-    v && /* @__PURE__ */ a("span", { className: e.error, id: v, role: "alert", children: y })
-  ] });
-}
-export {
-  re as I,
-  Q as f
-};
-//# sourceMappingURL=index-CbJ2-IPc.js.map