@obosbbl/grunnmuren-react 1.14.11 → 2.0.0-canary.1

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.
Files changed (123) hide show
  1. package/LICENSE +1 -1
  2. package/README.md +14 -32
  3. package/dist/button/Button.d.mts +83 -0
  4. package/dist/button/Button.d.ts +83 -0
  5. package/dist/button/Button.mjs +149 -0
  6. package/dist/checkbox/index.d.mts +32 -0
  7. package/dist/checkbox/index.d.ts +32 -0
  8. package/dist/checkbox/index.mjs +106 -0
  9. package/dist/label/index.d.mts +13 -0
  10. package/dist/label/index.d.ts +13 -0
  11. package/dist/label/index.mjs +45 -0
  12. package/dist/radiogroup/index.d.mts +30 -0
  13. package/dist/radiogroup/index.d.ts +30 -0
  14. package/dist/radiogroup/index.mjs +65 -0
  15. package/dist/textfield/index.d.mts +31 -0
  16. package/dist/textfield/index.d.ts +31 -0
  17. package/dist/textfield/index.mjs +88 -0
  18. package/package.json +43 -44
  19. package/dist/Accordion/Accordion.d.ts +0 -27
  20. package/dist/Accordion/index.d.ts +0 -1
  21. package/dist/Accordion/stories/Accordion.stories.d.ts +0 -9
  22. package/dist/Alert/Alert.d.ts +0 -9
  23. package/dist/Alert/index.d.ts +0 -1
  24. package/dist/Alert/stories/Alert.stories.d.ts +0 -5
  25. package/dist/Banner/Banner.d.ts +0 -11
  26. package/dist/Banner/BannerImage.d.ts +0 -6
  27. package/dist/Banner/index.d.ts +0 -2
  28. package/dist/Banner/stories/Banner.stories.d.ts +0 -5
  29. package/dist/Button/Button.d.ts +0 -16
  30. package/dist/Button/ButtonColorContext.d.ts +0 -3
  31. package/dist/Button/index.d.ts +0 -2
  32. package/dist/Button/stories/Button.stories.d.ts +0 -31
  33. package/dist/Campaign/Campaign.d.ts +0 -26
  34. package/dist/Campaign/index.d.ts +0 -1
  35. package/dist/Campaign/stories/Campaign.stories.d.ts +0 -9
  36. package/dist/Card/Card.d.ts +0 -8
  37. package/dist/Card/CardContent.d.ts +0 -5
  38. package/dist/Card/CardImage.d.ts +0 -7
  39. package/dist/Card/CardLinkOverlay.d.ts +0 -4
  40. package/dist/Card/CardList.d.ts +0 -7
  41. package/dist/Card/index.d.ts +0 -5
  42. package/dist/Card/stories/Card.stories.d.ts +0 -34
  43. package/dist/Checkbox/Checkbox.d.ts +0 -13
  44. package/dist/Checkbox/index.d.ts +0 -1
  45. package/dist/Checkbox/stories/Checkbox.stories.d.ts +0 -8
  46. package/dist/Chip/Chip.d.ts +0 -10
  47. package/dist/Chip/index.d.ts +0 -1
  48. package/dist/Chip/stories/Chip.stories.d.ts +0 -5
  49. package/dist/Footer/Footer.d.ts +0 -7
  50. package/dist/Footer/index.d.ts +0 -1
  51. package/dist/Footer/stories/Footer.stories.d.ts +0 -5
  52. package/dist/Form/Form.d.ts +0 -9
  53. package/dist/Form/FormError.d.ts +0 -4
  54. package/dist/Form/FormErrorMessage.d.ts +0 -5
  55. package/dist/Form/FormHelperText.d.ts +0 -5
  56. package/dist/Form/FormLabel.d.ts +0 -7
  57. package/dist/Form/FormSuccess.d.ts +0 -6
  58. package/dist/Form/MultiStep/FormStep.d.ts +0 -17
  59. package/dist/Form/MultiStep/FormStepContext.d.ts +0 -20
  60. package/dist/Form/MultiStep/FormStepHeader.d.ts +0 -18
  61. package/dist/Form/MultiStep/index.d.ts +0 -3
  62. package/dist/Form/index.d.ts +0 -7
  63. package/dist/Form/stories/Form.stories.d.ts +0 -14
  64. package/dist/Hero/Hero.d.ts +0 -21
  65. package/dist/Hero/HeroActions.d.ts +0 -7
  66. package/dist/Hero/HeroContent.d.ts +0 -9
  67. package/dist/Hero/HeroImage.d.ts +0 -9
  68. package/dist/Hero/index.d.ts +0 -4
  69. package/dist/Hero/stories/Hero.stories.d.ts +0 -33
  70. package/dist/Hero/utils.d.ts +0 -2
  71. package/dist/Input/Input.d.ts +0 -11
  72. package/dist/Input/index.d.ts +0 -1
  73. package/dist/Input/stories/Input.stories.d.ts +0 -8
  74. package/dist/Link/Link.d.ts +0 -8
  75. package/dist/Link/index.d.ts +0 -1
  76. package/dist/Navbar/Navbar.d.ts +0 -6
  77. package/dist/Navbar/NavbarCollapsible.d.ts +0 -6
  78. package/dist/Navbar/NavbarContent.d.ts +0 -7
  79. package/dist/Navbar/NavbarContext.d.ts +0 -6
  80. package/dist/Navbar/NavbarExpandedMobileContent.d.ts +0 -9
  81. package/dist/Navbar/NavbarItem.d.ts +0 -7
  82. package/dist/Navbar/NavbarItems.d.ts +0 -6
  83. package/dist/Navbar/NavbarMenuButton.d.ts +0 -4
  84. package/dist/Navbar/index.d.ts +0 -6
  85. package/dist/Navbar/stories/Navbar.stories.d.ts +0 -5
  86. package/dist/Pagination/Pagination.d.ts +0 -23
  87. package/dist/Pagination/index.d.ts +0 -1
  88. package/dist/Pagination/stories/Pagination.stories.d.ts +0 -24
  89. package/dist/Radio/Radio.d.ts +0 -5
  90. package/dist/Radio/RadioContext.d.ts +0 -10
  91. package/dist/Radio/RadioGroup.d.ts +0 -20
  92. package/dist/Radio/index.d.ts +0 -2
  93. package/dist/Radio/stories/Radio.stories.d.ts +0 -12
  94. package/dist/Select/Select.d.ts +0 -21
  95. package/dist/Select/SelectPlain.d.ts +0 -15
  96. package/dist/Select/index.d.ts +0 -1
  97. package/dist/Select/stories/Select.stories.d.ts +0 -26
  98. package/dist/Snackbar/Snackbar.d.ts +0 -8
  99. package/dist/Snackbar/SnackbarButton.d.ts +0 -6
  100. package/dist/Snackbar/SnackbarContent.d.ts +0 -5
  101. package/dist/Snackbar/index.d.ts +0 -3
  102. package/dist/Snackbar/stories/Snackbar.stories.d.ts +0 -9
  103. package/dist/StepList/StepList.d.ts +0 -25
  104. package/dist/StepList/index.d.ts +0 -1
  105. package/dist/StepList/stories/StepList.stories.d.ts +0 -19
  106. package/dist/TextArea/TextArea.d.ts +0 -15
  107. package/dist/TextArea/index.d.ts +0 -1
  108. package/dist/TextArea/stories/TextArea.stories.d.ts +0 -8
  109. package/dist/TextField/TextField.d.ts +0 -19
  110. package/dist/TextField/index.d.ts +0 -1
  111. package/dist/TextField/stories/TextField.stories.d.ts +0 -9
  112. package/dist/__stories__/Icon.stories.d.ts +0 -8
  113. package/dist/__stories__/PageLayout.stories.d.ts +0 -5
  114. package/dist/__stories__/Typography.stories.d.ts +0 -9
  115. package/dist/grunnmuren.mjs +0 -1551
  116. package/dist/hooks/index.d.ts +0 -5
  117. package/dist/hooks/useBlockBackgroundColor.d.ts +0 -2
  118. package/dist/hooks/useFallbackId.d.ts +0 -4
  119. package/dist/hooks/useFormControlValidity.d.ts +0 -15
  120. package/dist/hooks/usePrefersReducedMotion.d.ts +0 -1
  121. package/dist/hooks/useScreenMaxWidthMd.d.ts +0 -1
  122. package/dist/index.d.ts +0 -22
  123. package/dist/utils/index.d.ts +0 -2
@@ -0,0 +1,30 @@
1
+ import * as react_jsx_runtime from 'react/jsx-runtime';
2
+ import { RadioGroupProps as RadioGroupProps$1, RadioProps as RadioProps$1 } from 'react-aria-components';
3
+
4
+ type RadioGroupProps = {
5
+ children: React.ReactNode;
6
+ /** Additional CSS className for the element. */
7
+ className?: string;
8
+ /** Help text for the form control. */
9
+ description?: React.ReactNode;
10
+ /** Error message for the form control. Automatically sets `isInvalid` to true */
11
+ errorMessage?: React.ReactNode;
12
+ /** Label for the form control. */
13
+ label?: React.ReactNode;
14
+ /** Additional style properties for the element. */
15
+ style?: React.CSSProperties;
16
+ } & Omit<RadioGroupProps$1, 'className' | 'isReadOnly' | 'isDisabled' | 'children' | 'style' | 'orientation'>;
17
+ declare function RadioGroup(props: RadioGroupProps): react_jsx_runtime.JSX.Element;
18
+
19
+ type RadioProps = {
20
+ children: React.ReactNode;
21
+ /** Additional CSS className for the element. */
22
+ className?: string;
23
+ /** Help text for the form control. */
24
+ description?: React.ReactNode;
25
+ /** Additional style properties for the element. */
26
+ style?: React.CSSProperties;
27
+ } & Omit<RadioProps$1, 'isDisabled' | 'children' | 'style'>;
28
+ declare function Radio(props: RadioProps): react_jsx_runtime.JSX.Element;
29
+
30
+ export { Radio, RadioGroup, type RadioGroupProps, type RadioProps };
@@ -0,0 +1,65 @@
1
+ import { jsxs, jsx } from 'react/jsx-runtime';
2
+ import { cx } from 'cva';
3
+ import { RadioGroup as RadioGroup$1, Radio as Radio$1 } from 'react-aria-components';
4
+ import { Label, Description, ErrorMessage } from '../label/index.mjs';
5
+
6
+ function RadioGroup(props) {
7
+ const {
8
+ children,
9
+ className,
10
+ description,
11
+ errorMessage,
12
+ label,
13
+ isRequired,
14
+ isInvalid: _isInvalid,
15
+ ...restProps
16
+ } = props;
17
+ const isInvalid = _isInvalid || errorMessage != null;
18
+ return /* @__PURE__ */ jsxs(
19
+ RadioGroup$1,
20
+ {
21
+ ...restProps,
22
+ className: cx(className, "flex flex-col gap-2"),
23
+ isInvalid,
24
+ isRequired,
25
+ children: [
26
+ label && /* @__PURE__ */ jsx(Label, { children: label }),
27
+ description && /* @__PURE__ */ jsx(Description, { children: description }),
28
+ children,
29
+ errorMessage && /* @__PURE__ */ jsx(ErrorMessage, { children: errorMessage })
30
+ ]
31
+ }
32
+ );
33
+ }
34
+
35
+ const defaultClasses = cx([
36
+ "relative inline-flex max-w-fit cursor-pointer items-start gap-4 py-2 leading-7",
37
+ // the radio button itself
38
+ "before:flex-none before:rounded-full before:border-2 before:border-black",
39
+ // to vertically align the radio we need to calculate the label's height, which is equal to it's font size multiplied by the line height.
40
+ // For the ::before psuedo element the line height of the label is always 1em.
41
+ // When we know the height of the label we use the height of the radio to push it down to align with the label's first line
42
+ // TODO: 1.75 here is the unit less lineheight, altough we use 1.75rem as the line height, so there is a mismatch here. Revisit this when we've worked on typography in v2. Should this be a CSS custom property instead?
43
+ "before:mt-[calc((1em_*_1.75_-_24px)_/_2)] before:h-[24px] before:w-[24px]",
44
+ // selected
45
+ "data-[selected]:before:border-black data-[selected]:before:bg-green data-[selected]:before:shadow-[inset_0_0_0_4px_rgb(255,255,255)]",
46
+ // hover
47
+ "data-[hovered]:before:border-green data-[hovered]:before:bg-green-lightest data-[hovered]:data-[invalid]:before:bg-red-light",
48
+ // focus
49
+ "data-[focus-visible]:before:ring data-[focus-visible]:before:ring-black data-[focus-visible]:before:ring-offset-[9px]",
50
+ // invalid - The border is 1 px thicker when invalid. We don't actually want to change the border width, as that causes the element's size to change
51
+ // so we use an inner outline to artifically pad the border
52
+ "data-[invalid]:before:outline-solid data-[invalid]:before:border-red data-[invalid]:data-[selected]:before:!bg-red data-[invalid]:before:outline data-[invalid]:before:outline-[3px] data-[invalid]:before:outline-offset-[-3px] data-[invalid]:before:outline-red"
53
+ ]);
54
+ function Radio(props) {
55
+ const { children, className, description, ...restProps } = props;
56
+ return /* @__PURE__ */ jsxs(Radio$1, { ...restProps, className: cx(className, defaultClasses), children: [
57
+ /* @__PURE__ */ jsx("div", { className: "absolute -left-2.5 top-0 z-10 h-11 w-11 " }),
58
+ /* @__PURE__ */ jsxs("div", { children: [
59
+ children,
60
+ description && /* @__PURE__ */ jsx(Description, { className: "mt-2 block", children: description })
61
+ ] })
62
+ ] });
63
+ }
64
+
65
+ export { Radio, RadioGroup };
@@ -0,0 +1,31 @@
1
+ import * as react_jsx_runtime from 'react/jsx-runtime';
2
+ import { TextFieldProps as TextFieldProps$1 } from 'react-aria-components';
3
+
4
+ type TextFieldProps = {
5
+ /** Additional CSS className for the element. */
6
+ className?: string;
7
+ /** Help text for the form control. */
8
+ description?: React.ReactNode;
9
+ /** Error message for the form control. Automatically sets `isInvalid` to true */
10
+ errorMessage?: React.ReactNode;
11
+ /** Element to be rendered in the left side of the input. */
12
+ leftAddon?: React.ReactNode;
13
+ /** Label for the form control. */
14
+ label?: React.ReactNode;
15
+ /** Element to be rendered in the right side of the input. */
16
+ rightAddon?: React.ReactNode;
17
+ /** Placeholder text. Only visible when the input value is empty. */
18
+ placeholder?: string;
19
+ /**
20
+ * Text alignment of the input
21
+ * @default left
22
+ */
23
+ textAlign?: 'left' | 'right';
24
+ /** Additional style properties for the element. */
25
+ style?: React.CSSProperties;
26
+ /** Add a divider between the left/right addons and the input */
27
+ withAddonDivider?: boolean;
28
+ } & Omit<TextFieldProps$1, 'className' | 'isReadOnly' | 'isDisabled' | 'children' | 'style'>;
29
+ declare function TextField(props: TextFieldProps): react_jsx_runtime.JSX.Element;
30
+
31
+ export { TextField, type TextFieldProps };
@@ -0,0 +1,31 @@
1
+ import * as react_jsx_runtime from 'react/jsx-runtime';
2
+ import { TextFieldProps as TextFieldProps$1 } from 'react-aria-components';
3
+
4
+ type TextFieldProps = {
5
+ /** Additional CSS className for the element. */
6
+ className?: string;
7
+ /** Help text for the form control. */
8
+ description?: React.ReactNode;
9
+ /** Error message for the form control. Automatically sets `isInvalid` to true */
10
+ errorMessage?: React.ReactNode;
11
+ /** Element to be rendered in the left side of the input. */
12
+ leftAddon?: React.ReactNode;
13
+ /** Label for the form control. */
14
+ label?: React.ReactNode;
15
+ /** Element to be rendered in the right side of the input. */
16
+ rightAddon?: React.ReactNode;
17
+ /** Placeholder text. Only visible when the input value is empty. */
18
+ placeholder?: string;
19
+ /**
20
+ * Text alignment of the input
21
+ * @default left
22
+ */
23
+ textAlign?: 'left' | 'right';
24
+ /** Additional style properties for the element. */
25
+ style?: React.CSSProperties;
26
+ /** Add a divider between the left/right addons and the input */
27
+ withAddonDivider?: boolean;
28
+ } & Omit<TextFieldProps$1, 'className' | 'isReadOnly' | 'isDisabled' | 'children' | 'style'>;
29
+ declare function TextField(props: TextFieldProps): react_jsx_runtime.JSX.Element;
30
+
31
+ export { TextField, type TextFieldProps };
@@ -0,0 +1,88 @@
1
+ import { jsxs, jsx } from 'react/jsx-runtime';
2
+ import { cx, cva } from 'cva';
3
+ import { TextField as TextField$1, Input } from 'react-aria-components';
4
+ import { Label, Description, ErrorMessage } from '../label/index.mjs';
5
+
6
+ const classes = {
7
+ base: cx("group flex flex-col gap-2"),
8
+ inputWrapper: cva({
9
+ base: [
10
+ "relative inline-flex flex-row items-center rounded-md border border-black py-2.5 text-sm font-normal leading-6",
11
+ // prevent icons in addons from being flexed and affected by the text size of the input
12
+ "[&>svg]:flex-none [&>svg]:text-base",
13
+ // focus
14
+ "focus-within:ring-2 focus-within:ring-blue-dark",
15
+ // invalid
16
+ "group-data-[invalid]:border-red group-data-[invalid]:outline group-data-[invalid]:outline-1 group-data-[invalid]:outline-red"
17
+ ],
18
+ variants: {
19
+ leftAddon: {
20
+ true: "pl-3"
21
+ },
22
+ rightAddon: {
23
+ true: "pr-3"
24
+ }
25
+ }
26
+ }),
27
+ input: cva({
28
+ base: "relative w-full px-3 font-normal leading-6 placeholder-[#727070] !outline-none",
29
+ variants: {
30
+ textAlign: {
31
+ right: "text-right",
32
+ left: ""
33
+ }
34
+ }
35
+ }),
36
+ divider: cx("block h-6 w-px flex-none bg-black")
37
+ };
38
+ function TextField(props) {
39
+ const {
40
+ className,
41
+ description,
42
+ errorMessage,
43
+ label,
44
+ leftAddon,
45
+ isRequired,
46
+ isInvalid: _isInvalid,
47
+ textAlign,
48
+ rightAddon,
49
+ withAddonDivider,
50
+ ...restProps
51
+ } = props;
52
+ const isInvalid = _isInvalid || errorMessage != null;
53
+ return /* @__PURE__ */ jsxs(
54
+ TextField$1,
55
+ {
56
+ ...restProps,
57
+ className: cx(className, classes.base),
58
+ isInvalid,
59
+ isRequired,
60
+ children: [
61
+ label && /* @__PURE__ */ jsx(Label, { children: label }),
62
+ description && /* @__PURE__ */ jsx(Description, { children: description }),
63
+ /* @__PURE__ */ jsxs(
64
+ "div",
65
+ {
66
+ className: classes.inputWrapper({
67
+ leftAddon: !!leftAddon,
68
+ rightAddon: !!rightAddon
69
+ }),
70
+ children: [
71
+ leftAddon,
72
+ withAddonDivider && leftAddon && /* @__PURE__ */ jsx(Divider, { className: "ml-3" }),
73
+ /* @__PURE__ */ jsx(Input, { className: classes.input({ textAlign }) }),
74
+ withAddonDivider && rightAddon && /* @__PURE__ */ jsx(Divider, { className: "mr-3" }),
75
+ rightAddon
76
+ ]
77
+ }
78
+ ),
79
+ errorMessage && /* @__PURE__ */ jsx(ErrorMessage, { children: errorMessage })
80
+ ]
81
+ }
82
+ );
83
+ }
84
+ function Divider({ className }) {
85
+ return /* @__PURE__ */ jsx("span", { className: cx(className, classes.divider) });
86
+ }
87
+
88
+ export { TextField };
package/package.json CHANGED
@@ -1,63 +1,62 @@
1
1
  {
2
2
  "name": "@obosbbl/grunnmuren-react",
3
- "version": "1.14.11",
4
- "description": "OBOS Grunnmuren design system React components",
5
- "license": "MIT",
3
+ "version": "2.0.0-canary.1",
4
+ "description": "Grunnmuren components in React",
6
5
  "repository": {
7
- "url": "https://github.com/code-obos/grunnmuren",
8
- "directory": "packages/react"
6
+ "url": "https://github.com/code-obos/grunnmuren"
9
7
  },
8
+ "license": "MIT",
9
+ "sideEffects": false,
10
+ "type": "module",
10
11
  "exports": {
11
- "types": "./dist/index.d.ts",
12
- "import": "./dist/grunnmuren.mjs"
12
+ "./button": {
13
+ "types": "./dist/button/Button.d.ts",
14
+ "default": "./dist/button/Button.mjs"
15
+ },
16
+ "./checkbox": {
17
+ "types": "./dist/checkbox/index.d.ts",
18
+ "default": "./dist/checkbox/index.mjs"
19
+ },
20
+ "./label": {
21
+ "types": "./dist/label/index.d.ts",
22
+ "default": "./dist/label/index.mjs"
23
+ },
24
+ "./radiogroup": {
25
+ "types": "./dist/radiogroup/index.d.ts",
26
+ "default": "./dist/radiogroup/index.mjs"
27
+ },
28
+ "./textfield": {
29
+ "types": "./dist/textfield/index.d.ts",
30
+ "default": "./dist/textfield/index.mjs"
31
+ }
13
32
  },
14
33
  "files": [
15
34
  "dist"
16
35
  ],
17
- "types": "./dist/index.d.ts",
18
- "devDependencies": {
19
- "@storybook/addon-controls": "7.4.5",
20
- "@storybook/addon-docs": "7.4.5",
21
- "@storybook/addon-styling": "1.3.7",
22
- "@storybook/builder-vite": "7.4.4",
23
- "@storybook/react": "7.4.5",
24
- "@storybook/react-vite": "7.4.4",
25
- "@types/react": "18.2.22",
26
- "@types/react-dom": "18.2.7",
27
- "@vitejs/plugin-react": "4.0.4",
28
- "autoprefixer": "10.4.16",
29
- "postcss": "8.4.30",
30
- "react": "18.2.0",
31
- "react-dom": "18.2.0",
32
- "require-from-string": "2.0.2",
33
- "rimraf": "5.0.1",
34
- "storybook": "7.4.5",
35
- "tailwindcss": "3.3.3",
36
- "type-fest": "4.3.1",
37
- "vite": "4.4.9",
38
- "@obosbbl/grunnmuren-tailwind": "0.9.1"
39
- },
40
36
  "dependencies": {
41
- "@react-hookz/web": "23.1.0",
42
- "clsx": "2.0.0",
43
- "react-collapsed": "4.0.4",
44
- "react-merge-refs": "2.0.2",
45
- "@obosbbl/grunnmuren-icons": "^0.7.0"
37
+ "@obosbbl/grunnmuren-icons-react": "^2.0.0-canary.0",
38
+ "cva": "1.0.0-beta.1",
39
+ "react-aria-components": "1.0.0-rc.0"
46
40
  },
47
41
  "peerDependencies": {
48
- "@obosbbl/grunnmuren-tailwind": "^0.9.1",
49
42
  "react": "^18"
50
43
  },
51
- "peerDependenciesMeta": {
52
- "@obosbbl/grunnmuren-tailwind": {
53
- "optional": true
44
+ "unbuild": {
45
+ "entries": [
46
+ "./src/button/Button.tsx",
47
+ "./src/checkbox/index.ts",
48
+ "./src/label/index.ts",
49
+ "./src/radiogroup/index.ts",
50
+ "./src/textfield/index.ts"
51
+ ],
52
+ "declaration": true,
53
+ "rollup": {
54
+ "esbuild": {
55
+ "jsx": "automatic"
56
+ }
54
57
  }
55
58
  },
56
59
  "scripts": {
57
- "build": "pnpm run build:lib && pnpm run build:types",
58
- "build:lib": "vite build",
59
- "build:types": "tsc --emitDeclarationOnly --declaration && rimraf 'dist/**/stories/'",
60
- "dev": "storybook dev -p 6006 --ci",
61
- "build:storybook": "storybook build"
60
+ "build": "unbuild"
62
61
  }
63
62
  }
@@ -1,27 +0,0 @@
1
- import React from 'react';
2
- interface AccordionProps extends React.ComponentPropsWithoutRef<'div'> {
3
- }
4
- export declare const Accordion: {
5
- (props: AccordionProps): import("react/jsx-runtime").JSX.Element;
6
- Item: (props: AccordionItemProps) => import("react/jsx-runtime").JSX.Element;
7
- Header: <T extends React.ElementType<any> = "h3">(props: AccordionHeaderProps<T> & Omit<React.PropsWithoutRef<React.ComponentProps<T>>, "as">) => import("react/jsx-runtime").JSX.Element;
8
- Content: (props: AccordionContentProps) => import("react/jsx-runtime").JSX.Element;
9
- };
10
- export interface AccordionItemProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'onChange'> {
11
- defaultOpen?: boolean;
12
- open?: boolean;
13
- onChange?: (open: boolean) => void;
14
- }
15
- export declare const AccordionItem: (props: AccordionItemProps) => import("react/jsx-runtime").JSX.Element;
16
- interface AccordionHeaderProps<T extends React.ElementType> {
17
- /**
18
- * The heading element that wraps the accordion item's button. Should always be an element with `role="heading"`
19
- * or a HTML heading tag. Change this to an appropriate heading level for your page.
20
- * @default h3 */
21
- as?: T;
22
- }
23
- export declare const AccordionHeader: <T extends React.ElementType<any> = "h3">(props: AccordionHeaderProps<T> & Omit<React.PropsWithoutRef<React.ComponentProps<T>>, "as">) => import("react/jsx-runtime").JSX.Element;
24
- interface AccordionContentProps extends React.ComponentPropsWithoutRef<'div'> {
25
- }
26
- export declare const AccordionContent: (props: AccordionContentProps) => import("react/jsx-runtime").JSX.Element;
27
- export {};
@@ -1 +0,0 @@
1
- export * from './Accordion';
@@ -1,9 +0,0 @@
1
- declare const _default: {
2
- title: string;
3
- parameters: {
4
- layout: string;
5
- };
6
- };
7
- export default _default;
8
- export declare const Controlled: () => import("react/jsx-runtime").JSX.Element;
9
- export declare const Uncontrolled: () => import("react/jsx-runtime").JSX.Element;
@@ -1,9 +0,0 @@
1
- /// <reference types="react" />
2
- export interface AlertProps {
3
- className?: string;
4
- children?: React.ReactNode;
5
- heading: string;
6
- /** @default alert */
7
- severity?: 'alert' | 'info';
8
- }
9
- export declare const Alert: (props: AlertProps) => import("react/jsx-runtime").JSX.Element;
@@ -1 +0,0 @@
1
- export * from './Alert';
@@ -1,5 +0,0 @@
1
- declare const _default: {
2
- title: string;
3
- };
4
- export default _default;
5
- export declare const Default: () => import("react/jsx-runtime").JSX.Element;
@@ -1,11 +0,0 @@
1
- /// <reference types="react" />
2
- import { BlockBackgroundColor } from '../hooks';
3
- interface BannerProps {
4
- bgColor?: BlockBackgroundColor;
5
- className?: string;
6
- children: React.ReactNode;
7
- heading: string;
8
- image: React.ReactNode;
9
- }
10
- export declare const Banner: (props: BannerProps) => import("react/jsx-runtime").JSX.Element;
11
- export {};
@@ -1,6 +0,0 @@
1
- /// <reference types="react" />
2
- export interface BannerImageProps extends React.ComponentPropsWithoutRef<'img'> {
3
- width: number;
4
- height: number;
5
- }
6
- export declare const BannerImage: (props: BannerImageProps) => import("react/jsx-runtime").JSX.Element;
@@ -1,2 +0,0 @@
1
- export * from './Banner';
2
- export * from './BannerImage';
@@ -1,5 +0,0 @@
1
- declare const _default: {
2
- title: string;
3
- };
4
- export default _default;
5
- export declare const Default: () => import("react/jsx-runtime").JSX.Element;
@@ -1,16 +0,0 @@
1
- import React from 'react';
2
- export type ButtonColor = 'standard' | 'white' | 'light-green' | 'mint';
3
- export interface ButtonProps extends React.ComponentPropsWithoutRef<'button'> {
4
- children: React.ReactNode;
5
- className?: string;
6
- color?: 'standard' | 'white' | 'light-green' | 'mint';
7
- disabled?: boolean;
8
- href?: string;
9
- /** Renders the button in a loading state */
10
- loading?: boolean;
11
- /** @default button */
12
- type?: 'button' | 'submit' | 'reset';
13
- /** @default primary */
14
- variant?: 'primary' | 'secondary';
15
- }
16
- export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
@@ -1,3 +0,0 @@
1
- /// <reference types="react" />
2
- import type { ButtonColor } from '.';
3
- export declare const ButtonColorContext: import("react").Context<ButtonColor>;
@@ -1,2 +0,0 @@
1
- export * from './Button';
2
- export * from './ButtonColorContext';
@@ -1,31 +0,0 @@
1
- declare const Composition: {
2
- readonly Text: "Text";
3
- readonly Icon: "Icon";
4
- readonly TextIcon: "Text Icon";
5
- readonly IconText: "Icon Text";
6
- };
7
- type CompositionValue = (typeof Composition)[keyof typeof Composition];
8
- declare const _default: {
9
- title: string;
10
- argTypes: {
11
- composition: {
12
- options: ("Text" | "Icon" | "Text Icon" | "Icon Text")[];
13
- control: string;
14
- defaultValue: "Text";
15
- };
16
- disabled: {
17
- control: string;
18
- defaultValue: boolean;
19
- };
20
- loading: {
21
- control: string;
22
- defaultValue: boolean;
23
- };
24
- };
25
- };
26
- export default _default;
27
- export declare const Default: (props: {
28
- composition: CompositionValue;
29
- disabled: boolean;
30
- loading: boolean;
31
- }) => import("react/jsx-runtime").JSX.Element;
@@ -1,26 +0,0 @@
1
- /// <reference types="react" />
2
- export interface CampaignProps<T extends React.ElementType> {
3
- /** @default div */
4
- as?: T;
5
- body: React.ReactElement;
6
- /** Use the `body` and `image` props. */
7
- children?: never;
8
- image: React.ReactElement;
9
- /**
10
- * Setting this to false changes the ordering of the body and the image on >= medium sceens.
11
- * Use this to alternate the image's positon with lists of Campaigns.
12
- * @default true
13
- */
14
- rightAlignBody?: boolean;
15
- }
16
- export interface CampaignBodyProps extends React.ComponentPropsWithoutRef<'div'> {
17
- }
18
- export declare const CampaignBody: import("react").ForwardRefExoticComponent<CampaignBodyProps & import("react").RefAttributes<HTMLDivElement>>;
19
- export interface CampaignImageProps extends React.ComponentPropsWithoutRef<'img'> {
20
- }
21
- export declare const CampaignImage: import("react").ForwardRefExoticComponent<CampaignImageProps & import("react").RefAttributes<HTMLImageElement>>;
22
- declare const Campaign: import("react").ForwardRefExoticComponent<Omit<CampaignProps<import("react").ElementType<any>> & Omit<Omit<any, "ref">, keyof CampaignProps<T>>, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
23
- Body: import("react").ForwardRefExoticComponent<CampaignBodyProps & import("react").RefAttributes<HTMLDivElement>>;
24
- Image: import("react").ForwardRefExoticComponent<CampaignImageProps & import("react").RefAttributes<HTMLImageElement>>;
25
- };
26
- export { Campaign };
@@ -1 +0,0 @@
1
- export * from './Campaign';
@@ -1,9 +0,0 @@
1
- declare const _default: {
2
- title: string;
3
- parameters: {
4
- layout: string;
5
- };
6
- };
7
- export default _default;
8
- export declare const Default: () => import("react/jsx-runtime").JSX.Element;
9
- export declare const WithCustomImageComponent: () => import("react/jsx-runtime").JSX.Element;
@@ -1,8 +0,0 @@
1
- /// <reference types="react" />
2
- export interface CardProps<T extends React.ElementType> {
3
- /** @default div */
4
- as?: T;
5
- /** @default white */
6
- bgColor?: 'white' | 'gray';
7
- }
8
- export declare const Card: import("react").ForwardRefExoticComponent<Omit<CardProps<import("react").ElementType<any>> & Omit<Omit<any, "ref">, keyof CardProps<T>>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
@@ -1,5 +0,0 @@
1
- /// <reference types="react" />
2
- interface CardContentProps extends React.ComponentPropsWithoutRef<'div'> {
3
- }
4
- export declare const CardContent: import("react").ForwardRefExoticComponent<CardContentProps & import("react").RefAttributes<HTMLDivElement>>;
5
- export {};
@@ -1,7 +0,0 @@
1
- /// <reference types="react" />
2
- interface CardImageProps extends React.ComponentPropsWithoutRef<'img'> {
3
- width: number;
4
- height: number;
5
- }
6
- export declare const CardImage: import("react").ForwardRefExoticComponent<CardImageProps & import("react").RefAttributes<HTMLImageElement>>;
7
- export {};
@@ -1,4 +0,0 @@
1
- /// <reference types="react" />
2
- export interface CardLinkOverlayProps extends React.ComponentPropsWithoutRef<'a'> {
3
- }
4
- export declare const CardLinkOverlay: import("react").ForwardRefExoticComponent<CardLinkOverlayProps & import("react").RefAttributes<HTMLAnchorElement>>;
@@ -1,7 +0,0 @@
1
- /// <reference types="react" />
2
- import { BlockBackgroundColor } from '../hooks';
3
- interface CardListProps extends React.ComponentPropsWithoutRef<'div'> {
4
- bgColor?: BlockBackgroundColor;
5
- }
6
- export declare const CardList: import("react").ForwardRefExoticComponent<CardListProps & import("react").RefAttributes<HTMLDivElement>>;
7
- export {};
@@ -1,5 +0,0 @@
1
- export * from './Card';
2
- export * from './CardImage';
3
- export * from './CardList';
4
- export * from './CardContent';
5
- export * from './CardLinkOverlay';
@@ -1,34 +0,0 @@
1
- import { CardProps } from '../../';
2
- declare const _default: {
3
- title: string;
4
- parameters: {
5
- layout: string;
6
- };
7
- argTypes: {
8
- bgColor: {
9
- options: string[];
10
- control: {
11
- type: string;
12
- };
13
- };
14
- };
15
- };
16
- export default _default;
17
- export declare const Default: {
18
- (props: CardProps<'div'>): import("react/jsx-runtime").JSX.Element;
19
- args: {
20
- bgColor: string;
21
- };
22
- };
23
- export declare const Link: {
24
- (props: CardProps<'div'>): import("react/jsx-runtime").JSX.Element;
25
- args: {
26
- bgColor: string;
27
- };
28
- };
29
- export declare const CardList: {
30
- (): import("react/jsx-runtime").JSX.Element;
31
- parameters: {
32
- layout: string;
33
- };
34
- };
@@ -1,13 +0,0 @@
1
- /// <reference types="react" />
2
- /**
3
- * CSS inspired by https://moderncss.dev/pure-css-custom-checkbox-style/
4
- */
5
- export interface CheckboxProps extends React.ComponentPropsWithRef<'input'> {
6
- children: React.ReactNode;
7
- className?: string;
8
- /** Error message for the form control */
9
- error?: string;
10
- /** Disables the built in HTML5 validation. If using custom validation for an entire form, consider setting `noValidate` on the form element instead. @default false */
11
- disableValidation?: boolean;
12
- }
13
- export declare const Checkbox: import("react").ForwardRefExoticComponent<Omit<CheckboxProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
@@ -1 +0,0 @@
1
- export * from './Checkbox';