@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.
- package/LICENSE +1 -1
- package/README.md +14 -32
- package/dist/button/Button.d.mts +83 -0
- package/dist/button/Button.d.ts +83 -0
- package/dist/button/Button.mjs +149 -0
- package/dist/checkbox/index.d.mts +32 -0
- package/dist/checkbox/index.d.ts +32 -0
- package/dist/checkbox/index.mjs +106 -0
- package/dist/label/index.d.mts +13 -0
- package/dist/label/index.d.ts +13 -0
- package/dist/label/index.mjs +45 -0
- package/dist/radiogroup/index.d.mts +30 -0
- package/dist/radiogroup/index.d.ts +30 -0
- package/dist/radiogroup/index.mjs +65 -0
- package/dist/textfield/index.d.mts +31 -0
- package/dist/textfield/index.d.ts +31 -0
- package/dist/textfield/index.mjs +88 -0
- package/package.json +43 -44
- package/dist/Accordion/Accordion.d.ts +0 -27
- package/dist/Accordion/index.d.ts +0 -1
- package/dist/Accordion/stories/Accordion.stories.d.ts +0 -9
- package/dist/Alert/Alert.d.ts +0 -9
- package/dist/Alert/index.d.ts +0 -1
- package/dist/Alert/stories/Alert.stories.d.ts +0 -5
- package/dist/Banner/Banner.d.ts +0 -11
- package/dist/Banner/BannerImage.d.ts +0 -6
- package/dist/Banner/index.d.ts +0 -2
- package/dist/Banner/stories/Banner.stories.d.ts +0 -5
- package/dist/Button/Button.d.ts +0 -16
- package/dist/Button/ButtonColorContext.d.ts +0 -3
- package/dist/Button/index.d.ts +0 -2
- package/dist/Button/stories/Button.stories.d.ts +0 -31
- package/dist/Campaign/Campaign.d.ts +0 -26
- package/dist/Campaign/index.d.ts +0 -1
- package/dist/Campaign/stories/Campaign.stories.d.ts +0 -9
- package/dist/Card/Card.d.ts +0 -8
- package/dist/Card/CardContent.d.ts +0 -5
- package/dist/Card/CardImage.d.ts +0 -7
- package/dist/Card/CardLinkOverlay.d.ts +0 -4
- package/dist/Card/CardList.d.ts +0 -7
- package/dist/Card/index.d.ts +0 -5
- package/dist/Card/stories/Card.stories.d.ts +0 -34
- package/dist/Checkbox/Checkbox.d.ts +0 -13
- package/dist/Checkbox/index.d.ts +0 -1
- package/dist/Checkbox/stories/Checkbox.stories.d.ts +0 -8
- package/dist/Chip/Chip.d.ts +0 -10
- package/dist/Chip/index.d.ts +0 -1
- package/dist/Chip/stories/Chip.stories.d.ts +0 -5
- package/dist/Footer/Footer.d.ts +0 -7
- package/dist/Footer/index.d.ts +0 -1
- package/dist/Footer/stories/Footer.stories.d.ts +0 -5
- package/dist/Form/Form.d.ts +0 -9
- package/dist/Form/FormError.d.ts +0 -4
- package/dist/Form/FormErrorMessage.d.ts +0 -5
- package/dist/Form/FormHelperText.d.ts +0 -5
- package/dist/Form/FormLabel.d.ts +0 -7
- package/dist/Form/FormSuccess.d.ts +0 -6
- package/dist/Form/MultiStep/FormStep.d.ts +0 -17
- package/dist/Form/MultiStep/FormStepContext.d.ts +0 -20
- package/dist/Form/MultiStep/FormStepHeader.d.ts +0 -18
- package/dist/Form/MultiStep/index.d.ts +0 -3
- package/dist/Form/index.d.ts +0 -7
- package/dist/Form/stories/Form.stories.d.ts +0 -14
- package/dist/Hero/Hero.d.ts +0 -21
- package/dist/Hero/HeroActions.d.ts +0 -7
- package/dist/Hero/HeroContent.d.ts +0 -9
- package/dist/Hero/HeroImage.d.ts +0 -9
- package/dist/Hero/index.d.ts +0 -4
- package/dist/Hero/stories/Hero.stories.d.ts +0 -33
- package/dist/Hero/utils.d.ts +0 -2
- package/dist/Input/Input.d.ts +0 -11
- package/dist/Input/index.d.ts +0 -1
- package/dist/Input/stories/Input.stories.d.ts +0 -8
- package/dist/Link/Link.d.ts +0 -8
- package/dist/Link/index.d.ts +0 -1
- package/dist/Navbar/Navbar.d.ts +0 -6
- package/dist/Navbar/NavbarCollapsible.d.ts +0 -6
- package/dist/Navbar/NavbarContent.d.ts +0 -7
- package/dist/Navbar/NavbarContext.d.ts +0 -6
- package/dist/Navbar/NavbarExpandedMobileContent.d.ts +0 -9
- package/dist/Navbar/NavbarItem.d.ts +0 -7
- package/dist/Navbar/NavbarItems.d.ts +0 -6
- package/dist/Navbar/NavbarMenuButton.d.ts +0 -4
- package/dist/Navbar/index.d.ts +0 -6
- package/dist/Navbar/stories/Navbar.stories.d.ts +0 -5
- package/dist/Pagination/Pagination.d.ts +0 -23
- package/dist/Pagination/index.d.ts +0 -1
- package/dist/Pagination/stories/Pagination.stories.d.ts +0 -24
- package/dist/Radio/Radio.d.ts +0 -5
- package/dist/Radio/RadioContext.d.ts +0 -10
- package/dist/Radio/RadioGroup.d.ts +0 -20
- package/dist/Radio/index.d.ts +0 -2
- package/dist/Radio/stories/Radio.stories.d.ts +0 -12
- package/dist/Select/Select.d.ts +0 -21
- package/dist/Select/SelectPlain.d.ts +0 -15
- package/dist/Select/index.d.ts +0 -1
- package/dist/Select/stories/Select.stories.d.ts +0 -26
- package/dist/Snackbar/Snackbar.d.ts +0 -8
- package/dist/Snackbar/SnackbarButton.d.ts +0 -6
- package/dist/Snackbar/SnackbarContent.d.ts +0 -5
- package/dist/Snackbar/index.d.ts +0 -3
- package/dist/Snackbar/stories/Snackbar.stories.d.ts +0 -9
- package/dist/StepList/StepList.d.ts +0 -25
- package/dist/StepList/index.d.ts +0 -1
- package/dist/StepList/stories/StepList.stories.d.ts +0 -19
- package/dist/TextArea/TextArea.d.ts +0 -15
- package/dist/TextArea/index.d.ts +0 -1
- package/dist/TextArea/stories/TextArea.stories.d.ts +0 -8
- package/dist/TextField/TextField.d.ts +0 -19
- package/dist/TextField/index.d.ts +0 -1
- package/dist/TextField/stories/TextField.stories.d.ts +0 -9
- package/dist/__stories__/Icon.stories.d.ts +0 -8
- package/dist/__stories__/PageLayout.stories.d.ts +0 -5
- package/dist/__stories__/Typography.stories.d.ts +0 -9
- package/dist/grunnmuren.mjs +0 -1551
- package/dist/hooks/index.d.ts +0 -5
- package/dist/hooks/useBlockBackgroundColor.d.ts +0 -2
- package/dist/hooks/useFallbackId.d.ts +0 -4
- package/dist/hooks/useFormControlValidity.d.ts +0 -15
- package/dist/hooks/usePrefersReducedMotion.d.ts +0 -1
- package/dist/hooks/useScreenMaxWidthMd.d.ts +0 -1
- package/dist/index.d.ts +0 -22
- 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": "
|
|
4
|
-
"description": "
|
|
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
|
-
"
|
|
12
|
-
|
|
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
|
|
42
|
-
"
|
|
43
|
-
"react-
|
|
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
|
-
"
|
|
52
|
-
"
|
|
53
|
-
"
|
|
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": "
|
|
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;
|
package/dist/Alert/Alert.d.ts
DELETED
|
@@ -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;
|
package/dist/Alert/index.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './Alert';
|
package/dist/Banner/Banner.d.ts
DELETED
|
@@ -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 {};
|
package/dist/Banner/index.d.ts
DELETED
package/dist/Button/Button.d.ts
DELETED
|
@@ -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>>;
|
package/dist/Button/index.d.ts
DELETED
|
@@ -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 };
|
package/dist/Campaign/index.d.ts
DELETED
|
@@ -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;
|
package/dist/Card/Card.d.ts
DELETED
|
@@ -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>>;
|
package/dist/Card/CardImage.d.ts
DELETED
|
@@ -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>>;
|
package/dist/Card/CardList.d.ts
DELETED
|
@@ -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 {};
|
package/dist/Card/index.d.ts
DELETED
|
@@ -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>>;
|
package/dist/Checkbox/index.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './Checkbox';
|