@bitrise/bitkit-v2 0.3.228 → 0.3.229
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.
- package/dist/components/BitkitAlert/BitkitAlert.d.ts +3 -2
- package/dist/components/BitkitAlert/BitkitAlert.js.map +1 -1
- package/dist/components/BitkitCheckbox/BitkitCheckbox.d.ts +5 -5
- package/dist/components/BitkitCheckbox/BitkitCheckbox.js.map +1 -1
- package/dist/components/BitkitCheckboxGroup/BitkitCheckboxGroup.d.ts +2 -2
- package/dist/components/BitkitCheckboxGroup/BitkitCheckboxGroup.js.map +1 -1
- package/dist/components/BitkitEmptyState/BitkitEmptyState.d.ts +3 -2
- package/dist/components/BitkitEmptyState/BitkitEmptyState.js.map +1 -1
- package/dist/components/BitkitList/BitkitList.d.ts +1 -1
- package/dist/components/BitkitList/BitkitList.js.map +1 -1
- package/dist/components/BitkitMultiselectMenu/BitkitMultiselectMenu.d.ts +2 -1
- package/dist/components/BitkitMultiselectMenu/BitkitMultiselectMenu.js.map +1 -1
- package/dist/components/BitkitRadio/BitkitRadio.d.ts +5 -5
- package/dist/components/BitkitRadio/BitkitRadio.js.map +1 -1
- package/dist/components/BitkitRadioGroup/BitkitRadioGroup.d.ts +2 -2
- package/dist/components/BitkitRadioGroup/BitkitRadioGroup.js.map +1 -1
- package/dist/components/BitkitSectionHeading/BitkitSectionHeading.d.ts +1 -1
- package/dist/components/BitkitSectionHeading/BitkitSectionHeading.js.map +1 -1
- package/dist/components/BitkitSelectMenu/BitkitSelectMenu.d.ts +2 -1
- package/dist/components/BitkitSelectMenu/BitkitSelectMenu.js.map +1 -1
- package/dist/components/BitkitSteps/BitkitSteps.d.ts +1 -1
- package/dist/components/BitkitSteps/BitkitSteps.js.map +1 -1
- package/dist/components/BitkitTabs/BitkitTabs.d.ts +1 -1
- package/dist/components/BitkitTabs/BitkitTabs.js.map +1 -1
- package/dist/components/BitkitToast/BitkitToast.d.ts +3 -2
- package/dist/components/BitkitToast/BitkitToast.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { AlertRootProps } from '@chakra-ui/react/alert';
|
|
2
|
+
import { ReactNode } from 'react';
|
|
2
3
|
import { NotificationVariant } from '../../theme/common/AlertAndToast.common';
|
|
3
4
|
import { NotificationAction } from '../common/notificationMaps';
|
|
4
5
|
export type AlertVariants = NotificationVariant;
|
|
@@ -6,9 +7,9 @@ export type ActionProps = NotificationAction;
|
|
|
6
7
|
export interface BitkitAlertProps extends AlertRootProps {
|
|
7
8
|
action?: ActionProps;
|
|
8
9
|
dismissible?: boolean;
|
|
9
|
-
messageText:
|
|
10
|
+
messageText: ReactNode;
|
|
10
11
|
onClose?: () => void;
|
|
11
|
-
titleText?:
|
|
12
|
+
titleText?: ReactNode;
|
|
12
13
|
variant: AlertVariants;
|
|
13
14
|
}
|
|
14
15
|
declare const BitkitAlert: (props: BitkitAlertProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitAlert.js","names":[],"sources":["../../../lib/components/BitkitAlert/BitkitAlert.tsx"],"sourcesContent":["import { Alert, type AlertRootProps } from '@chakra-ui/react/alert';\n\nimport { type NotificationVariant } from '../../theme/common/AlertAndToast.common';\nimport { rem } from '../../theme/themeUtils';\nimport BitkitCloseButton from '../BitkitCloseButton/BitkitCloseButton';\nimport BitkitColorButton from '../BitkitColorButton/BitkitColorButton';\nimport { BUTTON_COLORS_MAP, ICON_COMPONENTS_MAP, type NotificationAction } from '../common/notificationMaps';\n\nexport type AlertVariants = NotificationVariant;\nexport type ActionProps = NotificationAction;\n\nexport interface BitkitAlertProps extends AlertRootProps {\n action?: ActionProps;\n dismissible?: boolean;\n messageText:
|
|
1
|
+
{"version":3,"file":"BitkitAlert.js","names":[],"sources":["../../../lib/components/BitkitAlert/BitkitAlert.tsx"],"sourcesContent":["import { Alert, type AlertRootProps } from '@chakra-ui/react/alert';\nimport { type ReactNode } from 'react';\n\nimport { type NotificationVariant } from '../../theme/common/AlertAndToast.common';\nimport { rem } from '../../theme/themeUtils';\nimport BitkitCloseButton from '../BitkitCloseButton/BitkitCloseButton';\nimport BitkitColorButton from '../BitkitColorButton/BitkitColorButton';\nimport { BUTTON_COLORS_MAP, ICON_COMPONENTS_MAP, type NotificationAction } from '../common/notificationMaps';\n\nexport type AlertVariants = NotificationVariant;\nexport type ActionProps = NotificationAction;\n\nexport interface BitkitAlertProps extends AlertRootProps {\n action?: ActionProps;\n dismissible?: boolean;\n messageText: ReactNode;\n onClose?: () => void;\n titleText?: ReactNode;\n variant: AlertVariants;\n}\n\nconst BitkitAlert = (props: BitkitAlertProps) => {\n const { action, dismissible, messageText, onClose, titleText, variant, ...rest } = props;\n const IconComponent = ICON_COMPONENTS_MAP[variant];\n\n return (\n <Alert.Root variant={variant} {...rest}>\n <Alert.Indicator asChild={variant !== 'progress'}>\n <IconComponent />\n </Alert.Indicator>\n <Alert.Content>\n {titleText && <Alert.Title>{titleText}</Alert.Title>}\n <Alert.Description>{messageText}</Alert.Description>\n </Alert.Content>\n {!!action && (\n <BitkitColorButton\n as={action.href ? 'a' : 'button'}\n colorPalette={BUTTON_COLORS_MAP[variant]}\n {...(action.href && { href: action.href, target: action.target })}\n onClick={action.onClick}\n marginInlineStart=\"16\"\n marginInlineEnd=\"12\"\n whiteSpace=\"nowrap\"\n >\n {action.label}\n </BitkitColorButton>\n )}\n {!!dismissible && (\n <BitkitCloseButton\n alignSelf=\"flex-start\"\n marginBlockStart={rem(7)}\n size=\"sm\"\n onClick={onClose}\n colorPalette={BUTTON_COLORS_MAP[variant]}\n />\n )}\n </Alert.Root>\n );\n};\n\nexport default BitkitAlert;\n"],"mappings":";;;;;;;AAqBA,IAAM,eAAe,UAA4B;CAC/C,MAAM,EAAE,QAAQ,aAAa,aAAa,SAAS,WAAW,SAAS,GAAG,SAAS;CACnF,MAAM,gBAAgB,oBAAoB;CAE1C,OACE,qBAAC,MAAM,MAAP;EAAqB;EAAS,GAAI;YAAlC;GACE,oBAAC,MAAM,WAAP;IAAiB,SAAS,YAAY;cACpC,oBAAC,eAAD,CAAgB,CAAA;GACD,CAAA;GACjB,qBAAC,MAAM,SAAP,EAAA,UAAA,CACG,aAAa,oBAAC,MAAM,OAAP,EAAA,UAAc,UAAuB,CAAA,GACnD,oBAAC,MAAM,aAAP,EAAA,UAAoB,YAA+B,CAAA,CACtC,EAAA,CAAA;GACd,CAAC,CAAC,UACD,oBAAC,mBAAD;IACE,IAAI,OAAO,OAAO,MAAM;IACxB,cAAc,kBAAkB;IAChC,GAAK,OAAO,QAAQ;KAAE,MAAM,OAAO;KAAM,QAAQ,OAAO;IAAO;IAC/D,SAAS,OAAO;IAChB,mBAAkB;IAClB,iBAAgB;IAChB,YAAW;cAEV,OAAO;GACS,CAAA;GAEpB,CAAC,CAAC,eACD,oBAAC,mBAAD;IACE,WAAU;IACV,kBAAkB,IAAI,CAAC;IACvB,MAAK;IACL,SAAS;IACT,cAAc,kBAAkB;GACjC,CAAA;EAEO;;AAEhB"}
|
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
import { Checkbox } from '@chakra-ui/react/checkbox';
|
|
2
|
-
import { InputHTMLAttributes } from 'react';
|
|
2
|
+
import { InputHTMLAttributes, ReactNode } from 'react';
|
|
3
3
|
export type BitkitCheckboxProps = {
|
|
4
|
-
helperText?:
|
|
4
|
+
helperText?: ReactNode;
|
|
5
5
|
inputProps?: InputHTMLAttributes<HTMLInputElement>;
|
|
6
|
-
labelText:
|
|
6
|
+
labelText: ReactNode;
|
|
7
7
|
state?: 'disabled' | 'readOnly' | 'skeleton';
|
|
8
8
|
} & Omit<Checkbox.RootProps, 'disabled' | 'readOnly'>;
|
|
9
9
|
declare const BitkitCheckbox: import('react').ForwardRefExoticComponent<{
|
|
10
|
-
helperText?:
|
|
10
|
+
helperText?: ReactNode;
|
|
11
11
|
inputProps?: InputHTMLAttributes<HTMLInputElement>;
|
|
12
|
-
labelText:
|
|
12
|
+
labelText: ReactNode;
|
|
13
13
|
state?: "disabled" | "readOnly" | "skeleton";
|
|
14
14
|
} & Omit<Checkbox.RootProps, "disabled" | "readOnly"> & import('react').RefAttributes<HTMLInputElement>>;
|
|
15
15
|
export default BitkitCheckbox;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitCheckbox.js","names":[],"sources":["../../../lib/components/BitkitCheckbox/BitkitCheckbox.tsx"],"sourcesContent":["import { Checkbox } from '@chakra-ui/react/checkbox';\nimport { Skeleton } from '@chakra-ui/react/skeleton';\nimport { Text } from '@chakra-ui/react/text';\nimport { forwardRef, type InputHTMLAttributes } from 'react';\n\nimport { IconCheck, IconMinus } from '../../icons';\n\nexport type BitkitCheckboxProps = {\n helperText?:
|
|
1
|
+
{"version":3,"file":"BitkitCheckbox.js","names":[],"sources":["../../../lib/components/BitkitCheckbox/BitkitCheckbox.tsx"],"sourcesContent":["import { Checkbox } from '@chakra-ui/react/checkbox';\nimport { Skeleton } from '@chakra-ui/react/skeleton';\nimport { Text } from '@chakra-ui/react/text';\nimport { forwardRef, type InputHTMLAttributes, type ReactNode } from 'react';\n\nimport { IconCheck, IconMinus } from '../../icons';\n\nexport type BitkitCheckboxProps = {\n helperText?: ReactNode;\n inputProps?: InputHTMLAttributes<HTMLInputElement>;\n labelText: ReactNode;\n state?: 'disabled' | 'readOnly' | 'skeleton';\n} & Omit<Checkbox.RootProps, 'disabled' | 'readOnly'>;\n\nconst BitkitCheckbox = forwardRef<HTMLInputElement, BitkitCheckboxProps>((props, ref) => {\n const { helperText, inputProps, labelText, state, ...rest } = props;\n\n return (\n <Checkbox.Root disabled={state === 'disabled'} readOnly={state === 'readOnly'} {...rest}>\n <Checkbox.HiddenInput ref={ref} {...inputProps} />\n <Skeleton loading={state === 'skeleton'}>\n <Checkbox.Control>{rest.checked === 'indeterminate' ? <IconMinus /> : <IconCheck />}</Checkbox.Control>\n </Skeleton>\n <Skeleton loading={state === 'skeleton'}>\n <Checkbox.Label as=\"div\">\n {labelText}\n {!!helperText && (\n <Text color=\"text/helper\" textStyle=\"comp/input/helperText\">\n {helperText}\n </Text>\n )}\n </Checkbox.Label>\n </Skeleton>\n </Checkbox.Root>\n );\n});\n\nBitkitCheckbox.displayName = 'BitkitCheckbox';\n\nexport default BitkitCheckbox;\n"],"mappings":";;;;;;;;AAcA,IAAM,iBAAiB,YAAmD,OAAO,QAAQ;CACvF,MAAM,EAAE,YAAY,YAAY,WAAW,OAAO,GAAG,SAAS;CAE9D,OACE,qBAAC,SAAS,MAAV;EAAe,UAAU,UAAU;EAAY,UAAU,UAAU;EAAY,GAAI;YAAnF;GACE,oBAAC,SAAS,aAAV;IAA2B;IAAK,GAAI;GAAa,CAAA;GACjD,oBAAC,UAAD;IAAU,SAAS,UAAU;cAC3B,oBAAC,SAAS,SAAV,EAAA,UAAmB,KAAK,YAAY,kBAAkB,oBAAC,WAAD,CAAY,CAAA,IAAI,oBAAC,WAAD,CAAY,CAAA,EAAoB,CAAA;GAC9F,CAAA;GACV,oBAAC,UAAD;IAAU,SAAS,UAAU;cAC3B,qBAAC,SAAS,OAAV;KAAgB,IAAG;eAAnB,CACG,WACA,CAAC,CAAC,cACD,oBAAC,MAAD;MAAM,OAAM;MAAc,WAAU;gBACjC;KACG,CAAA,CAEM;;GACR,CAAA;EACG;;AAEnB,CAAC;AAED,eAAe,cAAc"}
|
|
@@ -4,13 +4,13 @@ import { ReactNode } from 'react';
|
|
|
4
4
|
export interface BitkitCheckboxGroupProps extends Fieldset.RootProps {
|
|
5
5
|
checkboxGroupProps?: CheckboxGroupProps;
|
|
6
6
|
children: ReactNode;
|
|
7
|
-
errorText?:
|
|
7
|
+
errorText?: ReactNode;
|
|
8
8
|
/**
|
|
9
9
|
* Visible legend rendered above the group. Optional — if you omit it, pass `aria-label` or
|
|
10
10
|
* `aria-labelledby` instead so the fieldset still has an accessible name.
|
|
11
11
|
*/
|
|
12
12
|
groupLabel?: string;
|
|
13
|
-
helperText?:
|
|
13
|
+
helperText?: ReactNode;
|
|
14
14
|
name?: CheckboxGroupProps['name'];
|
|
15
15
|
onValueChange: CheckboxGroupProps['onValueChange'];
|
|
16
16
|
value: CheckboxGroupProps['value'];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitCheckboxGroup.js","names":[],"sources":["../../../lib/components/BitkitCheckboxGroup/BitkitCheckboxGroup.tsx"],"sourcesContent":["import { CheckboxGroup, type CheckboxGroupProps } from '@chakra-ui/react/checkbox';\nimport { Fieldset } from '@chakra-ui/react/fieldset';\nimport { forwardRef, type ReactNode } from 'react';\n\nexport interface BitkitCheckboxGroupProps extends Fieldset.RootProps {\n checkboxGroupProps?: CheckboxGroupProps;\n children: ReactNode;\n errorText?:
|
|
1
|
+
{"version":3,"file":"BitkitCheckboxGroup.js","names":[],"sources":["../../../lib/components/BitkitCheckboxGroup/BitkitCheckboxGroup.tsx"],"sourcesContent":["import { CheckboxGroup, type CheckboxGroupProps } from '@chakra-ui/react/checkbox';\nimport { Fieldset } from '@chakra-ui/react/fieldset';\nimport { forwardRef, type ReactNode } from 'react';\n\nexport interface BitkitCheckboxGroupProps extends Fieldset.RootProps {\n checkboxGroupProps?: CheckboxGroupProps;\n children: ReactNode;\n errorText?: ReactNode;\n /**\n * Visible legend rendered above the group. Optional — if you omit it, pass `aria-label` or\n * `aria-labelledby` instead so the fieldset still has an accessible name.\n */\n groupLabel?: string;\n helperText?: ReactNode;\n name?: CheckboxGroupProps['name'];\n onValueChange: CheckboxGroupProps['onValueChange'];\n value: CheckboxGroupProps['value'];\n}\n\nconst BitkitCheckboxGroup = forwardRef<HTMLFieldSetElement, BitkitCheckboxGroupProps>((props, ref) => {\n const { checkboxGroupProps, children, errorText, helperText, groupLabel, name, onValueChange, value, ...rest } =\n props;\n const hasHeader = !!groupLabel || !!helperText;\n return (\n <Fieldset.Root ref={ref} {...rest} invalid={rest.invalid || !!errorText}>\n {groupLabel && <Fieldset.Legend>{groupLabel}</Fieldset.Legend>}\n {!!helperText && <Fieldset.HelperText>{helperText}</Fieldset.HelperText>}\n <Fieldset.Content\n display=\"flex\"\n flexDirection=\"column\"\n gap=\"12\"\n marginBlockStart={hasHeader ? '12' : undefined}\n asChild\n >\n <CheckboxGroup name={name} onValueChange={onValueChange} value={value} {...checkboxGroupProps}>\n {children}\n </CheckboxGroup>\n </Fieldset.Content>\n {!!errorText && <Fieldset.ErrorText>{errorText}</Fieldset.ErrorText>}\n </Fieldset.Root>\n );\n});\n\nBitkitCheckboxGroup.displayName = 'BitkitCheckboxGroup';\n\nexport default BitkitCheckboxGroup;\n"],"mappings":";;;;;AAmBA,IAAM,sBAAsB,YAA2D,OAAO,QAAQ;CACpG,MAAM,EAAE,oBAAoB,UAAU,WAAW,YAAY,YAAY,MAAM,eAAe,OAAO,GAAG,SACtG;CACF,MAAM,YAAY,CAAC,CAAC,cAAc,CAAC,CAAC;CACpC,OACE,qBAAC,SAAS,MAAV;EAAoB;EAAK,GAAI;EAAM,SAAS,KAAK,WAAW,CAAC,CAAC;YAA9D;GACG,cAAc,oBAAC,SAAS,QAAV,EAAA,UAAkB,WAA4B,CAAA;GAC5D,CAAC,CAAC,cAAc,oBAAC,SAAS,YAAV,EAAA,UAAsB,WAAgC,CAAA;GACvE,oBAAC,SAAS,SAAV;IACE,SAAQ;IACR,eAAc;IACd,KAAI;IACJ,kBAAkB,YAAY,OAAO,KAAA;IACrC,SAAA;cAEA,oBAAC,eAAD;KAAqB;KAAqB;KAAsB;KAAO,GAAI;KACxE;IACY,CAAA;GACC,CAAA;GACjB,CAAC,CAAC,aAAa,oBAAC,SAAS,WAAV,EAAA,UAAqB,UAA8B,CAAA;EACtD;;AAEnB,CAAC;AAED,oBAAoB,cAAc"}
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import { EmptyStateRootProps } from '@chakra-ui/react/empty-state';
|
|
2
|
+
import { ReactNode } from 'react';
|
|
2
3
|
import { BitkitIconComponent } from '../../icons';
|
|
3
4
|
export interface BitkitEmptyStateProps extends EmptyStateRootProps {
|
|
4
|
-
bodyText:
|
|
5
|
-
headingText:
|
|
5
|
+
bodyText: ReactNode;
|
|
6
|
+
headingText: ReactNode;
|
|
6
7
|
icon: BitkitIconComponent;
|
|
7
8
|
loading?: boolean;
|
|
8
9
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitEmptyState.js","names":[],"sources":["../../../lib/components/BitkitEmptyState/BitkitEmptyState.tsx"],"sourcesContent":["import { EmptyState, type EmptyStateRootProps } from '@chakra-ui/react/empty-state';\nimport { Spinner } from '@chakra-ui/react/spinner';\n\nimport { type BitkitIconComponent } from '../../icons';\n\nexport interface BitkitEmptyStateProps extends EmptyStateRootProps {\n bodyText:
|
|
1
|
+
{"version":3,"file":"BitkitEmptyState.js","names":[],"sources":["../../../lib/components/BitkitEmptyState/BitkitEmptyState.tsx"],"sourcesContent":["import { EmptyState, type EmptyStateRootProps } from '@chakra-ui/react/empty-state';\nimport { Spinner } from '@chakra-ui/react/spinner';\nimport { type ReactNode } from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\n\nexport interface BitkitEmptyStateProps extends EmptyStateRootProps {\n bodyText: ReactNode;\n headingText: ReactNode;\n icon: BitkitIconComponent;\n loading?: boolean;\n}\n\nconst BitkitEmptyState = (props: BitkitEmptyStateProps) => {\n const { bodyText, children, headingText, icon: Icon, loading, ...rest } = props;\n return (\n <EmptyState.Root {...rest}>\n <EmptyState.Content>\n <EmptyState.Indicator asChild>\n {loading ? <Spinner width=\"24\" height=\"24\" /> : <Icon size=\"24\" />}\n </EmptyState.Indicator>\n <EmptyState.Title>{headingText}</EmptyState.Title>\n <EmptyState.Description>{bodyText}</EmptyState.Description>\n {!loading && children}\n </EmptyState.Content>\n </EmptyState.Root>\n );\n};\n\nexport default BitkitEmptyState;\n"],"mappings":";;;;AAaA,IAAM,oBAAoB,UAAiC;CACzD,MAAM,EAAE,UAAU,UAAU,aAAa,MAAM,MAAM,SAAS,GAAG,SAAS;CAC1E,OACE,oBAAC,WAAW,MAAZ;EAAiB,GAAI;YACnB,qBAAC,WAAW,SAAZ,EAAA,UAAA;GACE,oBAAC,WAAW,WAAZ;IAAsB,SAAA;cACnB,UAAU,oBAAC,SAAD;KAAS,OAAM;KAAK,QAAO;IAAM,CAAA,IAAI,oBAAC,MAAD,EAAM,MAAK,KAAM,CAAA;GAC7C,CAAA;GACtB,oBAAC,WAAW,OAAZ,EAAA,UAAmB,YAA8B,CAAA;GACjD,oBAAC,WAAW,aAAZ,EAAA,UAAyB,SAAiC,CAAA;GACzD,CAAC,WAAW;EACK,EAAA,CAAA;CACL,CAAA;AAErB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitList.js","names":[],"sources":["../../../lib/components/BitkitList/BitkitList.tsx"],"sourcesContent":["// eslint-disable-next-line no-restricted-imports\nimport { createContext } from '@chakra-ui/react';\nimport { Box } from '@chakra-ui/react/box';\nimport { List, type ListRootProps } from '@chakra-ui/react/list';\nimport { Text } from '@chakra-ui/react/text';\nimport { forwardRef, type ReactNode } from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\nimport { withSubComponents } from '../../utilities/withSubComponents';\n\n// ----- Context -----\n\ntype BitkitListVariant = 'explainer' | 'ordered' | 'unordered';\ntype BitkitListSize = 'lg' | 'md';\n\ninterface BitkitListContext {\n size: BitkitListSize;\n variant: BitkitListVariant;\n}\n\nconst [BitkitListProvider, useBitkitListContext] = createContext<BitkitListContext>({\n name: 'BitkitListContext',\n hookName: 'useBitkitListContext',\n providerName: '<BitkitList />',\n});\n\n// ----- BitkitList -----\n\nexport interface BitkitListProps extends Omit<ListRootProps, 'colorPalette'> {\n children: ReactNode;\n colorPalette?: 'neutral' | 'purple';\n size?: BitkitListSize;\n variant?: BitkitListVariant;\n}\n\nconst BitkitList = forwardRef<HTMLOListElement | HTMLUListElement, BitkitListProps>((props, ref) => {\n const { children, colorPalette = 'neutral', size = 'lg', variant = 'unordered', ...rest } = props;\n\n const rootProps =\n variant === 'ordered'\n ? ({ as: 'ol', counterReset: 'bitkit-list' } as const)\n : variant === 'explainer'\n ? ({ as: 'ol', counterReset: 'bitkit-list' } as const)\n : {};\n\n return (\n <BitkitListProvider value={{ size, variant }}>\n <List.Root ref={ref} colorPalette={colorPalette} size={size} {...rootProps} {...rest}>\n {children}\n </List.Root>\n </BitkitListProvider>\n );\n});\n\nBitkitList.displayName = 'BitkitList';\n\n// ----- BitkitList.Item -----\n\nexport interface BitkitListItemProps {\n children: ReactNode;\n helperText?:
|
|
1
|
+
{"version":3,"file":"BitkitList.js","names":[],"sources":["../../../lib/components/BitkitList/BitkitList.tsx"],"sourcesContent":["// eslint-disable-next-line no-restricted-imports\nimport { createContext } from '@chakra-ui/react';\nimport { Box } from '@chakra-ui/react/box';\nimport { List, type ListRootProps } from '@chakra-ui/react/list';\nimport { Text } from '@chakra-ui/react/text';\nimport { forwardRef, type ReactNode } from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\nimport { withSubComponents } from '../../utilities/withSubComponents';\n\n// ----- Context -----\n\ntype BitkitListVariant = 'explainer' | 'ordered' | 'unordered';\ntype BitkitListSize = 'lg' | 'md';\n\ninterface BitkitListContext {\n size: BitkitListSize;\n variant: BitkitListVariant;\n}\n\nconst [BitkitListProvider, useBitkitListContext] = createContext<BitkitListContext>({\n name: 'BitkitListContext',\n hookName: 'useBitkitListContext',\n providerName: '<BitkitList />',\n});\n\n// ----- BitkitList -----\n\nexport interface BitkitListProps extends Omit<ListRootProps, 'colorPalette'> {\n children: ReactNode;\n colorPalette?: 'neutral' | 'purple';\n size?: BitkitListSize;\n variant?: BitkitListVariant;\n}\n\nconst BitkitList = forwardRef<HTMLOListElement | HTMLUListElement, BitkitListProps>((props, ref) => {\n const { children, colorPalette = 'neutral', size = 'lg', variant = 'unordered', ...rest } = props;\n\n const rootProps =\n variant === 'ordered'\n ? ({ as: 'ol', counterReset: 'bitkit-list' } as const)\n : variant === 'explainer'\n ? ({ as: 'ol', counterReset: 'bitkit-list' } as const)\n : {};\n\n return (\n <BitkitListProvider value={{ size, variant }}>\n <List.Root ref={ref} colorPalette={colorPalette} size={size} {...rootProps} {...rest}>\n {children}\n </List.Root>\n </BitkitListProvider>\n );\n});\n\nBitkitList.displayName = 'BitkitList';\n\n// ----- BitkitList.Item -----\n\nexport interface BitkitListItemProps {\n children: ReactNode;\n helperText?: ReactNode;\n icon?: BitkitIconComponent;\n iconColor?: string;\n}\n\nconst UNORDERED_ICON_SIZE: Record<BitkitListSize, '16' | '24'> = {\n lg: '24',\n md: '16',\n};\n\nconst BitkitListItem = forwardRef<HTMLLIElement, BitkitListItemProps>((props, ref) => {\n const { children, helperText, icon: Icon, iconColor } = props;\n const { size, variant } = useBitkitListContext();\n\n const content = helperText ? (\n <Box display=\"flex\" flex=\"1\" flexDirection=\"column\" minWidth=\"0\">\n {children}\n <Text color=\"text/secondary\" textStyle=\"body/md/regular\">\n {helperText}\n </Text>\n </Box>\n ) : (\n children\n );\n\n if (variant === 'ordered') {\n return (\n <List.Item ref={ref} counterIncrement=\"bitkit-list\" gap={helperText ? '12' : undefined}>\n {Icon ? (\n <List.Indicator color={iconColor ?? 'icon/secondary'}>\n <Icon size={UNORDERED_ICON_SIZE[size]} />\n </List.Indicator>\n ) : (\n <List.Indicator _before={{ content: 'counter(bitkit-list) \".\"' }} />\n )}\n {content}\n </List.Item>\n );\n }\n\n if (variant === 'explainer') {\n return (\n <List.Item\n ref={ref}\n counterIncrement=\"bitkit-list\"\n gap={helperText ? '12' : '6'}\n marginBlockEnd={helperText ? '8' : undefined}\n >\n {Icon ? (\n <List.Indicator color={iconColor ?? 'colorPalette.strong'}>\n <Icon size={UNORDERED_ICON_SIZE[size]} />\n </List.Indicator>\n ) : (\n <List.Indicator\n _before={{ content: 'counter(bitkit-list)' }}\n background=\"colorPalette.subtle\"\n borderRadius=\"50%\"\n color=\"colorPalette.strong\"\n height={helperText ? '24' : '20'}\n // Give the smaller 20px circle 2px of block margin on each side so the marker\n // always occupies a 24px vertical slot and its center aligns with the first\n // text line — matches the Figma frame with the 20px circle centered in a 24px\n // marker box.\n marginBlock={helperText ? undefined : '2'}\n overflow=\"hidden\"\n textStyle=\"comp/badge/sm\"\n width={helperText ? '24' : '20'}\n />\n )}\n {content}\n </List.Item>\n );\n }\n\n // unordered (default)\n if (Icon) {\n return (\n <List.Item ref={ref} gap={helperText ? '12' : '8'}>\n <List.Indicator color={iconColor ?? 'icon/secondary'}>\n <Icon size={UNORDERED_ICON_SIZE[size]} />\n </List.Indicator>\n {content}\n </List.Item>\n );\n }\n\n return (\n <List.Item ref={ref} gap={helperText ? '12' : undefined}>\n <List.Indicator aria-hidden>•</List.Indicator>\n {content}\n </List.Item>\n );\n});\n\nBitkitListItem.displayName = 'BitkitListItem';\n\nexport default withSubComponents(BitkitList, { Item: BitkitListItem });\n"],"mappings":";;;;;;;;AAoBA,IAAM,CAAC,oBAAoB,wBAAwB,gBAAiC;CAClF,MAAM;CACN,UAAU;CACV,cAAc;AAChB,CAAC;AAWD,IAAM,aAAa,YAAkE,OAAO,QAAQ;CAClG,MAAM,EAAE,UAAU,eAAe,WAAW,OAAO,MAAM,UAAU,aAAa,GAAG,SAAS;CAE5F,MAAM,YACJ,YAAY,YACP;EAAE,IAAI;EAAM,cAAc;CAAc,IACzC,YAAY,cACT;EAAE,IAAI;EAAM,cAAc;CAAc,IACzC,CAAC;CAET,OACE,oBAAC,oBAAD;EAAoB,OAAO;GAAE;GAAM;EAAQ;YACzC,oBAAC,KAAK,MAAN;GAAgB;GAAmB;GAAoB;GAAM,GAAI;GAAW,GAAI;GAC7E;EACQ,CAAA;CACO,CAAA;AAExB,CAAC;AAED,WAAW,cAAc;AAWzB,IAAM,sBAA2D;CAC/D,IAAI;CACJ,IAAI;AACN;AAEA,IAAM,iBAAiB,YAAgD,OAAO,QAAQ;CACpF,MAAM,EAAE,UAAU,YAAY,MAAM,MAAM,cAAc;CACxD,MAAM,EAAE,MAAM,YAAY,qBAAqB;CAE/C,MAAM,UAAU,aACd,qBAAC,KAAD;EAAK,SAAQ;EAAO,MAAK;EAAI,eAAc;EAAS,UAAS;YAA7D,CACG,UACD,oBAAC,MAAD;GAAM,OAAM;GAAiB,WAAU;aACpC;EACG,CAAA,CACH;MAEL;CAGF,IAAI,YAAY,WACd,OACE,qBAAC,KAAK,MAAN;EAAgB;EAAK,kBAAiB;EAAc,KAAK,aAAa,OAAO,KAAA;YAA7E,CACG,OACC,oBAAC,KAAK,WAAN;GAAgB,OAAO,aAAa;aAClC,oBAAC,MAAD,EAAM,MAAM,oBAAoB,MAAQ,CAAA;EAC1B,CAAA,IAEhB,oBAAC,KAAK,WAAN,EAAgB,SAAS,EAAE,SAAS,6BAA2B,EAAI,CAAA,GAEpE,OACQ;;CAIf,IAAI,YAAY,aACd,OACE,qBAAC,KAAK,MAAN;EACO;EACL,kBAAiB;EACjB,KAAK,aAAa,OAAO;EACzB,gBAAgB,aAAa,MAAM,KAAA;YAJrC,CAMG,OACC,oBAAC,KAAK,WAAN;GAAgB,OAAO,aAAa;aAClC,oBAAC,MAAD,EAAM,MAAM,oBAAoB,MAAQ,CAAA;EAC1B,CAAA,IAEhB,oBAAC,KAAK,WAAN;GACE,SAAS,EAAE,SAAS,uBAAuB;GAC3C,YAAW;GACX,cAAa;GACb,OAAM;GACN,QAAQ,aAAa,OAAO;GAK5B,aAAa,aAAa,KAAA,IAAY;GACtC,UAAS;GACT,WAAU;GACV,OAAO,aAAa,OAAO;EAC5B,CAAA,GAEF,OACQ;;CAKf,IAAI,MACF,OACE,qBAAC,KAAK,MAAN;EAAgB;EAAK,KAAK,aAAa,OAAO;YAA9C,CACE,oBAAC,KAAK,WAAN;GAAgB,OAAO,aAAa;aAClC,oBAAC,MAAD,EAAM,MAAM,oBAAoB,MAAQ,CAAA;EAC1B,CAAA,GACf,OACQ;;CAIf,OACE,qBAAC,KAAK,MAAN;EAAgB;EAAK,KAAK,aAAa,OAAO,KAAA;YAA9C,CACE,oBAAC,KAAK,WAAN;GAAgB,eAAA;aAAY;EAAiB,CAAA,GAC5C,OACQ;;AAEf,CAAC;AAED,eAAe,cAAc;AAE7B,IAAA,qBAAe,kBAAkB,YAAY,EAAE,MAAM,eAAe,CAAC"}
|
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
import { ListCollection } from '@chakra-ui/react/collection';
|
|
2
|
+
import { ReactNode } from 'react';
|
|
2
3
|
import { BitkitSelectMenuEmptyStateProps, BitkitSelectMenuSearchProps } from '../BitkitSelectMenu/BitkitSelectMenu';
|
|
3
4
|
import { BitkitSelectMenuActionChild } from '../BitkitSelectMenu/BitkitSelectMenuAction';
|
|
4
5
|
export type BitkitMultiselectMenuItemProps = {
|
|
5
6
|
value: string;
|
|
6
7
|
label: string;
|
|
7
8
|
group?: string;
|
|
8
|
-
helperText?:
|
|
9
|
+
helperText?: ReactNode;
|
|
9
10
|
disabled?: boolean;
|
|
10
11
|
loading?: boolean;
|
|
11
12
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitMultiselectMenu.js","names":[],"sources":["../../../lib/components/BitkitMultiselectMenu/BitkitMultiselectMenu.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { type ListCollection } from '@chakra-ui/react/collection';\nimport { Select } from '@chakra-ui/react/select';\nimport { Spinner } from '@chakra-ui/react/spinner';\nimport { type SystemStyleObject, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { forwardRef } from 'react';\n\nimport { IconCheck } from '../../icons';\nimport {\n type BitkitSelectMenuEmptyStateProps,\n type BitkitSelectMenuSearchProps,\n} from '../BitkitSelectMenu/BitkitSelectMenu';\nimport { type BitkitSelectMenuActionChild } from '../BitkitSelectMenu/BitkitSelectMenuAction';\nimport { SelectMenuShell } from '../BitkitSelectMenu/SelectMenuShell';\n\nexport type BitkitMultiselectMenuItemProps = {\n value: string;\n label: string;\n group?: string;\n helperText?:
|
|
1
|
+
{"version":3,"file":"BitkitMultiselectMenu.js","names":[],"sources":["../../../lib/components/BitkitMultiselectMenu/BitkitMultiselectMenu.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { type ListCollection } from '@chakra-ui/react/collection';\nimport { Select } from '@chakra-ui/react/select';\nimport { Spinner } from '@chakra-ui/react/spinner';\nimport { type SystemStyleObject, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { forwardRef, type ReactNode } from 'react';\n\nimport { IconCheck } from '../../icons';\nimport {\n type BitkitSelectMenuEmptyStateProps,\n type BitkitSelectMenuSearchProps,\n} from '../BitkitSelectMenu/BitkitSelectMenu';\nimport { type BitkitSelectMenuActionChild } from '../BitkitSelectMenu/BitkitSelectMenuAction';\nimport { SelectMenuShell } from '../BitkitSelectMenu/SelectMenuShell';\n\nexport type BitkitMultiselectMenuItemProps = {\n value: string;\n label: string;\n group?: string;\n helperText?: ReactNode;\n disabled?: boolean;\n loading?: boolean;\n};\n\nexport type BitkitMultiselectMenuProps = {\n children?: BitkitSelectMenuActionChild;\n collection: ListCollection<BitkitMultiselectMenuItemProps>;\n isLoading?: boolean;\n size?: 'md' | 'lg';\n} & BitkitSelectMenuSearchProps &\n BitkitSelectMenuEmptyStateProps;\n\nconst BitkitMultiselectMenu = forwardRef<HTMLDivElement, BitkitMultiselectMenuProps>((props, ref) => {\n const { children, collection, size, ...shellProps } = props;\n const recipe = useSlotRecipe({ key: 'select' });\n const styles = recipe({ size });\n const iconSize = size === 'md' ? '16' : '24';\n\n return (\n <SelectMenuShell\n NS={Select}\n collection={collection}\n contentRef={ref}\n iconSize={iconSize}\n renderItem={(item) => <MultiselectMenuItem key={item.value} item={item} iconSize={iconSize} styles={styles} />}\n size={size}\n styles={styles}\n {...shellProps}\n >\n {children}\n </SelectMenuShell>\n );\n});\n\nBitkitMultiselectMenu.displayName = 'BitkitMultiselectMenu';\n\ntype MultiselectMenuItemRenderProps = {\n item: BitkitMultiselectMenuItemProps;\n iconSize: '16' | '24';\n styles: Record<string, SystemStyleObject>;\n};\n\nconst MultiselectMenuItem = ({ item, iconSize, styles }: MultiselectMenuItemRenderProps) => {\n if (item.loading) {\n // Rendered as a plain Box, not Select.Item — Zag's state machine won't track it\n // as an option, so keyboard nav skips it and it can't be selected.\n return (\n <Box css={styles.item}>\n <Spinner variant=\"purple\" css={styles.itemLoading} />\n <Text css={styles.itemLoadingLabel}>Loading...</Text>\n </Box>\n );\n }\n\n return (\n <Select.Item css={styles.item} item={item}>\n <Box css={styles.checkbox} data-slot=\"checkbox\">\n <IconCheck size={iconSize} css={styles.checkmark} data-slot=\"checkmark\" />\n </Box>\n <Box css={styles.itemContent}>\n <Text css={styles.itemLabel}>{item.label}</Text>\n {item.helperText && <Text css={styles.itemHelperText}>{item.helperText}</Text>}\n </Box>\n </Select.Item>\n );\n};\n\nexport default BitkitMultiselectMenu;\n"],"mappings":";;;;;;;;;;AAiCA,IAAM,wBAAwB,YAAwD,OAAO,QAAQ;CACnG,MAAM,EAAE,UAAU,YAAY,MAAM,GAAG,eAAe;CAEtD,MAAM,SADS,cAAc,EAAE,KAAK,SAAS,CAC9B,EAAO,EAAE,KAAK,CAAC;CAC9B,MAAM,WAAW,SAAS,OAAO,OAAO;CAExC,OACE,oBAAC,iBAAD;EACE,IAAI;EACQ;EACZ,YAAY;EACF;EACV,aAAa,SAAS,oBAAC,qBAAD;GAA4C;GAAgB;GAAkB;EAAS,GAA7D,KAAK,KAAwD;EACvG;EACE;EACR,GAAI;EAEH;CACc,CAAA;AAErB,CAAC;AAED,sBAAsB,cAAc;AAQpC,IAAM,uBAAuB,EAAE,MAAM,UAAU,aAA6C;CAC1F,IAAI,KAAK,SAGP,OACE,qBAAC,KAAD;EAAK,KAAK,OAAO;YAAjB,CACE,oBAAC,SAAD;GAAS,SAAQ;GAAS,KAAK,OAAO;EAAc,CAAA,GACpD,oBAAC,MAAD;GAAM,KAAK,OAAO;aAAkB;EAAgB,CAAA,CACjD;;CAIT,OACE,qBAAC,OAAO,MAAR;EAAa,KAAK,OAAO;EAAY;YAArC,CACE,oBAAC,KAAD;GAAK,KAAK,OAAO;GAAU,aAAU;aACnC,oBAAC,WAAD;IAAW,MAAM;IAAU,KAAK,OAAO;IAAW,aAAU;GAAa,CAAA;EACtE,CAAA,GACL,qBAAC,KAAD;GAAK,KAAK,OAAO;aAAjB,CACE,oBAAC,MAAD;IAAM,KAAK,OAAO;cAAY,KAAK;GAAY,CAAA,GAC9C,KAAK,cAAc,oBAAC,MAAD;IAAM,KAAK,OAAO;cAAiB,KAAK;GAAiB,CAAA,CAC1E;IACM;;AAEjB"}
|
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
import { RadioGroup } from '@chakra-ui/react/radio-group';
|
|
2
|
-
import { InputHTMLAttributes } from 'react';
|
|
2
|
+
import { InputHTMLAttributes, ReactNode } from 'react';
|
|
3
3
|
export type BitkitRadioProps = {
|
|
4
4
|
badge?: 'off' | 'on';
|
|
5
|
-
helperText?:
|
|
5
|
+
helperText?: ReactNode;
|
|
6
6
|
inputProps?: InputHTMLAttributes<HTMLInputElement>;
|
|
7
|
-
labelText:
|
|
7
|
+
labelText: ReactNode;
|
|
8
8
|
state?: 'disabled' | 'skeleton';
|
|
9
9
|
} & Omit<RadioGroup.ItemProps, 'disabled'>;
|
|
10
10
|
declare const BitkitRadio: import('react').ForwardRefExoticComponent<{
|
|
11
11
|
badge?: "off" | "on";
|
|
12
|
-
helperText?:
|
|
12
|
+
helperText?: ReactNode;
|
|
13
13
|
inputProps?: InputHTMLAttributes<HTMLInputElement>;
|
|
14
|
-
labelText:
|
|
14
|
+
labelText: ReactNode;
|
|
15
15
|
state?: "disabled" | "skeleton";
|
|
16
16
|
} & Omit<RadioGroup.ItemProps, "disabled"> & import('react').RefAttributes<HTMLInputElement>>;
|
|
17
17
|
export default BitkitRadio;
|
|
@@ -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 } from 'react';\n\nimport BitkitBadge from '../BitkitBadge/BitkitBadge';\n\nexport type BitkitRadioProps = {\n badge?: 'off' | 'on';\n helperText?:
|
|
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\nexport type BitkitRadioProps = {\n badge?: 'off' | 'on';\n helperText?: ReactNode;\n inputProps?: InputHTMLAttributes<HTMLInputElement>;\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 colorPalette={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=\"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":";;;;;;;AAeA,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;YAArD;GACE,oBAAC,WAAW,iBAAZ;IAAiC;IAAK,GAAI;GAAa,CAAA;GACvD,oBAAC,UAAD;IAAU,cAAa;IAAM,SAAS,UAAU;cAC9C,oBAAC,WAAW,eAAZ,CAA2B,CAAA;GACnB,CAAA;GACT,CAAC,CAAC,SACD,oBAAC,UAAD;IAAU,SAAS,UAAU;cAC3B,oBAAC,aAAD;KAAa,cAAc,UAAU,OAAO,UAAU;KAAW,OAAM;eACpE;IACU,CAAA;GACL,CAAA;GAEZ,oBAAC,UAAD;IAAU,SAAS,UAAU;cAC3B,qBAAC,WAAW,UAAZ;KAAqB,IAAG;eAAxB,CACG,WACA,CAAC,CAAC,cACD,oBAAC,MAAD;MAAM,OAAM;MAAc,WAAU;gBACjC;KACG,CAAA,CAEW;;GACb,CAAA;EACK;;AAErB,CAAC;AAED,YAAY,cAAc"}
|
|
@@ -3,13 +3,13 @@ import { RadioGroupRootProps } from '@chakra-ui/react/radio-group';
|
|
|
3
3
|
import { ReactNode } from 'react';
|
|
4
4
|
export interface BitkitRadioGroupProps extends Fieldset.RootProps {
|
|
5
5
|
children: ReactNode;
|
|
6
|
-
errorText?:
|
|
6
|
+
errorText?: ReactNode;
|
|
7
7
|
/**
|
|
8
8
|
* Visible legend rendered above the group. Optional — if you omit it, pass `aria-label` or
|
|
9
9
|
* `aria-labelledby` instead so the fieldset still has an accessible name.
|
|
10
10
|
*/
|
|
11
11
|
groupLabel?: string;
|
|
12
|
-
helperText?:
|
|
12
|
+
helperText?: ReactNode;
|
|
13
13
|
layout?: RadioGroupRootProps['orientation'];
|
|
14
14
|
name?: RadioGroupRootProps['name'];
|
|
15
15
|
onValueChange: RadioGroupRootProps['onValueChange'];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitRadioGroup.js","names":[],"sources":["../../../lib/components/BitkitRadioGroup/BitkitRadioGroup.tsx"],"sourcesContent":["import { Fieldset } from '@chakra-ui/react/fieldset';\nimport { RadioGroup, type RadioGroupRootProps } from '@chakra-ui/react/radio-group';\nimport { forwardRef, type ReactNode } from 'react';\n\nexport interface BitkitRadioGroupProps extends Fieldset.RootProps {\n children: ReactNode;\n errorText?:
|
|
1
|
+
{"version":3,"file":"BitkitRadioGroup.js","names":[],"sources":["../../../lib/components/BitkitRadioGroup/BitkitRadioGroup.tsx"],"sourcesContent":["import { Fieldset } from '@chakra-ui/react/fieldset';\nimport { RadioGroup, type RadioGroupRootProps } from '@chakra-ui/react/radio-group';\nimport { forwardRef, type ReactNode } from 'react';\n\nexport interface BitkitRadioGroupProps extends Fieldset.RootProps {\n children: ReactNode;\n errorText?: ReactNode;\n /**\n * Visible legend rendered above the group. Optional — if you omit it, pass `aria-label` or\n * `aria-labelledby` instead so the fieldset still has an accessible name.\n */\n groupLabel?: string;\n helperText?: ReactNode;\n layout?: RadioGroupRootProps['orientation'];\n name?: RadioGroupRootProps['name'];\n onValueChange: RadioGroupRootProps['onValueChange'];\n radioGroupRootProps?: RadioGroupRootProps;\n size?: RadioGroupRootProps['size'];\n value: RadioGroupRootProps['value'];\n}\n\nconst BitkitRadioGroup = forwardRef<HTMLFieldSetElement, BitkitRadioGroupProps>((props, ref) => {\n const {\n children,\n errorText,\n helperText,\n groupLabel,\n layout,\n name,\n onValueChange,\n radioGroupRootProps,\n size,\n value,\n ...rest\n } = props;\n const hasHeader = !!groupLabel || !!helperText;\n return (\n <Fieldset.Root ref={ref} {...rest} invalid={rest.invalid || !!errorText}>\n {groupLabel && <Fieldset.Legend>{groupLabel}</Fieldset.Legend>}\n {!!helperText && <Fieldset.HelperText>{helperText}</Fieldset.HelperText>}\n <Fieldset.Content marginBlockStart={hasHeader ? '12' : undefined} asChild>\n <RadioGroup.Root\n name={name}\n size={size}\n orientation={layout}\n onValueChange={onValueChange}\n value={value}\n {...radioGroupRootProps}\n >\n {children}\n </RadioGroup.Root>\n </Fieldset.Content>\n {!!errorText && <Fieldset.ErrorText>{errorText}</Fieldset.ErrorText>}\n </Fieldset.Root>\n );\n});\n\nBitkitRadioGroup.displayName = 'BitkitRadioGroup';\n\nexport default BitkitRadioGroup;\n"],"mappings":";;;;;AAqBA,IAAM,mBAAmB,YAAwD,OAAO,QAAQ;CAC9F,MAAM,EACJ,UACA,WACA,YACA,YACA,QACA,MACA,eACA,qBACA,MACA,OACA,GAAG,SACD;CACJ,MAAM,YAAY,CAAC,CAAC,cAAc,CAAC,CAAC;CACpC,OACE,qBAAC,SAAS,MAAV;EAAoB;EAAK,GAAI;EAAM,SAAS,KAAK,WAAW,CAAC,CAAC;YAA9D;GACG,cAAc,oBAAC,SAAS,QAAV,EAAA,UAAkB,WAA4B,CAAA;GAC5D,CAAC,CAAC,cAAc,oBAAC,SAAS,YAAV,EAAA,UAAsB,WAAgC,CAAA;GACvE,oBAAC,SAAS,SAAV;IAAkB,kBAAkB,YAAY,OAAO,KAAA;IAAW,SAAA;cAChE,oBAAC,WAAW,MAAZ;KACQ;KACA;KACN,aAAa;KACE;KACR;KACP,GAAI;KAEH;IACc,CAAA;GACD,CAAA;GACjB,CAAC,CAAC,aAAa,oBAAC,SAAS,WAAV,EAAA,UAAqB,UAA8B,CAAA;EACtD;;AAEnB,CAAC;AAED,iBAAiB,cAAc"}
|
|
@@ -3,7 +3,7 @@ import { ReactNode } from 'react';
|
|
|
3
3
|
import { BitkitIconComponent } from '../../icons';
|
|
4
4
|
export interface BitkitSectionHeadingProps extends Omit<BoxProps, 'icon'> {
|
|
5
5
|
children?: ReactNode;
|
|
6
|
-
helperText?:
|
|
6
|
+
helperText?: ReactNode | ReactNode[];
|
|
7
7
|
helperTooltip?: string;
|
|
8
8
|
icon?: BitkitIconComponent;
|
|
9
9
|
label: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitSectionHeading.js","names":[],"sources":["../../../lib/components/BitkitSectionHeading/BitkitSectionHeading.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { chakra, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef, Fragment, type ReactNode } from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\nimport IconInfoCircle from '../../icons/IconInfoCircle';\nimport BitkitTooltip from '../BitkitTooltip/BitkitTooltip';\n\nexport interface BitkitSectionHeadingProps extends Omit<BoxProps, 'icon'> {\n children?: ReactNode;\n helperText?:
|
|
1
|
+
{"version":3,"file":"BitkitSectionHeading.js","names":[],"sources":["../../../lib/components/BitkitSectionHeading/BitkitSectionHeading.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { chakra, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef, Fragment, type ReactNode } from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\nimport IconInfoCircle from '../../icons/IconInfoCircle';\nimport BitkitTooltip from '../BitkitTooltip/BitkitTooltip';\n\nexport interface BitkitSectionHeadingProps extends Omit<BoxProps, 'icon'> {\n children?: ReactNode;\n helperText?: ReactNode | ReactNode[];\n helperTooltip?: string;\n icon?: BitkitIconComponent;\n label: string;\n}\n\nconst HELPER_DOT = '\\u2022';\n\nconst BitkitSectionHeading = forwardRef<HTMLDivElement, BitkitSectionHeadingProps>((props, ref) => {\n const { children, helperText, helperTooltip, icon: Icon, label, ...rest } = props;\n\n const recipe = useSlotRecipe({ key: 'sectionHeading' });\n const styles = recipe();\n\n const helperItems = Array.isArray(helperText) ? helperText : helperText ? [helperText] : [];\n const hasHelper = helperItems.length > 0 || Boolean(helperTooltip);\n\n return (\n <Box css={styles.root} ref={ref} {...rest}>\n <chakra.div css={styles.contentBlock}>\n <chakra.div css={styles.titleBlock}>\n {Icon && <Icon css={styles.icon} size=\"24\" />}\n <chakra.h3 css={styles.label}>{label}</chakra.h3>\n </chakra.div>\n {hasHelper && (\n <chakra.div css={styles.helperBlock}>\n {helperItems.map((text, index) => (\n <Fragment key={index}>\n {index > 0 && (\n <chakra.span color=\"text/tertiary\" flexShrink={0} textStyle=\"body/md/regular\">\n {HELPER_DOT}\n </chakra.span>\n )}\n <chakra.span css={styles.helperText}>{text}</chakra.span>\n </Fragment>\n ))}\n {helperTooltip && (\n <BitkitTooltip text={helperTooltip}>\n <IconInfoCircle color=\"icon/tertiary\" size=\"16\" />\n </BitkitTooltip>\n )}\n </chakra.div>\n )}\n </chakra.div>\n {children}\n </Box>\n );\n});\n\nBitkitSectionHeading.displayName = 'BitkitSectionHeading';\n\nexport default BitkitSectionHeading;\n"],"mappings":";;;;;;;AAgBA,IAAM,aAAa;AAEnB,IAAM,uBAAuB,YAAuD,OAAO,QAAQ;CACjG,MAAM,EAAE,UAAU,YAAY,eAAe,MAAM,MAAM,OAAO,GAAG,SAAS;CAG5E,MAAM,SADS,cAAc,EAAE,KAAK,iBAAiB,CACtC,EAAO;CAEtB,MAAM,cAAc,MAAM,QAAQ,UAAU,IAAI,aAAa,aAAa,CAAC,UAAU,IAAI,CAAC;CAC1F,MAAM,YAAY,YAAY,SAAS,KAAK,QAAQ,aAAa;CAEjE,OACE,qBAAC,KAAD;EAAK,KAAK,OAAO;EAAW;EAAK,GAAI;YAArC,CACE,qBAAC,OAAO,KAAR;GAAY,KAAK,OAAO;aAAxB,CACE,qBAAC,OAAO,KAAR;IAAY,KAAK,OAAO;cAAxB,CACG,QAAQ,oBAAC,MAAD;KAAM,KAAK,OAAO;KAAM,MAAK;IAAM,CAAA,GAC5C,oBAAC,OAAO,IAAR;KAAW,KAAK,OAAO;eAAQ;IAAiB,CAAA,CACtC;OACX,aACC,qBAAC,OAAO,KAAR;IAAY,KAAK,OAAO;cAAxB,CACG,YAAY,KAAK,MAAM,UACtB,qBAAC,UAAD,EAAA,UAAA,CACG,QAAQ,KACP,oBAAC,OAAO,MAAR;KAAa,OAAM;KAAgB,YAAY;KAAG,WAAU;eACzD;IACU,CAAA,GAEf,oBAAC,OAAO,MAAR;KAAa,KAAK,OAAO;eAAa;IAAkB,CAAA,CAChD,EAAA,GAPK,KAOL,CACX,GACA,iBACC,oBAAC,eAAD;KAAe,MAAM;eACnB,oBAAC,gBAAD;MAAgB,OAAM;MAAgB,MAAK;KAAM,CAAA;IACpC,CAAA,CAEP;KAEJ;MACX,QACE;;AAET,CAAC;AAED,qBAAqB,cAAc"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { ListCollection } from '@chakra-ui/react/collection';
|
|
2
2
|
import { SelectContentProps } from '@chakra-ui/react/select';
|
|
3
|
+
import { ReactNode } from 'react';
|
|
3
4
|
import { BitkitIconComponent } from '../../icons';
|
|
4
5
|
import { BitkitSelectMenuActionChild } from './BitkitSelectMenuAction';
|
|
5
6
|
export { type BitkitSelectMenuActionProps } from './BitkitSelectMenuAction';
|
|
@@ -14,7 +15,7 @@ export type BitkitSelectMenuItemProps = {
|
|
|
14
15
|
group?: string;
|
|
15
16
|
icon?: BitkitIconComponent;
|
|
16
17
|
avatar?: string;
|
|
17
|
-
helperText?:
|
|
18
|
+
helperText?: ReactNode;
|
|
18
19
|
disabled?: boolean;
|
|
19
20
|
loading?: boolean;
|
|
20
21
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitSelectMenu.js","names":[],"sources":["../../../lib/components/BitkitSelectMenu/BitkitSelectMenu.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { type ListCollection } from '@chakra-ui/react/collection';\nimport { Combobox } from '@chakra-ui/react/combobox';\nimport { Select, type SelectContentProps } from '@chakra-ui/react/select';\nimport { Spinner } from '@chakra-ui/react/spinner';\nimport { type SystemStyleObject, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { forwardRef } from 'react';\n\nimport { type BitkitIconComponent, IconCheck } from '../../icons';\nimport BitkitAvatar from '../BitkitAvatar/BitkitAvatar';\nimport { type BitkitSelectMenuActionChild } from './BitkitSelectMenuAction';\nimport { SelectMenuShell } from './SelectMenuShell';\n\nexport { type BitkitSelectMenuActionProps } from './BitkitSelectMenuAction';\n\nexport type BitkitSelectMenuSearchProps = {\n /** When provided, a search input is rendered above the menu items. `searchValue` is required alongside. */\n onSearchChange?: (searchText: string) => void;\n searchValue?: string;\n};\n\nexport type BitkitSelectMenuItemProps = {\n value: string;\n label: string;\n group?: string;\n icon?: BitkitIconComponent;\n avatar?: string;\n helperText?:
|
|
1
|
+
{"version":3,"file":"BitkitSelectMenu.js","names":[],"sources":["../../../lib/components/BitkitSelectMenu/BitkitSelectMenu.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { type ListCollection } from '@chakra-ui/react/collection';\nimport { Combobox } from '@chakra-ui/react/combobox';\nimport { Select, type SelectContentProps } from '@chakra-ui/react/select';\nimport { Spinner } from '@chakra-ui/react/spinner';\nimport { type SystemStyleObject, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { forwardRef, type ReactNode } from 'react';\n\nimport { type BitkitIconComponent, IconCheck } from '../../icons';\nimport BitkitAvatar from '../BitkitAvatar/BitkitAvatar';\nimport { type BitkitSelectMenuActionChild } from './BitkitSelectMenuAction';\nimport { SelectMenuShell } from './SelectMenuShell';\n\nexport { type BitkitSelectMenuActionProps } from './BitkitSelectMenuAction';\n\nexport type BitkitSelectMenuSearchProps = {\n /** When provided, a search input is rendered above the menu items. `searchValue` is required alongside. */\n onSearchChange?: (searchText: string) => void;\n searchValue?: string;\n};\n\nexport type BitkitSelectMenuItemProps = {\n value: string;\n label: string;\n group?: string;\n icon?: BitkitIconComponent;\n avatar?: string;\n helperText?: ReactNode;\n disabled?: boolean;\n loading?: boolean;\n};\n\nexport type BitkitSelectMenuEmptyStateProps = {\n emptyLabel?: string;\n emptyHelperText?: string;\n};\n\nexport type BitkitSelectMenuProps = {\n children?: BitkitSelectMenuActionChild;\n collection: ListCollection<BitkitSelectMenuItemProps>;\n /** Forwarded to the underlying Select/Combobox.Content. Kept for internal callers\n * (e.g. BitkitCalendar's in-grid selects that need to tweak max-height / width). The\n * public components (BitkitSelect, BitkitCombobox) do not expose this escape hatch. */\n contentProps?: SelectContentProps;\n isLoading?: boolean;\n size?: 'md' | 'lg';\n variant?: 'select' | 'combobox';\n} & BitkitSelectMenuSearchProps &\n BitkitSelectMenuEmptyStateProps;\n\nconst BitkitSelectMenu = forwardRef<HTMLDivElement, BitkitSelectMenuProps>((props, ref) => {\n const { children, collection, variant = 'select', size, ...shellProps } = props;\n const NS = variant === 'combobox' ? Combobox : Select;\n const recipe = useSlotRecipe({ key: 'select' });\n const styles = recipe({ size });\n const iconSize = size === 'md' ? '16' : '24';\n\n return (\n <SelectMenuShell\n NS={NS}\n collection={collection}\n contentRef={ref}\n iconSize={iconSize}\n renderItem={(item) => <SelectMenuItem key={item.value} NS={NS} item={item} iconSize={iconSize} styles={styles} />}\n size={size}\n styles={styles}\n {...shellProps}\n >\n {children}\n </SelectMenuShell>\n );\n});\n\nBitkitSelectMenu.displayName = 'BitkitSelectMenu';\n\ntype SelectMenuItemRenderProps = {\n NS: typeof Select | typeof Combobox;\n item: BitkitSelectMenuItemProps;\n iconSize: '16' | '24';\n styles: Record<string, SystemStyleObject>;\n};\n\nconst SelectMenuItem = ({ NS, item, iconSize, styles }: SelectMenuItemRenderProps) => {\n const Icon = item.icon;\n\n if (item.loading) {\n // Rendered as a plain Box, not NS.Item — Zag's state machine won't track it as\n // an option, so keyboard nav skips it and it can't be selected.\n return (\n <Box css={styles.item}>\n <Spinner variant=\"purple\" css={styles.itemLoading} />\n <Text css={styles.itemLoadingLabel}>Loading...</Text>\n </Box>\n );\n }\n\n return (\n <NS.Item css={styles.item} item={item}>\n {item.avatar && (\n <Box data-slot=\"avatar\" css={{ '[data-disabled] &': { opacity: 0.5 } }}>\n <BitkitAvatar variant=\"image\" src={item.avatar} name={item.label} size={iconSize === '24' ? '32' : '24'} />\n </Box>\n )}\n <Box css={styles.itemContent}>\n <Box display=\"flex\" alignItems=\"center\" gap=\"8\">\n {Icon && !item.avatar && <Icon color=\"icon/primary\" size={iconSize} />}\n <Text css={styles.itemLabel}>{item.label}</Text>\n </Box>\n {item.helperText && <Text css={styles.itemHelperText}>{item.helperText}</Text>}\n </Box>\n <NS.ItemIndicator asChild>\n <IconCheck size={iconSize} css={styles.itemIndicator} />\n </NS.ItemIndicator>\n </NS.Item>\n );\n};\n\nexport default BitkitSelectMenu;\n"],"mappings":";;;;;;;;;;;;AAmDA,IAAM,mBAAmB,YAAmD,OAAO,QAAQ;CACzF,MAAM,EAAE,UAAU,YAAY,UAAU,UAAU,MAAM,GAAG,eAAe;CAC1E,MAAM,KAAK,YAAY,aAAa,WAAW;CAE/C,MAAM,SADS,cAAc,EAAE,KAAK,SAAS,CAC9B,EAAO,EAAE,KAAK,CAAC;CAC9B,MAAM,WAAW,SAAS,OAAO,OAAO;CAExC,OACE,oBAAC,iBAAD;EACM;EACQ;EACZ,YAAY;EACF;EACV,aAAa,SAAS,oBAAC,gBAAD;GAAqC;GAAU;GAAgB;GAAkB;EAAS,GAArE,KAAK,KAAgE;EAC1G;EACE;EACR,GAAI;EAEH;CACc,CAAA;AAErB,CAAC;AAED,iBAAiB,cAAc;AAS/B,IAAM,kBAAkB,EAAE,IAAI,MAAM,UAAU,aAAwC;CACpF,MAAM,OAAO,KAAK;CAElB,IAAI,KAAK,SAGP,OACE,qBAAC,KAAD;EAAK,KAAK,OAAO;YAAjB,CACE,oBAAC,SAAD;GAAS,SAAQ;GAAS,KAAK,OAAO;EAAc,CAAA,GACpD,oBAAC,MAAD;GAAM,KAAK,OAAO;aAAkB;EAAgB,CAAA,CACjD;;CAIT,OACE,qBAAC,GAAG,MAAJ;EAAS,KAAK,OAAO;EAAY;YAAjC;GACG,KAAK,UACJ,oBAAC,KAAD;IAAK,aAAU;IAAS,KAAK,EAAE,qBAAqB,EAAE,SAAS,GAAI,EAAE;cACnE,oBAAC,cAAD;KAAc,SAAQ;KAAQ,KAAK,KAAK;KAAQ,MAAM,KAAK;KAAO,MAAM,aAAa,OAAO,OAAO;IAAO,CAAA;GACvG,CAAA;GAEP,qBAAC,KAAD;IAAK,KAAK,OAAO;cAAjB,CACE,qBAAC,KAAD;KAAK,SAAQ;KAAO,YAAW;KAAS,KAAI;eAA5C,CACG,QAAQ,CAAC,KAAK,UAAU,oBAAC,MAAD;MAAM,OAAM;MAAe,MAAM;KAAW,CAAA,GACrE,oBAAC,MAAD;MAAM,KAAK,OAAO;gBAAY,KAAK;KAAY,CAAA,CAC5C;QACJ,KAAK,cAAc,oBAAC,MAAD;KAAM,KAAK,OAAO;eAAiB,KAAK;IAAiB,CAAA,CAC1E;;GACL,oBAAC,GAAG,eAAJ;IAAkB,SAAA;cAChB,oBAAC,WAAD;KAAW,MAAM;KAAU,KAAK,OAAO;IAAgB,CAAA;GACvC,CAAA;EACX;;AAEb"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitSteps.js","names":[],"sources":["../../../lib/components/BitkitSteps/BitkitSteps.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { Link } from '@chakra-ui/react/link';\nimport { Steps, type StepsRootProps, useStepsContext, useStepsStyles } from '@chakra-ui/react/steps';\nimport { Children, cloneElement, forwardRef, isValidElement, type ReactElement, type ReactNode } from 'react';\n\nimport IconCheck from '../../icons/IconCheck';\nimport IconSkip from '../../icons/IconSkip';\nimport { withSubComponents } from '../../utilities/withSubComponents';\nimport { useStepCardContext } from '../BitkitStepsCard/StepCardContext';\n\nexport type BitkitStepsItemState = 'disabled' | 'invalid' | 'skippable';\n\ntype EffectiveStatus = 'completed' | 'disabled' | 'inProgress' | 'invalid' | 'notStarted' | 'skippable' | 'skipped';\n\nconst getEffectiveStatus = (\n itemState: BitkitStepsItemState | undefined,\n index: number,\n step: number,\n): EffectiveStatus => {\n if (itemState === 'disabled') return 'disabled';\n if (itemState === 'invalid') return 'invalid';\n if (itemState === 'skippable') return index < step ? 'skipped' : 'skippable';\n if (index < step) return 'completed';\n if (index === step) return 'inProgress';\n return 'notStarted';\n};\n\nconst renderIndicatorContent = (index: number, status: EffectiveStatus) => {\n if (status === 'completed') return <IconCheck size=\"16\" />;\n if (status === 'skippable' || status === 'skipped') return <IconSkip size=\"16\" />;\n if (status === 'invalid') return '!';\n return index + 1;\n};\n\nconst renderLabel = (label: string, action: BitkitStepsItemProps['action']) => {\n if (!action) return label;\n\n // Links don't look like links at rest — only the underline + purple color on hover reveals\n // them. Intentional: this is a power-user affordance on the step title. The base Link recipe\n // already adds the underline on hover; we only need to swap the color.\n if (action.href) {\n return (\n <Link\n _hover={{ color: 'text/link' }}\n href={action.href}\n onClick={action.onClick}\n rel={action.isExternal ? 'noopener noreferrer' : undefined}\n target={action.isExternal ? '_blank' : undefined}\n >\n {label}\n </Link>\n );\n }\n\n return (\n <Link _hover={{ color: 'text/link' }} as=\"button\" onClick={action.onClick} type=\"button\">\n {label}\n </Link>\n );\n};\n\nexport interface BitkitStepsProps extends Omit<\n StepsRootProps,\n 'children' | 'count' | 'linear' | 'orientation' | 'step'\n> {\n children: ReactNode;\n orientation?: 'horizontal' | 'vertical';\n step?: number;\n}\n\nconst BitkitSteps = forwardRef<HTMLDivElement, BitkitStepsProps>((props, ref) => {\n const { children, orientation = 'horizontal', step: stepProp, ...rest } = props;\n const stepCardCtx = useStepCardContext();\n const step = stepProp ?? stepCardCtx?.step ?? 0;\n const count = Children.count(children);\n\n return (\n <Steps.Root ref={ref} {...rest} count={count} linear={false} orientation={orientation} step={step}>\n <Steps.List>\n {Children.map(children, (child, index) => {\n if (isValidElement(child)) {\n return cloneElement(child as ReactElement<BitkitStepsItemInternalProps>, {\n _index: index,\n _orientation: orientation,\n });\n }\n return child;\n })}\n </Steps.List>\n </Steps.Root>\n );\n});\n\nBitkitSteps.displayName = 'BitkitSteps';\n\nexport interface BitkitStepsItemProps {\n action?: {\n href?: string;\n isExternal?: boolean;\n onClick?: () => void;\n };\n helperText?:
|
|
1
|
+
{"version":3,"file":"BitkitSteps.js","names":[],"sources":["../../../lib/components/BitkitSteps/BitkitSteps.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { Link } from '@chakra-ui/react/link';\nimport { Steps, type StepsRootProps, useStepsContext, useStepsStyles } from '@chakra-ui/react/steps';\nimport { Children, cloneElement, forwardRef, isValidElement, type ReactElement, type ReactNode } from 'react';\n\nimport IconCheck from '../../icons/IconCheck';\nimport IconSkip from '../../icons/IconSkip';\nimport { withSubComponents } from '../../utilities/withSubComponents';\nimport { useStepCardContext } from '../BitkitStepsCard/StepCardContext';\n\nexport type BitkitStepsItemState = 'disabled' | 'invalid' | 'skippable';\n\ntype EffectiveStatus = 'completed' | 'disabled' | 'inProgress' | 'invalid' | 'notStarted' | 'skippable' | 'skipped';\n\nconst getEffectiveStatus = (\n itemState: BitkitStepsItemState | undefined,\n index: number,\n step: number,\n): EffectiveStatus => {\n if (itemState === 'disabled') return 'disabled';\n if (itemState === 'invalid') return 'invalid';\n if (itemState === 'skippable') return index < step ? 'skipped' : 'skippable';\n if (index < step) return 'completed';\n if (index === step) return 'inProgress';\n return 'notStarted';\n};\n\nconst renderIndicatorContent = (index: number, status: EffectiveStatus) => {\n if (status === 'completed') return <IconCheck size=\"16\" />;\n if (status === 'skippable' || status === 'skipped') return <IconSkip size=\"16\" />;\n if (status === 'invalid') return '!';\n return index + 1;\n};\n\nconst renderLabel = (label: string, action: BitkitStepsItemProps['action']) => {\n if (!action) return label;\n\n // Links don't look like links at rest — only the underline + purple color on hover reveals\n // them. Intentional: this is a power-user affordance on the step title. The base Link recipe\n // already adds the underline on hover; we only need to swap the color.\n if (action.href) {\n return (\n <Link\n _hover={{ color: 'text/link' }}\n href={action.href}\n onClick={action.onClick}\n rel={action.isExternal ? 'noopener noreferrer' : undefined}\n target={action.isExternal ? '_blank' : undefined}\n >\n {label}\n </Link>\n );\n }\n\n return (\n <Link _hover={{ color: 'text/link' }} as=\"button\" onClick={action.onClick} type=\"button\">\n {label}\n </Link>\n );\n};\n\nexport interface BitkitStepsProps extends Omit<\n StepsRootProps,\n 'children' | 'count' | 'linear' | 'orientation' | 'step'\n> {\n children: ReactNode;\n orientation?: 'horizontal' | 'vertical';\n step?: number;\n}\n\nconst BitkitSteps = forwardRef<HTMLDivElement, BitkitStepsProps>((props, ref) => {\n const { children, orientation = 'horizontal', step: stepProp, ...rest } = props;\n const stepCardCtx = useStepCardContext();\n const step = stepProp ?? stepCardCtx?.step ?? 0;\n const count = Children.count(children);\n\n return (\n <Steps.Root ref={ref} {...rest} count={count} linear={false} orientation={orientation} step={step}>\n <Steps.List>\n {Children.map(children, (child, index) => {\n if (isValidElement(child)) {\n return cloneElement(child as ReactElement<BitkitStepsItemInternalProps>, {\n _index: index,\n _orientation: orientation,\n });\n }\n return child;\n })}\n </Steps.List>\n </Steps.Root>\n );\n});\n\nBitkitSteps.displayName = 'BitkitSteps';\n\nexport interface BitkitStepsItemProps {\n action?: {\n href?: string;\n isExternal?: boolean;\n onClick?: () => void;\n };\n helperText?: ReactNode;\n label: string;\n state?: BitkitStepsItemState;\n}\n\ninterface BitkitStepsItemInternalProps extends BitkitStepsItemProps {\n _index?: number;\n _orientation?: 'horizontal' | 'vertical';\n}\n\nconst BitkitStepsItem = forwardRef<HTMLDivElement, BitkitStepsItemProps>((props, ref) => {\n const {\n _index = 0,\n _orientation = 'horizontal',\n action,\n helperText,\n label,\n state,\n } = props as BitkitStepsItemInternalProps;\n\n const styles = useStepsStyles();\n const stepsCtx = useStepsContext();\n const status = getEffectiveStatus(state, _index, stepsCtx.value);\n const resolvedAction = status === 'completed' ? action : undefined;\n const statusAttr = { 'data-step-status': status };\n\n return (\n <Steps.Item {...statusAttr} index={_index} ref={ref}>\n <Steps.Indicator {...statusAttr}>{renderIndicatorContent(_index, status)}</Steps.Indicator>\n <Box css={styles.trigger}>\n <Steps.Title {...statusAttr}>{renderLabel(label, resolvedAction)}</Steps.Title>\n {_orientation === 'vertical' && helperText && (\n <Steps.Description {...statusAttr}>{helperText}</Steps.Description>\n )}\n </Box>\n <Steps.Separator />\n </Steps.Item>\n );\n});\n\nBitkitStepsItem.displayName = 'BitkitStepsItem';\n\nexport default withSubComponents(BitkitSteps, { Item: BitkitStepsItem });\n"],"mappings":";;;;;;;;;;AAcA,IAAM,sBACJ,WACA,OACA,SACoB;CACpB,IAAI,cAAc,YAAY,OAAO;CACrC,IAAI,cAAc,WAAW,OAAO;CACpC,IAAI,cAAc,aAAa,OAAO,QAAQ,OAAO,YAAY;CACjE,IAAI,QAAQ,MAAM,OAAO;CACzB,IAAI,UAAU,MAAM,OAAO;CAC3B,OAAO;AACT;AAEA,IAAM,0BAA0B,OAAe,WAA4B;CACzE,IAAI,WAAW,aAAa,OAAO,oBAAC,WAAD,EAAW,MAAK,KAAM,CAAA;CACzD,IAAI,WAAW,eAAe,WAAW,WAAW,OAAO,oBAAC,UAAD,EAAU,MAAK,KAAM,CAAA;CAChF,IAAI,WAAW,WAAW,OAAO;CACjC,OAAO,QAAQ;AACjB;AAEA,IAAM,eAAe,OAAe,WAA2C;CAC7E,IAAI,CAAC,QAAQ,OAAO;CAKpB,IAAI,OAAO,MACT,OACE,oBAAC,MAAD;EACE,QAAQ,EAAE,OAAO,YAAY;EAC7B,MAAM,OAAO;EACb,SAAS,OAAO;EAChB,KAAK,OAAO,aAAa,wBAAwB,KAAA;EACjD,QAAQ,OAAO,aAAa,WAAW,KAAA;YAEtC;CACG,CAAA;CAIV,OACE,oBAAC,MAAD;EAAM,QAAQ,EAAE,OAAO,YAAY;EAAG,IAAG;EAAS,SAAS,OAAO;EAAS,MAAK;YAC7E;CACG,CAAA;AAEV;AAWA,IAAM,cAAc,YAA8C,OAAO,QAAQ;CAC/E,MAAM,EAAE,UAAU,cAAc,cAAc,MAAM,UAAU,GAAG,SAAS;CAC1E,MAAM,cAAc,mBAAmB;CACvC,MAAM,OAAO,YAAY,aAAa,QAAQ;CAC9C,MAAM,QAAQ,SAAS,MAAM,QAAQ;CAErC,OACE,oBAAC,MAAM,MAAP;EAAiB;EAAK,GAAI;EAAa;EAAO,QAAQ;EAAoB;EAAmB;YAC3F,oBAAC,MAAM,MAAP,EAAA,UACG,SAAS,IAAI,WAAW,OAAO,UAAU;GACxC,IAAI,eAAe,KAAK,GACtB,OAAO,aAAa,OAAqD;IACvE,QAAQ;IACR,cAAc;GAChB,CAAC;GAEH,OAAO;EACT,CAAC,EACS,CAAA;CACF,CAAA;AAEhB,CAAC;AAED,YAAY,cAAc;AAkB1B,IAAM,kBAAkB,YAAkD,OAAO,QAAQ;CACvF,MAAM,EACJ,SAAS,GACT,eAAe,cACf,QACA,YACA,OACA,UACE;CAEJ,MAAM,SAAS,eAAe;CAE9B,MAAM,SAAS,mBAAmB,OAAO,QADxB,gBACgC,EAAS,KAAK;CAC/D,MAAM,iBAAiB,WAAW,cAAc,SAAS,KAAA;CACzD,MAAM,aAAa,EAAE,oBAAoB,OAAO;CAEhD,OACE,qBAAC,MAAM,MAAP;EAAY,GAAI;EAAY,OAAO;EAAa;YAAhD;GACE,oBAAC,MAAM,WAAP;IAAiB,GAAI;cAAa,uBAAuB,QAAQ,MAAM;GAAmB,CAAA;GAC1F,qBAAC,KAAD;IAAK,KAAK,OAAO;cAAjB,CACE,oBAAC,MAAM,OAAP;KAAa,GAAI;eAAa,YAAY,OAAO,cAAc;IAAe,CAAA,GAC7E,iBAAiB,cAAc,cAC9B,oBAAC,MAAM,aAAP;KAAmB,GAAI;eAAa;IAA8B,CAAA,CAEjE;;GACL,oBAAC,MAAM,WAAP,CAAkB,CAAA;EACR;;AAEhB,CAAC;AAED,gBAAgB,cAAc;AAE9B,IAAA,sBAAe,kBAAkB,aAAa,EAAE,MAAM,gBAAgB,CAAC"}
|
|
@@ -7,7 +7,7 @@ declare const Trigger: import('react').ForwardRefExoticComponent<Tabs.TriggerPro
|
|
|
7
7
|
badge?: ReactNode;
|
|
8
8
|
children?: string;
|
|
9
9
|
icon?: BitkitIconComponent;
|
|
10
|
-
secondaryText?:
|
|
10
|
+
secondaryText?: ReactNode;
|
|
11
11
|
} & import('react').RefAttributes<HTMLButtonElement>>;
|
|
12
12
|
declare const BitkitTabs: Omit<typeof Tabs, 'Root' | 'Trigger'> & {
|
|
13
13
|
Root: typeof Root;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitTabs.js","names":[],"sources":["../../../lib/components/BitkitTabs/BitkitTabs.tsx"],"sourcesContent":["// eslint-disable-next-line no-restricted-imports\nimport { createContext } from '@chakra-ui/react';\nimport { Box } from '@chakra-ui/react/box';\nimport { Tabs } from '@chakra-ui/react/tabs';\nimport { Text } from '@chakra-ui/react/text';\nimport { forwardRef, type ReactNode } from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\n\nexport const [RootPropsProvider, useRootPropsContext] = createContext<Tabs.RootProps>({\n name: 'RootPropsContext',\n hookName: 'useRootPropsContext',\n providerName: '<RootProps />',\n});\n\nconst Root = forwardRef<HTMLDivElement, Tabs.RootProps>((props, ref) => {\n return (\n <RootPropsProvider value={props}>\n <Tabs.Root ref={ref} {...props} />\n </RootPropsProvider>\n );\n});\n\ntype TriggerProps = Tabs.TriggerProps & {\n badge?: ReactNode;\n children?: string;\n icon?: BitkitIconComponent;\n secondaryText?:
|
|
1
|
+
{"version":3,"file":"BitkitTabs.js","names":[],"sources":["../../../lib/components/BitkitTabs/BitkitTabs.tsx"],"sourcesContent":["// eslint-disable-next-line no-restricted-imports\nimport { createContext } from '@chakra-ui/react';\nimport { Box } from '@chakra-ui/react/box';\nimport { Tabs } from '@chakra-ui/react/tabs';\nimport { Text } from '@chakra-ui/react/text';\nimport { forwardRef, type ReactNode } from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\n\nexport const [RootPropsProvider, useRootPropsContext] = createContext<Tabs.RootProps>({\n name: 'RootPropsContext',\n hookName: 'useRootPropsContext',\n providerName: '<RootProps />',\n});\n\nconst Root = forwardRef<HTMLDivElement, Tabs.RootProps>((props, ref) => {\n return (\n <RootPropsProvider value={props}>\n <Tabs.Root ref={ref} {...props} />\n </RootPropsProvider>\n );\n});\n\ntype TriggerProps = Tabs.TriggerProps & {\n badge?: ReactNode;\n children?: string;\n icon?: BitkitIconComponent;\n secondaryText?: ReactNode;\n};\n\nRoot.displayName = 'BitkitTabs.Root';\n\nconst Trigger = forwardRef<HTMLButtonElement, TriggerProps>((props, ref) => {\n const { badge, children, icon: Icon, secondaryText, ...rest } = props;\n const { variant } = useRootPropsContext();\n return (\n <Tabs.Trigger ref={ref} {...rest}>\n {variant === 'line' ? (\n <>\n {Icon && <Icon size=\"24\" />}\n {children}\n {badge}\n </>\n ) : (\n <>\n <Box display=\"flex\" gap=\"16\">\n {children}\n {Icon && <Icon size=\"24\" />}\n </Box>\n {!!secondaryText && (\n <Text as=\"span\" textStyle=\"body/md/regular\" color={rest.disabled ? 'text/on-disabled' : 'text/secondary'}>\n {secondaryText}\n </Text>\n )}\n </>\n )}\n </Tabs.Trigger>\n );\n});\n\nTrigger.displayName = 'BitkitTabs.Trigger';\n\nconst BitkitTabs: Omit<typeof Tabs, 'Root' | 'Trigger'> & { Root: typeof Root; Trigger: typeof Trigger } = {\n ...Tabs,\n Root,\n Trigger,\n};\n\nBitkitTabs.Content.displayName = 'BitkitTabs.Content';\nBitkitTabs.List.displayName = 'BitkitTabs.List';\nBitkitTabs.ContentGroup.displayName = 'BitkitTabs.ContentGroup';\nBitkitTabs.Root.displayName = 'BitkitTabs.Root';\n\nexport default BitkitTabs;\n"],"mappings":";;;;;;;AASA,IAAa,CAAC,mBAAmB,uBAAuB,gBAA8B;CACpF,MAAM;CACN,UAAU;CACV,cAAc;AAChB,CAAC;AAED,IAAM,OAAO,YAA4C,OAAO,QAAQ;CACtE,OACE,oBAAC,mBAAD;EAAmB,OAAO;YACxB,oBAAC,KAAK,MAAN;GAAgB;GAAK,GAAI;EAAQ,CAAA;CAChB,CAAA;AAEvB,CAAC;AASD,KAAK,cAAc;AAEnB,IAAM,UAAU,YAA6C,OAAO,QAAQ;CAC1E,MAAM,EAAE,OAAO,UAAU,MAAM,MAAM,eAAe,GAAG,SAAS;CAChE,MAAM,EAAE,YAAY,oBAAoB;CACxC,OACE,oBAAC,KAAK,SAAN;EAAmB;EAAK,GAAI;YACzB,YAAY,SACX,qBAAA,YAAA,EAAA,UAAA;GACG,QAAQ,oBAAC,MAAD,EAAM,MAAK,KAAM,CAAA;GACzB;GACA;EACD,EAAA,CAAA,IAEF,qBAAA,YAAA,EAAA,UAAA,CACE,qBAAC,KAAD;GAAK,SAAQ;GAAO,KAAI;aAAxB,CACG,UACA,QAAQ,oBAAC,MAAD,EAAM,MAAK,KAAM,CAAA,CACvB;MACJ,CAAC,CAAC,iBACD,oBAAC,MAAD;GAAM,IAAG;GAAO,WAAU;GAAkB,OAAO,KAAK,WAAW,qBAAqB;aACrF;EACG,CAAA,CAER,EAAA,CAAA;CAEQ,CAAA;AAElB,CAAC;AAED,QAAQ,cAAc;AAEtB,IAAM,aAAqG;CACzG,GAAG;CACH;CACA;AACF;AAEA,WAAW,QAAQ,cAAc;AACjC,WAAW,KAAK,cAAc;AAC9B,WAAW,aAAa,cAAc;AACtC,WAAW,KAAK,cAAc"}
|
|
@@ -1,12 +1,13 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
1
2
|
import { NotificationVariant } from '../../theme/common/AlertAndToast.common';
|
|
2
3
|
import { NotificationAction } from '../common/notificationMaps';
|
|
3
4
|
export type BitkitToastVariant = NotificationVariant;
|
|
4
5
|
export type BitkitToastProps = {
|
|
5
6
|
action?: NotificationAction;
|
|
6
7
|
dismissible?: boolean;
|
|
7
|
-
messageText:
|
|
8
|
+
messageText: ReactNode;
|
|
8
9
|
timestamp?: string;
|
|
9
|
-
titleText?:
|
|
10
|
+
titleText?: ReactNode;
|
|
10
11
|
variant: BitkitToastVariant;
|
|
11
12
|
};
|
|
12
13
|
export declare const toaster: import('@zag-js/toast').Store<any>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitToast.js","names":[],"sources":["../../../lib/components/BitkitToast/BitkitToast.tsx"],"sourcesContent":["import { createToaster } from '@chakra-ui/react/toast';\n\nimport { type NotificationVariant } from '../../theme/common/AlertAndToast.common';\nimport { type NotificationAction } from '../common/notificationMaps';\n\nexport type BitkitToastVariant = NotificationVariant;\n\nexport type BitkitToastProps = {\n action?: NotificationAction;\n dismissible?: boolean;\n messageText:
|
|
1
|
+
{"version":3,"file":"BitkitToast.js","names":[],"sources":["../../../lib/components/BitkitToast/BitkitToast.tsx"],"sourcesContent":["import { createToaster } from '@chakra-ui/react/toast';\nimport { type ReactNode } from 'react';\n\nimport { type NotificationVariant } from '../../theme/common/AlertAndToast.common';\nimport { type NotificationAction } from '../common/notificationMaps';\n\nexport type BitkitToastVariant = NotificationVariant;\n\nexport type BitkitToastProps = {\n action?: NotificationAction;\n dismissible?: boolean;\n messageText: ReactNode;\n timestamp?: string;\n titleText?: ReactNode;\n variant: BitkitToastVariant;\n};\n\nexport const toaster = createToaster({\n max: 5,\n placement: 'top-end',\n pauseOnPageIdle: true,\n});\n\nconst createBitkitToast = (props: BitkitToastProps) => {\n const { action, dismissible = true, messageText, timestamp, titleText, variant } = props;\n\n return toaster.create({\n closable: dismissible,\n description: messageText,\n meta: {\n action,\n timestamp,\n },\n title: titleText,\n type: variant,\n });\n};\n\nexport default createBitkitToast;\n"],"mappings":";;AAiBA,IAAa,UAAU,cAAc;CACnC,KAAK;CACL,WAAW;CACX,iBAAiB;AACnB,CAAC;AAED,IAAM,qBAAqB,UAA4B;CACrD,MAAM,EAAE,QAAQ,cAAc,MAAM,aAAa,WAAW,WAAW,YAAY;CAEnF,OAAO,QAAQ,OAAO;EACpB,UAAU;EACV,aAAa;EACb,MAAM;GACJ;GACA;EACF;EACA,OAAO;EACP,MAAM;CACR,CAAC;AACH"}
|