@atom-learning/components 2.64.0 → 2.65.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 +2 -2
- package/dist/components/badge/Badge.d.ts +7 -1
- package/dist/components/banner/BannerContainer.d.ts +7 -1
- package/dist/components/chip/Chip.d.ts +14 -2
- package/dist/components/chip-dismissible-group/ChipDismissibleGroupItem.d.ts +7 -1
- package/dist/components/chip-toggle-group/ChipToggleGroupItem.d.ts +7 -1
- package/dist/components/empty-state/EmptyState.d.ts +7 -1
- package/dist/components/flex/Flex.d.ts +7 -1
- package/dist/components/flex/Flex.js +1 -1
- package/dist/components/flex/Flex.js.map +1 -1
- package/dist/components/inline-message/InlineMessage.d.ts +7 -1
- package/dist/components/notification-badge/NotificationBadge.d.ts +7 -1
- package/dist/components/stack/Stack.d.ts +3 -0
- package/dist/components/stack/Stack.js.map +1 -1
- package/dist/components/stepper/StepperStepBullet.d.ts +7 -1
- package/dist/components/stepper/StepperStepContainer.d.ts +7 -1
- package/dist/docgen.json +1 -1
- package/dist/index.cjs.js +1 -1
- package/dist/index.cjs.js.map +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
# [2.
|
|
1
|
+
# [2.65.0](https://github.com/Atom-Learning/components/compare/v2.64.0...v2.65.0) (2023-07-31)
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
### Features
|
|
5
5
|
|
|
6
|
-
*
|
|
6
|
+
* update Flex to do all that Stack does ([eb4a049](https://github.com/Atom-Learning/components/commit/eb4a0492df7e414f311de7f4d6c553837ad14453))
|
|
7
7
|
|
|
8
8
|
# [1.4.0](https://github.com/Atom-Learning/components/compare/v1.3.0...v1.4.0) (2022-04-11)
|
|
9
9
|
|
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
declare const StyledBadge: import("@stitches/react/types/styled-component").StyledComponent<import("@stitches/react/types/styled-component").StyledComponent<"div", {
|
|
2
|
+
declare const StyledBadge: import("@stitches/react/types/styled-component").StyledComponent<import("@stitches/react/types/styled-component").StyledComponent<"div", {
|
|
3
|
+
direction?: "inherit" | "initial" | "revert" | "unset" | "row" | "column" | "column-reverse" | "row-reverse" | "revert-layer" | undefined;
|
|
4
|
+
wrap?: "inherit" | "initial" | "revert" | "unset" | "nowrap" | "wrap" | "wrap-reverse" | "revert-layer" | undefined;
|
|
5
|
+
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;
|
|
6
|
+
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;
|
|
7
|
+
gap?: number | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "24" | undefined;
|
|
8
|
+
}, {
|
|
3
9
|
sm: string;
|
|
4
10
|
md: string;
|
|
5
11
|
lg: string;
|
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
export declare const BannerContainer: import("@stitches/react/types/styled-component").StyledComponent<import("@stitches/react/types/styled-component").StyledComponent<"div", {
|
|
2
|
+
export declare const BannerContainer: import("@stitches/react/types/styled-component").StyledComponent<import("@stitches/react/types/styled-component").StyledComponent<"div", {
|
|
3
|
+
direction?: "inherit" | "initial" | "revert" | "unset" | "row" | "column" | "column-reverse" | "row-reverse" | "revert-layer" | undefined;
|
|
4
|
+
wrap?: "inherit" | "initial" | "revert" | "unset" | "nowrap" | "wrap" | "wrap-reverse" | "revert-layer" | undefined;
|
|
5
|
+
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;
|
|
6
|
+
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;
|
|
7
|
+
gap?: number | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "24" | undefined;
|
|
8
|
+
}, {
|
|
3
9
|
sm: string;
|
|
4
10
|
md: string;
|
|
5
11
|
lg: string;
|
|
@@ -970,7 +970,13 @@ declare const ChipContent: ({ children, ...rest }: {
|
|
|
970
970
|
[x: string]: any;
|
|
971
971
|
children: any;
|
|
972
972
|
}) => JSX.Element;
|
|
973
|
-
export declare const StyledRoot: import("@stitches/react/types/styled-component").StyledComponent<import("@stitches/react/types/styled-component").StyledComponent<"div", {
|
|
973
|
+
export declare const StyledRoot: import("@stitches/react/types/styled-component").StyledComponent<import("@stitches/react/types/styled-component").StyledComponent<"div", {
|
|
974
|
+
direction?: "inherit" | "initial" | "revert" | "unset" | "row" | "column" | "column-reverse" | "row-reverse" | "revert-layer" | undefined;
|
|
975
|
+
wrap?: "inherit" | "initial" | "revert" | "unset" | "nowrap" | "wrap" | "wrap-reverse" | "revert-layer" | undefined;
|
|
976
|
+
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;
|
|
977
|
+
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;
|
|
978
|
+
gap?: number | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "24" | undefined;
|
|
979
|
+
}, {
|
|
974
980
|
sm: string;
|
|
975
981
|
md: string;
|
|
976
982
|
lg: string;
|
|
@@ -1613,7 +1619,13 @@ export declare type TChipRootContext = React.ComponentProps<typeof StyledRoot>;
|
|
|
1613
1619
|
export declare type TChipRootProviderProps = TChipRootContext;
|
|
1614
1620
|
export declare const ChipRootContext: React.Context<Omit<Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
|
|
1615
1621
|
ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
|
|
1616
|
-
}, "css"> & import("@stitches/react/types/styled-component").TransformProps<{
|
|
1622
|
+
}, "direction" | "gap" | "css" | "wrap" | "justify" | "align"> & import("@stitches/react/types/styled-component").TransformProps<{
|
|
1623
|
+
direction?: "inherit" | "initial" | "revert" | "unset" | "row" | "column" | "column-reverse" | "row-reverse" | "revert-layer" | undefined;
|
|
1624
|
+
wrap?: "inherit" | "initial" | "revert" | "unset" | "nowrap" | "wrap" | "wrap-reverse" | "revert-layer" | undefined;
|
|
1625
|
+
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;
|
|
1626
|
+
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;
|
|
1627
|
+
gap?: number | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "24" | undefined;
|
|
1628
|
+
}, {
|
|
1617
1629
|
sm: string;
|
|
1618
1630
|
md: string;
|
|
1619
1631
|
lg: string;
|
|
@@ -2,7 +2,13 @@ import * as React from 'react';
|
|
|
2
2
|
import { DismissibleGroup } from '../../components/dismissible-group';
|
|
3
3
|
declare const StyledChipDismissibleGroupItem: import("@stitches/react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<Omit<Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
|
|
4
4
|
ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
|
|
5
|
-
}, "css"> & import("@stitches/react/types/styled-component").TransformProps<{
|
|
5
|
+
}, "direction" | "gap" | "css" | "wrap" | "justify" | "align"> & import("@stitches/react/types/styled-component").TransformProps<{
|
|
6
|
+
direction?: "inherit" | "initial" | "revert" | "unset" | "row" | "column" | "column-reverse" | "row-reverse" | "revert-layer" | undefined;
|
|
7
|
+
wrap?: "inherit" | "initial" | "revert" | "unset" | "nowrap" | "wrap" | "wrap-reverse" | "revert-layer" | undefined;
|
|
8
|
+
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;
|
|
9
|
+
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;
|
|
10
|
+
gap?: number | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "24" | undefined;
|
|
11
|
+
}, {
|
|
6
12
|
sm: string;
|
|
7
13
|
md: string;
|
|
8
14
|
lg: string;
|
|
@@ -2,7 +2,13 @@ import * as ToggleGroup from '@radix-ui/react-toggle-group';
|
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
declare const StyledChipToggleGroupItem: import("@stitches/react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<Omit<Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
|
|
4
4
|
ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
|
|
5
|
-
}, "css"> & import("@stitches/react/types/styled-component").TransformProps<{
|
|
5
|
+
}, "direction" | "gap" | "css" | "wrap" | "justify" | "align"> & import("@stitches/react/types/styled-component").TransformProps<{
|
|
6
|
+
direction?: "inherit" | "initial" | "revert" | "unset" | "row" | "column" | "column-reverse" | "row-reverse" | "revert-layer" | undefined;
|
|
7
|
+
wrap?: "inherit" | "initial" | "revert" | "unset" | "nowrap" | "wrap" | "wrap-reverse" | "revert-layer" | undefined;
|
|
8
|
+
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;
|
|
9
|
+
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;
|
|
10
|
+
gap?: number | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "24" | undefined;
|
|
11
|
+
}, {
|
|
6
12
|
sm: string;
|
|
7
13
|
md: string;
|
|
8
14
|
lg: string;
|
|
@@ -2,7 +2,13 @@ import * as React from 'react';
|
|
|
2
2
|
import { EmptyStateBody } from './EmptyStateBody';
|
|
3
3
|
import { EmptyStateImage } from './EmptyStateImage';
|
|
4
4
|
import { EmptyStateTitle } from './EmptyStateTitle';
|
|
5
|
-
declare const EmptyStateContainer: import("@stitches/react/types/styled-component").StyledComponent<import("@stitches/react/types/styled-component").StyledComponent<"div", {
|
|
5
|
+
declare const EmptyStateContainer: import("@stitches/react/types/styled-component").StyledComponent<import("@stitches/react/types/styled-component").StyledComponent<"div", {
|
|
6
|
+
direction?: "inherit" | "initial" | "revert" | "unset" | "row" | "column" | "column-reverse" | "row-reverse" | "revert-layer" | undefined;
|
|
7
|
+
wrap?: "inherit" | "initial" | "revert" | "unset" | "nowrap" | "wrap" | "wrap-reverse" | "revert-layer" | undefined;
|
|
8
|
+
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;
|
|
9
|
+
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;
|
|
10
|
+
gap?: number | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "24" | undefined;
|
|
11
|
+
}, {
|
|
6
12
|
sm: string;
|
|
7
13
|
md: string;
|
|
8
14
|
lg: string;
|
|
@@ -1,4 +1,10 @@
|
|
|
1
|
-
export declare const Flex: import("@stitches/react/types/styled-component").StyledComponent<"div", {
|
|
1
|
+
export declare const Flex: import("@stitches/react/types/styled-component").StyledComponent<"div", {
|
|
2
|
+
direction?: "inherit" | "initial" | "revert" | "unset" | "row" | "column" | "column-reverse" | "row-reverse" | "revert-layer" | undefined;
|
|
3
|
+
wrap?: "inherit" | "initial" | "revert" | "unset" | "nowrap" | "wrap" | "wrap-reverse" | "revert-layer" | undefined;
|
|
4
|
+
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;
|
|
5
|
+
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;
|
|
6
|
+
gap?: number | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "24" | undefined;
|
|
7
|
+
}, {
|
|
2
8
|
sm: string;
|
|
3
9
|
md: string;
|
|
4
10
|
lg: string;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{styled as l}from"../../stitches.js";const e=l("div",{display:"flex"});
|
|
1
|
+
import{styled as l}from"../../stitches.js";import{createThemeVariants as o}from"../../utilities/create-theme-variants/createThemeVariants.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import"../../utilities/style/keyframe-animations.js";const r=(e,n)=>e.reduce((i,a)=>({...i,[a]:n(a)}),{}),t=["inherit","initial","revert","revert-layer","unset"],s=l("div",{display:"flex",variants:{direction:r([...t,"row","row-reverse","column","column-reverse"],e=>({flexDirection:e})),wrap:r([...t,"nowrap","wrap","wrap-reverse"],e=>({flexWrap:e})),justify:r([...t,"normal","unsafe","safe","start","center","end","flex-start","flex-end","left","right","space-between","space-around","space-evenly","stretch"],e=>({justifyContent:e})),align:r([...t,"normal","unsafe","safe","center","start","end","self-start","self-end","flex-start","flex-end","baseline","first baseline","last baseline","stretch"],e=>({alignItems:e})),gap:o("space",{gap:"$key"})}});s.displayName="Flex";export{s as Flex};
|
|
2
2
|
//# sourceMappingURL=Flex.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Flex.js","sources":["../../../src/components/flex/Flex.tsx"],"sourcesContent":["import { styled } from '~/stitches'\n\nexport const Flex = styled('div', {
|
|
1
|
+
{"version":3,"file":"Flex.js","sources":["../../../src/components/flex/Flex.tsx"],"sourcesContent":["import { CSS, styled } from '~/stitches'\nimport { createThemeVariants } from '~/utilities'\n\nconst createVariants = <T extends GlobalValue[]>(\n variants: T,\n fn: (string: T[number]) => CSS\n) => {\n return variants.reduce(\n (prev, variant) => ({ ...prev, [variant]: fn(variant) }),\n {} as Record<T[number], CSS>\n )\n}\n\nconst globalValues = [\n 'inherit',\n 'initial',\n 'revert',\n 'revert-layer',\n 'unset'\n] as const\n\n/*\n * The following type is partially a hack to get the rest of the createVariants array parameter to be recognised as const.\n * Thus giving is the correct types generated for these generated variant props.\n * No clue how we can do it cleaner.\n * Mad props to: Elliot for getting this to working as is.\n *\n */\n// eslint-disable-next-line @typescript-eslint/ban-types\ntype GlobalValue = typeof globalValues[number] | (string & {})\n\nexport const Flex = styled('div', {\n display: 'flex',\n variants: {\n direction: createVariants(\n [...globalValues, 'row', 'row-reverse', 'column', 'column-reverse'],\n (v) => {\n return { flexDirection: v }\n }\n ),\n wrap: createVariants(\n [...globalValues, 'nowrap', 'wrap', 'wrap-reverse'],\n (v) => {\n return { flexWrap: v }\n }\n ),\n // Why is both `start` and `flex-start` valid values? Answer: https://csslayout.news/whats-the-difference-between-the-alignment-values-of-start-flex-start-and-self-start/\n justify: createVariants(\n [\n ...globalValues,\n 'normal',\n 'unsafe',\n 'safe',\n 'start',\n 'center',\n 'end',\n 'flex-start',\n 'flex-end',\n 'left',\n 'right',\n 'space-between',\n 'space-around',\n 'space-evenly',\n 'stretch'\n ],\n (v) => {\n return { justifyContent: v }\n }\n ),\n align: createVariants(\n [\n ...globalValues,\n 'normal',\n 'unsafe',\n 'safe',\n 'center',\n 'start',\n 'end',\n 'self-start',\n 'self-end',\n 'flex-start',\n 'flex-end',\n 'baseline',\n 'first baseline',\n 'last baseline',\n 'stretch'\n ],\n (v) => {\n return { alignItems: v }\n }\n ),\n gap: createThemeVariants('space', { gap: '$key' })\n }\n})\n\nFlex.displayName = 'Flex'\n"],"names":["createVariants","variants","fn","prev","variant","globalValues","Flex","styled","v","createThemeVariants"],"mappings":"sUAGA,MAAMA,EAAiB,CACrBC,EACAC,IAEOD,EAAS,OACd,CAACE,EAAMC,KAAa,CAAE,GAAGD,EAAM,CAACC,GAAUF,EAAGE,CAAO,CAAE,GACtD,CAAA,CACF,EAGIC,EAAe,CACnB,UACA,UACA,SACA,eACA,OACF,EAYaC,EAAOC,EAAO,MAAO,CAChC,QAAS,OACT,SAAU,CACR,UAAWP,EACT,CAAC,GAAGK,EAAc,MAAO,cAAe,SAAU,gBAAgB,EACjEG,IACQ,CAAE,cAAeA,CAAE,EAE9B,EACA,KAAMR,EACJ,CAAC,GAAGK,EAAc,SAAU,OAAQ,cAAc,EACjDG,IACQ,CAAE,SAAUA,CAAE,EAEzB,EAEA,QAASR,EACP,CACE,GAAGK,EACH,SACA,SACA,OACA,QACA,SACA,MACA,aACA,WACA,OACA,QACA,gBACA,eACA,eACA,SACF,EACCG,IACQ,CAAE,eAAgBA,CAAE,EAE/B,EACA,MAAOR,EACL,CACE,GAAGK,EACH,SACA,SACA,OACA,SACA,QACA,MACA,aACA,WACA,aACA,WACA,WACA,iBACA,gBACA,SACF,EACCG,IACQ,CAAE,WAAYA,CAAE,EAE3B,EACA,IAAKC,EAAoB,QAAS,CAAE,IAAK,MAAO,CAAC,CACnD,CACF,CAAC,EAEDH,EAAK,YAAc"}
|
|
@@ -1,6 +1,12 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { InlineMessageTheme } from './InlineMessage.types';
|
|
3
|
-
declare const InlineMessageContainer: import("@stitches/react/types/styled-component").StyledComponent<import("@stitches/react/types/styled-component").StyledComponent<"div", {
|
|
3
|
+
declare const InlineMessageContainer: import("@stitches/react/types/styled-component").StyledComponent<import("@stitches/react/types/styled-component").StyledComponent<"div", {
|
|
4
|
+
direction?: "inherit" | "initial" | "revert" | "unset" | "row" | "column" | "column-reverse" | "row-reverse" | "revert-layer" | undefined;
|
|
5
|
+
wrap?: "inherit" | "initial" | "revert" | "unset" | "nowrap" | "wrap" | "wrap-reverse" | "revert-layer" | undefined;
|
|
6
|
+
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;
|
|
7
|
+
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;
|
|
8
|
+
gap?: number | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "24" | undefined;
|
|
9
|
+
}, {
|
|
4
10
|
sm: string;
|
|
5
11
|
md: string;
|
|
6
12
|
lg: string;
|
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
declare const StyledBadge: import("@stitches/react/types/styled-component").StyledComponent<import("@stitches/react/types/styled-component").StyledComponent<"div", {
|
|
2
|
+
declare const StyledBadge: import("@stitches/react/types/styled-component").StyledComponent<import("@stitches/react/types/styled-component").StyledComponent<"div", {
|
|
3
|
+
direction?: "inherit" | "initial" | "revert" | "unset" | "row" | "column" | "column-reverse" | "row-reverse" | "revert-layer" | undefined;
|
|
4
|
+
wrap?: "inherit" | "initial" | "revert" | "unset" | "nowrap" | "wrap" | "wrap-reverse" | "revert-layer" | undefined;
|
|
5
|
+
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;
|
|
6
|
+
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;
|
|
7
|
+
gap?: number | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "24" | undefined;
|
|
8
|
+
}, {
|
|
3
9
|
sm: string;
|
|
4
10
|
md: string;
|
|
5
11
|
lg: string;
|
|
@@ -329,5 +329,8 @@ declare type StackPropsType = React.ComponentProps<typeof StyledStack> & {
|
|
|
329
329
|
css?: CSS;
|
|
330
330
|
as?: any;
|
|
331
331
|
};
|
|
332
|
+
/**
|
|
333
|
+
* @deprecated Stack is being deprecated. Use Flex instead!
|
|
334
|
+
*/
|
|
332
335
|
export declare const Stack: React.ForwardRefExoticComponent<StackPropsType>;
|
|
333
336
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Stack.js","sources":["../../../src/components/stack/Stack.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { CSS, styled } from '~/stitches'\nimport { createThemeVariants } from '~/utilities'\nimport { CSSWrapper } from '~/utilities/css-wrapper'\n\nconst StyledStack = styled('div', {\n display: 'flex',\n '& > *': {\n m: 0\n },\n variants: {\n direction: {\n row: {\n flexDirection: 'row'\n },\n 'row-reverse': {\n flexDirection: 'row-reverse'\n },\n column: {\n flexDirection: 'column'\n }\n },\n wrap: {\n wrap: {\n flexWrap: 'wrap'\n },\n 'no-wrap': {\n flexWrap: 'no-wrap'\n },\n 'wrap-reverse': {\n flexWrap: 'wrap-reverse'\n }\n },\n justify: {\n start: { justifyContent: 'flex-start' },\n center: { justifyContent: 'center' },\n end: { justifyContent: 'flex-end' },\n false: {}\n },\n align: {\n start: { alignItems: 'flex-start' },\n center: { alignItems: 'center' },\n end: { alignItems: 'flex-end' },\n false: {}\n },\n gap: {\n ...createThemeVariants('space', {\n mt: '-$key',\n ml: '-$key',\n '& > *': {\n mt: '$key',\n ml: '$key'\n }\n }),\n false: {}\n }\n }\n})\n\ntype StackPropsType = React.ComponentProps<typeof StyledStack> & {\n css?: CSS\n as?: any\n} // (!) `css` and `as` are both props that come from `stitches`. It would be better to figure out and export the appropriate type for them in stitches!\n\nexport const Stack: React.ForwardRefExoticComponent<StackPropsType> =\n React.forwardRef(\n (\n {\n css,\n gap = 2,\n direction = 'row',\n wrap = 'wrap',\n justify = 'start',\n align,\n ...remainingProps\n },\n ref\n ) => {\n return (\n <CSSWrapper css={css}>\n <StyledStack\n ref={ref}\n direction={direction}\n gap={gap}\n wrap={wrap}\n justify={justify}\n align={\n typeof align === 'undefined' && direction !== 'column'\n ? 'center'\n : align\n }\n {...remainingProps}\n />\n </CSSWrapper>\n )\n }\n )\n\nStack.displayName = 'Stack'\n"],"names":["StyledStack","styled","createThemeVariants","Stack","React","css","gap","direction","wrap","justify","align","remainingProps","ref","CSSWrapper"],"mappings":"mXAMA,MAAMA,EAAcC,EAAO,MAAO,CAChC,QAAS,OACT,QAAS,CACP,EAAG,CACL,EACA,SAAU,CACR,UAAW,CACT,IAAK,CACH,cAAe,KACjB,EACA,cAAe,CACb,cAAe,aACjB,EACA,OAAQ,CACN,cAAe,QACjB,CACF,EACA,KAAM,CACJ,KAAM,CACJ,SAAU,MACZ,EACA,UAAW,CACT,SAAU,SACZ,EACA,eAAgB,CACd,SAAU,cACZ,CACF,EACA,QAAS,CACP,MAAO,CAAE,eAAgB,YAAa,EACtC,OAAQ,CAAE,eAAgB,QAAS,EACnC,IAAK,CAAE,eAAgB,UAAW,EAClC,MAAO,CACT,CAAA,EACA,MAAO,CACL,MAAO,CAAE,WAAY,YAAa,EAClC,OAAQ,CAAE,WAAY,QAAS,EAC/B,IAAK,CAAE,WAAY,UAAW,EAC9B,MAAO,CACT,CAAA,EACA,IAAK,CACH,GAAGC,EAAoB,QAAS,CAC9B,GAAI,QACJ,GAAI,QACJ,QAAS,CACP,GAAI,OACJ,GAAI,MACN,CACF,CAAC,EACD,MAAO,EACT,CACF,CACF,CAAC,
|
|
1
|
+
{"version":3,"file":"Stack.js","sources":["../../../src/components/stack/Stack.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { CSS, styled } from '~/stitches'\nimport { createThemeVariants } from '~/utilities'\nimport { CSSWrapper } from '~/utilities/css-wrapper'\n\nconst StyledStack = styled('div', {\n display: 'flex',\n '& > *': {\n m: 0\n },\n variants: {\n direction: {\n row: {\n flexDirection: 'row'\n },\n 'row-reverse': {\n flexDirection: 'row-reverse'\n },\n column: {\n flexDirection: 'column'\n }\n },\n wrap: {\n wrap: {\n flexWrap: 'wrap'\n },\n 'no-wrap': {\n flexWrap: 'no-wrap'\n },\n 'wrap-reverse': {\n flexWrap: 'wrap-reverse'\n }\n },\n justify: {\n start: { justifyContent: 'flex-start' },\n center: { justifyContent: 'center' },\n end: { justifyContent: 'flex-end' },\n false: {}\n },\n align: {\n start: { alignItems: 'flex-start' },\n center: { alignItems: 'center' },\n end: { alignItems: 'flex-end' },\n false: {}\n },\n gap: {\n ...createThemeVariants('space', {\n mt: '-$key',\n ml: '-$key',\n '& > *': {\n mt: '$key',\n ml: '$key'\n }\n }),\n false: {}\n }\n }\n})\n\ntype StackPropsType = React.ComponentProps<typeof StyledStack> & {\n css?: CSS\n as?: any\n} // (!) `css` and `as` are both props that come from `stitches`. It would be better to figure out and export the appropriate type for them in stitches!\n\n/**\n * @deprecated Stack is being deprecated. Use Flex instead!\n */\nexport const Stack: React.ForwardRefExoticComponent<StackPropsType> =\n React.forwardRef(\n (\n {\n css,\n gap = 2,\n direction = 'row',\n wrap = 'wrap',\n justify = 'start',\n align,\n ...remainingProps\n },\n ref\n ) => {\n return (\n <CSSWrapper css={css}>\n <StyledStack\n ref={ref}\n direction={direction}\n gap={gap}\n wrap={wrap}\n justify={justify}\n align={\n typeof align === 'undefined' && direction !== 'column'\n ? 'center'\n : align\n }\n {...remainingProps}\n />\n </CSSWrapper>\n )\n }\n )\n\nStack.displayName = 'Stack'\n"],"names":["StyledStack","styled","createThemeVariants","Stack","React","css","gap","direction","wrap","justify","align","remainingProps","ref","CSSWrapper"],"mappings":"mXAMA,MAAMA,EAAcC,EAAO,MAAO,CAChC,QAAS,OACT,QAAS,CACP,EAAG,CACL,EACA,SAAU,CACR,UAAW,CACT,IAAK,CACH,cAAe,KACjB,EACA,cAAe,CACb,cAAe,aACjB,EACA,OAAQ,CACN,cAAe,QACjB,CACF,EACA,KAAM,CACJ,KAAM,CACJ,SAAU,MACZ,EACA,UAAW,CACT,SAAU,SACZ,EACA,eAAgB,CACd,SAAU,cACZ,CACF,EACA,QAAS,CACP,MAAO,CAAE,eAAgB,YAAa,EACtC,OAAQ,CAAE,eAAgB,QAAS,EACnC,IAAK,CAAE,eAAgB,UAAW,EAClC,MAAO,CACT,CAAA,EACA,MAAO,CACL,MAAO,CAAE,WAAY,YAAa,EAClC,OAAQ,CAAE,WAAY,QAAS,EAC/B,IAAK,CAAE,WAAY,UAAW,EAC9B,MAAO,CACT,CAAA,EACA,IAAK,CACH,GAAGC,EAAoB,QAAS,CAC9B,GAAI,QACJ,GAAI,QACJ,QAAS,CACP,GAAI,OACJ,GAAI,MACN,CACF,CAAC,EACD,MAAO,EACT,CACF,CACF,CAAC,EAUYC,EACXC,EAAM,WACJ,CACE,CACE,IAAAC,EACA,IAAAC,EAAM,EACN,UAAAC,EAAY,MACZ,KAAAC,EAAO,OACP,QAAAC,EAAU,QACV,MAAAC,KACGC,CACL,EACAC,IAGER,EAAA,cAACS,EAAA,CAAW,IAAKR,GACfD,EAAA,cAACJ,EAAA,CACC,IAAKY,EACL,UAAWL,EACX,IAAKD,EACL,KAAME,EACN,QAASC,EACT,MACE,OAAOC,EAAU,KAAeH,IAAc,SAC1C,SACAG,EAEL,GAAGC,EACN,CACF,CAGN,EAEFR,EAAM,YAAc"}
|
|
@@ -1,4 +1,10 @@
|
|
|
1
|
-
export declare const StepperStepBullet: import("@stitches/react/types/styled-component").StyledComponent<import("@stitches/react/types/styled-component").StyledComponent<"div", {
|
|
1
|
+
export declare const StepperStepBullet: import("@stitches/react/types/styled-component").StyledComponent<import("@stitches/react/types/styled-component").StyledComponent<"div", {
|
|
2
|
+
direction?: "inherit" | "initial" | "revert" | "unset" | "row" | "column" | "column-reverse" | "row-reverse" | "revert-layer" | undefined;
|
|
3
|
+
wrap?: "inherit" | "initial" | "revert" | "unset" | "nowrap" | "wrap" | "wrap-reverse" | "revert-layer" | undefined;
|
|
4
|
+
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;
|
|
5
|
+
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;
|
|
6
|
+
gap?: number | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "24" | undefined;
|
|
7
|
+
}, {
|
|
2
8
|
sm: string;
|
|
3
9
|
md: string;
|
|
4
10
|
lg: string;
|
|
@@ -1,4 +1,10 @@
|
|
|
1
|
-
export declare const StepperStepContainer: import("@stitches/react/types/styled-component").StyledComponent<import("@stitches/react/types/styled-component").StyledComponent<"div", {
|
|
1
|
+
export declare const StepperStepContainer: import("@stitches/react/types/styled-component").StyledComponent<import("@stitches/react/types/styled-component").StyledComponent<"div", {
|
|
2
|
+
direction?: "inherit" | "initial" | "revert" | "unset" | "row" | "column" | "column-reverse" | "row-reverse" | "revert-layer" | undefined;
|
|
3
|
+
wrap?: "inherit" | "initial" | "revert" | "unset" | "nowrap" | "wrap" | "wrap-reverse" | "revert-layer" | undefined;
|
|
4
|
+
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;
|
|
5
|
+
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;
|
|
6
|
+
gap?: number | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "24" | undefined;
|
|
7
|
+
}, {
|
|
2
8
|
sm: string;
|
|
3
9
|
md: string;
|
|
4
10
|
lg: string;
|