@bitrise/bitkit-v2 0.3.341 → 0.3.342

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/components/BitkitRadio/BitkitRadio.js +3 -2
  2. package/dist/components/BitkitRadio/BitkitRadio.js.map +1 -1
  3. package/dist/theme/slot-recipes/RadioGroup.recipe.d.ts +9 -1
  4. package/dist/theme/slot-recipes/RadioGroup.recipe.js +10 -1
  5. package/dist/theme/slot-recipes/RadioGroup.recipe.js.map +1 -1
  6. package/dist/theme/slot-recipes/index.d.ts +9 -1
  7. package/package.json +1 -1
package/dist/components/BitkitRadio/BitkitRadio.js CHANGED
@@ -3,10 +3,11 @@ import { forwardRef } from "react";
3
3
  import { jsx, jsxs } from "react/jsx-runtime";
4
4
  import { Text } from "@chakra-ui/react/text";
5
5
  import { Skeleton } from "@chakra-ui/react/skeleton";
6
- import { RadioGroup } from "@chakra-ui/react/radio-group";
6
+ import { RadioGroup, useRadioGroupStyles } from "@chakra-ui/react/radio-group";
7
7
  //#region lib/components/BitkitRadio/BitkitRadio.tsx
8
8
  var BitkitRadio = forwardRef((props, ref) => {
9
9
  const { badge, helperText, inputProps, labelText, state, ...rest } = props;
10
+ const styles = useRadioGroupStyles();
10
11
  return /* @__PURE__ */ jsxs(RadioGroup.Item, {
11
12
  disabled: state === "disabled",
12
13
  ...rest,
@@ -24,7 +25,7 @@ var BitkitRadio = forwardRef((props, ref) => {
24
25
  loading: state === "skeleton",
25
26
  children: /* @__PURE__ */ jsx(BitkitBadge, {
26
27
  colorVariant: badge === "on" ? "green" : "neutral",
27
- width: "40",
28
+ css: styles.badge,
28
29
  children: badge
29
30
  })
30
31
  }),
package/dist/components/BitkitRadio/BitkitRadio.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"BitkitRadio.js","names":[],"sources":["../../../lib/components/BitkitRadio/BitkitRadio.tsx"],"sourcesContent":["import { RadioGroup } from '@chakra-ui/react/radio-group';\nimport { Skeleton } from '@chakra-ui/react/skeleton';\nimport { Text } from '@chakra-ui/react/text';\nimport { forwardRef, type InputHTMLAttributes, type ReactNode } from 'react';\n\nimport BitkitBadge from '../BitkitBadge/BitkitBadge';\n\n/**\n * Passthrough attributes for the radio `<input>`. The RadioGroup machine owns the behavioral / state\n * attributes (`checked`, `value`, `name`, `type`, `disabled`, `onChange`, …), so they're excluded —\n * setting them here would let the input drift out of sync with its `RadioGroup.Item`. Keep it to\n * things like `data-testid`.\n */\ntype RadioInputProps = Omit<\n InputHTMLAttributes<HTMLInputElement>,\n 'checked' | 'defaultChecked' | 'defaultValue' | 'disabled' | 'name' | 'onChange' | 'type' | 'value'\n>;\n\nexport type BitkitRadioProps = {\n badge?: 'off' | 'on';\n helperText?: ReactNode;\n inputProps?: RadioInputProps;\n labelText: ReactNode;\n state?: 'disabled' | 'skeleton';\n} & Omit<RadioGroup.ItemProps, 'disabled'>;\n\nconst BitkitRadio = forwardRef<HTMLInputElement, BitkitRadioProps>((props, ref) => {\n const { badge, helperText, inputProps, labelText, state, ...rest } = props;\n\n return (\n <RadioGroup.Item disabled={state === 'disabled'} {...rest}>\n <RadioGroup.ItemHiddenInput ref={ref} {...inputProps} />\n <Skeleton borderRadius=\"50%\" loading={state === 'skeleton'}>\n <RadioGroup.ItemIndicator />\n </Skeleton>\n {!!badge && (\n <Skeleton loading={state === 'skeleton'}>\n <BitkitBadge colorVariant={badge === 'on' ? 'green' : 'neutral'} width=\"40\">\n {badge}\n </BitkitBadge>\n </Skeleton>\n )}\n <Skeleton loading={state === 'skeleton'}>\n <RadioGroup.ItemText as=\"div\">\n {labelText}\n {!!helperText && (\n <Text color={state === 'disabled' ? 'text/disabled' : 'text/helper'} textStyle=\"comp/input/helperText\">\n {helperText}\n </Text>\n )}\n </RadioGroup.ItemText>\n </Skeleton>\n </RadioGroup.Item>\n );\n});\n\nBitkitRadio.displayName = 'BitkitRadio';\n\nexport default BitkitRadio;\n"],"mappings":";;;;;;;AA0BA,IAAM,cAAc,YAAgD,OAAO,QAAQ;CACjF,MAAM,EAAE,OAAO,YAAY,YAAY,WAAW,OAAO,GAAG,SAAS;CAErE,OACE,qBAAC,WAAW,MAAZ;EAAiB,UAAU,UAAU;EAAY,GAAI;EAArD,UAAA;GACE,oBAAC,WAAW,iBAAZ;IAAiC;IAAK,GAAI;GAAa,CAAA;GACvD,oBAAC,UAAD;IAAU,cAAa;IAAM,SAAS,UAAU;IAC9C,UAAA,oBAAC,WAAW,eAAZ,CAA2B,CAAA;GACnB,CAAA;GACT,CAAC,CAAC,SACD,oBAAC,UAAD;IAAU,SAAS,UAAU;IAC3B,UAAA,oBAAC,aAAD;KAAa,cAAc,UAAU,OAAO,UAAU;KAAW,OAAM;KACpE,UAAA;IACU,CAAA;GACL,CAAA;GAEZ,oBAAC,UAAD;IAAU,SAAS,UAAU;IAC3B,UAAA,qBAAC,WAAW,UAAZ;KAAqB,IAAG;KAAxB,UAAA,CACG,WACA,CAAC,CAAC,cACD,oBAAC,MAAD;MAAM,OAAO,UAAU,aAAa,kBAAkB;MAAe,WAAU;MAC5E,UAAA;KACG,CAAA,CAEW;;GACb,CAAA;EACK;;AAErB,CAAC;AAED,YAAY,cAAc"}
1
+ {"version":3,"file":"BitkitRadio.js","names":[],"sources":["../../../lib/components/BitkitRadio/BitkitRadio.tsx"],"sourcesContent":["import { RadioGroup, useRadioGroupStyles } from '@chakra-ui/react/radio-group';\nimport { Skeleton } from '@chakra-ui/react/skeleton';\nimport { Text } from '@chakra-ui/react/text';\nimport { forwardRef, type InputHTMLAttributes, type ReactNode } from 'react';\n\nimport BitkitBadge from '../BitkitBadge/BitkitBadge';\n\n/**\n * Passthrough attributes for the radio `<input>`. The RadioGroup machine owns the behavioral / state\n * attributes (`checked`, `value`, `name`, `type`, `disabled`, `onChange`, …), so they're excluded —\n * setting them here would let the input drift out of sync with its `RadioGroup.Item`. Keep it to\n * things like `data-testid`.\n */\ntype RadioInputProps = Omit<\n InputHTMLAttributes<HTMLInputElement>,\n 'checked' | 'defaultChecked' | 'defaultValue' | 'disabled' | 'name' | 'onChange' | 'type' | 'value'\n>;\n\nexport type BitkitRadioProps = {\n badge?: 'off' | 'on';\n helperText?: ReactNode;\n inputProps?: RadioInputProps;\n labelText: ReactNode;\n state?: 'disabled' | 'skeleton';\n} & Omit<RadioGroup.ItemProps, 'disabled'>;\n\nconst BitkitRadio = forwardRef<HTMLInputElement, BitkitRadioProps>((props, ref) => {\n const { badge, helperText, inputProps, labelText, state, ...rest } = props;\n const styles = useRadioGroupStyles();\n\n return (\n <RadioGroup.Item disabled={state === 'disabled'} {...rest}>\n <RadioGroup.ItemHiddenInput ref={ref} {...inputProps} />\n <Skeleton borderRadius=\"50%\" loading={state === 'skeleton'}>\n <RadioGroup.ItemIndicator />\n </Skeleton>\n {!!badge && (\n <Skeleton loading={state === 'skeleton'}>\n <BitkitBadge colorVariant={badge === 'on' ? 'green' : 'neutral'} css={styles.badge}>\n {badge}\n </BitkitBadge>\n </Skeleton>\n )}\n <Skeleton loading={state === 'skeleton'}>\n <RadioGroup.ItemText as=\"div\">\n {labelText}\n {!!helperText && (\n <Text color={state === 'disabled' ? 'text/disabled' : 'text/helper'} textStyle=\"comp/input/helperText\">\n {helperText}\n </Text>\n )}\n </RadioGroup.ItemText>\n </Skeleton>\n </RadioGroup.Item>\n );\n});\n\nBitkitRadio.displayName = 'BitkitRadio';\n\nexport default BitkitRadio;\n"],"mappings":";;;;;;;AA0BA,IAAM,cAAc,YAAgD,OAAO,QAAQ;CACjF,MAAM,EAAE,OAAO,YAAY,YAAY,WAAW,OAAO,GAAG,SAAS;CACrE,MAAM,SAAS,oBAAoB;CAEnC,OACE,qBAAC,WAAW,MAAZ;EAAiB,UAAU,UAAU;EAAY,GAAI;EAArD,UAAA;GACE,oBAAC,WAAW,iBAAZ;IAAiC;IAAK,GAAI;GAAa,CAAA;GACvD,oBAAC,UAAD;IAAU,cAAa;IAAM,SAAS,UAAU;IAC9C,UAAA,oBAAC,WAAW,eAAZ,CAA2B,CAAA;GACnB,CAAA;GACT,CAAC,CAAC,SACD,oBAAC,UAAD;IAAU,SAAS,UAAU;IAC3B,UAAA,oBAAC,aAAD;KAAa,cAAc,UAAU,OAAO,UAAU;KAAW,KAAK,OAAO;KAC1E,UAAA;IACU,CAAA;GACL,CAAA;GAEZ,oBAAC,UAAD;IAAU,SAAS,UAAU;IAC3B,UAAA,qBAAC,WAAW,UAAZ;KAAqB,IAAG;KAAxB,UAAA,CACG,WACA,CAAC,CAAC,cACD,oBAAC,MAAD;MAAM,OAAO,UAAU,aAAa,kBAAkB;MAAe,WAAU;MAC5E,UAAA;KACG,CAAA,CAEW;;GACb,CAAA;EACK;;AAErB,CAAC;AAED,YAAY,cAAc"}
package/dist/theme/slot-recipes/RadioGroup.recipe.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- declare const radioGroupSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "root" | "item" | "itemIndicator" | "indicator" | "itemText" | "itemControl" | "itemAddon", {
1
+ declare const radioGroupSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "badge" | "root" | "item" | "itemIndicator" | "indicator" | "itemText" | "itemControl" | "itemAddon", {
2
2
  orientation: {
3
3
  horizontal: {
4
4
  root: {
@@ -16,6 +16,10 @@ declare const radioGroupSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinit
16
16
  };
17
17
  size: {
18
18
  md: {
19
+ badge: {
20
+ paddingBlock: "2";
21
+ width: string;
22
+ };
19
23
  itemControl: {
20
24
  width: "20";
21
25
  height: "20";
@@ -25,6 +29,10 @@ declare const radioGroupSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinit
25
29
  };
26
30
  };
27
31
  lg: {
32
+ badge: {
33
+ paddingBlock: "4";
34
+ width: "40";
35
+ };
28
36
  itemControl: {
29
37
  width: "24";
30
38
  height: "24";
package/dist/theme/slot-recipes/RadioGroup.recipe.js CHANGED
@@ -1,9 +1,10 @@
1
+ import { rem } from "../themeUtils.js";
1
2
  import { defineSlotRecipe } from "@chakra-ui/react/styled-system";
2
3
  import { radioGroupAnatomy } from "@chakra-ui/react/anatomy";
3
4
  //#region lib/theme/slot-recipes/RadioGroup.recipe.ts
4
5
  var radioGroupSlotRecipe = defineSlotRecipe({
5
6
  className: "radio-group",
6
- slots: radioGroupAnatomy.keys(),
7
+ slots: [...radioGroupAnatomy.keys(), "badge"],
7
8
  base: {
8
9
  root: { display: "flex" },
9
10
  item: {
@@ -55,6 +56,10 @@ var radioGroupSlotRecipe = defineSlotRecipe({
55
56
  },
56
57
  size: {
57
58
  md: {
59
+ badge: {
60
+ paddingBlock: "2",
61
+ width: rem(36)
62
+ },
58
63
  itemControl: {
59
64
  width: "20",
60
65
  height: "20"
@@ -62,6 +67,10 @@ var radioGroupSlotRecipe = defineSlotRecipe({
62
67
  itemText: { textStyle: "body/md/regular" }
63
68
  },
64
69
  lg: {
70
+ badge: {
71
+ paddingBlock: "4",
72
+ width: "40"
73
+ },
65
74
  itemControl: {
66
75
  width: "24",
67
76
  height: "24"
package/dist/theme/slot-recipes/RadioGroup.recipe.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"RadioGroup.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/RadioGroup.recipe.ts"],"sourcesContent":["import { radioGroupAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nconst radioGroupSlotRecipe = defineSlotRecipe({\n className: 'radio-group',\n slots: radioGroupAnatomy.keys(),\n base: {\n root: {\n display: 'flex',\n },\n item: {\n display: 'inline-flex',\n gap: '8',\n alignItems: 'flex-start',\n justifyContent: 'center',\n },\n itemControl: {\n border: '1px solid',\n borderColor: 'border/regular',\n backgroundColor: 'background/primary',\n borderRadius: '50%',\n boxShadow: 'inset/field',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n focusVisibleRing: 'outside',\n '& > .dot': {\n width: '12',\n height: '12',\n borderRadius: '50%',\n backgroundColor: 'icon/interactive',\n },\n _hover: {\n borderColor: 'border/hover',\n },\n _disabled: {\n backgroundColor: 'background/disabled',\n borderColor: 'border/disabled',\n boxShadow: 'none',\n '& > .dot': {\n backgroundColor: 'icon/disabled',\n },\n },\n },\n itemText: {\n color: 'input/text/inputValue',\n _disabled: {\n color: 'text/disabled',\n },\n },\n },\n variants: {\n orientation: {\n horizontal: {\n root: {\n flexDirection: 'row',\n gap: '24',\n },\n },\n vertical: {\n root: {\n alignItems: 'flex-start',\n flexDirection: 'column',\n gap: '12',\n },\n },\n },\n size: {\n md: {\n itemControl: {\n width: '20',\n height: '20',\n },\n itemText: {\n textStyle: 'body/md/regular',\n },\n },\n lg: {\n itemControl: {\n width: '24',\n height: '24',\n },\n itemText: {\n textStyle: 'body/lg/regular',\n },\n },\n },\n },\n defaultVariants: {\n orientation: 'horizontal',\n size: 'lg',\n },\n});\n\nexport default radioGroupSlotRecipe;\n"],"mappings":";;;AAGA,IAAM,uBAAuB,iBAAiB;CAC5C,WAAW;CACX,OAAO,kBAAkB,KAAK;CAC9B,MAAM;EACJ,MAAM,EACJ,SAAS,OACX;EACA,MAAM;GACJ,SAAS;GACT,KAAK;GACL,YAAY;GACZ,gBAAgB;EAClB;EACA,aAAa;GACX,QAAQ;GACR,aAAa;GACb,iBAAiB;GACjB,cAAc;GACd,WAAW;GACX,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,kBAAkB;GAClB,YAAY;IACV,OAAO;IACP,QAAQ;IACR,cAAc;IACd,iBAAiB;GACnB;GACA,QAAQ,EACN,aAAa,eACf;GACA,WAAW;IACT,iBAAiB;IACjB,aAAa;IACb,WAAW;IACX,YAAY,EACV,iBAAiB,gBACnB;GACF;EACF;EACA,UAAU;GACR,OAAO;GACP,WAAW,EACT,OAAO,gBACT;EACF;CACF;CACA,UAAU;EACR,aAAa;GACX,YAAY,EACV,MAAM;IACJ,eAAe;IACf,KAAK;GACP,EACF;GACA,UAAU,EACR,MAAM;IACJ,YAAY;IACZ,eAAe;IACf,KAAK;GACP,EACF;EACF;EACA,MAAM;GACJ,IAAI;IACF,aAAa;KACX,OAAO;KACP,QAAQ;IACV;IACA,UAAU,EACR,WAAW,kBACb;GACF;GACA,IAAI;IACF,aAAa;KACX,OAAO;KACP,QAAQ;IACV;IACA,UAAU,EACR,WAAW,kBACb;GACF;EACF;CACF;CACA,iBAAiB;EACf,aAAa;EACb,MAAM;CACR;AACF,CAAC"}
1
+ {"version":3,"file":"RadioGroup.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/RadioGroup.recipe.ts"],"sourcesContent":["import { radioGroupAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\nconst radioGroupSlotRecipe = defineSlotRecipe({\n className: 'radio-group',\n slots: [...radioGroupAnatomy.keys(), 'badge'],\n base: {\n root: {\n display: 'flex',\n },\n item: {\n display: 'inline-flex',\n gap: '8',\n alignItems: 'flex-start',\n justifyContent: 'center',\n },\n itemControl: {\n border: '1px solid',\n borderColor: 'border/regular',\n backgroundColor: 'background/primary',\n borderRadius: '50%',\n boxShadow: 'inset/field',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n focusVisibleRing: 'outside',\n '& > .dot': {\n width: '12',\n height: '12',\n borderRadius: '50%',\n backgroundColor: 'icon/interactive',\n },\n _hover: {\n borderColor: 'border/hover',\n },\n _disabled: {\n backgroundColor: 'background/disabled',\n borderColor: 'border/disabled',\n boxShadow: 'none',\n '& > .dot': {\n backgroundColor: 'icon/disabled',\n },\n },\n },\n itemText: {\n color: 'input/text/inputValue',\n _disabled: {\n color: 'text/disabled',\n },\n },\n },\n variants: {\n orientation: {\n horizontal: {\n root: {\n flexDirection: 'row',\n gap: '24',\n },\n },\n vertical: {\n root: {\n alignItems: 'flex-start',\n flexDirection: 'column',\n gap: '12',\n },\n },\n },\n size: {\n md: {\n badge: {\n paddingBlock: '2',\n width: rem(36),\n },\n itemControl: {\n width: '20',\n height: '20',\n },\n itemText: {\n textStyle: 'body/md/regular',\n },\n },\n lg: {\n badge: {\n paddingBlock: '4',\n width: '40',\n },\n itemControl: {\n width: '24',\n height: '24',\n },\n itemText: {\n textStyle: 'body/lg/regular',\n },\n },\n },\n },\n defaultVariants: {\n orientation: 'horizontal',\n size: 'lg',\n },\n});\n\nexport default radioGroupSlotRecipe;\n"],"mappings":";;;;AAKA,IAAM,uBAAuB,iBAAiB;CAC5C,WAAW;CACX,OAAO,CAAC,GAAG,kBAAkB,KAAK,GAAG,OAAO;CAC5C,MAAM;EACJ,MAAM,EACJ,SAAS,OACX;EACA,MAAM;GACJ,SAAS;GACT,KAAK;GACL,YAAY;GACZ,gBAAgB;EAClB;EACA,aAAa;GACX,QAAQ;GACR,aAAa;GACb,iBAAiB;GACjB,cAAc;GACd,WAAW;GACX,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,kBAAkB;GAClB,YAAY;IACV,OAAO;IACP,QAAQ;IACR,cAAc;IACd,iBAAiB;GACnB;GACA,QAAQ,EACN,aAAa,eACf;GACA,WAAW;IACT,iBAAiB;IACjB,aAAa;IACb,WAAW;IACX,YAAY,EACV,iBAAiB,gBACnB;GACF;EACF;EACA,UAAU;GACR,OAAO;GACP,WAAW,EACT,OAAO,gBACT;EACF;CACF;CACA,UAAU;EACR,aAAa;GACX,YAAY,EACV,MAAM;IACJ,eAAe;IACf,KAAK;GACP,EACF;GACA,UAAU,EACR,MAAM;IACJ,YAAY;IACZ,eAAe;IACf,KAAK;GACP,EACF;EACF;EACA,MAAM;GACJ,IAAI;IACF,OAAO;KACL,cAAc;KACd,OAAO,IAAI,EAAE;IACf;IACA,aAAa;KACX,OAAO;KACP,QAAQ;IACV;IACA,UAAU,EACR,WAAW,kBACb;GACF;GACA,IAAI;IACF,OAAO;KACL,cAAc;KACd,OAAO;IACT;IACA,aAAa;KACX,OAAO;KACP,QAAQ;IACV;IACA,UAAU,EACR,WAAW,kBACb;GACF;EACF;CACF;CACA,iBAAiB;EACf,aAAa;EACb,MAAM;CACR;AACF,CAAC"}
package/dist/theme/slot-recipes/index.d.ts CHANGED
@@ -1591,7 +1591,7 @@ declare const slotRecipes: {
1591
1591
  };
1592
1592
  };
1593
1593
  }>;
1594
- radioGroup: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "root" | "item" | "itemIndicator" | "indicator" | "itemText" | "itemControl" | "itemAddon", {
1594
+ radioGroup: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "badge" | "root" | "item" | "itemIndicator" | "indicator" | "itemText" | "itemControl" | "itemAddon", {
1595
1595
  orientation: {
1596
1596
  horizontal: {
1597
1597
  root: {
@@ -1609,6 +1609,10 @@ declare const slotRecipes: {
1609
1609
  };
1610
1610
  size: {
1611
1611
  md: {
1612
+ badge: {
1613
+ paddingBlock: "2";
1614
+ width: string;
1615
+ };
1612
1616
  itemControl: {
1613
1617
  width: "20";
1614
1618
  height: "20";
@@ -1618,6 +1622,10 @@ declare const slotRecipes: {
1618
1622
  };
1619
1623
  };
1620
1624
  lg: {
1625
+ badge: {
1626
+ paddingBlock: "4";
1627
+ width: "40";
1628
+ };
1621
1629
  itemControl: {
1622
1630
  width: "24";
1623
1631
  height: "24";
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@bitrise/bitkit-v2",
3
3
  "private": false,
4
- "version": "0.3.341",
4
+ "version": "0.3.342",
5
5
  "description": "Bitrise Design System Components built with Chakra UI V3",
6
6
  "keywords": [
7
7
  "react",