@ndla/primitives 0.0.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 +674 -0
- package/dist/panda.buildinfo.json +426 -0
- package/dist/styles.css +1738 -0
- package/es/Accordion.js +103 -0
- package/es/ArticleLists.js +106 -0
- package/es/Badge.js +55 -0
- package/es/BlockQuote.js +49 -0
- package/es/Button.js +211 -0
- package/es/Checkbox.js +118 -0
- package/es/Dialog.js +329 -0
- package/es/ExpandableBox.js +55 -0
- package/es/FieldErrorMessage.js +44 -0
- package/es/FieldHelper.js +37 -0
- package/es/FormControl.js +163 -0
- package/es/FramedContent.js +54 -0
- package/es/Icon.js +71 -0
- package/es/Input.js +159 -0
- package/es/Label.js +104 -0
- package/es/Menu.js +171 -0
- package/es/MessageBox.js +57 -0
- package/es/NdlaLogo.js +284 -0
- package/es/Pagination.js +37 -0
- package/es/Popover.js +78 -0
- package/es/RadioGroup.js +136 -0
- package/es/Skeleton.js +31 -0
- package/es/Slider.js +102 -0
- package/es/Spinner.js +54 -0
- package/es/Switch.js +130 -0
- package/es/Table.js +75 -0
- package/es/Text.js +54 -0
- package/es/Toast.js +82 -0
- package/es/Tooltip.js +59 -0
- package/es/createStyleContext.js +62 -0
- package/es/index.js +19 -0
- package/lib/Accordion.d.ts +17 -0
- package/lib/Accordion.js +109 -0
- package/lib/ArticleLists.d.ts +20 -0
- package/lib/ArticleLists.js +115 -0
- package/lib/Badge.d.ts +33 -0
- package/lib/Badge.js +62 -0
- package/lib/BlockQuote.d.ts +28 -0
- package/lib/BlockQuote.js +56 -0
- package/lib/Button.d.ts +131 -0
- package/lib/Button.js +217 -0
- package/lib/Checkbox.d.ts +15 -0
- package/lib/Checkbox.js +125 -0
- package/lib/Dialog.d.ts +107 -0
- package/lib/Dialog.js +338 -0
- package/lib/ExpandableBox.d.ts +12 -0
- package/lib/ExpandableBox.js +63 -0
- package/lib/FieldErrorMessage.d.ts +11 -0
- package/lib/FieldErrorMessage.js +50 -0
- package/lib/FieldHelper.d.ts +11 -0
- package/lib/FieldHelper.js +43 -0
- package/lib/FormControl.d.ts +65 -0
- package/lib/FormControl.js +173 -0
- package/lib/FramedContent.d.ts +32 -0
- package/lib/FramedContent.js +61 -0
- package/lib/Icon.d.ts +37 -0
- package/lib/Icon.js +78 -0
- package/lib/Input.d.ts +20 -0
- package/lib/Input.js +165 -0
- package/lib/Label.d.ts +16 -0
- package/lib/Label.js +110 -0
- package/lib/Menu.d.ts +25 -0
- package/lib/Menu.js +179 -0
- package/lib/MessageBox.d.ts +33 -0
- package/lib/MessageBox.js +64 -0
- package/lib/NdlaLogo.d.ts +15 -0
- package/lib/NdlaLogo.js +293 -0
- package/lib/Pagination.d.ts +14 -0
- package/lib/Pagination.js +43 -0
- package/lib/Popover.d.ts +22 -0
- package/lib/Popover.js +87 -0
- package/lib/RadioGroup.d.ts +19 -0
- package/lib/RadioGroup.js +143 -0
- package/lib/Skeleton.d.ts +11 -0
- package/lib/Skeleton.js +38 -0
- package/lib/Slider.d.ts +17 -0
- package/lib/Slider.js +109 -0
- package/lib/Spinner.d.ts +26 -0
- package/lib/Spinner.js +61 -0
- package/lib/Switch.d.ts +21 -0
- package/lib/Switch.js +137 -0
- package/lib/Table.d.ts +10 -0
- package/lib/Table.js +82 -0
- package/lib/Text.d.ts +24 -0
- package/lib/Text.js +62 -0
- package/lib/Toast.d.ts +18 -0
- package/lib/Toast.js +90 -0
- package/lib/Tooltip.d.ts +16 -0
- package/lib/Tooltip.js +65 -0
- package/lib/createStyleContext.d.ts +27 -0
- package/lib/createStyleContext.js +69 -0
- package/lib/index.d.ts +28 -0
- package/lib/index.js +130 -0
- package/package.json +48 -0
package/lib/Switch.js
ADDED
|
@@ -0,0 +1,137 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.SwitchThumb = exports.SwitchRoot = exports.SwitchLabel = exports.SwitchHiddenInput = exports.SwitchControl = exports.InternalSwitchRoot = exports.InternalSwitchLabel = void 0;
|
|
7
|
+
var _react = require("react");
|
|
8
|
+
var _anatomy = require("@ark-ui/anatomy");
|
|
9
|
+
var _react2 = require("@ark-ui/react");
|
|
10
|
+
var _css = require("@ndla/styled-system/css");
|
|
11
|
+
var _createStyleContext = require("./createStyleContext");
|
|
12
|
+
var _FormControl = require("./FormControl");
|
|
13
|
+
var _Text = require("./Text");
|
|
14
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
15
|
+
/**
|
|
16
|
+
* Copyright (c) 2024-present, NDLA.
|
|
17
|
+
*
|
|
18
|
+
* This source code is licensed under the GPLv3 license found in the
|
|
19
|
+
* LICENSE file in the root directory of this source tree.
|
|
20
|
+
*
|
|
21
|
+
*/
|
|
22
|
+
|
|
23
|
+
const switchRecipe = (0, _css.sva)({
|
|
24
|
+
slots: _anatomy.switchAnatomy.keys(),
|
|
25
|
+
base: {
|
|
26
|
+
root: {
|
|
27
|
+
display: "inline-flex",
|
|
28
|
+
alignItems: "center",
|
|
29
|
+
position: "relative",
|
|
30
|
+
gap: "xxsmall",
|
|
31
|
+
_focus: {
|
|
32
|
+
outline: "2px solid",
|
|
33
|
+
outlineOffset: "4xsmall",
|
|
34
|
+
outlineColor: "stroke.default",
|
|
35
|
+
borderRadius: "xsmall"
|
|
36
|
+
}
|
|
37
|
+
},
|
|
38
|
+
control: {
|
|
39
|
+
display: "inline-flex",
|
|
40
|
+
alignItems: "center",
|
|
41
|
+
background: "surface.disabled.strong",
|
|
42
|
+
width: "xxlarge",
|
|
43
|
+
padding: "1",
|
|
44
|
+
borderRadius: "medium",
|
|
45
|
+
cursor: "pointer",
|
|
46
|
+
flexShrink: "0",
|
|
47
|
+
transitionDuration: "fast",
|
|
48
|
+
transitionProperty: "background",
|
|
49
|
+
transitionTimingFunction: "default",
|
|
50
|
+
_checked: {
|
|
51
|
+
background: "surface.action.active"
|
|
52
|
+
},
|
|
53
|
+
_disabled: {
|
|
54
|
+
background: "surface.disabled",
|
|
55
|
+
cursor: "not-allowed"
|
|
56
|
+
}
|
|
57
|
+
},
|
|
58
|
+
thumb: {
|
|
59
|
+
display: "inline-flex",
|
|
60
|
+
alignItems: "center",
|
|
61
|
+
justifyContent: "center",
|
|
62
|
+
background: "icon.onAction",
|
|
63
|
+
borderRadius: "full",
|
|
64
|
+
boxShadow: "xsmall",
|
|
65
|
+
transitionDuration: "fast",
|
|
66
|
+
transitionProperty: "transform",
|
|
67
|
+
transitionTimingFunction: "default",
|
|
68
|
+
width: "10",
|
|
69
|
+
height: "10",
|
|
70
|
+
textStyle: "label.xsmall",
|
|
71
|
+
fontWeight: "bold",
|
|
72
|
+
_hover: {
|
|
73
|
+
transform: "translateX(20%)",
|
|
74
|
+
_disabled: {
|
|
75
|
+
transform: "translateX(0)"
|
|
76
|
+
}
|
|
77
|
+
},
|
|
78
|
+
_checked: {
|
|
79
|
+
transform: "translateX(120%)",
|
|
80
|
+
_hover: {
|
|
81
|
+
transform: "translateX(100%)",
|
|
82
|
+
_disabled: {
|
|
83
|
+
transform: "translateX(120%)"
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
},
|
|
88
|
+
label: {
|
|
89
|
+
color: "text.strong",
|
|
90
|
+
transitionDuration: "fast",
|
|
91
|
+
transitionProperty: "color",
|
|
92
|
+
transitionTimingFunction: "default",
|
|
93
|
+
_hover: {
|
|
94
|
+
color: "text.action"
|
|
95
|
+
},
|
|
96
|
+
_disabled: {
|
|
97
|
+
color: "text.disabled",
|
|
98
|
+
_hover: {
|
|
99
|
+
color: "text.disabled"
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
});
|
|
105
|
+
const {
|
|
106
|
+
withProvider,
|
|
107
|
+
withContext
|
|
108
|
+
} = (0, _createStyleContext.createStyleContext)(switchRecipe);
|
|
109
|
+
const InternalSwitchRoot = exports.InternalSwitchRoot = withProvider(_react2.Switch.Root, "root");
|
|
110
|
+
const SwitchRoot = exports.SwitchRoot = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
|
|
111
|
+
var _field$invalid;
|
|
112
|
+
const field = (0, _FormControl.useFormControl)(props);
|
|
113
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(InternalSwitchRoot, {
|
|
114
|
+
invalid: (_field$invalid = field.invalid) !== null && _field$invalid !== void 0 ? _field$invalid : !!field["aria-invalid"],
|
|
115
|
+
...field,
|
|
116
|
+
ref: ref
|
|
117
|
+
});
|
|
118
|
+
});
|
|
119
|
+
const SwitchControl = exports.SwitchControl = withContext(_react2.Switch.Control, "control");
|
|
120
|
+
const SwitchThumb = exports.SwitchThumb = withContext(_react2.Switch.Thumb, "thumb");
|
|
121
|
+
const InternalSwitchLabel = exports.InternalSwitchLabel = withContext(_react2.Switch.Label, "label");
|
|
122
|
+
const SwitchLabel = _ref => {
|
|
123
|
+
let {
|
|
124
|
+
textStyle = "label.medium",
|
|
125
|
+
...props
|
|
126
|
+
} = _ref;
|
|
127
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(InternalSwitchLabel, {
|
|
128
|
+
asChild: true,
|
|
129
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.Text, {
|
|
130
|
+
as: "span",
|
|
131
|
+
textStyle: textStyle,
|
|
132
|
+
...props
|
|
133
|
+
})
|
|
134
|
+
});
|
|
135
|
+
};
|
|
136
|
+
exports.SwitchLabel = SwitchLabel;
|
|
137
|
+
const SwitchHiddenInput = exports.SwitchHiddenInput = _react2.Switch.HiddenInput;
|
package/lib/Table.d.ts
ADDED
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright (c) 2024-present, NDLA.
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the GPLv3 license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*
|
|
7
|
+
*/
|
|
8
|
+
import { ComponentPropsWithoutRef } from "react";
|
|
9
|
+
export type TableProps = ComponentPropsWithoutRef<"table">;
|
|
10
|
+
export declare const Table: (props: TableProps) => import("@emotion/react/jsx-runtime").JSX.Element;
|
package/lib/Table.js
ADDED
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.Table = void 0;
|
|
7
|
+
var _jsx2 = require("@ndla/styled-system/jsx");
|
|
8
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
9
|
+
/**
|
|
10
|
+
* Copyright (c) 2024-present, NDLA.
|
|
11
|
+
*
|
|
12
|
+
* This source code is licensed under the GPLv3 license found in the
|
|
13
|
+
* LICENSE file in the root directory of this source tree.
|
|
14
|
+
*
|
|
15
|
+
*/
|
|
16
|
+
|
|
17
|
+
const StyledTable = (0, _jsx2.styled)("table", {
|
|
18
|
+
base: {
|
|
19
|
+
display: "block",
|
|
20
|
+
overflowX: "auto",
|
|
21
|
+
maxWidth: "100%",
|
|
22
|
+
padding: "4xsmall",
|
|
23
|
+
tableLayout: "fixed",
|
|
24
|
+
"& > caption": {
|
|
25
|
+
fontWeight: "bold",
|
|
26
|
+
textAlign: "left",
|
|
27
|
+
textTransform: "uppercase",
|
|
28
|
+
marginBlockEnd: "xsmall"
|
|
29
|
+
},
|
|
30
|
+
"& thead": {
|
|
31
|
+
overflow: "hidden"
|
|
32
|
+
},
|
|
33
|
+
"& thead tr th": {
|
|
34
|
+
fontWeight: "bold",
|
|
35
|
+
borderBottom: "3px solid",
|
|
36
|
+
borderColor: "surface.brand.1.strong",
|
|
37
|
+
verticalAlign: "text-top"
|
|
38
|
+
},
|
|
39
|
+
"& tbody th": {
|
|
40
|
+
borderRight: "3px solid",
|
|
41
|
+
borderColor: "surface.brand.1.strong",
|
|
42
|
+
padding: "3xsmall"
|
|
43
|
+
},
|
|
44
|
+
"& thead tr:nth-child(2) th": {
|
|
45
|
+
border: "1px solid",
|
|
46
|
+
borderColor: "surface.brand.1.subtle",
|
|
47
|
+
textTransform: "none",
|
|
48
|
+
fontWeight: "semibold",
|
|
49
|
+
height: "large",
|
|
50
|
+
backgroundColor: "surface.brand.1.subtle",
|
|
51
|
+
paddingBlock: "4xsmall",
|
|
52
|
+
paddingInlineEnd: "medium",
|
|
53
|
+
paddingInlineStart: "3xsmall",
|
|
54
|
+
_empty: {
|
|
55
|
+
backgroundColor: "transparent"
|
|
56
|
+
}
|
|
57
|
+
},
|
|
58
|
+
"& td": {
|
|
59
|
+
border: "1px solid",
|
|
60
|
+
borderColor: "surface.brand.1.subtle",
|
|
61
|
+
verticalAlign: "top"
|
|
62
|
+
},
|
|
63
|
+
"& td, & th": {
|
|
64
|
+
display: "table-cell",
|
|
65
|
+
paddingInline: "xsmall",
|
|
66
|
+
paddingBlock: "3xsmall",
|
|
67
|
+
"&[data-align='center']": {
|
|
68
|
+
textAlign: "center"
|
|
69
|
+
},
|
|
70
|
+
"&[data-align='left']": {
|
|
71
|
+
textAlign: "left"
|
|
72
|
+
},
|
|
73
|
+
"&[data-align='right']": {
|
|
74
|
+
textAlign: "right"
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
});
|
|
79
|
+
const Table = props => /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledTable, {
|
|
80
|
+
...props
|
|
81
|
+
});
|
|
82
|
+
exports.Table = Table;
|
package/lib/Text.d.ts
ADDED
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright (c) 2024-present, NDLA.
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the GPLv3 license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*
|
|
7
|
+
*/
|
|
8
|
+
import { ComponentPropsWithoutRef, ElementType } from "react";
|
|
9
|
+
import { ColorToken, FontWeightToken } from "@ndla/styled-system/tokens";
|
|
10
|
+
import { UtilityValues } from "@ndla/styled-system/types/prop-type";
|
|
11
|
+
export interface TextProps {
|
|
12
|
+
textStyle?: UtilityValues["textStyle"];
|
|
13
|
+
fontWeight?: FontWeightToken;
|
|
14
|
+
color?: ColorToken;
|
|
15
|
+
srOnly?: boolean;
|
|
16
|
+
}
|
|
17
|
+
type Props<T extends ElementType> = TextProps & {
|
|
18
|
+
as?: T;
|
|
19
|
+
} & ComponentPropsWithoutRef<T>;
|
|
20
|
+
export type HeadingType = Extract<ElementType, "h1" | "h2" | "h3" | "h4" | "h5" | "h6">;
|
|
21
|
+
export declare const Heading: <T extends HeadingType = "h1">(props: Props<T>) => import("@emotion/react/jsx-runtime").JSX.Element;
|
|
22
|
+
type TextType = Extract<ElementType, "p" | "span" | "div">;
|
|
23
|
+
export declare const Text: <T extends TextType = "p">(props: Props<T>) => import("@emotion/react/jsx-runtime").JSX.Element;
|
|
24
|
+
export {};
|
package/lib/Text.js
ADDED
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.Text = exports.Heading = void 0;
|
|
7
|
+
var _css = require("@ndla/styled-system/css");
|
|
8
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
9
|
+
/**
|
|
10
|
+
* Copyright (c) 2024-present, NDLA.
|
|
11
|
+
*
|
|
12
|
+
* This source code is licensed under the GPLv3 license found in the
|
|
13
|
+
* LICENSE file in the root directory of this source tree.
|
|
14
|
+
*
|
|
15
|
+
*/
|
|
16
|
+
|
|
17
|
+
const BaseText = props => {
|
|
18
|
+
const {
|
|
19
|
+
as: As = "p",
|
|
20
|
+
className,
|
|
21
|
+
fontWeight,
|
|
22
|
+
color,
|
|
23
|
+
textStyle = "body.medium",
|
|
24
|
+
srOnly,
|
|
25
|
+
...rest
|
|
26
|
+
} = props;
|
|
27
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(As, {
|
|
28
|
+
className: (0, _css.cx)((0, _css.css)({
|
|
29
|
+
textStyle,
|
|
30
|
+
fontWeight,
|
|
31
|
+
color,
|
|
32
|
+
srOnly: srOnly
|
|
33
|
+
}), className),
|
|
34
|
+
...rest
|
|
35
|
+
});
|
|
36
|
+
};
|
|
37
|
+
const Heading = props => {
|
|
38
|
+
const {
|
|
39
|
+
as = "h1",
|
|
40
|
+
textStyle = "heading.medium",
|
|
41
|
+
...rest
|
|
42
|
+
} = props;
|
|
43
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(BaseText, {
|
|
44
|
+
as: as,
|
|
45
|
+
textStyle: textStyle,
|
|
46
|
+
...rest
|
|
47
|
+
});
|
|
48
|
+
};
|
|
49
|
+
exports.Heading = Heading;
|
|
50
|
+
const Text = props => {
|
|
51
|
+
const {
|
|
52
|
+
as = "p",
|
|
53
|
+
textStyle = "body.medium",
|
|
54
|
+
...rest
|
|
55
|
+
} = props;
|
|
56
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(BaseText, {
|
|
57
|
+
as: as,
|
|
58
|
+
textStyle: textStyle,
|
|
59
|
+
...rest
|
|
60
|
+
});
|
|
61
|
+
};
|
|
62
|
+
exports.Text = Text;
|
package/lib/Toast.d.ts
ADDED
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright (c) 2024-present, NDLA.
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the GPLv3 license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*
|
|
7
|
+
*/
|
|
8
|
+
import { Toast } from "@ark-ui/react";
|
|
9
|
+
import { TextProps } from "./Text";
|
|
10
|
+
export interface RootProps extends Toast.RootProps {
|
|
11
|
+
}
|
|
12
|
+
export declare const ToastRoot: import("react").ForwardRefExoticComponent<RootProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
13
|
+
export declare const ToastActionTrigger: import("react").ForwardRefExoticComponent<Toast.ActionTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
|
|
14
|
+
export declare const ToastCloseTrigger: import("react").ForwardRefExoticComponent<Toast.CloseTriggerProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
15
|
+
export declare const InternalToastDescription: import("react").ForwardRefExoticComponent<Toast.DescriptionProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
16
|
+
export declare const ToastDescription: ({ textStyle, ...props }: Toast.DescriptionProps & TextProps) => import("@emotion/react/jsx-runtime").JSX.Element;
|
|
17
|
+
export declare const InternalToastTitle: import("react").ForwardRefExoticComponent<Toast.TitleProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
18
|
+
export declare const ToastTitle: ({ textStyle, fontWeight, ...props }: Toast.TitleProps & TextProps) => import("@emotion/react/jsx-runtime").JSX.Element;
|
package/lib/Toast.js
ADDED
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.ToastTitle = exports.ToastRoot = exports.ToastDescription = exports.ToastCloseTrigger = exports.ToastActionTrigger = exports.InternalToastTitle = exports.InternalToastDescription = void 0;
|
|
7
|
+
var _anatomy = require("@ark-ui/anatomy");
|
|
8
|
+
var _react = require("@ark-ui/react");
|
|
9
|
+
var _css = require("@ndla/styled-system/css");
|
|
10
|
+
var _createStyleContext = require("./createStyleContext");
|
|
11
|
+
var _Text = require("./Text");
|
|
12
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
13
|
+
/**
|
|
14
|
+
* Copyright (c) 2024-present, NDLA.
|
|
15
|
+
*
|
|
16
|
+
* This source code is licensed under the GPLv3 license found in the
|
|
17
|
+
* LICENSE file in the root directory of this source tree.
|
|
18
|
+
*
|
|
19
|
+
*/
|
|
20
|
+
|
|
21
|
+
const toastRecipe = (0, _css.sva)({
|
|
22
|
+
slots: _anatomy.toastAnatomy.keys(),
|
|
23
|
+
base: {
|
|
24
|
+
root: {
|
|
25
|
+
position: "relative",
|
|
26
|
+
background: "surface.action",
|
|
27
|
+
color: "text.onAction",
|
|
28
|
+
borderRadius: "xsmall",
|
|
29
|
+
boxShadow: "medium",
|
|
30
|
+
minWidth: "20rem",
|
|
31
|
+
height: "var(--height)",
|
|
32
|
+
opacity: "var(--opacity)",
|
|
33
|
+
overflowWrap: "anywhere",
|
|
34
|
+
padding: "small",
|
|
35
|
+
scale: "var(--scale)",
|
|
36
|
+
translate: "var(--x) var(--y) 0",
|
|
37
|
+
willChange: "translate, scale, opacity, height",
|
|
38
|
+
zIndex: "var(--z-index)",
|
|
39
|
+
transitionDuration: "slow",
|
|
40
|
+
transitionProperty: "translate, scale, opacity, height",
|
|
41
|
+
transitionTimingFunction: "default"
|
|
42
|
+
},
|
|
43
|
+
closeTrigger: {
|
|
44
|
+
position: "absolute",
|
|
45
|
+
top: "xxsmall",
|
|
46
|
+
right: "xxsmall"
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
});
|
|
50
|
+
const {
|
|
51
|
+
withProvider,
|
|
52
|
+
withContext
|
|
53
|
+
} = (0, _createStyleContext.createStyleContext)(toastRecipe);
|
|
54
|
+
const ToastRoot = exports.ToastRoot = withProvider(_react.Toast.Root, "root");
|
|
55
|
+
const ToastActionTrigger = exports.ToastActionTrigger = withContext(_react.Toast.ActionTrigger, "actionTrigger");
|
|
56
|
+
const ToastCloseTrigger = exports.ToastCloseTrigger = withContext(_react.Toast.CloseTrigger, "closeTrigger");
|
|
57
|
+
const InternalToastDescription = exports.InternalToastDescription = withContext(_react.Toast.Description, "description");
|
|
58
|
+
const ToastDescription = _ref => {
|
|
59
|
+
let {
|
|
60
|
+
textStyle = "label.medium",
|
|
61
|
+
...props
|
|
62
|
+
} = _ref;
|
|
63
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(InternalToastDescription, {
|
|
64
|
+
asChild: true,
|
|
65
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.Text, {
|
|
66
|
+
as: "div",
|
|
67
|
+
textStyle: textStyle,
|
|
68
|
+
...props
|
|
69
|
+
})
|
|
70
|
+
});
|
|
71
|
+
};
|
|
72
|
+
exports.ToastDescription = ToastDescription;
|
|
73
|
+
const InternalToastTitle = exports.InternalToastTitle = withContext(_react.Toast.Title, "title");
|
|
74
|
+
const ToastTitle = _ref2 => {
|
|
75
|
+
let {
|
|
76
|
+
textStyle = "label.medium",
|
|
77
|
+
fontWeight = "semibold",
|
|
78
|
+
...props
|
|
79
|
+
} = _ref2;
|
|
80
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(InternalToastTitle, {
|
|
81
|
+
asChild: true,
|
|
82
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.Text, {
|
|
83
|
+
as: "div",
|
|
84
|
+
fontWeight: fontWeight,
|
|
85
|
+
textStyle: textStyle,
|
|
86
|
+
...props
|
|
87
|
+
})
|
|
88
|
+
});
|
|
89
|
+
};
|
|
90
|
+
exports.ToastTitle = ToastTitle;
|
package/lib/Tooltip.d.ts
ADDED
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright (c) 2024-present, NDLA.
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the GPLv3 license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*
|
|
7
|
+
*/
|
|
8
|
+
import { Tooltip } from "@ark-ui/react";
|
|
9
|
+
export type TooltipRootProps = Tooltip.RootProps;
|
|
10
|
+
export declare const TooltipRoot: (props: Tooltip.RootProps) => import("@emotion/react/jsx-runtime").JSX.Element;
|
|
11
|
+
export declare const TooltipArrow: import("react").ForwardRefExoticComponent<Tooltip.ArrowProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
12
|
+
export declare const TooltipArrowTip: import("react").ForwardRefExoticComponent<Tooltip.ArrowTipProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
13
|
+
export declare const TooltipContentStandalone: import("react").ForwardRefExoticComponent<Tooltip.ContentProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
14
|
+
export declare const TooltipContent: import("react").ForwardRefExoticComponent<Tooltip.ContentProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
15
|
+
export declare const TooltipPositioner: import("react").ForwardRefExoticComponent<Tooltip.PositionerProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
16
|
+
export declare const TooltipTrigger: import("react").ForwardRefExoticComponent<Tooltip.TriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
|
package/lib/Tooltip.js
ADDED
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.TooltipTrigger = exports.TooltipRoot = exports.TooltipPositioner = exports.TooltipContentStandalone = exports.TooltipContent = exports.TooltipArrowTip = exports.TooltipArrow = void 0;
|
|
7
|
+
var _react = require("react");
|
|
8
|
+
var _anatomy = require("@ark-ui/anatomy");
|
|
9
|
+
var _react2 = require("@ark-ui/react");
|
|
10
|
+
var _css = require("@ndla/styled-system/css");
|
|
11
|
+
var _createStyleContext = require("./createStyleContext");
|
|
12
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
13
|
+
/**
|
|
14
|
+
* Copyright (c) 2024-present, NDLA.
|
|
15
|
+
*
|
|
16
|
+
* This source code is licensed under the GPLv3 license found in the
|
|
17
|
+
* LICENSE file in the root directory of this source tree.
|
|
18
|
+
*
|
|
19
|
+
*/
|
|
20
|
+
|
|
21
|
+
const tooltipRecipe = (0, _css.sva)({
|
|
22
|
+
slots: _anatomy.tooltipAnatomy.keys(),
|
|
23
|
+
base: {
|
|
24
|
+
content: {
|
|
25
|
+
background: "surface.action",
|
|
26
|
+
textStyle: "label.small",
|
|
27
|
+
color: "text.onAction",
|
|
28
|
+
paddingInline: "xxsmall",
|
|
29
|
+
paddingBlock: "4xsmall",
|
|
30
|
+
"--arrow-size": "spacing.xxsmall",
|
|
31
|
+
"--arrow-background": "colors.surface.action",
|
|
32
|
+
_open: {
|
|
33
|
+
animation: "fade-shift-in 0.2s ease-out"
|
|
34
|
+
},
|
|
35
|
+
_closed: {
|
|
36
|
+
animation: "fade-shift-out 0.2s ease-out"
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
});
|
|
41
|
+
const {
|
|
42
|
+
withRootProvider,
|
|
43
|
+
withContext
|
|
44
|
+
} = (0, _createStyleContext.createStyleContext)(tooltipRecipe);
|
|
45
|
+
const TooltipRoot = exports.TooltipRoot = withRootProvider(_react2.Tooltip.Root);
|
|
46
|
+
const TooltipArrow = exports.TooltipArrow = withContext(_react2.Tooltip.Arrow, "arrow");
|
|
47
|
+
const TooltipArrowTip = exports.TooltipArrowTip = withContext(_react2.Tooltip.ArrowTip, "arrowTip");
|
|
48
|
+
const TooltipContentStandalone = exports.TooltipContentStandalone = withContext(_react2.Tooltip.Content, "content");
|
|
49
|
+
const TooltipContent = exports.TooltipContent = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
50
|
+
let {
|
|
51
|
+
children,
|
|
52
|
+
...props
|
|
53
|
+
} = _ref;
|
|
54
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(TooltipPositioner, {
|
|
55
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(TooltipContentStandalone, {
|
|
56
|
+
...props,
|
|
57
|
+
ref: ref,
|
|
58
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(TooltipArrow, {
|
|
59
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(TooltipArrowTip, {})
|
|
60
|
+
}), children]
|
|
61
|
+
})
|
|
62
|
+
});
|
|
63
|
+
});
|
|
64
|
+
const TooltipPositioner = exports.TooltipPositioner = withContext(_react2.Tooltip.Positioner, "positioner");
|
|
65
|
+
const TooltipTrigger = exports.TooltipTrigger = withContext(_react2.Tooltip.Trigger, "trigger");
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright (c) 2024-present, NDLA.
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the GPLv3 license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*
|
|
7
|
+
*/
|
|
8
|
+
import { type ElementType, type ForwardRefExoticComponent, type PropsWithoutRef, type RefAttributes } from "react";
|
|
9
|
+
type Props = Record<string, unknown>;
|
|
10
|
+
type Recipe = {
|
|
11
|
+
(props?: Props): Props;
|
|
12
|
+
splitVariantProps: (props: Props) => [Props, Props];
|
|
13
|
+
};
|
|
14
|
+
type Slot<R extends Recipe> = keyof ReturnType<R>;
|
|
15
|
+
/**
|
|
16
|
+
* A utility for creating a style context for a recipe, allowing one to change the styles of all parts of a component from the root component. Credit: https://github.com/cschroeter/park-ui/blob/main/website/src/lib/create-style-context.tsx.
|
|
17
|
+
*/
|
|
18
|
+
export declare const createStyleContext: <R extends Recipe>(recipe: R) => {
|
|
19
|
+
withRootProvider: <P extends {}>(Component: ElementType) => (props: P) => import("@emotion/react/jsx-runtime").JSX.Element;
|
|
20
|
+
withProvider: <T, P_1 extends {
|
|
21
|
+
className?: string | undefined;
|
|
22
|
+
}>(Component: ElementType, slot: Slot<R>) => ForwardRefExoticComponent<PropsWithoutRef<P_1> & RefAttributes<T>>;
|
|
23
|
+
withContext: <T_1, P_2 extends {
|
|
24
|
+
className?: string | undefined;
|
|
25
|
+
}>(Component: ElementType, slot: Slot<R>) => ForwardRefExoticComponent<PropsWithoutRef<P_2> & RefAttributes<T_1>>;
|
|
26
|
+
};
|
|
27
|
+
export {};
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.createStyleContext = void 0;
|
|
7
|
+
var _react = require("react");
|
|
8
|
+
var _css = require("@ndla/styled-system/css");
|
|
9
|
+
var _jsx2 = require("@ndla/styled-system/jsx");
|
|
10
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
11
|
+
/**
|
|
12
|
+
* Copyright (c) 2024-present, NDLA.
|
|
13
|
+
*
|
|
14
|
+
* This source code is licensed under the GPLv3 license found in the
|
|
15
|
+
* LICENSE file in the root directory of this source tree.
|
|
16
|
+
*
|
|
17
|
+
*/
|
|
18
|
+
|
|
19
|
+
/**
|
|
20
|
+
* A utility for creating a style context for a recipe, allowing one to change the styles of all parts of a component from the root component. Credit: https://github.com/cschroeter/park-ui/blob/main/website/src/lib/create-style-context.tsx.
|
|
21
|
+
*/
|
|
22
|
+
const createStyleContext = recipe => {
|
|
23
|
+
const StyleContext = /*#__PURE__*/(0, _react.createContext)(null);
|
|
24
|
+
const withRootProvider = Component => {
|
|
25
|
+
const StyledComponent = props => {
|
|
26
|
+
const [variantProps, otherProps] = recipe.splitVariantProps(props);
|
|
27
|
+
const slotStyles = recipe(variantProps);
|
|
28
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyleContext.Provider, {
|
|
29
|
+
value: slotStyles,
|
|
30
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
|
|
31
|
+
...otherProps
|
|
32
|
+
})
|
|
33
|
+
});
|
|
34
|
+
};
|
|
35
|
+
return StyledComponent;
|
|
36
|
+
};
|
|
37
|
+
const withProvider = (Component, slot) => {
|
|
38
|
+
const StyledComponent = (0, _jsx2.styled)(Component);
|
|
39
|
+
return /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
|
|
40
|
+
const [variantProps, otherProps] = recipe.splitVariantProps(props);
|
|
41
|
+
const slotStyles = recipe(variantProps);
|
|
42
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyleContext.Provider, {
|
|
43
|
+
value: slotStyles,
|
|
44
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledComponent, {
|
|
45
|
+
...otherProps,
|
|
46
|
+
ref: ref,
|
|
47
|
+
className: (0, _css.cx)(slotStyles === null || slotStyles === void 0 ? void 0 : slotStyles[slot], props.className)
|
|
48
|
+
})
|
|
49
|
+
});
|
|
50
|
+
});
|
|
51
|
+
};
|
|
52
|
+
const withContext = (Component, slot) => {
|
|
53
|
+
const StyledComponent = (0, _jsx2.styled)(Component);
|
|
54
|
+
return /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
|
|
55
|
+
const slotStyles = (0, _react.useContext)(StyleContext);
|
|
56
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledComponent, {
|
|
57
|
+
...props,
|
|
58
|
+
ref: ref,
|
|
59
|
+
className: (0, _css.cx)(slotStyles === null || slotStyles === void 0 ? void 0 : slotStyles[slot], props.className)
|
|
60
|
+
});
|
|
61
|
+
});
|
|
62
|
+
};
|
|
63
|
+
return {
|
|
64
|
+
withRootProvider,
|
|
65
|
+
withProvider,
|
|
66
|
+
withContext
|
|
67
|
+
};
|
|
68
|
+
};
|
|
69
|
+
exports.createStyleContext = createStyleContext;
|
package/lib/index.d.ts
ADDED
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright (c) 2024-present, NDLA.
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the GPLv3 license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*
|
|
7
|
+
*/
|
|
8
|
+
export type { BlockQuoteVariantProps, BlockQuoteProps } from "./BlockQuote";
|
|
9
|
+
export { BlockQuote } from "./BlockQuote";
|
|
10
|
+
export { Button, IconButton } from "./Button";
|
|
11
|
+
export type { ButtonProps, IconButtonProps } from "./Button";
|
|
12
|
+
export { ExpandableBox, ExpandableBoxSummary } from "./ExpandableBox";
|
|
13
|
+
export type { ExpandableBoxProps, ExpandableBoxSummaryProps } from "./ExpandableBox";
|
|
14
|
+
export { Input, InputContainer, TextArea } from "./Input";
|
|
15
|
+
export { OrderedList, UnOrderedList } from "./ArticleLists";
|
|
16
|
+
export type { OrderedListProps, OrderedListVariantProps, UnOrderedListProps } from "./ArticleLists";
|
|
17
|
+
export { Icon } from "./Icon";
|
|
18
|
+
export type { IconProps } from "./Icon";
|
|
19
|
+
export { NdlaLogoEn, NdlaLogoNb, NdlaLogoText } from "./NdlaLogo";
|
|
20
|
+
export type { LogoProps } from "./NdlaLogo";
|
|
21
|
+
export { Spinner } from "./Spinner";
|
|
22
|
+
export type { SpinnerProps } from "./Spinner";
|
|
23
|
+
export { Table } from "./Table";
|
|
24
|
+
export type { TableProps } from "./Table";
|
|
25
|
+
export { Text, Heading } from "./Text";
|
|
26
|
+
export type { TextProps } from "./Text";
|
|
27
|
+
export type { MessageBoxVariantProps, MessageBoxProps } from "./MessageBox";
|
|
28
|
+
export { MessageBox } from "./MessageBox";
|