@vibe/core 3.88.5 → 3.89.0-alpha-01945.0

package/dist/metadata.json

@@ -1649,6 +1649,9 @@
             {
               "value": "\"warning\""
             },
+            {
+              "value": "\"info\""
+            },
             {
               "value": "\"neutral\""
             }
@@ -2705,7 +2708,7 @@
         }
       }
     },
-    "import": "import { Button } from \"@vibe/button\"",
+    "import": "import { Button } from \"@vibe/core\"",
     "subComponents": []
   },
   {
@@ -3142,7 +3145,9 @@
     "aggregator": "core",
     "symbols": [
       "default as Chips",
-      "type ChipsProps"
+      "type ChipsProps",
+      "ChipsVariant",
+      "ChipsSize"
     ],
     "displayName": "Chips",
     "description": "",
@@ -3158,6 +3163,29 @@
           "name": "ElementContent"
         }
       },
+      "variant": {
+        "defaultValue": {
+          "value": "default"
+        },
+        "description": "Visual and behavioral variant of the chip.\n- `default` — standard chip (colors, optional remove / click)\n- `readOnly` — display only; no interaction\n- `filterable` — primary theme only; default / hover / pressed states",
+        "name": "variant",
+        "required": false,
+        "type": {
+          "name": "enum",
+          "raw": "ChipsVariant",
+          "value": [
+            {
+              "value": "\"default\""
+            },
+            {
+              "value": "\"readOnly\""
+            },
+            {
+              "value": "\"filterable\""
+            }
+          ]
+        }
+      },
       "disabled": {
         "defaultValue": {
           "value": "false"
@@ -3173,13 +3201,44 @@
         "defaultValue": {
           "value": "false"
         },
-        "description": "If true, the chip is read-only and cannot be deleted.",
+        "description": "If true, the chip is read-only and cannot be deleted or interacted with.\nPrefer `variant=\"readOnly\"` for new usage.",
         "name": "readOnly",
         "required": false,
         "type": {
           "name": "boolean"
         }
       },
+      "pressed": {
+        "defaultValue": {
+          "value": "false"
+        },
+        "description": "When `variant=\"filterable\"`, shows the pressed (selected) state.",
+        "name": "pressed",
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "size": {
+        "defaultValue": {
+          "value": "medium"
+        },
+        "description": "The size of the chip.\n- `medium` — default (24px height)\n- `small` — 20px height, 12px text",
+        "name": "size",
+        "required": false,
+        "type": {
+          "name": "enum",
+          "raw": "ChipsSize",
+          "value": [
+            {
+              "value": "\"medium\""
+            },
+            {
+              "value": "\"small\""
+            }
+          ]
+        }
+      },
       "rightRenderer": {
         "defaultValue": null,
         "description": "A React element displayed on the right side.",
@@ -3310,12 +3369,12 @@
         "defaultValue": {
           "value": "primary"
         },
-        "description": "The background color of the chip.",
+        "description": "The background color of the chip.\nIgnored when `variant=\"filterable\"` (always primary).",
         "name": "color",
         "required": false,
         "type": {
           "name": "enum",
-          "raw": "\"grass_green\" | \"done-green\" | \"bright-green\" | \"saladish\" | \"egg_yolk\" | \"working_orange\" | \"dark-orange\" | \"peach\" | \"sunset\" | \"stuck-red\" | \"dark-red\" | \"sofia_pink\" | \"lipstick\" | ... 29 more ... | \"neutral\"",
+          "raw": "\"grass_green\" | \"done-green\" | \"bright-green\" | \"saladish\" | \"egg_yolk\" | \"working_orange\" | \"dark-orange\" | \"peach\" | \"sunset\" | \"stuck-red\" | \"dark-red\" | \"sofia_pink\" | \"lipstick\" | ... 30 more ... | \"neutral\"",
           "value": [
             {
               "value": "\"grass_green\""
@@ -3443,6 +3502,9 @@
             {
               "value": "\"warning\""
             },
+            {
+              "value": "\"info\""
+            },
             {
               "value": "\"neutral\""
             }
@@ -3450,9 +3512,7 @@
         }
       },
       "iconSize": {
-        "defaultValue": {
-          "value": "18"
-        },
+        "defaultValue": null,
         "description": "The size of the icons inside the chip.",
         "name": "iconSize",
         "required": false,
@@ -3791,7 +3851,7 @@
         }
       }
     },
-    "import": "import { Clickable } from \"@vibe/clickable\"",
+    "import": "import { Clickable } from \"@vibe/core\"",
     "subComponents": [
       "ClickableWrapper"
     ]
@@ -3865,7 +3925,7 @@
         }
       }
     },
-    "import": "import { ClickableWrapper } from \"@vibe/clickable\"",
+    "import": "import { ClickableWrapper } from \"@vibe/core\"",
     "subComponents": []
   },
   {
@@ -3877,7 +3937,7 @@
     "displayName": "useClickableProps",
     "description": "Return props for adding clickable functionality to the element except for the styles and classNames",
     "props": {},
-    "import": "import { useClickableProps } from \"@vibe/clickable\"",
+    "import": "import { useClickableProps } from \"@vibe/core\"",
     "subComponents": []
   },
   {
@@ -5720,7 +5780,7 @@
         }
       }
     },
-    "import": "import { Dialog } from \"@vibe/dialog\"",
+    "import": "import { Dialog } from \"@vibe/core\"",
     "subComponents": [
       "DialogConstants"
     ]
@@ -5860,7 +5920,7 @@
         }
       }
     },
-    "import": "import { DialogContentContainer } from \"@vibe/dialog\"",
+    "import": "import { DialogContentContainer } from \"@vibe/core\"",
     "subComponents": []
   },
   {
@@ -7596,7 +7656,7 @@
         }
       }
     },
-    "import": "import { Flex } from \"@vibe/layout\"",
+    "import": "import { Flex } from \"@vibe/core\"",
     "subComponents": []
   },
   {
@@ -8288,7 +8348,7 @@
         }
       }
     },
-    "import": "import { Box } from \"@vibe/layout\"",
+    "import": "import { Box } from \"@vibe/core\"",
     "subComponents": []
   },
   {
@@ -8614,7 +8674,7 @@
         }
       }
     },
-    "import": "import { Text } from \"@vibe/typography\"",
+    "import": "import { Text } from \"@vibe/core\"",
     "subComponents": [
       "TextConstants"
     ]
@@ -8822,7 +8882,7 @@
         }
       }
     },
-    "import": "import { Heading } from \"@vibe/typography\"",
+    "import": "import { Heading } from \"@vibe/core\"",
     "subComponents": [
       "HeadingConstants"
     ]
@@ -8993,7 +9053,7 @@
         }
       }
     },
-    "import": "import { Typography } from \"@vibe/typography\"",
+    "import": "import { Typography } from \"@vibe/core\"",
     "subComponents": []
   },
   {
@@ -9200,7 +9260,7 @@
         }
       }
     },
-    "import": "import { Icon } from \"@vibe/icon\"",
+    "import": "import { Icon } from \"@vibe/core\"",
     "subComponents": []
   },
   {
@@ -9333,7 +9393,7 @@
         }
       }
     },
-    "import": "import { CustomSvgIcon } from \"@vibe/icon\"",
+    "import": "import { CustomSvgIcon } from \"@vibe/core\"",
     "subComponents": []
   },
   {
@@ -9664,7 +9724,7 @@
         }
       }
     },
-    "import": "import { IconButton } from \"@vibe/icon-button\"",
+    "import": "import { IconButton } from \"@vibe/core\"",
     "subComponents": []
   },
   {
@@ -10168,7 +10228,7 @@
         }
       }
     },
-    "import": "import { LayerProvider } from \"@vibe/layer\"",
+    "import": "import { LayerProvider } from \"@vibe/core\"",
     "subComponents": []
   },
   {
@@ -11006,7 +11066,7 @@
         }
       }
     },
-    "import": "import { Loader } from \"@vibe/loader\"",
+    "import": "import { Loader } from \"@vibe/core\"",
     "subComponents": []
   },
   {
@@ -12308,7 +12368,7 @@
       },
       "dialogPaddingSize": {
         "defaultValue": {
-          "value": "DialogContentContainer.sizes.SMALL"
+          "value": "DialogContentContainer.sizes.NONE"
         },
         "description": "The padding size inside the menu dialog.",
         "name": "dialogPaddingSize",
@@ -14217,6 +14277,151 @@
     "import": "import { Search } from \"@vibe/core\"",
     "subComponents": []
   },
+  {
+    "filePath": "src/components/SegmentedControl/SegmentedControl.tsx",
+    "aggregator": "core",
+    "symbols": [
+      "default as SegmentedControl",
+      "SegmentedControlProps",
+      "SegmentedControlOption",
+      "SegmentedControlSize"
+    ],
+    "displayName": "SegmentedControl",
+    "description": "",
+    "props": {
+      "options": {
+        "defaultValue": null,
+        "description": "The list of segment options.",
+        "name": "options",
+        "required": true,
+        "type": {
+          "name": "SegmentedControlOption[]"
+        }
+      },
+      "value": {
+        "defaultValue": null,
+        "description": "The currently selected segment value (controlled).",
+        "name": "value",
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "defaultValue": {
+        "defaultValue": null,
+        "description": "The default selected segment value (uncontrolled).",
+        "name": "defaultValue",
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "onChange": {
+        "defaultValue": null,
+        "description": "Callback fired when the selected segment changes.",
+        "name": "onChange",
+        "required": false,
+        "type": {
+          "name": "(value: string) => void"
+        }
+      },
+      "size": {
+        "defaultValue": {
+          "value": "medium"
+        },
+        "description": "The size of the segmented control.",
+        "name": "size",
+        "required": false,
+        "type": {
+          "name": "enum",
+          "raw": "SegmentedControlSize",
+          "value": [
+            {
+              "value": "\"xs\""
+            },
+            {
+              "value": "\"small\""
+            },
+            {
+              "value": "\"medium\""
+            },
+            {
+              "value": "\"large\""
+            }
+          ]
+        }
+      },
+      "disabled": {
+        "defaultValue": {
+          "value": "false"
+        },
+        "description": "If true, disables the entire segmented control.",
+        "name": "disabled",
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "fullWidth": {
+        "defaultValue": {
+          "value": "false"
+        },
+        "description": "If true, makes the segmented control take the full width of its container.",
+        "name": "fullWidth",
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "ariaLabel": {
+        "defaultValue": null,
+        "description": "Accessible label for the radiogroup.",
+        "name": "ariaLabel",
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "aria-labelledby": {
+        "defaultValue": null,
+        "description": "ID of the element that labels the radiogroup.",
+        "name": "aria-labelledby",
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "className": {
+        "defaultValue": null,
+        "description": "A CSS class name to apply to the component.",
+        "name": "className",
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "data-testid": {
+        "defaultValue": null,
+        "description": "A unique identifier for testing purposes.",
+        "name": "data-testid",
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "id": {
+        "defaultValue": null,
+        "description": "An HTML id attribute for the component.",
+        "name": "id",
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      }
+    },
+    "import": "import { SegmentedControl } from \"@vibe/core\"",
+    "subComponents": []
+  },
   {
     "filePath": "src/components/Skeleton/Skeleton.tsx",
     "aggregator": "core",
@@ -17143,6 +17348,26 @@
           "name": "any"
         }
       },
+      "iconPosition": {
+        "defaultValue": {
+          "value": "right"
+        },
+        "description": "Position of the primary icon inside the text field.",
+        "name": "iconPosition",
+        "required": false,
+        "type": {
+          "name": "enum",
+          "raw": "\"left\" | \"right\"",
+          "value": [
+            {
+              "value": "\"left\""
+            },
+            {
+              "value": "\"right\""
+            }
+          ]
+        }
+      },
       "secondaryIconName": {
         "defaultValue": null,
         "description": "The secondary icon displayed inside the text field.",
@@ -18470,6 +18695,17 @@
           "name": "string"
         }
       },
+      "inline": {
+        "defaultValue": {
+          "value": "false"
+        },
+        "description": "If true, renders the toast in place (for gallery previews) instead of fixed at the top.",
+        "name": "inline",
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
       "className": {
         "defaultValue": null,
         "description": "A CSS class name to apply to the component.",
@@ -18614,7 +18850,9 @@
         }
       },
       "color": {
-        "defaultValue": null,
+        "defaultValue": {
+          "value": "primary"
+        },
         "description": "The button's color",
         "name": "color",
         "required": false,
@@ -19790,7 +20028,7 @@
         }
       }
     },
-    "import": "import { Tooltip } from \"@vibe/tooltip\"",
+    "import": "import { Tooltip } from \"@vibe/core\"",
     "subComponents": [
       "TooltipConstants"
     ]

package/dist/mocked_classnames/components/Avatar/Avatar.d.ts

@@ -111,6 +111,7 @@ declare const _default: React.FC<AvatarProps> & {
         POSITIVE: import("../../utils/colors-vars-map").StateSelectedHoverColor.POSITIVE;
         NEGATIVE: import("../../utils/colors-vars-map").StateSelectedHoverColor.NEGATIVE;
         PRIMARY: import("../../utils/colors-vars-map").StateSelectedHoverColor.PRIMARY;
+        INFO: import("../../utils/colors-vars-map").StateSelectedHoverColor.INFO;
         NEUTRAL: import("../../utils/colors-vars-map").StateSelectedHoverColor.NEUTRAL;
         WARNING: import("../../utils/colors-vars-map").StateSelectedColor.WARNING;
         GRASS_GREEN: import("../../utils/colors-vars-map").ContentColorByName.GRASS_GREEN;
@@ -158,6 +159,7 @@ declare const _default: React.FC<AvatarProps> & {
         POSITIVE: import("../../utils/colors-vars-map").StateSelectedHoverColor.POSITIVE;
         NEGATIVE: import("../../utils/colors-vars-map").StateSelectedHoverColor.NEGATIVE;
         PRIMARY: import("../../utils/colors-vars-map").StateSelectedHoverColor.PRIMARY;
+        INFO: import("../../utils/colors-vars-map").StateSelectedHoverColor.INFO;
         NEUTRAL: import("../../utils/colors-vars-map").StateSelectedHoverColor.NEUTRAL;
         WARNING: import("../../utils/colors-vars-map").StateSelectedColor.WARNING;
         GRASS_GREEN: import("../../utils/colors-vars-map").ContentColorByName.GRASS_GREEN;

package/dist/mocked_classnames/components/Chips/Chips.d.ts

@@ -4,19 +4,38 @@ import { AvatarType as AvatarTypeEnum } from "../Avatar/AvatarConstants";
 import { type AvatarType } from "../Avatar";
 import { type ElementContent, type VibeComponentProps } from "../../types";
 import { type SubIcon } from "@vibe/icon";
+import { type ChipsVariant, type ChipsSize } from "./Chips.types";
 export interface ChipsProps extends VibeComponentProps {
     /**
      * The text or content displayed inside the chip.
      */
     label?: ElementContent;
+    /**
+     * Visual and behavioral variant of the chip.
+     * - `default` — standard chip (colors, optional remove / click)
+     * - `readOnly` — display only; no interaction
+     * - `filterable` — primary theme only; default / hover / pressed states
+     */
+    variant?: ChipsVariant;
     /**
      * If true, the chip is disabled.
      */
     disabled?: boolean;
     /**
-     * If true, the chip is read-only and cannot be deleted.
+     * If true, the chip is read-only and cannot be deleted or interacted with.
+     * Prefer `variant="readOnly"` for new usage.
      */
     readOnly?: boolean;
+    /**
+     * When `variant="filterable"`, shows the pressed (selected) state.
+     */
+    pressed?: boolean;
+    /**
+     * The size of the chip.
+     * - `medium` — default (24px height)
+     * - `small` — 20px height, 12px text
+     */
+    size?: ChipsSize;
     /**
      * A React element displayed on the right side.
      */
@@ -59,6 +78,7 @@ export interface ChipsProps extends VibeComponentProps {
     avatarClassName?: string;
     /**
      * The background color of the chip.
+     * Ignored when `variant="filterable"` (always primary).
      */
     color?: Exclude<ElementAllowedColor, "dark_indigo" | "blackish">;
     /**
@@ -115,6 +135,7 @@ declare const _default: React.ForwardRefExoticComponent<ChipsProps & React.RefAt
         POSITIVE: import("../../utils/colors-vars-map").StateSelectedHoverColor.POSITIVE;
         NEGATIVE: import("../../utils/colors-vars-map").StateSelectedHoverColor.NEGATIVE;
         PRIMARY: import("../../utils/colors-vars-map").StateSelectedHoverColor.PRIMARY;
+        INFO: import("../../utils/colors-vars-map").StateSelectedHoverColor.INFO;
         NEUTRAL: import("../../utils/colors-vars-map").StateSelectedHoverColor.NEUTRAL;
         WARNING: import("../../utils/colors-vars-map").StateSelectedColor.WARNING;
         GRASS_GREEN: import("../../utils/colors-vars-map").ContentColorByName.GRASS_GREEN;

package/dist/mocked_classnames/components/Chips/Chips.types.d.ts

@@ -0,0 +1,2 @@
+export type ChipsVariant = "default" | "readOnly" | "filterable";
+export type ChipsSize = "medium" | "small";

package/dist/mocked_classnames/components/Chips/index.d.ts

@@ -1 +1,2 @@
 export { default as Chips, type ChipsProps } from "./Chips";
+export type { ChipsVariant, ChipsSize } from "./Chips.types";

package/dist/mocked_classnames/components/SegmentedControl/SegmentedControl.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { type SegmentedControlProps } from "./SegmentedControl.types";
+declare const SegmentedControl: React.ForwardRefExoticComponent<SegmentedControlProps & React.RefAttributes<HTMLDivElement>>;
+export default SegmentedControl;

package/dist/mocked_classnames/components/SegmentedControl/SegmentedControl.types.d.ts

@@ -0,0 +1,48 @@
+import { type SubIcon } from "@vibe/icon";
+import { type VibeComponentProps } from "../../types";
+export type SegmentedControlSize = "xs" | "small" | "medium" | "large";
+export type SegmentedControlOption = {
+    value: string;
+    label: string;
+    disabled?: boolean;
+    icon?: SubIcon;
+    tooltip?: string;
+};
+export interface SegmentedControlProps extends VibeComponentProps {
+    /**
+     * The list of segment options.
+     */
+    options: SegmentedControlOption[];
+    /**
+     * The currently selected segment value (controlled).
+     */
+    value?: string;
+    /**
+     * The default selected segment value (uncontrolled).
+     */
+    defaultValue?: string;
+    /**
+     * Callback fired when the selected segment changes.
+     */
+    onChange?: (value: string) => void;
+    /**
+     * The size of the segmented control.
+     */
+    size?: SegmentedControlSize;
+    /**
+     * If true, disables the entire segmented control.
+     */
+    disabled?: boolean;
+    /**
+     * If true, makes the segmented control take the full width of its container.
+     */
+    fullWidth?: boolean;
+    /**
+     * Accessible label for the radiogroup.
+     */
+    ariaLabel?: string;
+    /**
+     * ID of the element that labels the radiogroup.
+     */
+    "aria-labelledby"?: string;
+}

package/dist/mocked_classnames/components/SegmentedControl/index.d.ts

@@ -0,0 +1,2 @@
+export { default as SegmentedControl } from "./SegmentedControl";
+export type { SegmentedControlProps, SegmentedControlOption, SegmentedControlSize } from "./SegmentedControl.types";

package/dist/mocked_classnames/components/TextField/TextField.d.ts

@@ -59,6 +59,10 @@ export interface TextFieldProps extends VibeComponentProps {
      * The primary icon displayed inside the text field.
      */
     iconName?: string | React.FunctionComponent | null;
+    /**
+     * Position of the primary icon inside the text field.
+     */
+    iconPosition?: "left" | "right";
     /**
      * The secondary icon displayed inside the text field.
      */

package/dist/mocked_classnames/components/Toast/Toast.d.ts

@@ -53,6 +53,10 @@ export interface ToastProps extends VibeComponentProps {
      * The aria-label for the close button.
      */
     closeButtonAriaLabel?: string;
+    /**
+     * If true, renders the toast in place (for gallery previews) instead of fixed at the top.
+     */
+    inline?: boolean;
 }
 declare const _default: React.FC<ToastProps> & {
     types: typeof ToastTypeEnum;

package/dist/mocked_classnames/components/index.d.ts

@@ -46,6 +46,7 @@ export * from "./MultiStepIndicator";
 export * from "./ProgressBars";
 export * from "./RadioButton";
 export * from "./Search";
+export * from "./SegmentedControl";
 export * from "./Skeleton";
 export * from "./Slider";
 export * from "./SplitButton";

package/dist/mocked_classnames/src/components/Accordion/Accordion/Accordion.module.scss.js

@@ -1,2 +1,2 @@
-var e={accordion:"accordion",accordionItemExpandCollapse:"accordionItemExpandCollapse",accordionItemExpandCollapseLast:"accordionItemExpandCollapseLast"};!function(e){const o="s_id-e9215f4fd1c6_3_88_4";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+o))return;const r=document.createElement("style");r.id=o,n.firstChild?n.insertBefore(r,n.firstChild):n.appendChild(r),r.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[o]=e)}(".accordion {\n  height: fit-content;\n  border: 1px solid var(--ui-border-color);\n  box-sizing: border-box;\n  border-radius: var(--border-radius-small);\n}\n\n.accordion .accordionItemExpandCollapse {\n  border-radius: 0;\n  border-top: none;\n  border-left: none;\n  border-right: none;\n  border-color: var(--ui-border-color);\n}\n\n.accordion .accordionItemExpandCollapseLast {\n  border-bottom: none;\n}");export{e as default};
+var e={accordion:"accordion",accordionItemExpandCollapse:"accordionItemExpandCollapse",accordionItemExpandCollapseLast:"accordionItemExpandCollapseLast"};!function(e){const o="s_id-e9215f4fd1c6_3_88_6";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+o))return;const r=document.createElement("style");r.id=o,n.firstChild?n.insertBefore(r,n.firstChild):n.appendChild(r),r.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[o]=e)}(".accordion {\n  height: fit-content;\n  border: 1px solid var(--ui-border-color);\n  box-sizing: border-box;\n  border-radius: var(--border-radius-small);\n}\n\n.accordion .accordionItemExpandCollapse {\n  border-radius: 0;\n  border-top: none;\n  border-left: none;\n  border-right: none;\n  border-color: var(--ui-border-color);\n}\n\n.accordion .accordionItemExpandCollapseLast {\n  border-bottom: none;\n}");export{e as default};
 //# sourceMappingURL=Accordion.module.scss.js.map