smartsell-ui-kit 0.1.6 → 0.1.8

package/dist/index.d.cts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ButtonHTMLAttributes, ReactNode, HTMLAttributes, CSSProperties, InputHTMLAttributes, SelectHTMLAttributes, TextareaHTMLAttributes } from 'react';
+import { ButtonHTMLAttributes, ReactNode, HTMLAttributes, CSSProperties, InputHTMLAttributes, Ref, SelectHTMLAttributes, TextareaHTMLAttributes } from 'react';
 import { SmartSellTheme, ThemeColors } from 'smartsell-theme';
 
 type ControlSize = 'sm' | 'md' | 'lg';
@@ -16,7 +16,8 @@ interface UiKitTheme extends Omit<SmartSellTheme, 'title' | 'colors' | 'color'>
 }
 declare function useUiKitTheme(): UiKitTheme;
 
-type ButtonVariant = 'solid' | 'outline' | 'ghost';
+type LegacyVariant = 'primary';
+type ButtonVariant = 'solid' | 'secondary' | 'outline' | 'ghost' | 'negative' | LegacyVariant;
 type ButtonSize = ControlSize;
 interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'dangerouslySetInnerHTML'> {
     variant?: ButtonVariant;
@@ -97,6 +98,19 @@ interface ComposableModalProps<TPayload = unknown> {
 declare const createModalSlotIds: (slotBaseId: string) => ModalSlotIds;
 declare function ComposableModal<TPayload = unknown>({ isOpen, onClose, title, slotBaseId, renderSlot, payload, onConfirm, confirmLabel, cancelLabel, isBusy, closeOnBackdrop, closeOnEscape, hideExpandButton, maximized, hideDefaultFooter, maxWidth, headerFallback, footerFallback, children, }: ComposableModalProps<TPayload>): react_jsx_runtime.JSX.Element;
 
+interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'dangerouslySetInnerHTML' | 'size'> {
+    label?: ReactNode;
+    hint?: ReactNode;
+    error?: ReactNode;
+    size?: ControlSize;
+    showPasswordToggle?: boolean;
+    fileButtonLabel?: ReactNode;
+    icon?: ReactNode;
+    disableFloatingLabel?: boolean;
+    ref?: Ref<HTMLInputElement>;
+}
+declare function Input({ label, hint, error, size, className, showPasswordToggle, fileButtonLabel, icon, id, disabled, placeholder, onChange, style, type, disableFloatingLabel, ...rest }: InputProps): react_jsx_runtime.JSX.Element;
+
 type DatePickerMode = 'date' | 'datetime';
 type DatePickerValue = string | Date | null;
 type DatePickerChangeReason = 'input' | 'picker' | 'clear';
@@ -106,11 +120,10 @@ interface DatePickerChangeContext {
     nativeValue: string;
     displayValue: string;
 }
-interface DatePickerProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'dangerouslySetInnerHTML' | 'size' | 'type' | 'value' | 'defaultValue' | 'onChange' | 'min' | 'max' | 'step'> {
+interface DatePickerProps extends Omit<InputProps, 'type' | 'value' | 'defaultValue' | 'onChange' | 'min' | 'max' | 'step'> {
     label?: ReactNode;
     hint?: ReactNode;
     error?: ReactNode;
-    size?: ControlSize;
     value?: DatePickerValue;
     defaultValue?: DatePickerValue;
     onChange?: (value: string | null, context: DatePickerChangeContext) => void;
@@ -129,18 +142,7 @@ interface DatePickerProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'd
     pickerButtonLabel?: string;
     clearButtonLabel?: string;
 }
-declare function DatePicker({ label, hint, error, size, value, defaultValue, onChange, mode, format, allowPastDates, allowFutureDates, minDate, maxDate, minuteStep, clearable, showPickerButton, isDateUnavailable, invalidDateMessage, unavailableDateMessage, pickerButtonLabel, clearButtonLabel, id, name, disabled, readOnly, required, style, className, placeholder, onBlur, onClick, onFocus, onKeyDown, ...rest }: DatePickerProps): react_jsx_runtime.JSX.Element;
-
-interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'dangerouslySetInnerHTML' | 'size'> {
-    label?: ReactNode;
-    hint?: ReactNode;
-    error?: ReactNode;
-    size?: ControlSize;
-    showPasswordToggle?: boolean;
-    fileButtonLabel?: ReactNode;
-    icon?: ReactNode;
-}
-declare function Input({ label, hint, error, size, className, showPasswordToggle, fileButtonLabel, icon, id, disabled, placeholder, onChange, style, type, ...rest }: InputProps): react_jsx_runtime.JSX.Element;
+declare function DatePicker({ value, defaultValue, onChange, mode, minDate, maxDate, minuteStep, placeholder, ...props }: DatePickerProps): react_jsx_runtime.JSX.Element;
 
 type ModalActionAppearance = 'text' | 'outlined' | 'contained' | 'link';
 type ModalThemeColors = {
@@ -213,10 +215,15 @@ interface SharedSelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>
     isFilterable?: boolean;
 }
 
+type SelectOption = {
+    label: string;
+    value: string;
+};
 interface SelectProps extends SharedSelectProps {
     children?: ReactNode;
+    options?: SelectOption[];
 }
-declare function Select({ children, ...props }: SelectProps): react_jsx_runtime.JSX.Element;
+declare function Select({ children, options, ...props }: SelectProps): react_jsx_runtime.JSX.Element;
 
 type SelectObjectOptionValue = string | number;
 interface SelectObjectOption<TValue extends SelectObjectOptionValue = SelectObjectOptionValue> {
@@ -320,6 +327,11 @@ interface SharedTableProps<TItem> {
     actions?: TableActionSource<TItem>;
     stickyActionsColumn?: boolean;
     maxInlineActions?: number;
+    /**
+     * Viewport width (in px) below which the table switches from the desktop
+     * table layout to the stacked mobile card layout. Defaults to 768 so the
+     * table collapses in sync with the host app's mobile breakpoint.
+     */
     collapseBelow?: number;
     searchable?: boolean;
     showSearch?: boolean;
@@ -369,6 +381,6 @@ interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>
     error?: ReactNode;
     size?: ControlSize;
 }
-declare function Textarea({ label, hint, error, size, id, disabled, style, rows, ...rest }: TextareaProps): react_jsx_runtime.JSX.Element;
+declare function Textarea({ label, hint, error, size, id, disabled, style, rows, placeholder, ...rest }: TextareaProps): react_jsx_runtime.JSX.Element;
 
 export { Button, type ButtonProps, Card, type CardProps, CardSmall, type CardSmallProps, Checkbox, type CheckboxProps, ComposableModal, type ComposableModalProps, type ComposableModalSlotRenderProps, type ComposableModalSlotRenderer, type ControlSize, DatePicker, type DatePickerChangeContext, type DatePickerChangeReason, type DatePickerMode, type DatePickerProps, type DatePickerValue, Input, type InputProps, Modal, type ModalAction, type ModalProps, type ModalSlotContext, type ModalSlotIds, type ModalTheme, type ModalThemeSource, Select, SelectAsync, type SelectAsyncLoadContext, type SelectAsyncLoadResult, type SelectAsyncOption, type SelectAsyncOptionValue, type SelectAsyncProps, type SelectProps, Separator, type SeparatorOrientation, type SeparatorProps, type SharedTableProps, type StandardModalProps, Table, type TableAction, type TableActionSource, type TableActionTone, TableAsync, type TableAsyncLoadContext, type TableAsyncLoadResult, type TableAsyncProps, type TableColumn, type TableColumnAlign, type TableColumnType, type TableLabels, type TableProps, Textarea, type TextareaProps, type UiKitTheme, createModalSlotIds, useUiKitTheme };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ButtonHTMLAttributes, ReactNode, HTMLAttributes, CSSProperties, InputHTMLAttributes, SelectHTMLAttributes, TextareaHTMLAttributes } from 'react';
+import { ButtonHTMLAttributes, ReactNode, HTMLAttributes, CSSProperties, InputHTMLAttributes, Ref, SelectHTMLAttributes, TextareaHTMLAttributes } from 'react';
 import { SmartSellTheme, ThemeColors } from 'smartsell-theme';
 
 type ControlSize = 'sm' | 'md' | 'lg';
@@ -16,7 +16,8 @@ interface UiKitTheme extends Omit<SmartSellTheme, 'title' | 'colors' | 'color'>
 }
 declare function useUiKitTheme(): UiKitTheme;
 
-type ButtonVariant = 'solid' | 'outline' | 'ghost';
+type LegacyVariant = 'primary';
+type ButtonVariant = 'solid' | 'secondary' | 'outline' | 'ghost' | 'negative' | LegacyVariant;
 type ButtonSize = ControlSize;
 interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'dangerouslySetInnerHTML'> {
     variant?: ButtonVariant;
@@ -97,6 +98,19 @@ interface ComposableModalProps<TPayload = unknown> {
 declare const createModalSlotIds: (slotBaseId: string) => ModalSlotIds;
 declare function ComposableModal<TPayload = unknown>({ isOpen, onClose, title, slotBaseId, renderSlot, payload, onConfirm, confirmLabel, cancelLabel, isBusy, closeOnBackdrop, closeOnEscape, hideExpandButton, maximized, hideDefaultFooter, maxWidth, headerFallback, footerFallback, children, }: ComposableModalProps<TPayload>): react_jsx_runtime.JSX.Element;
 
+interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'dangerouslySetInnerHTML' | 'size'> {
+    label?: ReactNode;
+    hint?: ReactNode;
+    error?: ReactNode;
+    size?: ControlSize;
+    showPasswordToggle?: boolean;
+    fileButtonLabel?: ReactNode;
+    icon?: ReactNode;
+    disableFloatingLabel?: boolean;
+    ref?: Ref<HTMLInputElement>;
+}
+declare function Input({ label, hint, error, size, className, showPasswordToggle, fileButtonLabel, icon, id, disabled, placeholder, onChange, style, type, disableFloatingLabel, ...rest }: InputProps): react_jsx_runtime.JSX.Element;
+
 type DatePickerMode = 'date' | 'datetime';
 type DatePickerValue = string | Date | null;
 type DatePickerChangeReason = 'input' | 'picker' | 'clear';
@@ -106,11 +120,10 @@ interface DatePickerChangeContext {
     nativeValue: string;
     displayValue: string;
 }
-interface DatePickerProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'dangerouslySetInnerHTML' | 'size' | 'type' | 'value' | 'defaultValue' | 'onChange' | 'min' | 'max' | 'step'> {
+interface DatePickerProps extends Omit<InputProps, 'type' | 'value' | 'defaultValue' | 'onChange' | 'min' | 'max' | 'step'> {
     label?: ReactNode;
     hint?: ReactNode;
     error?: ReactNode;
-    size?: ControlSize;
     value?: DatePickerValue;
     defaultValue?: DatePickerValue;
     onChange?: (value: string | null, context: DatePickerChangeContext) => void;
@@ -129,18 +142,7 @@ interface DatePickerProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'd
     pickerButtonLabel?: string;
     clearButtonLabel?: string;
 }
-declare function DatePicker({ label, hint, error, size, value, defaultValue, onChange, mode, format, allowPastDates, allowFutureDates, minDate, maxDate, minuteStep, clearable, showPickerButton, isDateUnavailable, invalidDateMessage, unavailableDateMessage, pickerButtonLabel, clearButtonLabel, id, name, disabled, readOnly, required, style, className, placeholder, onBlur, onClick, onFocus, onKeyDown, ...rest }: DatePickerProps): react_jsx_runtime.JSX.Element;
-
-interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'dangerouslySetInnerHTML' | 'size'> {
-    label?: ReactNode;
-    hint?: ReactNode;
-    error?: ReactNode;
-    size?: ControlSize;
-    showPasswordToggle?: boolean;
-    fileButtonLabel?: ReactNode;
-    icon?: ReactNode;
-}
-declare function Input({ label, hint, error, size, className, showPasswordToggle, fileButtonLabel, icon, id, disabled, placeholder, onChange, style, type, ...rest }: InputProps): react_jsx_runtime.JSX.Element;
+declare function DatePicker({ value, defaultValue, onChange, mode, minDate, maxDate, minuteStep, placeholder, ...props }: DatePickerProps): react_jsx_runtime.JSX.Element;
 
 type ModalActionAppearance = 'text' | 'outlined' | 'contained' | 'link';
 type ModalThemeColors = {
@@ -213,10 +215,15 @@ interface SharedSelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>
     isFilterable?: boolean;
 }
 
+type SelectOption = {
+    label: string;
+    value: string;
+};
 interface SelectProps extends SharedSelectProps {
     children?: ReactNode;
+    options?: SelectOption[];
 }
-declare function Select({ children, ...props }: SelectProps): react_jsx_runtime.JSX.Element;
+declare function Select({ children, options, ...props }: SelectProps): react_jsx_runtime.JSX.Element;
 
 type SelectObjectOptionValue = string | number;
 interface SelectObjectOption<TValue extends SelectObjectOptionValue = SelectObjectOptionValue> {
@@ -320,6 +327,11 @@ interface SharedTableProps<TItem> {
     actions?: TableActionSource<TItem>;
     stickyActionsColumn?: boolean;
     maxInlineActions?: number;
+    /**
+     * Viewport width (in px) below which the table switches from the desktop
+     * table layout to the stacked mobile card layout. Defaults to 768 so the
+     * table collapses in sync with the host app's mobile breakpoint.
+     */
     collapseBelow?: number;
     searchable?: boolean;
     showSearch?: boolean;
@@ -369,6 +381,6 @@ interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>
     error?: ReactNode;
     size?: ControlSize;
 }
-declare function Textarea({ label, hint, error, size, id, disabled, style, rows, ...rest }: TextareaProps): react_jsx_runtime.JSX.Element;
+declare function Textarea({ label, hint, error, size, id, disabled, style, rows, placeholder, ...rest }: TextareaProps): react_jsx_runtime.JSX.Element;
 
 export { Button, type ButtonProps, Card, type CardProps, CardSmall, type CardSmallProps, Checkbox, type CheckboxProps, ComposableModal, type ComposableModalProps, type ComposableModalSlotRenderProps, type ComposableModalSlotRenderer, type ControlSize, DatePicker, type DatePickerChangeContext, type DatePickerChangeReason, type DatePickerMode, type DatePickerProps, type DatePickerValue, Input, type InputProps, Modal, type ModalAction, type ModalProps, type ModalSlotContext, type ModalSlotIds, type ModalTheme, type ModalThemeSource, Select, SelectAsync, type SelectAsyncLoadContext, type SelectAsyncLoadResult, type SelectAsyncOption, type SelectAsyncOptionValue, type SelectAsyncProps, type SelectProps, Separator, type SeparatorOrientation, type SeparatorProps, type SharedTableProps, type StandardModalProps, Table, type TableAction, type TableActionSource, type TableActionTone, TableAsync, type TableAsyncLoadContext, type TableAsyncLoadResult, type TableAsyncProps, type TableColumn, type TableColumnAlign, type TableColumnType, type TableLabels, type TableProps, Textarea, type TextareaProps, type UiKitTheme, createModalSlotIds, useUiKitTheme };