@bitrise/bitkit-v2 0.3.117 → 0.3.119

package/dist/theme/slot-recipes/RadioGroup.recipe.js

@@ -0,0 +1,93 @@
+import { radioGroupAnatomy as o } from "@chakra-ui/react/anatomy";
+import { defineSlotRecipe as e } from "@chakra-ui/react/styled-system";
+const i = e({
+  className: "radio-group",
+  slots: o.keys(),
+  base: {
+    root: {
+      display: "flex"
+    },
+    item: {
+      display: "inline-flex",
+      gap: "8",
+      alignItems: "flex-start",
+      justifyContent: "center"
+    },
+    itemControl: {
+      border: "1px solid",
+      borderColor: "border/regular",
+      backgroundColor: "background/primary",
+      borderRadius: "50%",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      focusVisibleRing: "outside",
+      "& > .dot": {
+        width: "12",
+        height: "12",
+        borderRadius: "50%",
+        backgroundColor: "icon/interactive"
+      },
+      _hover: {
+        borderColor: "border/hover"
+      },
+      _disabled: {
+        backgroundColor: "background/disabled",
+        borderColor: "border/disabled",
+        "& > .dot": {
+          backgroundColor: "icon/disabled"
+        }
+      }
+    },
+    itemText: {
+      color: "input/text/inputValue",
+      _disabled: {
+        color: "text/disabled"
+      }
+    }
+  },
+  variants: {
+    orientation: {
+      horizontal: {
+        root: {
+          flexDirection: "row",
+          gap: "24"
+        }
+      },
+      vertical: {
+        root: {
+          alignItems: "flex-start",
+          flexDirection: "column",
+          gap: "12"
+        }
+      }
+    },
+    size: {
+      md: {
+        itemControl: {
+          width: "20",
+          height: "20"
+        },
+        itemText: {
+          textStyle: "body/md/regular"
+        }
+      },
+      lg: {
+        itemControl: {
+          width: "24",
+          height: "24"
+        },
+        itemText: {
+          textStyle: "body/lg/regular"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    orientation: "horizontal",
+    size: "lg"
+  }
+});
+export {
+  i as default
+};

package/dist/theme/slot-recipes/Select.recipe.d.ts

@@ -1,4 +1,4 @@
-export declare const selectSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "label" | "trigger" | "positioner" | "root" | "list" | "control" | "indicator" | "valueText" | "clearTrigger" | "item" | "itemText" | "itemIndicator" | "itemGroup" | "itemGroupLabel" | "indicatorGroup" | "searchInputGroup" | "searchInput", {
+export declare const selectSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "label" | "trigger" | "positioner" | "root" | "indicator" | "list" | "control" | "valueText" | "item" | "itemText" | "itemIndicator" | "clearTrigger" | "itemGroup" | "itemGroupLabel" | "indicatorGroup" | "searchInputGroup" | "searchInput", {
     size: {
         md: {
             item: {

package/dist/theme/slot-recipes/Switch.recipe.d.ts

@@ -1,4 +1,4 @@
-declare const switchSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "root" | "control" | "indicator" | "thumb", {
+declare const switchSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "root" | "indicator" | "control" | "thumb", {
     size: {
         sm: {
             root: {

package/dist/theme/slot-recipes/Tabs.recipe.d.ts

@@ -1,4 +1,4 @@
-declare const tabsSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "trigger" | "root" | "list" | "indicator" | "contentGroup", {
+declare const tabsSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "trigger" | "root" | "indicator" | "list" | "contentGroup", {
     variant: {
         line: {
             list: {

package/dist/theme/slot-recipes/index.d.ts

@@ -184,7 +184,7 @@ declare const slotRecipes: {
             rounded: {};
         };
     }>;
-    card: import('@chakra-ui/react').SlotRecipeDefinition<"body" | "footer" | "header" | "title" | "root" | "description", {
+    card: import('@chakra-ui/react').SlotRecipeDefinition<"body" | "footer" | "header" | "title" | "description" | "root", {
         elevation: {
             true: {
                 root: {
@@ -217,8 +217,37 @@ declare const slotRecipes: {
             };
         };
     }>;
-    checkbox: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "root" | "group" | "control" | "indicator", import('@chakra-ui/react').SlotRecipeVariantRecord<"label" | "root" | "group" | "control" | "indicator">>;
-    emptyState: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "title" | "root" | "description" | "indicator", {
+    checkbox: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "root" | "indicator" | "group" | "control", {
+        size: {
+            md: {
+                control: {
+                    width: "20";
+                    height: "20";
+                    '& > svg': {
+                        width: "20";
+                        height: "20";
+                    };
+                };
+                label: {
+                    textStyle: "body/md/regular";
+                };
+            };
+            lg: {
+                control: {
+                    width: "24";
+                    height: "24";
+                    '& > svg': {
+                        width: "24";
+                        height: "24";
+                    };
+                };
+                label: {
+                    textStyle: "body/lg/regular";
+                };
+            };
+        };
+    }>;
+    emptyState: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "title" | "description" | "root" | "indicator", {
         colorScheme: {
             white: {
                 root: {
@@ -232,7 +261,7 @@ declare const slotRecipes: {
             };
         };
     }>;
-    expandableCard: import('@chakra-ui/react').SlotRecipeDefinition<"body" | "footer" | "header" | "title" | "icon" | "root" | "description" | "collapsible" | "secdText" | "suffix", {
+    expandableCard: import('@chakra-ui/react').SlotRecipeDefinition<"body" | "footer" | "header" | "title" | "icon" | "description" | "root" | "collapsible" | "secdText" | "suffix", {
         size: {
             md: {
                 header: {
@@ -275,104 +304,67 @@ declare const slotRecipes: {
             };
         };
     }>;
-    alert: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "title" | "root" | "description" | "indicator" | "actionable" | "contentBox", {
-        dismissible: {
-            true: {
-                actionable: {
-                    mr: "4";
-                };
-            };
-        };
+    alert: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "title" | "description" | "root" | "indicator", {
         variant: {
             ai: {
                 root: {
-                    backgroundColor: "status/ai/bg";
-                    borderColor: "status/ai/border";
+                    border: "1px solid transparent";
+                    background: "{colors.status.ai.bg} padding-box, {colors.status.ai.border} border-box";
+                    color: "status/ai/text";
                 };
                 indicator: {
                     color: "status/ai/icon";
                 };
-                title: {
-                    color: "status/ai/text";
-                };
-                description: {
-                    color: "status/ai/text";
-                };
             };
             critical: {
                 root: {
                     backgroundColor: "status/critical/bg";
                     borderColor: "status/critical/border";
+                    color: "status/critical/text";
                 };
                 indicator: {
                     color: "status/critical/icon";
                 };
-                title: {
-                    color: "status/critical/text";
-                };
-                description: {
-                    color: "status/critical/text";
-                };
             };
             info: {
                 root: {
                     backgroundColor: "status/info/bg";
                     borderColor: "status/info/border";
+                    color: "status/info/text";
                 };
                 indicator: {
                     color: "status/info/icon";
                 };
-                title: {
-                    color: "status/info/text";
-                };
-                description: {
-                    color: "status/info/text";
-                };
             };
             progress: {
                 root: {
                     backgroundColor: "status/progress/bg";
                     borderColor: "status/progress/border";
+                    color: "status/progress/text";
                 };
                 indicator: {
                     color: "status/progress/icon";
                 };
-                title: {
-                    color: "status/progress/text";
-                };
-                description: {
-                    color: "status/progress/text";
-                };
             };
             success: {
                 root: {
                     backgroundColor: "status/success/bg";
                     borderColor: "status/success/border";
+                    color: "status/success/text";
                 };
                 indicator: {
                     color: "status/success/icon";
                 };
-                title: {
-                    color: "status/success/text";
-                };
-                description: {
-                    color: "status/success/text";
-                };
             };
             warning: {
                 root: {
                     backgroundColor: "status/warning/bg";
                     borderColor: "status/warning/border";
+                    color: "status/warning/text";
                 };
                 indicator: {
                     color: "status/warning/icon";
                 };
-                title: {
-                    color: "status/warning/text";
-                };
-                description: {
-                    color: "status/warning/text";
-                };
             };
         };
     }>;
@@ -392,7 +384,44 @@ declare const slotRecipes: {
             };
         };
     }>;
-    select: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "label" | "trigger" | "positioner" | "root" | "list" | "control" | "indicator" | "valueText" | "clearTrigger" | "item" | "itemText" | "itemIndicator" | "itemGroup" | "itemGroupLabel" | "indicatorGroup" | "searchInputGroup" | "searchInput", {
+    radioGroup: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "root" | "indicator" | "item" | "itemText" | "itemControl" | "itemAddon" | "itemIndicator", {
+        orientation: {
+            horizontal: {
+                root: {
+                    flexDirection: "row";
+                    gap: "24";
+                };
+            };
+            vertical: {
+                root: {
+                    alignItems: "flex-start";
+                    flexDirection: "column";
+                    gap: "12";
+                };
+            };
+        };
+        size: {
+            md: {
+                itemControl: {
+                    width: "20";
+                    height: "20";
+                };
+                itemText: {
+                    textStyle: "body/md/regular";
+                };
+            };
+            lg: {
+                itemControl: {
+                    width: "24";
+                    height: "24";
+                };
+                itemText: {
+                    textStyle: "body/lg/regular";
+                };
+            };
+        };
+    }>;
+    select: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "label" | "trigger" | "positioner" | "root" | "indicator" | "list" | "control" | "valueText" | "item" | "itemText" | "itemIndicator" | "clearTrigger" | "itemGroup" | "itemGroupLabel" | "indicatorGroup" | "searchInputGroup" | "searchInput", {
         size: {
             md: {
                 item: {
@@ -424,7 +453,7 @@ declare const slotRecipes: {
             lg: {};
         };
     }>;
-    switch: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "root" | "control" | "indicator" | "thumb", {
+    switch: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "root" | "indicator" | "control" | "thumb", {
         size: {
             sm: {
                 root: {
@@ -454,7 +483,7 @@ declare const slotRecipes: {
             };
         };
     }>;
-    tabs: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "trigger" | "root" | "list" | "indicator" | "contentGroup", {
+    tabs: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "trigger" | "root" | "indicator" | "list" | "contentGroup", {
         variant: {
             line: {
                 list: {

package/dist/theme/slot-recipes/index.js

@@ -1,24 +1,25 @@
 import t from "./ActionBar.recipe.js";
 import e from "./Alert.recipe.js";
 import o from "./Avatar.recipe.js";
-import i from "./Card.recipe.js";
-import r from "./Checkbox.recipe.js";
+import r from "./Card.recipe.js";
+import i from "./Checkbox.recipe.js";
 import p from "./EmptyState.recipe.js";
 import m from "./ExpandableCard.recipe.js";
 import c from "./Field.recipe.js";
 import l from "./Fieldset.recipe.js";
 import a from "./NativeSelect.recipe.js";
 import { numberInputSlotRecipe as f } from "./NumberInput.recipe.js";
-import { selectSlotRecipe as S } from "./Select.recipe.js";
-import R from "./Switch.recipe.js";
+import S from "./RadioGroup.recipe.js";
+import { selectSlotRecipe as R } from "./Select.recipe.js";
+import d from "./Switch.recipe.js";
 import s from "./Tabs.recipe.js";
-import d from "./Tag.recipe.js";
-import n from "./Tooltip.recipe.js";
-const D = {
+import n from "./Tag.recipe.js";
+import b from "./Tooltip.recipe.js";
+const E = {
   actionBar: t,
   avatar: o,
-  card: i,
-  checkbox: r,
+  card: r,
+  checkbox: i,
   emptyState: p,
   expandableCard: m,
   field: c,
@@ -26,12 +27,13 @@ const D = {
   nativeSelect: a,
   alert: e,
   numberInput: f,
-  select: S,
-  switch: R,
+  radioGroup: S,
+  select: R,
+  switch: d,
   tabs: s,
-  tag: d,
-  tooltip: n
+  tag: n,
+  tooltip: b
 };
 export {
-  D as default
+  E as default
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit-v2",
   "private": false,
-  "version": "0.3.117",
+  "version": "0.3.119",
   "description": "Bitrise Design System Components built with Chakra UI V3",
   "keywords": [
     "react",
@@ -60,8 +60,8 @@
     "@figma-export/output-components-as-svg": "^6.2.4",
     "@figma-export/transform-svg-with-svgo": "^6.2.4",
     "@google-cloud/storage": "^7.19.0",
-    "@storybook/addon-docs": "10.2.10",
-    "@storybook/react-vite": "10.2.10",
+    "@storybook/addon-docs": "10.2.11",
+    "@storybook/react-vite": "10.2.11",
     "@svgr/plugin-jsx": "^8.1.0",
     "@types/node": "^24.10.13",
     "@types/react": "^19.2.14",
@@ -72,7 +72,7 @@
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "release-it": "^19.2.4",
-    "storybook": "10.2.10",
+    "storybook": "10.2.11",
     "tsx": "^4.21.0",
     "typescript": "^5.9.3",
     "vite": "^7.3.1",

package/dist/components/BitkitNotification/BitkitNotification.d.ts

@@ -1,18 +0,0 @@
-import { AlertRootProps } from '@chakra-ui/react/alert';
-export type NotificationVariants = 'ai' | 'critical' | 'info' | 'progress' | 'success' | 'warning';
-export type ActionProps = {
-    label: string;
-    href?: string;
-    target?: string;
-    onClick?: () => void;
-};
-export interface BitkitNotificationProps extends AlertRootProps {
-    actionable?: ActionProps;
-    dismissable?: boolean;
-    messageText: string;
-    onClose?: () => void;
-    titleText?: string;
-    variant: NotificationVariants;
-}
-declare const BitkitNotification: (props: BitkitNotificationProps) => import("react/jsx-runtime").JSX.Element;
-export default BitkitNotification;

package/dist/components/BitkitNotification/BitkitNotification.js

@@ -1,51 +0,0 @@
-import { jsx as o, jsxs as l } from "react/jsx-runtime";
-import { Alert as e } from "@chakra-ui/react/alert";
-import { Box as d } from "@chakra-ui/react/box";
-import { Spinner as h } from "@chakra-ui/react/spinner";
-import { useSlotRecipe as u } from "@chakra-ui/react/styled-system";
-import C from "../../icons/24x24/IconCheck24.js";
-import g from "../../icons/24x24/IconErrorCircleFilled24.js";
-import k from "../../icons/24x24/IconInfoCircle24.js";
-import B from "../../icons/24x24/IconSparkleFilled24.js";
-import I from "../../icons/24x24/IconWarning24.js";
-import x from "../BitkitCloseButton/BitkitCloseButton.js";
-import b from "../BitkitColorButton/BitkitColorButton.js";
-const s = {
-  ai: "turquoise",
-  critical: "red",
-  info: "blue",
-  progress: "purple",
-  success: "green",
-  warning: "yellow"
-}, S = {
-  ai: /* @__PURE__ */ o(B, {}),
-  critical: /* @__PURE__ */ o(g, {}),
-  info: /* @__PURE__ */ o(k, {}),
-  progress: /* @__PURE__ */ o(h, {}),
-  success: /* @__PURE__ */ o(C, {}),
-  warning: /* @__PURE__ */ o(I, {})
-}, v = (a) => {
-  const { actionable: r, dismissible: n, messageText: m, onClose: p, titleText: c, variant: t, ...f } = a, i = u({ key: "alert" })({ variant: t, dismissible: n });
-  return /* @__PURE__ */ o(e.Root, { variant: t, ...f, children: /* @__PURE__ */ l(e.Content, { children: [
-    /* @__PURE__ */ o(e.Indicator, { css: i.indicator, children: S[t] }),
-    /* @__PURE__ */ l(d, { css: i.contentBox, children: [
-      c && /* @__PURE__ */ o(e.Title, { children: c }),
-      /* @__PURE__ */ o(e.Description, { children: m })
-    ] }),
-    !!r && /* @__PURE__ */ o(
-      b,
-      {
-        as: r.href ? "a" : "button",
-        colorPalette: s[t],
-        css: i.actionable,
-        ...r.href && { href: r.href, target: r.target },
-        onClick: r.onClick,
-        children: r.label
-      }
-    ),
-    !!n && /* @__PURE__ */ o(x, { size: "sm", onClick: p, colorPalette: s[t] })
-  ] }) });
-};
-export {
-  v as default
-};