@bitrise/bitkit-v2 0.3.118 → 0.3.119

package/dist/theme/recipes/Badge.recipe.d.ts

@@ -1,4 +1,12 @@
 declare const badgeRecipe: import('@chakra-ui/react').RecipeDefinition<{
+    size: {
+        xxs: {
+            paddingBlock: "2";
+        };
+        xs: {
+            paddingBlock: "4";
+        };
+    };
     variant: {
         subtle: {
             color: "colorPalette.strong";

package/dist/theme/recipes/Badge.recipe.js

@@ -5,14 +5,23 @@ const t = e({
     colorPalette: "neutral",
     display: "inline-flex",
     alignItems: "center",
+    justifyContent: "center",
     gap: "4",
-    padding: "4",
+    paddingInline: "4",
     borderRadius: "4",
     textStyle: "comp/badge/sm",
     color: "colorPalette.strong",
     background: "colorPalette.subtle"
   },
   variants: {
+    size: {
+      xxs: {
+        paddingBlock: "2"
+      },
+      xs: {
+        paddingBlock: "4"
+      }
+    },
     variant: {
       subtle: {
         color: "colorPalette.strong",
@@ -33,7 +42,11 @@ const t = e({
         color: "text/primary"
       }
     }
-  ]
+  ],
+  defaultVariants: {
+    variant: "subtle",
+    size: "xs"
+  }
 });
 export {
   t as default

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

@@ -1,5 +1,13 @@
 declare const recipes: {
     badge: import('@chakra-ui/react').RecipeDefinition<{
+        size: {
+            xxs: {
+                paddingBlock: "2";
+            };
+            xs: {
+                paddingBlock: "4";
+            };
+        };
         variant: {
             subtle: {
                 color: "colorPalette.strong";

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

@@ -1,2 +1,31 @@
-declare const checkboxSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "root" | "indicator" | "group" | "control", import('@chakra-ui/react').SlotRecipeVariantRecord<"label" | "root" | "indicator" | "group" | "control">>;
+declare const checkboxSlotRecipe: 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";
+            };
+        };
+    };
+}>;
 export default checkboxSlotRecipe;

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

@@ -7,11 +7,10 @@ const l = e({
     root: {
       display: "inline-flex",
       alignItems: "flex-start",
-      gap: "8px"
+      gap: "8px",
+      width: "fit-content"
     },
     control: {
-      width: "24",
-      height: "24",
       position: "relative",
       borderRadius: "4",
       backgroundColor: "background/primary",
@@ -73,7 +72,6 @@ const l = e({
       }
     },
     label: {
-      textStyle: "body/lg/regular",
       userSelect: "none",
       color: "input/text/inputValue",
       _disabled: {
@@ -83,6 +81,39 @@ const l = e({
         color: "text/disabled"
       }
     }
+  },
+  variants: {
+    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"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    size: "lg"
   }
 });
 export {

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

@@ -4,11 +4,18 @@ const r = t({
   className: "fieldset",
   slots: e.keys(),
   base: {
+    errorText: {
+      display: "block",
+      marginBlockStart: "12",
+      textStyle: "comp/input/helperText",
+      color: "input/text/error"
+    },
     legend: {
       textStyle: "body/md/semibold",
       color: "text/primary"
     },
     helperText: {
+      display: "block",
       marginBlockStart: "4",
       textStyle: "comp/input/helperText",
       color: "text/helper"

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

@@ -0,0 +1,38 @@
+declare const radioGroupSlotRecipe: 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";
+            };
+        };
+    };
+}>;
+export default radioGroupSlotRecipe;

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" | "indicator" | "list" | "control" | "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/index.d.ts

@@ -217,7 +217,36 @@ declare const slotRecipes: {
             };
         };
     }>;
-    checkbox: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "root" | "indicator" | "group" | "control", import('@chakra-ui/react').SlotRecipeVariantRecord<"label" | "root" | "indicator" | "group" | "control">>;
+    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: {
@@ -355,7 +384,44 @@ declare const slotRecipes: {
             };
         };
     }>;
-    select: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "label" | "trigger" | "positioner" | "root" | "indicator" | "list" | "control" | "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: {

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.118",
+  "version": "0.3.119",
   "description": "Bitrise Design System Components built with Chakra UI V3",
   "keywords": [
     "react",