@bitrise/bitkit-v2 0.3.147 → 0.3.148

package/dist/components/BitkitSegmentedControl/BitkitSegmentedControl.d.ts

@@ -0,0 +1,20 @@
+import { SegmentGroup } from '@chakra-ui/react/segment-group';
+import { ReactNode } from 'react';
+import { BitkitIconComponent } from '../../icons';
+export type BitkitSegmentedControlProps = Omit<SegmentGroup.RootProps, 'disabled'> & {
+    children: ReactNode;
+    state?: 'disabled';
+};
+export interface BitkitSegmentedControlItemProps {
+    children: string;
+    disabled?: boolean;
+    icon?: BitkitIconComponent;
+    value: string;
+}
+declare const _default: import('react').ForwardRefExoticComponent<Omit<SegmentGroup.RootProps, "disabled"> & {
+    children: ReactNode;
+    state?: "disabled";
+} & import('react').RefAttributes<HTMLDivElement>> & {
+    Item: import('react').ForwardRefExoticComponent<BitkitSegmentedControlItemProps & import('react').RefAttributes<HTMLLabelElement>>;
+};
+export default _default;

package/dist/components/BitkitSegmentedControl/BitkitSegmentedControl.js

@@ -0,0 +1,35 @@
+import { jsx as t, jsxs as d } from "react/jsx-runtime";
+import { createContext as S } from "@chakra-ui/react";
+import { SegmentGroup as o } from "@chakra-ui/react/segment-group";
+import { forwardRef as s } from "react";
+const [I, p] = S({
+  name: "SegmentedControlContext",
+  hookName: "useSegmentedControlContext",
+  providerName: "<BitkitSegmentedControl />"
+}), l = s((n, i) => {
+  const { children: r, state: m, ...e } = n;
+  return /* @__PURE__ */ t(I, { value: { size: e.size }, children: /* @__PURE__ */ d(o.Root, { ref: i, disabled: m === "disabled", ...e, children: [
+    /* @__PURE__ */ t(o.Indicator, {}),
+    r
+  ] }) });
+});
+l.displayName = "BitkitSegmentedControl";
+const u = {
+  lg: "24",
+  md: "16",
+  sm: "16"
+}, a = s((n, i) => {
+  const { children: r, disabled: m, icon: e, value: c } = n, { size: C = "sm" } = p(), g = u[C] ?? "16";
+  return /* @__PURE__ */ d(o.Item, { ref: i, disabled: m, value: c, children: [
+    !!e && /* @__PURE__ */ t(e, { size: g }),
+    /* @__PURE__ */ t(o.ItemText, { children: r }),
+    /* @__PURE__ */ t(o.ItemHiddenInput, {})
+  ] });
+});
+a.displayName = "BitkitSegmentedControlItem";
+const B = Object.assign(l, {
+  Item: a
+});
+export {
+  B as default
+};

package/dist/components/index.d.ts

@@ -23,6 +23,7 @@ export { default as BitkitNativeSelect, type BitkitNativeSelectProps } from './B
 export { default as BitkitNumberInput, type BitkitNumberInputProps } from './BitkitNumberInput/BitkitNumberInput';
 export { default as BitkitRadio, type BitkitRadioProps } from './BitkitRadio/BitkitRadio';
 export { default as BitkitRadioGroup, type BitkitRadioGroupProps } from './BitkitRadioGroup/BitkitRadioGroup';
+export { default as BitkitSegmentedControl, type BitkitSegmentedControlItemProps, type BitkitSegmentedControlProps, } from './BitkitSegmentedControl/BitkitSegmentedControl';
 export { default as BitkitSelect, type BitkitSelectProps } from './BitkitSelect/BitkitSelect';
 export { default as BitkitSelectMenu, type BitkitSelectMenuProps } from './BitkitSelectMenu/BitkitSelectMenu';
 export { default as BitkitTabs } from './BitkitTabs/BitkitTabs';

package/dist/main.js

@@ -302,6 +302,7 @@ import { default as pu } from "./icons/IconWorkflowFlow.js";
 import { default as mu } from "./icons/IconXTwitter.js";
 import { default as Iu } from "./icons/IconXamarin.js";
 import { default as Cu } from "./icons/IconXcode.js";
+import { default as Bu } from "./components/BitkitSegmentedControl/BitkitSegmentedControl.js";
 export {
   s as BitkitAccordion,
   u as BitkitActionBar,
@@ -329,6 +330,7 @@ export {
   a as BitkitProvider,
   oo as BitkitRadio,
   to as BitkitRadioGroup,
+  Bu as BitkitSegmentedControl,
   ao as BitkitSelect,
   lo as BitkitSelectMenu,
   so as BitkitTabs,

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

@@ -0,0 +1,32 @@
+declare const segmentGroupSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "root" | "item" | "indicator" | "itemText" | "itemControl", {
+    fullWidth: {
+        true: {
+            root: {
+                display: "flex";
+                width: "100%";
+            };
+            item: {
+                flex: "1";
+            };
+        };
+    };
+    size: {
+        lg: {
+            item: {
+                paddingBlock: "12";
+                textStyle: "body/lg/regular";
+            };
+        };
+        md: {
+            item: {
+                paddingBlock: "8";
+            };
+        };
+        sm: {
+            item: {
+                paddingBlock: "6";
+            };
+        };
+    };
+}>;
+export default segmentGroupSlotRecipe;

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

@@ -0,0 +1,138 @@
+import { segmentGroupAnatomy as o } from "@chakra-ui/react/anatomy";
+import { defineSlotRecipe as e } from "@chakra-ui/react/styled-system";
+const a = e({
+  slots: o.keys(),
+  className: "segment-group",
+  base: {
+    root: {
+      alignItems: "center",
+      backgroundColor: "background/secondary",
+      borderColor: "border/minimal",
+      borderRadius: "4",
+      borderStyle: "solid",
+      borderWidth: "1px",
+      display: "inline-flex",
+      gap: "1",
+      isolation: "isolate",
+      position: "relative"
+    },
+    // Zag.js positions the indicator via inline CSS variables (--width, --height, --top, --left).
+    // We must reference them here because our custom recipe replaces the Chakra default entirely.
+    indicator: {
+      backgroundColor: "background/primary",
+      borderRadius: "4",
+      boxShadow: "small",
+      height: "var(--height)",
+      left: "var(--left)",
+      outline: "1px solid",
+      outlineColor: "border/regular",
+      position: "absolute",
+      top: "var(--top)",
+      width: "var(--width)",
+      zIndex: -1
+    },
+    item: {
+      alignItems: "center",
+      borderRadius: "4",
+      color: "text/secondary",
+      cursor: "pointer",
+      _icon: {
+        color: "icon/secondary"
+      },
+      display: "flex",
+      gap: "4",
+      justifyContent: "center",
+      paddingInline: "12",
+      position: "relative",
+      textStyle: "body/md/regular",
+      // Vertical separator between items
+      _before: {
+        backgroundColor: "border/minimal",
+        content: '""',
+        insetBlock: "8",
+        insetInlineStart: "-1px",
+        position: "absolute",
+        width: "1"
+      },
+      // Hide separator on first item, and on both sides of the checked item
+      "& + &[data-state=checked], &[data-state=checked] + &, &:first-of-type": {
+        _before: { opacity: "0" }
+      },
+      // Focus ring on item when its hidden input is focused (same as Chakra default)
+      "&:has(input:focus-visible)": {
+        focusRing: "outside"
+      },
+      _hover: {
+        backgroundColor: "background/hover",
+        color: "text/primary",
+        _active: {
+          backgroundColor: "background/active"
+        }
+      },
+      _active: {
+        backgroundColor: "background/active",
+        color: "text/primary"
+      },
+      _checked: {
+        backgroundColor: "transparent",
+        color: "text/primary",
+        _active: {
+          backgroundColor: "transparent"
+        },
+        _hover: {
+          backgroundColor: "transparent",
+          _active: {
+            backgroundColor: "transparent"
+          }
+        }
+      },
+      _disabled: {
+        color: "text/disabled",
+        cursor: "not-allowed",
+        _hover: {
+          backgroundColor: "transparent"
+        }
+      }
+    },
+    itemText: {
+      paddingInline: "4"
+    }
+  },
+  variants: {
+    fullWidth: {
+      true: {
+        root: {
+          display: "flex",
+          width: "100%"
+        },
+        item: {
+          flex: "1"
+        }
+      }
+    },
+    size: {
+      lg: {
+        item: {
+          paddingBlock: "12",
+          textStyle: "body/lg/regular"
+        }
+      },
+      md: {
+        item: {
+          paddingBlock: "8"
+        }
+      },
+      sm: {
+        item: {
+          paddingBlock: "6"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    size: "sm"
+  }
+});
+export {
+  a as default
+};

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

@@ -497,6 +497,37 @@ declare const slotRecipes: {
             };
         };
     }>;
+    segmentGroup: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "root" | "item" | "indicator" | "itemText" | "itemControl", {
+        fullWidth: {
+            true: {
+                root: {
+                    display: "flex";
+                    width: "100%";
+                };
+                item: {
+                    flex: "1";
+                };
+            };
+        };
+        size: {
+            lg: {
+                item: {
+                    paddingBlock: "12";
+                    textStyle: "body/lg/regular";
+                };
+            };
+            md: {
+                item: {
+                    paddingBlock: "8";
+                };
+            };
+            sm: {
+                item: {
+                    paddingBlock: "6";
+                };
+            };
+        };
+    }>;
     select: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "label" | "root" | "item" | "itemIndicator" | "trigger" | "positioner" | "indicator" | "list" | "clearTrigger" | "control" | "valueText" | "itemText" | "itemGroup" | "itemGroupLabel" | "indicatorGroup" | "searchInputGroup" | "searchInput" | "createItemContainer" | "createItem", {
         size: {
             lg: Record<string, import('@chakra-ui/react').SystemStyleObject>;

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

@@ -16,13 +16,14 @@ import b from "./Menu.recipe.js";
 import n from "./NativeSelect.recipe.js";
 import s from "./NumberInput.recipe.js";
 import u from "./RadioGroup.recipe.js";
-import { selectSlotRecipe as x } from "./Select.recipe.js";
-import k from "./Switch.recipe.js";
+import x from "./SegmentGroup.recipe.js";
+import { selectSlotRecipe as k } from "./Select.recipe.js";
+import g from "./Switch.recipe.js";
 import h from "./Table.recipe.js";
 import v from "./Tabs.recipe.js";
-import P from "./Tag.recipe.js";
-import g from "./Tooltip.recipe.js";
-const W = {
+import G from "./Tag.recipe.js";
+import P from "./Tooltip.recipe.js";
+const Y = {
   actionBar: o,
   avatar: r,
   breadcrumb: i,
@@ -39,15 +40,16 @@ const W = {
   alert: t,
   numberInput: s,
   radioGroup: u,
-  select: x,
-  switch: k,
+  segmentGroup: x,
+  select: k,
+  switch: g,
   table: h,
   tabs: v,
-  tag: P,
-  tooltip: g,
+  tag: G,
+  tooltip: P,
   accordion: e,
   menu: b
 };
 export {
-  W as default
+  Y as default
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit-v2",
   "private": false,
-  "version": "0.3.147",
+  "version": "0.3.148",
   "description": "Bitrise Design System Components built with Chakra UI V3",
   "keywords": [
     "react",