@bitrise/bitkit-v2 0.3.290 → 0.3.291
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/atoms/DatePicker/DatePicker.js +1 -1
- package/dist/atoms/ImageCropper/ImageCropper.js +1 -1
- package/dist/components/BitkitAccordion/BitkitAccordion.js.map +1 -1
- package/dist/components/BitkitAvatar/BitkitAvatar.js.map +1 -1
- package/dist/components/BitkitBadge/BitkitBadge.js.map +1 -1
- package/dist/components/BitkitBreadcrumb/BitkitBreadcrumb.js.map +1 -1
- package/dist/components/BitkitBreadcrumb/components/OverflowMenu.js.map +1 -1
- package/dist/components/BitkitCalendar/BitkitCalendar.js +2 -1
- package/dist/components/BitkitCalendar/BitkitCalendar.js.map +1 -1
- package/dist/components/BitkitCalendar/components/CalendarFooter.js +2 -1
- package/dist/components/BitkitCalendar/components/CalendarFooter.js.map +1 -1
- package/dist/components/BitkitCalendar/components/CalendarMonthSelect.js.map +1 -1
- package/dist/components/BitkitCalendar/components/CalendarNextTrigger.js.map +1 -1
- package/dist/components/BitkitCalendar/components/CalendarPrevTrigger.js.map +1 -1
- package/dist/components/BitkitCalendar/components/CalendarSelect.js.map +1 -1
- package/dist/components/BitkitCalendar/components/CalendarTrigger.js.map +1 -1
- package/dist/components/BitkitCalendar/components/CalendarYearSelect.js.map +1 -1
- package/dist/components/BitkitCodeSnippet/BitkitCodeSnippet.js.map +1 -1
- package/dist/components/BitkitCollapsible/BitkitCollapsible.js.map +1 -1
- package/dist/components/BitkitCombobox/BitkitCombobox.js.map +1 -1
- package/dist/components/BitkitDataWidget/BitkitDataWidget.js.map +1 -1
- package/dist/components/BitkitDialog/BitkitStepperDialog.js +2 -2
- package/dist/components/BitkitDialog/BitkitStepperDialog.js.map +1 -1
- package/dist/components/BitkitDialog/DialogBodyContext.js +2 -1
- package/dist/components/BitkitDialog/DialogBodyContext.js.map +1 -1
- package/dist/components/BitkitDraggableCard/BitkitDraggableCard.js.map +1 -1
- package/dist/components/BitkitExpandableCard/BitkitExpandableCard.js.map +1 -1
- package/dist/components/BitkitFileInput/BitkitFileInput.js.map +1 -1
- package/dist/components/BitkitGroupHeading/BitkitGroupHeading.js.map +1 -1
- package/dist/components/BitkitInlineLoading/BitkitInlineLoading.js.map +1 -1
- package/dist/components/BitkitLabel/BitkitLabel.js.map +1 -1
- package/dist/components/BitkitLabeledData/BitkitLabeledData.js.map +1 -1
- package/dist/components/BitkitMarkdown/BitkitMarkdown.js.map +1 -1
- package/dist/components/BitkitMarkdownCard/BitkitMarkdownCard.js.map +1 -1
- package/dist/components/BitkitMultiselect/BitkitMultiselect.js.map +1 -1
- package/dist/components/BitkitMultiselectMenu/BitkitMultiselectMenu.js.map +1 -1
- package/dist/components/BitkitNativeSelect/BitkitNativeSelect.js.map +1 -1
- package/dist/components/BitkitNoteCard/BitkitNoteCard.js.map +1 -1
- package/dist/components/BitkitOverflowContent/BitkitOverflowContent.js.map +1 -1
- package/dist/components/BitkitPageFooter/BitkitPageFooter.js.map +1 -1
- package/dist/components/BitkitPagination/BitkitPagination.js.map +1 -1
- package/dist/components/BitkitPaginationLoadMore/BitkitPaginationLoadMore.js.map +1 -1
- package/dist/components/BitkitPopover/BitkitPopover.js +2 -1
- package/dist/components/BitkitPopover/BitkitPopover.js.map +1 -1
- package/dist/components/BitkitRibbon/BitkitRibbon.js.map +1 -1
- package/dist/components/BitkitSectionHeading/BitkitSectionHeading.js.map +1 -1
- package/dist/components/BitkitSelect/BitkitSelect.js.map +1 -1
- package/dist/components/BitkitSelectMenu/BitkitSelectMenu.js.map +1 -1
- package/dist/components/BitkitSelectMenu/SelectMenuShell.js.map +1 -1
- package/dist/components/BitkitSelectableTag/BitkitSelectableTag.js.map +1 -1
- package/dist/components/BitkitSettingsCard/BitkitSettingsCard.js.map +1 -1
- package/dist/components/BitkitSidebar/BitkitSidebar.js.map +1 -1
- package/dist/components/BitkitSplitButton/BitkitSplitButton.js.map +1 -1
- package/dist/components/BitkitStat/BitkitStat.js.map +1 -1
- package/dist/components/BitkitSteps/BitkitSteps.js.map +1 -1
- package/dist/components/BitkitStepsCard/BitkitStepsCard.js.map +1 -1
- package/dist/components/BitkitSwitch/BitkitSwitch.js.map +1 -1
- package/dist/components/BitkitTabs/BitkitTabs.js +1 -1
- package/dist/components/BitkitTabs/BitkitTabs.js.map +1 -1
- package/dist/components/BitkitTagsInput/BitkitTagsInput.js.map +1 -1
- package/dist/components/BitkitTextInput/BitkitTextInput.js.map +1 -1
- package/dist/components/BitkitTreeView/BitkitTreeView.js.map +1 -1
- package/dist/theme/recipes/Button.recipe.js.map +1 -1
- package/dist/theme/slot-recipes/ExpandableCard.recipe.js.map +1 -1
- package/dist/theme/slot-recipes/Multiselect.recipe.js +1 -1
- package/dist/theme/slot-recipes/NumberInput.recipe.js +1 -1
- package/dist/theme/slot-recipes/StepCard.recipe.js.map +1 -1
- package/dist/theme/slot-recipes/TagsInput.recipe.js.map +1 -1
- package/dist/theme/text-styles.js +4 -3
- package/dist/theme/text-styles.js.map +1 -1
- package/dist/theme/themeUtils.js +1 -1
- package/dist/theme/themeUtils.js.map +1 -1
- package/dist/theme/tokens/sizesAndSpacing.js +4 -2
- package/package.json +21 -21
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitFileInput.js","names":[],"sources":["../../../lib/components/BitkitFileInput/BitkitFileInput.tsx"],"sourcesContent":["import { Card } from '@chakra-ui/react/card';\nimport {\n FileUpload,\n type FileUploadFileAcceptDetails,\n type FileUploadRootProps,\n useFileUploadContext,\n} from '@chakra-ui/react/file-upload';\nimport { VStack } from '@chakra-ui/react/stack';\nimport { Text } from '@chakra-ui/react/text';\nimport { splitProps as splitFileUploadProps } from '@zag-js/file-upload';\nimport { forwardRef, useEffect, useMemo } from 'react';\n\nimport ImageCropper, { useImageCropperContext } from '../../atoms/ImageCropper/ImageCropper';\nimport { IconMinusCircle, IconUpload } from '../../icons';\nimport BitkitButton from '../BitkitButton/BitkitButton';\nimport BitkitField, { type BitkitFieldProps } from '../BitkitField/BitkitField';\n\ntype BitkitFileInputProps = Omit<BitkitFieldProps, 'children' | 'state'> &\n Omit<FileUploadRootProps, 'disabled' | 'invalid'> & {\n aspectRatio?: number;\n /**\n * Max width/height (px) of the cropped output. The Ark cropper emits at the\n * selection's natural resolution with no size cap, so a large source image\n * can produce an oversized file; set this to downscale the output to fit.\n */\n maxCroppedSize?: number;\n onCropChange?: (file: File) => void;\n onFileAccepted?: (file: File) => void;\n state?: 'error' | 'disabled';\n };\n\n// Ark's getCroppedImage() emits at the selection's natural resolution and only\n// controls format/quality (no size cap), so downscale here when a max is set —\n// this keeps a large source image from producing an oversized upload. Preserves\n// the blob's MIME type; falls back to the original blob if it can't be decoded.\nconst downscaleBlob = (blob: Blob, maxSize: number): Promise<Blob> => {\n // A non-positive or non-finite max would produce a 0×0 / NaN canvas and corrupt\n // the output, so treat it as \"no cap\" and pass the blob through untouched.\n if (!Number.isFinite(maxSize) || maxSize <= 0) {\n return Promise.resolve(blob);\n }\n\n return new Promise((resolve) => {\n const url = URL.createObjectURL(blob);\n const image = new Image();\n\n image.onload = () => {\n URL.revokeObjectURL(url);\n const largestSide = Math.max(image.naturalWidth, image.naturalHeight);\n if (largestSide <= maxSize) {\n resolve(blob);\n return;\n }\n const scale = maxSize / largestSide;\n const canvas = document.createElement('canvas');\n canvas.width = Math.round(image.naturalWidth * scale);\n canvas.height = Math.round(image.naturalHeight * scale);\n const context = canvas.getContext('2d');\n if (!context) {\n resolve(blob);\n return;\n }\n context.drawImage(image, 0, 0, canvas.width, canvas.height);\n canvas.toBlob((result) => resolve(result ?? blob), blob.type);\n };\n\n image.onerror = () => {\n URL.revokeObjectURL(url);\n resolve(blob);\n };\n\n image.src = url;\n });\n};\n\nconst Dropzone = () => {\n const { disabled } = useFileUploadContext();\n const dropzoneLabel = disabled ? 'Cannot upload file' : 'Drag and drop file here or click to select';\n\n return (\n <FileUpload.Dropzone>\n <FileUpload.DropzoneContent>\n <IconUpload />\n <Text as=\"span\">{dropzoneLabel}</Text>\n </FileUpload.DropzoneContent>\n </FileUpload.Dropzone>\n );\n};\n\nconst ImagePreviewContent = (props: Pick<BitkitFileInputProps, 'onCropChange' | 'maxCroppedSize'>) => {\n const { onCropChange, maxCroppedSize } = props;\n\n const { acceptedFiles } = useFileUploadContext();\n const { dragging, getCroppedImage } = useImageCropperContext();\n\n const acceptedFile = acceptedFiles[0];\n const objectUrl = useMemo(() => (acceptedFile ? URL.createObjectURL(acceptedFile) : undefined), [acceptedFile]);\n\n useEffect(() => {\n return () => {\n if (objectUrl) {\n URL.revokeObjectURL(objectUrl);\n }\n };\n }, [objectUrl]);\n\n useEffect(() => {\n if (!onCropChange || dragging) {\n return;\n }\n\n if (!acceptedFile) {\n return;\n }\n\n let cancelled = false;\n // Preserve the source MIME type — the Ark cropper defaults to image/png, which\n // would mismatch a .jpg name and bloat the file.\n getCroppedImage({ type: acceptedFile.type || undefined })\n .then((result) => {\n if (!(result instanceof Blob)) {\n return result;\n }\n return maxCroppedSize ? downscaleBlob(result, maxCroppedSize) : result;\n })\n .then((result) => {\n if (!cancelled && result instanceof Blob) {\n onCropChange(new File([result], acceptedFile.name, { type: result.type }));\n }\n });\n\n return () => {\n cancelled = true;\n };\n }, [getCroppedImage, acceptedFile, onCropChange, dragging, maxCroppedSize]);\n\n return (\n <ImageCropper.Viewport>\n <ImageCropper.Image src={objectUrl} />\n <ImageCropper.Selection>\n {ImageCropper.handles.map((position) => (\n <ImageCropper.Handle key={position} position={position}>\n <div />\n </ImageCropper.Handle>\n ))}\n </ImageCropper.Selection>\n </ImageCropper.Viewport>\n );\n};\n\nconst ImagePreview = (props: Pick<BitkitFileInputProps, 'aspectRatio' | 'onCropChange' | 'maxCroppedSize'>) => {\n const { aspectRatio, onCropChange, maxCroppedSize } = props;\n\n return (\n <ImageCropper.Root aspectRatio={aspectRatio} height=\"100%\">\n <ImagePreviewContent onCropChange={onCropChange} maxCroppedSize={maxCroppedSize} />\n </ImageCropper.Root>\n );\n};\n\nconst NonImagePreview = () => {\n const fileUpload = useFileUploadContext();\n const acceptedFile = fileUpload.acceptedFiles[0];\n\n return (\n <Card.Root asChild elevation={false}>\n <Card.Body display=\"flex\" paddingBlock=\"20\" paddingInline=\"24\" alignItems=\"center\" flex=\"1\">\n <VStack gap=\"4\" alignItems=\"flex-start\" flex=\"1\" minWidth=\"0\">\n <Text textStyle=\"comp/input/label\">Selected file</Text>\n <Text whiteSpace=\"nowrap\" textOverflow=\"ellipsis\" overflow=\"hidden\" maxWidth=\"100%\">\n {acceptedFile.name}\n </Text>\n </VStack>\n <BitkitButton icon={IconMinusCircle} variant=\"secondary\" size=\"md\" onClick={fileUpload.clearFiles}>\n Remove\n </BitkitButton>\n </Card.Body>\n </Card.Root>\n );\n};\n\nconst BitkitFileInputContent = (\n props: Pick<BitkitFileInputProps, 'variant' | 'aspectRatio' | 'onCropChange' | 'maxCroppedSize'>,\n) => {\n const { variant, aspectRatio, onCropChange, maxCroppedSize } = props;\n const acceptedFile = useFileUploadContext().acceptedFiles[0];\n\n return (\n <>\n {!acceptedFile && <Dropzone />}\n {acceptedFile && variant === 'image' && (\n <ImagePreview aspectRatio={aspectRatio} onCropChange={onCropChange} maxCroppedSize={maxCroppedSize} />\n )}\n {acceptedFile && variant !== 'image' && <NonImagePreview />}\n </>\n );\n};\n\nconst BitkitFileInput = forwardRef<HTMLDivElement, BitkitFileInputProps>((props, ref) => {\n const { aspectRatio, maxCroppedSize, onCropChange, onFileAccept, onFileAccepted, state, variant, ...rest } = props;\n const [fileUploadProps, fieldProps] = splitFileUploadProps(rest as never);\n\n const handleFileAccept = (details: FileUploadFileAcceptDetails) => {\n onFileAccept?.(details);\n onFileAccepted?.(details.files[0]);\n };\n\n const contentProps = {\n variant,\n aspectRatio,\n onCropChange,\n maxCroppedSize,\n };\n\n return (\n <BitkitField ref={ref} state={state} {...fieldProps}>\n <FileUpload.Root variant={variant} onFileAccept={handleFileAccept} {...fileUploadProps}>\n <FileUpload.HiddenInput />\n <BitkitFileInputContent {...contentProps} />\n </FileUpload.Root>\n </BitkitField>\n );\n});\n\nBitkitFileInput.displayName = 'BitkitFileInput';\n\nexport default BitkitFileInput;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"BitkitFileInput.js","names":[],"sources":["../../../lib/components/BitkitFileInput/BitkitFileInput.tsx"],"sourcesContent":["import { Card } from '@chakra-ui/react/card';\nimport {\n FileUpload,\n type FileUploadFileAcceptDetails,\n type FileUploadRootProps,\n useFileUploadContext,\n} from '@chakra-ui/react/file-upload';\nimport { VStack } from '@chakra-ui/react/stack';\nimport { Text } from '@chakra-ui/react/text';\nimport { splitProps as splitFileUploadProps } from '@zag-js/file-upload';\nimport { forwardRef, useEffect, useMemo } from 'react';\n\nimport ImageCropper, { useImageCropperContext } from '../../atoms/ImageCropper/ImageCropper';\nimport { IconMinusCircle, IconUpload } from '../../icons';\nimport BitkitButton from '../BitkitButton/BitkitButton';\nimport BitkitField, { type BitkitFieldProps } from '../BitkitField/BitkitField';\n\ntype BitkitFileInputProps = Omit<BitkitFieldProps, 'children' | 'state'> &\n Omit<FileUploadRootProps, 'disabled' | 'invalid'> & {\n aspectRatio?: number;\n /**\n * Max width/height (px) of the cropped output. The Ark cropper emits at the\n * selection's natural resolution with no size cap, so a large source image\n * can produce an oversized file; set this to downscale the output to fit.\n */\n maxCroppedSize?: number;\n onCropChange?: (file: File) => void;\n onFileAccepted?: (file: File) => void;\n state?: 'error' | 'disabled';\n };\n\n// Ark's getCroppedImage() emits at the selection's natural resolution and only\n// controls format/quality (no size cap), so downscale here when a max is set —\n// this keeps a large source image from producing an oversized upload. Preserves\n// the blob's MIME type; falls back to the original blob if it can't be decoded.\nconst downscaleBlob = (blob: Blob, maxSize: number): Promise<Blob> => {\n // A non-positive or non-finite max would produce a 0×0 / NaN canvas and corrupt\n // the output, so treat it as \"no cap\" and pass the blob through untouched.\n if (!Number.isFinite(maxSize) || maxSize <= 0) {\n return Promise.resolve(blob);\n }\n\n return new Promise((resolve) => {\n const url = URL.createObjectURL(blob);\n const image = new Image();\n\n image.onload = () => {\n URL.revokeObjectURL(url);\n const largestSide = Math.max(image.naturalWidth, image.naturalHeight);\n if (largestSide <= maxSize) {\n resolve(blob);\n return;\n }\n const scale = maxSize / largestSide;\n const canvas = document.createElement('canvas');\n canvas.width = Math.round(image.naturalWidth * scale);\n canvas.height = Math.round(image.naturalHeight * scale);\n const context = canvas.getContext('2d');\n if (!context) {\n resolve(blob);\n return;\n }\n context.drawImage(image, 0, 0, canvas.width, canvas.height);\n canvas.toBlob((result) => resolve(result ?? blob), blob.type);\n };\n\n image.onerror = () => {\n URL.revokeObjectURL(url);\n resolve(blob);\n };\n\n image.src = url;\n });\n};\n\nconst Dropzone = () => {\n const { disabled } = useFileUploadContext();\n const dropzoneLabel = disabled ? 'Cannot upload file' : 'Drag and drop file here or click to select';\n\n return (\n <FileUpload.Dropzone>\n <FileUpload.DropzoneContent>\n <IconUpload />\n <Text as=\"span\">{dropzoneLabel}</Text>\n </FileUpload.DropzoneContent>\n </FileUpload.Dropzone>\n );\n};\n\nconst ImagePreviewContent = (props: Pick<BitkitFileInputProps, 'onCropChange' | 'maxCroppedSize'>) => {\n const { onCropChange, maxCroppedSize } = props;\n\n const { acceptedFiles } = useFileUploadContext();\n const { dragging, getCroppedImage } = useImageCropperContext();\n\n const acceptedFile = acceptedFiles[0];\n const objectUrl = useMemo(() => (acceptedFile ? URL.createObjectURL(acceptedFile) : undefined), [acceptedFile]);\n\n useEffect(() => {\n return () => {\n if (objectUrl) {\n URL.revokeObjectURL(objectUrl);\n }\n };\n }, [objectUrl]);\n\n useEffect(() => {\n if (!onCropChange || dragging) {\n return;\n }\n\n if (!acceptedFile) {\n return;\n }\n\n let cancelled = false;\n // Preserve the source MIME type — the Ark cropper defaults to image/png, which\n // would mismatch a .jpg name and bloat the file.\n getCroppedImage({ type: acceptedFile.type || undefined })\n .then((result) => {\n if (!(result instanceof Blob)) {\n return result;\n }\n return maxCroppedSize ? downscaleBlob(result, maxCroppedSize) : result;\n })\n .then((result) => {\n if (!cancelled && result instanceof Blob) {\n onCropChange(new File([result], acceptedFile.name, { type: result.type }));\n }\n });\n\n return () => {\n cancelled = true;\n };\n }, [getCroppedImage, acceptedFile, onCropChange, dragging, maxCroppedSize]);\n\n return (\n <ImageCropper.Viewport>\n <ImageCropper.Image src={objectUrl} />\n <ImageCropper.Selection>\n {ImageCropper.handles.map((position) => (\n <ImageCropper.Handle key={position} position={position}>\n <div />\n </ImageCropper.Handle>\n ))}\n </ImageCropper.Selection>\n </ImageCropper.Viewport>\n );\n};\n\nconst ImagePreview = (props: Pick<BitkitFileInputProps, 'aspectRatio' | 'onCropChange' | 'maxCroppedSize'>) => {\n const { aspectRatio, onCropChange, maxCroppedSize } = props;\n\n return (\n <ImageCropper.Root aspectRatio={aspectRatio} height=\"100%\">\n <ImagePreviewContent onCropChange={onCropChange} maxCroppedSize={maxCroppedSize} />\n </ImageCropper.Root>\n );\n};\n\nconst NonImagePreview = () => {\n const fileUpload = useFileUploadContext();\n const acceptedFile = fileUpload.acceptedFiles[0];\n\n return (\n <Card.Root asChild elevation={false}>\n <Card.Body display=\"flex\" paddingBlock=\"20\" paddingInline=\"24\" alignItems=\"center\" flex=\"1\">\n <VStack gap=\"4\" alignItems=\"flex-start\" flex=\"1\" minWidth=\"0\">\n <Text textStyle=\"comp/input/label\">Selected file</Text>\n <Text whiteSpace=\"nowrap\" textOverflow=\"ellipsis\" overflow=\"hidden\" maxWidth=\"100%\">\n {acceptedFile.name}\n </Text>\n </VStack>\n <BitkitButton icon={IconMinusCircle} variant=\"secondary\" size=\"md\" onClick={fileUpload.clearFiles}>\n Remove\n </BitkitButton>\n </Card.Body>\n </Card.Root>\n );\n};\n\nconst BitkitFileInputContent = (\n props: Pick<BitkitFileInputProps, 'variant' | 'aspectRatio' | 'onCropChange' | 'maxCroppedSize'>,\n) => {\n const { variant, aspectRatio, onCropChange, maxCroppedSize } = props;\n const acceptedFile = useFileUploadContext().acceptedFiles[0];\n\n return (\n <>\n {!acceptedFile && <Dropzone />}\n {acceptedFile && variant === 'image' && (\n <ImagePreview aspectRatio={aspectRatio} onCropChange={onCropChange} maxCroppedSize={maxCroppedSize} />\n )}\n {acceptedFile && variant !== 'image' && <NonImagePreview />}\n </>\n );\n};\n\nconst BitkitFileInput = forwardRef<HTMLDivElement, BitkitFileInputProps>((props, ref) => {\n const { aspectRatio, maxCroppedSize, onCropChange, onFileAccept, onFileAccepted, state, variant, ...rest } = props;\n const [fileUploadProps, fieldProps] = splitFileUploadProps(rest as never);\n\n const handleFileAccept = (details: FileUploadFileAcceptDetails) => {\n onFileAccept?.(details);\n onFileAccepted?.(details.files[0]);\n };\n\n const contentProps = {\n variant,\n aspectRatio,\n onCropChange,\n maxCroppedSize,\n };\n\n return (\n <BitkitField ref={ref} state={state} {...fieldProps}>\n <FileUpload.Root variant={variant} onFileAccept={handleFileAccept} {...fileUploadProps}>\n <FileUpload.HiddenInput />\n <BitkitFileInputContent {...contentProps} />\n </FileUpload.Root>\n </BitkitField>\n );\n});\n\nBitkitFileInput.displayName = 'BitkitFileInput';\n\nexport default BitkitFileInput;\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitGroupHeading.js","names":[],"sources":["../../../lib/components/BitkitGroupHeading/BitkitGroupHeading.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { Separator } from '@chakra-ui/react/separator';\nimport { chakra, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef } from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\n\nexport interface BitkitGroupHeadingProps extends Omit<BoxProps, 'icon'> {\n icon?: BitkitIconComponent;\n label: string;\n}\n\nconst BitkitGroupHeading = forwardRef<HTMLDivElement, BitkitGroupHeadingProps>((props, ref) => {\n const { icon: Icon, label, ...rest } = props;\n\n const recipe = useSlotRecipe({ key: 'groupHeading' });\n const styles = recipe();\n\n return (\n <Box css={styles.root} ref={ref} {...rest}>\n <chakra.div css={styles.titleBlock}>\n {Icon && <Icon css={styles.icon} size=\"16\" />}\n <chakra.span css={styles.label}>{label}</chakra.span>\n </chakra.div>\n <Separator css={styles.separator} />\n </Box>\n );\n});\n\nBitkitGroupHeading.displayName = 'BitkitGroupHeading';\n\nexport default BitkitGroupHeading;\n"],"mappings":";;;;;;AAYA,IAAM,qBAAqB,YAAqD,OAAO,QAAQ;CAC7F,MAAM,EAAE,MAAM,MAAM,OAAO,GAAG,SAAS;CAGvC,MAAM,SADS,cAAc,EAAE,KAAK,eAAe,CACpC,
|
|
1
|
+
{"version":3,"file":"BitkitGroupHeading.js","names":[],"sources":["../../../lib/components/BitkitGroupHeading/BitkitGroupHeading.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { Separator } from '@chakra-ui/react/separator';\nimport { chakra, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef } from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\n\nexport interface BitkitGroupHeadingProps extends Omit<BoxProps, 'icon'> {\n icon?: BitkitIconComponent;\n label: string;\n}\n\nconst BitkitGroupHeading = forwardRef<HTMLDivElement, BitkitGroupHeadingProps>((props, ref) => {\n const { icon: Icon, label, ...rest } = props;\n\n const recipe = useSlotRecipe({ key: 'groupHeading' });\n const styles = recipe();\n\n return (\n <Box css={styles.root} ref={ref} {...rest}>\n <chakra.div css={styles.titleBlock}>\n {Icon && <Icon css={styles.icon} size=\"16\" />}\n <chakra.span css={styles.label}>{label}</chakra.span>\n </chakra.div>\n <Separator css={styles.separator} />\n </Box>\n );\n});\n\nBitkitGroupHeading.displayName = 'BitkitGroupHeading';\n\nexport default BitkitGroupHeading;\n"],"mappings":";;;;;;AAYA,IAAM,qBAAqB,YAAqD,OAAO,QAAQ;CAC7F,MAAM,EAAE,MAAM,MAAM,OAAO,GAAG,SAAS;CAGvC,MAAM,SADS,cAAc,EAAE,KAAK,eAAe,CACpC,CAAA,CAAO;CAEtB,OACE,qBAAC,KAAD;EAAK,KAAK,OAAO;EAAW;EAAK,GAAI;YAArC,CACE,qBAAC,OAAO,KAAR;GAAY,KAAK,OAAO;aAAxB,CACG,QAAQ,oBAAC,MAAD;IAAM,KAAK,OAAO;IAAM,MAAK;GAAM,CAAA,GAC5C,oBAAC,OAAO,MAAR;IAAa,KAAK,OAAO;cAAQ;GAAmB,CAAA,CAC1C;MACZ,oBAAC,WAAD,EAAW,KAAK,OAAO,UAAY,CAAA,CAChC;;AAET,CAAC;AAED,mBAAmB,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitInlineLoading.js","names":[],"sources":["../../../lib/components/BitkitInlineLoading/BitkitInlineLoading.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { Spinner } from '@chakra-ui/react/spinner';\nimport { chakra, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef } from 'react';\n\nimport IconCheckCircleFilled from '../../icons/IconCheckCircleFilled';\nimport IconCrossCircleFilled from '../../icons/IconCrossCircleFilled';\n\nexport interface BitkitInlineLoadingProps extends Omit<BoxProps, 'size'> {\n label?: string;\n size?: 'lg' | 'md' | 'sm';\n status?: 'error' | 'loading' | 'success';\n}\n\nconst ICON_SIZE_MAP = {\n lg: '24',\n md: '16',\n sm: '16',\n} as const;\n\n// Icons have built-in padding: 2px for 24px icons, 1px for 16px icons.\n// The spinner uses the inner visual size + matching margin to occupy the same bounding box.\nconst SPINNER_SIZE_MAP = {\n lg: { margin: '2', size: '20' },\n md: { margin: '1', size: '14px' },\n sm: { margin: '1', size: '14px' },\n} as const;\n\nconst BitkitInlineLoading = forwardRef<HTMLDivElement, BitkitInlineLoadingProps>((props, ref) => {\n const { label, size = 'md', status = 'loading', ...rest } = props;\n\n const recipe = useSlotRecipe({ key: 'inlineLoading' });\n const styles = recipe({ size, status });\n\n const iconSize = ICON_SIZE_MAP[size];\n const { margin: spinnerMargin, size: spinnerSize } = SPINNER_SIZE_MAP[size];\n\n return (\n <Box css={styles.root} ref={ref} {...rest}>\n {status === 'loading' && (\n <Spinner variant=\"purple\" width={spinnerSize} height={spinnerSize} margin={spinnerMargin} />\n )}\n {status === 'success' && <IconCheckCircleFilled color=\"icon/positive\" size={iconSize} />}\n {status === 'error' && <IconCrossCircleFilled color=\"icon/negative\" size={iconSize} />}\n {label && <chakra.span css={styles.label}>{label}</chakra.span>}\n </Box>\n );\n});\n\nBitkitInlineLoading.displayName = 'BitkitInlineLoading';\n\nexport default BitkitInlineLoading;\n"],"mappings":";;;;;;;;AAcA,IAAM,gBAAgB;CACpB,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAIA,IAAM,mBAAmB;CACvB,IAAI;EAAE,QAAQ;EAAK,MAAM;CAAK;CAC9B,IAAI;EAAE,QAAQ;EAAK,MAAM;CAAO;CAChC,IAAI;EAAE,QAAQ;EAAK,MAAM;CAAO;AAClC;AAEA,IAAM,sBAAsB,YAAsD,OAAO,QAAQ;CAC/F,MAAM,EAAE,OAAO,OAAO,MAAM,SAAS,WAAW,GAAG,SAAS;CAG5D,MAAM,SADS,cAAc,EAAE,KAAK,gBAAgB,CACrC,
|
|
1
|
+
{"version":3,"file":"BitkitInlineLoading.js","names":[],"sources":["../../../lib/components/BitkitInlineLoading/BitkitInlineLoading.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { Spinner } from '@chakra-ui/react/spinner';\nimport { chakra, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef } from 'react';\n\nimport IconCheckCircleFilled from '../../icons/IconCheckCircleFilled';\nimport IconCrossCircleFilled from '../../icons/IconCrossCircleFilled';\n\nexport interface BitkitInlineLoadingProps extends Omit<BoxProps, 'size'> {\n label?: string;\n size?: 'lg' | 'md' | 'sm';\n status?: 'error' | 'loading' | 'success';\n}\n\nconst ICON_SIZE_MAP = {\n lg: '24',\n md: '16',\n sm: '16',\n} as const;\n\n// Icons have built-in padding: 2px for 24px icons, 1px for 16px icons.\n// The spinner uses the inner visual size + matching margin to occupy the same bounding box.\nconst SPINNER_SIZE_MAP = {\n lg: { margin: '2', size: '20' },\n md: { margin: '1', size: '14px' },\n sm: { margin: '1', size: '14px' },\n} as const;\n\nconst BitkitInlineLoading = forwardRef<HTMLDivElement, BitkitInlineLoadingProps>((props, ref) => {\n const { label, size = 'md', status = 'loading', ...rest } = props;\n\n const recipe = useSlotRecipe({ key: 'inlineLoading' });\n const styles = recipe({ size, status });\n\n const iconSize = ICON_SIZE_MAP[size];\n const { margin: spinnerMargin, size: spinnerSize } = SPINNER_SIZE_MAP[size];\n\n return (\n <Box css={styles.root} ref={ref} {...rest}>\n {status === 'loading' && (\n <Spinner variant=\"purple\" width={spinnerSize} height={spinnerSize} margin={spinnerMargin} />\n )}\n {status === 'success' && <IconCheckCircleFilled color=\"icon/positive\" size={iconSize} />}\n {status === 'error' && <IconCrossCircleFilled color=\"icon/negative\" size={iconSize} />}\n {label && <chakra.span css={styles.label}>{label}</chakra.span>}\n </Box>\n );\n});\n\nBitkitInlineLoading.displayName = 'BitkitInlineLoading';\n\nexport default BitkitInlineLoading;\n"],"mappings":";;;;;;;;AAcA,IAAM,gBAAgB;CACpB,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAIA,IAAM,mBAAmB;CACvB,IAAI;EAAE,QAAQ;EAAK,MAAM;CAAK;CAC9B,IAAI;EAAE,QAAQ;EAAK,MAAM;CAAO;CAChC,IAAI;EAAE,QAAQ;EAAK,MAAM;CAAO;AAClC;AAEA,IAAM,sBAAsB,YAAsD,OAAO,QAAQ;CAC/F,MAAM,EAAE,OAAO,OAAO,MAAM,SAAS,WAAW,GAAG,SAAS;CAG5D,MAAM,SADS,cAAc,EAAE,KAAK,gBAAgB,CACrC,CAAA,CAAO;EAAE;EAAM;CAAO,CAAC;CAEtC,MAAM,WAAW,cAAc;CAC/B,MAAM,EAAE,QAAQ,eAAe,MAAM,gBAAgB,iBAAiB;CAEtE,OACE,qBAAC,KAAD;EAAK,KAAK,OAAO;EAAW;EAAK,GAAI;YAArC;GACG,WAAW,aACV,oBAAC,SAAD;IAAS,SAAQ;IAAS,OAAO;IAAa,QAAQ;IAAa,QAAQ;GAAgB,CAAA;GAE5F,WAAW,aAAa,oBAAC,uBAAD;IAAuB,OAAM;IAAgB,MAAM;GAAW,CAAA;GACtF,WAAW,WAAW,oBAAC,uBAAD;IAAuB,OAAM;IAAgB,MAAM;GAAW,CAAA;GACpF,SAAS,oBAAC,OAAO,MAAR;IAAa,KAAK,OAAO;cAAQ;GAAmB,CAAA;EAC3D;;AAET,CAAC;AAED,oBAAoB,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitLabel.js","names":[],"sources":["../../../lib/components/BitkitLabel/BitkitLabel.tsx"],"sourcesContent":["import { type BadgeProps } from '@chakra-ui/react/badge';\nimport { useFieldContext } from '@chakra-ui/react/field';\nimport { Flex } from '@chakra-ui/react/flex';\nimport { chakra, type HTMLChakraProps, type SystemStyleObject, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { cloneElement, forwardRef, isValidElement, type ReactElement, type ReactNode } from 'react';\n\nimport { IconInfoCircle } from '../../icons';\nimport BitkitTooltip from '../BitkitTooltip/BitkitTooltip';\n\nexport interface BitkitLabelProps extends Omit<HTMLChakraProps<'label'>, 'children'> {\n badge?: ReactNode;\n counterText?: string;\n disabled?: boolean;\n children?: string;\n optional?: boolean;\n tooltip?: string;\n}\n\nconst disabledStyles: SystemStyleObject = {\n color: 'text/disabled',\n '& > span': { color: 'text/disabled' },\n};\n\nconst BitkitLabel = forwardRef<HTMLLabelElement, BitkitLabelProps>((props, ref) => {\n const { badge, counterText, css, disabled: disabledProp, children, optional: optionalProp, tooltip, ...rest } = props;\n\n const field = useFieldContext();\n const styles = useSlotRecipe({ key: 'field' })();\n\n const disabled = disabledProp ?? field?.disabled;\n const optional = optionalProp ?? (field ? !field.required : undefined);\n\n const badgeProps = disabled ? ({ colorVariant: 'neutral', size: 'xxs' } as const) : ({ size: 'xxs' } as const);\n const renderedBadge = isValidElement(badge) ? cloneElement(badge as ReactElement<BadgeProps>, badgeProps) : badge;\n\n return (\n <chakra.label\n ref={ref}\n css={[styles.label, disabled && disabledStyles, css]}\n data-disabled={disabled || undefined}\n {...rest}\n >\n {children}{' '}\n {optional && (\n <Text as=\"span\" textStyle=\"body/md/regular\">\n (optional)\n </Text>\n )}\n {!!tooltip && (\n <BitkitTooltip text={tooltip}>\n <IconInfoCircle size=\"16\" color=\"icon/tertiary\" />\n </BitkitTooltip>\n )}\n {(!!counterText || !!badge) && (\n <Flex alignItems=\"center\" gap=\"12\" marginInlineStart=\"auto\">\n {renderedBadge}\n {!!counterText && (\n <Text as=\"span\" color={disabled ? 'text/disabled' : 'text/helper'} textStyle=\"comp/input/helperText\">\n {counterText}\n </Text>\n )}\n </Flex>\n )}\n </chakra.label>\n );\n});\n\nBitkitLabel.displayName = 'BitkitLabel';\n\nexport default BitkitLabel;\n"],"mappings":";;;;;;;;;AAmBA,IAAM,iBAAoC;CACxC,OAAO;CACP,YAAY,EAAE,OAAO,gBAAgB;AACvC;AAEA,IAAM,cAAc,YAAgD,OAAO,QAAQ;CACjF,MAAM,EAAE,OAAO,aAAa,KAAK,UAAU,cAAc,UAAU,UAAU,cAAc,SAAS,GAAG,SAAS;CAEhH,MAAM,QAAQ,gBAAgB;CAC9B,MAAM,SAAS,cAAc,EAAE,KAAK,QAAQ,CAAC,
|
|
1
|
+
{"version":3,"file":"BitkitLabel.js","names":[],"sources":["../../../lib/components/BitkitLabel/BitkitLabel.tsx"],"sourcesContent":["import { type BadgeProps } from '@chakra-ui/react/badge';\nimport { useFieldContext } from '@chakra-ui/react/field';\nimport { Flex } from '@chakra-ui/react/flex';\nimport { chakra, type HTMLChakraProps, type SystemStyleObject, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { cloneElement, forwardRef, isValidElement, type ReactElement, type ReactNode } from 'react';\n\nimport { IconInfoCircle } from '../../icons';\nimport BitkitTooltip from '../BitkitTooltip/BitkitTooltip';\n\nexport interface BitkitLabelProps extends Omit<HTMLChakraProps<'label'>, 'children'> {\n badge?: ReactNode;\n counterText?: string;\n disabled?: boolean;\n children?: string;\n optional?: boolean;\n tooltip?: string;\n}\n\nconst disabledStyles: SystemStyleObject = {\n color: 'text/disabled',\n '& > span': { color: 'text/disabled' },\n};\n\nconst BitkitLabel = forwardRef<HTMLLabelElement, BitkitLabelProps>((props, ref) => {\n const { badge, counterText, css, disabled: disabledProp, children, optional: optionalProp, tooltip, ...rest } = props;\n\n const field = useFieldContext();\n const styles = useSlotRecipe({ key: 'field' })();\n\n const disabled = disabledProp ?? field?.disabled;\n const optional = optionalProp ?? (field ? !field.required : undefined);\n\n const badgeProps = disabled ? ({ colorVariant: 'neutral', size: 'xxs' } as const) : ({ size: 'xxs' } as const);\n const renderedBadge = isValidElement(badge) ? cloneElement(badge as ReactElement<BadgeProps>, badgeProps) : badge;\n\n return (\n <chakra.label\n ref={ref}\n css={[styles.label, disabled && disabledStyles, css]}\n data-disabled={disabled || undefined}\n {...rest}\n >\n {children}{' '}\n {optional && (\n <Text as=\"span\" textStyle=\"body/md/regular\">\n (optional)\n </Text>\n )}\n {!!tooltip && (\n <BitkitTooltip text={tooltip}>\n <IconInfoCircle size=\"16\" color=\"icon/tertiary\" />\n </BitkitTooltip>\n )}\n {(!!counterText || !!badge) && (\n <Flex alignItems=\"center\" gap=\"12\" marginInlineStart=\"auto\">\n {renderedBadge}\n {!!counterText && (\n <Text as=\"span\" color={disabled ? 'text/disabled' : 'text/helper'} textStyle=\"comp/input/helperText\">\n {counterText}\n </Text>\n )}\n </Flex>\n )}\n </chakra.label>\n );\n});\n\nBitkitLabel.displayName = 'BitkitLabel';\n\nexport default BitkitLabel;\n"],"mappings":";;;;;;;;;AAmBA,IAAM,iBAAoC;CACxC,OAAO;CACP,YAAY,EAAE,OAAO,gBAAgB;AACvC;AAEA,IAAM,cAAc,YAAgD,OAAO,QAAQ;CACjF,MAAM,EAAE,OAAO,aAAa,KAAK,UAAU,cAAc,UAAU,UAAU,cAAc,SAAS,GAAG,SAAS;CAEhH,MAAM,QAAQ,gBAAgB;CAC9B,MAAM,SAAS,cAAc,EAAE,KAAK,QAAQ,CAAC,CAAC,CAAC;CAE/C,MAAM,WAAW,gBAAgB,OAAO;CACxC,MAAM,WAAW,iBAAiB,QAAQ,CAAC,MAAM,WAAW,KAAA;CAE5D,MAAM,aAAa,WAAY;EAAE,cAAc;EAAW,MAAM;CAAM,IAAe,EAAE,MAAM,MAAM;CACnG,MAAM,gBAAgB,eAAe,KAAK,IAAI,aAAa,OAAmC,UAAU,IAAI;CAE5G,OACE,qBAAC,OAAO,OAAR;EACO;EACL,KAAK;GAAC,OAAO;GAAO,YAAY;GAAgB;EAAG;EACnD,iBAAe,YAAY,KAAA;EAC3B,GAAI;YAJN;GAMG;GAAU;GACV,YACC,oBAAC,MAAD;IAAM,IAAG;IAAO,WAAU;cAAkB;GAEtC,CAAA;GAEP,CAAC,CAAC,WACD,oBAAC,eAAD;IAAe,MAAM;cACnB,oBAAC,gBAAD;KAAgB,MAAK;KAAK,OAAM;IAAiB,CAAA;GACpC,CAAA;IAEf,CAAC,CAAC,eAAe,CAAC,CAAC,UACnB,qBAAC,MAAD;IAAM,YAAW;IAAS,KAAI;IAAK,mBAAkB;cAArD,CACG,eACA,CAAC,CAAC,eACD,oBAAC,MAAD;KAAM,IAAG;KAAO,OAAO,WAAW,kBAAkB;KAAe,WAAU;eAC1E;IACG,CAAA,CAEJ;;EAEI;;AAElB,CAAC;AAED,YAAY,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitLabeledData.js","names":[],"sources":["../../../lib/components/BitkitLabeledData/BitkitLabeledData.tsx"],"sourcesContent":["import { type BoxProps } from '@chakra-ui/react/box';\nimport { Skeleton } from '@chakra-ui/react/skeleton';\nimport { chakra, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef } from 'react';\n\nimport { IconInfoCircle, IconWarningYellow } from '../../icons';\nimport BitkitDefinitionTooltip from '../BitkitDefinitionTooltip/BitkitDefinitionTooltip';\nimport BitkitTooltip from '../BitkitTooltip/BitkitTooltip';\n\n// --- Types ---\n\nexport interface BitkitLabeledDataProps extends Omit<BoxProps, 'colorPalette'> {\n label: string;\n labelVariant?: 'primary' | 'secondary';\n limitValue?: string;\n showWarning?: boolean;\n size?: 'lg' | '2xl' | '3xl' | 'sm' | 'md';\n state?: 'default' | 'skeleton';\n subtext?: string;\n tooltip?: string;\n tooltipAnchor?: 'label' | 'value';\n value?: string;\n variant?: 'default' | 'inline';\n}\n\nconst SKELETON_VALUE_HEIGHTS = { lg: '24', '2xl': '36px', '3xl': '40' } as const;\n\n// --- Component ---\n\nconst BitkitLabeledData = forwardRef<HTMLElement, BitkitLabeledDataProps>((props, ref) => {\n const {\n label,\n labelVariant = 'primary',\n limitValue,\n showWarning,\n size = 'lg',\n state = 'default',\n subtext,\n tooltip,\n tooltipAnchor = 'value',\n value,\n variant = 'default',\n ...rest\n } = props;\n\n const styles = useSlotRecipe({ key: 'labeledData' })({\n size: variant === 'inline' ? undefined : (size as 'lg' | '2xl' | '3xl'),\n });\n\n // --- Inline variant ---\n if (variant === 'inline') {\n const isSm = size === 'sm';\n const isPrimary = labelVariant === 'primary';\n const labelTextStyle = isPrimary\n ? isSm\n ? 'body/sm/semibold'\n : 'body/md/semibold'\n : isSm\n ? 'body/sm/regular'\n : 'body/md/regular';\n const labelEndsWithColon = label.endsWith(':') || label.endsWith(':');\n const colonSuffix = labelEndsWithColon ? '' : ':';\n\n if (state === 'skeleton') {\n return (\n <chakra.div ref={ref} display=\"flex\" alignItems=\"center\" gap=\"8\" {...rest}>\n {!!showWarning && <IconWarningYellow size=\"16\" />}\n <chakra.div display=\"flex\" alignItems=\"center\" gap=\"4\">\n <chakra.span textStyle={labelTextStyle} color={isPrimary ? 'text/primary' : 'text/secondary'}>\n {label}\n {colonSuffix}\n </chakra.span>\n <Skeleton height={isSm ? '16' : '20'} width=\"64\" />\n </chakra.div>\n </chakra.div>\n );\n }\n\n const wrapWithTooltip = (text: string, anchor: 'label' | 'value') =>\n tooltip && tooltipAnchor === anchor ? (\n <BitkitDefinitionTooltip text={tooltip}>{text}</BitkitDefinitionTooltip>\n ) : (\n text\n );\n\n return (\n <chakra.div ref={ref} display=\"flex\" alignItems=\"center\" gap=\"8\" {...rest}>\n {!!showWarning && <IconWarningYellow size=\"16\" />}\n <chakra.div display=\"flex\" alignItems=\"center\" gap=\"4\">\n <chakra.span textStyle={labelTextStyle} color={isPrimary ? 'text/primary' : 'text/secondary'}>\n {wrapWithTooltip(label, 'label')}\n {colonSuffix}\n </chakra.span>\n <chakra.span textStyle={isSm ? 'body/sm/regular' : 'body/md/regular'} color=\"text/body\">\n {wrapWithTooltip(value ?? '', 'value')}\n </chakra.span>\n </chakra.div>\n </chakra.div>\n );\n }\n\n // --- Default variant ---\n\n const labelContent = (\n <chakra.dt css={styles.label}>\n {label}\n {!!tooltip && (\n <BitkitTooltip text={tooltip}>\n <IconInfoCircle size=\"16\" color=\"icon/tertiary\" />\n </BitkitTooltip>\n )}\n </chakra.dt>\n );\n\n if (state === 'skeleton') {\n return (\n <chakra.dl css={styles.root} ref={ref} {...(rest as Record<string, unknown>)}>\n {labelContent}\n <Skeleton height={SKELETON_VALUE_HEIGHTS[size as keyof typeof SKELETON_VALUE_HEIGHTS]} width=\"128\" />\n <Skeleton height=\"20\" width=\"128\" />\n </chakra.dl>\n );\n }\n\n return (\n <chakra.dl css={styles.root} ref={ref} {...(rest as Record<string, unknown>)}>\n {labelContent}\n <chakra.dd css={styles.value}>\n {value}\n {!!limitValue && <chakra.span css={styles.limit}>/ {limitValue}</chakra.span>}\n </chakra.dd>\n {!!subtext && <chakra.dd css={styles.helpText}>{subtext}</chakra.dd>}\n </chakra.dl>\n );\n});\n\nBitkitLabeledData.displayName = 'BitkitLabeledData';\n\nexport default BitkitLabeledData;\n"],"mappings":";;;;;;;;;AAyBA,IAAM,yBAAyB;CAAE,IAAI;CAAM,OAAO;CAAQ,OAAO;AAAK;AAItE,IAAM,oBAAoB,YAAiD,OAAO,QAAQ;CACxF,MAAM,EACJ,OACA,eAAe,WACf,YACA,aACA,OAAO,MACP,QAAQ,WACR,SACA,SACA,gBAAgB,SAChB,OACA,UAAU,WACV,GAAG,SACD;CAEJ,MAAM,SAAS,cAAc,EAAE,KAAK,cAAc,CAAC,
|
|
1
|
+
{"version":3,"file":"BitkitLabeledData.js","names":[],"sources":["../../../lib/components/BitkitLabeledData/BitkitLabeledData.tsx"],"sourcesContent":["import { type BoxProps } from '@chakra-ui/react/box';\nimport { Skeleton } from '@chakra-ui/react/skeleton';\nimport { chakra, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef } from 'react';\n\nimport { IconInfoCircle, IconWarningYellow } from '../../icons';\nimport BitkitDefinitionTooltip from '../BitkitDefinitionTooltip/BitkitDefinitionTooltip';\nimport BitkitTooltip from '../BitkitTooltip/BitkitTooltip';\n\n// --- Types ---\n\nexport interface BitkitLabeledDataProps extends Omit<BoxProps, 'colorPalette'> {\n label: string;\n labelVariant?: 'primary' | 'secondary';\n limitValue?: string;\n showWarning?: boolean;\n size?: 'lg' | '2xl' | '3xl' | 'sm' | 'md';\n state?: 'default' | 'skeleton';\n subtext?: string;\n tooltip?: string;\n tooltipAnchor?: 'label' | 'value';\n value?: string;\n variant?: 'default' | 'inline';\n}\n\nconst SKELETON_VALUE_HEIGHTS = { lg: '24', '2xl': '36px', '3xl': '40' } as const;\n\n// --- Component ---\n\nconst BitkitLabeledData = forwardRef<HTMLElement, BitkitLabeledDataProps>((props, ref) => {\n const {\n label,\n labelVariant = 'primary',\n limitValue,\n showWarning,\n size = 'lg',\n state = 'default',\n subtext,\n tooltip,\n tooltipAnchor = 'value',\n value,\n variant = 'default',\n ...rest\n } = props;\n\n const styles = useSlotRecipe({ key: 'labeledData' })({\n size: variant === 'inline' ? undefined : (size as 'lg' | '2xl' | '3xl'),\n });\n\n // --- Inline variant ---\n if (variant === 'inline') {\n const isSm = size === 'sm';\n const isPrimary = labelVariant === 'primary';\n const labelTextStyle = isPrimary\n ? isSm\n ? 'body/sm/semibold'\n : 'body/md/semibold'\n : isSm\n ? 'body/sm/regular'\n : 'body/md/regular';\n const labelEndsWithColon = label.endsWith(':') || label.endsWith(':');\n const colonSuffix = labelEndsWithColon ? '' : ':';\n\n if (state === 'skeleton') {\n return (\n <chakra.div ref={ref} display=\"flex\" alignItems=\"center\" gap=\"8\" {...rest}>\n {!!showWarning && <IconWarningYellow size=\"16\" />}\n <chakra.div display=\"flex\" alignItems=\"center\" gap=\"4\">\n <chakra.span textStyle={labelTextStyle} color={isPrimary ? 'text/primary' : 'text/secondary'}>\n {label}\n {colonSuffix}\n </chakra.span>\n <Skeleton height={isSm ? '16' : '20'} width=\"64\" />\n </chakra.div>\n </chakra.div>\n );\n }\n\n const wrapWithTooltip = (text: string, anchor: 'label' | 'value') =>\n tooltip && tooltipAnchor === anchor ? (\n <BitkitDefinitionTooltip text={tooltip}>{text}</BitkitDefinitionTooltip>\n ) : (\n text\n );\n\n return (\n <chakra.div ref={ref} display=\"flex\" alignItems=\"center\" gap=\"8\" {...rest}>\n {!!showWarning && <IconWarningYellow size=\"16\" />}\n <chakra.div display=\"flex\" alignItems=\"center\" gap=\"4\">\n <chakra.span textStyle={labelTextStyle} color={isPrimary ? 'text/primary' : 'text/secondary'}>\n {wrapWithTooltip(label, 'label')}\n {colonSuffix}\n </chakra.span>\n <chakra.span textStyle={isSm ? 'body/sm/regular' : 'body/md/regular'} color=\"text/body\">\n {wrapWithTooltip(value ?? '', 'value')}\n </chakra.span>\n </chakra.div>\n </chakra.div>\n );\n }\n\n // --- Default variant ---\n\n const labelContent = (\n <chakra.dt css={styles.label}>\n {label}\n {!!tooltip && (\n <BitkitTooltip text={tooltip}>\n <IconInfoCircle size=\"16\" color=\"icon/tertiary\" />\n </BitkitTooltip>\n )}\n </chakra.dt>\n );\n\n if (state === 'skeleton') {\n return (\n <chakra.dl css={styles.root} ref={ref} {...(rest as Record<string, unknown>)}>\n {labelContent}\n <Skeleton height={SKELETON_VALUE_HEIGHTS[size as keyof typeof SKELETON_VALUE_HEIGHTS]} width=\"128\" />\n <Skeleton height=\"20\" width=\"128\" />\n </chakra.dl>\n );\n }\n\n return (\n <chakra.dl css={styles.root} ref={ref} {...(rest as Record<string, unknown>)}>\n {labelContent}\n <chakra.dd css={styles.value}>\n {value}\n {!!limitValue && <chakra.span css={styles.limit}>/ {limitValue}</chakra.span>}\n </chakra.dd>\n {!!subtext && <chakra.dd css={styles.helpText}>{subtext}</chakra.dd>}\n </chakra.dl>\n );\n});\n\nBitkitLabeledData.displayName = 'BitkitLabeledData';\n\nexport default BitkitLabeledData;\n"],"mappings":";;;;;;;;;AAyBA,IAAM,yBAAyB;CAAE,IAAI;CAAM,OAAO;CAAQ,OAAO;AAAK;AAItE,IAAM,oBAAoB,YAAiD,OAAO,QAAQ;CACxF,MAAM,EACJ,OACA,eAAe,WACf,YACA,aACA,OAAO,MACP,QAAQ,WACR,SACA,SACA,gBAAgB,SAChB,OACA,UAAU,WACV,GAAG,SACD;CAEJ,MAAM,SAAS,cAAc,EAAE,KAAK,cAAc,CAAC,CAAC,CAAC,EACnD,MAAM,YAAY,WAAW,KAAA,IAAa,KAC5C,CAAC;CAGD,IAAI,YAAY,UAAU;EACxB,MAAM,OAAO,SAAS;EACtB,MAAM,YAAY,iBAAiB;EACnC,MAAM,iBAAiB,YACnB,OACE,qBACA,qBACF,OACE,oBACA;EAEN,MAAM,cADqB,MAAM,SAAS,GAAG,KAAK,MAAM,SAAS,GAAG,IAC3B,KAAK;EAE9C,IAAI,UAAU,YACZ,OACE,qBAAC,OAAO,KAAR;GAAiB;GAAK,SAAQ;GAAO,YAAW;GAAS,KAAI;GAAI,GAAI;aAArE,CACG,CAAC,CAAC,eAAe,oBAAC,mBAAD,EAAmB,MAAK,KAAM,CAAA,GAChD,qBAAC,OAAO,KAAR;IAAY,SAAQ;IAAO,YAAW;IAAS,KAAI;cAAnD,CACE,qBAAC,OAAO,MAAR;KAAa,WAAW;KAAgB,OAAO,YAAY,iBAAiB;eAA5E,CACG,OACA,WACU;QACb,oBAAC,UAAD;KAAU,QAAQ,OAAO,OAAO;KAAM,OAAM;IAAM,CAAA,CACxC;KACF;;EAIhB,MAAM,mBAAmB,MAAc,WACrC,WAAW,kBAAkB,SAC3B,oBAAC,yBAAD;GAAyB,MAAM;aAAU;EAA8B,CAAA,IAEvE;EAGJ,OACE,qBAAC,OAAO,KAAR;GAAiB;GAAK,SAAQ;GAAO,YAAW;GAAS,KAAI;GAAI,GAAI;aAArE,CACG,CAAC,CAAC,eAAe,oBAAC,mBAAD,EAAmB,MAAK,KAAM,CAAA,GAChD,qBAAC,OAAO,KAAR;IAAY,SAAQ;IAAO,YAAW;IAAS,KAAI;cAAnD,CACE,qBAAC,OAAO,MAAR;KAAa,WAAW;KAAgB,OAAO,YAAY,iBAAiB;eAA5E,CACG,gBAAgB,OAAO,OAAO,GAC9B,WACU;QACb,oBAAC,OAAO,MAAR;KAAa,WAAW,OAAO,oBAAoB;KAAmB,OAAM;eACzE,gBAAgB,SAAS,IAAI,OAAO;IAC1B,CAAA,CACH;KACF;;CAEhB;CAIA,MAAM,eACJ,qBAAC,OAAO,IAAR;EAAW,KAAK,OAAO;YAAvB,CACG,OACA,CAAC,CAAC,WACD,oBAAC,eAAD;GAAe,MAAM;aACnB,oBAAC,gBAAD;IAAgB,MAAK;IAAK,OAAM;GAAiB,CAAA;EACpC,CAAA,CAER;;CAGb,IAAI,UAAU,YACZ,OACE,qBAAC,OAAO,IAAR;EAAW,KAAK,OAAO;EAAW;EAAK,GAAK;YAA5C;GACG;GACD,oBAAC,UAAD;IAAU,QAAQ,uBAAuB;IAA8C,OAAM;GAAO,CAAA;GACpG,oBAAC,UAAD;IAAU,QAAO;IAAK,OAAM;GAAO,CAAA;EAC1B;;CAIf,OACE,qBAAC,OAAO,IAAR;EAAW,KAAK,OAAO;EAAW;EAAK,GAAK;YAA5C;GACG;GACD,qBAAC,OAAO,IAAR;IAAW,KAAK,OAAO;cAAvB,CACG,OACA,CAAC,CAAC,cAAc,qBAAC,OAAO,MAAR;KAAa,KAAK,OAAO;eAAzB,CAAgC,MAAG,UAAwB;MACnE;;GACV,CAAC,CAAC,WAAW,oBAAC,OAAO,IAAR;IAAW,KAAK,OAAO;cAAW;GAAmB,CAAA;EAC1D;;AAEf,CAAC;AAED,kBAAkB,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitMarkdown.js","names":[],"sources":["../../../lib/components/BitkitMarkdown/BitkitMarkdown.tsx"],"sourcesContent":["import { Heading } from '@chakra-ui/react/heading';\nimport { Separator } from '@chakra-ui/react/separator';\nimport { Stack, type StackProps } from '@chakra-ui/react/stack';\nimport { chakra, type SystemStyleObject, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { type ComponentProps, forwardRef, isValidElement, type ReactNode } from 'react';\nimport Markdown, { type Components } from 'react-markdown';\n\nimport BitkitCodeSnippet from '../BitkitCodeSnippet/BitkitCodeSnippet';\nimport BitkitLink from '../BitkitLink/BitkitLink';\nimport BitkitList from '../BitkitList/BitkitList';\n\n// ----- Helpers -----\n\nconst getTextContent = (node: ReactNode): string => {\n if (typeof node === 'string') return node;\n if (typeof node === 'number') return String(node);\n if (Array.isArray(node)) return node.map(getTextContent).join('');\n if (isValidElement(node)) return getTextContent((node.props as { children?: ReactNode }).children);\n return '';\n};\n\n// ----- Component mappings -----\n\nconst createComponents = (size: 'sm' | 'md' | 'lg', blockquoteStyles: SystemStyleObject): Components => {\n const codeSize = size === 'lg' ? 'lg' : 'md';\n const listSize = size === 'lg' ? 'lg' : 'md';\n\n return {\n a: ({ node: _, ...props }) => (\n <BitkitLink colorVariant=\"purple\" rel=\"noopener noreferrer\" target=\"_blank\" {...props} />\n ),\n blockquote: ({ node: _, ...props }) => <chakra.blockquote css={blockquoteStyles} {...props} />,\n code: ({ node: _, children }) => (\n <BitkitCodeSnippet variant=\"inline\" size={codeSize}>\n {String(children)}\n </BitkitCodeSnippet>\n ),\n h1: ({ node: _, ...props }) => <Heading as=\"h1\" textStyle=\"heading/h1\" {...props} />,\n h2: ({ node: _, ...props }) => <Heading as=\"h2\" textStyle=\"heading/h2\" {...props} />,\n h3: ({ node: _, ...props }) => <Heading as=\"h3\" textStyle=\"heading/h3\" {...props} />,\n h4: ({ node: _, ...props }) => <Heading as=\"h4\" textStyle=\"heading/h4\" {...props} />,\n h5: ({ node: _, ...props }) => <Heading as=\"h5\" textStyle=\"heading/h5\" {...props} />,\n h6: ({ node: _, ...props }) => <Heading as=\"h6\" textStyle=\"heading/h6\" {...props} />,\n hr: () => <Separator />,\n li: ({ node: _, ...props }) => <BitkitList.Item>{props.children}</BitkitList.Item>,\n ol: ({ node: _, ...props }) => (\n <BitkitList size={listSize} variant=\"ordered\">\n {props.children}\n </BitkitList>\n ),\n p: ({ node: _, ...props }) => <Text {...props} />,\n pre: ({ node: _, children }) => (\n <BitkitCodeSnippet variant=\"multi\" size={codeSize}>\n {getTextContent(children)}\n </BitkitCodeSnippet>\n ),\n ul: ({ node: _, ...props }) => (\n <BitkitList size={listSize} variant=\"unordered\">\n {props.children}\n </BitkitList>\n ),\n };\n};\n\n// ----- BitkitMarkdown -----\n\nexport interface BitkitMarkdownProps extends Omit<StackProps, 'children'> {\n children: string;\n components?: Components | null;\n rehypePlugins?: ComponentProps<typeof Markdown>['rehypePlugins'];\n size?: 'sm' | 'md' | 'lg';\n}\n\nconst BitkitMarkdown = forwardRef<HTMLDivElement, BitkitMarkdownProps>((props, ref) => {\n const { children, components, rehypePlugins, size = 'md', ...rest } = props;\n\n const recipe = useSlotRecipe({ key: 'markdown' });\n const styles = recipe({ size });\n\n const defaultComponents = createComponents(size, styles.blockquote);\n const mergedComponents = { ...defaultComponents, ...(components ?? {}) };\n\n return (\n <Stack ref={ref} gap=\"16\" css={styles.root} {...rest}>\n <Markdown components={mergedComponents} rehypePlugins={rehypePlugins}>\n {children}\n </Markdown>\n </Stack>\n );\n});\n\nBitkitMarkdown.displayName = 'BitkitMarkdown';\n\nexport default BitkitMarkdown;\n"],"mappings":";;;;;;;;;;;;AAcA,IAAM,kBAAkB,SAA4B;CAClD,IAAI,OAAO,SAAS,UAAU,OAAO;CACrC,IAAI,OAAO,SAAS,UAAU,OAAO,OAAO,IAAI;CAChD,IAAI,MAAM,QAAQ,IAAI,GAAG,OAAO,KAAK,IAAI,cAAc,
|
|
1
|
+
{"version":3,"file":"BitkitMarkdown.js","names":[],"sources":["../../../lib/components/BitkitMarkdown/BitkitMarkdown.tsx"],"sourcesContent":["import { Heading } from '@chakra-ui/react/heading';\nimport { Separator } from '@chakra-ui/react/separator';\nimport { Stack, type StackProps } from '@chakra-ui/react/stack';\nimport { chakra, type SystemStyleObject, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { type ComponentProps, forwardRef, isValidElement, type ReactNode } from 'react';\nimport Markdown, { type Components } from 'react-markdown';\n\nimport BitkitCodeSnippet from '../BitkitCodeSnippet/BitkitCodeSnippet';\nimport BitkitLink from '../BitkitLink/BitkitLink';\nimport BitkitList from '../BitkitList/BitkitList';\n\n// ----- Helpers -----\n\nconst getTextContent = (node: ReactNode): string => {\n if (typeof node === 'string') return node;\n if (typeof node === 'number') return String(node);\n if (Array.isArray(node)) return node.map(getTextContent).join('');\n if (isValidElement(node)) return getTextContent((node.props as { children?: ReactNode }).children);\n return '';\n};\n\n// ----- Component mappings -----\n\nconst createComponents = (size: 'sm' | 'md' | 'lg', blockquoteStyles: SystemStyleObject): Components => {\n const codeSize = size === 'lg' ? 'lg' : 'md';\n const listSize = size === 'lg' ? 'lg' : 'md';\n\n return {\n a: ({ node: _, ...props }) => (\n <BitkitLink colorVariant=\"purple\" rel=\"noopener noreferrer\" target=\"_blank\" {...props} />\n ),\n blockquote: ({ node: _, ...props }) => <chakra.blockquote css={blockquoteStyles} {...props} />,\n code: ({ node: _, children }) => (\n <BitkitCodeSnippet variant=\"inline\" size={codeSize}>\n {String(children)}\n </BitkitCodeSnippet>\n ),\n h1: ({ node: _, ...props }) => <Heading as=\"h1\" textStyle=\"heading/h1\" {...props} />,\n h2: ({ node: _, ...props }) => <Heading as=\"h2\" textStyle=\"heading/h2\" {...props} />,\n h3: ({ node: _, ...props }) => <Heading as=\"h3\" textStyle=\"heading/h3\" {...props} />,\n h4: ({ node: _, ...props }) => <Heading as=\"h4\" textStyle=\"heading/h4\" {...props} />,\n h5: ({ node: _, ...props }) => <Heading as=\"h5\" textStyle=\"heading/h5\" {...props} />,\n h6: ({ node: _, ...props }) => <Heading as=\"h6\" textStyle=\"heading/h6\" {...props} />,\n hr: () => <Separator />,\n li: ({ node: _, ...props }) => <BitkitList.Item>{props.children}</BitkitList.Item>,\n ol: ({ node: _, ...props }) => (\n <BitkitList size={listSize} variant=\"ordered\">\n {props.children}\n </BitkitList>\n ),\n p: ({ node: _, ...props }) => <Text {...props} />,\n pre: ({ node: _, children }) => (\n <BitkitCodeSnippet variant=\"multi\" size={codeSize}>\n {getTextContent(children)}\n </BitkitCodeSnippet>\n ),\n ul: ({ node: _, ...props }) => (\n <BitkitList size={listSize} variant=\"unordered\">\n {props.children}\n </BitkitList>\n ),\n };\n};\n\n// ----- BitkitMarkdown -----\n\nexport interface BitkitMarkdownProps extends Omit<StackProps, 'children'> {\n children: string;\n components?: Components | null;\n rehypePlugins?: ComponentProps<typeof Markdown>['rehypePlugins'];\n size?: 'sm' | 'md' | 'lg';\n}\n\nconst BitkitMarkdown = forwardRef<HTMLDivElement, BitkitMarkdownProps>((props, ref) => {\n const { children, components, rehypePlugins, size = 'md', ...rest } = props;\n\n const recipe = useSlotRecipe({ key: 'markdown' });\n const styles = recipe({ size });\n\n const defaultComponents = createComponents(size, styles.blockquote);\n const mergedComponents = { ...defaultComponents, ...(components ?? {}) };\n\n return (\n <Stack ref={ref} gap=\"16\" css={styles.root} {...rest}>\n <Markdown components={mergedComponents} rehypePlugins={rehypePlugins}>\n {children}\n </Markdown>\n </Stack>\n );\n});\n\nBitkitMarkdown.displayName = 'BitkitMarkdown';\n\nexport default BitkitMarkdown;\n"],"mappings":";;;;;;;;;;;;AAcA,IAAM,kBAAkB,SAA4B;CAClD,IAAI,OAAO,SAAS,UAAU,OAAO;CACrC,IAAI,OAAO,SAAS,UAAU,OAAO,OAAO,IAAI;CAChD,IAAI,MAAM,QAAQ,IAAI,GAAG,OAAO,KAAK,IAAI,cAAc,CAAC,CAAC,KAAK,EAAE;CAChE,IAAI,eAAe,IAAI,GAAG,OAAO,eAAgB,KAAK,MAAmC,QAAQ;CACjG,OAAO;AACT;AAIA,IAAM,oBAAoB,MAA0B,qBAAoD;CACtG,MAAM,WAAW,SAAS,OAAO,OAAO;CACxC,MAAM,WAAW,SAAS,OAAO,OAAO;CAExC,OAAO;EACL,IAAI,EAAE,MAAM,GAAG,GAAG,YAChB,oBAAC,YAAD;GAAY,cAAa;GAAS,KAAI;GAAsB,QAAO;GAAS,GAAI;EAAQ,CAAA;EAE1F,aAAa,EAAE,MAAM,GAAG,GAAG,YAAY,oBAAC,OAAO,YAAR;GAAmB,KAAK;GAAkB,GAAI;EAAQ,CAAA;EAC7F,OAAO,EAAE,MAAM,GAAG,eAChB,oBAAC,mBAAD;GAAmB,SAAQ;GAAS,MAAM;aACvC,OAAO,QAAQ;EACC,CAAA;EAErB,KAAK,EAAE,MAAM,GAAG,GAAG,YAAY,oBAAC,SAAD;GAAS,IAAG;GAAK,WAAU;GAAa,GAAI;EAAQ,CAAA;EACnF,KAAK,EAAE,MAAM,GAAG,GAAG,YAAY,oBAAC,SAAD;GAAS,IAAG;GAAK,WAAU;GAAa,GAAI;EAAQ,CAAA;EACnF,KAAK,EAAE,MAAM,GAAG,GAAG,YAAY,oBAAC,SAAD;GAAS,IAAG;GAAK,WAAU;GAAa,GAAI;EAAQ,CAAA;EACnF,KAAK,EAAE,MAAM,GAAG,GAAG,YAAY,oBAAC,SAAD;GAAS,IAAG;GAAK,WAAU;GAAa,GAAI;EAAQ,CAAA;EACnF,KAAK,EAAE,MAAM,GAAG,GAAG,YAAY,oBAAC,SAAD;GAAS,IAAG;GAAK,WAAU;GAAa,GAAI;EAAQ,CAAA;EACnF,KAAK,EAAE,MAAM,GAAG,GAAG,YAAY,oBAAC,SAAD;GAAS,IAAG;GAAK,WAAU;GAAa,GAAI;EAAQ,CAAA;EACnF,UAAU,oBAAC,WAAD,CAAY,CAAA;EACtB,KAAK,EAAE,MAAM,GAAG,GAAG,YAAY,oBAAC,mBAAW,MAAZ,EAAA,UAAkB,MAAM,SAA0B,CAAA;EACjF,KAAK,EAAE,MAAM,GAAG,GAAG,YACjB,oBAAC,oBAAD;GAAY,MAAM;GAAU,SAAQ;aACjC,MAAM;EACG,CAAA;EAEd,IAAI,EAAE,MAAM,GAAG,GAAG,YAAY,oBAAC,MAAD,EAAM,GAAI,MAAQ,CAAA;EAChD,MAAM,EAAE,MAAM,GAAG,eACf,oBAAC,mBAAD;GAAmB,SAAQ;GAAQ,MAAM;aACtC,eAAe,QAAQ;EACP,CAAA;EAErB,KAAK,EAAE,MAAM,GAAG,GAAG,YACjB,oBAAC,oBAAD;GAAY,MAAM;GAAU,SAAQ;aACjC,MAAM;EACG,CAAA;CAEhB;AACF;AAWA,IAAM,iBAAiB,YAAiD,OAAO,QAAQ;CACrF,MAAM,EAAE,UAAU,YAAY,eAAe,OAAO,MAAM,GAAG,SAAS;CAGtE,MAAM,SADS,cAAc,EAAE,KAAK,WAAW,CAChC,CAAA,CAAO,EAAE,KAAK,CAAC;CAG9B,MAAM,mBAAmB;EAAE,GADD,iBAAiB,MAAM,OAAO,UAC1B;EAAmB,GAAI,cAAc,CAAC;CAAG;CAEvE,OACE,oBAAC,OAAD;EAAY;EAAK,KAAI;EAAK,KAAK,OAAO;EAAM,GAAI;YAC9C,oBAAC,UAAD;GAAU,YAAY;GAAiC;GACpD;EACO,CAAA;CACL,CAAA;AAEX,CAAC;AAED,eAAe,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitMarkdownCard.js","names":[],"sources":["../../../lib/components/BitkitMarkdownCard/BitkitMarkdownCard.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { type BoxProps } from '@chakra-ui/react/box';\nimport { Card } from '@chakra-ui/react/card';\nimport { Collapsible } from '@chakra-ui/react/collapsible';\nimport { HStack } from '@chakra-ui/react/stack';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef, type JSX, type ReactNode } from 'react';\n\nimport {\n IconCheck,\n IconChevronDown,\n IconChevronUp,\n IconErrorCircleFilled,\n IconInfoCircle,\n IconWarning,\n} from '../../icons';\nimport BitkitButton from '../BitkitButton/BitkitButton';\nimport BitkitMarkdown from '../BitkitMarkdown/BitkitMarkdown';\n\n// ----- Status config -----\n\ntype Status = 'critical' | 'info' | 'success' | 'warning';\n\nconst STATUS_ICONS: Record<Status, JSX.Element> = {\n critical: <IconErrorCircleFilled size=\"24\" />,\n info: <IconInfoCircle size=\"24\" />,\n success: <IconCheck size=\"24\" />,\n warning: <IconWarning size=\"24\" />,\n};\n\n// ----- Props -----\n\ntype UncontrolledProps = {\n defaultOpen?: boolean;\n onOpenChange?: never;\n open?: never;\n};\n\ntype ControlledProps = {\n defaultOpen?: never;\n onOpenChange: (open: boolean) => void;\n open: boolean;\n};\n\nexport type BitkitMarkdownCardProps = Omit<BoxProps, 'children'> & {\n actions?: ReactNode;\n children: string;\n collapsedHeight?: string;\n size?: 'sm' | 'md' | 'lg';\n status?: Status;\n} & (UncontrolledProps | ControlledProps);\n\n// ----- Component -----\n\nconst BitkitMarkdownCard = forwardRef<HTMLDivElement, BitkitMarkdownCardProps>((props, ref) => {\n const {\n actions,\n children,\n collapsedHeight = '200px',\n defaultOpen,\n onOpenChange,\n open,\n size = 'md',\n status = 'info',\n ...rest\n } = props;\n\n const recipe = useSlotRecipe({ key: 'markdownCard' });\n const styles = recipe({ status });\n\n const handleOpenChange = onOpenChange ? (details: { open: boolean }) => onOpenChange(details.open) : undefined;\n\n return (\n <Card.Root ref={ref} css={styles.root} {...rest}>\n <HStack align=\"stretch\" gap=\"0\">\n <Box css={styles.iconBar}>{STATUS_ICONS[status]}</Box>\n <Box css={styles.content}>\n <Collapsible.Root\n open={open}\n defaultOpen={defaultOpen}\n collapsedHeight={collapsedHeight}\n onOpenChange={handleOpenChange}\n >\n <Collapsible.Content>\n <BitkitMarkdown size={size}>{children}</BitkitMarkdown>\n </Collapsible.Content>\n <Collapsible.Context>\n {(api) => (\n <>\n {!api.open && <Box css={styles.gradient} />}\n <HStack gap=\"16\" css={styles.footerButtons}>\n {actions}\n <BitkitButton\n {...api.getTriggerProps()}\n size=\"sm\"\n suffixIcon={api.open ? IconChevronUp : IconChevronDown}\n variant=\"secondary\"\n >\n {api.open ? 'Show less' : 'Show more'}\n </BitkitButton>\n </HStack>\n </>\n )}\n </Collapsible.Context>\n </Collapsible.Root>\n </Box>\n </HStack>\n </Card.Root>\n );\n});\n\nBitkitMarkdownCard.displayName = 'BitkitMarkdownCard';\n\nexport default BitkitMarkdownCard;\n"],"mappings":";;;;;;;;;;;;;;;;AAuBA,IAAM,eAA4C;CAChD,UAAU,oBAAC,uBAAD,EAAuB,MAAK,KAAM,CAAA;CAC5C,MAAM,oBAAC,gBAAD,EAAgB,MAAK,KAAM,CAAA;CACjC,SAAS,oBAAC,WAAD,EAAW,MAAK,KAAM,CAAA;CAC/B,SAAS,oBAAC,aAAD,EAAa,MAAK,KAAM,CAAA;AACnC;AA0BA,IAAM,qBAAqB,YAAqD,OAAO,QAAQ;CAC7F,MAAM,EACJ,SACA,UACA,kBAAkB,SAClB,aACA,cACA,MACA,OAAO,MACP,SAAS,QACT,GAAG,SACD;CAGJ,MAAM,SADS,cAAc,EAAE,KAAK,eAAe,CACpC,
|
|
1
|
+
{"version":3,"file":"BitkitMarkdownCard.js","names":[],"sources":["../../../lib/components/BitkitMarkdownCard/BitkitMarkdownCard.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { type BoxProps } from '@chakra-ui/react/box';\nimport { Card } from '@chakra-ui/react/card';\nimport { Collapsible } from '@chakra-ui/react/collapsible';\nimport { HStack } from '@chakra-ui/react/stack';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef, type JSX, type ReactNode } from 'react';\n\nimport {\n IconCheck,\n IconChevronDown,\n IconChevronUp,\n IconErrorCircleFilled,\n IconInfoCircle,\n IconWarning,\n} from '../../icons';\nimport BitkitButton from '../BitkitButton/BitkitButton';\nimport BitkitMarkdown from '../BitkitMarkdown/BitkitMarkdown';\n\n// ----- Status config -----\n\ntype Status = 'critical' | 'info' | 'success' | 'warning';\n\nconst STATUS_ICONS: Record<Status, JSX.Element> = {\n critical: <IconErrorCircleFilled size=\"24\" />,\n info: <IconInfoCircle size=\"24\" />,\n success: <IconCheck size=\"24\" />,\n warning: <IconWarning size=\"24\" />,\n};\n\n// ----- Props -----\n\ntype UncontrolledProps = {\n defaultOpen?: boolean;\n onOpenChange?: never;\n open?: never;\n};\n\ntype ControlledProps = {\n defaultOpen?: never;\n onOpenChange: (open: boolean) => void;\n open: boolean;\n};\n\nexport type BitkitMarkdownCardProps = Omit<BoxProps, 'children'> & {\n actions?: ReactNode;\n children: string;\n collapsedHeight?: string;\n size?: 'sm' | 'md' | 'lg';\n status?: Status;\n} & (UncontrolledProps | ControlledProps);\n\n// ----- Component -----\n\nconst BitkitMarkdownCard = forwardRef<HTMLDivElement, BitkitMarkdownCardProps>((props, ref) => {\n const {\n actions,\n children,\n collapsedHeight = '200px',\n defaultOpen,\n onOpenChange,\n open,\n size = 'md',\n status = 'info',\n ...rest\n } = props;\n\n const recipe = useSlotRecipe({ key: 'markdownCard' });\n const styles = recipe({ status });\n\n const handleOpenChange = onOpenChange ? (details: { open: boolean }) => onOpenChange(details.open) : undefined;\n\n return (\n <Card.Root ref={ref} css={styles.root} {...rest}>\n <HStack align=\"stretch\" gap=\"0\">\n <Box css={styles.iconBar}>{STATUS_ICONS[status]}</Box>\n <Box css={styles.content}>\n <Collapsible.Root\n open={open}\n defaultOpen={defaultOpen}\n collapsedHeight={collapsedHeight}\n onOpenChange={handleOpenChange}\n >\n <Collapsible.Content>\n <BitkitMarkdown size={size}>{children}</BitkitMarkdown>\n </Collapsible.Content>\n <Collapsible.Context>\n {(api) => (\n <>\n {!api.open && <Box css={styles.gradient} />}\n <HStack gap=\"16\" css={styles.footerButtons}>\n {actions}\n <BitkitButton\n {...api.getTriggerProps()}\n size=\"sm\"\n suffixIcon={api.open ? IconChevronUp : IconChevronDown}\n variant=\"secondary\"\n >\n {api.open ? 'Show less' : 'Show more'}\n </BitkitButton>\n </HStack>\n </>\n )}\n </Collapsible.Context>\n </Collapsible.Root>\n </Box>\n </HStack>\n </Card.Root>\n );\n});\n\nBitkitMarkdownCard.displayName = 'BitkitMarkdownCard';\n\nexport default BitkitMarkdownCard;\n"],"mappings":";;;;;;;;;;;;;;;;AAuBA,IAAM,eAA4C;CAChD,UAAU,oBAAC,uBAAD,EAAuB,MAAK,KAAM,CAAA;CAC5C,MAAM,oBAAC,gBAAD,EAAgB,MAAK,KAAM,CAAA;CACjC,SAAS,oBAAC,WAAD,EAAW,MAAK,KAAM,CAAA;CAC/B,SAAS,oBAAC,aAAD,EAAa,MAAK,KAAM,CAAA;AACnC;AA0BA,IAAM,qBAAqB,YAAqD,OAAO,QAAQ;CAC7F,MAAM,EACJ,SACA,UACA,kBAAkB,SAClB,aACA,cACA,MACA,OAAO,MACP,SAAS,QACT,GAAG,SACD;CAGJ,MAAM,SADS,cAAc,EAAE,KAAK,eAAe,CACpC,CAAA,CAAO,EAAE,OAAO,CAAC;CAEhC,MAAM,mBAAmB,gBAAgB,YAA+B,aAAa,QAAQ,IAAI,IAAI,KAAA;CAErG,OACE,oBAAC,KAAK,MAAN;EAAgB;EAAK,KAAK,OAAO;EAAM,GAAI;YACzC,qBAAC,QAAD;GAAQ,OAAM;GAAU,KAAI;aAA5B,CACE,oBAAC,KAAD;IAAK,KAAK,OAAO;cAAU,aAAa;GAAa,CAAA,GACrD,oBAAC,KAAD;IAAK,KAAK,OAAO;cACf,qBAAC,YAAY,MAAb;KACQ;KACO;KACI;KACjB,cAAc;eAJhB,CAME,oBAAC,YAAY,SAAb,EAAA,UACE,oBAAC,gBAAD;MAAsB;MAAO;KAAyB,CAAA,EACnC,CAAA,GACrB,oBAAC,YAAY,SAAb,EAAA,WACI,QACA,qBAAA,YAAA,EAAA,UAAA,CACG,CAAC,IAAI,QAAQ,oBAAC,KAAD,EAAK,KAAK,OAAO,SAAW,CAAA,GAC1C,qBAAC,QAAD;MAAQ,KAAI;MAAK,KAAK,OAAO;gBAA7B,CACG,SACD,oBAAC,cAAD;OACE,GAAI,IAAI,gBAAgB;OACxB,MAAK;OACL,YAAY,IAAI,OAAO,gBAAgB;OACvC,SAAQ;iBAEP,IAAI,OAAO,cAAc;MACd,CAAA,CACR;OACR,EAAA,CAAA,EAEe,CAAA,CACL;;GACf,CAAA,CACC;;CACC,CAAA;AAEf,CAAC;AAED,mBAAmB,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitMultiselect.js","names":[],"sources":["../../../lib/components/BitkitMultiselect/BitkitMultiselect.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { createListCollection } from '@chakra-ui/react/collection';\nimport { Portal } from '@chakra-ui/react/portal';\nimport { Select, type SelectRootProps, type SelectTriggerProps, useSelectContext } from '@chakra-ui/react/select';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { forwardRef, type ReactNode, useContext } from 'react';\n\nimport { IconErrorCircleFilled, IconWarningYellow } from '../../icons';\nimport AssetSelectChevron from '../../utilities/AssetSelectChevron';\nimport BitkitPortalContext from '../../utilities/BitkitPortalContext';\nimport { withSubComponents } from '../../utilities/withSubComponents';\nimport BitkitCloseButton from '../BitkitCloseButton/BitkitCloseButton';\nimport BitkitField, { type BitkitFieldProps } from '../BitkitField/BitkitField';\nimport BitkitMultiselectMenu, {\n type BitkitMultiselectMenuItemProps,\n} from '../BitkitMultiselectMenu/BitkitMultiselectMenu';\nimport {\n type BitkitSelectMenuEmptyStateProps,\n type BitkitSelectMenuSearchProps,\n} from '../BitkitSelectMenu/BitkitSelectMenu';\nimport BitkitSelectMenuAction, { type BitkitSelectMenuActionChild } from '../BitkitSelectMenu/BitkitSelectMenuAction';\nimport BitkitTag from '../BitkitTag/BitkitTag';\n\nexport type BitkitMultiselectTriggerProps = SelectTriggerProps;\n\nexport type BitkitMultiselectProps = Omit<BitkitFieldProps, 'children' | 'state'> & {\n children?: BitkitSelectMenuActionChild;\n constrained?: boolean;\n defaultValue?: Array<string>;\n isLoading?: boolean;\n items: Array<BitkitMultiselectMenuItemProps>;\n onValueChange?: (newVal: Array<string>) => void;\n placeholder?: string;\n disablePortal?: boolean;\n selectProps?: Omit<SelectRootProps, 'collection' | 'defaultValue' | 'multiple' | 'onValueChange' | 'value'>;\n size?: 'md' | 'lg';\n state?: 'disabled' | 'error' | 'readOnly' | 'warning';\n triggerProps?: BitkitMultiselectTriggerProps;\n value?: Array<string>;\n} & BitkitSelectMenuSearchProps &\n BitkitSelectMenuEmptyStateProps;\n\ntype MultiselectState = BitkitMultiselectProps['state'];\n\nconst NON_INTERACTIVE_STATES: ReadonlyArray<MultiselectState> = ['disabled', 'readOnly', 'error', 'warning'];\n\n/** Whether the clear-all button should be rendered (and the overlay should reserve extra room for it). */\nconst shouldShowClearButton = (constrained: boolean, selectionCount: number, state: MultiselectState): boolean =>\n !constrained && selectionCount > 0 && !NON_INTERACTIVE_STATES.includes(state);\n\ntype MultiselectOverlayProps = {\n constrained: boolean;\n placeholder?: string;\n size: 'md' | 'lg';\n state?: MultiselectState;\n};\n\nconst MultiselectOverlay = ({ constrained, placeholder, size, state }: MultiselectOverlayProps) => {\n const select = useSelectContext();\n const recipe = useSlotRecipe({ key: 'multiselect' });\n const styles = recipe({ constrained, size });\n\n const selectedItems = select.selectedItems as Array<BitkitMultiselectMenuItemProps>;\n const selectedValues = select.value;\n const isDisabled = state === 'disabled';\n const isReadOnly = state === 'readOnly';\n const tagState = isDisabled ? 'disabled' : undefined;\n // Overlay reserves ~96px on the right when the clear-all is visible (to keep the chevron +\n // clear button out of the tag row), otherwise ~48px (chevron only). Using spacing tokens\n // because '80' (the minimum that fits both icons with gaps) isn't a valid token; '96' is\n // the next one up.\n const overlayPaddingEnd = shouldShowClearButton(constrained, selectedValues.length, state) ? '96' : '48';\n\n const resolvedPlaceholder = placeholder ?? (isReadOnly ? '(not selected)' : 'Select options');\n const canRemove = !isDisabled && !isReadOnly;\n\n const hasSelection = selectedValues.length > 0;\n\n const renderTags = () => {\n if (constrained) {\n return (\n <>\n {hasSelection && (\n <TagSlot>\n <BitkitTag\n size=\"sm\"\n colorVariant=\"neutral\"\n labelText={String(selectedValues.length)}\n state={tagState}\n onRemove={canRemove ? () => select.clearValue() : undefined}\n />\n </TagSlot>\n )}\n <Text as=\"span\" css={styles.placeholderText} data-placeholder={hasSelection ? undefined : ''}>\n {resolvedPlaceholder}\n </Text>\n </>\n );\n }\n\n if (selectedItems.length === 0) {\n return (\n <Text as=\"span\" css={styles.placeholderText} data-placeholder=\"\">\n {resolvedPlaceholder}\n </Text>\n );\n }\n\n return selectedItems.map((item) => (\n <TagSlot key={item.value}>\n <BitkitTag\n size=\"sm\"\n colorVariant=\"neutral\"\n labelText={item.label}\n state={tagState}\n onRemove={canRemove ? () => select.setValue(selectedValues.filter((v) => v !== item.value)) : undefined}\n />\n </TagSlot>\n ));\n };\n\n return (\n <Box css={styles.overlay} pointerEvents=\"none\" paddingInlineEnd={overlayPaddingEnd}>\n <Box css={styles.tagsBlock}>{renderTags()}</Box>\n </Box>\n );\n};\n\nconst TagSlot = ({ children }: { children: ReactNode }) => (\n <Box data-slot=\"tag\" display=\"inline-flex\" pointerEvents=\"auto\">\n {children}\n </Box>\n);\n\ntype ClearAllButtonProps = {\n state?: MultiselectState;\n};\n\nconst ClearAllButton = ({ state }: ClearAllButtonProps) => {\n const select = useSelectContext();\n\n // Constrained mode has its own inline clear-all on the counter tag; this is the non-constrained trigger-level clear.\n if (!shouldShowClearButton(false, select.value.length, state)) return null;\n\n return (\n <BitkitCloseButton size=\"sm\" colorVariant=\"neutral\" aria-label=\"Clear all\" onClick={() => select.clearValue()} />\n );\n};\n\nconst BitkitMultiselect = forwardRef<HTMLDivElement, BitkitMultiselectProps>((props, ref) => {\n const {\n children,\n constrained = false,\n defaultValue,\n emptyHelperText,\n emptyLabel,\n isLoading,\n items,\n onSearchChange,\n onValueChange,\n placeholder,\n disablePortal,\n searchValue,\n selectProps,\n size = 'lg',\n state,\n triggerProps,\n value,\n ...fieldProps\n } = props;\n\n const collection = createListCollection({\n items,\n groupBy: (item) => item.group || '',\n isItemDisabled: (item) => !!item.disabled,\n });\n\n const recipe = useSlotRecipe({ key: 'multiselect' });\n const styles = recipe({ constrained, size });\n\n const { disablePortal: disablePortalFromContext } = useContext(BitkitPortalContext);\n const iconSize = size === 'lg' ? '24' : '16';\n const isInvalid = state === 'error' || !!fieldProps.errorText;\n\n return (\n <BitkitField ref={ref} state={state} {...fieldProps}>\n <Select.Root\n collection={collection}\n multiple\n {...selectProps}\n defaultValue={defaultValue}\n disabled={state === 'disabled'}\n invalid={isInvalid}\n onValueChange={(details) => onValueChange?.(details.value)}\n readOnly={state === 'readOnly'}\n // Zag's default scrollIntoView gates on `isScrollable(contentEl)`. Our content is\n // overflow:hidden + flex column (so the sticky-bottom create row stays visible while\n // the inner itemList Box scrolls). That gate fails, so keyboard highlight never\n // scrolls the items into view. Providing scrollToIndexFn bypasses the gate and lets\n // the browser's native scrollIntoView walk up to the real scroll container (itemList).\n scrollToIndexFn={({ getElement }) => getElement()?.scrollIntoView({ block: 'nearest' })}\n value={value}\n >\n <Select.HiddenSelect />\n <Select.Control css={styles.control} className=\"group\">\n <Select.Trigger css={styles.trigger} {...triggerProps} />\n <MultiselectOverlay constrained={constrained} placeholder={placeholder} size={size} state={state} />\n <Select.IndicatorGroup css={styles.indicatorGroup}>\n {!constrained && <ClearAllButton state={state} />}\n {state === 'error' && (\n <Select.Indicator css={styles.indicator}>\n <IconErrorCircleFilled size={iconSize} color=\"icon/negative\" />\n </Select.Indicator>\n )}\n {state === 'warning' && (\n <Select.Indicator css={styles.indicator}>\n <IconWarningYellow size={iconSize} />\n </Select.Indicator>\n )}\n <Select.Indicator css={styles.indicator} asChild>\n <AssetSelectChevron />\n </Select.Indicator>\n </Select.IndicatorGroup>\n </Select.Control>\n <Portal disabled={disablePortal || disablePortalFromContext}>\n <Select.Positioner>\n <BitkitMultiselectMenu\n collection={collection}\n emptyHelperText={emptyHelperText}\n emptyLabel={emptyLabel}\n isLoading={isLoading}\n onSearchChange={onSearchChange}\n searchValue={searchValue}\n size={size}\n >\n {children}\n </BitkitMultiselectMenu>\n </Select.Positioner>\n </Portal>\n </Select.Root>\n </BitkitField>\n );\n});\n\nBitkitMultiselect.displayName = 'BitkitMultiselect';\n\nexport default withSubComponents(BitkitMultiselect, { Action: BitkitSelectMenuAction });\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"BitkitMultiselect.js","names":[],"sources":["../../../lib/components/BitkitMultiselect/BitkitMultiselect.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { createListCollection } from '@chakra-ui/react/collection';\nimport { Portal } from '@chakra-ui/react/portal';\nimport { Select, type SelectRootProps, type SelectTriggerProps, useSelectContext } from '@chakra-ui/react/select';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { forwardRef, type ReactNode, useContext } from 'react';\n\nimport { IconErrorCircleFilled, IconWarningYellow } from '../../icons';\nimport AssetSelectChevron from '../../utilities/AssetSelectChevron';\nimport BitkitPortalContext from '../../utilities/BitkitPortalContext';\nimport { withSubComponents } from '../../utilities/withSubComponents';\nimport BitkitCloseButton from '../BitkitCloseButton/BitkitCloseButton';\nimport BitkitField, { type BitkitFieldProps } from '../BitkitField/BitkitField';\nimport BitkitMultiselectMenu, {\n type BitkitMultiselectMenuItemProps,\n} from '../BitkitMultiselectMenu/BitkitMultiselectMenu';\nimport {\n type BitkitSelectMenuEmptyStateProps,\n type BitkitSelectMenuSearchProps,\n} from '../BitkitSelectMenu/BitkitSelectMenu';\nimport BitkitSelectMenuAction, { type BitkitSelectMenuActionChild } from '../BitkitSelectMenu/BitkitSelectMenuAction';\nimport BitkitTag from '../BitkitTag/BitkitTag';\n\nexport type BitkitMultiselectTriggerProps = SelectTriggerProps;\n\nexport type BitkitMultiselectProps = Omit<BitkitFieldProps, 'children' | 'state'> & {\n children?: BitkitSelectMenuActionChild;\n constrained?: boolean;\n defaultValue?: Array<string>;\n isLoading?: boolean;\n items: Array<BitkitMultiselectMenuItemProps>;\n onValueChange?: (newVal: Array<string>) => void;\n placeholder?: string;\n disablePortal?: boolean;\n selectProps?: Omit<SelectRootProps, 'collection' | 'defaultValue' | 'multiple' | 'onValueChange' | 'value'>;\n size?: 'md' | 'lg';\n state?: 'disabled' | 'error' | 'readOnly' | 'warning';\n triggerProps?: BitkitMultiselectTriggerProps;\n value?: Array<string>;\n} & BitkitSelectMenuSearchProps &\n BitkitSelectMenuEmptyStateProps;\n\ntype MultiselectState = BitkitMultiselectProps['state'];\n\nconst NON_INTERACTIVE_STATES: ReadonlyArray<MultiselectState> = ['disabled', 'readOnly', 'error', 'warning'];\n\n/** Whether the clear-all button should be rendered (and the overlay should reserve extra room for it). */\nconst shouldShowClearButton = (constrained: boolean, selectionCount: number, state: MultiselectState): boolean =>\n !constrained && selectionCount > 0 && !NON_INTERACTIVE_STATES.includes(state);\n\ntype MultiselectOverlayProps = {\n constrained: boolean;\n placeholder?: string;\n size: 'md' | 'lg';\n state?: MultiselectState;\n};\n\nconst MultiselectOverlay = ({ constrained, placeholder, size, state }: MultiselectOverlayProps) => {\n const select = useSelectContext();\n const recipe = useSlotRecipe({ key: 'multiselect' });\n const styles = recipe({ constrained, size });\n\n const selectedItems = select.selectedItems as Array<BitkitMultiselectMenuItemProps>;\n const selectedValues = select.value;\n const isDisabled = state === 'disabled';\n const isReadOnly = state === 'readOnly';\n const tagState = isDisabled ? 'disabled' : undefined;\n // Overlay reserves ~96px on the right when the clear-all is visible (to keep the chevron +\n // clear button out of the tag row), otherwise ~48px (chevron only). Using spacing tokens\n // because '80' (the minimum that fits both icons with gaps) isn't a valid token; '96' is\n // the next one up.\n const overlayPaddingEnd = shouldShowClearButton(constrained, selectedValues.length, state) ? '96' : '48';\n\n const resolvedPlaceholder = placeholder ?? (isReadOnly ? '(not selected)' : 'Select options');\n const canRemove = !isDisabled && !isReadOnly;\n\n const hasSelection = selectedValues.length > 0;\n\n const renderTags = () => {\n if (constrained) {\n return (\n <>\n {hasSelection && (\n <TagSlot>\n <BitkitTag\n size=\"sm\"\n colorVariant=\"neutral\"\n labelText={String(selectedValues.length)}\n state={tagState}\n onRemove={canRemove ? () => select.clearValue() : undefined}\n />\n </TagSlot>\n )}\n <Text as=\"span\" css={styles.placeholderText} data-placeholder={hasSelection ? undefined : ''}>\n {resolvedPlaceholder}\n </Text>\n </>\n );\n }\n\n if (selectedItems.length === 0) {\n return (\n <Text as=\"span\" css={styles.placeholderText} data-placeholder=\"\">\n {resolvedPlaceholder}\n </Text>\n );\n }\n\n return selectedItems.map((item) => (\n <TagSlot key={item.value}>\n <BitkitTag\n size=\"sm\"\n colorVariant=\"neutral\"\n labelText={item.label}\n state={tagState}\n onRemove={canRemove ? () => select.setValue(selectedValues.filter((v) => v !== item.value)) : undefined}\n />\n </TagSlot>\n ));\n };\n\n return (\n <Box css={styles.overlay} pointerEvents=\"none\" paddingInlineEnd={overlayPaddingEnd}>\n <Box css={styles.tagsBlock}>{renderTags()}</Box>\n </Box>\n );\n};\n\nconst TagSlot = ({ children }: { children: ReactNode }) => (\n <Box data-slot=\"tag\" display=\"inline-flex\" pointerEvents=\"auto\">\n {children}\n </Box>\n);\n\ntype ClearAllButtonProps = {\n state?: MultiselectState;\n};\n\nconst ClearAllButton = ({ state }: ClearAllButtonProps) => {\n const select = useSelectContext();\n\n // Constrained mode has its own inline clear-all on the counter tag; this is the non-constrained trigger-level clear.\n if (!shouldShowClearButton(false, select.value.length, state)) return null;\n\n return (\n <BitkitCloseButton size=\"sm\" colorVariant=\"neutral\" aria-label=\"Clear all\" onClick={() => select.clearValue()} />\n );\n};\n\nconst BitkitMultiselect = forwardRef<HTMLDivElement, BitkitMultiselectProps>((props, ref) => {\n const {\n children,\n constrained = false,\n defaultValue,\n emptyHelperText,\n emptyLabel,\n isLoading,\n items,\n onSearchChange,\n onValueChange,\n placeholder,\n disablePortal,\n searchValue,\n selectProps,\n size = 'lg',\n state,\n triggerProps,\n value,\n ...fieldProps\n } = props;\n\n const collection = createListCollection({\n items,\n groupBy: (item) => item.group || '',\n isItemDisabled: (item) => !!item.disabled,\n });\n\n const recipe = useSlotRecipe({ key: 'multiselect' });\n const styles = recipe({ constrained, size });\n\n const { disablePortal: disablePortalFromContext } = useContext(BitkitPortalContext);\n const iconSize = size === 'lg' ? '24' : '16';\n const isInvalid = state === 'error' || !!fieldProps.errorText;\n\n return (\n <BitkitField ref={ref} state={state} {...fieldProps}>\n <Select.Root\n collection={collection}\n multiple\n {...selectProps}\n defaultValue={defaultValue}\n disabled={state === 'disabled'}\n invalid={isInvalid}\n onValueChange={(details) => onValueChange?.(details.value)}\n readOnly={state === 'readOnly'}\n // Zag's default scrollIntoView gates on `isScrollable(contentEl)`. Our content is\n // overflow:hidden + flex column (so the sticky-bottom create row stays visible while\n // the inner itemList Box scrolls). That gate fails, so keyboard highlight never\n // scrolls the items into view. Providing scrollToIndexFn bypasses the gate and lets\n // the browser's native scrollIntoView walk up to the real scroll container (itemList).\n scrollToIndexFn={({ getElement }) => getElement()?.scrollIntoView({ block: 'nearest' })}\n value={value}\n >\n <Select.HiddenSelect />\n <Select.Control css={styles.control} className=\"group\">\n <Select.Trigger css={styles.trigger} {...triggerProps} />\n <MultiselectOverlay constrained={constrained} placeholder={placeholder} size={size} state={state} />\n <Select.IndicatorGroup css={styles.indicatorGroup}>\n {!constrained && <ClearAllButton state={state} />}\n {state === 'error' && (\n <Select.Indicator css={styles.indicator}>\n <IconErrorCircleFilled size={iconSize} color=\"icon/negative\" />\n </Select.Indicator>\n )}\n {state === 'warning' && (\n <Select.Indicator css={styles.indicator}>\n <IconWarningYellow size={iconSize} />\n </Select.Indicator>\n )}\n <Select.Indicator css={styles.indicator} asChild>\n <AssetSelectChevron />\n </Select.Indicator>\n </Select.IndicatorGroup>\n </Select.Control>\n <Portal disabled={disablePortal || disablePortalFromContext}>\n <Select.Positioner>\n <BitkitMultiselectMenu\n collection={collection}\n emptyHelperText={emptyHelperText}\n emptyLabel={emptyLabel}\n isLoading={isLoading}\n onSearchChange={onSearchChange}\n searchValue={searchValue}\n size={size}\n >\n {children}\n </BitkitMultiselectMenu>\n </Select.Positioner>\n </Portal>\n </Select.Root>\n </BitkitField>\n );\n});\n\nBitkitMultiselect.displayName = 'BitkitMultiselect';\n\nexport default withSubComponents(BitkitMultiselect, { Action: BitkitSelectMenuAction });\n"],"mappings":"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"}
|
|
@@ -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, 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,
|
|
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,CAAA,CAAO,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 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitNativeSelect.js","names":[],"sources":["../../../lib/components/BitkitNativeSelect/BitkitNativeSelect.tsx"],"sourcesContent":["import { NativeSelect, type NativeSelectRootProps } from '@chakra-ui/react/native-select';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { splitProps } from '@zag-js/utils';\nimport { type ChangeEventHandler, forwardRef, type ReactNode } from 'react';\n\nimport { IconErrorCircleFilled, IconWarningYellow } from '../../icons';\nimport AssetSelectChevron from '../../utilities/AssetSelectChevron.tsx';\nimport BitkitField, { type BitkitFieldProps } from '../BitkitField/BitkitField.tsx';\n\nconst FIELD_PROPS = ['defaultValue', 'name', 'onChange', 'placeholder', 'value'] as const;\n\nexport interface BitkitNativeSelectProps extends Omit<\n BitkitFieldProps,\n 'children' | 'disabled' | 'invalid' | 'onChange' | 'readOnly'\n> {\n children: ReactNode;\n defaultValue?: string;\n name?: string;\n onChange?: ChangeEventHandler<HTMLSelectElement>;\n placeholder?: string;\n selectProps?: NativeSelectRootProps;\n size?: 'md' | 'lg';\n state?: 'disabled' | 'error' | 'readOnly' | 'warning';\n value?: string;\n}\n\nconst BitkitNativeSelect = forwardRef<HTMLSelectElement, BitkitNativeSelectProps>(\n (props: BitkitNativeSelectProps, ref) => {\n const { children, selectProps, size = 'md', state, ...rest } = props;\n const [nativeFieldProps, bitkitFieldProps] = splitProps(rest, [...FIELD_PROPS]);\n\n const recipe = useSlotRecipe({ key: 'nativeSelect' });\n const styles = recipe();\n\n const hasWarning = state === 'warning' || !!bitkitFieldProps.warningText;\n const isInvalid = state === 'error' || !!bitkitFieldProps.errorText;\n\n let statusIcon = undefined;\n if (isInvalid) {\n statusIcon = (\n <IconErrorCircleFilled size={size === 'lg' ? '24' : '16'} css={styles.statusIcon} color=\"icon/negative\" />\n );\n } else if (hasWarning) {\n statusIcon = <IconWarningYellow size={size === 'lg' ? '24' : '16'} css={styles.statusIcon} />;\n }\n\n return (\n <BitkitField state={state} {...bitkitFieldProps}>\n <NativeSelect.Root size={size} {...selectProps} className=\"group\">\n <NativeSelect.Field ref={ref} {...nativeFieldProps}>\n {children}\n </NativeSelect.Field>\n {statusIcon}\n <NativeSelect.Indicator asChild>\n <AssetSelectChevron pointerEvents=\"none\" />\n </NativeSelect.Indicator>\n </NativeSelect.Root>\n </BitkitField>\n );\n },\n);\n\nBitkitNativeSelect.displayName = 'BitkitNativeSelect';\n\nexport default BitkitNativeSelect;\n"],"mappings":";;;;;;;;;;AASA,IAAM,cAAc;CAAC;CAAgB;CAAQ;CAAY;CAAe;AAAO;AAiB/E,IAAM,qBAAqB,YACxB,OAAgC,QAAQ;CACvC,MAAM,EAAE,UAAU,aAAa,OAAO,MAAM,OAAO,GAAG,SAAS;CAC/D,MAAM,CAAC,kBAAkB,oBAAoB,WAAW,MAAM,CAAC,GAAG,WAAW,CAAC;CAG9E,MAAM,SADS,cAAc,EAAE,KAAK,eAAe,CACpC,
|
|
1
|
+
{"version":3,"file":"BitkitNativeSelect.js","names":[],"sources":["../../../lib/components/BitkitNativeSelect/BitkitNativeSelect.tsx"],"sourcesContent":["import { NativeSelect, type NativeSelectRootProps } from '@chakra-ui/react/native-select';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { splitProps } from '@zag-js/utils';\nimport { type ChangeEventHandler, forwardRef, type ReactNode } from 'react';\n\nimport { IconErrorCircleFilled, IconWarningYellow } from '../../icons';\nimport AssetSelectChevron from '../../utilities/AssetSelectChevron.tsx';\nimport BitkitField, { type BitkitFieldProps } from '../BitkitField/BitkitField.tsx';\n\nconst FIELD_PROPS = ['defaultValue', 'name', 'onChange', 'placeholder', 'value'] as const;\n\nexport interface BitkitNativeSelectProps extends Omit<\n BitkitFieldProps,\n 'children' | 'disabled' | 'invalid' | 'onChange' | 'readOnly'\n> {\n children: ReactNode;\n defaultValue?: string;\n name?: string;\n onChange?: ChangeEventHandler<HTMLSelectElement>;\n placeholder?: string;\n selectProps?: NativeSelectRootProps;\n size?: 'md' | 'lg';\n state?: 'disabled' | 'error' | 'readOnly' | 'warning';\n value?: string;\n}\n\nconst BitkitNativeSelect = forwardRef<HTMLSelectElement, BitkitNativeSelectProps>(\n (props: BitkitNativeSelectProps, ref) => {\n const { children, selectProps, size = 'md', state, ...rest } = props;\n const [nativeFieldProps, bitkitFieldProps] = splitProps(rest, [...FIELD_PROPS]);\n\n const recipe = useSlotRecipe({ key: 'nativeSelect' });\n const styles = recipe();\n\n const hasWarning = state === 'warning' || !!bitkitFieldProps.warningText;\n const isInvalid = state === 'error' || !!bitkitFieldProps.errorText;\n\n let statusIcon = undefined;\n if (isInvalid) {\n statusIcon = (\n <IconErrorCircleFilled size={size === 'lg' ? '24' : '16'} css={styles.statusIcon} color=\"icon/negative\" />\n );\n } else if (hasWarning) {\n statusIcon = <IconWarningYellow size={size === 'lg' ? '24' : '16'} css={styles.statusIcon} />;\n }\n\n return (\n <BitkitField state={state} {...bitkitFieldProps}>\n <NativeSelect.Root size={size} {...selectProps} className=\"group\">\n <NativeSelect.Field ref={ref} {...nativeFieldProps}>\n {children}\n </NativeSelect.Field>\n {statusIcon}\n <NativeSelect.Indicator asChild>\n <AssetSelectChevron pointerEvents=\"none\" />\n </NativeSelect.Indicator>\n </NativeSelect.Root>\n </BitkitField>\n );\n },\n);\n\nBitkitNativeSelect.displayName = 'BitkitNativeSelect';\n\nexport default BitkitNativeSelect;\n"],"mappings":";;;;;;;;;;AASA,IAAM,cAAc;CAAC;CAAgB;CAAQ;CAAY;CAAe;AAAO;AAiB/E,IAAM,qBAAqB,YACxB,OAAgC,QAAQ;CACvC,MAAM,EAAE,UAAU,aAAa,OAAO,MAAM,OAAO,GAAG,SAAS;CAC/D,MAAM,CAAC,kBAAkB,oBAAoB,WAAW,MAAM,CAAC,GAAG,WAAW,CAAC;CAG9E,MAAM,SADS,cAAc,EAAE,KAAK,eAAe,CACpC,CAAA,CAAO;CAEtB,MAAM,aAAa,UAAU,aAAa,CAAC,CAAC,iBAAiB;CAC7D,MAAM,YAAY,UAAU,WAAW,CAAC,CAAC,iBAAiB;CAE1D,IAAI,aAAa,KAAA;CACjB,IAAI,WACF,aACE,oBAAC,uBAAD;EAAuB,MAAM,SAAS,OAAO,OAAO;EAAM,KAAK,OAAO;EAAY,OAAM;CAAiB,CAAA;MAEtG,IAAI,YACT,aAAa,oBAAC,mBAAD;EAAmB,MAAM,SAAS,OAAO,OAAO;EAAM,KAAK,OAAO;CAAa,CAAA;CAG9F,OACE,oBAAC,aAAD;EAAoB;EAAO,GAAI;YAC7B,qBAAC,aAAa,MAAd;GAAyB;GAAM,GAAI;GAAa,WAAU;aAA1D;IACE,oBAAC,aAAa,OAAd;KAAyB;KAAK,GAAI;KAC/B;IACiB,CAAA;IACnB;IACD,oBAAC,aAAa,WAAd;KAAwB,SAAA;eACtB,oBAAC,oBAAD,EAAoB,eAAc,OAAQ,CAAA;IACpB,CAAA;GACP;;CACR,CAAA;AAEjB,CACF;AAEA,mBAAmB,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitNoteCard.js","names":[],"sources":["../../../lib/components/BitkitNoteCard/BitkitNoteCard.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { type ElementType, forwardRef, type ReactNode } from 'react';\n\nimport { type NotificationVariant } from '../../theme/common/AlertAndToast.common';\nimport BitkitButton from '../BitkitButton/BitkitButton';\nimport BitkitList from '../BitkitList/BitkitList';\nimport { ICON_COMPONENTS_MAP, type NotificationAction } from '../common/notificationMaps';\n\n// ----- Props -----\n\nexport type BitkitNoteCardProps = Omit<BoxProps, 'children' | 'title'> & {\n action?: NotificationAction;\n message?: ReactNode;\n messageList?: string[];\n status?: NotificationVariant;\n title?: string;\n};\n\n// ----- Component -----\n\nconst BitkitNoteCard = forwardRef<HTMLDivElement, BitkitNoteCardProps>((props, ref) => {\n const { action, message, messageList, status = 'info', title, ...rest } = props;\n\n const recipe = useSlotRecipe({ key: 'noteCard' });\n const styles = recipe({ status });\n\n const IconComponent: ElementType = ICON_COMPONENTS_MAP[status];\n const isProgress = status === 'progress';\n const listItems = messageList ?? [];\n const hasList = listItems.length > 0;\n\n return (\n <Box ref={ref} css={styles.root} {...rest}>\n <Box css={styles.iconBar}>\n <Box css={styles.iconWrapper}>{isProgress ? <IconComponent size=\"lg\" /> : <IconComponent size=\"24\" />}</Box>\n </Box>\n <Box css={[styles.content, !action && { paddingInlineEnd: '24' }]}>\n <Box css={[styles.messageBlock, !title && { paddingBlockStart: '2' }]}>\n {title && <Text css={styles.title}>{title}</Text>}\n {message && <Text css={styles.message}>{message}</Text>}\n {hasList && (\n <BitkitList css={styles.messageList} size=\"md\">\n {listItems.map((item) => (\n <BitkitList.Item key={item}>{item}</BitkitList.Item>\n ))}\n </BitkitList>\n )}\n </Box>\n {action &&\n (action.href !== undefined ? (\n <BitkitButton\n css={[styles.actionArea, hasList && styles.actionAreaList]}\n href={action.href}\n onClick={action.onClick}\n rel={action.target === '_blank' ? 'noopener noreferrer' : undefined}\n size=\"md\"\n target={action.target}\n variant=\"tertiary\"\n >\n {action.label}\n </BitkitButton>\n ) : (\n <BitkitButton\n css={[styles.actionArea, hasList && styles.actionAreaList]}\n onClick={action.onClick}\n size=\"md\"\n variant=\"tertiary\"\n marginBlock=\"4\"\n >\n {action.label}\n </BitkitButton>\n ))}\n </Box>\n </Box>\n );\n});\n\nBitkitNoteCard.displayName = 'BitkitNoteCard';\n\nexport default BitkitNoteCard;\n"],"mappings":";;;;;;;;;AAsBA,IAAM,iBAAiB,YAAiD,OAAO,QAAQ;CACrF,MAAM,EAAE,QAAQ,SAAS,aAAa,SAAS,QAAQ,OAAO,GAAG,SAAS;CAG1E,MAAM,SADS,cAAc,EAAE,KAAK,WAAW,CAChC,
|
|
1
|
+
{"version":3,"file":"BitkitNoteCard.js","names":[],"sources":["../../../lib/components/BitkitNoteCard/BitkitNoteCard.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { type ElementType, forwardRef, type ReactNode } from 'react';\n\nimport { type NotificationVariant } from '../../theme/common/AlertAndToast.common';\nimport BitkitButton from '../BitkitButton/BitkitButton';\nimport BitkitList from '../BitkitList/BitkitList';\nimport { ICON_COMPONENTS_MAP, type NotificationAction } from '../common/notificationMaps';\n\n// ----- Props -----\n\nexport type BitkitNoteCardProps = Omit<BoxProps, 'children' | 'title'> & {\n action?: NotificationAction;\n message?: ReactNode;\n messageList?: string[];\n status?: NotificationVariant;\n title?: string;\n};\n\n// ----- Component -----\n\nconst BitkitNoteCard = forwardRef<HTMLDivElement, BitkitNoteCardProps>((props, ref) => {\n const { action, message, messageList, status = 'info', title, ...rest } = props;\n\n const recipe = useSlotRecipe({ key: 'noteCard' });\n const styles = recipe({ status });\n\n const IconComponent: ElementType = ICON_COMPONENTS_MAP[status];\n const isProgress = status === 'progress';\n const listItems = messageList ?? [];\n const hasList = listItems.length > 0;\n\n return (\n <Box ref={ref} css={styles.root} {...rest}>\n <Box css={styles.iconBar}>\n <Box css={styles.iconWrapper}>{isProgress ? <IconComponent size=\"lg\" /> : <IconComponent size=\"24\" />}</Box>\n </Box>\n <Box css={[styles.content, !action && { paddingInlineEnd: '24' }]}>\n <Box css={[styles.messageBlock, !title && { paddingBlockStart: '2' }]}>\n {title && <Text css={styles.title}>{title}</Text>}\n {message && <Text css={styles.message}>{message}</Text>}\n {hasList && (\n <BitkitList css={styles.messageList} size=\"md\">\n {listItems.map((item) => (\n <BitkitList.Item key={item}>{item}</BitkitList.Item>\n ))}\n </BitkitList>\n )}\n </Box>\n {action &&\n (action.href !== undefined ? (\n <BitkitButton\n css={[styles.actionArea, hasList && styles.actionAreaList]}\n href={action.href}\n onClick={action.onClick}\n rel={action.target === '_blank' ? 'noopener noreferrer' : undefined}\n size=\"md\"\n target={action.target}\n variant=\"tertiary\"\n >\n {action.label}\n </BitkitButton>\n ) : (\n <BitkitButton\n css={[styles.actionArea, hasList && styles.actionAreaList]}\n onClick={action.onClick}\n size=\"md\"\n variant=\"tertiary\"\n marginBlock=\"4\"\n >\n {action.label}\n </BitkitButton>\n ))}\n </Box>\n </Box>\n );\n});\n\nBitkitNoteCard.displayName = 'BitkitNoteCard';\n\nexport default BitkitNoteCard;\n"],"mappings":";;;;;;;;;AAsBA,IAAM,iBAAiB,YAAiD,OAAO,QAAQ;CACrF,MAAM,EAAE,QAAQ,SAAS,aAAa,SAAS,QAAQ,OAAO,GAAG,SAAS;CAG1E,MAAM,SADS,cAAc,EAAE,KAAK,WAAW,CAChC,CAAA,CAAO,EAAE,OAAO,CAAC;CAEhC,MAAM,gBAA6B,oBAAoB;CACvD,MAAM,aAAa,WAAW;CAC9B,MAAM,YAAY,eAAe,CAAC;CAClC,MAAM,UAAU,UAAU,SAAS;CAEnC,OACE,qBAAC,KAAD;EAAU;EAAK,KAAK,OAAO;EAAM,GAAI;YAArC,CACE,oBAAC,KAAD;GAAK,KAAK,OAAO;aACf,oBAAC,KAAD;IAAK,KAAK,OAAO;cAAc,aAAa,oBAAC,eAAD,EAAe,MAAK,KAAM,CAAA,IAAI,oBAAC,eAAD,EAAe,MAAK,KAAM,CAAA;GAAO,CAAA;EACxG,CAAA,GACL,qBAAC,KAAD;GAAK,KAAK,CAAC,OAAO,SAAS,CAAC,UAAU,EAAE,kBAAkB,KAAK,CAAC;aAAhE,CACE,qBAAC,KAAD;IAAK,KAAK,CAAC,OAAO,cAAc,CAAC,SAAS,EAAE,mBAAmB,IAAI,CAAC;cAApE;KACG,SAAS,oBAAC,MAAD;MAAM,KAAK,OAAO;gBAAQ;KAAY,CAAA;KAC/C,WAAW,oBAAC,MAAD;MAAM,KAAK,OAAO;gBAAU;KAAc,CAAA;KACrD,WACC,oBAAC,oBAAD;MAAY,KAAK,OAAO;MAAa,MAAK;gBACvC,UAAU,KAAK,SACd,oBAAC,mBAAW,MAAZ,EAAA,UAA6B,KAAsB,GAA7B,IAA6B,CACpD;KACS,CAAA;IAEX;OACJ,WACE,OAAO,SAAS,KAAA,IACf,oBAAC,cAAD;IACE,KAAK,CAAC,OAAO,YAAY,WAAW,OAAO,cAAc;IACzD,MAAM,OAAO;IACb,SAAS,OAAO;IAChB,KAAK,OAAO,WAAW,WAAW,wBAAwB,KAAA;IAC1D,MAAK;IACL,QAAQ,OAAO;IACf,SAAQ;cAEP,OAAO;GACI,CAAA,IAEd,oBAAC,cAAD;IACE,KAAK,CAAC,OAAO,YAAY,WAAW,OAAO,cAAc;IACzD,SAAS,OAAO;IAChB,MAAK;IACL,SAAQ;IACR,aAAY;cAEX,OAAO;GACI,CAAA,EAEf;IACF;;AAET,CAAC;AAED,eAAe,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitOverflowContent.js","names":[],"sources":["../../../lib/components/BitkitOverflowContent/BitkitOverflowContent.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text, type TextProps } from '@chakra-ui/react/text';\nimport { forwardRef, type ReactNode, useState } from 'react';\n\nimport BitkitDialog from '../BitkitDialog/BitkitDialog';\nimport BitkitLinkButton, { type BitkitLinkButtonProps } from '../BitkitLinkButton/BitkitLinkButton';\n\nexport interface BitkitOverflowContentProps extends Omit<BoxProps, 'children' | 'title'> {\n buttonSize?: BitkitLinkButtonProps['size'];\n children: ReactNode;\n previewText?: string;\n textStyle?: TextProps['textStyle'];\n title: string;\n}\n\nconst BitkitOverflowContent = forwardRef<HTMLDivElement, BitkitOverflowContentProps>((props, ref) => {\n const { buttonSize = 'md', children, previewText, textStyle, title, ...rest } = props;\n const [open, setOpen] = useState(false);\n const recipe = useSlotRecipe({ key: 'overflowContent' });\n const styles = recipe();\n const preview = previewText || (typeof children === 'string' ? children : 'Click to view content');\n\n return (\n <>\n <Box ref={ref} css={styles.root} {...rest}>\n <Text css={styles.preview} textStyle={textStyle}>\n {preview}\n </Text>\n <BitkitLinkButton {...styles.action} onClick={() => setOpen(true)} size={buttonSize}>\n {`View ${title.toLowerCase()}`}\n </BitkitLinkButton>\n </Box>\n <BitkitDialog\n open={open}\n size=\"sm\"\n title={title}\n variant=\"overflowContent\"\n onOpenChange={({ open: isOpen }) => setOpen(isOpen)}\n >\n {children}\n </BitkitDialog>\n </>\n );\n});\n\nBitkitOverflowContent.displayName = 'BitkitOverflowContent';\n\nexport default BitkitOverflowContent;\n"],"mappings":";;;;;;;;AAgBA,IAAM,wBAAwB,YAAwD,OAAO,QAAQ;CACnG,MAAM,EAAE,aAAa,MAAM,UAAU,aAAa,WAAW,OAAO,GAAG,SAAS;CAChF,MAAM,CAAC,MAAM,WAAW,SAAS,KAAK;CAEtC,MAAM,SADS,cAAc,EAAE,KAAK,kBAAkB,CACvC,
|
|
1
|
+
{"version":3,"file":"BitkitOverflowContent.js","names":[],"sources":["../../../lib/components/BitkitOverflowContent/BitkitOverflowContent.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text, type TextProps } from '@chakra-ui/react/text';\nimport { forwardRef, type ReactNode, useState } from 'react';\n\nimport BitkitDialog from '../BitkitDialog/BitkitDialog';\nimport BitkitLinkButton, { type BitkitLinkButtonProps } from '../BitkitLinkButton/BitkitLinkButton';\n\nexport interface BitkitOverflowContentProps extends Omit<BoxProps, 'children' | 'title'> {\n buttonSize?: BitkitLinkButtonProps['size'];\n children: ReactNode;\n previewText?: string;\n textStyle?: TextProps['textStyle'];\n title: string;\n}\n\nconst BitkitOverflowContent = forwardRef<HTMLDivElement, BitkitOverflowContentProps>((props, ref) => {\n const { buttonSize = 'md', children, previewText, textStyle, title, ...rest } = props;\n const [open, setOpen] = useState(false);\n const recipe = useSlotRecipe({ key: 'overflowContent' });\n const styles = recipe();\n const preview = previewText || (typeof children === 'string' ? children : 'Click to view content');\n\n return (\n <>\n <Box ref={ref} css={styles.root} {...rest}>\n <Text css={styles.preview} textStyle={textStyle}>\n {preview}\n </Text>\n <BitkitLinkButton {...styles.action} onClick={() => setOpen(true)} size={buttonSize}>\n {`View ${title.toLowerCase()}`}\n </BitkitLinkButton>\n </Box>\n <BitkitDialog\n open={open}\n size=\"sm\"\n title={title}\n variant=\"overflowContent\"\n onOpenChange={({ open: isOpen }) => setOpen(isOpen)}\n >\n {children}\n </BitkitDialog>\n </>\n );\n});\n\nBitkitOverflowContent.displayName = 'BitkitOverflowContent';\n\nexport default BitkitOverflowContent;\n"],"mappings":";;;;;;;;AAgBA,IAAM,wBAAwB,YAAwD,OAAO,QAAQ;CACnG,MAAM,EAAE,aAAa,MAAM,UAAU,aAAa,WAAW,OAAO,GAAG,SAAS;CAChF,MAAM,CAAC,MAAM,WAAW,SAAS,KAAK;CAEtC,MAAM,SADS,cAAc,EAAE,KAAK,kBAAkB,CACvC,CAAA,CAAO;CACtB,MAAM,UAAU,gBAAgB,OAAO,aAAa,WAAW,WAAW;CAE1E,OACE,qBAAA,YAAA,EAAA,UAAA,CACE,qBAAC,KAAD;EAAU;EAAK,KAAK,OAAO;EAAM,GAAI;YAArC,CACE,oBAAC,MAAD;GAAM,KAAK,OAAO;GAAoB;aACnC;EACG,CAAA,GACN,oBAAC,kBAAD;GAAkB,GAAI,OAAO;GAAQ,eAAe,QAAQ,IAAI;GAAG,MAAM;aACtE,QAAQ,MAAM,YAAY;EACX,CAAA,CACf;KACL,oBAAC,sBAAD;EACQ;EACN,MAAK;EACE;EACP,SAAQ;EACR,eAAe,EAAE,MAAM,aAAa,QAAQ,MAAM;EAEjD;CACW,CAAA,CACd,EAAA,CAAA;AAEN,CAAC;AAED,sBAAsB,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitPageFooter.js","names":[],"sources":["../../../lib/components/BitkitPageFooter/BitkitPageFooter.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { chakra, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport {\n type ComponentPropsWithoutRef,\n forwardRef,\n type HTMLAttributeAnchorTarget,\n type MouseEventHandler,\n type ReactNode,\n} from 'react';\n\nimport IconBitbot from '../../icons/IconBitbot';\nimport { withSubComponents } from '../../utilities/withSubComponents';\n\nconst SEVERITY_COLOR_MAP: Record<string, string> = {\n critical: 'color/red/bold',\n major: 'color/orange/bold',\n minor: 'color/yellow/muted',\n none: 'color/green/bold',\n};\n\n// --- BitkitPageFooter (Root) ---\n\nexport interface BitkitPageFooterProps extends Omit<BoxProps, 'colorVariant'> {\n children?: ReactNode;\n colorVariant?: 'gray' | 'white';\n severity?: 'none' | 'minor' | 'major' | 'critical' | (string & {});\n size?: 'compact' | 'default';\n statusLabel?: string;\n variant?: 'default' | 'public';\n}\n\nconst BitkitPageFooter = forwardRef<HTMLDivElement, BitkitPageFooterProps>((props, ref) => {\n const { children, colorVariant, severity = 'none', size, statusLabel, variant, ...rest } = props;\n\n const recipe = useSlotRecipe({ key: 'pageFooter' });\n const styles = recipe({ colorVariant, size, variant });\n\n const year = new Date().getFullYear();\n\n const severityColor = SEVERITY_COLOR_MAP[severity] ?? 'color/neutral/bold';\n\n return (\n <Box as=\"footer\" ref={ref} css={styles.root} {...rest}>\n {statusLabel && (\n <chakra.div css={styles.status}>\n <chakra.div css={styles.statusDot} background={severityColor} />\n <chakra.span css={styles.statusLabel}>{statusLabel}</chakra.span>\n </chakra.div>\n )}\n\n <chakra.div css={styles.copyright}>\n <IconBitbot size=\"24\" color=\"icon/secondary\" />\n <chakra.span css={styles.copyrightText}>© {year} Bitrise Ltd.</chakra.span>\n </chakra.div>\n\n {children && <chakra.nav css={styles.links}>{children}</chakra.nav>}\n </Box>\n );\n});\n\nBitkitPageFooter.displayName = 'BitkitPageFooter';\n\n// --- BitkitPageFooterItem ---\n\ntype LinkItemProps = {\n href: string;\n rel?: string;\n target?: HTMLAttributeAnchorTarget;\n} & Omit<ComponentPropsWithoutRef<'a'>, 'href' | 'target' | 'rel'>;\n\ntype ButtonItemProps = {\n href?: never;\n onClick: MouseEventHandler<HTMLButtonElement>;\n} & Omit<ComponentPropsWithoutRef<'button'>, 'onClick'>;\n\nexport type BitkitPageFooterItemProps = (LinkItemProps | ButtonItemProps) & {\n children: ReactNode;\n};\n\nconst BitkitPageFooterItem = forwardRef<HTMLButtonElement & HTMLAnchorElement, BitkitPageFooterItemProps>(\n (props, ref) => {\n const recipe = useSlotRecipe({ key: 'pageFooter' });\n const styles = recipe();\n\n if ('href' in props && props.href) {\n const { children, href, target, rel, ...rest } = props as LinkItemProps & { children: ReactNode };\n const resolvedRel = target === '_blank' ? [rel, 'noopener noreferrer'].filter(Boolean).join(' ') : rel;\n\n return (\n <chakra.a ref={ref} css={styles.link} href={href} rel={resolvedRel} target={target} {...rest}>\n {children}\n </chakra.a>\n );\n }\n\n const { children, onClick, ...rest } = props as ButtonItemProps & { children: ReactNode };\n\n return (\n <chakra.button ref={ref} css={styles.link} onClick={onClick} type=\"button\" {...rest}>\n {children}\n </chakra.button>\n );\n },\n);\n\nBitkitPageFooterItem.displayName = 'BitkitPageFooterItem';\n\nexport default withSubComponents(BitkitPageFooter, { Item: BitkitPageFooterItem });\n"],"mappings":";;;;;;;AAaA,IAAM,qBAA6C;CACjD,UAAU;CACV,OAAO;CACP,OAAO;CACP,MAAM;AACR;AAaA,IAAM,mBAAmB,YAAmD,OAAO,QAAQ;CACzF,MAAM,EAAE,UAAU,cAAc,WAAW,QAAQ,MAAM,aAAa,SAAS,GAAG,SAAS;CAG3F,MAAM,SADS,cAAc,EAAE,KAAK,aAAa,CAClC,
|
|
1
|
+
{"version":3,"file":"BitkitPageFooter.js","names":[],"sources":["../../../lib/components/BitkitPageFooter/BitkitPageFooter.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { chakra, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport {\n type ComponentPropsWithoutRef,\n forwardRef,\n type HTMLAttributeAnchorTarget,\n type MouseEventHandler,\n type ReactNode,\n} from 'react';\n\nimport IconBitbot from '../../icons/IconBitbot';\nimport { withSubComponents } from '../../utilities/withSubComponents';\n\nconst SEVERITY_COLOR_MAP: Record<string, string> = {\n critical: 'color/red/bold',\n major: 'color/orange/bold',\n minor: 'color/yellow/muted',\n none: 'color/green/bold',\n};\n\n// --- BitkitPageFooter (Root) ---\n\nexport interface BitkitPageFooterProps extends Omit<BoxProps, 'colorVariant'> {\n children?: ReactNode;\n colorVariant?: 'gray' | 'white';\n severity?: 'none' | 'minor' | 'major' | 'critical' | (string & {});\n size?: 'compact' | 'default';\n statusLabel?: string;\n variant?: 'default' | 'public';\n}\n\nconst BitkitPageFooter = forwardRef<HTMLDivElement, BitkitPageFooterProps>((props, ref) => {\n const { children, colorVariant, severity = 'none', size, statusLabel, variant, ...rest } = props;\n\n const recipe = useSlotRecipe({ key: 'pageFooter' });\n const styles = recipe({ colorVariant, size, variant });\n\n const year = new Date().getFullYear();\n\n const severityColor = SEVERITY_COLOR_MAP[severity] ?? 'color/neutral/bold';\n\n return (\n <Box as=\"footer\" ref={ref} css={styles.root} {...rest}>\n {statusLabel && (\n <chakra.div css={styles.status}>\n <chakra.div css={styles.statusDot} background={severityColor} />\n <chakra.span css={styles.statusLabel}>{statusLabel}</chakra.span>\n </chakra.div>\n )}\n\n <chakra.div css={styles.copyright}>\n <IconBitbot size=\"24\" color=\"icon/secondary\" />\n <chakra.span css={styles.copyrightText}>© {year} Bitrise Ltd.</chakra.span>\n </chakra.div>\n\n {children && <chakra.nav css={styles.links}>{children}</chakra.nav>}\n </Box>\n );\n});\n\nBitkitPageFooter.displayName = 'BitkitPageFooter';\n\n// --- BitkitPageFooterItem ---\n\ntype LinkItemProps = {\n href: string;\n rel?: string;\n target?: HTMLAttributeAnchorTarget;\n} & Omit<ComponentPropsWithoutRef<'a'>, 'href' | 'target' | 'rel'>;\n\ntype ButtonItemProps = {\n href?: never;\n onClick: MouseEventHandler<HTMLButtonElement>;\n} & Omit<ComponentPropsWithoutRef<'button'>, 'onClick'>;\n\nexport type BitkitPageFooterItemProps = (LinkItemProps | ButtonItemProps) & {\n children: ReactNode;\n};\n\nconst BitkitPageFooterItem = forwardRef<HTMLButtonElement & HTMLAnchorElement, BitkitPageFooterItemProps>(\n (props, ref) => {\n const recipe = useSlotRecipe({ key: 'pageFooter' });\n const styles = recipe();\n\n if ('href' in props && props.href) {\n const { children, href, target, rel, ...rest } = props as LinkItemProps & { children: ReactNode };\n const resolvedRel = target === '_blank' ? [rel, 'noopener noreferrer'].filter(Boolean).join(' ') : rel;\n\n return (\n <chakra.a ref={ref} css={styles.link} href={href} rel={resolvedRel} target={target} {...rest}>\n {children}\n </chakra.a>\n );\n }\n\n const { children, onClick, ...rest } = props as ButtonItemProps & { children: ReactNode };\n\n return (\n <chakra.button ref={ref} css={styles.link} onClick={onClick} type=\"button\" {...rest}>\n {children}\n </chakra.button>\n );\n },\n);\n\nBitkitPageFooterItem.displayName = 'BitkitPageFooterItem';\n\nexport default withSubComponents(BitkitPageFooter, { Item: BitkitPageFooterItem });\n"],"mappings":";;;;;;;AAaA,IAAM,qBAA6C;CACjD,UAAU;CACV,OAAO;CACP,OAAO;CACP,MAAM;AACR;AAaA,IAAM,mBAAmB,YAAmD,OAAO,QAAQ;CACzF,MAAM,EAAE,UAAU,cAAc,WAAW,QAAQ,MAAM,aAAa,SAAS,GAAG,SAAS;CAG3F,MAAM,SADS,cAAc,EAAE,KAAK,aAAa,CAClC,CAAA,CAAO;EAAE;EAAc;EAAM;CAAQ,CAAC;CAErD,MAAM,wBAAO,IAAI,KAAK,EAAA,CAAE,YAAY;CAEpC,MAAM,gBAAgB,mBAAmB,aAAa;CAEtD,OACE,qBAAC,KAAD;EAAK,IAAG;EAAc;EAAK,KAAK,OAAO;EAAM,GAAI;YAAjD;GACG,eACC,qBAAC,OAAO,KAAR;IAAY,KAAK,OAAO;cAAxB,CACE,oBAAC,OAAO,KAAR;KAAY,KAAK,OAAO;KAAW,YAAY;IAAgB,CAAA,GAC/D,oBAAC,OAAO,MAAR;KAAa,KAAK,OAAO;eAAc;IAAyB,CAAA,CACtD;;GAGd,qBAAC,OAAO,KAAR;IAAY,KAAK,OAAO;cAAxB,CACE,oBAAC,YAAD;KAAY,MAAK;KAAK,OAAM;IAAkB,CAAA,GAC9C,qBAAC,OAAO,MAAR;KAAa,KAAK,OAAO;eAAzB;MAAwC;MAAG;MAAK;KAA0B;MAChE;;GAEX,YAAY,oBAAC,OAAO,KAAR;IAAY,KAAK,OAAO;IAAQ;GAAqB,CAAA;EAC/D;;AAET,CAAC;AAED,iBAAiB,cAAc;AAmB/B,IAAM,uBAAuB,YAC1B,OAAO,QAAQ;CAEd,MAAM,SADS,cAAc,EAAE,KAAK,aAAa,CAClC,CAAA,CAAO;CAEtB,IAAI,UAAU,SAAS,MAAM,MAAM;EACjC,MAAM,EAAE,UAAU,MAAM,QAAQ,KAAK,GAAG,SAAS;EACjD,MAAM,cAAc,WAAW,WAAW,CAAC,KAAK,qBAAqB,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,IAAI;EAEnG,OACE,oBAAC,OAAO,GAAR;GAAe;GAAK,KAAK,OAAO;GAAY;GAAM,KAAK;GAAqB;GAAQ,GAAI;GACrF;EACO,CAAA;CAEd;CAEA,MAAM,EAAE,UAAU,SAAS,GAAG,SAAS;CAEvC,OACE,oBAAC,OAAO,QAAR;EAAoB;EAAK,KAAK,OAAO;EAAe;EAAS,MAAK;EAAS,GAAI;EAC5E;CACY,CAAA;AAEnB,CACF;AAEA,qBAAqB,cAAc;AAEnC,IAAA,2BAAe,kBAAkB,kBAAkB,EAAE,MAAM,qBAAqB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitPagination.js","names":[],"sources":["../../../lib/components/BitkitPagination/BitkitPagination.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { Separator } from '@chakra-ui/react/separator';\nimport { Skeleton } from '@chakra-ui/react/skeleton';\nimport { chakra, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef, useMemo } from 'react';\n\nimport { IconChevronLeft, IconChevronRight } from '../../icons';\nimport BitkitIconButton from '../BitkitIconButton/BitkitIconButton';\nimport BitkitNativeSelect from '../BitkitNativeSelect/BitkitNativeSelect';\n\nexport interface BitkitPaginationLabels {\n items?: string;\n itemsPerPage?: string;\n nextPage?: string;\n pages?: string;\n previousPage?: string;\n}\n\nconst DEFAULT_LABELS: Required<BitkitPaginationLabels> = {\n items: '{start}\\u2013{end} of {total} items',\n itemsPerPage: 'Items per page:',\n nextPage: 'Next page',\n pages: 'of {totalPages} pages',\n previousPage: 'Previous page',\n};\n\nconst formatLabel = (template: string, values: Record<string, number>) =>\n Object.entries(values).reduce((str, [key, val]) => str.replaceAll(`{${key}}`, String(val)), template);\n\nexport interface BitkitPaginationProps extends Omit<BoxProps, 'colorPalette' | 'page'> {\n labels?: BitkitPaginationLabels;\n onPageChange?: (page: number) => void;\n onPageSizeChange?: (pageSize: number) => void;\n page: number;\n pageSize: number;\n pageSizeOptions?: number[];\n state?: 'skeleton';\n totalItems: number;\n variant?: 'card' | 'page' | 'table';\n}\n\nconst BitkitPagination = forwardRef<HTMLDivElement, BitkitPaginationProps>((props, ref) => {\n const {\n labels: labelsProp,\n onPageChange,\n onPageSizeChange,\n page,\n pageSize,\n pageSizeOptions = [10, 25, 50],\n state,\n totalItems,\n variant = 'table',\n ...rest\n } = props;\n\n const recipe = useSlotRecipe({ key: 'pagination' });\n const styles = recipe({ variant });\n\n const safePageSize = Math.max(1, pageSize);\n const totalPages = Math.max(1, Math.ceil(totalItems / safePageSize));\n const safePage = Math.min(Math.max(1, page), totalPages);\n const start = totalItems === 0 ? 0 : (safePage - 1) * safePageSize + 1;\n const end = Math.min(safePage * safePageSize, totalItems);\n const isFirstPage = safePage <= 1;\n const isLastPage = safePage >= totalPages;\n const isSkeleton = state === 'skeleton';\n const showItemsPerPage = variant !== 'card';\n\n const values = { end, start, total: totalItems, totalPages };\n const labels = Object.fromEntries(\n Object.entries({ ...DEFAULT_LABELS, ...labelsProp }).map(([k, v]) => [k, formatLabel(v, values)]),\n ) as Required<BitkitPaginationLabels>;\n\n const pageSizeItems = useMemo(\n () => pageSizeOptions.map((opt) => ({ label: String(opt), value: String(opt) })),\n [pageSizeOptions],\n );\n\n const pageItems = useMemo(\n () => Array.from({ length: totalPages }, (_, i) => ({ label: String(i + 1), value: String(i + 1) })),\n [totalPages],\n );\n\n return (\n <Box ref={ref} css={styles.root} {...rest}>\n <chakra.div css={styles.itemsBlock}>\n {showItemsPerPage && (\n <>\n <chakra.span css={styles.text}>{labels.itemsPerPage}</chakra.span>\n <BitkitNativeSelect\n css={styles.itemsSelect}\n onChange={(e) => onPageSizeChange?.(Number(e.target.value))}\n size=\"md\"\n state={isSkeleton ? 'disabled' : undefined}\n value={String(safePageSize)}\n >\n {pageSizeItems.map((opt) => (\n <option key={opt.value} value={opt.value}>\n {opt.label}\n </option>\n ))}\n </BitkitNativeSelect>\n <Separator alignSelf=\"stretch\" borderColor=\"border/minimal\" marginInline=\"8\" orientation=\"vertical\" />\n </>\n )}\n {isSkeleton ? <Skeleton height=\"20\" width=\"96\" /> : <chakra.span css={styles.text}>{labels.items}</chakra.span>}\n </chakra.div>\n\n <chakra.div css={styles.pageBlock}>\n <Separator alignSelf=\"stretch\" borderColor=\"border/minimal\" marginInline=\"8\" orientation=\"vertical\" />\n <BitkitNativeSelect\n css={styles.pageSelect}\n onChange={(e) => onPageChange?.(Number(e.target.value))}\n size=\"md\"\n state={isSkeleton ? 'disabled' : undefined}\n value={String(safePage)}\n >\n {pageItems.map((opt) => (\n <option key={opt.value} value={opt.value}>\n {opt.label}\n </option>\n ))}\n </BitkitNativeSelect>\n {isSkeleton ? <Skeleton height=\"20\" width=\"64\" /> : <chakra.span css={styles.text}>{labels.pages}</chakra.span>}\n <BitkitIconButton\n icon={IconChevronLeft}\n label={labels.previousPage}\n marginInlineStart=\"8\"\n onClick={() => onPageChange?.(safePage - 1)}\n size=\"md\"\n state={isFirstPage || isSkeleton ? 'disabled' : undefined}\n variant=\"secondary\"\n />\n <BitkitIconButton\n icon={IconChevronRight}\n label={labels.nextPage}\n onClick={() => onPageChange?.(safePage + 1)}\n size=\"md\"\n state={isLastPage || isSkeleton ? 'disabled' : undefined}\n variant=\"secondary\"\n />\n </chakra.div>\n </Box>\n );\n});\n\nBitkitPagination.displayName = 'BitkitPagination';\n\nexport default BitkitPagination;\n"],"mappings":";;;;;;;;;;;AAkBA,IAAM,iBAAmD;CACvD,OAAO;CACP,cAAc;CACd,UAAU;CACV,OAAO;CACP,cAAc;AAChB;AAEA,IAAM,eAAe,UAAkB,WACrC,OAAO,QAAQ,MAAM,
|
|
1
|
+
{"version":3,"file":"BitkitPagination.js","names":[],"sources":["../../../lib/components/BitkitPagination/BitkitPagination.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { Separator } from '@chakra-ui/react/separator';\nimport { Skeleton } from '@chakra-ui/react/skeleton';\nimport { chakra, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef, useMemo } from 'react';\n\nimport { IconChevronLeft, IconChevronRight } from '../../icons';\nimport BitkitIconButton from '../BitkitIconButton/BitkitIconButton';\nimport BitkitNativeSelect from '../BitkitNativeSelect/BitkitNativeSelect';\n\nexport interface BitkitPaginationLabels {\n items?: string;\n itemsPerPage?: string;\n nextPage?: string;\n pages?: string;\n previousPage?: string;\n}\n\nconst DEFAULT_LABELS: Required<BitkitPaginationLabels> = {\n items: '{start}\\u2013{end} of {total} items',\n itemsPerPage: 'Items per page:',\n nextPage: 'Next page',\n pages: 'of {totalPages} pages',\n previousPage: 'Previous page',\n};\n\nconst formatLabel = (template: string, values: Record<string, number>) =>\n Object.entries(values).reduce((str, [key, val]) => str.replaceAll(`{${key}}`, String(val)), template);\n\nexport interface BitkitPaginationProps extends Omit<BoxProps, 'colorPalette' | 'page'> {\n labels?: BitkitPaginationLabels;\n onPageChange?: (page: number) => void;\n onPageSizeChange?: (pageSize: number) => void;\n page: number;\n pageSize: number;\n pageSizeOptions?: number[];\n state?: 'skeleton';\n totalItems: number;\n variant?: 'card' | 'page' | 'table';\n}\n\nconst BitkitPagination = forwardRef<HTMLDivElement, BitkitPaginationProps>((props, ref) => {\n const {\n labels: labelsProp,\n onPageChange,\n onPageSizeChange,\n page,\n pageSize,\n pageSizeOptions = [10, 25, 50],\n state,\n totalItems,\n variant = 'table',\n ...rest\n } = props;\n\n const recipe = useSlotRecipe({ key: 'pagination' });\n const styles = recipe({ variant });\n\n const safePageSize = Math.max(1, pageSize);\n const totalPages = Math.max(1, Math.ceil(totalItems / safePageSize));\n const safePage = Math.min(Math.max(1, page), totalPages);\n const start = totalItems === 0 ? 0 : (safePage - 1) * safePageSize + 1;\n const end = Math.min(safePage * safePageSize, totalItems);\n const isFirstPage = safePage <= 1;\n const isLastPage = safePage >= totalPages;\n const isSkeleton = state === 'skeleton';\n const showItemsPerPage = variant !== 'card';\n\n const values = { end, start, total: totalItems, totalPages };\n const labels = Object.fromEntries(\n Object.entries({ ...DEFAULT_LABELS, ...labelsProp }).map(([k, v]) => [k, formatLabel(v, values)]),\n ) as Required<BitkitPaginationLabels>;\n\n const pageSizeItems = useMemo(\n () => pageSizeOptions.map((opt) => ({ label: String(opt), value: String(opt) })),\n [pageSizeOptions],\n );\n\n const pageItems = useMemo(\n () => Array.from({ length: totalPages }, (_, i) => ({ label: String(i + 1), value: String(i + 1) })),\n [totalPages],\n );\n\n return (\n <Box ref={ref} css={styles.root} {...rest}>\n <chakra.div css={styles.itemsBlock}>\n {showItemsPerPage && (\n <>\n <chakra.span css={styles.text}>{labels.itemsPerPage}</chakra.span>\n <BitkitNativeSelect\n css={styles.itemsSelect}\n onChange={(e) => onPageSizeChange?.(Number(e.target.value))}\n size=\"md\"\n state={isSkeleton ? 'disabled' : undefined}\n value={String(safePageSize)}\n >\n {pageSizeItems.map((opt) => (\n <option key={opt.value} value={opt.value}>\n {opt.label}\n </option>\n ))}\n </BitkitNativeSelect>\n <Separator alignSelf=\"stretch\" borderColor=\"border/minimal\" marginInline=\"8\" orientation=\"vertical\" />\n </>\n )}\n {isSkeleton ? <Skeleton height=\"20\" width=\"96\" /> : <chakra.span css={styles.text}>{labels.items}</chakra.span>}\n </chakra.div>\n\n <chakra.div css={styles.pageBlock}>\n <Separator alignSelf=\"stretch\" borderColor=\"border/minimal\" marginInline=\"8\" orientation=\"vertical\" />\n <BitkitNativeSelect\n css={styles.pageSelect}\n onChange={(e) => onPageChange?.(Number(e.target.value))}\n size=\"md\"\n state={isSkeleton ? 'disabled' : undefined}\n value={String(safePage)}\n >\n {pageItems.map((opt) => (\n <option key={opt.value} value={opt.value}>\n {opt.label}\n </option>\n ))}\n </BitkitNativeSelect>\n {isSkeleton ? <Skeleton height=\"20\" width=\"64\" /> : <chakra.span css={styles.text}>{labels.pages}</chakra.span>}\n <BitkitIconButton\n icon={IconChevronLeft}\n label={labels.previousPage}\n marginInlineStart=\"8\"\n onClick={() => onPageChange?.(safePage - 1)}\n size=\"md\"\n state={isFirstPage || isSkeleton ? 'disabled' : undefined}\n variant=\"secondary\"\n />\n <BitkitIconButton\n icon={IconChevronRight}\n label={labels.nextPage}\n onClick={() => onPageChange?.(safePage + 1)}\n size=\"md\"\n state={isLastPage || isSkeleton ? 'disabled' : undefined}\n variant=\"secondary\"\n />\n </chakra.div>\n </Box>\n );\n});\n\nBitkitPagination.displayName = 'BitkitPagination';\n\nexport default BitkitPagination;\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitPaginationLoadMore.js","names":[],"sources":["../../../lib/components/BitkitPaginationLoadMore/BitkitPaginationLoadMore.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { chakra, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef } from 'react';\n\nimport BitkitButton from '../BitkitButton/BitkitButton';\nimport BitkitInlineLoading from '../BitkitInlineLoading/BitkitInlineLoading';\nimport BitkitLinkButton from '../BitkitLinkButton/BitkitLinkButton';\n\nexport interface BitkitPaginationLoadMoreProps extends Omit<BoxProps, 'page' | 'size'> {\n loadingMore?: boolean;\n onLoadMore: () => void;\n page: number;\n pageItemsCount: number;\n size?: 'md' | 'sm' | 'xs';\n totalCount: number;\n}\n\nconst BitkitPaginationLoadMore = forwardRef<HTMLDivElement, BitkitPaginationLoadMoreProps>((props, ref) => {\n const { loadingMore = false, onLoadMore, page, pageItemsCount, size = 'md', totalCount, ...rest } = props;\n\n const recipe = useSlotRecipe({ key: 'paginationLoadMore' });\n const styles = recipe({ size });\n\n const clampedPage = Math.max(1, page);\n const clampedPageItemsCount = Math.max(1, pageItemsCount);\n const shownCount = Math.min(clampedPage * clampedPageItemsCount, totalCount);\n const isComplete = shownCount >= totalCount;\n const loadMoreCount = Math.min(clampedPageItemsCount, totalCount - shownCount);\n\n const inlineLoadingSize = size === 'md' ? 'md' : 'sm';\n\n return (\n <Box css={styles.root} ref={ref} {...rest}>\n <chakra.span css={styles.counter}>\n Showing {shownCount} of {totalCount}\n </chakra.span>\n {!isComplete && (\n <>\n {loadingMore ? (\n <BitkitInlineLoading color=\"text/tertiary\" label=\"Loading more...\" size={inlineLoadingSize} />\n ) : size === 'xs' ? (\n <BitkitLinkButton onClick={onLoadMore} size=\"sm\">\n {`Load ${loadMoreCount} more`}\n </BitkitLinkButton>\n ) : (\n <BitkitButton onClick={onLoadMore} size={size === 'md' ? 'md' : 'sm'} variant=\"tertiary\">\n {`Load ${loadMoreCount} more`}\n </BitkitButton>\n )}\n </>\n )}\n </Box>\n );\n});\n\nBitkitPaginationLoadMore.displayName = 'BitkitPaginationLoadMore';\n\nexport default BitkitPaginationLoadMore;\n"],"mappings":";;;;;;;;AAiBA,IAAM,2BAA2B,YAA2D,OAAO,QAAQ;CACzG,MAAM,EAAE,cAAc,OAAO,YAAY,MAAM,gBAAgB,OAAO,MAAM,YAAY,GAAG,SAAS;CAGpG,MAAM,SADS,cAAc,EAAE,KAAK,qBAAqB,CAC1C,
|
|
1
|
+
{"version":3,"file":"BitkitPaginationLoadMore.js","names":[],"sources":["../../../lib/components/BitkitPaginationLoadMore/BitkitPaginationLoadMore.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { chakra, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef } from 'react';\n\nimport BitkitButton from '../BitkitButton/BitkitButton';\nimport BitkitInlineLoading from '../BitkitInlineLoading/BitkitInlineLoading';\nimport BitkitLinkButton from '../BitkitLinkButton/BitkitLinkButton';\n\nexport interface BitkitPaginationLoadMoreProps extends Omit<BoxProps, 'page' | 'size'> {\n loadingMore?: boolean;\n onLoadMore: () => void;\n page: number;\n pageItemsCount: number;\n size?: 'md' | 'sm' | 'xs';\n totalCount: number;\n}\n\nconst BitkitPaginationLoadMore = forwardRef<HTMLDivElement, BitkitPaginationLoadMoreProps>((props, ref) => {\n const { loadingMore = false, onLoadMore, page, pageItemsCount, size = 'md', totalCount, ...rest } = props;\n\n const recipe = useSlotRecipe({ key: 'paginationLoadMore' });\n const styles = recipe({ size });\n\n const clampedPage = Math.max(1, page);\n const clampedPageItemsCount = Math.max(1, pageItemsCount);\n const shownCount = Math.min(clampedPage * clampedPageItemsCount, totalCount);\n const isComplete = shownCount >= totalCount;\n const loadMoreCount = Math.min(clampedPageItemsCount, totalCount - shownCount);\n\n const inlineLoadingSize = size === 'md' ? 'md' : 'sm';\n\n return (\n <Box css={styles.root} ref={ref} {...rest}>\n <chakra.span css={styles.counter}>\n Showing {shownCount} of {totalCount}\n </chakra.span>\n {!isComplete && (\n <>\n {loadingMore ? (\n <BitkitInlineLoading color=\"text/tertiary\" label=\"Loading more...\" size={inlineLoadingSize} />\n ) : size === 'xs' ? (\n <BitkitLinkButton onClick={onLoadMore} size=\"sm\">\n {`Load ${loadMoreCount} more`}\n </BitkitLinkButton>\n ) : (\n <BitkitButton onClick={onLoadMore} size={size === 'md' ? 'md' : 'sm'} variant=\"tertiary\">\n {`Load ${loadMoreCount} more`}\n </BitkitButton>\n )}\n </>\n )}\n </Box>\n );\n});\n\nBitkitPaginationLoadMore.displayName = 'BitkitPaginationLoadMore';\n\nexport default BitkitPaginationLoadMore;\n"],"mappings":";;;;;;;;AAiBA,IAAM,2BAA2B,YAA2D,OAAO,QAAQ;CACzG,MAAM,EAAE,cAAc,OAAO,YAAY,MAAM,gBAAgB,OAAO,MAAM,YAAY,GAAG,SAAS;CAGpG,MAAM,SADS,cAAc,EAAE,KAAK,qBAAqB,CAC1C,CAAA,CAAO,EAAE,KAAK,CAAC;CAE9B,MAAM,cAAc,KAAK,IAAI,GAAG,IAAI;CACpC,MAAM,wBAAwB,KAAK,IAAI,GAAG,cAAc;CACxD,MAAM,aAAa,KAAK,IAAI,cAAc,uBAAuB,UAAU;CAC3E,MAAM,aAAa,cAAc;CACjC,MAAM,gBAAgB,KAAK,IAAI,uBAAuB,aAAa,UAAU;CAE7E,MAAM,oBAAoB,SAAS,OAAO,OAAO;CAEjD,OACE,qBAAC,KAAD;EAAK,KAAK,OAAO;EAAW;EAAK,GAAI;YAArC,CACE,qBAAC,OAAO,MAAR;GAAa,KAAK,OAAO;aAAzB;IAAkC;IACvB;IAAW;IAAK;GACd;MACZ,CAAC,cACA,oBAAA,YAAA,EAAA,UACG,cACC,oBAAC,qBAAD;GAAqB,OAAM;GAAgB,OAAM;GAAkB,MAAM;EAAoB,CAAA,IAC3F,SAAS,OACX,oBAAC,kBAAD;GAAkB,SAAS;GAAY,MAAK;aACzC,QAAQ,cAAc;EACP,CAAA,IAElB,oBAAC,cAAD;GAAc,SAAS;GAAY,MAAM,SAAS,OAAO,OAAO;GAAM,SAAQ;aAC3E,QAAQ,cAAc;EACX,CAAA,EAEhB,CAAA,CAED;;AAET,CAAC;AAED,yBAAyB,cAAc"}
|
|
@@ -22,7 +22,8 @@ var ScrollablePopoverBody = ({ children }) => {
|
|
|
22
22
|
setIsScrollButtonVisible(false);
|
|
23
23
|
return;
|
|
24
24
|
}
|
|
25
|
-
|
|
25
|
+
const didScrollToBottom = content.scrollTop >= content.scrollHeight - content.offsetHeight - 1;
|
|
26
|
+
setIsScrollButtonVisible(!didScrollToBottom);
|
|
26
27
|
}, []);
|
|
27
28
|
useEffect(() => {
|
|
28
29
|
const content = contentRef.current;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitPopover.js","names":[],"sources":["../../../lib/components/BitkitPopover/BitkitPopover.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { Popover, type PopoverRootProps, usePopoverContext, usePopoverStyles } from '@chakra-ui/react/popover';\nimport { Portal } from '@chakra-ui/react/portal';\nimport { chakra } from '@chakra-ui/react/styled-system';\nimport { type ReactNode, useCallback, useEffect, useRef, useState } from 'react';\n\nimport { IconArrowDown } from '../../icons';\nimport BitkitCloseButton from '../BitkitCloseButton/BitkitCloseButton';\n\nexport interface BitkitPopoverProps {\n /** Body content of the panel. Scrolls within the panel when it overflows. */\n children: ReactNode;\n /** Header title, shown next to the close button. */\n title: ReactNode;\n /** Optional footer content (e.g. actions). Laid out with space between for a secondary/primary pair. */\n footer?: ReactNode;\n /**\n * Element that toggles and anchors the popover. Omit when anchoring via\n * `positioning.getAnchorElement` (e.g. a trigger that can't be wrapped) and controlling `open`.\n */\n trigger?: ReactNode;\n open?: PopoverRootProps['open'];\n defaultOpen?: PopoverRootProps['defaultOpen'];\n onOpenChange?: (open: boolean) => void;\n positioning?: PopoverRootProps['positioning'];\n persistentElements?: PopoverRootProps['persistentElements'];\n}\n\n/**\n * Scrolls the body and shows a scroll-to-bottom button with a fade gradient while the content\n * isn't scrolled to the bottom — mirrors the BitkitDialog scrollable-body behaviour.\n */\nconst ScrollablePopoverBody = ({ children }: { children: ReactNode }) => {\n const styles = usePopoverStyles();\n const { open } = usePopoverContext();\n const contentRef = useRef<HTMLDivElement>(null);\n const [isScrollButtonVisible, setIsScrollButtonVisible] = useState(false);\n\n const updateScrollButtonVisibility = useCallback(() => {\n const content = contentRef.current;\n if (!content) {\n setIsScrollButtonVisible(false);\n return;\n }\n const didScrollToBottom = content.scrollTop >= content.scrollHeight - content.offsetHeight - 1;\n setIsScrollButtonVisible(!didScrollToBottom);\n }, []);\n\n useEffect(() => {\n const content = contentRef.current;\n if (!open || !content) return undefined;\n\n content.addEventListener('scroll', updateScrollButtonVisibility);\n const resizeObserver = new ResizeObserver(updateScrollButtonVisibility);\n resizeObserver.observe(content);\n\n return () => {\n content.removeEventListener('scroll', updateScrollButtonVisibility);\n resizeObserver.disconnect();\n };\n }, [open, updateScrollButtonVisibility]);\n\n return (\n <Box css={styles.scrollBody}>\n <Popover.Body ref={contentRef}>{children}</Popover.Body>\n {isScrollButtonVisible && (\n <>\n <Box css={styles.scrollGradient} />\n <chakra.button\n aria-label=\"Scroll to bottom\"\n css={styles.scrollButton}\n type=\"button\"\n onClick={() => {\n contentRef.current?.scrollTo({ top: contentRef.current.scrollHeight, behavior: 'smooth' });\n }}\n >\n <IconArrowDown color=\"icon/tertiary\" size=\"16\" />\n </chakra.button>\n </>\n )}\n </Box>\n );\n};\n\n/**\n * An anchored, non-modal floating panel built on Chakra Popover, styled as a compact dialog:\n * a header (title + close button), a scrollable body, and an optional footer. Anchor it with a\n * `trigger`, or — when the trigger can't be wrapped — control `open` and pass\n * `positioning.getAnchorElement`.\n */\nconst BitkitPopover = ({\n children,\n title,\n footer,\n trigger,\n open,\n defaultOpen,\n onOpenChange,\n positioning,\n persistentElements,\n}: BitkitPopoverProps) => (\n <Popover.Root\n open={open}\n defaultOpen={defaultOpen}\n onOpenChange={onOpenChange ? ({ open: isOpen }) => onOpenChange(isOpen) : undefined}\n positioning={{ placement: 'bottom-start', gutter: 4, ...positioning }}\n persistentElements={persistentElements}\n >\n {trigger ? <Popover.Trigger asChild>{trigger}</Popover.Trigger> : null}\n <Portal>\n {/* z-index belongs on Content, not Positioner: Zag derives the positioner's inline z-index\n from Content's computed z-index, so a value set on Positioner is ignored. */}\n <Popover.Positioner>\n <Popover.Content>\n <Popover.Header>\n <Popover.Title>{title}</Popover.Title>\n <Popover.CloseTrigger asChild>\n <BitkitCloseButton aria-label=\"Close\" />\n </Popover.CloseTrigger>\n </Popover.Header>\n <ScrollablePopoverBody>{children}</ScrollablePopoverBody>\n {footer ? <Popover.Footer>{footer}</Popover.Footer> : null}\n </Popover.Content>\n </Popover.Positioner>\n </Portal>\n </Popover.Root>\n);\n\nBitkitPopover.displayName = 'BitkitPopover';\n\nexport default BitkitPopover;\n"],"mappings":";;;;;;;;;;;;;AAgCA,IAAM,yBAAyB,EAAE,eAAwC;CACvE,MAAM,SAAS,iBAAiB;CAChC,MAAM,EAAE,SAAS,kBAAkB;CACnC,MAAM,aAAa,OAAuB,IAAI;CAC9C,MAAM,CAAC,uBAAuB,4BAA4B,SAAS,KAAK;CAExE,MAAM,+BAA+B,kBAAkB;EACrD,MAAM,UAAU,WAAW;EAC3B,IAAI,CAAC,SAAS;GACZ,yBAAyB,KAAK;GAC9B;EACF;
|
|
1
|
+
{"version":3,"file":"BitkitPopover.js","names":[],"sources":["../../../lib/components/BitkitPopover/BitkitPopover.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { Popover, type PopoverRootProps, usePopoverContext, usePopoverStyles } from '@chakra-ui/react/popover';\nimport { Portal } from '@chakra-ui/react/portal';\nimport { chakra } from '@chakra-ui/react/styled-system';\nimport { type ReactNode, useCallback, useEffect, useRef, useState } from 'react';\n\nimport { IconArrowDown } from '../../icons';\nimport BitkitCloseButton from '../BitkitCloseButton/BitkitCloseButton';\n\nexport interface BitkitPopoverProps {\n /** Body content of the panel. Scrolls within the panel when it overflows. */\n children: ReactNode;\n /** Header title, shown next to the close button. */\n title: ReactNode;\n /** Optional footer content (e.g. actions). Laid out with space between for a secondary/primary pair. */\n footer?: ReactNode;\n /**\n * Element that toggles and anchors the popover. Omit when anchoring via\n * `positioning.getAnchorElement` (e.g. a trigger that can't be wrapped) and controlling `open`.\n */\n trigger?: ReactNode;\n open?: PopoverRootProps['open'];\n defaultOpen?: PopoverRootProps['defaultOpen'];\n onOpenChange?: (open: boolean) => void;\n positioning?: PopoverRootProps['positioning'];\n persistentElements?: PopoverRootProps['persistentElements'];\n}\n\n/**\n * Scrolls the body and shows a scroll-to-bottom button with a fade gradient while the content\n * isn't scrolled to the bottom — mirrors the BitkitDialog scrollable-body behaviour.\n */\nconst ScrollablePopoverBody = ({ children }: { children: ReactNode }) => {\n const styles = usePopoverStyles();\n const { open } = usePopoverContext();\n const contentRef = useRef<HTMLDivElement>(null);\n const [isScrollButtonVisible, setIsScrollButtonVisible] = useState(false);\n\n const updateScrollButtonVisibility = useCallback(() => {\n const content = contentRef.current;\n if (!content) {\n setIsScrollButtonVisible(false);\n return;\n }\n const didScrollToBottom = content.scrollTop >= content.scrollHeight - content.offsetHeight - 1;\n setIsScrollButtonVisible(!didScrollToBottom);\n }, []);\n\n useEffect(() => {\n const content = contentRef.current;\n if (!open || !content) return undefined;\n\n content.addEventListener('scroll', updateScrollButtonVisibility);\n const resizeObserver = new ResizeObserver(updateScrollButtonVisibility);\n resizeObserver.observe(content);\n\n return () => {\n content.removeEventListener('scroll', updateScrollButtonVisibility);\n resizeObserver.disconnect();\n };\n }, [open, updateScrollButtonVisibility]);\n\n return (\n <Box css={styles.scrollBody}>\n <Popover.Body ref={contentRef}>{children}</Popover.Body>\n {isScrollButtonVisible && (\n <>\n <Box css={styles.scrollGradient} />\n <chakra.button\n aria-label=\"Scroll to bottom\"\n css={styles.scrollButton}\n type=\"button\"\n onClick={() => {\n contentRef.current?.scrollTo({ top: contentRef.current.scrollHeight, behavior: 'smooth' });\n }}\n >\n <IconArrowDown color=\"icon/tertiary\" size=\"16\" />\n </chakra.button>\n </>\n )}\n </Box>\n );\n};\n\n/**\n * An anchored, non-modal floating panel built on Chakra Popover, styled as a compact dialog:\n * a header (title + close button), a scrollable body, and an optional footer. Anchor it with a\n * `trigger`, or — when the trigger can't be wrapped — control `open` and pass\n * `positioning.getAnchorElement`.\n */\nconst BitkitPopover = ({\n children,\n title,\n footer,\n trigger,\n open,\n defaultOpen,\n onOpenChange,\n positioning,\n persistentElements,\n}: BitkitPopoverProps) => (\n <Popover.Root\n open={open}\n defaultOpen={defaultOpen}\n onOpenChange={onOpenChange ? ({ open: isOpen }) => onOpenChange(isOpen) : undefined}\n positioning={{ placement: 'bottom-start', gutter: 4, ...positioning }}\n persistentElements={persistentElements}\n >\n {trigger ? <Popover.Trigger asChild>{trigger}</Popover.Trigger> : null}\n <Portal>\n {/* z-index belongs on Content, not Positioner: Zag derives the positioner's inline z-index\n from Content's computed z-index, so a value set on Positioner is ignored. */}\n <Popover.Positioner>\n <Popover.Content>\n <Popover.Header>\n <Popover.Title>{title}</Popover.Title>\n <Popover.CloseTrigger asChild>\n <BitkitCloseButton aria-label=\"Close\" />\n </Popover.CloseTrigger>\n </Popover.Header>\n <ScrollablePopoverBody>{children}</ScrollablePopoverBody>\n {footer ? <Popover.Footer>{footer}</Popover.Footer> : null}\n </Popover.Content>\n </Popover.Positioner>\n </Portal>\n </Popover.Root>\n);\n\nBitkitPopover.displayName = 'BitkitPopover';\n\nexport default BitkitPopover;\n"],"mappings":";;;;;;;;;;;;;AAgCA,IAAM,yBAAyB,EAAE,eAAwC;CACvE,MAAM,SAAS,iBAAiB;CAChC,MAAM,EAAE,SAAS,kBAAkB;CACnC,MAAM,aAAa,OAAuB,IAAI;CAC9C,MAAM,CAAC,uBAAuB,4BAA4B,SAAS,KAAK;CAExE,MAAM,+BAA+B,kBAAkB;EACrD,MAAM,UAAU,WAAW;EAC3B,IAAI,CAAC,SAAS;GACZ,yBAAyB,KAAK;GAC9B;EACF;EACA,MAAM,oBAAoB,QAAQ,aAAa,QAAQ,eAAe,QAAQ,eAAe;EAC7F,yBAAyB,CAAC,iBAAiB;CAC7C,GAAG,CAAC,CAAC;CAEL,gBAAgB;EACd,MAAM,UAAU,WAAW;EAC3B,IAAI,CAAC,QAAQ,CAAC,SAAS,OAAO,KAAA;EAE9B,QAAQ,iBAAiB,UAAU,4BAA4B;EAC/D,MAAM,iBAAiB,IAAI,eAAe,4BAA4B;EACtE,eAAe,QAAQ,OAAO;EAE9B,aAAa;GACX,QAAQ,oBAAoB,UAAU,4BAA4B;GAClE,eAAe,WAAW;EAC5B;CACF,GAAG,CAAC,MAAM,4BAA4B,CAAC;CAEvC,OACE,qBAAC,KAAD;EAAK,KAAK,OAAO;YAAjB,CACE,oBAAC,QAAQ,MAAT;GAAc,KAAK;GAAa;EAAuB,CAAA,GACtD,yBACC,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,KAAD,EAAK,KAAK,OAAO,eAAiB,CAAA,GAClC,oBAAC,OAAO,QAAR;GACE,cAAW;GACX,KAAK,OAAO;GACZ,MAAK;GACL,eAAe;IACb,WAAW,SAAS,SAAS;KAAE,KAAK,WAAW,QAAQ;KAAc,UAAU;IAAS,CAAC;GAC3F;aAEA,oBAAC,eAAD;IAAe,OAAM;IAAgB,MAAK;GAAM,CAAA;EACnC,CAAA,CACf,EAAA,CAAA,CAED;;AAET;;;;;;;AAQA,IAAM,iBAAiB,EACrB,UACA,OACA,QACA,SACA,MACA,aACA,cACA,aACA,yBAEA,qBAAC,QAAQ,MAAT;CACQ;CACO;CACb,cAAc,gBAAgB,EAAE,MAAM,aAAa,aAAa,MAAM,IAAI,KAAA;CAC1E,aAAa;EAAE,WAAW;EAAgB,QAAQ;EAAG,GAAG;CAAY;CAChD;WALtB,CAOG,UAAU,oBAAC,QAAQ,SAAT;EAAiB,SAAA;YAAS;CAAyB,CAAA,IAAI,MAClE,oBAAC,QAAD,EAAA,UAGE,oBAAC,QAAQ,YAAT,EAAA,UACE,qBAAC,QAAQ,SAAT,EAAA,UAAA;EACE,qBAAC,QAAQ,QAAT,EAAA,UAAA,CACE,oBAAC,QAAQ,OAAT,EAAA,UAAgB,MAAqB,CAAA,GACrC,oBAAC,QAAQ,cAAT;GAAsB,SAAA;aACpB,oBAAC,mBAAD,EAAmB,cAAW,QAAS,CAAA;EACnB,CAAA,CACR,EAAA,CAAA;EAChB,oBAAC,uBAAD,EAAwB,SAAgC,CAAA;EACvD,SAAS,oBAAC,QAAQ,QAAT,EAAA,UAAiB,OAAuB,CAAA,IAAI;CACvC,EAAA,CAAA,EACC,CAAA,EACd,CAAA,CACI;;AAGhB,cAAc,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitRibbon.js","names":[],"sources":["../../../lib/components/BitkitRibbon/BitkitRibbon.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { chakra, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef } from 'react';\n\nimport BitkitCloseButton from '../BitkitCloseButton/BitkitCloseButton';\nimport BitkitColorButton from '../BitkitColorButton/BitkitColorButton';\nimport BitkitLink from '../BitkitLink/BitkitLink';\n\nexport type RibbonActionProps = {\n href?: string;\n label: string;\n onClick?: () => void;\n target?: HTMLAnchorElement['target'];\n};\n\nexport type RibbonLinkProps = {\n href?: string;\n label: string;\n target?: HTMLAnchorElement['target'];\n};\n\nexport interface BitkitRibbonProps extends Omit<BoxProps, 'colorPalette'> {\n action?: RibbonActionProps;\n colorVariant?: 'blue' | 'green' | 'purple' | 'red' | 'yellow';\n link?: RibbonLinkProps;\n onDismiss?: () => void;\n title?: string;\n}\n\nconst BitkitRibbon = forwardRef<HTMLDivElement, BitkitRibbonProps>((props, ref) => {\n const { action, children, colorVariant = 'blue', link, onDismiss, title, ...rest } = props;\n\n const recipe = useSlotRecipe({ key: 'ribbon' });\n const styles = recipe({ colorVariant });\n\n return (\n <Box ref={ref} css={styles.root} {...rest}>\n <chakra.div css={styles.content}>\n <chakra.div css={styles.textBlock}>\n {title && <chakra.strong>{title}</chakra.strong>}\n <chakra.span>{children}</chakra.span>\n {link && (\n <BitkitLink href={link.href} target={link.target} textDecoration=\"underline\">\n {link.label}\n </BitkitLink>\n )}\n </chakra.div>\n {action && (\n <BitkitColorButton\n as={action.href ? 'a' : 'button'}\n colorVariant={colorVariant}\n {...(action.href && { href: action.href, target: action.target })}\n onClick={action.onClick}\n >\n {action.label}\n </BitkitColorButton>\n )}\n </chakra.div>\n {onDismiss && <BitkitCloseButton colorVariant={colorVariant} flexShrink=\"0\" size=\"sm\" onClick={onDismiss} />}\n </Box>\n );\n});\n\nBitkitRibbon.displayName = 'BitkitRibbon';\n\nexport default BitkitRibbon;\n"],"mappings":";;;;;;;;AA6BA,IAAM,eAAe,YAA+C,OAAO,QAAQ;CACjF,MAAM,EAAE,QAAQ,UAAU,eAAe,QAAQ,MAAM,WAAW,OAAO,GAAG,SAAS;CAGrF,MAAM,SADS,cAAc,EAAE,KAAK,SAAS,CAC9B,
|
|
1
|
+
{"version":3,"file":"BitkitRibbon.js","names":[],"sources":["../../../lib/components/BitkitRibbon/BitkitRibbon.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { chakra, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef } from 'react';\n\nimport BitkitCloseButton from '../BitkitCloseButton/BitkitCloseButton';\nimport BitkitColorButton from '../BitkitColorButton/BitkitColorButton';\nimport BitkitLink from '../BitkitLink/BitkitLink';\n\nexport type RibbonActionProps = {\n href?: string;\n label: string;\n onClick?: () => void;\n target?: HTMLAnchorElement['target'];\n};\n\nexport type RibbonLinkProps = {\n href?: string;\n label: string;\n target?: HTMLAnchorElement['target'];\n};\n\nexport interface BitkitRibbonProps extends Omit<BoxProps, 'colorPalette'> {\n action?: RibbonActionProps;\n colorVariant?: 'blue' | 'green' | 'purple' | 'red' | 'yellow';\n link?: RibbonLinkProps;\n onDismiss?: () => void;\n title?: string;\n}\n\nconst BitkitRibbon = forwardRef<HTMLDivElement, BitkitRibbonProps>((props, ref) => {\n const { action, children, colorVariant = 'blue', link, onDismiss, title, ...rest } = props;\n\n const recipe = useSlotRecipe({ key: 'ribbon' });\n const styles = recipe({ colorVariant });\n\n return (\n <Box ref={ref} css={styles.root} {...rest}>\n <chakra.div css={styles.content}>\n <chakra.div css={styles.textBlock}>\n {title && <chakra.strong>{title}</chakra.strong>}\n <chakra.span>{children}</chakra.span>\n {link && (\n <BitkitLink href={link.href} target={link.target} textDecoration=\"underline\">\n {link.label}\n </BitkitLink>\n )}\n </chakra.div>\n {action && (\n <BitkitColorButton\n as={action.href ? 'a' : 'button'}\n colorVariant={colorVariant}\n {...(action.href && { href: action.href, target: action.target })}\n onClick={action.onClick}\n >\n {action.label}\n </BitkitColorButton>\n )}\n </chakra.div>\n {onDismiss && <BitkitCloseButton colorVariant={colorVariant} flexShrink=\"0\" size=\"sm\" onClick={onDismiss} />}\n </Box>\n );\n});\n\nBitkitRibbon.displayName = 'BitkitRibbon';\n\nexport default BitkitRibbon;\n"],"mappings":";;;;;;;;AA6BA,IAAM,eAAe,YAA+C,OAAO,QAAQ;CACjF,MAAM,EAAE,QAAQ,UAAU,eAAe,QAAQ,MAAM,WAAW,OAAO,GAAG,SAAS;CAGrF,MAAM,SADS,cAAc,EAAE,KAAK,SAAS,CAC9B,CAAA,CAAO,EAAE,aAAa,CAAC;CAEtC,OACE,qBAAC,KAAD;EAAU;EAAK,KAAK,OAAO;EAAM,GAAI;YAArC,CACE,qBAAC,OAAO,KAAR;GAAY,KAAK,OAAO;aAAxB,CACE,qBAAC,OAAO,KAAR;IAAY,KAAK,OAAO;cAAxB;KACG,SAAS,oBAAC,OAAO,QAAR,EAAA,UAAgB,MAAqB,CAAA;KAC/C,oBAAC,OAAO,MAAR,EAAc,SAAsB,CAAA;KACnC,QACC,oBAAC,YAAD;MAAY,MAAM,KAAK;MAAM,QAAQ,KAAK;MAAQ,gBAAe;gBAC9D,KAAK;KACI,CAAA;IAEJ;OACX,UACC,oBAAC,mBAAD;IACE,IAAI,OAAO,OAAO,MAAM;IACV;IACd,GAAK,OAAO,QAAQ;KAAE,MAAM,OAAO;KAAM,QAAQ,OAAO;IAAO;IAC/D,SAAS,OAAO;cAEf,OAAO;GACS,CAAA,CAEX;MACX,aAAa,oBAAC,mBAAD;GAAiC;GAAc,YAAW;GAAI,MAAK;GAAK,SAAS;EAAY,CAAA,CACxG;;AAET,CAAC;AAED,aAAa,cAAc"}
|
|
@@ -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?: 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,
|
|
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,CAAA,CAAO;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"}
|