@useinsider/ab-components 0.0.107 → 0.0.108

package/dist/icons.svg

@@ -589,4 +589,10 @@
   <symbol id="line-vertical-gap" viewBox="0 0 24 24" fill="none">
     <path d="M21 3V4C21 4.5 20.5 5 20 5H4C3.5 5 3 4.5 3 4V3M21 21V20C21 19.5 20.5 19 20 19H4C3.5 19 3 19.5 3 20V21M16 12H8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
   </symbol>
+  <symbol id="line-countdown" width="18" height="22" viewBox="0 0 18 22" fill="none">
+    <path d="M9 4C13.9706 4 18 8.02944 18 13C18 17.9706 13.9706 22 9 22C4.02944 22 0 17.9706 0 13C0 8.02944 4.02944 4 9 4ZM9 6C5.13401 6 2 9.13401 2 13C2 16.866 5.13401 20 9 20C12.866 20 16 16.866 16 13C16 9.13401 12.866 6 9 6ZM11.293 9.29297C11.6835 8.90244 12.3165 8.90244 12.707 9.29297C13.0975 9.68349 13.0976 10.3165 12.707 10.707L9.70703 13.707C9.31651 14.0975 8.68349 14.0975 8.29297 13.707C7.90245 13.3165 7.90245 12.6835 8.29297 12.293L11.293 9.29297ZM11 0C11.5523 0 12 0.447715 12 1C12 1.55228 11.5523 2 11 2H7C6.44772 2 6 1.55228 6 1C6 0.447715 6.44772 0 7 0H11Z" fill="currentColor"/>
+  </symbol>
+  <symbol id="line-calendar" width="18" height="18" viewBox="0 0 18 18" fill="none">
+    <path d="M13 0C13.5523 0 14 0.447715 14 1H16C17.1046 1 18 1.89543 18 3V16C18 17.1046 17.1046 18 16 18H2C0.895431 18 4.02666e-09 17.1046 0 16V3C0 1.89543 0.895431 1 2 1H4C4 0.447715 4.44772 0 5 0C5.55228 0 6 0.447715 6 1H12C12 0.447715 12.4477 0 13 0ZM2 8V16H16V8H2ZM2 6H16V3H14L13.9951 3.10254C13.9438 3.60667 13.5177 4 13 4C12.4477 4 12 3.55228 12 3H6L5.99512 3.10254C5.94379 3.60667 5.51768 4 5 4C4.44772 4 4 3.55228 4 3H2V6Z" fill="currentColor"/>
+  </symbol>
 </svg>

package/dist/index.d.ts

@@ -25,31 +25,33 @@ import { WatchOptions } from 'vue';
 import { WatchStopHandle } from 'vue';
 
 declare const __VLS_component: DefineComponent<CheckboxProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
-"update:modelValue": (value: boolean) => any;
 change: (checked: boolean) => any;
+"update:modelValue": (value: boolean) => any;
 }, string, PublicProps, Readonly<CheckboxProps> & Readonly<{
-"onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
 onChange?: ((checked: boolean) => any) | undefined;
+"onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
 }>, {
 label: string;
 disabled: boolean;
 name: string;
-checked: boolean;
 value: string | number;
+checked: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLLabelElement>;
 
-declare const __VLS_component_10: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {
+declare const __VLS_component_10: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+text: string;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {
 triggerRef: HTMLDivElement;
 tooltipRef: HTMLDivElement;
 floatingArrowRef: HTMLDivElement;
 }, any>;
 
 declare const __VLS_component_2: DefineComponent<ColorPickerProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
-"color-change": (color: string) => any;
 close: () => any;
+"color-change": (color: string) => any;
 }, string, PublicProps, Readonly<ColorPickerProps> & Readonly<{
-"onColor-change"?: ((color: string) => any) | undefined;
 onClose?: (() => any) | undefined;
+"onColor-change"?: ((color: string) => any) | undefined;
 }>, {
 color: string;
 title: string;
@@ -74,31 +76,32 @@ borderTriangleAlign: string;
 declare const __VLS_component_4: DefineComponent<InBasicTextInputProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 click: (event: MouseEvent) => any;
 input: (value: string | number) => any;
-"update:modelValue": (value: string | number) => any;
+blur: (event: FocusEvent) => any;
 change: (value: string | number) => any;
 focus: (event: FocusEvent) => any;
-blur: (event: FocusEvent) => any;
-keyup: (event: KeyboardEvent) => any;
 keypress: (event: KeyboardEvent) => any;
+keyup: (event: KeyboardEvent) => any;
 paste: (event: ClipboardEvent) => any;
+"update:modelValue": (value: string | number) => any;
 leftIconClick: (event: MouseEvent) => any;
 rightIconClick: (event: MouseEvent) => any;
 }, string, PublicProps, Readonly<InBasicTextInputProps> & Readonly<{
 onClick?: ((event: MouseEvent) => any) | undefined;
 onInput?: ((value: string | number) => any) | undefined;
-"onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
+onBlur?: ((event: FocusEvent) => any) | undefined;
 onChange?: ((value: string | number) => any) | undefined;
 onFocus?: ((event: FocusEvent) => any) | undefined;
-onBlur?: ((event: FocusEvent) => any) | undefined;
-onKeyup?: ((event: KeyboardEvent) => any) | undefined;
 onKeypress?: ((event: KeyboardEvent) => any) | undefined;
+onKeyup?: ((event: KeyboardEvent) => any) | undefined;
 onPaste?: ((event: ClipboardEvent) => any) | undefined;
+"onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
 onLeftIconClick?: ((event: MouseEvent) => any) | undefined;
 onRightIconClick?: ((event: MouseEvent) => any) | undefined;
 }>, {
 leftIconName: IconNames;
 rightIconName: IconNames;
 type: "text" | "number";
+preventXss: boolean;
 modelValue: string | number;
 theme: "grey" | "white";
 labelStatus: boolean;
@@ -117,7 +120,6 @@ maxValue: number | string;
 autoFocus: boolean;
 allowDecimal: boolean;
 allowComma: boolean;
-preventXss: boolean;
 helperMessageStatus: boolean;
 helperMessage: string;
 stateMessage: string;
@@ -179,11 +181,11 @@ rotateArrow: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
 
 declare const __VLS_component_8: DefineComponent<ModalProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
-submit: () => any;
 close: () => any;
+submit: () => any;
 }, string, PublicProps, Readonly<ModalProps> & Readonly<{
-onSubmit?: (() => any) | undefined;
 onClose?: (() => any) | undefined;
+onSubmit?: (() => any) | undefined;
 }>, {
 hasOverlay: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
@@ -193,16 +195,16 @@ isOpen: Ref<boolean, boolean>;
 toggle: () => void;
 close: () => void;
 }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
-"update:modelValue": (value: boolean) => any;
 close: () => any;
+"update:modelValue": (value: boolean) => any;
 open: () => any;
 }, string, PublicProps, Readonly<PopoverProps> & Readonly<{
-"onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
 onClose?: (() => any) | undefined;
+"onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
 onOpen?: (() => any) | undefined;
 }>, {
-modelValue: boolean;
 position: "bottom" | "top";
+modelValue: boolean;
 gap: number;
 align: "left" | "center" | "right" | "left-side" | "right-side";
 positionStrategy: "fixed" | "absolute";
@@ -217,7 +219,7 @@ contentRef: HTMLDivElement;
 
 declare type __VLS_Props = {
     id: string;
-    text: string;
+    text?: string;
     placement?: Placement;
     arrowPlacement?: ArrowPlacement;
     status?: boolean;
@@ -463,6 +465,64 @@ declare interface ButtonProps {
     customClass?: string;
 }
 
+export declare const Calendar: DefineComponent<CalendarProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+cancel: () => any;
+"update:modelValue": (value: string) => any;
+apply: () => any;
+}, string, PublicProps, Readonly<CalendarProps> & Readonly<{
+onCancel?: (() => any) | undefined;
+"onUpdate:modelValue"?: ((value: string) => any) | undefined;
+onApply?: (() => any) | undefined;
+}>, {
+width: number;
+modelValue: string;
+min: string;
+max: string;
+format: CalendarDateFormat;
+disabledDateTooltip: string;
+firstDayOfWeek: 0 | 1;
+locale: string;
+placeholder: string;
+applyLabel: string;
+cancelLabel: string;
+inputAriaLabel: string;
+prevMonthLabel: string;
+nextMonthLabel: string;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
+
+export declare type CalendarDateFormat = 'YYYY-MM-DD' | 'DD/MM/YYYY' | 'MM/DD/YYYY';
+
+export declare interface CalendarProps {
+    /** Selected date, in `format` (default ISO `YYYY-MM-DD`). */
+    modelValue?: string;
+    /** Earliest selectable date, in `format`. Days before this are disabled. */
+    min?: string;
+    /** Latest selectable date, in `format`. Days after this are disabled. */
+    max?: string;
+    /** Date format for the value (modelValue/min/max/emit) and the input. Default ISO. */
+    format?: CalendarDateFormat;
+    /** Tooltip shown when hovering a disabled (out-of-range) day. */
+    disabledDateTooltip?: string;
+    /** 0 = Sunday, 1 = Monday (default). */
+    firstDayOfWeek?: 0 | 1;
+    /** BCP-47 locale for month/weekday labels. */
+    locale?: string;
+    /** Placeholder for the date input when nothing is picked. */
+    placeholder?: string;
+    /** Footer confirm-button label (consumer passes a translated string). */
+    applyLabel?: string;
+    /** Footer cancel-button label (consumer passes a translated string). */
+    cancelLabel?: string;
+    /** Card width in px (default 252). Lets the consumer size the picker. */
+    width?: number;
+    /** Accessible name for the date input. Falls back to `placeholder`. */
+    inputAriaLabel?: string;
+    /** Accessible name for the previous-month button (consumer passes a translated string). */
+    prevMonthLabel?: string;
+    /** Accessible name for the next-month button (consumer passes a translated string). */
+    nextMonthLabel?: string;
+}
+
 export declare interface CascadingListItem {
     id: string;
     label: string;
@@ -768,7 +828,7 @@ size: number | string;
  *
  * NOTE: This file was auto-generated from 'icons.svg'
  */
-export declare type IconNames = 'icon-info-box-error' | 'icon-tooltip-info' | 'filled-info-circle' | 'filled-caution-circle' | 'filled-caution-triangle' | 'filled-caution-triangle-colored' | 'filled-error-box-colored' | 'line-plus-netural' | 'line-close-netural' | 'chip-close' | 'chip-close-16' | 'no-color' | 'line-search' | 'filled-dropdown-down' | 'dropdown-down-icon' | 'filled-text-bold' | 'filled-text-italic' | 'filled-text-underline' | 'filled-text-strikethrough' | 'line-caution-triangle' | 'filled-error-box' | 'filled-info-circle' | 'line-check-natural' | 'loading-circle' | 'icon-smart' | 'line-reset' | 'line-arrow-left' | 'line-arrow-up' | 'line-figma' | 'line-academy-02' | 'line-undo' | 'line-redo' | 'line-ai-message-reply-plus' | 'line-architect-segments-closed' | 'line-ai-stop-icon' | 'line-ai-send-icon' | 'line-smart-sirius-ai' | 'line-smart-ai' | 'line-minus-netural' | 'line-check-netural' | 'filled-caution-triangle' | 'line-tooltip' | 'filled-warning-badge' | 'line-help-circle' | 'gamification-icon' | 'inline-icon' | 'popup-icon' | 'line-delete' | 'line-duplicate' | 'line-test-link' | 'text-color-icon' | 'corner-icon' | 'border-icon' | 'border-color' | 'fill-color-icon' | 'text-icon' | 'mixed-text-color-icon' | 'line-height-icon' | 'letter-spacing-icon' | 'filled-text-aligned-left' | 'filled-text-aligned-center' | 'filled-text-aligned-right' | 'filled-text-aligned-justified' | 'filled-aligned-bottom' | 'filled-aligned-middle' | 'filled-aligned-top' | 'button-actions' | 'border-none' | 'border-solid' | 'border-dashed' | 'border-dotted' | 'individual-borders' | 'border-left' | 'border-top' | 'border-right' | 'border-bottom' | 'corner-top-left' | 'corner-top-right' | 'corner-bottom-left' | 'corner-bottom-right' | 'corners-individual' | 'padding-horizontal' | 'padding-vertical' | 'padding-individual' | 'padding-left' | 'padding-right' | 'padding-bottom' | 'padding-top' | 'line-password' | 'line-left-to-bottom' | 'line-right-to-top' | 'line-horizontal' | 'line-vertical' | 'line-change' | 'feedback-helpful' | 'feedback-not-helpful' | 'feedback-helpful-selected' | 'feedback-not-helpful-selected' | 'line-code' | 'line-menu-experiment' | 'line-architect-ai-generate' | 'line-mobile-landscape' | 'line-history' | 'line-navigate' | 'line-move' | 'line-edit-code' | 'line-refresh' | 'line-coupon' | 'line-external-link' | 'line-open-website' | 'line-empty-box' | 'line-no-search-result' | 'line-palette' | 'line-no-color-theme' | 'line-chevron-small-down' | 'line-spinner' | 'illustration-no-preview' | 'dynamic-content-icon' | 'list-item-arrow-right' | 'dropdown-arrow' | 'line-architect-test-journey' | 'no-personalization' | 'no-search-result' | 'insert-before' | 'insert-after' | 'insert-prepend' | 'insert-append' | 'line-drag-handle' | 'line-column-1' | 'line-column-2' | 'line-column-3' | 'line-column-4' | 'line-horizontal-gap' | 'line-vertical-gap';
+export declare type IconNames = 'icon-info-box-error' | 'icon-tooltip-info' | 'filled-info-circle' | 'filled-caution-circle' | 'filled-caution-triangle' | 'filled-caution-triangle-colored' | 'filled-error-box-colored' | 'line-plus-netural' | 'line-close-netural' | 'chip-close' | 'chip-close-16' | 'no-color' | 'line-search' | 'filled-dropdown-down' | 'dropdown-down-icon' | 'filled-text-bold' | 'filled-text-italic' | 'filled-text-underline' | 'filled-text-strikethrough' | 'line-caution-triangle' | 'filled-error-box' | 'filled-info-circle' | 'line-check-natural' | 'loading-circle' | 'icon-smart' | 'line-reset' | 'line-arrow-left' | 'line-arrow-up' | 'line-figma' | 'line-academy-02' | 'line-undo' | 'line-redo' | 'line-ai-message-reply-plus' | 'line-architect-segments-closed' | 'line-ai-stop-icon' | 'line-ai-send-icon' | 'line-smart-sirius-ai' | 'line-smart-ai' | 'line-minus-netural' | 'line-check-netural' | 'filled-caution-triangle' | 'line-tooltip' | 'filled-warning-badge' | 'line-help-circle' | 'gamification-icon' | 'inline-icon' | 'popup-icon' | 'line-delete' | 'line-duplicate' | 'line-test-link' | 'text-color-icon' | 'corner-icon' | 'border-icon' | 'border-color' | 'fill-color-icon' | 'text-icon' | 'mixed-text-color-icon' | 'line-height-icon' | 'letter-spacing-icon' | 'filled-text-aligned-left' | 'filled-text-aligned-center' | 'filled-text-aligned-right' | 'filled-text-aligned-justified' | 'filled-aligned-bottom' | 'filled-aligned-middle' | 'filled-aligned-top' | 'button-actions' | 'border-none' | 'border-solid' | 'border-dashed' | 'border-dotted' | 'individual-borders' | 'border-left' | 'border-top' | 'border-right' | 'border-bottom' | 'corner-top-left' | 'corner-top-right' | 'corner-bottom-left' | 'corner-bottom-right' | 'corners-individual' | 'padding-horizontal' | 'padding-vertical' | 'padding-individual' | 'padding-left' | 'padding-right' | 'padding-bottom' | 'padding-top' | 'line-password' | 'line-left-to-bottom' | 'line-right-to-top' | 'line-horizontal' | 'line-vertical' | 'line-change' | 'feedback-helpful' | 'feedback-not-helpful' | 'feedback-helpful-selected' | 'feedback-not-helpful-selected' | 'line-code' | 'line-menu-experiment' | 'line-architect-ai-generate' | 'line-mobile-landscape' | 'line-history' | 'line-navigate' | 'line-move' | 'line-edit-code' | 'line-refresh' | 'line-coupon' | 'line-external-link' | 'line-open-website' | 'line-empty-box' | 'line-no-search-result' | 'line-palette' | 'line-no-color-theme' | 'line-chevron-small-down' | 'line-spinner' | 'illustration-no-preview' | 'dynamic-content-icon' | 'list-item-arrow-right' | 'dropdown-arrow' | 'line-architect-test-journey' | 'no-personalization' | 'no-search-result' | 'insert-before' | 'insert-after' | 'insert-prepend' | 'insert-append' | 'line-drag-handle' | 'line-column-1' | 'line-column-2' | 'line-column-3' | 'line-column-4' | 'line-horizontal-gap' | 'line-vertical-gap' | 'line-countdown' | 'line-calendar';
 
 declare interface IconProps {
     name: AllIconNames;
@@ -906,11 +966,11 @@ declare interface InRadioButtonProps {
 }
 
 export declare const InTabs: DefineComponent<InTabsProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
-"update:modelValue": (value: string) => any;
 change: (value: string) => any;
+"update:modelValue": (value: string) => any;
 }, string, PublicProps, Readonly<InTabsProps> & Readonly<{
-"onUpdate:modelValue"?: ((value: string) => any) | undefined;
 onChange?: ((value: string) => any) | undefined;
+"onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {
 disabled: boolean;
 modelValue: string;
@@ -926,27 +986,27 @@ export declare const InTextArea: DefineComponent<InTextAreaProps, {
 textareaRef: Ref<HTMLTextAreaElement | undefined, HTMLTextAreaElement | undefined>;
 }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
 click: (event: MouseEvent) => any;
-"update:modelValue": (value: string) => any;
 blur: (event: FocusEvent) => any;
-keyup: (event: KeyboardEvent) => any;
+cut: (event: ClipboardEvent) => any;
 keypress: (event: KeyboardEvent) => any;
+keyup: (event: KeyboardEvent) => any;
 paste: (event: ClipboardEvent) => any;
-cut: (event: ClipboardEvent) => any;
+"update:modelValue": (value: string) => any;
 }, string, PublicProps, Readonly<InTextAreaProps> & Readonly<{
 onClick?: ((event: MouseEvent) => any) | undefined;
-"onUpdate:modelValue"?: ((value: string) => any) | undefined;
 onBlur?: ((event: FocusEvent) => any) | undefined;
-onKeyup?: ((event: KeyboardEvent) => any) | undefined;
+onCut?: ((event: ClipboardEvent) => any) | undefined;
 onKeypress?: ((event: KeyboardEvent) => any) | undefined;
+onKeyup?: ((event: KeyboardEvent) => any) | undefined;
 onPaste?: ((event: ClipboardEvent) => any) | undefined;
-onCut?: ((event: ClipboardEvent) => any) | undefined;
+"onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {
 label: string;
 disabled: boolean;
 type: "default" | "smart";
-theme: "grey" | "white";
 preventXss: boolean;
 invalid: boolean;
+theme: "grey" | "white";
 withLabel: boolean;
 invalidMessage: string;
 rowLength: number;
@@ -1018,25 +1078,25 @@ declare interface ModalProps {
 
 export declare const NumberInput: DefineComponent<Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 input: (event: Event) => any;
-"update:modelValue": (args_0: number | undefined) => any;
+blur: (event: FocusEvent) => any;
 change: (event: Event) => any;
 focus: (event: FocusEvent) => any;
-blur: (event: FocusEvent) => any;
 paste: (event: ClipboardEvent) => any;
+"update:modelValue": (args_0: number | undefined) => any;
 }, string, PublicProps, Readonly<Props> & Readonly<{
 onInput?: ((event: Event) => any) | undefined;
-"onUpdate:modelValue"?: ((args_0: number | undefined) => any) | undefined;
+onBlur?: ((event: FocusEvent) => any) | undefined;
 onChange?: ((event: Event) => any) | undefined;
 onFocus?: ((event: FocusEvent) => any) | undefined;
-onBlur?: ((event: FocusEvent) => any) | undefined;
 onPaste?: ((event: ClipboardEvent) => any) | undefined;
+"onUpdate:modelValue"?: ((args_0: number | undefined) => any) | undefined;
 }>, {
 size: "default" | "small";
 label: string;
-modelValue: number;
 error: string;
-max: number;
+modelValue: number;
 min: number;
+max: number;
 placeholder: string;
 maxLength: number;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
@@ -1219,22 +1279,22 @@ export declare interface TabItem {
 
 export declare const TextInput: DefineComponent<Props_2, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 input: (event: Event) => any;
-"update:modelValue": (args_0: string | undefined) => any;
+blur: (event: FocusEvent) => any;
 change: (event: Event) => any;
 focus: (event: FocusEvent) => any;
-blur: (event: FocusEvent) => any;
 paste: (event: ClipboardEvent) => any;
+"update:modelValue": (args_0: string | undefined) => any;
 }, string, PublicProps, Readonly<Props_2> & Readonly<{
 onInput?: ((event: Event) => any) | undefined;
-"onUpdate:modelValue"?: ((args_0: string | undefined) => any) | undefined;
+onBlur?: ((event: FocusEvent) => any) | undefined;
 onChange?: ((event: Event) => any) | undefined;
 onFocus?: ((event: FocusEvent) => any) | undefined;
-onBlur?: ((event: FocusEvent) => any) | undefined;
 onPaste?: ((event: ClipboardEvent) => any) | undefined;
+"onUpdate:modelValue"?: ((args_0: string | undefined) => any) | undefined;
 }>, {
 label: string;
-modelValue: string;
 error: string;
+modelValue: string;
 placeholder: string;
 maxHeight: number;
 mode: "primary" | "smart";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@useinsider/ab-components",
-  "version": "0.0.107",
+  "version": "0.0.108",
   "type": "module",
   "files": [
     "dist"