@solibo/solibo-ui 1.1.7 → 1.2.0

package/dist/index-CbJ2-IPc.js.map

@@ -0,0 +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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"}

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/aside/index.cjs"),r=require("./components/avatar/index.cjs"),i=require("./components/badge/index.cjs"),s=require("./components/banner/index.cjs"),c=require("./components/branding/index.cjs"),_=require("./components/button/index.cjs"),p=require("./components/card/index.cjs"),a=require("./components/checkbox/index.cjs"),d=require("./components/chip/index.cjs"),u=require("./components/collapsible/index.cjs"),m=require("./components/controls/index.cjs"),l=require("./components/croppable/index.cjs"),x=require("./components/dialog/index.cjs"),q=require("./components/dropdown/index.cjs"),g=require("./components/dropzone/index.cjs"),b=require("./components/editor/index.cjs"),T=require("./components/empty-state/index.cjs"),h=require("./components/fieldset/index.cjs"),S=require("./components/figure/index.cjs"),v=require("./components/file/index.cjs"),C=require("./components/footer/index.cjs"),L=require("./components/form/index.cjs"),F=require("./components/graph/index.cjs"),I=require("./components/group/index.cjs"),f=require("./components/header/index.cjs"),k=require("./components/icon/index.cjs"),B=require("./components/iframe/index.cjs"),M=require("./components/image/index.cjs"),A=require("./index-5yOssOic.cjs"),D=require("./components/link/index.cjs"),y=require("./components/list/index.cjs"),O=require("./components/loading/index.cjs"),P=require("./components/menu/index.cjs"),j=require("./components/message/index.cjs"),w=require("./components/messages/index.cjs"),e=require("./components/nav/index.cjs"),E=require("./components/object/index.cjs"),G=require("./components/popover/index.cjs"),N=require("./components/portal/index.cjs"),z=require("./components/search/index.cjs"),H=require("./index-CXaYq0By.cjs"),n=require("./components/sortable/index.cjs"),W=require("./components/table/index.cjs"),J=require("./components/textarea/index.cjs"),K=require("./components/toast/index.cjs"),Q=require("./components/toasts/index.cjs"),R=require("./components/toggle/index.cjs"),U=require("./components/toolbar/index.cjs"),V=require("./components/tooltip/index.cjs"),X=require("./components/widget/index.cjs");exports.AppLink=o.AppLink;exports.Aside=t.Aside;exports.Avatar=r.Avatar;exports.Badge=i.Badge;exports.Banner=s.Banner;exports.Branding=c.Branding;exports.Button=_.Button;exports.Card=p.Card;exports.Checkbox=a.Checkbox;exports.Chip=d.Chip;exports.Collapsible=u.Collapsible;exports.Controls=m.Controls;exports.Croppable=l.Croppable;exports.Dialog=x.Dialog;exports.Dropdown=q.Dropdown;exports.Dropzone=g.Dropzone;exports.Editor=b.Editor;exports.EmptyState=T.EmptyState;exports.Fieldset=h.Fieldset;exports.Figure=S.Figure;exports.File=v.File;exports.Footer=C.Footer;exports.Form=L.Form;exports.Graph=F.Graph;exports.Group=I.Group;exports.Header=f.Header;exports.Icon=k.Icon;exports.Iframe=B.Iframe;exports.Image=M.Image;exports.Input=A.Input;exports.Link=D.Link;exports.List=y.List;exports.Loading=O.Loading;exports.Menu=P.Menu;exports.Message=j.Message;exports.Messages=w.Messages;exports.Nav=e.Nav;exports.NavLabel=e.NavLabel;exports.Object=E.Object;exports.Popover=G.Popover;exports.Portal=N.Portal;exports.Search=z.Search;exports.Select=H.Select;exports.Sortable=n.Sortable;exports.useOptionalSortableItem=n.useOptionalSortableItem;exports.Table=W.Table;exports.Textarea=J.Textarea;exports.Toast=K.Toast;exports.Toasts=Q.Toasts;exports.Toggle=R.Toggle;exports.Toolbar=U.Toolbar;exports.Tooltip=V.Tooltip;exports.Widget=X.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-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;
 //# sourceMappingURL=index.cjs.map

package/dist/index.d.ts

@@ -12,6 +12,12 @@ declare type AppLinkProps = {
     type: 'apple' | 'google';
 };
 
+export declare const AppShell: ({ children, className, navigation, ...props }: AppShellProps) => JSX.Element;
+
+export declare type AppShellProps = React.ComponentPropsWithoutRef<'div'> & {
+    navigation?: React.ReactNode;
+};
+
 export declare const Aside: ({ children, className, sticky, variant }: AsideProps) => JSX.Element;
 
 declare type AsideProps = {
@@ -189,6 +195,10 @@ declare type DialogProps = default_2.DialogHTMLAttributes<HTMLDialogElement> & {
     setOpen?: default_2.Dispatch<default_2.SetStateAction<boolean>>;
 };
 
+export declare const Divider: ({ className, ...props }: DividerProps) => JSX.Element;
+
+export declare type DividerProps = React.ComponentPropsWithoutRef<'hr'>;
+
 export declare const Dropdown: ({ children: selectElement, className, combobox, createOption, emptyLabel, label, renderOption, searchPlaceholder, selectedItems, variant, ...props }: DropdownProps) => JSX.Element;
 
 export declare type DropdownCreateOption = {
@@ -575,12 +585,14 @@ declare type ImageProps = ImgHTMLAttributes<HTMLImageElement> & {
     showOnError?: boolean;
 };
 
-export declare function Input({ className, defaultCountryCode, disabled, icon, label, onBlur: onBlurProp, placeholder, ref, required, style, type, variant, ...props }: InputProps): JSX.Element;
+export declare function Input({ className, defaultCountryCode, disabled, errorMessage, icon, invalid, label, onBlur: onBlurProp, placeholder, ref, required, style, type, variant, ...props }: InputProps): JSX.Element;
 
-declare type InputProps = React.ComponentPropsWithRef<'input'> & {
+export declare type InputProps = React.ComponentPropsWithRef<'input'> & {
     defaultCountryCode?: string;
     disabled?: boolean;
+    errorMessage?: React.ReactNode;
     icon?: IconName;
+    invalid?: boolean;
     label?: string;
     onClick?: React.MouseEventHandler<HTMLInputElement>;
     placeholder?: string;
@@ -703,6 +715,13 @@ declare type NativeSelectProps = Omit<default_2.ComponentPropsWithoutRef<'select
 
 export declare const Nav: ({ animation, children, className, horizontal, variant, ...props }: NavProps) => JSX.Element;
 
+export declare const NavItem: ({ actions, children, className, highlighted, ...props }: NavItemProps) => JSX.Element;
+
+export declare type NavItemProps = React.HTMLAttributes<HTMLDivElement> & {
+    actions?: React.ReactNode;
+    highlighted?: boolean;
+};
+
 export declare const NavLabel: ({ className, ...props }: NavLabelProps) => JSX.Element;
 
 export declare type NavLabelProps = React.HTMLAttributes<HTMLSpanElement>;
@@ -723,6 +742,14 @@ declare type ObjectProps = Omit<ComponentPropsWithoutRef<'object'>, 'data' | 'ty
     url: string;
 };
 
+export declare const PageLayout: ({ "aria-busy": ariaBusy, children, className, fillViewport, loading, sidebar, ...props }: PageLayoutProps) => JSX.Element;
+
+export declare type PageLayoutProps = React.ComponentPropsWithoutRef<'main'> & {
+    fillViewport?: boolean;
+    loading?: boolean;
+    sidebar?: React.ReactNode;
+};
+
 export declare type PendingInlineImage = {
     file: File;
     slot: string;

package/dist/index.js

@@ -1,107 +1,114 @@
 import { AppLink as e } from "./components/app-link/index.js";
-import { Aside as p } from "./components/aside/index.js";
-import { Avatar as x } from "./components/avatar/index.js";
-import { Badge as a } from "./components/badge/index.js";
-import { Banner as i } from "./components/banner/index.js";
-import { Branding as n } from "./components/branding/index.js";
-import { Button as d } from "./components/button/index.js";
-import { Card as T } from "./components/card/index.js";
-import { Checkbox as C } from "./components/checkbox/index.js";
-import { Chip as S } from "./components/chip/index.js";
-import { Collapsible as F } from "./components/collapsible/index.js";
-import { Controls as h } from "./components/controls/index.js";
-import { Croppable as B } from "./components/croppable/index.js";
-import { Dialog as A } from "./components/dialog/index.js";
-import { Dropdown as M } from "./components/dropdown/index.js";
-import { Dropzone as G } from "./components/dropzone/index.js";
-import { Editor as O } from "./components/editor/index.js";
-import { EmptyState as j } from "./components/empty-state/index.js";
-import { Fieldset as y } from "./components/fieldset/index.js";
-import { Figure as H } from "./components/figure/index.js";
-import { File as q } from "./components/file/index.js";
-import { Footer as K } from "./components/footer/index.js";
-import { Form as R } from "./components/form/index.js";
-import { Graph as V } from "./components/graph/index.js";
-import { Group as Y } from "./components/group/index.js";
-import { Header as _ } from "./components/header/index.js";
-import { Icon as oo } from "./components/icon/index.js";
-import { Iframe as eo } from "./components/iframe/index.js";
-import { Image as po } from "./components/image/index.js";
-import { I as xo } from "./index-Cv6TtBnd.js";
-import { Link as ao } from "./components/link/index.js";
-import { List as io } from "./components/list/index.js";
-import { Loading as no } from "./components/loading/index.js";
-import { Menu as bo } from "./components/menu/index.js";
-import { Message as uo } from "./components/message/index.js";
-import { Messages as Io } from "./components/messages/index.js";
-import { Nav as co, NavLabel as Fo } from "./components/nav/index.js";
-import { Object as ho } from "./components/object/index.js";
-import { Popover as Bo } from "./components/popover/index.js";
-import { Portal as Ao } from "./components/portal/index.js";
-import { Search as Mo } from "./components/search/index.js";
-import { S as Go } from "./index-CwIzKfBo.js";
-import { Sortable as Oo, useOptionalSortableItem as Po } from "./components/sortable/index.js";
-import { Table as wo } from "./components/table/index.js";
-import { Textarea as zo } from "./components/textarea/index.js";
-import { Toast as Wo } from "./components/toast/index.js";
-import { Toasts as Jo } from "./components/toasts/index.js";
-import { Toggle as Qo } from "./components/toggle/index.js";
-import { Toolbar as Uo } from "./components/toolbar/index.js";
-import { Tooltip as Xo } from "./components/tooltip/index.js";
-import { Widget as Zo } from "./components/widget/index.js";
+import { AppShell as p } from "./components/app-shell/index.js";
+import { Aside as x } from "./components/aside/index.js";
+import { Avatar as a } from "./components/avatar/index.js";
+import { Badge as i } from "./components/badge/index.js";
+import { Banner as n } from "./components/banner/index.js";
+import { Branding as d } from "./components/branding/index.js";
+import { Button as u } from "./components/button/index.js";
+import { Card as S } from "./components/card/index.js";
+import { Checkbox as v } from "./components/checkbox/index.js";
+import { Chip as L } from "./components/chip/index.js";
+import { Collapsible as h } from "./components/collapsible/index.js";
+import { Controls as A } from "./components/controls/index.js";
+import { Croppable as D } from "./components/croppable/index.js";
+import { Dialog as M } from "./components/dialog/index.js";
+import { Divider as P } from "./components/divider/index.js";
+import { Dropdown as E } from "./components/dropdown/index.js";
+import { Dropzone as O } from "./components/dropzone/index.js";
+import { Editor as w } from "./components/editor/index.js";
+import { EmptyState as H } from "./components/empty-state/index.js";
+import { Fieldset as q } from "./components/fieldset/index.js";
+import { Figure as K } from "./components/figure/index.js";
+import { File as R } from "./components/file/index.js";
+import { Footer as V } from "./components/footer/index.js";
+import { Form as Y } from "./components/form/index.js";
+import { Graph as _ } from "./components/graph/index.js";
+import { Group as oo } from "./components/group/index.js";
+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 { 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";
+import { Menu as To } from "./components/menu/index.js";
+import { Message as Co } from "./components/message/index.js";
+import { Messages as co } from "./components/messages/index.js";
+import { Nav as Fo, NavItem as Ao, NavLabel as Bo } from "./components/nav/index.js";
+import { Object as ko } from "./components/object/index.js";
+import { PageLayout as No } from "./components/page-layout/index.js";
+import { Popover as yo } from "./components/popover/index.js";
+import { Portal as Go } from "./components/portal/index.js";
+import { Search as jo } from "./components/search/index.js";
+import { S as zo } from "./index-BLb3JiCr.js";
+import { Sortable as Wo, useOptionalSortableItem as qo } from "./components/sortable/index.js";
+import { Table as Ko } from "./components/table/index.js";
+import { Textarea as Ro } from "./components/textarea/index.js";
+import { Toast as Vo } from "./components/toast/index.js";
+import { Toasts as Yo } from "./components/toasts/index.js";
+import { Toggle as _o } from "./components/toggle/index.js";
+import { Toolbar as or } from "./components/toolbar/index.js";
+import { Tooltip as er } from "./components/tooltip/index.js";
+import { Widget as pr } from "./components/widget/index.js";
 import './assets/index.css';export {
   e as AppLink,
-  p as Aside,
-  x as Avatar,
-  a as Badge,
-  i as Banner,
-  n as Branding,
-  d as Button,
-  T as Card,
-  C as Checkbox,
-  S as Chip,
-  F as Collapsible,
-  h as Controls,
-  B as Croppable,
-  A as Dialog,
-  M as Dropdown,
-  G as Dropzone,
-  O as Editor,
-  j as EmptyState,
-  y as Fieldset,
-  H as Figure,
-  q as File,
-  K as Footer,
-  R as Form,
-  V as Graph,
-  Y as Group,
-  _ as Header,
-  oo as Icon,
-  eo as Iframe,
-  po as Image,
-  xo as Input,
-  ao as Link,
-  io as List,
-  no as Loading,
-  bo as Menu,
-  uo as Message,
-  Io as Messages,
-  co as Nav,
-  Fo as NavLabel,
-  ho as Object,
-  Bo as Popover,
-  Ao as Portal,
-  Mo as Search,
-  Go as Select,
-  Oo as Sortable,
-  wo as Table,
-  zo as Textarea,
-  Wo as Toast,
-  Jo as Toasts,
-  Qo as Toggle,
-  Uo as Toolbar,
-  Xo as Tooltip,
-  Zo as Widget,
-  Po as useOptionalSortableItem
+  p as AppShell,
+  x as Aside,
+  a as Avatar,
+  i as Badge,
+  n as Banner,
+  d as Branding,
+  u as Button,
+  S as Card,
+  v as Checkbox,
+  L as Chip,
+  h as Collapsible,
+  A as Controls,
+  D as Croppable,
+  M as Dialog,
+  P as Divider,
+  E as Dropdown,
+  O as Dropzone,
+  w as Editor,
+  H as EmptyState,
+  q as Fieldset,
+  K as Figure,
+  R as File,
+  V as Footer,
+  Y as Form,
+  _ as Graph,
+  oo as Group,
+  eo as Header,
+  po as Icon,
+  xo as Iframe,
+  ao as Image,
+  io as Input,
+  no as Link,
+  bo as List,
+  Io as Loading,
+  To as Menu,
+  Co as Message,
+  co as Messages,
+  Fo as Nav,
+  Ao as NavItem,
+  Bo as NavLabel,
+  ko as Object,
+  No as PageLayout,
+  yo as Popover,
+  Go as Portal,
+  jo as Search,
+  zo as Select,
+  Wo as Sortable,
+  Ko as Table,
+  Ro as Textarea,
+  Vo as Toast,
+  Yo as Toasts,
+  _o as Toggle,
+  or as Toolbar,
+  er as Tooltip,
+  pr as Widget,
+  qo as useOptionalSortableItem
 };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

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

package/dist/tokens.json

@@ -365,7 +365,7 @@
     },
     "com.solibo": {
       "packageName": "@solibo/solibo-ui",
-      "packageVersion": "1.1.7"
+      "packageVersion": "1.2.0"
     }
   },
   "$name": "Solibo UI Tokens",

package/package.json

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

package/dist/index-5yOssOic.cjs

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

package/dist/index-5yOssOic.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"index-5yOssOic.cjs","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, 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  icon?: IconName;\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  icon,\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 [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\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        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    <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          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  );\n}\n"],"names":["capitalizeFirstLetter","value","toLocaleUpperCase","slice","formatInlineLabel","label","endsWith","Input","className","defaultCountryCode","disabled","icon","onBlur","onBlurProp","placeholder","ref","required","style","type","variant","props","countryCode","setCountryCode","useState","phoneNumber","setPhoneNumber","name","onChange","pattern","restProps","touched","useTouched","inputIcon","undefined","displayLabel","withVars","iconSVG","handleBlur","composeEventHandlers","useEffect","target","split","join","currentTarget","telephoneInput","jsxs","Fragment","jsx","cx","styles","code","input","e","inline"],"mappings":"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"}

package/dist/index-Cv6TtBnd.js

@@ -1,76 +0,0 @@
-import { jsxs as $, Fragment as G, jsx as c } from "react/jsx-runtime";
-import { t as p } from "./classix-DG18itHa.js";
-import { useState as E, useEffect as F } from "react";
-import { i as H } from "./icons-dUP7sKyt.js";
-import { u as U, c as W } from "./use-touched-B999bBr8.js";
-import './assets/index45.css';function k(t) {
-  return t && `${t[0].toLocaleUpperCase()}${t.slice(1)}`;
-}
-function A(t) {
-  const e = k(t);
-  return e && !e.endsWith(":") ? `${e}:` : e;
-}
-const D = "_input_p0mz8_3", J = "_touched_p0mz8_43", K = "_label_p0mz8_48", M = "_inline_p0mz8_69", O = "_code_p0mz8_86", o = {
-  input: D,
-  touched: J,
-  label: K,
-  inline: M,
-  code: O
-};
-function q({
-  className: t,
-  defaultCountryCode: e = "+47",
-  disabled: s = !1,
-  icon: f,
-  label: m,
-  onBlur: P,
-  placeholder: g,
-  ref: v,
-  required: d,
-  style: x,
-  type: n = "text",
-  variant: h = "default",
-  ...z
-}) {
-  const [_, L] = E(""), [a, b] = E(""), {
-    name: B,
-    onChange: l,
-    pattern: S,
-    value: u,
-    ...T
-  } = z, {
-    touched: I,
-    onBlur: V
-  } = U(u === ""), r = f && n !== "radio" && n !== "datetime-local" ? f : void 0, N = m && h === "inline" ? A(m) : m, j = r ? {
-    ...x,
-    "--icon-svg": H(r)
-  } : x, C = W(V, P);
-  F(() => {
-    if (l && n === "tel") {
-      const i = {
-        name: B,
-        value: a ? (_ || e).split(" ").join("") + a.split(" ").join("") : void 0
-      };
-      l({
-        target: i,
-        currentTarget: i
-      });
-    }
-  }, [_, e, B, l, a, n]), F(() => {
-    n === "tel" && !u && (b(""), L(""));
-  }, [n, u]);
-  const w = /* @__PURE__ */ $(G, { children: [
-    /* @__PURE__ */ c("input", { disabled: s, hidden: !0, onChange: l, pattern: void 0, placeholder: g, ref: v, type: n, value: u }),
-    /* @__PURE__ */ c("input", { type: "text", className: p(o.code, o.input), disabled: s, maxLength: 5, onChange: (i) => L(i.target.value), placeholder: e, value: _ }),
-    /* @__PURE__ */ c("input", { ...T, type: "tel", className: p(o.input, t, I && o.touched), "data-icon": r ? "true" : void 0, disabled: s, maxLength: 14, name: void 0, onChange: (i) => b(i.target.value), onBlur: C, pattern: S, required: d, style: j, value: a })
-  ] });
-  return /* @__PURE__ */ $("label", { className: p(o.label, h === "inline" && o.inline), "data-component": "input", children: [
-    N && /* @__PURE__ */ c("span", { "data-required": d && h !== "inline" ? !0 : void 0, children: N }),
-    n === "tel" ? w : /* @__PURE__ */ c("input", { ...z, ref: v, className: p(o.input, t, I && o.touched), "data-icon": r ? "true" : void 0, disabled: s, onBlur: C, placeholder: g, required: d, style: j, type: n })
-  ] });
-}
-export {
-  q as I,
-  A as f
-};
-//# sourceMappingURL=index-Cv6TtBnd.js.map

package/dist/index-Cv6TtBnd.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index-Cv6TtBnd.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, 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  icon?: IconName;\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  icon,\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 [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\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        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    <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          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  );\n}\n"],"names":["capitalizeFirstLetter","value","toLocaleUpperCase","slice","formatInlineLabel","label","endsWith","Input","className","defaultCountryCode","disabled","icon","onBlur","onBlurProp","placeholder","ref","required","style","type","variant","props","countryCode","setCountryCode","useState","phoneNumber","setPhoneNumber","name","onChange","pattern","restProps","touched","useTouched","inputIcon","undefined","displayLabel","withVars","iconSVG","handleBlur","composeEventHandlers","useEffect","target","split","join","currentTarget","telephoneInput","jsxs","Fragment","jsx","cx","styles","code","input","e","inline"],"mappings":"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"}