@ndla/primitives 0.0.1 → 0.0.3
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/dist/panda.buildinfo.json +62 -14
- package/dist/styles.css +230 -26
- package/es/ArticleLists.js +4 -32
- package/es/Badge.js +4 -16
- package/es/BlockQuote.js +3 -15
- package/es/Button.js +40 -32
- package/es/Dialog.js +6 -7
- package/es/ExpandableBox.js +4 -17
- package/es/FieldErrorMessage.js +9 -7
- package/es/FieldHelper.js +7 -5
- package/es/FormControl.js +2 -1
- package/es/FramedContent.js +3 -15
- package/es/Icon.js +9 -6
- package/es/Input.js +13 -10
- package/es/Label.js +10 -9
- package/es/Menu.js +32 -6
- package/es/MessageBox.js +3 -15
- package/es/NdlaLogo.js +6 -5
- package/es/RadioGroup.js +6 -2
- package/es/Skeleton.js +2 -8
- package/es/Spinner.js +3 -15
- package/es/Switch.js +8 -4
- package/es/Table.js +2 -5
- package/es/Tabs.js +232 -0
- package/es/Text.js +33 -32
- package/es/Toast.js +14 -6
- package/es/createStyleContext.js +15 -7
- package/lib/Accordion.d.ts +14 -7
- package/lib/ArticleLists.d.ts +9 -11
- package/lib/ArticleLists.js +5 -36
- package/lib/Badge.d.ts +9 -4
- package/lib/Badge.js +4 -17
- package/lib/BlockQuote.d.ts +8 -3
- package/lib/BlockQuote.js +3 -16
- package/lib/Button.d.ts +24 -11
- package/lib/Button.js +39 -31
- package/lib/Checkbox.d.ts +12 -5
- package/lib/Dialog.d.ts +18 -10
- package/lib/Dialog.js +6 -7
- package/lib/ExpandableBox.d.ts +8 -5
- package/lib/ExpandableBox.js +5 -20
- package/lib/FieldErrorMessage.d.ts +3 -3
- package/lib/FieldErrorMessage.js +8 -6
- package/lib/FieldHelper.d.ts +3 -3
- package/lib/FieldHelper.js +6 -4
- package/lib/FormControl.d.ts +4 -2
- package/lib/FormControl.js +2 -1
- package/lib/FramedContent.d.ts +8 -4
- package/lib/FramedContent.js +3 -16
- package/lib/Icon.d.ts +3 -2
- package/lib/Icon.js +8 -5
- package/lib/Input.d.ts +12 -11
- package/lib/Input.js +12 -9
- package/lib/Label.d.ts +16 -7
- package/lib/Label.js +9 -8
- package/lib/Menu.d.ts +66 -13
- package/lib/Menu.js +41 -15
- package/lib/MessageBox.d.ts +8 -4
- package/lib/MessageBox.js +3 -16
- package/lib/NdlaLogo.d.ts +5 -4
- package/lib/NdlaLogo.js +5 -4
- package/lib/Pagination.d.ts +17 -6
- package/lib/Popover.d.ts +34 -13
- package/lib/RadioGroup.d.ts +18 -7
- package/lib/RadioGroup.js +6 -2
- package/lib/Skeleton.d.ts +5 -2
- package/lib/Skeleton.js +3 -10
- package/lib/Slider.d.ts +18 -7
- package/lib/Spinner.d.ts +8 -3
- package/lib/Spinner.js +3 -16
- package/lib/Switch.d.ts +12 -7
- package/lib/Switch.js +9 -5
- package/lib/Table.d.ts +6 -3
- package/lib/Table.js +4 -8
- package/lib/Tabs.d.ts +145 -0
- package/lib/Tabs.js +240 -0
- package/lib/Text.d.ts +6 -9
- package/lib/Text.js +32 -33
- package/lib/Toast.d.ts +10 -7
- package/lib/Toast.js +15 -7
- package/lib/Tooltip.d.ts +19 -7
- package/lib/createStyleContext.d.ts +5 -3
- package/lib/createStyleContext.js +14 -6
- package/package.json +5 -5
package/lib/Tabs.js
ADDED
|
@@ -0,0 +1,240 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.TabsTrigger = exports.TabsRoot = exports.TabsList = exports.TabsIndicator = exports.TabsContent = void 0;
|
|
7
|
+
var _react = require("@ark-ui/react");
|
|
8
|
+
var _css = require("@ndla/styled-system/css");
|
|
9
|
+
var _createStyleContext = require("./createStyleContext");
|
|
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
|
+
const tabsRecipe = (0, _css.sva)({
|
|
20
|
+
// TODO: Defining the slots manually fixes an issue with variants not generating properly.
|
|
21
|
+
// Come back to this once ark releases a new version.
|
|
22
|
+
slots: ["root", "list", "trigger", "content", "indicator"],
|
|
23
|
+
base: {
|
|
24
|
+
root: {
|
|
25
|
+
position: "relative",
|
|
26
|
+
display: "flex",
|
|
27
|
+
width: "100%",
|
|
28
|
+
_horizontal: {
|
|
29
|
+
flexDirection: "column"
|
|
30
|
+
},
|
|
31
|
+
_vertical: {
|
|
32
|
+
flexDirection: "row"
|
|
33
|
+
}
|
|
34
|
+
},
|
|
35
|
+
list: {
|
|
36
|
+
position: "relative",
|
|
37
|
+
display: "flex",
|
|
38
|
+
flexShrink: "0",
|
|
39
|
+
overflow: "auto",
|
|
40
|
+
_horizontal: {
|
|
41
|
+
flexDirection: "row"
|
|
42
|
+
},
|
|
43
|
+
_vertical: {
|
|
44
|
+
flexDirection: "column"
|
|
45
|
+
}
|
|
46
|
+
},
|
|
47
|
+
trigger: {
|
|
48
|
+
display: "inline-flex",
|
|
49
|
+
alignItems: "center",
|
|
50
|
+
justifyContent: "center",
|
|
51
|
+
flexShrink: "0",
|
|
52
|
+
cursor: "pointer",
|
|
53
|
+
textStyle: "label.small",
|
|
54
|
+
fontWeight: "bold",
|
|
55
|
+
transitionDuration: "normal",
|
|
56
|
+
transitionProperty: "color, background, border-color",
|
|
57
|
+
transitionTimingFunction: "default",
|
|
58
|
+
whiteSpace: "nowrap",
|
|
59
|
+
paddingInline: "small",
|
|
60
|
+
paddingBlock: "3xsmall",
|
|
61
|
+
zIndex: "1",
|
|
62
|
+
_hover: {
|
|
63
|
+
color: "text.action"
|
|
64
|
+
},
|
|
65
|
+
_selected: {
|
|
66
|
+
color: "text.strong"
|
|
67
|
+
},
|
|
68
|
+
_disabled: {
|
|
69
|
+
color: "text.subtle",
|
|
70
|
+
cursor: "not-allowed",
|
|
71
|
+
_hover: {
|
|
72
|
+
color: "text.subtle"
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
},
|
|
76
|
+
content: {
|
|
77
|
+
display: "flex",
|
|
78
|
+
flexDirection: "column",
|
|
79
|
+
alignItems: "flex-start",
|
|
80
|
+
gap: "xsmall"
|
|
81
|
+
}
|
|
82
|
+
},
|
|
83
|
+
defaultVariants: {
|
|
84
|
+
variant: "line"
|
|
85
|
+
},
|
|
86
|
+
variants: {
|
|
87
|
+
variant: {
|
|
88
|
+
line: {
|
|
89
|
+
trigger: {
|
|
90
|
+
borderColor: "stroke.default",
|
|
91
|
+
_hover: {
|
|
92
|
+
borderColor: "stroke.hover",
|
|
93
|
+
_focusVisible: {
|
|
94
|
+
borderColor: "stroke.default"
|
|
95
|
+
}
|
|
96
|
+
},
|
|
97
|
+
_horizontal: {
|
|
98
|
+
borderBottom: "1px solid"
|
|
99
|
+
},
|
|
100
|
+
_disabled: {
|
|
101
|
+
borderColor: "stroke.default",
|
|
102
|
+
_hover: {
|
|
103
|
+
borderColor: "stroke.default"
|
|
104
|
+
}
|
|
105
|
+
},
|
|
106
|
+
_vertical: {
|
|
107
|
+
borderLeft: "1px solid",
|
|
108
|
+
justifyContent: "flex-start"
|
|
109
|
+
},
|
|
110
|
+
_focusVisible: {
|
|
111
|
+
outline: "none",
|
|
112
|
+
borderRadius: "unset"
|
|
113
|
+
}
|
|
114
|
+
},
|
|
115
|
+
indicator: {
|
|
116
|
+
background: "transparent",
|
|
117
|
+
outline: "4px solid",
|
|
118
|
+
outlineColor: "stroke.default",
|
|
119
|
+
pointerEvents: "none",
|
|
120
|
+
outlineOffset: "-4px",
|
|
121
|
+
_peerFocusVisible: {
|
|
122
|
+
height: "var(--height)",
|
|
123
|
+
width: "var(--width)",
|
|
124
|
+
_horizontal: {
|
|
125
|
+
borderTopRadius: "xsmall"
|
|
126
|
+
},
|
|
127
|
+
_vertical: {
|
|
128
|
+
borderRightRadius: "xsmall"
|
|
129
|
+
}
|
|
130
|
+
},
|
|
131
|
+
_horizontal: {
|
|
132
|
+
bottom: "0",
|
|
133
|
+
height: "2",
|
|
134
|
+
width: "var(--width)"
|
|
135
|
+
},
|
|
136
|
+
_vertical: {
|
|
137
|
+
height: "var(--height)",
|
|
138
|
+
left: "0",
|
|
139
|
+
width: "2"
|
|
140
|
+
}
|
|
141
|
+
},
|
|
142
|
+
content: {
|
|
143
|
+
zIndex: "1",
|
|
144
|
+
_horizontal: {
|
|
145
|
+
paddingBlockStart: "xsmall"
|
|
146
|
+
},
|
|
147
|
+
_vertical: {
|
|
148
|
+
paddingInlineStart: "xsmall"
|
|
149
|
+
},
|
|
150
|
+
_focusVisible: {
|
|
151
|
+
outline: "none",
|
|
152
|
+
boxShadow: "0 0 0 3px var(--shadow-color)",
|
|
153
|
+
boxShadowColor: "stroke.default"
|
|
154
|
+
}
|
|
155
|
+
}
|
|
156
|
+
},
|
|
157
|
+
outline: {
|
|
158
|
+
list: {
|
|
159
|
+
_horizontal: {
|
|
160
|
+
marginBlockEnd: "-1px"
|
|
161
|
+
},
|
|
162
|
+
_vertical: {
|
|
163
|
+
marginInlineEnd: "-1px"
|
|
164
|
+
}
|
|
165
|
+
},
|
|
166
|
+
trigger: {
|
|
167
|
+
borderColor: "transparent",
|
|
168
|
+
borderWidth: "1px",
|
|
169
|
+
_horizontal: {
|
|
170
|
+
borderTopRadius: "xsmall"
|
|
171
|
+
},
|
|
172
|
+
_vertical: {
|
|
173
|
+
borderTopLeftRadius: "xsmall",
|
|
174
|
+
borderBottomLeftRadius: "xsmall"
|
|
175
|
+
},
|
|
176
|
+
_selected: {
|
|
177
|
+
background: "surface.default",
|
|
178
|
+
borderColor: "stroke.subtle",
|
|
179
|
+
_horizontal: {
|
|
180
|
+
borderBottomColor: "transparent"
|
|
181
|
+
},
|
|
182
|
+
_vertical: {
|
|
183
|
+
borderRightColor: "transparent"
|
|
184
|
+
}
|
|
185
|
+
},
|
|
186
|
+
_focusVisible: {
|
|
187
|
+
outline: "3px solid",
|
|
188
|
+
outlineOffset: "-3px",
|
|
189
|
+
outlineColor: "stroke.default"
|
|
190
|
+
}
|
|
191
|
+
},
|
|
192
|
+
content: {
|
|
193
|
+
borderWidth: "1px",
|
|
194
|
+
borderColor: "stroke.subtle",
|
|
195
|
+
background: "surface.default",
|
|
196
|
+
width: "100%",
|
|
197
|
+
padding: "xsmall",
|
|
198
|
+
_focusVisible: {
|
|
199
|
+
outline: "3px solid",
|
|
200
|
+
outlineOffset: "-3px",
|
|
201
|
+
outlineColor: "stroke.default"
|
|
202
|
+
}
|
|
203
|
+
}
|
|
204
|
+
}
|
|
205
|
+
}
|
|
206
|
+
}
|
|
207
|
+
});
|
|
208
|
+
const {
|
|
209
|
+
withProvider,
|
|
210
|
+
withContext
|
|
211
|
+
} = (0, _createStyleContext.createStyleContext)(tabsRecipe);
|
|
212
|
+
const InternalTabsRoot = withProvider(_react.Tabs.Root, "root");
|
|
213
|
+
const TabsRoot = _ref => {
|
|
214
|
+
let {
|
|
215
|
+
lazyMount = true,
|
|
216
|
+
unmountOnExit = true,
|
|
217
|
+
...props
|
|
218
|
+
} = _ref;
|
|
219
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(InternalTabsRoot, {
|
|
220
|
+
lazyMount: lazyMount,
|
|
221
|
+
unmountOnExit: unmountOnExit,
|
|
222
|
+
...props
|
|
223
|
+
});
|
|
224
|
+
};
|
|
225
|
+
exports.TabsRoot = TabsRoot;
|
|
226
|
+
const TabsContent = exports.TabsContent = withContext(_react.Tabs.Content, "content");
|
|
227
|
+
const TabsIndicator = exports.TabsIndicator = withContext(_react.Tabs.Indicator, "indicator");
|
|
228
|
+
const TabsList = exports.TabsList = withContext(_react.Tabs.List, "list");
|
|
229
|
+
const InternalTabsTrigger = withContext(_react.Tabs.Trigger, "trigger");
|
|
230
|
+
const TabsTrigger = _ref2 => {
|
|
231
|
+
let {
|
|
232
|
+
className,
|
|
233
|
+
...props
|
|
234
|
+
} = _ref2;
|
|
235
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(InternalTabsTrigger, {
|
|
236
|
+
className: (0, _css.cx)("peer", className),
|
|
237
|
+
...props
|
|
238
|
+
});
|
|
239
|
+
};
|
|
240
|
+
exports.TabsTrigger = TabsTrigger;
|
package/lib/Text.d.ts
CHANGED
|
@@ -5,7 +5,6 @@
|
|
|
5
5
|
* LICENSE file in the root directory of this source tree.
|
|
6
6
|
*
|
|
7
7
|
*/
|
|
8
|
-
import { ComponentPropsWithoutRef, ElementType } from "react";
|
|
9
8
|
import { ColorToken, FontWeightToken } from "@ndla/styled-system/tokens";
|
|
10
9
|
import { UtilityValues } from "@ndla/styled-system/types/prop-type";
|
|
11
10
|
export interface TextProps {
|
|
@@ -14,11 +13,9 @@ export interface TextProps {
|
|
|
14
13
|
color?: ColorToken;
|
|
15
14
|
srOnly?: boolean;
|
|
16
15
|
}
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
} &
|
|
20
|
-
export
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
export declare const Text: <T extends TextType = "p">(props: Props<T>) => import("@emotion/react/jsx-runtime").JSX.Element;
|
|
24
|
-
export {};
|
|
16
|
+
export declare const Text: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & import("@ark-ui/react").PolymorphicProps & {
|
|
17
|
+
forwardCssProp?: boolean | undefined;
|
|
18
|
+
} & import("@ndla/styled-system/types").WithCss & TextProps & import("react").RefAttributes<HTMLParagraphElement>>;
|
|
19
|
+
export declare const Heading: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & import("@ark-ui/react").PolymorphicProps & {
|
|
20
|
+
forwardCssProp?: boolean | undefined;
|
|
21
|
+
} & import("@ndla/styled-system/types").WithCss & TextProps & import("react").RefAttributes<HTMLHeadingElement>>;
|
package/lib/Text.js
CHANGED
|
@@ -4,7 +4,10 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.Text = exports.Heading = void 0;
|
|
7
|
+
var _react = require("react");
|
|
8
|
+
var _react2 = require("@ark-ui/react");
|
|
7
9
|
var _css = require("@ndla/styled-system/css");
|
|
10
|
+
var _jsx2 = require("@ndla/styled-system/jsx");
|
|
8
11
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
9
12
|
/**
|
|
10
13
|
* Copyright (c) 2024-present, NDLA.
|
|
@@ -14,49 +17,45 @@ var _jsxRuntime = require("react/jsx-runtime");
|
|
|
14
17
|
*
|
|
15
18
|
*/
|
|
16
19
|
|
|
17
|
-
const
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
20
|
+
const StyledP = (0, _jsx2.styled)(_react2.ark.p);
|
|
21
|
+
const Text = exports.Text = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
22
|
+
let {
|
|
23
|
+
textStyle = "body.medium",
|
|
21
24
|
fontWeight,
|
|
22
25
|
color,
|
|
23
|
-
textStyle = "body.medium",
|
|
24
26
|
srOnly,
|
|
27
|
+
css: cssProp,
|
|
25
28
|
...rest
|
|
26
|
-
} =
|
|
27
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(
|
|
28
|
-
|
|
29
|
+
} = _ref;
|
|
30
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledP, {
|
|
31
|
+
css: _css.css.raw({
|
|
29
32
|
textStyle,
|
|
30
33
|
fontWeight,
|
|
31
34
|
color,
|
|
32
|
-
srOnly
|
|
33
|
-
}
|
|
35
|
+
srOnly
|
|
36
|
+
}, cssProp),
|
|
37
|
+
ref: ref,
|
|
34
38
|
...rest
|
|
35
39
|
});
|
|
36
|
-
};
|
|
37
|
-
const
|
|
38
|
-
|
|
39
|
-
|
|
40
|
+
});
|
|
41
|
+
const StyledH1 = (0, _jsx2.styled)(_react2.ark.h1);
|
|
42
|
+
const Heading = exports.Heading = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
|
|
43
|
+
let {
|
|
40
44
|
textStyle = "heading.medium",
|
|
45
|
+
fontWeight,
|
|
46
|
+
color,
|
|
47
|
+
srOnly,
|
|
48
|
+
css: cssProp,
|
|
41
49
|
...rest
|
|
42
|
-
} =
|
|
43
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
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,
|
|
50
|
+
} = _ref2;
|
|
51
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledH1, {
|
|
52
|
+
css: _css.css.raw({
|
|
53
|
+
textStyle,
|
|
54
|
+
fontWeight,
|
|
55
|
+
color,
|
|
56
|
+
srOnly
|
|
57
|
+
}, cssProp),
|
|
58
|
+
ref: ref,
|
|
59
59
|
...rest
|
|
60
60
|
});
|
|
61
|
-
};
|
|
62
|
-
exports.Text = Text;
|
|
61
|
+
});
|
package/lib/Toast.d.ts
CHANGED
|
@@ -6,13 +6,16 @@
|
|
|
6
6
|
*
|
|
7
7
|
*/
|
|
8
8
|
import { Toast } from "@ark-ui/react";
|
|
9
|
+
import { JsxStyleProps } from "@ndla/styled-system/types";
|
|
9
10
|
import { TextProps } from "./Text";
|
|
10
|
-
export interface RootProps extends Toast.RootProps {
|
|
11
|
+
export interface RootProps extends Toast.RootProps, JsxStyleProps {
|
|
11
12
|
}
|
|
12
13
|
export declare const ToastRoot: import("react").ForwardRefExoticComponent<RootProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
13
|
-
export declare const ToastActionTrigger: import("react").ForwardRefExoticComponent<
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
export declare const
|
|
17
|
-
|
|
18
|
-
|
|
14
|
+
export declare const ToastActionTrigger: import("react").ForwardRefExoticComponent<{
|
|
15
|
+
forwardCssProp?: boolean | undefined;
|
|
16
|
+
} & import("@ndla/styled-system/types").WithCss & Toast.ActionTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
|
|
17
|
+
export declare const ToastCloseTrigger: import("react").ForwardRefExoticComponent<{
|
|
18
|
+
forwardCssProp?: boolean | undefined;
|
|
19
|
+
} & import("@ndla/styled-system/types").WithCss & Toast.CloseTriggerProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
20
|
+
export declare const ToastDescription: ({ textStyle, children, ...props }: Toast.DescriptionProps & TextProps & JsxStyleProps) => import("react/jsx-runtime").JSX.Element;
|
|
21
|
+
export declare const ToastTitle: ({ textStyle, fontWeight, children, ...props }: JsxStyleProps & Toast.TitleProps & TextProps) => import("react/jsx-runtime").JSX.Element;
|
package/lib/Toast.js
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.ToastTitle = exports.ToastRoot = exports.ToastDescription = exports.ToastCloseTrigger = exports.ToastActionTrigger =
|
|
6
|
+
exports.ToastTitle = exports.ToastRoot = exports.ToastDescription = exports.ToastCloseTrigger = exports.ToastActionTrigger = void 0;
|
|
7
7
|
var _anatomy = require("@ark-ui/anatomy");
|
|
8
8
|
var _react = require("@ark-ui/react");
|
|
9
9
|
var _css = require("@ndla/styled-system/css");
|
|
@@ -54,36 +54,44 @@ const {
|
|
|
54
54
|
const ToastRoot = exports.ToastRoot = withProvider(_react.Toast.Root, "root");
|
|
55
55
|
const ToastActionTrigger = exports.ToastActionTrigger = withContext(_react.Toast.ActionTrigger, "actionTrigger");
|
|
56
56
|
const ToastCloseTrigger = exports.ToastCloseTrigger = withContext(_react.Toast.CloseTrigger, "closeTrigger");
|
|
57
|
-
const InternalToastDescription =
|
|
57
|
+
const InternalToastDescription = withContext(_react.Toast.Description, "description");
|
|
58
58
|
const ToastDescription = _ref => {
|
|
59
59
|
let {
|
|
60
60
|
textStyle = "label.medium",
|
|
61
|
+
children,
|
|
61
62
|
...props
|
|
62
63
|
} = _ref;
|
|
63
64
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(InternalToastDescription, {
|
|
64
65
|
asChild: true,
|
|
65
66
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.Text, {
|
|
66
|
-
|
|
67
|
+
asChild: true,
|
|
67
68
|
textStyle: textStyle,
|
|
68
|
-
...props
|
|
69
|
+
...props,
|
|
70
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
71
|
+
children: children
|
|
72
|
+
})
|
|
69
73
|
})
|
|
70
74
|
});
|
|
71
75
|
};
|
|
72
76
|
exports.ToastDescription = ToastDescription;
|
|
73
|
-
const InternalToastTitle =
|
|
77
|
+
const InternalToastTitle = withContext(_react.Toast.Title, "title");
|
|
74
78
|
const ToastTitle = _ref2 => {
|
|
75
79
|
let {
|
|
76
80
|
textStyle = "label.medium",
|
|
77
81
|
fontWeight = "semibold",
|
|
82
|
+
children,
|
|
78
83
|
...props
|
|
79
84
|
} = _ref2;
|
|
80
85
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(InternalToastTitle, {
|
|
81
86
|
asChild: true,
|
|
82
87
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.Text, {
|
|
83
|
-
|
|
88
|
+
asChild: true,
|
|
84
89
|
fontWeight: fontWeight,
|
|
85
90
|
textStyle: textStyle,
|
|
86
|
-
...props
|
|
91
|
+
...props,
|
|
92
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
93
|
+
children: children
|
|
94
|
+
})
|
|
87
95
|
})
|
|
88
96
|
});
|
|
89
97
|
};
|
package/lib/Tooltip.d.ts
CHANGED
|
@@ -7,10 +7,22 @@
|
|
|
7
7
|
*/
|
|
8
8
|
import { Tooltip } from "@ark-ui/react";
|
|
9
9
|
export type TooltipRootProps = Tooltip.RootProps;
|
|
10
|
-
export declare const TooltipRoot: (props: Tooltip.RootProps) => import("
|
|
11
|
-
export declare const TooltipArrow: import("react").ForwardRefExoticComponent<
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
export declare const
|
|
15
|
-
|
|
16
|
-
|
|
10
|
+
export declare const TooltipRoot: (props: Tooltip.RootProps) => import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
export declare const TooltipArrow: import("react").ForwardRefExoticComponent<{
|
|
12
|
+
forwardCssProp?: boolean | undefined;
|
|
13
|
+
} & import("@ndla/styled-system/types").WithCss & Tooltip.ArrowProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
14
|
+
export declare const TooltipArrowTip: import("react").ForwardRefExoticComponent<{
|
|
15
|
+
forwardCssProp?: boolean | undefined;
|
|
16
|
+
} & import("@ndla/styled-system/types").WithCss & Tooltip.ArrowTipProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
17
|
+
export declare const TooltipContentStandalone: import("react").ForwardRefExoticComponent<{
|
|
18
|
+
forwardCssProp?: boolean | undefined;
|
|
19
|
+
} & import("@ndla/styled-system/types").WithCss & Tooltip.ContentProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
20
|
+
export declare const TooltipContent: import("react").ForwardRefExoticComponent<{
|
|
21
|
+
forwardCssProp?: boolean | undefined;
|
|
22
|
+
} & import("@ndla/styled-system/types").WithCss & Tooltip.ContentProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
23
|
+
export declare const TooltipPositioner: import("react").ForwardRefExoticComponent<{
|
|
24
|
+
forwardCssProp?: boolean | undefined;
|
|
25
|
+
} & import("@ndla/styled-system/types").WithCss & Tooltip.PositionerProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
26
|
+
export declare const TooltipTrigger: import("react").ForwardRefExoticComponent<{
|
|
27
|
+
forwardCssProp?: boolean | undefined;
|
|
28
|
+
} & import("@ndla/styled-system/types").WithCss & Tooltip.TriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
|
|
@@ -6,9 +6,11 @@
|
|
|
6
6
|
*
|
|
7
7
|
*/
|
|
8
8
|
import { type ElementType, type ForwardRefExoticComponent, type PropsWithoutRef, type RefAttributes } from "react";
|
|
9
|
+
import { WithCss } from "@ndla/styled-system/types";
|
|
9
10
|
type Props = Record<string, unknown>;
|
|
10
11
|
type Recipe = {
|
|
11
12
|
(props?: Props): Props;
|
|
13
|
+
raw: (props?: Props) => Props;
|
|
12
14
|
splitVariantProps: (props: Props) => [Props, Props];
|
|
13
15
|
};
|
|
14
16
|
type Slot<R extends Recipe> = keyof ReturnType<R>;
|
|
@@ -16,12 +18,12 @@ type Slot<R extends Recipe> = keyof ReturnType<R>;
|
|
|
16
18
|
* 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
19
|
*/
|
|
18
20
|
export declare const createStyleContext: <R extends Recipe>(recipe: R) => {
|
|
19
|
-
withRootProvider: <P extends {}>(Component: ElementType) => (props: P) => import("
|
|
21
|
+
withRootProvider: <P extends {}>(Component: ElementType) => (props: P) => import("react/jsx-runtime").JSX.Element;
|
|
20
22
|
withProvider: <T, P_1 extends {
|
|
21
23
|
className?: string | undefined;
|
|
22
|
-
}>(Component: ElementType, slot: Slot<R>) => ForwardRefExoticComponent<PropsWithoutRef<P_1> & RefAttributes<T>>;
|
|
24
|
+
} & WithCss>(Component: ElementType, slot: Slot<R>) => ForwardRefExoticComponent<PropsWithoutRef<P_1> & RefAttributes<T>>;
|
|
23
25
|
withContext: <T_1, P_2 extends {
|
|
24
26
|
className?: string | undefined;
|
|
25
|
-
}>(Component: ElementType, slot: Slot<R>) => ForwardRefExoticComponent<PropsWithoutRef<P_2> & RefAttributes<T_1>>;
|
|
27
|
+
} & WithCss>(Component: ElementType, slot: Slot<R>) => ForwardRefExoticComponent<PropsWithoutRef<P_2> & RefAttributes<T_1>>;
|
|
26
28
|
};
|
|
27
29
|
export {};
|
|
@@ -24,7 +24,7 @@ const createStyleContext = recipe => {
|
|
|
24
24
|
const withRootProvider = Component => {
|
|
25
25
|
const StyledComponent = props => {
|
|
26
26
|
const [variantProps, otherProps] = recipe.splitVariantProps(props);
|
|
27
|
-
const slotStyles = recipe(variantProps);
|
|
27
|
+
const slotStyles = recipe.raw(variantProps);
|
|
28
28
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyleContext.Provider, {
|
|
29
29
|
value: slotStyles,
|
|
30
30
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
|
|
@@ -36,27 +36,35 @@ const createStyleContext = recipe => {
|
|
|
36
36
|
};
|
|
37
37
|
const withProvider = (Component, slot) => {
|
|
38
38
|
const StyledComponent = (0, _jsx2.styled)(Component);
|
|
39
|
-
return /*#__PURE__*/(0, _react.forwardRef)((
|
|
39
|
+
return /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
40
|
+
let {
|
|
41
|
+
css: cssProp,
|
|
42
|
+
...props
|
|
43
|
+
} = _ref;
|
|
40
44
|
const [variantProps, otherProps] = recipe.splitVariantProps(props);
|
|
41
|
-
const slotStyles = recipe(variantProps);
|
|
45
|
+
const slotStyles = recipe.raw(variantProps);
|
|
42
46
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyleContext.Provider, {
|
|
43
47
|
value: slotStyles,
|
|
44
48
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledComponent, {
|
|
45
49
|
...otherProps,
|
|
46
50
|
ref: ref,
|
|
47
|
-
|
|
51
|
+
css: _css.css.raw(slotStyles === null || slotStyles === void 0 ? void 0 : slotStyles[slot], cssProp)
|
|
48
52
|
})
|
|
49
53
|
});
|
|
50
54
|
});
|
|
51
55
|
};
|
|
52
56
|
const withContext = (Component, slot) => {
|
|
53
57
|
const StyledComponent = (0, _jsx2.styled)(Component);
|
|
54
|
-
return /*#__PURE__*/(0, _react.forwardRef)((
|
|
58
|
+
return /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
|
|
59
|
+
let {
|
|
60
|
+
css: cssProp,
|
|
61
|
+
...props
|
|
62
|
+
} = _ref2;
|
|
55
63
|
const slotStyles = (0, _react.useContext)(StyleContext);
|
|
56
64
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledComponent, {
|
|
57
65
|
...props,
|
|
58
66
|
ref: ref,
|
|
59
|
-
|
|
67
|
+
css: _css.css.raw(slotStyles === null || slotStyles === void 0 ? void 0 : slotStyles[slot], cssProp)
|
|
60
68
|
});
|
|
61
69
|
});
|
|
62
70
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ndla/primitives",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.3",
|
|
4
4
|
"description": "Primitive components for NDLA",
|
|
5
5
|
"license": "GPL-3.0",
|
|
6
6
|
"main": "lib/index.js",
|
|
@@ -28,13 +28,13 @@
|
|
|
28
28
|
"lib"
|
|
29
29
|
],
|
|
30
30
|
"dependencies": {
|
|
31
|
-
"@ark-ui/anatomy": "^3.
|
|
32
|
-
"@ark-ui/react": "^3.
|
|
31
|
+
"@ark-ui/anatomy": "^3.4.0",
|
|
32
|
+
"@ark-ui/react": "^3.4.0",
|
|
33
33
|
"@ndla/styled-system": "workspace:^",
|
|
34
34
|
"@ndla/util": "^4.0.4"
|
|
35
35
|
},
|
|
36
36
|
"devDependencies": {
|
|
37
|
-
"@ndla/preset-panda": "^0.0.
|
|
37
|
+
"@ndla/preset-panda": "^0.0.2",
|
|
38
38
|
"@pandacss/dev": "^0.40.1"
|
|
39
39
|
},
|
|
40
40
|
"peerDependencies": {
|
|
@@ -44,5 +44,5 @@
|
|
|
44
44
|
"publishConfig": {
|
|
45
45
|
"access": "public"
|
|
46
46
|
},
|
|
47
|
-
"gitHead": "
|
|
47
|
+
"gitHead": "c3c7ec99f9fa1bcd8e6d6f0c96d77f59773323cc"
|
|
48
48
|
}
|