@luscii-healthtech/web-ui 54.3.2 → 54.3.3

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

@@ -32,6 +32,31 @@ export interface SelectProps<Option extends OptionMinimal = OptionMinimal, IsMul
      * way, without any processing of the value.
      */
     skipValueProcessing?: boolean;
+    /**
+     * Enable the user to create new options by typing and pressing Enter.
+     * When enabled, the select becomes "creatable" - if no matching options are found,
+     * the user can add the typed value as a new option.
+     */
+    isCreatable?: boolean;
+    /**
+     * Callback fired when a new option is created. Only applies when `isCreatable` is true.
+     * @param inputValue - The text input that the user typed to create the new option
+     */
+    onCreateOption?: (inputValue: string) => void;
+    /**
+     * Formats the label shown to users when they can create a new option.
+     * Only applies when `isCreatable` is true.
+     * Use this for translations or custom messaging.
+     * @param inputValue - The text the user has typed
+     * @returns The label to display (e.g., 'Create "inputValue"' or t('select.create', { inputValue }))
+     * @example
+     * // With translations
+     * formatCreateLabel={(value) => t('select.create', { value })}
+     * @example
+     * // Custom text
+     * formatCreateLabel={(value) => `Add "${value}" as new option`}
+     */
+    formatCreateLabel?: (inputValue: string) => string;
 }
 /**
  * A searchable select component powered by `react-select`, styled to match Luscii's design.

package/dist/src/generated/components/Select/Select.d.ts

@@ -32,6 +32,31 @@ export interface SelectProps<Option extends OptionMinimal = OptionMinimal, IsMul
      * way, without any processing of the value.
      */
     skipValueProcessing?: boolean;
+    /**
+     * Enable the user to create new options by typing and pressing Enter.
+     * When enabled, the select becomes "creatable" - if no matching options are found,
+     * the user can add the typed value as a new option.
+     */
+    isCreatable?: boolean;
+    /**
+     * Callback fired when a new option is created. Only applies when `isCreatable` is true.
+     * @param inputValue - The text input that the user typed to create the new option
+     */
+    onCreateOption?: (inputValue: string) => void;
+    /**
+     * Formats the label shown to users when they can create a new option.
+     * Only applies when `isCreatable` is true.
+     * Use this for translations or custom messaging.
+     * @param inputValue - The text the user has typed
+     * @returns The label to display (e.g., 'Create "inputValue"' or t('select.create', { inputValue }))
+     * @example
+     * // With translations
+     * formatCreateLabel={(value) => t('select.create', { value })}
+     * @example
+     * // Custom text
+     * formatCreateLabel={(value) => `Add "${value}" as new option`}
+     */
+    formatCreateLabel?: (inputValue: string) => string;
 }
 /**
  * A searchable select component powered by `react-select`, styled to match Luscii's design.

package/dist/stories/Select.stories.d.ts

@@ -146,6 +146,7 @@ export declare const MultiSelectWithDefault: {
         onChange: import("storybook/actions").HandlerFunction;
     };
 };
+export declare const CreatableSelect: Story;
 export declare const GroupedOptions: {
     args: {
         options: ({