@atom-learning/components 3.11.4 → 3.11.5
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/CHANGELOG.md +13 -2
- package/dist/components/chip/ChipGroup.d.ts +4 -2
- package/dist/components/chip/ChipGroup.js +1 -1
- package/dist/components/chip/ChipGroup.js.map +1 -1
- package/dist/components/chip-toggle-group/ChipToggleGroupRoot.d.ts +10 -12
- package/dist/components/index.d.ts +0 -1
- package/dist/components/notification-badge/NotificationBadge.d.ts +1 -668
- package/dist/components/notification-badge/NotificationBadge.js.map +1 -1
- package/dist/components/pagination/PaginationPopover.js +1 -1
- package/dist/components/pagination/PaginationPopover.js.map +1 -1
- package/dist/components/radio-card/RadioCardGroup.d.ts +2 -2
- package/dist/components/radio-card/RadioCardGroup.js +1 -1
- package/dist/components/radio-card/RadioCardGroup.js.map +1 -1
- package/dist/components/section-message/SectionMessage.d.ts +5 -8
- package/dist/components/section-message/SectionMessage.js +1 -1
- package/dist/components/section-message/SectionMessage.js.map +1 -1
- package/dist/components/section-message/SectionMessageLayout.d.ts +2 -2
- package/dist/components/section-message/SectionMessageLayout.js +1 -1
- package/dist/components/section-message/SectionMessageLayout.js.map +1 -1
- package/dist/components/tile/TileGroup.d.ts +329 -337
- package/dist/components/tile/TileGroup.js +1 -1
- package/dist/components/tile/TileGroup.js.map +1 -1
- package/dist/components/tile-interactive/TileInteractive.js +1 -1
- package/dist/components/tile-interactive/TileInteractive.js.map +1 -1
- package/dist/components/tile-toggle-group/TileToggleGroupRoot.d.ts +12 -18
- package/dist/components/tile-toggle-group/TileToggleGroupRoot.js +1 -1
- package/dist/components/tile-toggle-group/TileToggleGroupRoot.js.map +1 -1
- package/dist/components/toggle-group/ToggleGroupRoot.d.ts +2 -3
- package/dist/components/toggle-group/ToggleGroupRoot.js +1 -1
- package/dist/components/toggle-group/ToggleGroupRoot.js.map +1 -1
- package/dist/components/toggle-group/index.d.ts +341 -3
- package/dist/docgen.json +1 -1
- package/dist/index.cjs.js +1 -1
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.js +1 -1
- package/package.json +1 -1
- package/dist/components/stack/Stack.d.ts +0 -348
- package/dist/components/stack/Stack.js +0 -2
- package/dist/components/stack/Stack.js.map +0 -1
- package/dist/components/stack/index.d.ts +0 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{Ellypsis as n}from"@atom-learning/icons";import t from"react";import"../accordion/Accordion.js";import{ActionIcon as a}from"../action-icon/ActionIcon.js";import"../alert-dialog/AlertDialog.js";import"../alert-dialog/alert-context/AlertContext.js";import"../avatar/Avatar.js";import"../badge/Badge.js";import"../banner/banner-regular/BannerRegular.js";import"../banner/banner-slim/BannerSlim.js";import"../box/Box.js";import"../button/Button.js";import"../carousel/Carousel.js";import"../checkbox/Checkbox.js";import"../checkbox-group/CheckboxGroup.js";import"../checkbox-tree/CheckboxTree.js";import"../checkbox-field/CheckboxField.js";import"../chip/Chip.js";import"../chip/ChipGroup.js";import"../chip-dismissible-group/index.js";import"../chip-toggle-group/index.js";import"../combobox/Combobox.js";import"../create-password-field/CreatePasswordField.js";import"../data-table/DataTableContext.js";import"../data-table/DataTable.js";import"../date-field/DateField.js";import"../date-input/DateInput.js";import"../dialog/Dialog.js";import"../dismissible/index.js";import"../dismissible-group/index.js";import"../divider/Divider.js";import"../drawer/Drawer.js";import"../dropdown-menu/DropdownMenu.js";import"../empty-state/EmptyState.js";import"../field-wrapper/FieldWrapper.js";import"../field-wrapper/InlineFieldWrapper.js";import"../file-input/FileInput.js";import{Flex as l}from"../flex/Flex.js";import"../form/Form.js";import"dlv";import"react-hook-form";import"../grid/Grid.js";import"../heading/Heading.js";import{Icon as s}from"../icon/Icon.js";import"../image/Image.js";import"../inline-message/InlineMessage.js";import"../input/Input.js";import"../input-field/InputField.js";import"../label/Label.js";import"../link/Link.js";import"../list/List.js";import"../loader/Loader.js";import"../markdown-content/MarkdownContent.js";import"../navigation/NavigationMenu.js";import"../navigation-menu-vertical/NavigationMenuVertical.js";import"../notification-badge/NotificationBadge.js";import"../number-input/NumberInput.js";import"../number-input-field/NumberInputField.js";import"./Pagination.js";import"../password-field/PasswordField.js";import"../password-input/PasswordInput.js";import{Popover as r}from"../popover/Popover.js";import"../progress-bar/ProgressBar.js";import"../radio-button/RadioButton.js";import"../radio-button/RadioButtonGroup.js";import"../radio-button-field/RadioButtonField.js";import"../radio-card/RadioCard.js";import"@radix-ui/react-radio-group";import"../
|
|
1
|
+
import{Ellypsis as n}from"@atom-learning/icons";import t from"react";import"../accordion/Accordion.js";import{ActionIcon as a}from"../action-icon/ActionIcon.js";import"../alert-dialog/AlertDialog.js";import"../alert-dialog/alert-context/AlertContext.js";import"../avatar/Avatar.js";import"../badge/Badge.js";import"../banner/banner-regular/BannerRegular.js";import"../banner/banner-slim/BannerSlim.js";import"../box/Box.js";import"../button/Button.js";import"../carousel/Carousel.js";import"../checkbox/Checkbox.js";import"../checkbox-group/CheckboxGroup.js";import"../checkbox-tree/CheckboxTree.js";import"../checkbox-field/CheckboxField.js";import"../chip/Chip.js";import"../chip/ChipGroup.js";import"../chip-dismissible-group/index.js";import"../chip-toggle-group/index.js";import"../combobox/Combobox.js";import"../create-password-field/CreatePasswordField.js";import"../data-table/DataTableContext.js";import"../data-table/DataTable.js";import"../date-field/DateField.js";import"../date-input/DateInput.js";import"../dialog/Dialog.js";import"../dismissible/index.js";import"../dismissible-group/index.js";import"../divider/Divider.js";import"../drawer/Drawer.js";import"../dropdown-menu/DropdownMenu.js";import"../empty-state/EmptyState.js";import"../field-wrapper/FieldWrapper.js";import"../field-wrapper/InlineFieldWrapper.js";import"../file-input/FileInput.js";import{Flex as l}from"../flex/Flex.js";import"../form/Form.js";import"dlv";import"react-hook-form";import"../grid/Grid.js";import"../heading/Heading.js";import{Icon as s}from"../icon/Icon.js";import"../image/Image.js";import"../inline-message/InlineMessage.js";import"../input/Input.js";import"../input-field/InputField.js";import"../label/Label.js";import"../link/Link.js";import"../list/List.js";import"../loader/Loader.js";import"../markdown-content/MarkdownContent.js";import"../navigation/NavigationMenu.js";import"../navigation-menu-vertical/NavigationMenuVertical.js";import"../notification-badge/NotificationBadge.js";import"../number-input/NumberInput.js";import"../number-input-field/NumberInputField.js";import"./Pagination.js";import"../password-field/PasswordField.js";import"../password-input/PasswordInput.js";import{Popover as r}from"../popover/Popover.js";import"../progress-bar/ProgressBar.js";import"../radio-button/RadioButton.js";import"../radio-button/RadioButtonGroup.js";import"../radio-button-field/RadioButtonField.js";import"../radio-card/RadioCard.js";import"@radix-ui/react-radio-group";import"../search-field/SearchField.js";import"../search-input/SearchInput.js";import"../section-message/SectionMessage.js";import"../select/Select.js";import"../select-field/SelectField.js";import"../side-bar/SideBar.js";import"../side-bar/SideBarContext.js";import"../slider/Slider.js";import"../slider-field/SliderField.js";import"../sortable/SortableHandle.js";import"../sortable/SortableItem.js";import"../sortable/SortableRoot.js";import"../spacer/Spacer.js";import"../stack-content/StackContent.js";import"../stepper/Stepper.js";import"../switch/Switch.js";import"../table/Table.js";import"../tabs/Tabs.js";import"../text/Text.js";import"../textarea/Textarea.js";import"../textarea-field/TextareaField.js";import"../tile/Tile.js";import"../tile-interactive/TileInteractive.js";import"../tile-toggle-group/index.js";import"../toast/Toast.js";import"../toast/ToastProvider.js";import"../toggle-group/ToggleGroupButton.js";import"../toggle-group/ToggleGroupItem.js";import"../toggle-group/ToggleGroupRoot.js";import"../tooltip/Tooltip.js";import"../top-bar/TopBar.js";import"../tree/Tree.js";import"../video/Video.js";import{PaginationPage as g}from"./PaginationPage.js";import{usePagination as c}from"./usePagination.js";const f=()=>{const{pagesCount:m,labels:i}=c(),p=Array.from({length:m},(o,e)=>e+1);return t.createElement(r,null,t.createElement(r.Trigger,{asChild:!0},t.createElement(a,{hasTooltip:!1,size:"md",theme:"neutral",label:(i==null?void 0:i.popoverTriggerLabel)||"Open pagination popover","data-testid":"pagination_popover_trigger"},t.createElement(s,{is:n}))),t.createElement(r.Content,{size:"md",showCloseButton:!1,css:{p:0}},t.createElement(l,{css:{p:"$4",display:"flex",flexWrap:"wrap",gap:1,justifyContent:"center"}},p==null?void 0:p.map(o=>t.createElement(g,{key:o,pageNumber:o,css:{bg:"$white"}})))))};export{f as PaginationPopover};
|
|
2
2
|
//# sourceMappingURL=PaginationPopover.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PaginationPopover.js","sources":["../../../src/components/pagination/PaginationPopover.tsx"],"sourcesContent":["import { Ellypsis } from '@atom-learning/icons'\nimport React from 'react'\n\nimport { ActionIcon, Flex, Icon, Popover } from '..'\nimport { PaginationPage } from './PaginationPage'\nimport { usePagination } from './usePagination'\n\nexport const PaginationPopover = () => {\n const { pagesCount, labels } = usePagination()\n const paginationItems = Array.from(\n { length: pagesCount },\n (_, index) => index + 1\n )\n\n return (\n <Popover>\n <Popover.Trigger asChild>\n <ActionIcon\n hasTooltip={false}\n size=\"md\"\n theme=\"neutral\"\n label={labels?.popoverTriggerLabel || 'Open pagination popover'}\n data-testid=\"pagination_popover_trigger\"\n >\n <Icon is={Ellypsis} />\n </ActionIcon>\n </Popover.Trigger>\n <Popover.Content size=\"md\" showCloseButton={false} css={{ p: 0 }}>\n <Flex\n css={{\n p: '$4',\n display: 'flex',\n flexWrap: 'wrap',\n gap: 1,\n justifyContent: 'center'\n }}\n >\n {paginationItems?.map((pageNumber) => {\n return (\n <PaginationPage\n key={pageNumber}\n pageNumber={pageNumber}\n css={{ bg: '$white' }}\n />\n )\n })}\n </Flex>\n </Popover.Content>\n </Popover>\n )\n}\n"],"names":["PaginationPopover","pagesCount","labels","usePagination","paginationItems","_","index","React","Popover","ActionIcon","Icon","Ellypsis","Flex","pageNumber","PaginationPage"],"mappings":"
|
|
1
|
+
{"version":3,"file":"PaginationPopover.js","sources":["../../../src/components/pagination/PaginationPopover.tsx"],"sourcesContent":["import { Ellypsis } from '@atom-learning/icons'\nimport React from 'react'\n\nimport { ActionIcon, Flex, Icon, Popover } from '..'\nimport { PaginationPage } from './PaginationPage'\nimport { usePagination } from './usePagination'\n\nexport const PaginationPopover = () => {\n const { pagesCount, labels } = usePagination()\n const paginationItems = Array.from(\n { length: pagesCount },\n (_, index) => index + 1\n )\n\n return (\n <Popover>\n <Popover.Trigger asChild>\n <ActionIcon\n hasTooltip={false}\n size=\"md\"\n theme=\"neutral\"\n label={labels?.popoverTriggerLabel || 'Open pagination popover'}\n data-testid=\"pagination_popover_trigger\"\n >\n <Icon is={Ellypsis} />\n </ActionIcon>\n </Popover.Trigger>\n <Popover.Content size=\"md\" showCloseButton={false} css={{ p: 0 }}>\n <Flex\n css={{\n p: '$4',\n display: 'flex',\n flexWrap: 'wrap',\n gap: 1,\n justifyContent: 'center'\n }}\n >\n {paginationItems?.map((pageNumber) => {\n return (\n <PaginationPage\n key={pageNumber}\n pageNumber={pageNumber}\n css={{ bg: '$white' }}\n />\n )\n })}\n </Flex>\n </Popover.Content>\n </Popover>\n )\n}\n"],"names":["PaginationPopover","pagesCount","labels","usePagination","paginationItems","_","index","React","Popover","ActionIcon","Icon","Ellypsis","Flex","pageNumber","PaginationPage"],"mappings":"8nHAOO,MAAMA,EAAoB,IAAM,CACrC,KAAM,CAAE,WAAAC,EAAY,OAAAC,CAAO,EAAIC,EACzBC,EAAAA,EAAkB,MAAM,KAC5B,CAAE,OAAQH,CAAW,EACrB,CAACI,EAAGC,IAAUA,EAAQ,CACxB,EAEA,OACEC,EAAA,cAACC,EAAA,KACCD,EAAA,cAACC,EAAQ,QAAR,CAAgB,QAAO,EACtBD,EAAAA,EAAA,cAACE,EAAA,CACC,WAAY,GACZ,KAAK,KACL,MAAM,UACN,OAAOP,GAAA,KAAAA,OAAAA,EAAQ,sBAAuB,0BACtC,cAAY,4BAEZK,EAAAA,EAAA,cAACG,EAAA,CAAK,GAAIC,EAAU,CACtB,CACF,EACAJ,EAAA,cAACC,EAAQ,QAAR,CAAgB,KAAK,KAAK,gBAAiB,GAAO,IAAK,CAAE,EAAG,CAAE,CAAA,EAC7DD,EAAA,cAACK,EAAA,CACC,IAAK,CACH,EAAG,KACH,QAAS,OACT,SAAU,OACV,IAAK,EACL,eAAgB,QAClB,CAECR,EAAAA,GAAA,YAAAA,EAAiB,IAAKS,GAEnBN,EAAA,cAACO,EAAA,CACC,IAAKD,EACL,WAAYA,EACZ,IAAK,CAAE,GAAI,QAAS,CAAA,CACtB,CAGN,CAAA,CACF,CACF,CAEJ"}
|
|
@@ -2,8 +2,8 @@ import * as RadioGroup from '@radix-ui/react-radio-group';
|
|
|
2
2
|
import type { VariantProps } from '@stitches/react';
|
|
3
3
|
import * as React from 'react';
|
|
4
4
|
import type { Override } from '../../utilities';
|
|
5
|
-
import {
|
|
5
|
+
import { Flex } from '../flex';
|
|
6
6
|
import { StyledRadioCard } from './RadioCard';
|
|
7
|
-
declare type RadioCardGroupProps = Override<Pick<React.ComponentProps<typeof
|
|
7
|
+
declare type RadioCardGroupProps = Override<Pick<React.ComponentProps<typeof Flex>, 'justify' | 'gap' | 'css'> & VariantProps<typeof StyledRadioCard>, React.ComponentProps<typeof RadioGroup.Root>>;
|
|
8
8
|
export declare const RadioCardGroup: React.FC<RadioCardGroupProps>;
|
|
9
9
|
export {};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as
|
|
1
|
+
import*as p from"@radix-ui/react-radio-group";import*as e from"react";import{Flex as d}from"../flex/Flex.js";import{RadioCard as c}from"./RadioCard.js";const f=({css:r,children:t,size:l,isFullWidth:a,align:o,gap:s="3",justify:m,...n})=>e.createElement(p.Root,{...n},e.createElement(d,{direction:"row",justify:m,gap:s,wrap:"wrap",css:r},e.Children.map(t,i=>e.isValidElement(i)&&(i==null?void 0:i.type)===c?e.cloneElement(i,{size:l,isFullWidth:a,align:o}):i)));export{f as RadioCardGroup};
|
|
2
2
|
//# sourceMappingURL=RadioCardGroup.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioCardGroup.js","sources":["../../../src/components/radio-card/RadioCardGroup.tsx"],"sourcesContent":["import * as RadioGroup from '@radix-ui/react-radio-group'\nimport type { VariantProps } from '@stitches/react'\nimport * as React from 'react'\n\nimport type { Override } from '~/utilities'\n\nimport {
|
|
1
|
+
{"version":3,"file":"RadioCardGroup.js","sources":["../../../src/components/radio-card/RadioCardGroup.tsx"],"sourcesContent":["import * as RadioGroup from '@radix-ui/react-radio-group'\nimport type { VariantProps } from '@stitches/react'\nimport * as React from 'react'\n\nimport type { Override } from '~/utilities'\n\nimport { Flex } from '../flex'\nimport { RadioCard, StyledRadioCard } from './RadioCard'\n\ntype RadioCardGroupProps = Override<\n Pick<React.ComponentProps<typeof Flex>, 'justify' | 'gap' | 'css'> &\n VariantProps<typeof StyledRadioCard>,\n React.ComponentProps<typeof RadioGroup.Root>\n>\n\nexport const RadioCardGroup: React.FC<RadioCardGroupProps> = ({\n css,\n children,\n size,\n isFullWidth,\n align,\n gap = '3',\n justify,\n ...rest\n}) => (\n <RadioGroup.Root {...rest}>\n <Flex direction=\"row\" justify={justify} gap={gap} wrap=\"wrap\" css={css}>\n {React.Children.map(children, (child) => {\n if (React.isValidElement(child) && child?.type === RadioCard) {\n return React.cloneElement(child, { size, isFullWidth, align })\n }\n return child\n })}\n </Flex>\n </RadioGroup.Root>\n)\n"],"names":["RadioCardGroup","css","children","size","isFullWidth","align","gap","justify","rest","React","RadioGroup","Flex","child","RadioCard"],"mappings":"8JAeaA,EAAgD,CAAC,CAC5D,IAAAC,EACA,SAAAC,EACA,KAAAC,EACA,YAAAC,EACA,MAAAC,EACA,IAAAC,EAAM,IACN,QAAAC,KACGC,CACL,IACEC,EAAA,cAACC,EAAW,KAAX,CAAiB,GAAGF,CAAAA,EACnBC,EAAA,cAACE,EAAA,CAAK,UAAU,MAAM,QAASJ,EAAS,IAAKD,EAAK,KAAK,OAAO,IAAKL,GAChEQ,EAAM,SAAS,IAAIP,EAAWU,GACzBH,EAAM,eAAeG,CAAK,IAAKA,GAAA,YAAAA,EAAO,QAASC,EAC1CJ,EAAM,aAAaG,EAAO,CAAE,KAAAT,EAAM,YAAAC,EAAa,MAAAC,CAAM,CAAC,EAExDO,CACR,CACH,CACF"}
|
|
@@ -2060,11 +2060,11 @@ export declare const SectionMessage: {
|
|
|
2060
2060
|
Actions: ({ css, ...rest }: Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
|
|
2061
2061
|
ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
|
|
2062
2062
|
}, "direction" | "gap" | "css" | "wrap" | "justify" | "align"> & import("@stitches/react/types/styled-component").TransformProps<{
|
|
2063
|
-
direction?: "row" | "column" | "row-reverse" | undefined;
|
|
2064
|
-
wrap?: "wrap" | "wrap-reverse" | "
|
|
2065
|
-
justify?:
|
|
2066
|
-
align?:
|
|
2067
|
-
gap?: number |
|
|
2063
|
+
direction?: "inherit" | "initial" | "revert" | "unset" | "row" | "column" | "column-reverse" | "row-reverse" | "revert-layer" | undefined;
|
|
2064
|
+
wrap?: "inherit" | "initial" | "revert" | "unset" | "nowrap" | "wrap" | "wrap-reverse" | "revert-layer" | undefined;
|
|
2065
|
+
justify?: "center" | "left" | "right" | "stretch" | "inherit" | "initial" | "revert" | "unset" | "space-around" | "space-between" | "space-evenly" | "end" | "flex-end" | "flex-start" | "start" | "normal" | "revert-layer" | "unsafe" | "safe" | undefined;
|
|
2066
|
+
align?: "center" | "stretch" | "inherit" | "initial" | "revert" | "unset" | "end" | "flex-end" | "flex-start" | "start" | "baseline" | "normal" | "self-end" | "self-start" | "revert-layer" | "unsafe" | "safe" | "first baseline" | "last baseline" | undefined;
|
|
2067
|
+
gap?: number | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "24" | undefined;
|
|
2068
2068
|
}, {
|
|
2069
2069
|
sm: string;
|
|
2070
2070
|
md: string;
|
|
@@ -2397,9 +2397,6 @@ export declare const SectionMessage: {
|
|
|
2397
2397
|
marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
|
|
2398
2398
|
};
|
|
2399
2399
|
}> | undefined;
|
|
2400
|
-
} & {
|
|
2401
|
-
css?: import("../../stitches").CSS | undefined;
|
|
2402
|
-
as?: any;
|
|
2403
2400
|
}) => JSX.Element;
|
|
2404
2401
|
};
|
|
2405
2402
|
export {};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{TooltipProvider as
|
|
1
|
+
import{TooltipProvider as c}from"@radix-ui/react-tooltip";import o from"react";import{styled as m}from"../../stitches.js";import{Dismissible as a}from"../dismissible/index.js";import{Flex as g}from"../flex/Flex.js";import{SectionMessageProvider as l,useSectionMessageContext as p}from"./SectionMessageContext.js";import{SectionMessageDescription as f}from"./SectionMessageDescription.js";import{SectionMessageDismiss as h}from"./SectionMessageDismiss.js";import{SectionMessageIcon as $}from"./SectionMessageIcon.js";import{SectionMessageContent as u,SectionMessageActions as d}from"./SectionMessageLayout.js";import{SectionMessageTitle as D}from"./SectionMessageTitle.js";const b=m(a,{position:"relative",borderRadius:"$0",display:"flex",minHeight:"$5",p:"$4",border:"1px solid white",variants:{theme:{success:{bg:"$successLight",color:"$successDark"},warning:{bg:"$warningLight",color:"$warningText"},error:{bg:"$dangerLight",color:"$dangerDark"},neutral:{bg:"$grey100",color:"$grey1000"},info:{bg:"$infoLight",color:"$infoDark"}},hasIcon:{true:{pl:"$6"}},hasDismiss:{true:{pr:"$7"}}}}),M=({children:t,...s})=>{const{theme:i,hasIcon:r,hasDismiss:n}=p();return o.createElement(b,{...s,theme:i,hasIcon:r,hasDismiss:n},o.createElement(g,{gap:3,justify:"space-between",css:{flexGrow:1}},t))},e=({theme:t="info",...s})=>o.createElement(c,null,o.createElement(l,{theme:t},o.createElement(M,{...s})));e.Title=D,e.Description=f,e.Icon=$,e.Dismiss=h,e.Content=u,e.Actions=d;export{e as SectionMessage};
|
|
2
2
|
//# sourceMappingURL=SectionMessage.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SectionMessage.js","sources":["../../../src/components/section-message/SectionMessage.tsx"],"sourcesContent":["import { TooltipProvider } from '@radix-ui/react-tooltip'\nimport React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { Dismissible } from '../dismissible'\nimport {
|
|
1
|
+
{"version":3,"file":"SectionMessage.js","sources":["../../../src/components/section-message/SectionMessage.tsx"],"sourcesContent":["import { TooltipProvider } from '@radix-ui/react-tooltip'\nimport React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { Dismissible } from '../dismissible'\nimport { Flex } from '../flex'\nimport {\n SectionMessageProvider,\n useSectionMessageContext\n} from './SectionMessageContext'\nimport { SectionMessageDescription } from './SectionMessageDescription'\nimport { SectionMessageDismiss } from './SectionMessageDismiss'\nimport { SectionMessageIcon } from './SectionMessageIcon'\nimport {\n SectionMessageActions,\n SectionMessageContent\n} from './SectionMessageLayout'\nimport { SectionMessageTitle } from './SectionMessageTitle'\n\nconst StyledSectionMessage = styled(Dismissible, {\n position: 'relative',\n borderRadius: '$0',\n display: 'flex',\n minHeight: '$5',\n p: '$4',\n border: '1px solid white',\n variants: {\n theme: {\n success: {\n bg: '$successLight',\n color: '$successDark'\n },\n warning: {\n bg: '$warningLight',\n color: '$warningText'\n },\n error: {\n bg: '$dangerLight',\n color: '$dangerDark'\n },\n neutral: {\n bg: '$grey100',\n color: '$grey1000'\n },\n info: {\n bg: '$infoLight',\n color: '$infoDark'\n }\n },\n hasIcon: {\n true: {\n pl: '$6'\n }\n },\n hasDismiss: {\n true: {\n pr: '$7'\n }\n }\n }\n})\n\nconst SectionMessageRoot = ({\n children,\n ...rest\n}: React.ComponentProps<typeof StyledSectionMessage>): JSX.Element => {\n const { theme, hasIcon, hasDismiss } = useSectionMessageContext()\n\n return (\n <StyledSectionMessage\n {...rest}\n theme={theme}\n hasIcon={hasIcon}\n hasDismiss={hasDismiss}\n >\n <Flex gap={3} justify=\"space-between\" css={{ flexGrow: 1 }}>\n {children}\n </Flex>\n </StyledSectionMessage>\n )\n}\n\nexport type SectionMessageTheme =\n | 'success'\n | 'warning'\n | 'error'\n | 'neutral'\n | 'info'\n\nexport interface SectionMessageProps\n extends React.ComponentProps<typeof SectionMessageRoot> {\n theme?: SectionMessageTheme\n}\n\nexport const SectionMessage = ({\n theme = 'info',\n ...rest\n}: SectionMessageProps): JSX.Element => {\n return (\n <TooltipProvider>\n <SectionMessageProvider theme={theme}>\n <SectionMessageRoot {...rest} />\n </SectionMessageProvider>\n </TooltipProvider>\n )\n}\n\nSectionMessage.Title = SectionMessageTitle\nSectionMessage.Description = SectionMessageDescription\nSectionMessage.Icon = SectionMessageIcon\nSectionMessage.Dismiss = SectionMessageDismiss\nSectionMessage.Content = SectionMessageContent\nSectionMessage.Actions = SectionMessageActions\n"],"names":["StyledSectionMessage","styled","Dismissible","SectionMessageRoot","children","rest","theme","hasIcon","hasDismiss","useSectionMessageContext","React","Flex","SectionMessage","TooltipProvider","SectionMessageProvider","SectionMessageTitle","SectionMessageDescription","SectionMessageIcon","SectionMessageDismiss","SectionMessageContent","SectionMessageActions"],"mappings":"gqBAoBA,MAAMA,EAAuBC,EAAOC,EAAa,CAC/C,SAAU,WACV,aAAc,KACd,QAAS,OACT,UAAW,KACX,EAAG,KACH,OAAQ,kBACR,SAAU,CACR,MAAO,CACL,QAAS,CACP,GAAI,gBACJ,MAAO,cACT,EACA,QAAS,CACP,GAAI,gBACJ,MAAO,cACT,EACA,MAAO,CACL,GAAI,eACJ,MAAO,aACT,EACA,QAAS,CACP,GAAI,WACJ,MAAO,WACT,EACA,KAAM,CACJ,GAAI,aACJ,MAAO,WACT,CACF,EACA,QAAS,CACP,KAAM,CACJ,GAAI,IACN,CACF,EACA,WAAY,CACV,KAAM,CACJ,GAAI,IACN,CACF,CACF,CACF,CAAC,EAEKC,EAAqB,CAAC,CAC1B,SAAAC,KACGC,CACL,IAAsE,CACpE,KAAM,CAAE,MAAAC,EAAO,QAAAC,EAAS,WAAAC,CAAW,EAAIC,EAAyB,EAEhE,OACEC,EAAA,cAACV,EAAA,CACE,GAAGK,EACJ,MAAOC,EACP,QAASC,EACT,WAAYC,CAEZE,EAAAA,EAAA,cAACC,EAAA,CAAK,IAAK,EAAG,QAAQ,gBAAgB,IAAK,CAAE,SAAU,CAAE,CACtDP,EAAAA,CACH,CACF,CAEJ,EAcaQ,EAAiB,CAAC,CAC7B,MAAAN,EAAQ,UACLD,CACL,IAEIK,EAAA,cAACG,EAAA,KACCH,EAAA,cAACI,EAAA,CAAuB,MAAOR,GAC7BI,EAAA,cAACP,EAAA,CAAoB,GAAGE,CAAAA,CAAM,CAChC,CACF,EAIJO,EAAe,MAAQG,EACvBH,EAAe,YAAcI,EAC7BJ,EAAe,KAAOK,EACtBL,EAAe,QAAUM,EACzBN,EAAe,QAAUO,EACzBP,EAAe,QAAUQ"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { Box } from '../box';
|
|
3
|
-
import {
|
|
3
|
+
import { Flex } from '../flex';
|
|
4
4
|
export declare const SectionMessageContent: ({ css, ...rest }: React.ComponentProps<typeof Box>) => JSX.Element;
|
|
5
|
-
export declare const SectionMessageActions: ({ css, ...rest }: React.ComponentProps<typeof
|
|
5
|
+
export declare const SectionMessageActions: ({ css, ...rest }: React.ComponentProps<typeof Flex>) => JSX.Element;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import s from"react";import{Box as o}from"../box/Box.js";import{
|
|
1
|
+
import s from"react";import{Box as o}from"../box/Box.js";import{Flex as r}from"../flex/Flex.js";const a=({css:e,...t})=>s.createElement(o,{css:{maxWidth:"100%",flexShrink:0,["& > *:not(:last-child)"]:{mb:"$2"},...e},...t}),c=({css:e,...t})=>s.createElement(o,{css:{maxWidth:"100%",flexShrink:0,...e}},s.createElement(r,{wrap:"wrap",gap:3,...t}));export{c as SectionMessageActions,a as SectionMessageContent};
|
|
2
2
|
//# sourceMappingURL=SectionMessageLayout.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SectionMessageLayout.js","sources":["../../../src/components/section-message/SectionMessageLayout.tsx"],"sourcesContent":["import React from 'react'\n\nimport { Box } from '../box'\nimport {
|
|
1
|
+
{"version":3,"file":"SectionMessageLayout.js","sources":["../../../src/components/section-message/SectionMessageLayout.tsx"],"sourcesContent":["import React from 'react'\n\nimport { Box } from '../box'\nimport { Flex } from '../flex'\n\nexport const SectionMessageContent = ({\n css,\n ...rest\n}: React.ComponentProps<typeof Box>): JSX.Element => (\n <Box\n css={{\n maxWidth: '100%',\n flexShrink: 0,\n ['& > *:not(:last-child)']: { mb: '$2' },\n ...css\n }}\n {...rest}\n />\n)\n\nexport const SectionMessageActions = ({\n css,\n ...rest\n}: React.ComponentProps<typeof Flex>): JSX.Element => (\n <Box css={{ maxWidth: '100%', flexShrink: 0, ...css }}>\n <Flex wrap=\"wrap\" gap={3} {...rest} />\n </Box>\n)\n"],"names":["SectionMessageContent","css","rest","React","Box","SectionMessageActions","Flex"],"mappings":"gGAKO,MAAMA,EAAwB,CAAC,CACpC,IAAAC,KACGC,CACL,IACEC,EAAA,cAACC,EAAA,CACC,IAAK,CACH,SAAU,OACV,WAAY,EACZ,CAAC,0BAA2B,CAAE,GAAI,IAAK,EACvC,GAAGH,CACL,EACC,GAAGC,CAAAA,CACN,EAGWG,EAAwB,CAAC,CACpC,IAAAJ,KACGC,CACL,IACEC,EAAA,cAACC,EAAA,CAAI,IAAK,CAAE,SAAU,OAAQ,WAAY,EAAG,GAAGH,CAAI,GAClDE,EAAA,cAACG,EAAA,CAAK,KAAK,OAAO,IAAK,EAAI,GAAGJ,EAAM,CACtC"}
|