stp-ui-kit 0.0.115 → 0.0.117

package/dist/{components → src/components}/display/InputChip/InputChip.d.ts

@@ -2,5 +2,6 @@ import { default as React, ReactNode } from 'react';
 export interface InputChipProps extends React.HTMLAttributes<HTMLDivElement> {
     label: ReactNode;
     icon?: ReactNode;
+    size?: "default" | "xs";
 }
 export declare const InputChip: React.FC<InputChipProps>;

package/dist/{components → src/components}/display/InputChip/InputChip.stories.d.ts

@@ -5,3 +5,5 @@ export default meta;
 type Story = StoryObj<typeof InputChip>;
 export declare const Default: Story;
 export declare const WithIcon: Story;
+export declare const ExtraSmall: Story;
+export declare const ExtraSmallWithIcon: Story;

package/dist/{components → src/components}/display/index.d.ts

@@ -1,7 +1,6 @@
 export * from './Avatar/Avatar';
 export * from './Button/Button';
 export * from './Dropdown/Dropdown';
-export * from './Empty/Empty';
 export * from './IconButton/IconButton';
 export * from './Typography/Typography';
 export * from './SvgStyleWrapper/SvgStyleWrapper';

package/dist/{components → src/components}/form/Select/Select.d.ts

@@ -4,7 +4,17 @@ interface SelectOption {
     value: string | number;
     disabled?: boolean;
 }
-interface SelectProps {
+type SingleSelectProps = {
+    multiple?: false;
+    value?: string | number;
+    onChange?: (value: string | number) => void;
+};
+type MultiSelectProps = {
+    multiple: true;
+    value?: (string | number)[];
+    onChange?: (value: (string | number)[]) => void;
+};
+type SelectProps = {
     label?: React.ReactNode;
     labelPlacement?: "block" | "inline";
     error?: string;
@@ -14,13 +24,11 @@ interface SelectProps {
     required?: boolean;
     className?: string;
     placeholder?: string;
-    value?: string | number;
     options: SelectOption[];
-    onChange?: (value: string | number) => void;
     onFocus?: () => void;
     onBlur?: () => void;
     renderOption?: (option: SelectOption) => React.ReactNode;
     searchable?: boolean;
-}
+} & (SingleSelectProps | MultiSelectProps);
 export declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLDivElement>>;
 export type { SelectProps, SelectOption };

package/dist/{components → src/components}/form/Select/Select.stories.d.ts

@@ -9,3 +9,7 @@ export declare const Disabled: StoryFn<typeof Select>;
 export declare const ReadOnly: StoryFn<typeof Select>;
 export declare const ManyOptions: StoryFn<typeof Select>;
 export declare const Searchable: StoryFn<typeof Select>;
+export declare const MultiSelect: StoryFn<typeof Select>;
+export declare const MultiSelectSearchable: StoryFn<typeof Select>;
+export declare const MultiSelectWithError: StoryFn<typeof Select>;
+export declare const MultiSelectDisabled: StoryFn<typeof Select>;

package/dist/src/styles/tokens.d.ts

@@ -0,0 +1,637 @@
+/**
+ * SCSS Design Tokens - Auto-generated type definitions
+ * Import these tokens in your consuming project for full TypeScript support
+ */
+
+export interface SpacingTokens {
+  "space-0": string;
+  "space-025": string;
+  "space-050": string;
+  "space-100": string;
+  "space-150": string;
+  "space-200": string;
+  "space-250": string;
+  "space-300": string;
+  "space-350": string;
+  "space-400": string;
+  "space-450": string;
+  "space-500": string;
+  "space-550": string;
+  "space-600": string;
+  "space-650": string;
+  "space-750": string;
+  "space-800": string;
+  "space-850": string;
+  "space-900": string;
+  "space-950": string;
+  "space-1000": string;
+  "space-1100": string;
+  "space-1200": string;
+  "space-1300": string;
+  "space-1600": string;
+  "space-2000": string;
+  "space-2400": string;
+  "space-3200": string;
+}
+
+export interface BreakpointTokens {
+  lg: string;
+  md: string;
+  sm: string;
+  mobile: string;
+}
+
+export interface PrimitiveColorTokens {
+  "color-neutral-alpha": string;
+  "color-neutral-00": string;
+  "color-neutral-50": string;
+  "color-neutral-100": string;
+  "color-neutral-150": string;
+  "color-neutral-200": string;
+  "color-neutral-250": string;
+  "color-neutral-300": string;
+  "color-neutral-350": string;
+  "color-neutral-400": string;
+  "color-neutral-450": string;
+  "color-neutral-500": string;
+  "color-neutral-550": string;
+  "color-neutral-600": string;
+  "color-neutral-650": string;
+  "color-neutral-700": string;
+  "color-neutral-750": string;
+  "color-neutral-800": string;
+  "color-neutral-850": string;
+  "color-neutral-900": string;
+  "color-neutral-950": string;
+  "color-red-50": string;
+  "color-red-100": string;
+  "color-red-200": string;
+  "color-red-300": string;
+  "color-red-400": string;
+  "color-red-500": string;
+  "color-red-600": string;
+  "color-red-700": string;
+  "color-red-800": string;
+  "color-red-900": string;
+  "color-red-950": string;
+  "color-amber-50": string;
+  "color-amber-100": string;
+  "color-amber-200": string;
+  "color-amber-300": string;
+  "color-amber-400": string;
+  "color-amber-500": string;
+  "color-amber-600": string;
+  "color-amber-700": string;
+  "color-amber-800": string;
+  "color-amber-900": string;
+  "color-amber-950": string;
+  "color-green-50": string;
+  "color-green-100": string;
+  "color-green-200": string;
+  "color-green-300": string;
+  "color-green-400": string;
+  "color-green-500": string;
+  "color-green-600": string;
+  "color-green-700": string;
+  "color-green-800": string;
+  "color-green-900": string;
+  "color-green-950": string;
+  "color-blue-50": string;
+  "color-blue-100": string;
+  "color-blue-200": string;
+  "color-blue-300": string;
+  "color-blue-400": string;
+  "color-blue-500": string;
+  "color-blue-600": string;
+  "color-blue-700": string;
+  "color-blue-800": string;
+  "color-blue-900": string;
+  "color-blue-950": string;
+  "color-lime-50": string;
+  "color-lime-100": string;
+  "color-lime-200": string;
+  "color-lime-300": string;
+  "color-lime-400": string;
+  "color-lime-500": string;
+  "color-lime-600": string;
+  "color-lime-700": string;
+  "color-lime-800": string;
+  "color-lime-900": string;
+  "color-lime-950": string;
+  "color-indigo-50": string;
+  "color-indigo-100": string;
+  "color-indigo-200": string;
+  "color-indigo-300": string;
+  "color-indigo-400": string;
+  "color-indigo-500": string;
+  "color-indigo-600": string;
+  "color-indigo-700": string;
+  "color-indigo-800": string;
+  "color-indigo-900": string;
+  "color-indigo-950": string;
+  "color-violet-50": string;
+  "color-violet-100": string;
+  "color-violet-200": string;
+  "color-violet-300": string;
+  "color-violet-400": string;
+  "color-violet-500": string;
+  "color-violet-600": string;
+  "color-violet-700": string;
+  "color-violet-800": string;
+  "color-violet-900": string;
+  "color-violet-950": string;
+  "color-teal-50": string;
+  "color-teal-100": string;
+  "color-teal-200": string;
+  "color-teal-300": string;
+  "color-teal-400": string;
+  "color-teal-500": string;
+  "color-teal-600": string;
+  "color-teal-700": string;
+  "color-teal-800": string;
+  "color-teal-900": string;
+  "color-teal-950": string;
+  "color-fuchsia-50": string;
+  "color-fuchsia-100": string;
+  "color-fuchsia-200": string;
+  "color-fuchsia-300": string;
+  "color-fuchsia-400": string;
+  "color-fuchsia-500": string;
+  "color-fuchsia-600": string;
+  "color-fuchsia-700": string;
+  "color-fuchsia-800": string;
+  "color-fuchsia-900": string;
+  "color-fuchsia-950": string;
+}
+
+export interface SemanticColorTokens {
+  text: string;
+  "text-secondary": string;
+  "text-disabled": string;
+  "text-inverse": string;
+  "text-on-fill-brand": string;
+  "text-on-fill": string;
+  "text-critical": string;
+  "text-emphasis": string;
+  "text-emphasis-hover": string;
+  "text-emphasis-on-press": string;
+  "text-emphasis-selected": string;
+  "text-warning": string;
+  "text-warning-on-bg-fill": string;
+  "text-success": string;
+  link: string;
+  "link-hover": string;
+  "link-on-press": string;
+  bg: string;
+  "bg-inverse": string;
+  "bg-mobile": string;
+  surface: string;
+  "surface-inverse": string;
+  "surface-hover": string;
+  "surface-on-press": string;
+  "surface-selected": string;
+  "surface-secondary": string;
+  "surface-secondary-hover": string;
+  "surface-secondary-on-press": string;
+  "surface-secondary-selected": string;
+  "surface-brand": string;
+  "surface-critical": string;
+  "surface-warning": string;
+  "surface-success": string;
+  fill: string;
+  "fill-hover": string;
+  "fill-on-press": string;
+  "fill-selected": string;
+  "fill-disabled": string;
+  "fill-brand": string;
+  "fill-brand-hover": string;
+  "fill-brand-on-press": string;
+  "fill-brand-selected": string;
+  "fill-brand-disabled": string;
+  "fill-critical-secondary": string;
+  "fill-critical": string;
+  "fill-critical-hover": string;
+  "fill-critical-on-press": string;
+  "fill-critical-selected": string;
+  "fill-warning": string;
+  "fill-warning-hover": string;
+  "fill-warning-on-press": string;
+  "fill-warning-selected": string;
+  "fill-success-secondary": string;
+  border: string;
+  "border-disabled": string;
+  "border-critical": string;
+  "border-success": string;
+  "border-brand": string;
+  "border-warning": string;
+  "input-border": string;
+  "input-border-active": string;
+  "input-border-disabled": string;
+  "input-bg-surface": string;
+  "input-bg-surface-hover": string;
+  "input-bg-surface-active": string;
+  "input-bg-surface-disabled": string;
+  icon: string;
+  "icon-secondary": string;
+  "icon-disabled": string;
+  "icon-on-bg-fill-brand": string;
+  "icon-on-bg-fill-warning": string;
+  "icon-on-bg-fill-critical": string;
+  "icon-critical": string;
+  "icon-emphasis": string;
+  "icon-emphasis-hover": string;
+  "icon-emphasis-on-press": string;
+  "icon-emphasis-selected": string;
+  "icon-warning": string;
+  "icon-success": string;
+  "nav-bg": string;
+  "nav-bg-surface": string;
+  "nav-bg-surface-hover": string;
+  "nav-bg-surface-on-press": string;
+  "nav-bg-surface-selected": string;
+  "nav-bg-surface-selected-no-hover": string;
+  "border-active": string;
+  "border-input": string;
+  "border-input-active": string;
+  "border-input-disabled": string;
+  backdrop: string;
+  "fill-lime": string;
+  "text-lime": string;
+  "fill-blue": string;
+  "text-blue": string;
+  "fill-fuchsia": string;
+  "text-fuchsia": string;
+  "fill-teal": string;
+  "text-teal": string;
+  "fill-indigo": string;
+  "text-indigo": string;
+  "text-decorative-blue": string;
+  "text-decorative-violet": string;
+  "text-decorative-fuchsia": string;
+  "text-decorative-lime": string;
+  "text-decorative-teal": string;
+  "text-decorative-indigo": string;
+  "text-decorative-red": string;
+  "text-decorative-amber": string;
+  "text-decorative-green": string;
+  "surface-decorative-blue": string;
+  "surface-decorative-violet": string;
+  "surface-decorative-fuchsia": string;
+  "surface-decorative-red": string;
+  "surface-decorative-amber": string;
+  "surface-decorative-green": string;
+  "surface-decorative-lime": string;
+  "surface-decorative-indigo": string;
+  "surface-decorative-teal": string;
+  "fill-decorative-blue": string;
+  "fill-decorative-violet": string;
+  "fill-decorative-fuchsia": string;
+  "fill-decorative-lime": string;
+  "fill-decorative-teal": string;
+  "fill-decorative-indigo": string;
+  "fill-decorative-red": string;
+  "fill-decorative-amber": string;
+  "fill-decorative-green": string;
+  "fill-decorative-neutral": string;
+  "bg-icon-decorative-blue": string;
+  "bg-icon-decorative-violet": string;
+  "bg-icon-decorative-fuchsia": string;
+  "bg-icon-decorative-red": string;
+  "bg-icon-decorative-amber": string;
+  "bg-icon-decorative-green": string;
+  "bg-icon-decorative-lime": string;
+  "bg-icon-decorative-indigo": string;
+  "bg-icon-decorative-teal": string;
+}
+
+export interface LegacyColorTokens {
+  white: string;
+  white_background: string;
+  white_blue: string;
+  white_silver: string;
+  black: string;
+  blue_text: string;
+  blue_gray: string;
+  blue_silver: string;
+  blue_navy: string;
+  black_transparent: string;
+  light_gray: string;
+  light: string;
+  light_filter: string;
+  shadow: string;
+  harmonies: string;
+  blue_royal: string;
+  alice_blue: string;
+  black_medium: string;
+  black_gray: string;
+  white_dark: string;
+  blue_very_light: string;
+  white_smoke: string;
+  black_ghost: string;
+  modal_background: string;
+  red: string;
+  yellow: string;
+  "light-yellow": string;
+  "darker-light-yellow": string;
+  green: string;
+  green_gray: string;
+  blue_dark: string;
+  blue_dark_hover: string;
+  blue_tabs_hover: string;
+  secondary_dark: string;
+  text_dark: string;
+  blue_secondary: string;
+  "blue-background": string;
+  "blue-border": string;
+  "blue-icon": string;
+  "blue-icon-light": string;
+  "gray-info": string;
+  "gray-language-tab": string;
+  "blue-dark-tab": string;
+  black_light: string;
+  input_focus: string;
+  blue_secondary_placholder: string;
+  gray_placeholder: string;
+  profile_complete_card_background: string;
+  gray_light: string;
+  "light-green": string;
+  "dark-green": string;
+  "light-blue": string;
+  "light-gray": string;
+  red_danger: string;
+  red_danger_bg: string;
+  "light-red": string;
+  "dark-red": string;
+  "light-purple": string;
+  "dark-purple": string;
+  "grey-bg": string;
+  "grey-text": string;
+  "grey-border": string;
+  blue_heading: string;
+  "midnight-blue": string;
+  dark_card_blue: string;
+  grey_text_lms: string;
+  grey_bg_lms: string;
+  grey_bg_lms_icon: string;
+  grey_lms_header: string;
+  green_correct: string;
+  green_bg: string;
+  "blue-box": string;
+  "purple-box": string;
+  "blue-box-filler": string;
+  grey_pdf: string;
+  pink: string;
+  grey_voice: string;
+  gray_border: string;
+  dark_gray: string;
+  btn_gray: string;
+  blue_bg: string;
+  gray_progress: string;
+  gray_button: string;
+  gray_bg_mobile: string;
+  gray_divider: string;
+  blue_light: string;
+  gray_tabs: string;
+  gray_card: string;
+  dark_text: string;
+  mobile_bg: string;
+  gray_tabs_bg: string;
+  gray_tabs_text: string;
+  gray_border_two: string;
+  red_line: string;
+  "pearl-green": string;
+  blue_linear: string;
+  blue_gradient: string;
+  yellow_light: string;
+  gray_proftest: string;
+  gray_bars: string;
+  yellow_border: string;
+  yellow_background: string;
+  gray_not_activated: string;
+  black_almost: string;
+  gray_price: string;
+  gray_admin: string;
+  gray_admin_text: string;
+  gray_admin_light: string;
+  gray_black_notif_text: string;
+  black_notif_text: string;
+  gray_notif_date: string;
+  gray_feedback_question: string;
+  kaspi_red: string;
+  halloween: string;
+  blue_support: string;
+  blue_new: string;
+  blue_bg_dark: string;
+  blue_bg_light: string;
+  gray_new: string;
+  blue_new_gradient: string;
+  orange_gradient: string;
+  yellow_gradient: string;
+}
+
+export interface BorderTokens {
+  "border-radius-0": string;
+  "border-radius-50": string;
+  "border-radius-100": string;
+  "border-radius-200": string;
+  "border-radius-full": string;
+  "border-width-025": string;
+}
+
+export interface ShadowTokens {
+  "shadow-color": string;
+  "shadow-0": string;
+  "shadow-100": string;
+  "shadow-200": string;
+  "shadow-300": string;
+  "shadow-400": string;
+  "shadow-500": string;
+  "shadow-600": string;
+}
+
+export interface PrimitiveTypographyTokens {
+  "font-weight-regular": string;
+  "font-weight-medium": string;
+  "font-weight-semibold": string;
+  "font-weight-bold": string;
+  "font-letter-spacing-denser": string;
+  "font-letter-spacing-dense": string;
+  "font-letter-spacing-normal": string;
+  "font-size-300": string;
+  "font-size-350": string;
+  "font-size-400": string;
+  "font-size-450": string;
+  "font-size-500": string;
+  "font-size-550": string;
+  "font-size-600": string;
+  "font-size-700": string;
+  "font-size-750": string;
+  "font-size-1000": string;
+  "font-line-height-400": string;
+  "font-line-height-500": string;
+  "font-line-height-550": string;
+  "font-line-height-600": string;
+  "font-line-height-650": string;
+  "font-line-height-700": string;
+  "font-line-height-800": string;
+  "font-line-height-850": string;
+  "font-line-height-1000": string;
+}
+
+export interface DisplayTypographyTokens {
+  "display-font-size": string;
+  "display-line-height": string;
+  "display-weight": string;
+  "display-letter-spacing": string;
+  "display-font-size-mobile": string;
+  "display-line-height-mobile": string;
+  "display-weight-mobile": string;
+  "display-letter-spacing-mobile": string;
+}
+
+export interface HeadingTypographyTokens {
+  "heading-xl-font-size": string;
+  "heading-xl-line-height": string;
+  "heading-xl-weight": string;
+  "heading-xl-letter-spacing": string;
+  "heading-lg-font-size": string;
+  "heading-lg-line-height": string;
+  "heading-lg-weight": string;
+  "heading-lg-letter-spacing": string;
+  "heading-md-font-size": string;
+  "heading-md-line-height": string;
+  "heading-md-weight": string;
+  "heading-md-letter-spacing": string;
+  "heading-sm-font-size": string;
+  "heading-sm-line-height": string;
+  "heading-sm-weight": string;
+  "heading-sm-letter-spacing": string;
+  "heading-xs-font-size": string;
+  "heading-xs-line-height": string;
+  "heading-xs-weight": string;
+  "heading-xs-letter-spacing": string;
+  "heading-xl-font-size-mobile": string;
+  "heading-xl-line-height-mobile": string;
+  "heading-xl-weight-mobile": string;
+  "heading-xl-letter-spacing-mobile": string;
+  "heading-lg-font-size-mobile": string;
+  "heading-lg-line-height-mobile": string;
+  "heading-lg-weight-mobile": string;
+  "heading-lg-letter-spacing-mobile": string;
+  "heading-md-font-size-mobile": string;
+  "heading-md-line-height-mobile": string;
+  "heading-md-weight-mobile": string;
+  "heading-md-letter-spacing-mobile": string;
+  "heading-sm-font-size-mobile": string;
+  "heading-sm-line-height-mobile": string;
+  "heading-sm-weight-mobile": string;
+  "heading-sm-letter-spacing-mobile": string;
+  "heading-xs-font-size-mobile": string;
+  "heading-xs-line-height-mobile": string;
+  "heading-xs-weight-mobile": string;
+  "heading-xs-letter-spacing-mobile": string;
+}
+
+export interface BodyTypographyTokens {
+  "body-lg-font-size": string;
+  "body-lg-line-height": string;
+  "body-lg-weight-default": string;
+  "body-lg-weight-medium": string;
+  "body-lg-weight-semibold": string;
+  "body-lg-letter-spacing": string;
+  "body-md-font-size": string;
+  "body-md-line-height": string;
+  "body-md-weight-default": string;
+  "body-md-weight-medium": string;
+  "body-md-weight-semibold": string;
+  "body-md-letter-spacing": string;
+  "body-sm-font-size": string;
+  "body-sm-line-height": string;
+  "body-sm-weight-default": string;
+  "body-sm-weight-medium": string;
+  "body-sm-weight-semibold": string;
+  "body-sm-letter-spacing": string;
+  "body-lg-font-size-mobile": string;
+  "body-lg-line-height-mobile": string;
+  "body-lg-weight-default-mobile": string;
+  "body-lg-weight-medium-mobile": string;
+  "body-lg-weight-semibold-mobile": string;
+  "body-lg-letter-spacing-mobile": string;
+  "body-md-font-size-mobile": string;
+  "body-md-line-height-mobile": string;
+  "body-md-weight-default-mobile": string;
+  "body-md-weight-medium-mobile": string;
+  "body-md-weight-semibold-mobile": string;
+  "body-md-letter-spacing-mobile": string;
+  "body-sm-font-size-mobile": string;
+  "body-sm-line-height-mobile": string;
+  "body-sm-weight-default-mobile": string;
+  "body-sm-weight-medium-mobile": string;
+  "body-sm-weight-semibold-mobile": string;
+  "body-sm-letter-spacing-mobile": string;
+}
+
+export interface LayoutTokens {
+  "card-padding": string;
+  "button-group-gap": string;
+  margin: string;
+  "section-gap": string;
+  "within-section-gap-small": string;
+  "within-section-gap-medium": string;
+  "within-section-gap-large": string;
+  "icon-size": string;
+  "page-header-sections-gap": string;
+  "section-header-section-content-gap": string;
+  "text-field-group-gap": string;
+  "card-padding-mobile": string;
+  "button-group-gap-mobile": string;
+  "margin-mobile": string;
+  "section-gap-mobile": string;
+  "within-section-gap-small-mobile": string;
+  "within-section-gap-medium-mobile": string;
+  "within-section-gap-large-mobile": string;
+  "icon-size-mobile": string;
+  "page-header-sections-gap-mobile": string;
+  "section-header-section-content-gap-mobile": string;
+  "text-field-group-gap-mobile": string;
+  "card-gap": string;
+  "card-gap-mobile": string;
+  "icon-text-gap": string;
+}
+
+export interface TypographyStructure {
+  primitive: PrimitiveTypographyTokens;
+  semantic: {
+    display: DisplayTypographyTokens;
+    heading: HeadingTypographyTokens;
+    body: BodyTypographyTokens;
+  };
+}
+
+export interface TokensStructure {
+  raw: Record<string, string>;
+  spacing: SpacingTokens;
+  colors: PrimitiveColorTokens;
+  breakpoints: BreakpointTokens;
+  shadows: ShadowTokens;
+  typography: TypographyStructure;
+}
+
+export type AllTokens = SpacingTokens &
+  PrimitiveColorTokens &
+  SemanticColorTokens &
+  LegacyColorTokens &
+  BreakpointTokens &
+  BorderTokens &
+  ShadowTokens &
+  PrimitiveTypographyTokens &
+  DisplayTypographyTokens &
+  HeadingTypographyTokens &
+  BodyTypographyTokens &
+  LayoutTokens & {
+    spacing: string;
+    "font-family-sans": string;
+  };
+
+declare const tokens: TokensStructure;
+export default tokens;