@stack-spot/citric-react 0.26.0 → 0.27.1

package/dist/citric.css

@@ -1118,7 +1118,8 @@ input[type="range"][data-citric="slider"] {
 
 /* Parts of the select css is in input.css. */
 
-[data-citric="rich-select"] {
+[data-citric="rich-select"],
+[data-citric="multi-select"] {
   --default-padding: 4px 8px;
   --default-max-height: 300px;
   --animation-duration: 0.3s;
@@ -1184,6 +1185,9 @@ input[type="range"][data-citric="slider"] {
       pointer-events: none;
       transition: transform var(--animation-duration) ease-in;
     }
+    .placeholder {
+      color: var(--light-700);
+    }
   }
   &:has(.search-bar) header {
     min-width: 150px;
@@ -1221,7 +1225,7 @@ input[type="range"][data-citric="slider"] {
       }
     }
 
-    ul {
+    > .options {
       margin: 0;
       padding: 0;
       list-style: none;
@@ -1229,7 +1233,7 @@ input[type="range"][data-citric="slider"] {
       flex-direction: column;
       flex: 1;
       overflow: hidden;
-      li {
+      > .option {
         padding: var(--padding, var(--default-padding));
         display: flex;
         transition: background-color 0.3s;
@@ -1554,6 +1558,52 @@ input[type="range"][data-citric="slider"] {
 }
 
 
+/* Parts of the multi-select css is in input.css. */
+
+[data-citric="multi-select"] {
+  --default-padding: 8px;
+  header {
+    outline: none;
+    &:not(.custom) {
+      > span, > .row {
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+      > .row {
+        position: relative;
+        &:after {
+          content: '';
+          position: absolute;
+          top: 0;
+          bottom: 0;
+          right: 0;
+          width: 50px;
+          pointer-events: none;
+          background: linear-gradient(90deg, transparent 0%, var(--light-300) 100%);;
+        }
+      }
+    }
+  }
+  [data-citric="checkbox-row"] {
+    gap: 8px;
+  }
+  label {
+    width: 100%;
+    cursor: pointer;
+  }
+  input[type="checkbox"] {
+    outline: none;
+  }
+  .option.unfiltered {
+    opacity: 0.5;
+  }
+  .select-all {
+    padding: var(--padding, var(--default-padding));
+  }
+}
+
+
 [data-citric="menu"] {
   --bg: var(--light-300);
   --hover-bg: var(--light-500);
@@ -1721,6 +1771,7 @@ nav[data-citric="menu"].rounded-items, [data-citric="menu"].rounded-items nav {
 [data-citric="input"],
 [data-citric="select"] select,
 [data-citric="rich-select"],
+[data-citric="multi-select"],
 [data-citric="textarea"] {
   height: 2.5rem;
   padding: var(--spacing-3);

package/dist/components/CheckboxGroup.d.ts

@@ -61,6 +61,18 @@ export interface BaseCheckboxGroupProps<T = any> extends WithColorScheme {
      * @returns true if the item should be disabled, false otherwise.
      */
     isDisabled?: (option: T) => boolean;
+    /**
+     * The space between options.
+     *
+     * @default "8px"
+     */
+    gap?: string;
+    /**
+     * If set to false, the checkboxes will have tabIndex = -1.
+     *
+     * @default true
+     */
+    focusable?: boolean;
 }
 export type CheckboxGroupProps<T> = Omit<React.JSX.IntrinsicElements['div'], 'onChange' | 'children'> & BaseCheckboxGroupProps<T>;
 /**
@@ -70,6 +82,8 @@ export type CheckboxGroupProps<T> = Omit<React.JSX.IntrinsicElements['div'], 'on
  *
  * Tip: if you need to implement features like "search" and "select all", use the hook `useCheckboxGroupControls`.
  *
+ * Tip: If you need a checkbox group that doesn't occupy much height, consider using a MultiSelect.
+ *
  * @example
  *
  * ```
@@ -84,5 +98,5 @@ export type CheckboxGroupProps<T> = Omit<React.JSX.IntrinsicElements['div'], 'on
  * return <CheckboxGroup options={options} renderLabel={o => o.name} renderKey={o => o.id} value={value} setValue={setValue} />
  * ```
  */
-export declare const CheckboxGroup: <T>({ appearance, name, value, options, onChange, renderLabel, renderKey, renderItem, isDisabled, colorScheme, style, ...props }: CheckboxGroupProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const CheckboxGroup: <T>({ appearance, name, value, options, onChange, renderLabel, renderKey, renderItem, isDisabled, colorScheme, style, gap, focusable, ...props }: CheckboxGroupProps<T>) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=CheckboxGroup.d.ts.map

package/dist/components/CheckboxGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxGroup.d.ts","sourceRoot":"","sources":["../../src/components/CheckboxGroup.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAM1C,MAAM,WAAW,sBAAsB,CAAC,CAAC,GAAG,GAAG,CAAE,SAAQ,eAAe;IACtE;;;OAGG;IACH,UAAU,CAAC,EAAE,UAAU,GAAG,QAAQ,CAAC;IACnC;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,EAAE,CAAC,EAAE,CAAC;IACX;;OAEG;IACH,OAAO,EAAE,CAAC,EAAE,CAAC;IACb;;;OAGG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC;IAC/B;;;;;;;;;;OAUG;IACH,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IAC7C;;;;;;;;;OASG;IACH,UAAU,CAAC,EAAE,CAAC,QAAQ,EAAE,KAAK,CAAC,YAAY,EAAE,MAAM,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IAC1E;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IACvD;;;;;OAKG;IACH,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,OAAO,CAAC;CACrC;AAED,MAAM,MAAM,kBAAkB,CAAC,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC,GAAG,sBAAsB,CAAC,CAAC,CAAC,CAAA;AAEjI;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,aAAa,GACD,CAAC,gIAarB,kBAAkB,CAAC,CAAC,CAAC,4CAyBzB,CAAA"}
+{"version":3,"file":"CheckboxGroup.d.ts","sourceRoot":"","sources":["../../src/components/CheckboxGroup.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAM1C,MAAM,WAAW,sBAAsB,CAAC,CAAC,GAAG,GAAG,CAAE,SAAQ,eAAe;IACtE;;;OAGG;IACH,UAAU,CAAC,EAAE,UAAU,GAAG,QAAQ,CAAC;IACnC;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,EAAE,CAAC,EAAE,CAAC;IACX;;OAEG;IACH,OAAO,EAAE,CAAC,EAAE,CAAC;IACb;;;OAGG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC;IAC/B;;;;;;;;;;OAUG;IACH,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IAC7C;;;;;;;;;OASG;IACH,UAAU,CAAC,EAAE,CAAC,QAAQ,EAAE,KAAK,CAAC,YAAY,EAAE,MAAM,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IAC1E;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IACvD;;;;;OAKG;IACH,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,OAAO,CAAC;IACpC;;;;OAIG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,MAAM,kBAAkB,CAAC,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC,GAAG,sBAAsB,CAAC,CAAC,CAAC,CAAA;AAEjI;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,aAAa,GACD,CAAC,gJAerB,kBAAkB,CAAC,CAAC,CAAC,4CA0BzB,CAAA"}

package/dist/components/CheckboxGroup.js

@@ -12,6 +12,8 @@ import { Column } from './layout.js';
  *
  * Tip: if you need to implement features like "search" and "select all", use the hook `useCheckboxGroupControls`.
  *
+ * Tip: If you need a checkbox group that doesn't occupy much height, consider using a MultiSelect.
+ *
  * @example
  *
  * ```
@@ -26,15 +28,15 @@ import { Column } from './layout.js';
  * return <CheckboxGroup options={options} renderLabel={o => o.name} renderKey={o => o.id} value={value} setValue={setValue} />
  * ```
  */
-export const CheckboxGroup = withRef(function CheckboxGroup({ appearance = 'checkbox', name, value = [], options, onChange, renderLabel = defaultRenderLabel, renderKey = defaultRenderKey, renderItem, isDisabled, colorScheme, style, ...props }) {
+export const CheckboxGroup = withRef(function CheckboxGroup({ appearance = 'checkbox', name, value = [], options, onChange, renderLabel = defaultRenderLabel, renderKey = defaultRenderKey, renderItem, isDisabled, colorScheme, style, gap = '8px', focusable = true, ...props }) {
     const items = useMemo(() => {
         const valueKeys = value.map(renderKey);
         return options.map((o) => {
             const key = renderKey(o);
-            const checkbox = _jsx(CitricComponent, { tag: "input", component: appearance, type: "checkbox", name: name, value: key, checked: value.includes(o) || (!isNil(key) && valueKeys.includes(key)), onChange: (e) => onChange?.(e.target.checked ? [...(value ?? []), o] : (value?.filter(item => item != o) ?? [])), disabled: isDisabled?.(o) });
+            const checkbox = _jsx(CitricComponent, { tag: "input", component: appearance, type: "checkbox", name: name, value: key, checked: value.includes(o) || (!isNil(key) && valueKeys.includes(key)), onChange: (e) => onChange?.(e.target.checked ? [...(value ?? []), o] : (value?.filter(item => item != o) ?? [])), disabled: isDisabled?.(o), tabIndex: focusable ? undefined : -1 });
             return renderItem ? renderItem(checkbox, o) : (_jsxs(CitricComponent, { tag: "label", component: `${appearance}-row`, colorScheme: colorScheme, children: [checkbox, renderLabel(o)] }, key));
         });
     }, [options, value, name, colorScheme, appearance]);
-    return _jsx(Column, { ...props, style: { gap: '8px', ...style }, children: items });
+    return _jsx(Column, { ...props, style: { gap, ...style }, children: items });
 });
 //# sourceMappingURL=CheckboxGroup.js.map

package/dist/components/CheckboxGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxGroup.js","sourceRoot":"","sources":["../../src/components/CheckboxGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAA;AAC9B,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAE/B,OAAO,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAA;AACvE,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACnD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAoEjC;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,OAAO,CAClC,SAAS,aAAa,CAAI,EACxB,UAAU,GAAG,UAAU,EACvB,IAAI,EACJ,KAAK,GAAG,EAAE,EACV,OAAO,EACP,QAAQ,EACR,WAAW,GAAG,kBAAkB,EAChC,SAAS,GAAG,gBAAgB,EAC5B,UAAU,EACV,UAAU,EACV,WAAW,EACX,KAAK,EACL,GAAG,KAAK,EACc;IACtB,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,EAAE;QACzB,MAAM,SAAS,GAAG,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,CAAA;QACtC,OAAO,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE;YACvB,MAAM,GAAG,GAAG,SAAS,CAAC,CAAC,CAAC,CAAA;YACxB,MAAM,QAAQ,GAAG,KAAC,eAAe,IAC/B,GAAG,EAAC,OAAO,EACX,SAAS,EAAE,UAAU,EACrB,IAAI,EAAC,UAAU,EACf,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,GAAG,EACV,OAAO,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,SAAS,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,EACtE,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,KAAK,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,IAAI,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,EAChH,QAAQ,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC,GACzB,CAAA;YACF,OAAO,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAC5C,MAAC,eAAe,IAAC,GAAG,EAAC,OAAO,EAAC,SAAS,EAAE,GAAG,UAAU,MAAM,EAAY,WAAW,EAAE,WAAW,aAC5F,QAAQ,EACR,WAAW,CAAC,CAAC,CAAC,KAFiD,GAAG,CAGnD,CACnB,CAAA;QACH,CAAC,CAAC,CAAA;IACJ,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,UAAU,CAAC,CAAC,CAAA;IACnD,OAAO,KAAC,MAAM,OAAK,KAAK,EAAE,KAAK,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,YAAG,KAAK,GAAU,CAAA;AAC7E,CAAC,CACF,CAAA"}
+{"version":3,"file":"CheckboxGroup.js","sourceRoot":"","sources":["../../src/components/CheckboxGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAA;AAC9B,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAE/B,OAAO,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAA;AACvE,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACnD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAgFjC;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,OAAO,CAClC,SAAS,aAAa,CAAI,EACxB,UAAU,GAAG,UAAU,EACvB,IAAI,EACJ,KAAK,GAAG,EAAE,EACV,OAAO,EACP,QAAQ,EACR,WAAW,GAAG,kBAAkB,EAChC,SAAS,GAAG,gBAAgB,EAC5B,UAAU,EACV,UAAU,EACV,WAAW,EACX,KAAK,EACL,GAAG,GAAG,KAAK,EACX,SAAS,GAAG,IAAI,EAChB,GAAG,KAAK,EACc;IACtB,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,EAAE;QACzB,MAAM,SAAS,GAAG,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,CAAA;QACtC,OAAO,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE;YACvB,MAAM,GAAG,GAAG,SAAS,CAAC,CAAC,CAAC,CAAA;YACxB,MAAM,QAAQ,GAAG,KAAC,eAAe,IAC/B,GAAG,EAAC,OAAO,EACX,SAAS,EAAE,UAAU,EACrB,IAAI,EAAC,UAAU,EACf,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,GAAG,EACV,OAAO,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,SAAS,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,EACtE,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,KAAK,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,IAAI,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,EAChH,QAAQ,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC,EACzB,QAAQ,EAAE,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,GACpC,CAAA;YACF,OAAO,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAC5C,MAAC,eAAe,IAAC,GAAG,EAAC,OAAO,EAAC,SAAS,EAAE,GAAG,UAAU,MAAM,EAAY,WAAW,EAAE,WAAW,aAC5F,QAAQ,EACR,WAAW,CAAC,CAAC,CAAC,KAFiD,GAAG,CAGnD,CACnB,CAAA;QACH,CAAC,CAAC,CAAA;IACJ,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,UAAU,CAAC,CAAC,CAAA;IACnD,OAAO,KAAC,MAAM,OAAK,KAAK,EAAE,KAAK,EAAE,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,YAAG,KAAK,GAAU,CAAA;AACtE,CAAC,CACF,CAAA"}

package/dist/components/CitricComponent.d.ts

@@ -1,5 +1,5 @@
 import { WithColorPalette, WithColorScheme } from '../types.js';
-export type CitricComponentName = 'alert' | 'avatar' | 'badge' | 'blockquote' | 'breadcrumb' | 'button' | 'card' | 'checkbox' | 'checkbox-row' | 'divider' | 'field-group' | 'form-group' | 'form' | 'icon-box' | 'input' | 'link' | 'pagination' | 'progress-bar' | 'progress-circular' | 'radio' | 'radio-row' | 'rating' | 'select' | 'select-box' | 'skeleton' | 'slider' | 'switch' | 'switch-row' | 'table' | 'tabs' | 'accordion' | 'favorite' | 'textarea' | 'avatar-group' | 'labeled-slider' | 'rich-select' | 'tooltip' | 'menu' | 'circle';
+export type CitricComponentName = 'alert' | 'avatar' | 'badge' | 'blockquote' | 'breadcrumb' | 'button' | 'card' | 'checkbox' | 'checkbox-row' | 'divider' | 'field-group' | 'form-group' | 'form' | 'icon-box' | 'input' | 'link' | 'pagination' | 'progress-bar' | 'progress-circular' | 'radio' | 'radio-row' | 'rating' | 'select' | 'select-box' | 'skeleton' | 'slider' | 'switch' | 'switch-row' | 'table' | 'tabs' | 'accordion' | 'favorite' | 'textarea' | 'avatar-group' | 'labeled-slider' | 'rich-select' | 'tooltip' | 'menu' | 'circle' | 'multi-select';
 interface BaseCitricProps extends WithColorScheme, WithColorPalette {
     component: CitricComponentName;
     ref?: any;

package/dist/components/CitricComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CitricComponent.d.ts","sourceRoot":"","sources":["../../src/components/CitricComponent.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAE5D,MAAM,MAAM,mBAAmB,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,YAAY,GAAG,YAAY,GAAG,QAAQ,GAAG,MAAM,GAAG,UAAU,GAC3H,cAAc,GAAG,SAAS,GAAG,aAAa,GAAG,YAAY,GAAG,MAAM,GAAG,UAAU,GAAG,OAAO,GAAG,MAAM,GAAG,YAAY,GAAG,cAAc,GAClI,mBAAmB,GAAG,OAAO,GAAG,WAAW,GAAG,QAAQ,GAAG,QAAQ,GAAG,YAAY,GAAG,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,YAAY,GAClI,OAAO,GAAG,MAAM,GAAG,WAAW,GAAG,UAAU,GAAG,UAAU,GAAG,cAAc,GAAG,gBAAgB,GAAG,aAAa,GAAG,SAAS,GAAG,MAAM,GACjI,QAAQ,CAAA;AAEV,UAAU,eAAgB,SAAQ,eAAe,EAAE,gBAAgB;IACjE,SAAS,EAAE,mBAAmB,CAAC;IAC/B,GAAG,CAAC,EAAE,GAAG,CAAC;CACX;AAED,UAAU,mBAAmB;IAC3B,CAAC,CAAC,SAAS,MAAM,GAAG,CAAC,iBAAiB,EAAE,KAAK,EAAE;QAAE,GAAG,EAAE,CAAC,CAAA;KAAE,GAAG,eAAe,GAAG,GAAG,CAAC,iBAAiB,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;IACzH,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,KAAK,EAAE;QAAE,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG,eAAe,GAAG,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;CACxG;AAED,wBAAgB,aAAa,CAAC,EAAE,WAAW,EAAE,YAAY,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,uBAKtH;AAED;;;;;;;;;;;;;GAaG;AAEH,eAAO,MAAM,eAAe,EAAE,mBAK7B,CAAA"}
+{"version":3,"file":"CitricComponent.d.ts","sourceRoot":"","sources":["../../src/components/CitricComponent.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAE5D,MAAM,MAAM,mBAAmB,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,YAAY,GAAG,YAAY,GAAG,QAAQ,GAAG,MAAM,GAAG,UAAU,GAC3H,cAAc,GAAG,SAAS,GAAG,aAAa,GAAG,YAAY,GAAG,MAAM,GAAG,UAAU,GAAG,OAAO,GAAG,MAAM,GAAG,YAAY,GAAG,cAAc,GAClI,mBAAmB,GAAG,OAAO,GAAG,WAAW,GAAG,QAAQ,GAAG,QAAQ,GAAG,YAAY,GAAG,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,YAAY,GAClI,OAAO,GAAG,MAAM,GAAG,WAAW,GAAG,UAAU,GAAG,UAAU,GAAG,cAAc,GAAG,gBAAgB,GAAG,aAAa,GAAG,SAAS,GAAG,MAAM,GACjI,QAAQ,GAAG,cAAc,CAAA;AAE3B,UAAU,eAAgB,SAAQ,eAAe,EAAE,gBAAgB;IACjE,SAAS,EAAE,mBAAmB,CAAC;IAC/B,GAAG,CAAC,EAAE,GAAG,CAAC;CACX;AAED,UAAU,mBAAmB;IAC3B,CAAC,CAAC,SAAS,MAAM,GAAG,CAAC,iBAAiB,EAAE,KAAK,EAAE;QAAE,GAAG,EAAE,CAAC,CAAA;KAAE,GAAG,eAAe,GAAG,GAAG,CAAC,iBAAiB,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;IACzH,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,KAAK,EAAE;QAAE,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG,eAAe,GAAG,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;CACxG;AAED,wBAAgB,aAAa,CAAC,EAAE,WAAW,EAAE,YAAY,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,uBAKtH;AAED;;;;;;;;;;;;;GAaG;AAEH,eAAO,MAAM,eAAe,EAAE,mBAK7B,CAAA"}

package/dist/components/RadioGroup.d.ts

@@ -56,6 +56,18 @@ export interface BaseRadioGroupProps<T> extends WithColorScheme {
      * @returns true if the item should be disabled, false otherwise.
      */
     isDisabled?: (option: T) => boolean;
+    /**
+     * The space between options.
+     *
+     * @default "8px"
+     */
+    gap?: string;
+    /**
+     * If set to false, the checkboxes will have tabIndex = -1.
+     *
+     * @default true
+     */
+    focusable?: boolean;
 }
 export type RadioGroupProps<T> = Omit<React.JSX.IntrinsicElements['div'], 'onChange' | 'children'> & BaseRadioGroupProps<T>;
 /**
@@ -81,5 +93,5 @@ export type RadioGroupProps<T> = Omit<React.JSX.IntrinsicElements['div'], 'onCha
  * return <RadioGroup options={options} renderLabel={o => o.name} renderKey={o => o.id} value={value} setValue={setValue} />
  * ```
  */
-export declare const RadioGroup: <T>({ name, value, options, onChange, renderLabel, renderKey, renderItem, isDisabled, colorScheme, style, ...props }: RadioGroupProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const RadioGroup: <T>({ name, value, options, onChange, renderLabel, renderKey, renderItem, isDisabled, colorScheme, gap, focusable, style, ...props }: RadioGroupProps<T>) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=RadioGroup.d.ts.map

package/dist/components/RadioGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["../../src/components/RadioGroup.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAM1C,MAAM,WAAW,mBAAmB,CAAC,CAAC,CAAE,SAAQ,eAAe;IAC7D;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,CAAC,EAAE,CAAC,CAAC;IACV;;OAEG;IACH,OAAO,EAAE,CAAC,EAAE,CAAC;IACb;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAC9B;;;;;;;;;;OAUG;IACH,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IAC7C;;;;;;;;;OASG;IACH,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,YAAY,EAAE,MAAM,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IACvE;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IACvD;;;;;OAKG;IACH,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,OAAO,CAAC;CACrC;AAED,MAAM,MAAM,eAAe,CAAC,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC,GAAG,mBAAmB,CAAC,CAAC,CAAC,CAAA;AAE3H;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,UAAU,GACD,CAAC,oHAYlB,eAAe,CAAC,CAAC,CAAC,4CAyBtB,CAAA"}
+{"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["../../src/components/RadioGroup.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAM1C,MAAM,WAAW,mBAAmB,CAAC,CAAC,CAAE,SAAQ,eAAe;IAC7D;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,CAAC,EAAE,CAAC,CAAC;IACV;;OAEG;IACH,OAAO,EAAE,CAAC,EAAE,CAAC;IACb;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAC9B;;;;;;;;;;OAUG;IACH,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IAC7C;;;;;;;;;OASG;IACH,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,YAAY,EAAE,MAAM,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IACvE;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IACvD;;;;;OAKG;IACH,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,OAAO,CAAC;IACpC;;;;OAIG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,MAAM,eAAe,CAAC,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC,GAAG,mBAAmB,CAAC,CAAC,CAAC,CAAA;AAE3H;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,UAAU,GACD,CAAC,oIAclB,eAAe,CAAC,CAAC,CAAC,4CA0BtB,CAAA"}

package/dist/components/RadioGroup.js

@@ -28,15 +28,15 @@ import { Column } from './layout.js';
  * return <RadioGroup options={options} renderLabel={o => o.name} renderKey={o => o.id} value={value} setValue={setValue} />
  * ```
  */
-export const RadioGroup = withRef(function RadioGroup({ name, value, options, onChange, renderLabel = defaultRenderLabel, renderKey = defaultRenderKey, renderItem, isDisabled, colorScheme, style, ...props }) {
+export const RadioGroup = withRef(function RadioGroup({ name, value, options, onChange, renderLabel = defaultRenderLabel, renderKey = defaultRenderKey, renderItem, isDisabled, colorScheme, gap = '8px', focusable = true, style, ...props }) {
     const items = useMemo(() => {
         const valueKey = value ? renderKey(value) : undefined;
         return options.map((o) => {
             const key = renderKey(o);
-            const radio = _jsx(CitricComponent, { tag: "input", component: "radio", type: "radio", name: name, value: key, checked: value === o || (!isNil(key) && valueKey === key), onChange: () => onChange?.(o), disabled: isDisabled?.(o) });
+            const radio = _jsx(CitricComponent, { tag: "input", component: "radio", type: "radio", name: name, value: key, checked: value === o || (!isNil(key) && valueKey === key), onChange: () => onChange?.(o), disabled: isDisabled?.(o), tabIndex: focusable ? undefined : -1 });
             return renderItem ? renderItem(radio, o) : (_jsxs(CitricComponent, { tag: "label", component: "radio-row", colorScheme: colorScheme, children: [radio, renderLabel(o)] }, key));
         });
     }, [options, value, name, colorScheme]);
-    return _jsx(Column, { ...props, style: { gap: '8px', ...style }, children: items });
+    return _jsx(Column, { ...props, style: { gap, ...style }, children: items });
 });
 //# sourceMappingURL=RadioGroup.js.map

package/dist/components/RadioGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.js","sourceRoot":"","sources":["../../src/components/RadioGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAA;AAC9B,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAE/B,OAAO,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAA;AACvE,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACnD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AA+DjC;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,OAAO,CAC/B,SAAS,UAAU,CAAI,EACrB,IAAI,EACJ,KAAK,EACL,OAAO,EACP,QAAQ,EACR,WAAW,GAAG,kBAAkB,EAChC,SAAS,GAAG,gBAAgB,EAC5B,UAAU,EACV,UAAU,EACV,WAAW,EACX,KAAK,EACL,GAAG,KAAK,EACW;IACnB,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,EAAE;QACzB,MAAM,QAAQ,GAAG,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAA;QACrD,OAAO,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE;YACvB,MAAM,GAAG,GAAG,SAAS,CAAC,CAAC,CAAC,CAAA;YACxB,MAAM,KAAK,GAAG,KAAC,eAAe,IAC5B,GAAG,EAAC,OAAO,EACX,SAAS,EAAC,OAAO,EACjB,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,GAAG,EACV,OAAO,EAAE,KAAK,KAAK,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,QAAQ,KAAK,GAAG,CAAC,EACzD,QAAQ,EAAE,GAAG,EAAE,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,EAC7B,QAAQ,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC,GACzB,CAAA;YACF,OAAO,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CACzC,MAAC,eAAe,IAAC,GAAG,EAAC,OAAO,EAAC,SAAS,EAAC,WAAW,EAAW,WAAW,EAAE,WAAW,aAClF,KAAK,EACL,WAAW,CAAC,CAAC,CAAC,KAFuC,GAAG,CAGzC,CACnB,CAAA;QACH,CAAC,CAAC,CAAA;IACJ,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,WAAW,CAAC,CAAC,CAAA;IACvC,OAAO,KAAC,MAAM,OAAK,KAAK,EAAE,KAAK,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,YAAG,KAAK,GAAU,CAAA;AAC7E,CAAC,CACF,CAAA"}
+{"version":3,"file":"RadioGroup.js","sourceRoot":"","sources":["../../src/components/RadioGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAA;AAC9B,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAE/B,OAAO,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAA;AACvE,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACnD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AA2EjC;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,OAAO,CAC/B,SAAS,UAAU,CAAI,EACrB,IAAI,EACJ,KAAK,EACL,OAAO,EACP,QAAQ,EACR,WAAW,GAAG,kBAAkB,EAChC,SAAS,GAAG,gBAAgB,EAC5B,UAAU,EACV,UAAU,EACV,WAAW,EACX,GAAG,GAAG,KAAK,EACX,SAAS,GAAG,IAAI,EAChB,KAAK,EACL,GAAG,KAAK,EACW;IACnB,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,EAAE;QACzB,MAAM,QAAQ,GAAG,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAA;QACrD,OAAO,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE;YACvB,MAAM,GAAG,GAAG,SAAS,CAAC,CAAC,CAAC,CAAA;YACxB,MAAM,KAAK,GAAG,KAAC,eAAe,IAC5B,GAAG,EAAC,OAAO,EACX,SAAS,EAAC,OAAO,EACjB,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,GAAG,EACV,OAAO,EAAE,KAAK,KAAK,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,QAAQ,KAAK,GAAG,CAAC,EACzD,QAAQ,EAAE,GAAG,EAAE,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,EAC7B,QAAQ,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC,EACzB,QAAQ,EAAE,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,GACpC,CAAA;YACF,OAAO,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CACzC,MAAC,eAAe,IAAC,GAAG,EAAC,OAAO,EAAC,SAAS,EAAC,WAAW,EAAW,WAAW,EAAE,WAAW,aAClF,KAAK,EACL,WAAW,CAAC,CAAC,CAAC,KAFuC,GAAG,CAGzC,CACnB,CAAA;QACH,CAAC,CAAC,CAAA;IACJ,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,WAAW,CAAC,CAAC,CAAA;IACvC,OAAO,KAAC,MAAM,OAAK,KAAK,EAAE,KAAK,EAAE,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,YAAG,KAAK,GAAU,CAAA;AACtE,CAAC,CACF,CAAA"}

package/dist/components/Select/MultiSelect.d.ts

@@ -0,0 +1,60 @@
+import { RichSelectProps } from './types.js';
+export interface BaseMultiSelectProps<T> extends Omit<RichSelectProps<T>, 'value' | 'onChange' | 'renderHeader' | 'renderLabel' | 'renderOption' | 'required' | 'onFocus' | 'onBlur'> {
+    value: T[];
+    onChange: (value: T[]) => void;
+    /**
+     * A function to render the option in the selectable list.
+     *
+     * The `renderLabel` function is used if this is not provided.
+     * @param value the option.
+     * @returns the React Node.
+     */
+    renderOption?: (option: T) => React.ReactNode;
+    /**
+     * A function to render the selected options in the header.
+     *
+     * The `renderOption` function is used if this is not provided.
+     * @param value the option.
+     * @returns the React Node.
+     */
+    renderHeader?: (value: T[]) => React.ReactNode;
+    /**
+     * A function to render the item label.
+     * @example
+     * `(option) => option.name`
+     * @default "the item's toString() result."
+     * @param option the item to render.
+     * @returns a React Node to render.
+     */
+    renderLabel?: (option: T) => string;
+    /**
+     * Whether or not to show a checkbox to select all or remove the selection.
+     *
+     * @default false
+     */
+    showSelectAll?: boolean;
+}
+export type MultiSelectProps<T> = Omit<React.JSX.IntrinsicElements['div'], 'ref' | 'onChange' | 'onFocus' | 'onBlur'> & BaseMultiSelectProps<T>;
+/**
+ * A component that looks like a Select and behaves like a CheckboxGroup. This is a component that lets the user select multiple options
+ * in a list.
+ *
+ * Differently than then the component Select, this does not render the native select of the browser. Instead, it renders a series of
+ * checkboxes.
+ *
+ * @example
+ *
+ * ```
+ * const options = useMemo(() => [
+ *   { id: 1, name: 'Option 1' },
+ *   { id: 2, name: 'Option 2' },
+ *   { id: 3, name: 'Option 3' },
+ * ], [])
+ *
+ * const [value, setValue] = useState<typeof options>([])
+ *
+ * return <MultiSelect options={options} renderLabel={o => o.name} renderKey={o => o.id} value={value} setValue={setValue} />
+ * ```
+ */
+export declare const MultiSelect: <T>({ ref, options, value, onChange, renderLabel, renderKey, disabled, loading, renderOption, renderHeader, searchable, maxHeight, style, className, showArrow, placeholder, showSelectAll, ...props }: MultiSelectProps<T>) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MultiSelect.d.ts.map

package/dist/components/Select/MultiSelect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiSelect.d.ts","sourceRoot":"","sources":["../../../src/components/Select/MultiSelect.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAEzC,MAAM,WAAW,oBAAoB,CAAC,CAAC,CAAE,SACvC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,cAAc,GAAG,aAAa,GAAG,cAAc,GAAG,UAAU,GAAG,SAAS,GAAG,QAAQ,CAAC;IACpI,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC;IAC/B;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IAC9C;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,KAAK,CAAC,SAAS,CAAC;IAC/C;;;;;;;OAOG;IACH,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,MAAM,CAAC;IACpC;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,MAAM,MAAM,gBAAgB,CAAC,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,KAAK,GAAG,UAAU,GAAG,SAAS,GAAG,QAAQ,CAAC,GACnH,oBAAoB,CAAC,CAAC,CAAC,CAAA;AAEzB;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,WAAW,GACD,CAAC,sMAmBnB,gBAAgB,CAAC,CAAC,CAAC,4CA4FvB,CAAA"}

package/dist/components/Select/MultiSelect.js

@@ -0,0 +1,84 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { listToClass } from '@stack-spot/portal-theme';
+import { useTranslate } from '@stack-spot/portal-translate';
+import { useMemo, useRef, useState } from 'react';
+import { useCheckboxGroupControls } from '../../utils/checkbox.js';
+import { applyCSSVariable } from '../../utils/css.js';
+import { defaultRenderKey, defaultRenderLabel } from '../../utils/options.js';
+import { withRef } from '../../utils/react.js';
+import { Checkbox } from '../Checkbox.js';
+import { CheckboxGroup } from '../CheckboxGroup.js';
+import { CitricComponent } from '../CitricComponent.js';
+import { Input } from '../Input.js';
+import { Row } from '../layout.js';
+import { ProgressCircular } from '../ProgressCircular.js';
+import { useDisabledEffect, useFocusEffect, useOpenPanelEffect } from './hooks.js';
+/**
+ * A component that looks like a Select and behaves like a CheckboxGroup. This is a component that lets the user select multiple options
+ * in a list.
+ *
+ * Differently than then the component Select, this does not render the native select of the browser. Instead, it renders a series of
+ * checkboxes.
+ *
+ * @example
+ *
+ * ```
+ * const options = useMemo(() => [
+ *   { id: 1, name: 'Option 1' },
+ *   { id: 2, name: 'Option 2' },
+ *   { id: 3, name: 'Option 3' },
+ * ], [])
+ *
+ * const [value, setValue] = useState<typeof options>([])
+ *
+ * return <MultiSelect options={options} renderLabel={o => o.name} renderKey={o => o.id} value={value} setValue={setValue} />
+ * ```
+ */
+export const MultiSelect = withRef(function MultiSelect({ ref, options, value = [], onChange, renderLabel = defaultRenderLabel, renderKey = defaultRenderKey, disabled, loading, renderOption, renderHeader, searchable, maxHeight, style, className, showArrow, placeholder, showSelectAll, ...props }) {
+    const t = useTranslate(dictionary);
+    const _element = useRef(null);
+    const element = ref ?? _element;
+    const [open, setOpen] = useState(false);
+    const [focused, setFocused] = useState(false);
+    const controls = useCheckboxGroupControls({
+        options,
+        renderKey,
+        initialValue: value,
+        onChange,
+        applyFilter: (filter, option) => renderLabel(option).toLocaleLowerCase().includes(filter.toLocaleLowerCase()),
+    });
+    useOpenPanelEffect({ open, setOpen, setSearch: controls.setFilter, element, searchable });
+    useFocusEffect({ element, focused, setFocused, setOpen });
+    useDisabledEffect({ disabled, setOpen, setFocused });
+    const header = useMemo(() => {
+        if (value.length === 0)
+            return _jsx("span", { className: "placeholder", children: placeholder });
+        const reverse = value.reverse();
+        return ((renderHeader?.(reverse)
+            ?? (renderOption ? _jsx(Row, { gap: "4px", children: reverse.map(renderOption) }) : _jsx("span", { children: reverse.map(renderLabel).join(', ') })))
+            || _jsx("span", {}));
+    }, [value, placeholder]);
+    return (_jsxs(CitricComponent, { tag: "div", component: "multi-select", style: maxHeight ? applyCSSVariable(style, 'max-height', `${maxHeight}px`) : style, className: listToClass([className, showArrow === false && 'hide-arrow', open && 'open', focused && 'focused']), ref: element, "aria-busy": loading, ...props, children: [_jsxs("header", { onClick: (e) => {
+                    if (disabled)
+                        return;
+                    if (!open)
+                        e.stopPropagation();
+                    setFocused(true);
+                    setOpen(true);
+                }, onFocus: () => setFocused(true), "aria-label": t.accessibilityHelp, tabIndex: 0, className: renderHeader ? 'custom' : undefined, children: [header, loading && _jsx(ProgressCircular, { size: "xs", className: "loader" })] }), _jsxs("div", { className: "selection-panel", "aria-hidden": !open, ...(open ? {} : { inert: 'true' }), children: [searchable && _jsx("div", { className: "search-bar", children: _jsxs("div", { "data-citric": "field-group", className: "auto", children: [_jsx("i", { "data-citric": "icon-box", className: "citric-icon outline Search" }), _jsx(Input, { type: "search", value: controls.filter, onChange: controls.setFilter, "aria-label": t.searchAccessibility })] }) }), showSelectAll && (_jsx(Checkbox, { className: "select-all", onChange: checked => checked ? controls.selectAll() : controls.removeSelection(), value: controls.isAllSelected, children: controls.isAllSelected ? t.removeSelection : t.selectAll })), _jsx(CheckboxGroup, { className: "options", gap: "0", options: controls.options, onChange: controls.setValue, value: controls.value, renderKey: controls.renderKey, focusable: false, renderItem: (checkbox, option) => (_jsxs(CitricComponent, { component: "checkbox-row", tag: "label", className: listToClass(['option', controls.isUnfilteredButChecked(option) && 'unfiltered']), children: [checkbox, renderOption?.(option) ?? renderLabel(option)] })) })] })] }));
+});
+const dictionary = {
+    en: {
+        accessibilityHelp: 'Press the arrow down to select multiple options',
+        searchAccessibility: 'Filter the options',
+        removeSelection: 'Remove selection',
+        selectAll: 'Select all',
+    },
+    pt: {
+        accessibilityHelp: 'Pressione a seta para baixo para selecionar múltiplas opções',
+        searchAccessibility: 'Filtre as opções',
+        removeSelection: 'Remover seleção',
+        selectAll: 'Selecionar todos',
+    },
+};
+//# sourceMappingURL=MultiSelect.js.map

package/dist/components/Select/MultiSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiSelect.js","sourceRoot":"","sources":["../../../src/components/Select/MultiSelect.tsx"],"names":[],"mappings":"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"}

package/dist/components/Select/RichSelect.d.ts

@@ -1,5 +1,5 @@
 import { SelectProps } from './types.js';
-export declare const RichSelect: <T>({ ref, options, value, onChange, renderLabel, renderKey, required, disabled, loading, renderOption, renderHeader, searchable, maxHeight, style, className, onFocus, onBlur, showArrow, ...props }: SelectProps<T> & {
+export declare const RichSelect: <T>({ ref, options, value, onChange, renderLabel, renderKey, required, disabled, loading, renderOption, renderHeader, searchable, maxHeight, style, className, onFocus, onBlur, showArrow, placeholder, ...props }: SelectProps<T> & {
     type?: "rich";
 }) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=RichSelect.d.ts.map

package/dist/components/Select/RichSelect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RichSelect.d.ts","sourceRoot":"","sources":["../../../src/components/Select/RichSelect.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAErC,eAAO,MAAM,UAAU,GACD,CAAC,qMAoBlB,WAAW,CAAC,CAAC,CAAC,GAAG;IAAE,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,4CAmLtC,CAAA"}
+{"version":3,"file":"RichSelect.d.ts","sourceRoot":"","sources":["../../../src/components/Select/RichSelect.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAErC,eAAO,MAAM,UAAU,GACD,CAAC,kNAqBlB,WAAW,CAAC,CAAC,CAAC,GAAG;IAAE,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,4CAoFtC,CAAA"}

package/dist/components/Select/RichSelect.js

@@ -1,15 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { listToClass } from '@stack-spot/portal-theme';
 import { useTranslate } from '@stack-spot/portal-translate';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useMemo, useRef, useState } from 'react';
 import { applyCSSVariable } from '../../utils/css.js';
 import { defaultRenderKey, defaultRenderLabel } from '../../utils/options.js';
 import { withRef } from '../../utils/react.js';
 import { CitricComponent } from '../CitricComponent.js';
 import { Input } from '../Input.js';
 import { ProgressCircular } from '../ProgressCircular.js';
+import { useDisabledEffect, useFocusEffect, useOpenPanelEffect } from './hooks.js';
 import { SimpleSelect } from './SimpleSelect.js';
-export const RichSelect = withRef(function RichSelect({ ref, options, value, onChange, renderLabel = defaultRenderLabel, renderKey = defaultRenderKey, required = true, disabled, loading, renderOption, renderHeader, searchable, maxHeight, style, className, onFocus, onBlur, showArrow, ...props }) {
+export const RichSelect = withRef(function RichSelect({ ref, options, value, onChange, renderLabel = defaultRenderLabel, renderKey = defaultRenderKey, required = true, disabled, loading, renderOption, renderHeader, searchable, maxHeight, style, className, onFocus, onBlur, showArrow, placeholder, ...props }) {
     const [search, setSearch] = useState('');
     const _element = useRef(null);
     const element = ref ?? _element;
@@ -21,122 +22,21 @@ export const RichSelect = withRef(function RichSelect({ ref, options, value, onC
         setOpen(false);
     }, []);
     const renderedOptions = useMemo(() => {
-        const items = required ? [] : [_jsx("li", { className: "empty", onClick: change(undefined), children: renderLabel(undefined) || t.empty }, "")];
+        const items = required
+            ? []
+            : [_jsx("li", { className: "empty option", onClick: change(undefined), children: renderLabel(undefined) || t.empty }, "")];
         options.forEach((o) => {
             const key = renderKey(o);
             const label = renderLabel(o);
-            if (!search.trim() || label.toLocaleLowerCase().includes(search.trim().toLocaleLowerCase())) {
-                items.push(_jsx("li", { onClick: change(o), children: renderOption?.(o) ?? label }, key));
+            if (!search?.trim() || label.toLocaleLowerCase().includes(search?.trim().toLocaleLowerCase())) {
+                items.push(_jsx("li", { onClick: change(o), className: "option", children: renderOption?.(o) ?? label }, key));
             }
         });
         return items;
     }, [options, value, required, search]);
-    /* this runs whenever the selection panel is opened */
-    useEffect(() => {
-        if (open) {
-            setSearch('');
-            const selectionPanel = element.current?.querySelector('.selection-panel');
-            selectionPanel?.querySelector('ul')?.scrollTo({ top: 0 });
-            const getCurrent = () => selectionPanel?.querySelector('li.focused');
-            const scrollTo = (li) => {
-                const ul = li.closest('ul');
-                if (!ul)
-                    return;
-                const { top: ulTop, height: ulHeight } = ul.getBoundingClientRect();
-                const { height: liHeight, top: liTop } = li.getBoundingClientRect();
-                const offset = liTop + ul.scrollTop - ulTop;
-                if ((ul.scrollTop + ulHeight < offset + liHeight) || ul.scrollTop > offset) {
-                    ul.scrollTo({ top: offset });
-                }
-            };
-            /* keyboard and mouse controls */
-            const listenToMouse = (event) => {
-                if (!selectionPanel?.contains(event.target)) {
-                    setOpen(false);
-                }
-            };
-            const listenToKeyboard = (event) => {
-                const isCharacter = event.key.length === 1;
-                if (['Escape', 'ArrowUp', 'ArrowDown', 'Enter'].includes(event.key) ||
-                    (searchable && (isCharacter || event.key === 'Backspace'))) {
-                    event.preventDefault();
-                    event.stopPropagation();
-                }
-                if (event.key === 'Escape')
-                    setOpen(false);
-                if (searchable) {
-                    if (isCharacter)
-                        setSearch(v => `${v}${event.key}`);
-                    if (event.key === 'Backspace')
-                        setSearch(v => v.substring(0, v.length - 1));
-                }
-                if (event.key === 'ArrowDown') {
-                    const current = getCurrent();
-                    const next = (current?.nextElementSibling ?? selectionPanel?.querySelector('li'));
-                    if (next) {
-                        current?.classList.remove('focused');
-                        next.classList.add('focused');
-                        scrollTo(next);
-                    }
-                }
-                if (event.key === 'ArrowUp') {
-                    const current = getCurrent();
-                    const prev = (current?.previousElementSibling ?? selectionPanel?.querySelector('li:last-child'));
-                    if (prev) {
-                        current?.classList.remove('focused');
-                        prev.classList.add('focused');
-                        scrollTo(prev);
-                    }
-                }
-                if (event.key === 'Enter') {
-                    setTimeout(() => getCurrent()?.click(), 0);
-                }
-            };
-            // below, we wait 20ms so the same click that opened the select doesn't close it. Removing it will cause problems with selects under
-            // labels.
-            setTimeout(() => document.addEventListener('click', listenToMouse), 20);
-            document.addEventListener('keydown', listenToKeyboard);
-            return () => {
-                document.removeEventListener('click', listenToMouse);
-                document.removeEventListener('keydown', listenToKeyboard);
-                getCurrent()?.classList.remove('focused');
-            };
-        }
-    }, [open]);
-    /* this runs whenever the select is focused */
-    useEffect(() => {
-        if (focused) {
-            const listenToMouse = (event) => {
-                if (!element.current?.contains(event.target)) {
-                    setFocused(false);
-                }
-            };
-            const listenToKeyboard = (event) => {
-                if (['Enter', 'ArrowDown', 'ArrowUp'].includes(event.key)) {
-                    event.preventDefault();
-                    if (!element.current?.classList.contains('open'))
-                        setOpen(true);
-                }
-                if (event.key === 'Tab') {
-                    setFocused(false);
-                    if (element.current?.classList.contains('open'))
-                        setOpen(false);
-                }
-            };
-            document.addEventListener('click', listenToMouse);
-            document.addEventListener('keydown', listenToKeyboard);
-            return () => {
-                document.removeEventListener('click', listenToMouse);
-                document.removeEventListener('keydown', listenToKeyboard);
-            };
-        }
-    }, [focused]);
-    useEffect(() => {
-        if (disabled) {
-            setOpen(false);
-            setFocused(false);
-        }
-    }, [disabled]);
+    useOpenPanelEffect({ open, setOpen, setSearch, element, searchable });
+    useFocusEffect({ element, focused, setFocused, setOpen });
+    useDisabledEffect({ disabled, setOpen, setFocused });
     return (_jsxs(CitricComponent, { tag: "div", component: "rich-select", style: maxHeight ? applyCSSVariable(style, 'max-height', `${maxHeight}px`) : style, className: listToClass([className, showArrow === false && 'hide-arrow', open && 'open', focused && 'focused']), ref: element, "aria-busy": loading, ...props, children: [_jsx(SimpleSelect, { options: options, value: value, renderLabel: renderLabel, renderKey: renderKey, required: required, disabled: disabled, onChange: onChange, onFocus: onFocus, onBlur: onBlur, wrap: false }), _jsxs("header", { onClick: (e) => {
                     if (disabled)
                         return;
@@ -144,7 +44,9 @@ export const RichSelect = withRef(function RichSelect({ ref, options, value, onC
                         e.stopPropagation();
                     setFocused(true);
                     setOpen(true);
-                }, "aria-hidden": true, children: [(renderHeader?.(value) ?? renderOption?.(value) ?? renderLabel(value)) || _jsx("span", {}), loading && _jsx(ProgressCircular, { size: "xs", className: "loader" })] }), _jsxs("div", { className: "selection-panel", "aria-hidden": true, children: [searchable && _jsx("div", { className: "search-bar", children: _jsxs("div", { "data-citric": "field-group", className: "auto", children: [_jsx("i", { "data-citric": "icon-box", className: "citric-icon outline Search" }), _jsx(Input, { type: "search", value: search, onChange: setSearch, tabIndex: -1 })] }) }), _jsx("ul", { children: renderedOptions })] })] }));
+                }, "aria-hidden": true, children: [value === undefined
+                        ? _jsx("span", { className: "placeholder", children: placeholder })
+                        : ((renderHeader?.(value) ?? renderOption?.(value) ?? renderLabel(value)) || _jsx("span", {})), loading && _jsx(ProgressCircular, { size: "xs", className: "loader" })] }), _jsxs("div", { className: "selection-panel", "aria-hidden": true, children: [searchable && _jsx("div", { className: "search-bar", children: _jsxs("div", { "data-citric": "field-group", className: "auto", children: [_jsx("i", { "data-citric": "icon-box", className: "citric-icon outline Search" }), _jsx(Input, { type: "search", value: search, onChange: setSearch, tabIndex: -1 })] }) }), _jsx("ul", { className: "options", children: renderedOptions })] })] }));
 });
 const dictionary = {
     en: {