@northlight/ui 2.26.1 → 2.27.1

package/dist/es/northlight.d.ts

@@ -121,6 +121,7 @@ type Size$1 = 'sm' | 'md' | 'lg';
 interface Option<T extends string = string> {
     label: string;
     value: T;
+    isCreation?: boolean;
 }
 interface SelectProps<T, K extends boolean> extends Omit<Props<T, K, GroupBase<T>>, 'onChange' | 'value' | 'isMulti'> {
     /** Whatever is currently selected by the select will be controlled by value prop, if value is
@@ -4022,13 +4023,16 @@ declare const PaneItem: ({ children, ...rest }: GridItemProps) => JSX.Element;
 declare const PaneDivider: _chakra_ui_system_dist_system_types.ComponentWithAs<_chakra_ui_system_dist_system_types.As, BoxProps>;
 
 type EditableSizes = 'sm' | 'md' | 'lg';
+type EditableVariant = 'brand' | 'default';
 interface EditableProps extends EditableProps$1 {
     value?: string;
     size?: EditableSizes;
     leftItem?: ReactElement;
+    variant?: EditableVariant;
 }
 interface EditableControlsProps {
     size: EditableSizes;
+    variant: EditableVariant;
 }
 
 /**
@@ -4061,7 +4065,7 @@ interface EditableControlsProps {
         </p>
  *
  */
-declare const EditableText: ({ size, value: inputValue, onSubmit, leftItem, ...rest }: EditableProps) => JSX.Element;
+declare const EditableText: ({ size, value: inputValue, onSubmit, leftItem, variant, ...rest }: EditableProps) => JSX.Element;
 
 interface StepStackProps extends StackProps {
     children: ReactNode | ReactNode[];
@@ -4194,76 +4198,7 @@ interface CreatableSelectDropdownProps<T extends string = string> {
     menuPlacement?: 'top' | 'bottom' | 'auto';
 }
 
-/**
- * A dropdown component that allows users to select a value from given options
- * or create a new one if it doesn't exist.
- * @see {@link https://northlight.dev/reference/creatable-select-dropdown}
- *
- * @example (Example)
- * (?
- * () => {
- *   const [artist, setArtist] = useState(null);
- *   const [element, setElement] = useState({ label: 'Technique', value: 'technique' })
- *   const someOptions = [
- *     { label: 'Scooter', value: 'scooter' },
- *     { label: 'Snoop Doggy Dogg', value: 'snoop-dogg' },
- *   ];
- *
-*   const someOtherOptions = [
- *     { label: 'Vision', value: 'vision' },
- *     { label: 'Technique', value: 'technique' },
- *     { label: 'Expression', value: 'expression' }
- *   ];
- *
- *   return (
- *     <VStack gap={10} alignItems={"flex-start"}>
- *       <Box align="left">
- *         <H1>Basic example</H1>
- *         <H3>Select the best artist</H3>
- *         <CreatableSelectDropdown
- *           standardOptions={someOptions}
- *           onOptionChange={setArtist}
- *           width="300px"
- *           value={artist ? artist.value : undefined}
- *         />
- *         {artist && artist.value !== 'Add option...' && (
- *           <H3 py={8}>The best artist is: {artist.label}</H3>
- *         )}
- *       </Box>
- *       <Box align="left">
- *         <H1>Pre-selected option</H1>
- *         <H3>What is the quintessential element of an exceptional artisan?</H3>
- *         <CreatableSelectDropdown
- *           standardOptions={someOtherOptions}
- *           onOptionChange={setElement}
- *           width="300px"
- *           value={element ? element.value : undefined}
- *         />
- *         {element && element.value !== 'Add option...' && (
- *           <H3 py={8}>
- *             {element.value === 'vision' && (
- *               'The artist\'s vision shapes their creative world.'
- *             )}
- *             {element.value === 'technique' && (
- *               'Technique is the legacy\'s bedrock.'
- *             )}
- *             {element.value === 'expression' && (
- *               'Expression communicates the artist\'s inner voice.'
- *             )}
- *             {element.value !== 'vision' &&
- *                element.value !== 'technique' &&
- *                element.value !== 'expression' && (
- *               'Absent the selection of legitimate alternatives.'
- *              )}
- *           </H3>
- *         )}
- *       </Box>
- *     </VStack>
- *   );
- * }
- * ?)
- */
-declare const CreatableSelectDropdown: <T extends string = string>({ standardOptions, initialPlaceholder, addOptionPlaceholder, creationOption, onOptionChange, width, variant, defaultValue, value, menuPlacement, }: CreatableSelectDropdownProps<T>) => JSX.Element;
+declare const CreatableSelectDropdown: <T extends string = string>({ standardOptions, initialPlaceholder, addOptionPlaceholder, creationOption, onOptionChange, variant, defaultValue, value, menuPlacement, ...restProps }: CreatableSelectDropdownProps<T>) => JSX.Element;
 
 declare const useDebounce: <T>(value: T, delay: number) => T;
 
@@ -4329,4 +4264,4 @@ declare const useResizeWidth: ({ stationaryEdge, minWidthPx, maxWidthPx, default
 declare const theme: Record<string, any>;
 declare const tottTheme: Record<string, any>;
 
-export { Accordion, AccordionButton, AccordionItem, AccordionPanel, Alert, AlertProps, AlertVariants, AspectRatio, AsyncError, AsyncErrorProps, Avatar, AvatarBadgeProps, AvatarGroup, AvatarGroupProps, AvatarProps, Badge, BasicOption, Blinker, BlinkerProps, BlockVariant, BlockVariantColorTuple, Blockquote, BodyType, Button, ButtonProps, ButtonVariants, Capitalized, Carousel, Checkbox, CheckboxField, CheckboxFieldProps, CheckboxProps, CheckboxVariants, ChildrenType, Clickable, ClickableProps, ClipboardInput, ClipboardInputProps, Collapse, CollapseProps, Color, ColorButtonProps, ColorGrade, ColorPicker, ColorPickerField, ColorPickerFieldProps, ColorPickerProps, ColorShades, ColorsExpandButtonProps, ConfirmDeleteModalProps, CreatableSelectDropdown, CurrentTheme, CustomContainerPropsType, CustomElementType, CustomFlipButtonProps, CustomFlipButtonPropsType, CustomTheme, DatePicker, DatePickerField, DatePickerFieldProps, DatePickerProps, DateRange, DateRangePicker, DateRangePickerField, DateRangePickerFieldProps, DateRangePickerProps, DragAndDrop, DragHandle, DragHandleProps, DragItem, DragItemProps, Draggable, DraggableProps, DropZone, DropZoneProps, Droppable, DroppableProps, DurationType, EditableControlsProps, EditableProps, EditableSizes, EditableText, Fade, FadeProps, FastGrid, FastGridProps, FastList, FastListProps, Field, FieldErrorType, FieldProps, FileEditorModalProps, FileFormat, FileIconButtonProps, FileItemProps, FilePicker, FilePickerField, FilePickerFieldProps, FilePickerProps, FileWithSizeAndType, FileWithSrcNameType, FileWithType, FlipButton, FlipButtonGroup, FlipButtonGroupField, FlipButtonGroupFieldProps, FlipButtonGroupProps, FlipButtonProps, Form, FormBody, FormLabel, FormLabelProps, FormProps, FormattedNumberInput, FormattedNumberInputField, FormattedNumberInputFieldProps, FormattedNumberInputPreset, FormattedNumberInputProps, H1, H2, H3, H4, H5, H6, HeadingProps, HeadingType, Icon, IconButton, IconButtonProps, IconProps, InputFieldProps, IntentButton, Label, LabelProps, LabelSizes, LabelType, Lead, ListenersType, LoadingBar, MaskedTextInput, MaskedTextInputProps, MediatoolThemeProvider, MediatoolThemeProviderProps, Menu, MenuProps, MenuVariants, Message, Modal, ModalBase, ModalBody, ModalBooleans, ModalProps, ModalSizes, MultiFileList, MultiFileListProps, MultiFilePicker, MultiFilePickerField, MultiFilePickerFieldProps, MultiFilePickerProps, MultiFileUploader, MultiFileUploaderProps, MultiItemType, MultiSort, MultiSortProps, NotificationIconButton, NotificationIconButtonProps, NumVal, NumValType, NumberInput, NumberInputField, NumberInputFieldProps, NumberInputProps, NumberInputSizeProps, NumberInputStepperProps, OffsetType, Option, OrganizationLogo, OrganizationLogoProps, OverflowGroup, OverflowGroupProps, OverflowIndicatorProps, P, PProps, PaneDivider, PaneItem, PinInput, PinInputProps, PinSize, PinSizeTuple, PinVariant, Popover, PresetOptions, ProgressBar, ProgressBarProps, Radio, RadioFieldGroupProps, RadioFieldProps, RadioGroup, RadioGroupField, RadioGroupProps, RadioProps, ResizeHandle, ScaleFade, ScaleFadeProps, SearchBar, SearchBarField, SearchBarFieldProps, SearchBarOptionType, SearchBarProps, Select, SelectActionMeta, SelectField, SelectFieldProps, SelectProps, SetValueOptionsType, Slide, SlideFade, SlideFadeProps, SlideProps, Small, Sortable, SortableContainer, SortableContainerProps, SortableItem, SortableItemProps, SortableList, SortableListProps, Spinner, SpinnerProps, SplitPane, SplitPaneProps, StatusBlock, StatusBlockProps, StatusPin, StatusPinProps, Step, StepList, StepListProps, StepPanel, StepPanelProps, StepProps, StepStack, Steps, StepsProps, StylizedType, Switch, SwitchField, SwitchFieldProps, SwitchProps, TabPanel, TabPanelProps, Table, TableProps, Tabs, TabsProps, Tag, TagGroup, TagGroupProps, TagProps, TagsInput, TagsInputProps, TextField, TextFieldProps, TextInputFormatter, TextSizeProps, Textarea, TextareaField, TextareaFieldProps, TextareaProps, Tiny, Toast, ToastProps, Toolbox, ToolboxContent, ToolboxContentProps, ToolboxFooter, ToolboxFooterProps, ToolboxHeader, ToolboxHeaderProps, ToolboxProps, Tooltip, TransitionDirection, UseFormReturn, UseSelectCallbacksProps, UseToastOptions, addAlpha, advancedParseFloat, clamp, createDebounceFunctionInstance, getChildrenWithProps, getContrastColor, getFieldError, getInitials, getMatchingValue, getShades, highlight, luminosity, ring, statusIconMap, theme, tottTheme, trimFormValues, useArrowFocus, useCurrentTheme, useDebounce, useDidUpdateEffect, useLoadingMessage, useOutsideRectClick, useOverflowGroup, useResizeWidth, useScreenSize, useScrollToBottom, useSelectCallbacks, useSetValueRefreshed, useToast };
+export { Accordion, AccordionButton, AccordionItem, AccordionPanel, Alert, AlertProps, AlertVariants, AspectRatio, AsyncError, AsyncErrorProps, Avatar, AvatarBadgeProps, AvatarGroup, AvatarGroupProps, AvatarProps, Badge, BasicOption, Blinker, BlinkerProps, BlockVariant, BlockVariantColorTuple, Blockquote, BodyType, Button, ButtonProps, ButtonVariants, Capitalized, Carousel, Checkbox, CheckboxField, CheckboxFieldProps, CheckboxProps, CheckboxVariants, ChildrenType, Clickable, ClickableProps, ClipboardInput, ClipboardInputProps, Collapse, CollapseProps, Color, ColorButtonProps, ColorGrade, ColorPicker, ColorPickerField, ColorPickerFieldProps, ColorPickerProps, ColorShades, ColorsExpandButtonProps, ConfirmDeleteModalProps, CreatableSelectDropdown, CurrentTheme, CustomContainerPropsType, CustomElementType, CustomFlipButtonProps, CustomFlipButtonPropsType, CustomTheme, DatePicker, DatePickerField, DatePickerFieldProps, DatePickerProps, DateRange, DateRangePicker, DateRangePickerField, DateRangePickerFieldProps, DateRangePickerProps, DragAndDrop, DragHandle, DragHandleProps, DragItem, DragItemProps, Draggable, DraggableProps, DropZone, DropZoneProps, Droppable, DroppableProps, DurationType, EditableControlsProps, EditableProps, EditableSizes, EditableText, EditableVariant, Fade, FadeProps, FastGrid, FastGridProps, FastList, FastListProps, Field, FieldErrorType, FieldProps, FileEditorModalProps, FileFormat, FileIconButtonProps, FileItemProps, FilePicker, FilePickerField, FilePickerFieldProps, FilePickerProps, FileWithSizeAndType, FileWithSrcNameType, FileWithType, FlipButton, FlipButtonGroup, FlipButtonGroupField, FlipButtonGroupFieldProps, FlipButtonGroupProps, FlipButtonProps, Form, FormBody, FormLabel, FormLabelProps, FormProps, FormattedNumberInput, FormattedNumberInputField, FormattedNumberInputFieldProps, FormattedNumberInputPreset, FormattedNumberInputProps, H1, H2, H3, H4, H5, H6, HeadingProps, HeadingType, Icon, IconButton, IconButtonProps, IconProps, InputFieldProps, IntentButton, Label, LabelProps, LabelSizes, LabelType, Lead, ListenersType, LoadingBar, MaskedTextInput, MaskedTextInputProps, MediatoolThemeProvider, MediatoolThemeProviderProps, Menu, MenuProps, MenuVariants, Message, Modal, ModalBase, ModalBody, ModalBooleans, ModalProps, ModalSizes, MultiFileList, MultiFileListProps, MultiFilePicker, MultiFilePickerField, MultiFilePickerFieldProps, MultiFilePickerProps, MultiFileUploader, MultiFileUploaderProps, MultiItemType, MultiSort, MultiSortProps, NotificationIconButton, NotificationIconButtonProps, NumVal, NumValType, NumberInput, NumberInputField, NumberInputFieldProps, NumberInputProps, NumberInputSizeProps, NumberInputStepperProps, OffsetType, Option, OrganizationLogo, OrganizationLogoProps, OverflowGroup, OverflowGroupProps, OverflowIndicatorProps, P, PProps, PaneDivider, PaneItem, PinInput, PinInputProps, PinSize, PinSizeTuple, PinVariant, Popover, PresetOptions, ProgressBar, ProgressBarProps, Radio, RadioFieldGroupProps, RadioFieldProps, RadioGroup, RadioGroupField, RadioGroupProps, RadioProps, ResizeHandle, ScaleFade, ScaleFadeProps, SearchBar, SearchBarField, SearchBarFieldProps, SearchBarOptionType, SearchBarProps, Select, SelectActionMeta, SelectField, SelectFieldProps, SelectProps, SetValueOptionsType, Slide, SlideFade, SlideFadeProps, SlideProps, Small, Sortable, SortableContainer, SortableContainerProps, SortableItem, SortableItemProps, SortableList, SortableListProps, Spinner, SpinnerProps, SplitPane, SplitPaneProps, StatusBlock, StatusBlockProps, StatusPin, StatusPinProps, Step, StepList, StepListProps, StepPanel, StepPanelProps, StepProps, StepStack, Steps, StepsProps, StylizedType, Switch, SwitchField, SwitchFieldProps, SwitchProps, TabPanel, TabPanelProps, Table, TableProps, Tabs, TabsProps, Tag, TagGroup, TagGroupProps, TagProps, TagsInput, TagsInputProps, TextField, TextFieldProps, TextInputFormatter, TextSizeProps, Textarea, TextareaField, TextareaFieldProps, TextareaProps, Tiny, Toast, ToastProps, Toolbox, ToolboxContent, ToolboxContentProps, ToolboxFooter, ToolboxFooterProps, ToolboxHeader, ToolboxHeaderProps, ToolboxProps, Tooltip, TransitionDirection, UseFormReturn, UseSelectCallbacksProps, UseToastOptions, addAlpha, advancedParseFloat, clamp, createDebounceFunctionInstance, getChildrenWithProps, getContrastColor, getFieldError, getInitials, getMatchingValue, getShades, highlight, luminosity, ring, statusIconMap, theme, tottTheme, trimFormValues, useArrowFocus, useCurrentTheme, useDebounce, useDidUpdateEffect, useLoadingMessage, useOutsideRectClick, useOverflowGroup, useResizeWidth, useScreenSize, useScrollToBottom, useSelectCallbacks, useSetValueRefreshed, useToast };