@atom-learning/components 5.10.0 → 5.12.0
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 +18 -5
- package/dist/components/action-icon/ActionIcon.d.ts +1 -1
- package/dist/components/action-icon/ActionIcon.js +1 -1
- package/dist/components/action-icon/ActionIcon.js.map +1 -1
- package/dist/components/banner/BannerContainer.js +1 -1
- package/dist/components/banner/BannerContainer.js.map +1 -1
- package/dist/components/banner/banner-regular/BannerRegular.d.ts +11 -11
- package/dist/components/banner/banner-regular/BannerRegularDismiss.d.ts +3 -3
- package/dist/components/banner/banner-regular/BannerRegularHeading.js +1 -1
- package/dist/components/banner/banner-regular/BannerRegularHeading.js.map +1 -1
- package/dist/components/banner/banner-slim/BannerSlim.d.ts +23 -23
- package/dist/components/banner/banner-slim/BannerSlimDismiss.d.ts +3 -3
- package/dist/components/button/Button.d.ts +1 -1
- package/dist/components/button/Button.js +1 -1
- package/dist/components/button/Button.js.map +1 -1
- package/dist/components/checkbox-field/CheckboxField.js +1 -1
- package/dist/components/checkbox-field/CheckboxField.js.map +1 -1
- package/dist/components/checkbox-group/CheckboxGroup.d.ts +1 -1
- package/dist/components/checkbox-tree/CheckboxTree.d.ts +2 -2
- package/dist/components/chip/Chip.js +1 -1
- package/dist/components/chip/Chip.js.map +1 -1
- package/dist/components/combobox/ComboboxInput.js +1 -1
- package/dist/components/combobox/ComboboxInput.js.map +1 -1
- package/dist/components/combobox/ComboboxPopover.js +1 -1
- package/dist/components/combobox/ComboboxPopover.js.map +1 -1
- package/dist/components/create-password-field/CreatePasswordField.d.ts +1 -1
- package/dist/components/create-password-field/CreatePasswordField.js +1 -1
- package/dist/components/create-password-field/CreatePasswordField.js.map +1 -1
- package/dist/components/data-table/DataTable.d.ts +13 -1
- package/dist/components/data-table/DataTableHead.js +1 -1
- package/dist/components/data-table/DataTableHead.js.map +1 -1
- package/dist/components/data-table/DataTableTable.js +1 -1
- package/dist/components/data-table/DataTableTable.js.map +1 -1
- package/dist/components/date-field/DateField.d.ts +1 -1
- package/dist/components/date-field/DateField.js +1 -1
- package/dist/components/date-field/DateField.js.map +1 -1
- package/dist/components/field-wrapper/FieldWrapper.d.ts +3 -1
- package/dist/components/field-wrapper/FieldWrapper.js +1 -1
- package/dist/components/field-wrapper/FieldWrapper.js.map +1 -1
- package/dist/components/flex/Flex.js.map +1 -1
- package/dist/components/form/Form.d.ts +3 -2
- package/dist/components/form/Form.js +1 -1
- package/dist/components/form/Form.js.map +1 -1
- package/dist/components/form/index.d.ts +1 -0
- package/dist/components/form/useFormCustomContext.d.ts +7 -0
- package/dist/components/form/useFormCustomContext.js +2 -0
- package/dist/components/form/useFormCustomContext.js.map +1 -0
- package/dist/components/heading/Heading.d.ts +1 -0
- package/dist/components/heading/Heading.js +1 -1
- package/dist/components/heading/Heading.js.map +1 -1
- package/dist/components/input/Input.d.ts +3 -1
- package/dist/components/input/Input.js +1 -1
- package/dist/components/input/Input.js.map +1 -1
- package/dist/components/input-field/InputField.d.ts +1 -1
- package/dist/components/input-field/InputField.js +1 -1
- package/dist/components/input-field/InputField.js.map +1 -1
- package/dist/components/label/Label.d.ts +2 -1
- package/dist/components/label/Label.js +1 -1
- package/dist/components/label/Label.js.map +1 -1
- package/dist/components/navigation-menu-vertical/NavigationMenuVerticalLink.js.map +1 -1
- package/dist/components/number-input/NumberInput.d.ts +2 -1
- package/dist/components/number-input/NumberInput.js +1 -1
- package/dist/components/number-input/NumberInput.js.map +1 -1
- package/dist/components/number-input/NumberInputStepper.d.ts +766 -1
- package/dist/components/number-input/NumberInputStepper.js +1 -1
- package/dist/components/number-input/NumberInputStepper.js.map +1 -1
- package/dist/components/number-input-field/NumberInputField.d.ts +1 -1
- package/dist/components/number-input-field/NumberInputField.js +1 -1
- package/dist/components/number-input-field/NumberInputField.js.map +1 -1
- package/dist/components/pagination/PaginationNextButton.d.ts +3 -3
- package/dist/components/pagination/PaginationPopover.js +1 -1
- package/dist/components/pagination/PaginationPopover.js.map +1 -1
- package/dist/components/pagination/PaginationPreviousButton.d.ts +3 -3
- package/dist/components/password-field/PasswordField.d.ts +1 -1
- package/dist/components/password-field/PasswordField.js +1 -1
- package/dist/components/password-field/PasswordField.js.map +1 -1
- package/dist/components/progress-bar/ProgressBar.d.ts +3 -2
- package/dist/components/progress-bar/ProgressBar.js +1 -1
- package/dist/components/progress-bar/ProgressBar.js.map +1 -1
- package/dist/components/radio-button-field/RadioButtonField.js +1 -1
- package/dist/components/radio-button-field/RadioButtonField.js.map +1 -1
- package/dist/components/search-field/SearchField.d.ts +1 -1
- package/dist/components/search-field/SearchField.js +1 -1
- package/dist/components/search-field/SearchField.js.map +1 -1
- package/dist/components/search-input/SearchInput.js +1 -1
- package/dist/components/search-input/SearchInput.js.map +1 -1
- package/dist/components/section-message/SectionMessage.d.ts +1 -1
- package/dist/components/section-message/SectionMessage.js +1 -1
- package/dist/components/section-message/SectionMessage.js.map +1 -1
- package/dist/components/select/Select.d.ts +1 -0
- package/dist/components/select/Select.js +1 -1
- package/dist/components/select/Select.js.map +1 -1
- package/dist/components/select-field/SelectField.d.ts +1 -1
- package/dist/components/select-field/SelectField.js +1 -1
- package/dist/components/select-field/SelectField.js.map +1 -1
- package/dist/components/sortable/Handle.d.ts +3 -3
- package/dist/components/textarea/Textarea.d.ts +1 -0
- package/dist/components/textarea/Textarea.js +1 -1
- package/dist/components/textarea/Textarea.js.map +1 -1
- package/dist/components/textarea-field/TextareaField.d.ts +1 -1
- package/dist/components/textarea-field/TextareaField.js +1 -1
- package/dist/components/textarea-field/TextareaField.js.map +1 -1
- package/dist/components/tile/Tile.d.ts +1 -0
- package/dist/components/tile/Tile.js +1 -1
- package/dist/components/tile/Tile.js.map +1 -1
- package/dist/components/tile-interactive/TileInteractive.d.ts +2 -1
- package/dist/components/tile-toggle-group/TileToggleGroupItem.d.ts +2 -1
- package/dist/components/tile-toggle-group/TileToggleGroupRoot.js.map +1 -1
- package/dist/components/toast/Toast.js +1 -1
- package/dist/components/toast/Toast.js.map +1 -1
- package/dist/components/toggle-group/ToggleGroupButton.d.ts +4 -1
- package/dist/components/toggle-group/ToggleGroupButton.js +1 -1
- package/dist/components/toggle-group/ToggleGroupButton.js.map +1 -1
- package/dist/components/toggle-group/ToggleGroupItem.d.ts +6 -2
- package/dist/components/toggle-group/ToggleGroupItem.js +1 -1
- package/dist/components/toggle-group/ToggleGroupItem.js.map +1 -1
- package/dist/components/toggle-group/ToggleGroupRoot.d.ts +2 -1
- 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 +14 -7
- package/dist/components/top-bar/TopBar.d.ts +5 -4
- package/dist/components/top-bar/TopBar.js +1 -1
- package/dist/components/top-bar/TopBar.js.map +1 -1
- 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/dist/utilities/create-theme-variants/createThemeVariants.js.map +1 -1
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,16 +1,29 @@
|
|
|
1
|
-
# [5.
|
|
1
|
+
# [5.12.0](https://github.com/Atom-Learning/components/compare/v5.11.0...v5.12.0) (2025-11-17)
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
### Bug Fixes
|
|
5
5
|
|
|
6
|
-
*
|
|
6
|
+
* add [@supports](https://github.com/supports) around color-mix() ([58c263b](https://github.com/Atom-Learning/components/commit/58c263b471362afdbc53c51537e887fa443d62d3))
|
|
7
|
+
* apply new radius to all form fields, fix isFullWidth responsive styles on ToggleGroup ([ece91cb](https://github.com/Atom-Learning/components/commit/ece91cba4ccc14ef419cad175056c7fd31519376))
|
|
8
|
+
* error state, password validation mode ([5b6fb04](https://github.com/Atom-Learning/components/commit/5b6fb0439220c627e3d305e413c311b7cc983ca6))
|
|
9
|
+
* more tweaks ([b20f9b2](https://github.com/Atom-Learning/components/commit/b20f9b2baee5f30b20649aa02ae0b0bcad8ace5f))
|
|
10
|
+
* radius and capsize ([c39133b](https://github.com/Atom-Learning/components/commit/c39133b93ae05d9288393e212105574e52d24e81))
|
|
11
|
+
* snapshots ([043fa3f](https://github.com/Atom-Learning/components/commit/043fa3f740166ebdff598553aa25b26aad40730c))
|
|
12
|
+
* snapshots ([80c13d7](https://github.com/Atom-Learning/components/commit/80c13d78dcaf405e2517d02847a93345e4009b68))
|
|
13
|
+
* snapshots, document.querySelector usage ([34909a1](https://github.com/Atom-Learning/components/commit/34909a1f01d8c3652635ec592559fdc98585052e))
|
|
14
|
+
* update to modern ([9a6f190](https://github.com/Atom-Learning/components/commit/9a6f1900c28d647dba8577b30a278bb1d2e6c5e0))
|
|
15
|
+
* version ([52de660](https://github.com/Atom-Learning/components/commit/52de66076d37da7431424297fba95739de62c4be))
|
|
7
16
|
|
|
8
17
|
|
|
9
18
|
### Features
|
|
10
19
|
|
|
11
|
-
*
|
|
12
|
-
*
|
|
13
|
-
*
|
|
20
|
+
* additional updates ([e67c6b7](https://github.com/Atom-Learning/components/commit/e67c6b7ec45f8b1798f09287219f17dd3bf442c6))
|
|
21
|
+
* apply appearance to form ([e2bac9b](https://github.com/Atom-Learning/components/commit/e2bac9b935a9731e321cd95d9d3b62471e013a5a))
|
|
22
|
+
* apply further gcse style changes ([2be7bce](https://github.com/Atom-Learning/components/commit/2be7bce0a8b3a12db5cc3a3098d46bdce407d9f3))
|
|
23
|
+
* binary expression support ([a35a2ac](https://github.com/Atom-Learning/components/commit/a35a2ac4ecedcbc4430fea31f9c021bd226b3073))
|
|
24
|
+
* move code-mods to components ([8b96ed6](https://github.com/Atom-Learning/components/commit/8b96ed68c77129cfa05a9a9b70ccf290918f66b0))
|
|
25
|
+
* update heading size md, border radii ([06a61be](https://github.com/Atom-Learning/components/commit/06a61be51905694d00e666c422b9b7f77c63b6b3))
|
|
26
|
+
* updating documentation for tiles and toggle group ([fd2100f](https://github.com/Atom-Learning/components/commit/fd2100f5246890b9303d2665de269eb778cbbe55))
|
|
14
27
|
|
|
15
28
|
# [1.4.0](https://github.com/Atom-Learning/components/compare/v1.3.0...v1.4.0) (2022-04-11)
|
|
16
29
|
|
|
@@ -4,7 +4,7 @@ import { NavigatorActions } from '../../types';
|
|
|
4
4
|
import { Override } from '../../utilities';
|
|
5
5
|
import type { TOptionalTooltipWrapperProps } from '../../utilities/optional-tooltip-wrapper';
|
|
6
6
|
declare const StyledButton: import("@atom-learning/stitches-react/types/styled-component").StyledComponent<"button", {
|
|
7
|
-
theme?: "success" | "danger" | "warning" | "
|
|
7
|
+
theme?: "success" | "danger" | "warning" | "neutral" | "primary" | "white" | undefined;
|
|
8
8
|
appearance?: "outline" | "solid" | "simple" | undefined;
|
|
9
9
|
size?: "xs" | "sm" | "md" | "lg" | undefined;
|
|
10
10
|
isRounded?: boolean | "true" | undefined;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import f from"invariant";import*as s from"react";import{styled as w}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import"../../utilities/style/keyframe-animations.js";import{disabledStyle as k}from"../../utilities/style/disabledStyle.js";import{getExternalAnchorProps as D}from"../../utilities/uri/index.js";import{Icon as m}from"../icon/Icon.js";import{ActionIconSizeMap as v}from"./ActionIcon.constants.js";import{OptionalTooltipWrapper as z}from"../../utilities/optional-tooltip-wrapper/OptionalTooltipWrapper.js";const o=(r,i,a,e)=>({theme:r,appearance:"simple",css:{bg:"transparent",color:i,"&:not(:disabled):hover, &:not(:disabled):focus":{color:a},"&:not(:disabled):active":{color:e}}}),p=(r,i,a,e)=>({theme:r,appearance:"solid",css:{bg:i,color:"white","&:not(:disabled):hover, &:not(:disabled):focus":{bg:a,color:"white"},"&:not(:disabled):active":{bg:e}}}),t=(r,i,a,e)=>({theme:r,appearance:"outline",css:{bg:"unset",border:"1px solid",borderColor:"currentColor",color:i,"&:not(:disabled):hover, &:not(:disabled):focus":{color:a},"&:not(:disabled):active":{color:e}}}),M=w("button",{alignItems:"center",appearance:"none",bg:"white",border:"unset",borderRadius:"$
|
|
1
|
+
import f from"invariant";import*as s from"react";import{styled as w}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import"../../utilities/style/keyframe-animations.js";import{disabledStyle as k}from"../../utilities/style/disabledStyle.js";import{getExternalAnchorProps as D}from"../../utilities/uri/index.js";import{Icon as m}from"../icon/Icon.js";import{ActionIconSizeMap as v}from"./ActionIcon.constants.js";import{OptionalTooltipWrapper as z}from"../../utilities/optional-tooltip-wrapper/OptionalTooltipWrapper.js";const o=(r,i,a,e)=>({theme:r,appearance:"simple",css:{bg:"transparent",color:i,"&:not(:disabled):hover, &:not(:disabled):focus":{color:a},"&:not(:disabled):active":{color:e}}}),p=(r,i,a,e)=>({theme:r,appearance:"solid",css:{bg:i,color:"white","&:not(:disabled):hover, &:not(:disabled):focus":{bg:a,color:"white"},"&:not(:disabled):active":{bg:e}}}),t=(r,i,a,e)=>({theme:r,appearance:"outline",css:{bg:"unset",border:"1px solid",borderColor:"currentColor",color:i,"&:not(:disabled):hover, &:not(:disabled):focus":{color:a},"&:not(:disabled):active":{color:e}}}),M=w("button",{alignItems:"center",appearance:"none",bg:"white",border:"unset",borderRadius:"$1",boxSizing:"border-box",cursor:"pointer",display:"flex",flexShrink:0,justifyContent:"center",p:"unset",transition:"all 100ms ease-out","&[disabled]":k,variants:{theme:{neutral:{},primary:{},success:{},warning:{},danger:{},white:{}},appearance:{simple:{},outline:{},solid:{}},size:{xs:{size:"$2"},sm:{size:"$3"},md:{size:"$4"},lg:{size:"$5"}},isRounded:{true:{borderRadius:"$round"}}},compoundVariants:[o("neutral","$grey700","$primary900","$primary1000"),o("primary","$primary800","$primary900","$primary1000"),o("primaryDark","$primary1000","$primary1100","$primary1200"),o("success","$success","$successMid","$successDark"),o("warning","$warning","$warningMid","$warningDark"),o("danger","$danger","$dangerMid","$dangerDark"),o("white","#fff","#fff","#fff"),p("primary","$primary800","$primary900","$primary1000"),p("primaryDark","$primary1000","$primary1100","$primary1200"),p("success","$success","$successMid","$successDark"),p("warning","$warning","$warningMid","$warningDark"),p("danger","$danger","$dangerMid","$dangerDark"),t("primary","$primary800","$primary900","$primary1000"),t("primaryDark","$primary1000","$primary1100","$primary1200"),t("success","$success","$successMid","$successDark"),t("warning","$warning","$warningMid","$warningDark"),t("danger","$danger","$dangerMid","$dangerDark"),t("white","#fff","#fff","#fff")]}),d=s.forwardRef(({children:r,theme:i="primary",appearance:a="simple",size:e="sm",label:$,href:l,disabled:c,hasTooltip:u=!0,tooltipSide:g,...b},h)=>{const y=`A single ${m.displayName} component is permitted as a child of ${d.displayName}`;return f(s.Children.count(r)===1,y),s.createElement(z,{hasTooltip:u,label:$,tooltipSide:g},s.createElement(M,{...l?{as:"a",href:c?null:l,onClick:void 0,"aria-disabled":!!c}:{type:"button"},...D(l),...b,"aria-label":$,theme:i,appearance:a,size:e,ref:h,disabled:c},s.Children.map(r,n=>{if(!s.isValidElement(n))throw new Error(y);return f(n.type===m,`Children of type ${n==null?void 0:n.type} aren't permitted. Only an ${m.displayName} component is allowed in ${d.displayName}`),s.cloneElement(n,{size:v[e],css:{...n.props.css?n.props.css:{}}})})))});d.displayName="ActionIcon";export{d as ActionIcon};
|
|
2
2
|
//# sourceMappingURL=ActionIcon.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ActionIcon.js","sources":["../../../src/components/action-icon/ActionIcon.tsx"],"sourcesContent":["import type { VariantProps } from '@atom-learning/stitches-react'\nimport invariant from 'invariant'\nimport * as React from 'react'\n\nimport { styled } from '~/stitches'\nimport { NavigatorActions } from '~/types'\nimport { disabledStyle, Override } from '~/utilities'\nimport type { TOptionalTooltipWrapperProps } from '~/utilities/optional-tooltip-wrapper'\nimport { OptionalTooltipWrapper } from '~/utilities/optional-tooltip-wrapper'\nimport { getExternalAnchorProps } from '~/utilities/uri'\n\nimport { Icon } from '../icon/Icon'\nimport { ActionIconSizeMap } from './ActionIcon.constants'\n\nconst getSimpleVariant = (\n theme: string,\n base: string,\n interact: string,\n active: string\n) => ({\n theme,\n appearance: 'simple',\n css: {\n bg: 'transparent',\n color: base,\n '&:not(:disabled):hover, &:not(:disabled):focus': { color: interact },\n '&:not(:disabled):active': { color: active }\n }\n})\n\nconst getSolidVariant = (\n theme: string,\n base: string,\n interact: string,\n active: string\n) => ({\n theme,\n appearance: 'solid',\n css: {\n bg: base,\n color: 'white',\n '&:not(:disabled):hover, &:not(:disabled):focus': {\n bg: interact,\n color: 'white'\n },\n '&:not(:disabled):active': { bg: active }\n }\n})\n\nconst getOutlineVariant = (\n theme: string,\n base: string,\n interact: string,\n active: string\n) => ({\n theme,\n appearance: 'outline',\n css: {\n bg: 'unset',\n border: '1px solid',\n borderColor: 'currentColor',\n color: base,\n '&:not(:disabled):hover, &:not(:disabled):focus': { color: interact },\n '&:not(:disabled):active': { color: active }\n }\n})\n\nconst StyledButton = styled('button', {\n alignItems: 'center',\n appearance: 'none',\n bg: 'white',\n border: 'unset',\n borderRadius: '$
|
|
1
|
+
{"version":3,"file":"ActionIcon.js","sources":["../../../src/components/action-icon/ActionIcon.tsx"],"sourcesContent":["import type { VariantProps } from '@atom-learning/stitches-react'\nimport invariant from 'invariant'\nimport * as React from 'react'\n\nimport { styled } from '~/stitches'\nimport { NavigatorActions } from '~/types'\nimport { disabledStyle, Override } from '~/utilities'\nimport type { TOptionalTooltipWrapperProps } from '~/utilities/optional-tooltip-wrapper'\nimport { OptionalTooltipWrapper } from '~/utilities/optional-tooltip-wrapper'\nimport { getExternalAnchorProps } from '~/utilities/uri'\n\nimport { Icon } from '../icon/Icon'\nimport { ActionIconSizeMap } from './ActionIcon.constants'\n\nconst getSimpleVariant = (\n theme: string,\n base: string,\n interact: string,\n active: string\n) => ({\n theme,\n appearance: 'simple',\n css: {\n bg: 'transparent',\n color: base,\n '&:not(:disabled):hover, &:not(:disabled):focus': { color: interact },\n '&:not(:disabled):active': { color: active }\n }\n})\n\nconst getSolidVariant = (\n theme: string,\n base: string,\n interact: string,\n active: string\n) => ({\n theme,\n appearance: 'solid',\n css: {\n bg: base,\n color: 'white',\n '&:not(:disabled):hover, &:not(:disabled):focus': {\n bg: interact,\n color: 'white'\n },\n '&:not(:disabled):active': { bg: active }\n }\n})\n\nconst getOutlineVariant = (\n theme: string,\n base: string,\n interact: string,\n active: string\n) => ({\n theme,\n appearance: 'outline',\n css: {\n bg: 'unset',\n border: '1px solid',\n borderColor: 'currentColor',\n color: base,\n '&:not(:disabled):hover, &:not(:disabled):focus': { color: interact },\n '&:not(:disabled):active': { color: active }\n }\n})\n\nconst StyledButton = styled('button', {\n alignItems: 'center',\n appearance: 'none',\n bg: 'white',\n border: 'unset',\n borderRadius: '$1',\n boxSizing: 'border-box',\n cursor: 'pointer',\n display: 'flex',\n flexShrink: 0,\n justifyContent: 'center',\n p: 'unset',\n transition: 'all 100ms ease-out',\n '&[disabled]': disabledStyle,\n variants: {\n theme: {\n neutral: {},\n primary: {},\n success: {},\n warning: {},\n danger: {},\n white: {}\n },\n appearance: {\n simple: {},\n outline: {},\n solid: {}\n },\n size: {\n xs: { size: '$2' },\n sm: { size: '$3' },\n md: { size: '$4' },\n lg: { size: '$5' }\n },\n isRounded: {\n true: {\n borderRadius: '$round'\n }\n }\n },\n\n // prettier-ignore\n compoundVariants: [\n getSimpleVariant('neutral', '$grey700', '$primary900', '$primary1000'),\n getSimpleVariant('primary', '$primary800', '$primary900', '$primary1000'),\n getSimpleVariant('primaryDark', '$primary1000', '$primary1100', '$primary1200'),\n getSimpleVariant('success', '$success', '$successMid', '$successDark'),\n getSimpleVariant('warning', '$warning', '$warningMid', '$warningDark'),\n getSimpleVariant('danger', '$danger', '$dangerMid', '$dangerDark'),\n getSimpleVariant('white', '#fff', '#fff', '#fff'),\n\n getSolidVariant('primary', '$primary800', '$primary900', '$primary1000'),\n getSolidVariant('primaryDark', '$primary1000', '$primary1100', '$primary1200'),\n getSolidVariant('success', '$success', '$successMid', '$successDark'),\n getSolidVariant('warning', '$warning', '$warningMid', '$warningDark'),\n getSolidVariant('danger', '$danger', '$dangerMid', '$dangerDark'),\n\n getOutlineVariant('primary', '$primary800', '$primary900', '$primary1000'),\n getOutlineVariant('primaryDark', '$primary1000', '$primary1100', '$primary1200'),\n getOutlineVariant('success', '$success', '$successMid', '$successDark'),\n getOutlineVariant('warning', '$warning', '$warningMid', '$warningDark'),\n getOutlineVariant('danger', '$danger', '$dangerMid', '$dangerDark'),\n getOutlineVariant('white', '#fff', '#fff', '#fff')\n ]\n})\n\ntype ActionIconProps = Override<\n React.ComponentProps<typeof StyledButton>,\n VariantProps<typeof StyledButton> & {\n as?: string | React.ReactNode\n children: React.ReactNode\n label: string\n } & Omit<TOptionalTooltipWrapperProps, 'label'> &\n NavigatorActions\n>\n\nexport const ActionIcon: React.ForwardRefExoticComponent<ActionIconProps> =\n React.forwardRef(\n (\n {\n children,\n theme = 'primary',\n appearance = 'simple',\n size = 'sm',\n label,\n href,\n disabled,\n hasTooltip = true,\n tooltipSide,\n ...remainingProps\n },\n ref\n ) => {\n const INVALID_CHILDREN_MESSAGE = `A single ${Icon.displayName} component is permitted as a child of ${ActionIcon.displayName}`\n\n invariant(React.Children.count(children) === 1, INVALID_CHILDREN_MESSAGE)\n\n const optionalLinkProps = href\n ? ({\n as: 'a',\n href: disabled ? null : href,\n onClick: undefined,\n 'aria-disabled': !!disabled\n } as const)\n : ({ type: 'button' } as const)\n\n return (\n <OptionalTooltipWrapper\n hasTooltip={hasTooltip}\n label={label}\n tooltipSide={tooltipSide}\n >\n <StyledButton\n {...optionalLinkProps}\n {...getExternalAnchorProps(href)}\n {...remainingProps}\n aria-label={label}\n theme={theme}\n appearance={appearance}\n size={size}\n ref={ref}\n disabled={disabled}\n >\n {React.Children.map(children, (child) => {\n // TS needs this check for any following code to access child.type\n // even with optional chaining\n if (!React.isValidElement(child)) {\n throw new Error(INVALID_CHILDREN_MESSAGE)\n }\n\n invariant(\n child.type === Icon,\n `Children of type ${child?.type} aren't permitted. Only an ${Icon.displayName} component is allowed in ${ActionIcon.displayName}`\n )\n\n return React.cloneElement(\n child as React.ReactElement<React.ComponentProps<typeof Icon>>,\n {\n size: ActionIconSizeMap[size as string],\n css: { ...(child.props.css ? child.props.css : {}) }\n }\n )\n })}\n </StyledButton>\n </OptionalTooltipWrapper>\n )\n }\n )\n\nActionIcon.displayName = 'ActionIcon'\n"],"names":["getSimpleVariant","theme","base","interact","active","getSolidVariant","getOutlineVariant","StyledButton","styled","disabledStyle","ActionIcon","React","children","appearance","size","label","href","disabled","hasTooltip","tooltipSide","remainingProps","ref","INVALID_CHILDREN_MESSAGE","Icon","invariant","OptionalTooltipWrapper","getExternalAnchorProps","child","ActionIconSizeMap"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as o from"react";import{ColorScheme as a}from"../../experiments/color-scheme/ColorScheme.js";import{styled as t}from"../../stitches.js";import{Dismissible as m}from"../dismissible/index.js";import{Flex as l}from"../flex/Flex.js";import{useBannerContext as d}from"./BannerContext.js";const c=t(l,{position:"relative",width:"100%",borderRadius:"$
|
|
1
|
+
import*as o from"react";import{ColorScheme as a}from"../../experiments/color-scheme/ColorScheme.js";import{styled as t}from"../../stitches.js";import{Dismissible as m}from"../dismissible/index.js";import{Flex as l}from"../flex/Flex.js";import{useBannerContext as d}from"./BannerContext.js";const c=t(l,{position:"relative",width:"100%",borderRadius:"$3",overflow:"hidden",color:"$foreground","--banner-heading-color":"$colors$foreground","--banner-text-color":"$colors$grey900",variants:{emphasis:{bold:{background:"$base11",color:"$foreground7plus","--banner-heading-color":"$colors$foreground7plus","--banner-text-color":"$colors$grey100"},subtle:{background:"$base3"},minimal:{background:"$base1"}},size:{sm:{},md:{}}}}),b=({colorScheme:e={},onDismiss:r,dismissed:s,...n})=>{const{emphasis:i}=d();return o.createElement(a,{...e,asChild:!0},o.createElement(m,{asChild:!0,onDismiss:r,dismissed:s},o.createElement(c,{role:"banner",emphasis:i,...n})))};export{b as BannerContainer};
|
|
2
2
|
//# sourceMappingURL=BannerContainer.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BannerContainer.js","sources":["../../../src/components/banner/BannerContainer.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { ColorScheme, TcolorScheme } from '~/experiments/color-scheme'\nimport { styled } from '~/stitches'\n\nimport { Dismissible } from '../dismissible'\nimport { Flex } from '../flex'\nimport { useBannerContext } from './BannerContext'\n\nconst StyledBannerContainer = styled(Flex, {\n position: 'relative',\n width: '100%',\n borderRadius: '$
|
|
1
|
+
{"version":3,"file":"BannerContainer.js","sources":["../../../src/components/banner/BannerContainer.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { ColorScheme, TcolorScheme } from '~/experiments/color-scheme'\nimport { styled } from '~/stitches'\n\nimport { Dismissible } from '../dismissible'\nimport { Flex } from '../flex'\nimport { useBannerContext } from './BannerContext'\n\nconst StyledBannerContainer = styled(Flex, {\n position: 'relative',\n width: '100%',\n borderRadius: '$3',\n overflow: 'hidden',\n color: '$foreground',\n '--banner-heading-color': '$colors$foreground',\n '--banner-text-color': '$colors$grey900',\n variants: {\n emphasis: {\n bold: {\n background: '$base11',\n color: '$foreground7plus',\n '--banner-heading-color': '$colors$foreground7plus',\n '--banner-text-color': '$colors$grey100'\n },\n subtle: {\n background: '$base3'\n },\n minimal: {\n background: '$base1'\n }\n },\n size: {\n sm: {},\n md: {}\n }\n }\n})\n\nexport type TBannerContainerProps = React.ComponentProps<\n typeof StyledBannerContainer\n> & {\n colorScheme?: TcolorScheme\n} & React.ComponentProps<typeof Dismissible>\n\nexport const BannerContainer = ({\n colorScheme = {},\n onDismiss,\n dismissed,\n ...props\n}: TBannerContainerProps): JSX.Element => {\n const { emphasis } = useBannerContext()\n\n return (\n <ColorScheme {...colorScheme} asChild>\n <Dismissible asChild onDismiss={onDismiss} dismissed={dismissed}>\n <StyledBannerContainer role=\"banner\" emphasis={emphasis} {...props} />\n </Dismissible>\n </ColorScheme>\n )\n}\n"],"names":["StyledBannerContainer","styled","Flex","BannerContainer","colorScheme","onDismiss","dismissed","props","emphasis","useBannerContext","React","ColorScheme","Dismissible"],"mappings":"kSASA,MAAMA,EAAwBC,EAAOC,EAAM,CACzC,SAAU,WACV,MAAO,OACP,aAAc,KACd,SAAU,SACV,MAAO,cACP,yBAA0B,qBAC1B,sBAAuB,kBACvB,SAAU,CACR,SAAU,CACR,KAAM,CACJ,WAAY,UACZ,MAAO,mBACP,yBAA0B,0BAC1B,sBAAuB,iBACzB,EACA,OAAQ,CACN,WAAY,QACd,EACA,QAAS,CACP,WAAY,QACd,CACF,EACA,KAAM,CACJ,GAAI,GACJ,GAAI,CACN,CAAA,CACF,CACF,CAAC,EAQYC,EAAkB,CAAC,CAC9B,YAAAC,EAAc,CAAA,EACd,UAAAC,EACA,UAAAC,KACGC,CACL,IAA0C,CACxC,KAAM,CAAE,SAAAC,CAAS,EAAIC,EAErB,EAAA,OACEC,EAAA,cAACC,EAAA,CAAa,GAAGP,EAAa,QAAO,EAAA,EACnCM,EAAA,cAACE,EAAA,CAAY,QAAO,GAAC,UAAWP,EAAW,UAAWC,CACpDI,EAAAA,EAAA,cAACV,EAAA,CAAsB,KAAK,SAAS,SAAUQ,EAAW,GAAGD,CAAO,CAAA,CACtE,CACF,CAEJ"}
|
|
@@ -1156,17 +1156,17 @@ export declare const BannerRegular: {
|
|
|
1156
1156
|
marginBottom: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
|
|
1157
1157
|
};
|
|
1158
1158
|
}> | undefined;
|
|
1159
|
-
theme?: "success" | "danger" | "warning" | "
|
|
1160
|
-
"@sm"?: "success" | "danger" | "warning" | "
|
|
1161
|
-
"@md"?: "success" | "danger" | "warning" | "
|
|
1162
|
-
"@lg"?: "success" | "danger" | "warning" | "
|
|
1163
|
-
"@xl"?: "success" | "danger" | "warning" | "
|
|
1164
|
-
"@reducedMotion"?: "success" | "danger" | "warning" | "
|
|
1165
|
-
"@allowMotion"?: "success" | "danger" | "warning" | "
|
|
1166
|
-
"@hover"?: "success" | "danger" | "warning" | "
|
|
1167
|
-
"@initial"?: "success" | "danger" | "warning" | "
|
|
1159
|
+
theme?: "success" | "danger" | "warning" | "neutral" | "primary" | "white" | ({
|
|
1160
|
+
"@sm"?: "success" | "danger" | "warning" | "neutral" | "primary" | "white" | undefined;
|
|
1161
|
+
"@md"?: "success" | "danger" | "warning" | "neutral" | "primary" | "white" | undefined;
|
|
1162
|
+
"@lg"?: "success" | "danger" | "warning" | "neutral" | "primary" | "white" | undefined;
|
|
1163
|
+
"@xl"?: "success" | "danger" | "warning" | "neutral" | "primary" | "white" | undefined;
|
|
1164
|
+
"@reducedMotion"?: "success" | "danger" | "warning" | "neutral" | "primary" | "white" | undefined;
|
|
1165
|
+
"@allowMotion"?: "success" | "danger" | "warning" | "neutral" | "primary" | "white" | undefined;
|
|
1166
|
+
"@hover"?: "success" | "danger" | "warning" | "neutral" | "primary" | "white" | undefined;
|
|
1167
|
+
"@initial"?: "success" | "danger" | "warning" | "neutral" | "primary" | "white" | undefined;
|
|
1168
1168
|
} & {
|
|
1169
|
-
[x: string]: "success" | "danger" | "warning" | "
|
|
1169
|
+
[x: string]: "success" | "danger" | "warning" | "neutral" | "primary" | "white" | undefined;
|
|
1170
1170
|
}) | undefined;
|
|
1171
1171
|
prefix?: string | undefined;
|
|
1172
1172
|
form?: string | undefined;
|
|
@@ -1176,7 +1176,6 @@ export declare const BannerRegular: {
|
|
|
1176
1176
|
title?: string | undefined;
|
|
1177
1177
|
ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
|
|
1178
1178
|
key?: React.Key | null | undefined;
|
|
1179
|
-
name?: string | undefined;
|
|
1180
1179
|
defaultChecked?: boolean | undefined;
|
|
1181
1180
|
defaultValue?: string | number | readonly string[] | undefined;
|
|
1182
1181
|
suppressContentEditableWarning?: boolean | undefined;
|
|
@@ -1430,6 +1429,7 @@ export declare const BannerRegular: {
|
|
|
1430
1429
|
onTransitionEnd?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
|
|
1431
1430
|
onTransitionEndCapture?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
|
|
1432
1431
|
as?: string | React.ReactNode;
|
|
1432
|
+
name?: string | undefined;
|
|
1433
1433
|
type?: "submit" | "reset" | "button" | undefined;
|
|
1434
1434
|
disabled?: boolean | undefined;
|
|
1435
1435
|
formAction?: string | undefined;
|
|
@@ -2,7 +2,7 @@ import * as React from 'react';
|
|
|
2
2
|
declare const StyledDismiss: import("@atom-learning/stitches-react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<Omit<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
|
|
3
3
|
ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
|
|
4
4
|
}, "appearance" | "size" | "css" | "theme" | "isRounded"> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{
|
|
5
|
-
theme?: "success" | "danger" | "warning" | "
|
|
5
|
+
theme?: "success" | "danger" | "warning" | "neutral" | "primary" | "white" | undefined;
|
|
6
6
|
appearance?: "outline" | "solid" | "simple" | undefined;
|
|
7
7
|
size?: "xs" | "sm" | "md" | "lg" | undefined;
|
|
8
8
|
isRounded?: boolean | "true" | undefined;
|
|
@@ -376,8 +376,8 @@ declare const StyledDismiss: import("@atom-learning/stitches-react/types/styled-
|
|
|
376
376
|
marginBottom: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
|
|
377
377
|
};
|
|
378
378
|
}> | undefined;
|
|
379
|
-
}, "appearance" | "size" | "theme" | "label" | "children" | "as" | "
|
|
380
|
-
theme?: "success" | "danger" | "warning" | "
|
|
379
|
+
}, "appearance" | "size" | "theme" | "label" | "children" | "as" | keyof import("../../../types").NavigatorActions | "hasTooltip" | "tooltipSide" | "isRounded"> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{
|
|
380
|
+
theme?: "success" | "danger" | "warning" | "neutral" | "primary" | "white" | undefined;
|
|
381
381
|
appearance?: "outline" | "solid" | "simple" | undefined;
|
|
382
382
|
size?: "xs" | "sm" | "md" | "lg" | undefined;
|
|
383
383
|
isRounded?: boolean | "true" | undefined;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as i from"react";import{styled as a}from"../../../stitches.js";import{Heading as o}from"../../heading/Heading.js";import{useBannerContext as m}from"../BannerContext.js";const t=a(o,{mb:"$4",color:"var(--banner-heading-color)",variants:{containerSize:{sm:{},md:{}},hasDismiss:{true:{}}},compoundVariants:[{containerSize:"sm",hasDismiss:!0,css:{mr:"$6"}}]}),s=e=>{const{size:n,hasDismiss:r}=m();return i.createElement(t,{size:"
|
|
1
|
+
import*as i from"react";import{styled as a}from"../../../stitches.js";import{Heading as o}from"../../heading/Heading.js";import{useBannerContext as m}from"../BannerContext.js";const t=a(o,{mb:"$4",color:"var(--banner-heading-color)",variants:{containerSize:{sm:{},md:{}},hasDismiss:{true:{}}},compoundVariants:[{containerSize:"sm",hasDismiss:!0,css:{mr:"$6"}}]}),s=e=>{const{size:n,hasDismiss:r}=m();return i.createElement(t,{size:"md",containerSize:n,hasDismiss:r,...e})};s.displayName="BannerRegularHeading";export{s as BannerRegularHeading};
|
|
2
2
|
//# sourceMappingURL=BannerRegularHeading.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BannerRegularHeading.js","sources":["../../../../src/components/banner/banner-regular/BannerRegularHeading.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { Heading } from '../../heading'\nimport { useBannerContext } from '../BannerContext'\n\nconst StyledHeading = styled(Heading, {\n mb: '$4',\n color: 'var(--banner-heading-color)',\n variants: {\n containerSize: {\n sm: {},\n md: {}\n },\n hasDismiss: {\n true: {}\n }\n },\n compoundVariants: [\n {\n containerSize: 'sm',\n hasDismiss: true,\n css: {\n mr: '$6'\n }\n }\n ]\n})\n\nexport const BannerRegularHeading = (\n props: React.ComponentProps<typeof Heading>\n) => {\n const { size, hasDismiss } = useBannerContext()\n\n return (\n <StyledHeading\n size=\"
|
|
1
|
+
{"version":3,"file":"BannerRegularHeading.js","sources":["../../../../src/components/banner/banner-regular/BannerRegularHeading.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { Heading } from '../../heading'\nimport { useBannerContext } from '../BannerContext'\n\nconst StyledHeading = styled(Heading, {\n mb: '$4',\n color: 'var(--banner-heading-color)',\n variants: {\n containerSize: {\n sm: {},\n md: {}\n },\n hasDismiss: {\n true: {}\n }\n },\n compoundVariants: [\n {\n containerSize: 'sm',\n hasDismiss: true,\n css: {\n mr: '$6'\n }\n }\n ]\n})\n\nexport const BannerRegularHeading = (\n props: React.ComponentProps<typeof Heading>\n) => {\n const { size, hasDismiss } = useBannerContext()\n\n return (\n <StyledHeading\n size=\"md\"\n containerSize={size}\n hasDismiss={hasDismiss}\n {...props}\n />\n )\n}\n\nBannerRegularHeading.displayName = 'BannerRegularHeading'\n"],"names":["StyledHeading","styled","Heading","BannerRegularHeading","props","size","hasDismiss","useBannerContext","React"],"mappings":"gLAOA,MAAMA,EAAgBC,EAAOC,EAAS,CACpC,GAAI,KACJ,MAAO,8BACP,SAAU,CACR,cAAe,CACb,GAAI,CACJ,EAAA,GAAI,EACN,EACA,WAAY,CACV,KAAM,CACR,CAAA,CACF,EACA,iBAAkB,CAChB,CACE,cAAe,KACf,WAAY,GACZ,IAAK,CACH,GAAI,IACN,CACF,CACF,CACF,CAAC,EAEYC,EACXC,GACG,CACH,KAAM,CAAE,KAAAC,EAAM,WAAAC,CAAW,EAAIC,EAAiB,EAE9C,OACEC,EAAA,cAACR,EAAA,CACC,KAAK,KACL,cAAeK,EACf,WAAYC,EACX,GAAGF,EACN,CAEJ,EAEAD,EAAqB,YAAc"}
|
|
@@ -1153,17 +1153,17 @@ export declare const BannerSlim: {
|
|
|
1153
1153
|
marginBottom: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
|
|
1154
1154
|
};
|
|
1155
1155
|
}> | undefined;
|
|
1156
|
-
theme?: "success" | "danger" | "warning" | "
|
|
1157
|
-
"@sm"?: "success" | "danger" | "warning" | "
|
|
1158
|
-
"@md"?: "success" | "danger" | "warning" | "
|
|
1159
|
-
"@lg"?: "success" | "danger" | "warning" | "
|
|
1160
|
-
"@xl"?: "success" | "danger" | "warning" | "
|
|
1161
|
-
"@reducedMotion"?: "success" | "danger" | "warning" | "
|
|
1162
|
-
"@allowMotion"?: "success" | "danger" | "warning" | "
|
|
1163
|
-
"@hover"?: "success" | "danger" | "warning" | "
|
|
1164
|
-
"@initial"?: "success" | "danger" | "warning" | "
|
|
1156
|
+
theme?: "success" | "danger" | "warning" | "neutral" | "primary" | "white" | ({
|
|
1157
|
+
"@sm"?: "success" | "danger" | "warning" | "neutral" | "primary" | "white" | undefined;
|
|
1158
|
+
"@md"?: "success" | "danger" | "warning" | "neutral" | "primary" | "white" | undefined;
|
|
1159
|
+
"@lg"?: "success" | "danger" | "warning" | "neutral" | "primary" | "white" | undefined;
|
|
1160
|
+
"@xl"?: "success" | "danger" | "warning" | "neutral" | "primary" | "white" | undefined;
|
|
1161
|
+
"@reducedMotion"?: "success" | "danger" | "warning" | "neutral" | "primary" | "white" | undefined;
|
|
1162
|
+
"@allowMotion"?: "success" | "danger" | "warning" | "neutral" | "primary" | "white" | undefined;
|
|
1163
|
+
"@hover"?: "success" | "danger" | "warning" | "neutral" | "primary" | "white" | undefined;
|
|
1164
|
+
"@initial"?: "success" | "danger" | "warning" | "neutral" | "primary" | "white" | undefined;
|
|
1165
1165
|
} & {
|
|
1166
|
-
[x: string]: "success" | "danger" | "warning" | "
|
|
1166
|
+
[x: string]: "success" | "danger" | "warning" | "neutral" | "primary" | "white" | undefined;
|
|
1167
1167
|
}) | undefined;
|
|
1168
1168
|
prefix?: string | undefined;
|
|
1169
1169
|
form?: string | undefined;
|
|
@@ -1173,7 +1173,6 @@ export declare const BannerSlim: {
|
|
|
1173
1173
|
title?: string | undefined;
|
|
1174
1174
|
ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
|
|
1175
1175
|
key?: React.Key | null | undefined;
|
|
1176
|
-
name?: string | undefined;
|
|
1177
1176
|
defaultChecked?: boolean | undefined;
|
|
1178
1177
|
defaultValue?: string | number | readonly string[] | undefined;
|
|
1179
1178
|
suppressContentEditableWarning?: boolean | undefined;
|
|
@@ -1427,6 +1426,7 @@ export declare const BannerSlim: {
|
|
|
1427
1426
|
onTransitionEnd?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
|
|
1428
1427
|
onTransitionEndCapture?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
|
|
1429
1428
|
as?: string | React.ReactNode;
|
|
1429
|
+
name?: string | undefined;
|
|
1430
1430
|
type?: "submit" | "reset" | "button" | undefined;
|
|
1431
1431
|
disabled?: boolean | undefined;
|
|
1432
1432
|
formAction?: string | undefined;
|
|
@@ -1435,6 +1435,18 @@ export declare const BannerSlim: {
|
|
|
1435
1435
|
formNoValidate?: boolean | undefined;
|
|
1436
1436
|
formTarget?: string | undefined;
|
|
1437
1437
|
value?: string | readonly string[] | number | undefined;
|
|
1438
|
+
emphasis?: "bold" | ({
|
|
1439
|
+
"@sm"?: "bold" | undefined;
|
|
1440
|
+
"@md"?: "bold" | undefined;
|
|
1441
|
+
"@lg"?: "bold" | undefined;
|
|
1442
|
+
"@xl"?: "bold" | undefined;
|
|
1443
|
+
"@reducedMotion"?: "bold" | undefined;
|
|
1444
|
+
"@allowMotion"?: "bold" | undefined;
|
|
1445
|
+
"@hover"?: "bold" | undefined;
|
|
1446
|
+
"@initial"?: "bold" | undefined;
|
|
1447
|
+
} & {
|
|
1448
|
+
[x: string]: "bold" | undefined;
|
|
1449
|
+
}) | undefined;
|
|
1438
1450
|
hasTooltip?: boolean | undefined;
|
|
1439
1451
|
tooltipSide?: React.ComponentProps<({ children, side, sideOffset, size, ...remainingProps }: Omit<import("@radix-ui/react-tooltip").TooltipContentProps & React.RefAttributes<HTMLDivElement>, "size" | "css"> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{
|
|
1440
1452
|
size?: "sm" | "md" | "lg" | undefined;
|
|
@@ -1821,18 +1833,6 @@ export declare const BannerSlim: {
|
|
|
1821
1833
|
} & {
|
|
1822
1834
|
[x: string]: boolean | "true" | undefined;
|
|
1823
1835
|
}) | undefined;
|
|
1824
|
-
emphasis?: "bold" | ({
|
|
1825
|
-
"@sm"?: "bold" | undefined;
|
|
1826
|
-
"@md"?: "bold" | undefined;
|
|
1827
|
-
"@lg"?: "bold" | undefined;
|
|
1828
|
-
"@xl"?: "bold" | undefined;
|
|
1829
|
-
"@reducedMotion"?: "bold" | undefined;
|
|
1830
|
-
"@allowMotion"?: "bold" | undefined;
|
|
1831
|
-
"@hover"?: "bold" | undefined;
|
|
1832
|
-
"@initial"?: "bold" | undefined;
|
|
1833
|
-
} & {
|
|
1834
|
-
[x: string]: "bold" | undefined;
|
|
1835
|
-
}) | undefined;
|
|
1836
1836
|
containerSize?: "sm" | "md" | ({
|
|
1837
1837
|
"@sm"?: "sm" | "md" | undefined;
|
|
1838
1838
|
"@md"?: "sm" | "md" | undefined;
|
|
@@ -2,7 +2,7 @@ import * as React from 'react';
|
|
|
2
2
|
declare const StyledDismiss: import("@atom-learning/stitches-react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<Omit<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
|
|
3
3
|
ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
|
|
4
4
|
}, "appearance" | "size" | "css" | "theme" | "isRounded"> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{
|
|
5
|
-
theme?: "success" | "danger" | "warning" | "
|
|
5
|
+
theme?: "success" | "danger" | "warning" | "neutral" | "primary" | "white" | undefined;
|
|
6
6
|
appearance?: "outline" | "solid" | "simple" | undefined;
|
|
7
7
|
size?: "xs" | "sm" | "md" | "lg" | undefined;
|
|
8
8
|
isRounded?: boolean | "true" | undefined;
|
|
@@ -376,8 +376,8 @@ declare const StyledDismiss: import("@atom-learning/stitches-react/types/styled-
|
|
|
376
376
|
marginBottom: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
|
|
377
377
|
};
|
|
378
378
|
}> | undefined;
|
|
379
|
-
}, "appearance" | "size" | "theme" | "label" | "children" | "as" | "
|
|
380
|
-
theme?: "success" | "danger" | "warning" | "
|
|
379
|
+
}, "appearance" | "size" | "theme" | "label" | "children" | "as" | keyof import("../../../types").NavigatorActions | "hasTooltip" | "tooltipSide" | "isRounded"> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{
|
|
380
|
+
theme?: "success" | "danger" | "warning" | "neutral" | "primary" | "white" | undefined;
|
|
381
381
|
appearance?: "outline" | "solid" | "simple" | undefined;
|
|
382
382
|
size?: "xs" | "sm" | "md" | "lg" | undefined;
|
|
383
383
|
isRounded?: boolean | "true" | undefined;
|
|
@@ -3,7 +3,7 @@ import * as React from 'react';
|
|
|
3
3
|
import { NavigatorActions } from '../../types';
|
|
4
4
|
import { Override } from '../../utilities';
|
|
5
5
|
export declare const StyledButton: import("@atom-learning/stitches-react/types/styled-component").StyledComponent<"button", {
|
|
6
|
-
theme?: "success" | "danger" | "warning" | "
|
|
6
|
+
theme?: "success" | "danger" | "warning" | "neutral" | "primary" | "secondary" | undefined;
|
|
7
7
|
appearance?: "outline" | "solid" | undefined;
|
|
8
8
|
size?: "sm" | "md" | "lg" | "xl" | undefined;
|
|
9
9
|
isLoading?: boolean | "true" | undefined;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{opacify as s}from"color2k";import*as a from"react";import{StyledIcon as d}from"../icon/Icon.js";import{Loader as u}from"../loader/Loader.js";import{styled as $}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"../../utilities/style/keyframe-animations.js";import{disabledStyle as l}from"../../utilities/style/disabledStyle.js";import{getExternalAnchorProps as f}from"../../utilities/uri/index.js";const p=(e,r,i,t)=>({theme:e,appearance:"outline",css:{border:"1px solid",borderColor:"currentColor",color:r,"&[disabled]":l,"&:not([disabled]):hover, &:not([disabled]):focus":{textDecoration:"none",color:i},"&:not([disabled]):active":{color:t}}}),n=(e,r,i,t,o="white")=>({theme:e,appearance:"solid",css:{bg:r,color:o,"&[disabled]":l,"&:not([disabled]):hover, &:not([disabled]):focus":{bg:i,color:o},"&:not([disabled]):active":{bg:t}}}),g=$("button",{alignItems:"center",bg:"unset",border:"unset",borderRadius:"$
|
|
1
|
+
import{opacify as s}from"color2k";import*as a from"react";import{StyledIcon as d}from"../icon/Icon.js";import{Loader as u}from"../loader/Loader.js";import{styled as $}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"../../utilities/style/keyframe-animations.js";import{disabledStyle as l}from"../../utilities/style/disabledStyle.js";import{getExternalAnchorProps as f}from"../../utilities/uri/index.js";const p=(e,r,i,t)=>({theme:e,appearance:"outline",css:{border:"1px solid",borderColor:"currentColor",color:r,"&[disabled]":l,"&:not([disabled]):hover, &:not([disabled]):focus":{textDecoration:"none",color:i},"&:not([disabled]):active":{color:t}}}),n=(e,r,i,t,o="white")=>({theme:e,appearance:"solid",css:{bg:r,color:o,"&[disabled]":l,"&:not([disabled]):hover, &:not([disabled]):focus":{bg:i,color:o},"&:not([disabled]):active":{bg:t}}}),g=$("button",{alignItems:"center",bg:"unset",border:"unset",borderRadius:"$1",cursor:"pointer",display:"flex",fontFamily:"$body",fontWeight:600,justifyContent:"center",p:"unset",textDecoration:"none",transition:"all 100ms ease-out",whiteSpace:"nowrap",width:"max-content","&[disabled]":l,variants:{theme:{primary:{},secondary:{},success:{},warning:{},danger:{},neutral:{}},appearance:{solid:{},outline:{}},size:{sm:{fontSize:"$sm",lineHeight:1.53,height:"$3",px:"$4",gap:"$2",[`& ${d}`]:{size:16}},md:{fontSize:"$md",lineHeight:1.5,height:"$4",px:"$5",gap:"$3",[`& ${d}`]:{size:20}},lg:{fontSize:"$lg",lineHeight:1.5,height:"$5",px:"$5",gap:"$3",[`& ${d}`]:{size:22}},xl:{fontSize:"$lg",lineHeight:1.5,height:"$6",px:"$5",gap:"$3",[`& ${d}`]:{size:22}}},isLoading:{true:{cursor:"not-allowed",opacity:.6,pointerEvents:"none"}},fullWidth:{true:{width:"100%"},false:{width:"max-content"}}},compoundVariants:[n("primary","$primary800","$primary900","$primary1000"),n("secondary","$primary1000","$primary1100","$primary1200"),n("success","$success","$successMid","$successDark"),n("warning","$warning","$warningMid","$warningDark","$grey900"),n("danger","$danger","$dangerMid","$dangerDark"),n("neutral","white",s("white",-.1),s("white",-.25),"$primary800"),p("primary","$primary800","$primary900","$primary1000"),p("secondary","$primary1000","$primary1100","$primary1200"),p("neutral","white",s("white",-.2),s("white",-.35))],defaultVariants:{appearance:"solid",size:"md",theme:"primary"}}),b=$("span",{alignItems:"center",display:"flex",justifyContent:"center",visibility:"hidden",variants:{size:{sm:{gap:"$2"},md:{gap:"$3"},lg:{gap:"$3"},xl:{gap:"$3"}}},defaultVariants:{size:"md"}}),w=({size:e,children:r})=>a.createElement(a.Fragment,null,a.createElement(u,{css:{position:"absolute"}}),a.createElement(b,{size:e},r)),h=a.forwardRef(({children:e,as:r,href:i,isLoading:t=!1,onClick:o,disabled:m,...c},y)=>a.createElement(g,{as:r||(i?"a":void 0),...!m&&!t&&{href:i,onClick:o},isLoading:t,type:i?void 0:"button",disabled:m,...c,...f(i),ref:y},t?a.createElement(w,{size:c.size},e):e));h.displayName="Button";export{h as Button,g as StyledButton};
|
|
2
2
|
//# sourceMappingURL=Button.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["import type { VariantProps } from '@atom-learning/stitches-react'\nimport { opacify } from 'color2k'\nimport * as React from 'react'\n\nimport { StyledIcon } from '~/components/icon'\nimport { Loader } from '~/components/loader'\nimport { styled } from '~/stitches'\nimport { NavigatorActions } from '~/types'\nimport { disabledStyle, Override } from '~/utilities'\nimport { getExternalAnchorProps } from '~/utilities/uri'\n\nconst getButtonOutlineVariant = (\n theme: string,\n base: string,\n interact: string,\n active: string\n) => ({\n theme,\n appearance: 'outline',\n css: {\n border: '1px solid',\n borderColor: 'currentColor',\n color: base,\n '&[disabled]': disabledStyle,\n '&:not([disabled]):hover, &:not([disabled]):focus': {\n textDecoration: 'none',\n color: interact\n },\n '&:not([disabled]):active': { color: active }\n }\n})\n\nconst getButtonSolidVariant = (\n theme: string,\n base: string,\n interact: string,\n active: string,\n text = 'white'\n) => ({\n theme,\n appearance: 'solid',\n css: {\n bg: base,\n color: text,\n '&[disabled]': disabledStyle,\n '&:not([disabled]):hover, &:not([disabled]):focus': {\n bg: interact,\n color: text\n },\n '&:not([disabled]):active': { bg: active }\n }\n})\n\nexport const StyledButton = styled('button', {\n alignItems: 'center',\n bg: 'unset',\n border: 'unset',\n borderRadius: '$
|
|
1
|
+
{"version":3,"file":"Button.js","sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["import type { VariantProps } from '@atom-learning/stitches-react'\nimport { opacify } from 'color2k'\nimport * as React from 'react'\n\nimport { StyledIcon } from '~/components/icon'\nimport { Loader } from '~/components/loader'\nimport { styled } from '~/stitches'\nimport { NavigatorActions } from '~/types'\nimport { disabledStyle, Override } from '~/utilities'\nimport { getExternalAnchorProps } from '~/utilities/uri'\n\nconst getButtonOutlineVariant = (\n theme: string,\n base: string,\n interact: string,\n active: string\n) => ({\n theme,\n appearance: 'outline',\n css: {\n border: '1px solid',\n borderColor: 'currentColor',\n color: base,\n '&[disabled]': disabledStyle,\n '&:not([disabled]):hover, &:not([disabled]):focus': {\n textDecoration: 'none',\n color: interact\n },\n '&:not([disabled]):active': { color: active }\n }\n})\n\nconst getButtonSolidVariant = (\n theme: string,\n base: string,\n interact: string,\n active: string,\n text = 'white'\n) => ({\n theme,\n appearance: 'solid',\n css: {\n bg: base,\n color: text,\n '&[disabled]': disabledStyle,\n '&:not([disabled]):hover, &:not([disabled]):focus': {\n bg: interact,\n color: text\n },\n '&:not([disabled]):active': { bg: active }\n }\n})\n\nexport const StyledButton = styled('button', {\n alignItems: 'center',\n bg: 'unset',\n border: 'unset',\n borderRadius: '$1',\n cursor: 'pointer',\n display: 'flex',\n fontFamily: '$body',\n fontWeight: 600,\n justifyContent: 'center',\n p: 'unset',\n textDecoration: 'none',\n transition: 'all 100ms ease-out',\n whiteSpace: 'nowrap',\n width: 'max-content',\n '&[disabled]': disabledStyle,\n variants: {\n theme: {\n primary: {},\n secondary: {},\n success: {},\n warning: {},\n danger: {},\n neutral: {}\n },\n appearance: {\n solid: {},\n outline: {}\n },\n size: {\n sm: {\n fontSize: '$sm',\n lineHeight: 1.53,\n height: '$3',\n px: '$4',\n gap: '$2',\n [`& ${StyledIcon}`]: { size: 16 }\n },\n md: {\n fontSize: '$md',\n lineHeight: 1.5,\n height: '$4',\n px: '$5',\n gap: '$3',\n [`& ${StyledIcon}`]: { size: 20 }\n },\n lg: {\n fontSize: '$lg',\n lineHeight: 1.5,\n height: '$5',\n px: '$5',\n gap: '$3',\n [`& ${StyledIcon}`]: { size: 22 }\n },\n xl: {\n fontSize: '$lg',\n lineHeight: 1.5,\n height: '$6',\n px: '$5',\n gap: '$3',\n [`& ${StyledIcon}`]: { size: 22 }\n }\n },\n isLoading: {\n true: {\n cursor: 'not-allowed',\n opacity: 0.6,\n pointerEvents: 'none'\n }\n },\n fullWidth: {\n true: { width: '100%' },\n false: { width: 'max-content' }\n }\n },\n\n // prettier-ignore\n compoundVariants: [\n getButtonSolidVariant('primary', '$primary800', '$primary900', '$primary1000'),\n getButtonSolidVariant('secondary', '$primary1000', '$primary1100', '$primary1200'),\n getButtonSolidVariant('success', '$success', '$successMid', '$successDark'),\n getButtonSolidVariant('warning', '$warning', '$warningMid', '$warningDark', '$grey900'),\n getButtonSolidVariant('danger', '$danger', '$dangerMid', '$dangerDark'),\n getButtonSolidVariant('neutral', 'white', opacify('white', -0.1), opacify('white', -0.25), '$primary800'),\n getButtonOutlineVariant('primary', '$primary800', '$primary900', '$primary1000'),\n getButtonOutlineVariant('secondary', '$primary1000', '$primary1100', '$primary1200'),\n getButtonOutlineVariant('neutral', 'white', opacify('white', -0.2), opacify('white', -0.35))\n ],\n\n defaultVariants: {\n appearance: 'solid',\n size: 'md',\n theme: 'primary'\n }\n})\n\nconst LoaderContentsWrapper = styled('span', {\n alignItems: 'center',\n display: 'flex',\n justifyContent: 'center',\n visibility: 'hidden',\n variants: {\n size: {\n sm: { gap: '$2' },\n md: { gap: '$3' },\n lg: { gap: '$3' },\n xl: { gap: '$3' }\n }\n },\n defaultVariants: {\n size: 'md'\n }\n})\n\nconst WithLoader = ({\n size,\n children\n}: React.ComponentProps<typeof LoaderContentsWrapper>) => (\n <>\n <Loader css={{ position: 'absolute' }} />\n <LoaderContentsWrapper size={size}>{children}</LoaderContentsWrapper>\n </>\n)\n\ntype ButtonProps = Override<\n React.ComponentProps<typeof StyledButton>,\n VariantProps<typeof StyledButton> & {\n as?: React.ComponentType | React.ElementType\n children: React.ReactNode\n href?: string\n isLoading?: boolean\n } & NavigatorActions\n>\n\nexport const Button: React.ForwardRefExoticComponent<ButtonProps> =\n React.forwardRef(\n (\n { children, as, href, isLoading = false, onClick, disabled, ...rest },\n ref\n ) => (\n <StyledButton\n as={as || (href ? 'a' : undefined)}\n {...(!disabled && !isLoading && { href, onClick })}\n isLoading={isLoading}\n type={!href ? 'button' : undefined}\n disabled={disabled}\n {...rest}\n {...getExternalAnchorProps(href)}\n ref={ref}\n >\n {isLoading ? (\n <WithLoader size={rest.size}>{children}</WithLoader>\n ) : (\n children\n )}\n </StyledButton>\n )\n )\n\nButton.displayName = 'Button'\n"],"names":["getButtonOutlineVariant","theme","base","interact","active","disabledStyle","getButtonSolidVariant","text","StyledButton","styled","StyledIcon","opacify","LoaderContentsWrapper","WithLoader","size","children","React","Loader","Button","as","href","isLoading","onClick","disabled","rest","ref","getExternalAnchorProps"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as t from"react";import{useFormContext as F,useController as x}from"react-hook-form";import{Checkbox as b}from"../checkbox/Checkbox.js";import"../field-wrapper/FieldWrapper.js";import{InlineFieldWrapper as v}from"../field-wrapper/InlineFieldWrapper.js";import"../form/Form.js";import{useFieldError as E}from"../form/useFieldError.js";var g=(e=>(e.ON="on",e.OFF="off",e))(g||{});const m=({css:e,label:f,name:l,validation:r,description:s,defaultChecked:u=!1,checked:o,onCheckedChange:n,...p})=>{const{control:h}=F(),{error:a}=E(l),{field:{ref:C,onChange:i,value:c,name:k}}=x({name:l,control:h,rules:r,defaultValue:u});return t.useEffect(()=>{typeof o<"u"&&i(o)},[o]),t.createElement(v,{css:e,description:s,error:a,label:f,required:Boolean(r==null?void 0:r.required)},t.createElement(b,{ref:C,name:k,...p,onCheckedChange:d=>{i(d),n==null||n(d)},value:c?"on":"off",checked:c,...a&&{state:"error"}}))};m.displayName="CheckboxField";export{m as CheckboxField};
|
|
1
|
+
import*as t from"react";import{useFormContext as F,useController as x}from"react-hook-form";import{Checkbox as b}from"../checkbox/Checkbox.js";import"../field-wrapper/FieldWrapper.js";import{InlineFieldWrapper as v}from"../field-wrapper/InlineFieldWrapper.js";import"../form/Form.js";import{useFieldError as E}from"../form/useFieldError.js";import"../form/useFormCustomContext.js";var g=(e=>(e.ON="on",e.OFF="off",e))(g||{});const m=({css:e,label:f,name:l,validation:r,description:s,defaultChecked:u=!1,checked:o,onCheckedChange:n,...p})=>{const{control:h}=F(),{error:a}=E(l),{field:{ref:C,onChange:i,value:c,name:k}}=x({name:l,control:h,rules:r,defaultValue:u});return t.useEffect(()=>{typeof o<"u"&&i(o)},[o]),t.createElement(v,{css:e,description:s,error:a,label:f,required:Boolean(r==null?void 0:r.required)},t.createElement(b,{ref:C,name:k,...p,onCheckedChange:d=>{i(d),n==null||n(d)},value:c?"on":"off",checked:c,...a&&{state:"error"}}))};m.displayName="CheckboxField";export{m as CheckboxField};
|
|
2
2
|
//# sourceMappingURL=CheckboxField.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckboxField.js","sources":["../../../src/components/checkbox-field/CheckboxField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useController, useFormContext } from 'react-hook-form'\n\nimport { Checkbox } from '~/components/checkbox'\nimport {\n FieldElementWrapperProps,\n InlineFieldWrapper\n} from '~/components/field-wrapper'\nimport { useFieldError } from '~/components/form'\n\nenum CheckboxValue {\n ON = 'on',\n OFF = 'off'\n}\n\nexport const CheckboxField = ({\n css,\n label,\n name,\n validation,\n description,\n defaultChecked = false,\n checked,\n onCheckedChange,\n ...remainingProps\n}: React.ComponentProps<typeof Checkbox> & FieldElementWrapperProps) => {\n const { control } = useFormContext()\n const { error } = useFieldError(name)\n const {\n field: { ref, onChange, value: innerChecked, name: innerName }\n } = useController({\n name,\n control,\n rules: validation,\n defaultValue: defaultChecked\n })\n\n React.useEffect(() => {\n // Update the react-hook-form inner checked to match what is passed in.\n if (typeof checked !== 'undefined') onChange(checked)\n }, [checked])\n\n return (\n <InlineFieldWrapper\n css={css}\n description={description}\n error={error}\n label={label}\n required={Boolean(validation?.required)}\n >\n <Checkbox\n ref={ref}\n name={innerName}\n {...remainingProps}\n onCheckedChange={(newChecked) => {\n onChange(newChecked)\n onCheckedChange?.(newChecked)\n }}\n value={innerChecked ? CheckboxValue.ON : CheckboxValue.OFF}\n checked={innerChecked}\n {...(error && { state: 'error' })}\n />\n </InlineFieldWrapper>\n )\n}\n\nCheckboxField.displayName = 'CheckboxField'\n"],"names":["CheckboxValue","CheckboxField","css","label","name","validation","description","defaultChecked","checked","onCheckedChange","remainingProps","control","useFormContext","error","useFieldError","ref","onChange","innerChecked","innerName","useController","React","InlineFieldWrapper","Checkbox","newChecked"],"mappings":"
|
|
1
|
+
{"version":3,"file":"CheckboxField.js","sources":["../../../src/components/checkbox-field/CheckboxField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useController, useFormContext } from 'react-hook-form'\n\nimport { Checkbox } from '~/components/checkbox'\nimport {\n FieldElementWrapperProps,\n InlineFieldWrapper\n} from '~/components/field-wrapper'\nimport { useFieldError } from '~/components/form'\n\nenum CheckboxValue {\n ON = 'on',\n OFF = 'off'\n}\n\nexport const CheckboxField = ({\n css,\n label,\n name,\n validation,\n description,\n defaultChecked = false,\n checked,\n onCheckedChange,\n ...remainingProps\n}: React.ComponentProps<typeof Checkbox> & FieldElementWrapperProps) => {\n const { control } = useFormContext()\n const { error } = useFieldError(name)\n const {\n field: { ref, onChange, value: innerChecked, name: innerName }\n } = useController({\n name,\n control,\n rules: validation,\n defaultValue: defaultChecked\n })\n\n React.useEffect(() => {\n // Update the react-hook-form inner checked to match what is passed in.\n if (typeof checked !== 'undefined') onChange(checked)\n }, [checked])\n\n return (\n <InlineFieldWrapper\n css={css}\n description={description}\n error={error}\n label={label}\n required={Boolean(validation?.required)}\n >\n <Checkbox\n ref={ref}\n name={innerName}\n {...remainingProps}\n onCheckedChange={(newChecked) => {\n onChange(newChecked)\n onCheckedChange?.(newChecked)\n }}\n value={innerChecked ? CheckboxValue.ON : CheckboxValue.OFF}\n checked={innerChecked}\n {...(error && { state: 'error' })}\n />\n </InlineFieldWrapper>\n )\n}\n\nCheckboxField.displayName = 'CheckboxField'\n"],"names":["CheckboxValue","CheckboxField","css","label","name","validation","description","defaultChecked","checked","onCheckedChange","remainingProps","control","useFormContext","error","useFieldError","ref","onChange","innerChecked","innerName","useController","React","InlineFieldWrapper","Checkbox","newChecked"],"mappings":"6XAUA,IAAKA,OACHA,EAAA,GAAK,KACLA,EAAA,IAAM,MAFHA,IAAAA,GAAA,CAKE,CAAA,EAAA,MAAMC,EAAgB,CAAC,CAC5B,IAAAC,EACA,MAAAC,EACA,KAAAC,EACA,WAAAC,EACA,YAAAC,EACA,eAAAC,EAAiB,GACjB,QAAAC,EACA,gBAAAC,KACGC,CACL,IAAwE,CACtE,KAAM,CAAE,QAAAC,CAAQ,EAAIC,EAAe,EAC7B,CAAE,MAAAC,CAAM,EAAIC,EAAcV,CAAI,EAC9B,CACJ,MAAO,CAAE,IAAAW,EAAK,SAAAC,EAAU,MAAOC,EAAc,KAAMC,CAAU,CAC/D,EAAIC,EAAc,CAChB,KAAAf,EACA,QAAAO,EACA,MAAON,EACP,aAAcE,CAChB,CAAC,EAED,OAAAa,EAAM,UAAU,IAAM,CAEhB,OAAOZ,EAAY,KAAaQ,EAASR,CAAO,CACtD,EAAG,CAACA,CAAO,CAAC,EAGVY,EAAA,cAACC,EAAA,CACC,IAAKnB,EACL,YAAaI,EACb,MAAOO,EACP,MAAOV,EACP,SAAU,QAAQE,GAAA,KAAAA,OAAAA,EAAY,QAAQ,CAEtCe,EAAAA,EAAA,cAACE,EAAA,CACC,IAAKP,EACL,KAAMG,EACL,GAAGR,EACJ,gBAAkBa,GAAe,CAC/BP,EAASO,CAAU,EACnBd,GAAA,MAAAA,EAAkBc,EACpB,EACA,MAAON,EAAe,KAAmB,MACzC,QAASA,EACR,GAAIJ,GAAS,CAAE,MAAO,OAAQ,CAAA,CACjC,CACF,CAEJ,EAEAZ,EAAc,YAAc"}
|
|
@@ -768,7 +768,6 @@ export declare const CheckboxGroup: (({ checked, defaultChecked, onCheckedChange
|
|
|
768
768
|
title?: string | undefined;
|
|
769
769
|
ref?: React.Ref<HTMLButtonElement> | undefined;
|
|
770
770
|
key?: React.Key | null | undefined;
|
|
771
|
-
name?: string | undefined;
|
|
772
771
|
defaultValue?: string | number | readonly string[] | undefined;
|
|
773
772
|
suppressContentEditableWarning?: boolean | undefined;
|
|
774
773
|
suppressHydrationWarning?: boolean | undefined;
|
|
@@ -1022,6 +1021,7 @@ export declare const CheckboxGroup: (({ checked, defaultChecked, onCheckedChange
|
|
|
1022
1021
|
onAnimationIterationCapture?: React.AnimationEventHandler<HTMLButtonElement> | undefined;
|
|
1023
1022
|
onTransitionEnd?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
|
|
1024
1023
|
onTransitionEndCapture?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
|
|
1024
|
+
name?: string | undefined;
|
|
1025
1025
|
type?: "submit" | "reset" | "button" | undefined;
|
|
1026
1026
|
disabled?: boolean | undefined;
|
|
1027
1027
|
formAction?: string | undefined;
|
|
@@ -1718,7 +1718,6 @@ export declare const CheckboxTree: (({ checked, defaultChecked, onCheckedChange,
|
|
|
1718
1718
|
title?: string | undefined;
|
|
1719
1719
|
ref?: ((((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement>) & (((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement>)) | null | undefined;
|
|
1720
1720
|
key?: React.Key | null | undefined;
|
|
1721
|
-
name?: string | undefined;
|
|
1722
1721
|
defaultChecked?: boolean | undefined;
|
|
1723
1722
|
defaultValue?: string | number | readonly string[] | undefined;
|
|
1724
1723
|
suppressContentEditableWarning?: boolean | undefined;
|
|
@@ -1973,6 +1972,7 @@ export declare const CheckboxTree: (({ checked, defaultChecked, onCheckedChange,
|
|
|
1973
1972
|
onAnimationIterationCapture?: (React.AnimationEventHandler<HTMLDivElement> & React.AnimationEventHandler<HTMLButtonElement>) | undefined;
|
|
1974
1973
|
onTransitionEnd?: (React.TransitionEventHandler<HTMLDivElement> & React.TransitionEventHandler<HTMLButtonElement>) | undefined;
|
|
1975
1974
|
onTransitionEndCapture?: (React.TransitionEventHandler<HTMLDivElement> & React.TransitionEventHandler<HTMLButtonElement>) | undefined;
|
|
1975
|
+
name?: string | undefined;
|
|
1976
1976
|
type?: "submit" | "reset" | "button" | undefined;
|
|
1977
1977
|
disabled?: boolean | undefined;
|
|
1978
1978
|
formAction?: string | undefined;
|
|
@@ -2439,7 +2439,6 @@ export declare const CheckboxTree: (({ checked, defaultChecked, onCheckedChange,
|
|
|
2439
2439
|
title?: string | undefined;
|
|
2440
2440
|
ref?: ((((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement>) & (((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement>)) | null | undefined;
|
|
2441
2441
|
key?: React.Key | null | undefined;
|
|
2442
|
-
name?: string | undefined;
|
|
2443
2442
|
defaultChecked?: boolean | undefined;
|
|
2444
2443
|
defaultValue?: string | number | readonly string[] | undefined;
|
|
2445
2444
|
suppressContentEditableWarning?: boolean | undefined;
|
|
@@ -2694,6 +2693,7 @@ export declare const CheckboxTree: (({ checked, defaultChecked, onCheckedChange,
|
|
|
2694
2693
|
onAnimationIterationCapture?: (React.AnimationEventHandler<HTMLDivElement> & React.AnimationEventHandler<HTMLButtonElement>) | undefined;
|
|
2695
2694
|
onTransitionEnd?: (React.TransitionEventHandler<HTMLDivElement> & React.TransitionEventHandler<HTMLButtonElement>) | undefined;
|
|
2696
2695
|
onTransitionEndCapture?: (React.TransitionEventHandler<HTMLDivElement> & React.TransitionEventHandler<HTMLButtonElement>) | undefined;
|
|
2696
|
+
name?: string | undefined;
|
|
2697
2697
|
type?: "submit" | "reset" | "button" | undefined;
|
|
2698
2698
|
disabled?: boolean | undefined;
|
|
2699
2699
|
formAction?: string | undefined;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as e from"react";import{Box as x}from"../box/Box.js";import{Flex as C}from"../flex/Flex.js";import{Icon as l}from"../icon/Icon.js";import{getTextVariant as s}from"../text/Text.js";import{styled as c}from"../../stitches.js";import{overrideStitchesVariantValue as g}from"../../utilities/override-stitches-variant-value/overrideStitchesVariantValue.js";const p={overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},d=c("span",{display:"inline-flex",alignItems:"center",px:"$1",flexGrow:1,...p,"& > *:not(:last-child)":{mr:"$1"}}),z={sm:"sm",md:"sm",lg:"md"},m=t=>{const r=e.useContext(a),{size:o}=r,n=e.useMemo(()=>g(o,i=>z[i]),[o]);return e.createElement(l,{...t,size:n})},u=({children:t,...r})=>{const o=e.Children.toArray(t),n=o.length<=1;return e.createElement(d,{...r},o.map((i,$)=>!n&&typeof i=="string"?e.createElement(x,{as:"span",css:p,key:i},i):e.isValidElement(i)&&i.type===l?e.createElement(m,{key:`icon-${$}`,...i.props}):i))},h=c(C,{px:"$2",border:"1px solid",borderRadius:"$
|
|
1
|
+
import*as e from"react";import{Box as x}from"../box/Box.js";import{Flex as C}from"../flex/Flex.js";import{Icon as l}from"../icon/Icon.js";import{getTextVariant as s}from"../text/Text.js";import{styled as c}from"../../stitches.js";import{overrideStitchesVariantValue as g}from"../../utilities/override-stitches-variant-value/overrideStitchesVariantValue.js";const p={overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},d=c("span",{display:"inline-flex",alignItems:"center",px:"$1",flexGrow:1,...p,"& > *:not(:last-child)":{mr:"$1"}}),z={sm:"sm",md:"sm",lg:"md"},m=t=>{const r=e.useContext(a),{size:o}=r,n=e.useMemo(()=>g(o,i=>z[i]),[o]);return e.createElement(l,{...t,size:n})},u=({children:t,...r})=>{const o=e.Children.toArray(t),n=o.length<=1;return e.createElement(d,{...r},o.map((i,$)=>!n&&typeof i=="string"?e.createElement(x,{as:"span",css:p,key:i},i):e.isValidElement(i)&&i.type===l?e.createElement(m,{key:`icon-${$}`,...i.props}):i))},h=c(C,{px:"$2",border:"1px solid",borderRadius:"$1",alignItems:"center",fontFamily:"$body",maxWidth:"100%",borderColor:"$primary800",color:"$primary900",bg:"$primary100","&[disabled]":{opacity:"0.3",pointerEvents:"none"},variants:{size:{sm:{height:"$2",...s({size:"sm"})},md:{height:"$3",...s({size:"sm"})},lg:{height:"$4",...s({size:"md"})}}}}),a=e.createContext({}),y=({size:t,children:r})=>{const o=e.useMemo(()=>({size:t}),[t]);return e.createElement(a.Provider,{value:o},r)},f=e.forwardRef(({size:t="md",...r},o)=>e.createElement(y,{size:t},e.createElement(h,{ref:o,size:t,...r}))),E=Object.assign(f,{Content:u,Icon:m});f.displayName="Chip";export{E as Chip,m as ChipIcon,a as ChipRootContext,y as ChipRootProvider,d as StyledChipContent,h as StyledRoot};
|
|
2
2
|
//# sourceMappingURL=Chip.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Chip.js","sources":["../../../src/components/chip/Chip.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Box } from '~/components/box'\nimport { Flex } from '~/components/flex'\nimport { Icon } from '~/components/icon'\nimport { getTextVariant } from '~/components/text'\nimport { styled } from '~/stitches'\nimport { overrideStitchesVariantValue } from '~/utilities/override-stitches-variant-value/overrideStitchesVariantValue'\n\nconst overflowElipsis = {\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap'\n}\nexport const StyledChipContent = styled('span', {\n display: 'inline-flex',\n alignItems: 'center',\n px: '$1',\n flexGrow: 1,\n ...overflowElipsis,\n '& > *:not(:last-child)': {\n mr: '$1'\n }\n})\n\nconst toIconSize = { sm: 'sm', md: 'sm', lg: 'md' }\n\nexport const ChipIcon = (props: React.ComponentProps<typeof Icon>) => {\n const rootContext = React.useContext(ChipRootContext)\n const { size } = rootContext\n const iconSize = React.useMemo(\n () => overrideStitchesVariantValue(size, (s) => toIconSize[s]),\n [size]\n )\n return <Icon {...props} size={iconSize} />\n}\n\nconst ChipContent = ({ children, ...rest }) => {\n const childrenArray = React.Children.toArray(children)\n const isSingleChild = childrenArray.length <= 1\n return (\n <StyledChipContent {...rest}>\n {\n childrenArray.map((child, index) => {\n if (!isSingleChild && typeof child === 'string')\n return (\n <Box as=\"span\" css={overflowElipsis} key={child}>\n {child}\n </Box>\n )\n if (React.isValidElement(child) && child.type === Icon) {\n return <ChipIcon key={`icon-${index}`} {...child.props} />\n }\n return child\n }) as React.ReactElement[]\n }\n </StyledChipContent>\n )\n}\n\nexport const StyledRoot = styled(Flex, {\n px: '$2',\n border: '1px solid',\n borderRadius: '$
|
|
1
|
+
{"version":3,"file":"Chip.js","sources":["../../../src/components/chip/Chip.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Box } from '~/components/box'\nimport { Flex } from '~/components/flex'\nimport { Icon } from '~/components/icon'\nimport { getTextVariant } from '~/components/text'\nimport { styled } from '~/stitches'\nimport { overrideStitchesVariantValue } from '~/utilities/override-stitches-variant-value/overrideStitchesVariantValue'\n\nconst overflowElipsis = {\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap'\n}\nexport const StyledChipContent = styled('span', {\n display: 'inline-flex',\n alignItems: 'center',\n px: '$1',\n flexGrow: 1,\n ...overflowElipsis,\n '& > *:not(:last-child)': {\n mr: '$1'\n }\n})\n\nconst toIconSize = { sm: 'sm', md: 'sm', lg: 'md' }\n\nexport const ChipIcon = (props: React.ComponentProps<typeof Icon>) => {\n const rootContext = React.useContext(ChipRootContext)\n const { size } = rootContext\n const iconSize = React.useMemo(\n () => overrideStitchesVariantValue(size, (s) => toIconSize[s]),\n [size]\n )\n return <Icon {...props} size={iconSize} />\n}\n\nconst ChipContent = ({ children, ...rest }) => {\n const childrenArray = React.Children.toArray(children)\n const isSingleChild = childrenArray.length <= 1\n return (\n <StyledChipContent {...rest}>\n {\n childrenArray.map((child, index) => {\n if (!isSingleChild && typeof child === 'string')\n return (\n <Box as=\"span\" css={overflowElipsis} key={child}>\n {child}\n </Box>\n )\n if (React.isValidElement(child) && child.type === Icon) {\n return <ChipIcon key={`icon-${index}`} {...child.props} />\n }\n return child\n }) as React.ReactElement[]\n }\n </StyledChipContent>\n )\n}\n\nexport const StyledRoot = styled(Flex, {\n px: '$2',\n border: '1px solid',\n borderRadius: '$1',\n alignItems: 'center',\n fontFamily: '$body',\n maxWidth: '100%',\n borderColor: '$primary800',\n color: '$primary900',\n bg: '$primary100',\n '&[disabled]': {\n opacity: '0.3',\n pointerEvents: 'none'\n },\n variants: {\n size: {\n sm: {\n height: '$2',\n ...getTextVariant({ size: 'sm' })\n },\n md: {\n height: '$3',\n ...getTextVariant({ size: 'sm' })\n },\n lg: {\n height: '$4',\n ...getTextVariant({ size: 'md' })\n }\n }\n }\n})\n\nexport type TChipRootContext = React.ComponentProps<typeof StyledRoot>\nexport type TChipRootProviderProps = TChipRootContext\n\nexport const ChipRootContext = React.createContext<TChipRootContext>({})\n\nexport const ChipRootProvider = ({\n size,\n children\n}: TChipRootProviderProps) => {\n const value = React.useMemo<TChipRootContext>(() => ({ size }), [size])\n return (\n <ChipRootContext.Provider value={value}>\n {children}\n </ChipRootContext.Provider>\n )\n}\n\nexport type TChipRootProps = TChipRootProviderProps\n\nconst ChipRoot: React.ForwardRefExoticComponent<TChipRootProps> =\n React.forwardRef(({ size = 'md', ...rest }, ref) => {\n return (\n <ChipRootProvider size={size}>\n <StyledRoot ref={ref} size={size} {...rest} />\n </ChipRootProvider>\n )\n })\n\nexport const Chip = Object.assign(ChipRoot, {\n Content: ChipContent,\n Icon: ChipIcon\n})\n\nChipRoot.displayName = 'Chip'\n"],"names":["overflowElipsis","StyledChipContent","styled","toIconSize","ChipIcon","props","rootContext","React","ChipRootContext","size","iconSize","overrideStitchesVariantValue","s","Icon","ChipContent","children","rest","childrenArray","isSingleChild","child","index","Box","StyledRoot","Flex","getTextVariant","ChipRootProvider","value","ChipRoot","ref","Chip"],"mappings":"qWASA,MAAMA,EAAkB,CACtB,SAAU,SACV,aAAc,WACd,WAAY,QACd,EACaC,EAAoBC,EAAO,OAAQ,CAC9C,QAAS,cACT,WAAY,SACZ,GAAI,KACJ,SAAU,EACV,GAAGF,EACH,yBAA0B,CACxB,GAAI,IACN,CACF,CAAC,EAEKG,EAAa,CAAE,GAAI,KAAM,GAAI,KAAM,GAAI,IAAK,EAErCC,EAAYC,GAA6C,CACpE,MAAMC,EAAcC,EAAM,WAAWC,CAAe,EAC9C,CAAE,KAAAC,CAAK,EAAIH,EACXI,EAAWH,EAAM,QACrB,IAAMI,EAA6BF,EAAOG,GAAMT,EAAWS,EAAE,EAC7D,CAACH,CAAI,CACP,EACA,OAAOF,EAAA,cAACM,EAAA,CAAM,GAAGR,EAAO,KAAMK,EAAU,CAC1C,EAEMI,EAAc,CAAC,CAAE,SAAAC,KAAaC,CAAK,IAAM,CAC7C,MAAMC,EAAgBV,EAAM,SAAS,QAAQQ,CAAQ,EAC/CG,EAAgBD,EAAc,QAAU,EAC9C,OACEV,EAAA,cAACN,GAAmB,GAAGe,CAAAA,EAEnBC,EAAc,IAAI,CAACE,EAAOC,IACpB,CAACF,GAAiB,OAAOC,GAAU,SAEnCZ,EAAA,cAACc,EAAA,CAAI,GAAG,OAAO,IAAKrB,EAAiB,IAAKmB,CACvCA,EAAAA,CACH,EAEAZ,EAAM,eAAeY,CAAK,GAAKA,EAAM,OAASN,EACzCN,EAAA,cAACH,EAAA,CAAS,IAAK,QAAQgB,IAAU,GAAGD,EAAM,KAAO,CAAA,EAEnDA,CACR,CAEL,CAEJ,EAEaG,EAAapB,EAAOqB,EAAM,CACrC,GAAI,KACJ,OAAQ,YACR,aAAc,KACd,WAAY,SACZ,WAAY,QACZ,SAAU,OACV,YAAa,cACb,MAAO,cACP,GAAI,cACJ,cAAe,CACb,QAAS,MACT,cAAe,MACjB,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CACF,OAAQ,KACR,GAAGC,EAAe,CAAE,KAAM,IAAK,CAAC,CAClC,EACA,GAAI,CACF,OAAQ,KACR,GAAGA,EAAe,CAAE,KAAM,IAAK,CAAC,CAClC,EACA,GAAI,CACF,OAAQ,KACR,GAAGA,EAAe,CAAE,KAAM,IAAK,CAAC,CAClC,CACF,CACF,CACF,CAAC,EAKYhB,EAAkBD,EAAM,cAAgC,CAAA,CAAE,EAE1DkB,EAAmB,CAAC,CAC/B,KAAAhB,EACA,SAAAM,CACF,IAA8B,CAC5B,MAAMW,EAAQnB,EAAM,QAA0B,KAAO,CAAE,KAAAE,CAAK,GAAI,CAACA,CAAI,CAAC,EACtE,OACEF,EAAA,cAACC,EAAgB,SAAhB,CAAyB,MAAOkB,GAC9BX,CACH,CAEJ,EAIMY,EACJpB,EAAM,WAAW,CAAC,CAAE,KAAAE,EAAO,QAASO,CAAK,EAAGY,IAExCrB,EAAA,cAACkB,GAAiB,KAAMhB,CAAAA,EACtBF,EAAA,cAACe,EAAA,CAAW,IAAKM,EAAK,KAAMnB,EAAO,GAAGO,EAAM,CAC9C,CAEH,EAEUa,EAAO,OAAO,OAAOF,EAAU,CAC1C,QAASb,EACT,KAAMV,CACR,CAAC,EAEDuB,EAAS,YAAc"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{ComboboxInput as n}from"@reach/combobox";import*as o from"react";import{styled as a,theme as d}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import{encodeBackgroundIcon as l}from"../../utilities/style/encode-background-icon.js";import"../../utilities/style/keyframe-animations.js";const e=a(n,{boxShadow:"none",appearance:"none",backgroundImage:l(d.colors.grey700.value,"chevron"),backgroundPosition:"right $space$3 top 50%, 0 0",backgroundRepeat:"no-repeat, repeat",backgroundSize:"20px auto, 100%",border:"1px solid $grey700",borderRadius:"$
|
|
1
|
+
import{ComboboxInput as n}from"@reach/combobox";import*as o from"react";import{styled as a,theme as d}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import{encodeBackgroundIcon as l}from"../../utilities/style/encode-background-icon.js";import"../../utilities/style/keyframe-animations.js";const e=a(n,{boxShadow:"none",appearance:"none",backgroundImage:l(d.colors.grey700.value,"chevron"),backgroundPosition:"right $space$3 top 50%, 0 0",backgroundRepeat:"no-repeat, repeat",backgroundSize:"20px auto, 100%",border:"1px solid $grey700",borderRadius:"$1",boxSizing:"border-box",color:"$grey1000",cursor:"text",display:"block",fontFamily:"$body",height:"$4",pl:"$3",pr:"$6",transition:"all 100ms ease-out",width:"100%","&::placeholder":{color:"$grey700",opacity:1},"&:focus-within":{borderColor:"$primary800",outline:"none"},"&[disabled]":{backgroundColor:"$grey200",color:"$grey800",cursor:"not-allowed"},variants:{size:{sm:{height:"$3",fontSize:"$sm",lineHeight:1.7},md:{height:"$4",fontSize:"$md",lineHeight:2},lg:{height:"$5",fontSize:"$md",lineHeight:2}},state:{error:{border:"1px solid $danger"}}}}),p=o.forwardRef(({size:r="md",...t},i)=>o.createElement(e,{size:r,...t,ref:i}));export{p as ComboboxInput,e as StyledComboboxInput};
|
|
2
2
|
//# sourceMappingURL=ComboboxInput.js.map
|