@solibo/solibo-ui 0.3.38 → 0.3.39

package/dist/index-xRmXVWAN.js

@@ -0,0 +1,34 @@
+import { jsxs as o, jsx as n } from "react/jsx-runtime";
+import { t as l } from "./classix-DG18itHa.js";
+import { u as m } from "./utils-DXIJVVzz.js";
+import './assets/index41.css';const p = /* @__PURE__ */ new Set(["aria-activedescendant", "aria-autocomplete", "aria-busy", "aria-controls", "aria-describedby", "aria-details", "aria-disabled", "aria-errormessage", "aria-expanded", "aria-haspopup", "aria-hidden", "aria-invalid", "aria-keyshortcuts", "aria-label", "aria-labelledby", "aria-live", "aria-owns", "aria-required", "aria-roledescription", "autoComplete", "autoFocus", "className", "defaultValue", "dir", "disabled", "form", "id", "multiple", "name", "onBlur", "onChange", "onClick", "onFocus", "onInput", "onInvalid", "onKeyDown", "onKeyUp", "onMouseDown", "onMouseUp", "onPointerDown", "onPointerUp", "required", "role", "size", "style", "tabIndex", "title", "value"]);
+function b(a) {
+  return Object.fromEntries(Object.entries(a).filter(([e]) => e.startsWith("data-") || e.startsWith("aria-") || p.has(e)));
+}
+const h = "_select_10mqf_1", f = "_label_10mqf_21", q = "_required_10mqf_25", t = {
+  select: h,
+  label: f,
+  required: q
+}, w = ({
+  children: a,
+  label: e,
+  placeholder: i,
+  ...r
+}) => {
+  const {
+    touched: c,
+    onBlur: d
+  } = m(r.value === ""), u = b(r), s = /* @__PURE__ */ o("select", { className: l(t.select, c && "touched"), onBlur: d, ...u, children: [
+    i && /* @__PURE__ */ n("option", { value: "", hidden: !0, children: i }),
+    a
+  ] });
+  return e ? /* @__PURE__ */ o("label", { "data-component": "select", children: [
+    /* @__PURE__ */ n("span", { className: l(t.label, r.required && t.required), children: e }),
+    s
+  ] }) : s;
+};
+export {
+  w as S,
+  b as s
+};
+//# sourceMappingURL=index-xRmXVWAN.js.map

package/dist/index-xRmXVWAN.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index-xRmXVWAN.js","sources":["../src/components/select/sanitizeSelectProps.ts","../src/components/select/index.tsx"],"sourcesContent":["const selectKeys = new Set([\n  'aria-activedescendant',\n  'aria-autocomplete',\n  'aria-busy',\n  'aria-controls',\n  'aria-describedby',\n  'aria-details',\n  'aria-disabled',\n  'aria-errormessage',\n  'aria-expanded',\n  'aria-haspopup',\n  'aria-hidden',\n  'aria-invalid',\n  'aria-keyshortcuts',\n  'aria-label',\n  'aria-labelledby',\n  'aria-live',\n  'aria-owns',\n  'aria-required',\n  'aria-roledescription',\n  'autoComplete',\n  'autoFocus',\n  'className',\n  'defaultValue',\n  'dir',\n  'disabled',\n  'form',\n  'id',\n  'multiple',\n  'name',\n  'onBlur',\n  'onChange',\n  'onClick',\n  'onFocus',\n  'onInput',\n  'onInvalid',\n  'onKeyDown',\n  'onKeyUp',\n  'onMouseDown',\n  'onMouseUp',\n  'onPointerDown',\n  'onPointerUp',\n  'required',\n  'role',\n  'size',\n  'style',\n  'tabIndex',\n  'title',\n  'value',\n]);\n\nexport function sanitizeSelectProps<T extends Record<string, unknown>>(props: T) {\n  return Object.fromEntries(\n    Object.entries(props).filter(\n      ([key]) => key.startsWith('data-') || key.startsWith('aria-') || selectKeys.has(key)\n    )\n  ) as Partial<T>;\n}\n","import cx from 'classix';\n\nimport { useTouched } from '@/utils.ts';\n\nimport { sanitizeSelectProps } from './sanitizeSelectProps';\nimport styles from './styles.module.css';\n\nexport type SelectProps = React.SelectHTMLAttributes<HTMLSelectElement> & {\n  children: React.ReactNode;\n  label?: string;\n  placeholder?: string;\n};\n\nexport const Select = ({ children, label, placeholder, ...props }: SelectProps) => {\n  const { touched, onBlur } = useTouched(props.value === '');\n  const selectProps = sanitizeSelectProps(props);\n\n  const selectElement = (\n    <select\n      className={cx(styles.select, touched && 'touched')}\n      onBlur={onBlur}\n      {...selectProps}\n    >\n      {placeholder && (\n        <option\n          value={''}\n          hidden\n        >\n          {placeholder}\n        </option>\n      )}\n      {children}\n    </select>\n  );\n\n  if (!label) {\n    return selectElement;\n  }\n\n  return (\n    <label>\n      <span className={cx(styles.label, props.required && styles.required)}>{label}</span>\n      {selectElement}\n    </label>\n  );\n};\n"],"names":["selectKeys","Set","sanitizeSelectProps","props","Object","fromEntries","entries","filter","key","startsWith","has","Select","children","label","placeholder","touched","onBlur","useTouched","value","selectProps","selectElement","jsxs","cx","styles","select","jsx","required"],"mappings":";;;AAAA,MAAMA,IAAa,oBAAIC,IAAI,CACzB,yBACA,qBACA,aACA,iBACA,oBACA,gBACA,iBACA,qBACA,iBACA,iBACA,eACA,gBACA,qBACA,cACA,mBACA,aACA,aACA,iBACA,wBACA,gBACA,aACA,aACA,gBACA,OACA,YACA,QACA,MACA,YACA,QACA,UACA,YACA,WACA,WACA,WACA,aACA,aACA,WACA,eACA,aACA,iBACA,eACA,YACA,QACA,QACA,SACA,YACA,SACA,OAAO,CACR;AAEM,SAASC,EAAuDC,GAAU;AAC/E,SAAOC,OAAOC,YACZD,OAAOE,QAAQH,CAAK,EAAEI,OACpB,CAAC,CAACC,CAAG,MAAMA,EAAIC,WAAW,OAAO,KAAKD,EAAIC,WAAW,OAAO,KAAKT,EAAWU,IAAIF,CAAG,CACrF,CACF;AACF;;;;;GC5CaG,IAASA,CAAC;AAAA,EAAEC,UAAAA;AAAAA,EAAUC,OAAAA;AAAAA,EAAOC,aAAAA;AAAAA,EAAa,GAAGX;AAAmB,MAAM;AACjF,QAAM;AAAA,IAAEY,SAAAA;AAAAA,IAASC,QAAAA;AAAAA,EAAAA,IAAWC,EAAWd,EAAMe,UAAU,EAAE,GACnDC,IAAcjB,EAAoBC,CAAK,GAEvCiB,IACJ,gBAAAC,EAAC,UAAA,EACC,WAAWC,EAAGC,EAAOC,QAAQT,KAAW,SAAS,GACjD,QAAAC,GACA,GAAIG,GAEHL,UAAAA;AAAAA,IAAAA,uBACE,UAAA,EACC,OAAO,IACP,QAAM,IAELA,UAAAA,GACH;AAAA,IAEDF;AAAAA,EAAAA,GACH;AAGF,SAAKC,IAKH,gBAAAQ,EAAC,SAAA,EAAK,kBAAA,UACJ,UAAA;AAAA,IAAA,gBAAAI,EAAC,QAAA,EAAK,WAAWH,EAAGC,EAAOV,OAAOV,EAAMuB,YAAYH,EAAOG,QAAQ,GAAIb,UAAAA,EAAAA,CAAM;AAAA,IAC5EO;AAAAA,EAAAA,GACH,IAPOA;AASX;"}

package/dist/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('./assets/index.css');const e=require("./components/_avatar/index.cjs"),n=require("./components/_card/index.cjs"),o=require("./components/_collapsible/index.cjs"),r=require("./components/_croppable/index.cjs"),t=require("./components/_dropzone/index.cjs"),i=require("./components/_editor/index.cjs"),s=require("./components/_messages/index.cjs"),c=require("./components/_portal/index.cjs"),_=require("./components/_sortable/index.cjs"),a=require("./components/_toasts/index.cjs"),d=require("./components/_widget/index.cjs"),p=require("./components/accordion/index.cjs"),u=require("./components/app-link/index.cjs"),m=require("./components/aside/index.cjs"),x=require("./components/badge/index.cjs"),l=require("./components/banner/index.cjs"),q=require("./components/branding/index.cjs"),g=require("./components/button/index.cjs"),b=require("./components/checkbox/index.cjs"),T=require("./components/controls/index.cjs"),L=require("./components/dialog/index.cjs"),C=require("./components/figure/index.cjs"),k=require("./components/file/index.cjs"),A=require("./components/footer/index.cjs"),B=require("./components/form/index.cjs"),F=require("./components/graph/index.cjs"),h=require("./components/group/index.cjs"),v=require("./components/header/index.cjs"),I=require("./components/icon/index.cjs"),S=require("./components/image/index.cjs"),f=require("./components/input/index.cjs"),y=require("./components/layout/index.cjs"),M=require("./components/link/index.cjs"),D=require("./components/list/index.cjs"),G=require("./components/loading/index.cjs"),z=require("./components/message/index.cjs"),P=require("./components/nav/index.cjs"),E=require("./components/select/index.cjs"),H=require("./components/table/index.cjs"),N=require("./components/textarea/index.cjs"),W=require("./components/toast/index.cjs"),j=require("./components/toggle/index.cjs"),w=require("./components/toolbar/index.cjs");exports.Avatar=e.Avatar;exports.Card=n.Card;exports.Collapsible=o.Collapsible;exports.Croppable=r.Croppable;exports.Dropzone=t.Dropzone;exports.Editor=i.Editor;exports.Messages=s.Messages;exports.Portal=c.Portal;exports.Sortable=_.Sortable;exports.Toasts=a.Toasts;exports.Widget=d.Widget;exports.Accordion=p.Accordion;exports.AppLink=u.AppLink;exports.Aside=m.Aside;exports.Badge=x.Badge;exports.Banner=l.Banner;exports.Branding=q.Branding;exports.Button=g.Button;exports.Checkbox=b.Checkbox;exports.Controls=T.Controls;exports.Dialog=L.Dialog;exports.Figure=C.Figure;exports.File=k.File;exports.Footer=A.Footer;exports.Form=B.Form;exports.Graph=F.Graph;exports.Group=h.Group;exports.Header=v.Header;exports.Icon=I.Icon;exports.Image=S.Image;exports.Input=f.Input;exports.Layout=y.Layout;exports.Link=M.Link;exports.List=D.List;exports.Loading=G.Loading;exports.Message=z.Message;exports.Nav=P.Nav;exports.Select=E.Select;exports.Table=H.Table;exports.Textarea=N.Textarea;exports.Toast=W.Toast;exports.Toggle=j.Toggle;exports.Toolbar=w.Toolbar;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('./assets/index.css');const e=require("./components/_avatar/index.cjs"),n=require("./components/_card/index.cjs"),o=require("./components/_collapsible/index.cjs"),r=require("./components/_croppable/index.cjs"),t=require("./components/_dropdown/index.cjs"),i=require("./components/_dropzone/index.cjs"),s=require("./components/_editor/index.cjs"),c=require("./components/_messages/index.cjs"),_=require("./components/_portal/index.cjs"),a=require("./components/_sortable/index.cjs"),d=require("./components/_toasts/index.cjs"),p=require("./components/_widget/index.cjs"),u=require("./components/accordion/index.cjs"),m=require("./components/app-link/index.cjs"),x=require("./components/aside/index.cjs"),l=require("./components/badge/index.cjs"),q=require("./components/banner/index.cjs"),g=require("./components/branding/index.cjs"),b=require("./components/button/index.cjs"),T=require("./components/checkbox/index.cjs"),L=require("./components/controls/index.cjs"),C=require("./components/dialog/index.cjs"),k=require("./components/figure/index.cjs"),A=require("./components/file/index.cjs"),B=require("./components/footer/index.cjs"),F=require("./components/form/index.cjs"),h=require("./components/graph/index.cjs"),v=require("./components/group/index.cjs"),D=require("./components/header/index.cjs"),I=require("./components/icon/index.cjs"),S=require("./components/image/index.cjs"),f=require("./components/input/index.cjs"),y=require("./components/layout/index.cjs"),M=require("./components/link/index.cjs"),w=require("./components/list/index.cjs"),G=require("./components/loading/index.cjs"),z=require("./components/message/index.cjs"),P=require("./components/nav/index.cjs"),E=require("./index-HNd9cEc6.cjs"),H=require("./components/table/index.cjs"),N=require("./components/textarea/index.cjs"),W=require("./components/toast/index.cjs"),j=require("./components/toggle/index.cjs"),O=require("./components/toolbar/index.cjs");exports.Avatar=e.Avatar;exports.Card=n.Card;exports.Collapsible=o.Collapsible;exports.Croppable=r.Croppable;exports.Dropdown=t.Dropdown;exports.Dropzone=i.Dropzone;exports.Editor=s.Editor;exports.Messages=c.Messages;exports.Portal=_.Portal;exports.Sortable=a.Sortable;exports.Toasts=d.Toasts;exports.Widget=p.Widget;exports.Accordion=u.Accordion;exports.AppLink=m.AppLink;exports.Aside=x.Aside;exports.Badge=l.Badge;exports.Banner=q.Banner;exports.Branding=g.Branding;exports.Button=b.Button;exports.Checkbox=T.Checkbox;exports.Controls=L.Controls;exports.Dialog=C.Dialog;exports.Figure=k.Figure;exports.File=A.File;exports.Footer=B.Footer;exports.Form=F.Form;exports.Graph=h.Graph;exports.Group=v.Group;exports.Header=D.Header;exports.Icon=I.Icon;exports.Image=S.Image;exports.Input=f.Input;exports.Layout=y.Layout;exports.Link=M.Link;exports.List=w.List;exports.Loading=G.Loading;exports.Message=z.Message;exports.Nav=P.Nav;exports.Select=E.Select;exports.Table=H.Table;exports.Textarea=N.Textarea;exports.Toast=W.Toast;exports.Toggle=j.Toggle;exports.Toolbar=O.Toolbar;
 //# sourceMappingURL=index.cjs.map

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+import { ButtonHTMLAttributes } from 'react';
 import { ChangeEvent } from 'react';
 import { default as default_2 } from 'react';
 import { DetailedHTMLProps } from 'react';
@@ -72,16 +73,14 @@ declare const brandingSVG: {
     logo: string;
 };
 
-export declare const Button: ({ children, className, disabled, icon, onClick, variant, ...props }: ButtonProps) => JSX.Element;
-
-declare type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
-    children: React.ReactNode;
-    className?: string;
-    disabled?: boolean;
-    icon?: IconName;
-    onClick?: React.MouseEventHandler<HTMLButtonElement>;
-    variant?: keyof typeof variants_4;
-};
+export declare const Button: ForwardRefExoticComponent<ButtonHTMLAttributes<HTMLButtonElement> & {
+children: React.ReactNode;
+className?: string;
+disabled?: boolean;
+icon?: IconName;
+onClick?: React.MouseEventHandler<HTMLButtonElement>;
+variant?: keyof typeof variants_4;
+} & RefAttributes<HTMLButtonElement>>;
 
 export declare const Card: ({ children, draft, image, onClick, scheduled }: CardProps) => JSX.Element;
 
@@ -146,6 +145,17 @@ declare type DialogProps = default_2.DialogHTMLAttributes<HTMLDialogElement> & {
     setOpen?: default_2.Dispatch<default_2.SetStateAction<boolean>>;
 };
 
+export declare const Dropdown: ({ children: selectElement, className, emptyLabel, searchPlaceholder, variant, ...props }: DropdownProps) => JSX.Element;
+
+declare type DropdownProps = Omit<default_2.ComponentPropsWithoutRef<'div'>, 'children'> & {
+    children: DropdownSelectElement;
+    emptyLabel?: string;
+    searchPlaceholder?: string;
+    variant?: 'default' | 'minimal';
+};
+
+declare type DropdownSelectElement = NativeSelectElement | WrappedSelectElement;
+
 export declare const Dropzone: ({ accepts, label, maxFileSize, multiple, onChange, onValidation, variant, ...props }: DropzoneProps) => JSX.Element;
 
 declare type DropzoneProps = {
@@ -364,6 +374,13 @@ declare type MessagesProps = {
     sending: boolean;
 };
 
+declare type NativeSelectElement = default_2.ReactElement<NativeSelectProps, 'select'>;
+
+declare type NativeSelectProps = Omit<default_2.ComponentPropsWithoutRef<'select'>, 'children' | 'multiple'> & {
+    children: default_2.ReactNode;
+    multiple?: false;
+};
+
 export declare const Nav: ({ animation, children, className, horizontal, variant, ...props }: NavProps) => JSX.Element;
 
 declare type NavProps = React.HTMLAttributes<HTMLElement> & {
@@ -516,4 +533,6 @@ declare type WidgetProps = {
     children: React.ReactNode;
 };
 
+declare type WrappedSelectElement = default_2.ReactElement<SelectProps, typeof Select>;
+
 export { }

package/dist/index.js

@@ -2,88 +2,90 @@ import { Avatar as e } from "./components/_avatar/index.js";
 import { Card as p } from "./components/_card/index.js";
 import { Collapsible as x } from "./components/_collapsible/index.js";
 import { Croppable as a } from "./components/_croppable/index.js";
-import { Dropzone as l } from "./components/_dropzone/index.js";
-import { Editor as s } from "./components/_editor/index.js";
-import { Messages as d } from "./components/_messages/index.js";
-import { Portal as T } from "./components/_portal/index.js";
-import { Sortable as u } from "./components/_sortable/index.js";
-import { Toasts as L } from "./components/_toasts/index.js";
-import { Widget as B } from "./components/_widget/index.js";
-import { Accordion as k } from "./components/accordion/index.js";
+import { Dropdown as i } from "./components/_dropdown/index.js";
+import { Dropzone as s } from "./components/_dropzone/index.js";
+import { Editor as d } from "./components/_editor/index.js";
+import { Messages as T } from "./components/_messages/index.js";
+import { Portal as u } from "./components/_portal/index.js";
+import { Sortable as L } from "./components/_sortable/index.js";
+import { Toasts as B } from "./components/_toasts/index.js";
+import { Widget as k } from "./components/_widget/index.js";
+import { Accordion as I } from "./components/accordion/index.js";
 import { AppLink as h } from "./components/app-link/index.js";
-import { Aside as D } from "./components/aside/index.js";
-import { Badge as M } from "./components/badge/index.js";
-import { Banner as y } from "./components/banner/index.js";
-import { Branding as E } from "./components/branding/index.js";
-import { Button as N } from "./components/button/index.js";
-import { Checkbox as W } from "./components/checkbox/index.js";
-import { Controls as q } from "./components/controls/index.js";
-import { Dialog as J } from "./components/dialog/index.js";
-import { Figure as O } 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 { Image as xo } from "./components/image/index.js";
-import { Input as ao } from "./components/input/index.js";
-import { Layout as lo } from "./components/layout/index.js";
-import { Link as so } from "./components/link/index.js";
-import { List as bo } from "./components/list/index.js";
-import { Loading as co } from "./components/loading/index.js";
-import { Message as Co } from "./components/message/index.js";
-import { Nav as Ao } from "./components/nav/index.js";
-import { Select as Fo } from "./components/select/index.js";
-import { Table as Io } from "./components/table/index.js";
+import { Aside as G } from "./components/aside/index.js";
+import { Badge as w } from "./components/badge/index.js";
+import { Banner as z } from "./components/banner/index.js";
+import { Branding as H } from "./components/branding/index.js";
+import { Button as P } from "./components/button/index.js";
+import { Checkbox as j } from "./components/checkbox/index.js";
+import { Controls as J } from "./components/controls/index.js";
+import { Dialog as O } from "./components/dialog/index.js";
+import { Figure as R } from "./components/figure/index.js";
+import { File as V } from "./components/file/index.js";
+import { Footer as Y } from "./components/footer/index.js";
+import { Form as _ } from "./components/form/index.js";
+import { Graph as oo } from "./components/graph/index.js";
+import { Group as eo } from "./components/group/index.js";
+import { Header as po } from "./components/header/index.js";
+import { Icon as xo } from "./components/icon/index.js";
+import { Image as ao } from "./components/image/index.js";
+import { Input as io } from "./components/input/index.js";
+import { Layout as so } from "./components/layout/index.js";
+import { Link as bo } from "./components/link/index.js";
+import { List as co } from "./components/list/index.js";
+import { Loading as Co } from "./components/loading/index.js";
+import { Message as Ao } from "./components/message/index.js";
+import { Nav as Fo } from "./components/nav/index.js";
+import { S as Do } from "./index-xRmXVWAN.js";
+import { Table as So } from "./components/table/index.js";
 import { Textarea as vo } from "./components/textarea/index.js";
-import { Toast as Go } from "./components/toast/index.js";
-import { Toggle as So } from "./components/toggle/index.js";
-import { Toolbar as zo } from "./components/toolbar/index.js";
+import { Toast as Mo } from "./components/toast/index.js";
+import { Toggle as yo } from "./components/toggle/index.js";
+import { Toolbar as Eo } from "./components/toolbar/index.js";
 import './assets/index.css';export {
-  k as Accordion,
+  I as Accordion,
   h as AppLink,
-  D as Aside,
+  G as Aside,
   e as Avatar,
-  M as Badge,
-  y as Banner,
-  E as Branding,
-  N as Button,
+  w as Badge,
+  z as Banner,
+  H as Branding,
+  P as Button,
   p as Card,
-  W as Checkbox,
+  j as Checkbox,
   x as Collapsible,
-  q as Controls,
+  J as Controls,
   a as Croppable,
-  J as Dialog,
-  l as Dropzone,
-  s as Editor,
-  O as Figure,
-  R as File,
-  V as Footer,
-  Y as Form,
-  _ as Graph,
-  oo as Group,
-  eo as Header,
-  po as Icon,
-  xo as Image,
-  ao as Input,
-  lo as Layout,
-  so as Link,
-  bo as List,
-  co as Loading,
-  Co as Message,
-  d as Messages,
-  Ao as Nav,
-  T as Portal,
-  Fo as Select,
-  u as Sortable,
-  Io as Table,
+  O as Dialog,
+  i as Dropdown,
+  s as Dropzone,
+  d as Editor,
+  R as Figure,
+  V as File,
+  Y as Footer,
+  _ as Form,
+  oo as Graph,
+  eo as Group,
+  po as Header,
+  xo as Icon,
+  ao as Image,
+  io as Input,
+  so as Layout,
+  bo as Link,
+  co as List,
+  Co as Loading,
+  Ao as Message,
+  T as Messages,
+  Fo as Nav,
+  u as Portal,
+  Do as Select,
+  L as Sortable,
+  So as Table,
   vo as Textarea,
-  Go as Toast,
-  L as Toasts,
-  So as Toggle,
-  zo as Toolbar,
-  B as Widget
+  Mo as Toast,
+  B as Toasts,
+  yo as Toggle,
+  Eo as Toolbar,
+  k as Widget
 };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solibo/solibo-ui",
-  "version": "0.3.38",
+  "version": "0.3.39",
   "type": "module",
   "scripts": {
     "dev": "vite build --watch",