@ndla/primitives 0.0.2 → 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.
Files changed (84) hide show
  1. package/dist/panda.buildinfo.json +61 -14
  2. package/dist/styles.css +226 -26
  3. package/es/ArticleLists.js +4 -32
  4. package/es/Badge.js +4 -16
  5. package/es/BlockQuote.js +3 -15
  6. package/es/Button.js +40 -33
  7. package/es/Dialog.js +6 -7
  8. package/es/ExpandableBox.js +4 -17
  9. package/es/FieldErrorMessage.js +9 -7
  10. package/es/FieldHelper.js +7 -5
  11. package/es/FormControl.js +2 -1
  12. package/es/FramedContent.js +3 -15
  13. package/es/Icon.js +9 -6
  14. package/es/Input.js +13 -10
  15. package/es/Label.js +10 -9
  16. package/es/Menu.js +32 -6
  17. package/es/MessageBox.js +3 -15
  18. package/es/NdlaLogo.js +6 -5
  19. package/es/RadioGroup.js +6 -2
  20. package/es/Skeleton.js +2 -8
  21. package/es/Spinner.js +3 -15
  22. package/es/Switch.js +8 -4
  23. package/es/Table.js +2 -5
  24. package/es/Tabs.js +232 -0
  25. package/es/Text.js +33 -32
  26. package/es/Toast.js +14 -6
  27. package/es/createStyleContext.js +15 -7
  28. package/lib/Accordion.d.ts +14 -7
  29. package/lib/ArticleLists.d.ts +9 -11
  30. package/lib/ArticleLists.js +5 -36
  31. package/lib/Badge.d.ts +9 -4
  32. package/lib/Badge.js +4 -17
  33. package/lib/BlockQuote.d.ts +8 -3
  34. package/lib/BlockQuote.js +3 -16
  35. package/lib/Button.d.ts +24 -11
  36. package/lib/Button.js +39 -32
  37. package/lib/Checkbox.d.ts +12 -5
  38. package/lib/Dialog.d.ts +18 -10
  39. package/lib/Dialog.js +6 -7
  40. package/lib/ExpandableBox.d.ts +8 -5
  41. package/lib/ExpandableBox.js +5 -20
  42. package/lib/FieldErrorMessage.d.ts +3 -3
  43. package/lib/FieldErrorMessage.js +8 -6
  44. package/lib/FieldHelper.d.ts +3 -3
  45. package/lib/FieldHelper.js +6 -4
  46. package/lib/FormControl.d.ts +4 -2
  47. package/lib/FormControl.js +2 -1
  48. package/lib/FramedContent.d.ts +8 -4
  49. package/lib/FramedContent.js +3 -16
  50. package/lib/Icon.d.ts +3 -2
  51. package/lib/Icon.js +8 -5
  52. package/lib/Input.d.ts +12 -11
  53. package/lib/Input.js +12 -9
  54. package/lib/Label.d.ts +16 -7
  55. package/lib/Label.js +9 -8
  56. package/lib/Menu.d.ts +66 -13
  57. package/lib/Menu.js +41 -15
  58. package/lib/MessageBox.d.ts +8 -4
  59. package/lib/MessageBox.js +3 -16
  60. package/lib/NdlaLogo.d.ts +5 -4
  61. package/lib/NdlaLogo.js +5 -4
  62. package/lib/Pagination.d.ts +17 -6
  63. package/lib/Popover.d.ts +34 -13
  64. package/lib/RadioGroup.d.ts +18 -7
  65. package/lib/RadioGroup.js +6 -2
  66. package/lib/Skeleton.d.ts +5 -2
  67. package/lib/Skeleton.js +3 -10
  68. package/lib/Slider.d.ts +18 -7
  69. package/lib/Spinner.d.ts +8 -3
  70. package/lib/Spinner.js +3 -16
  71. package/lib/Switch.d.ts +12 -7
  72. package/lib/Switch.js +9 -5
  73. package/lib/Table.d.ts +6 -3
  74. package/lib/Table.js +4 -8
  75. package/lib/Tabs.d.ts +145 -0
  76. package/lib/Tabs.js +240 -0
  77. package/lib/Text.d.ts +6 -9
  78. package/lib/Text.js +32 -33
  79. package/lib/Toast.d.ts +10 -7
  80. package/lib/Toast.js +15 -7
  81. package/lib/Tooltip.d.ts +19 -7
  82. package/lib/createStyleContext.d.ts +5 -3
  83. package/lib/createStyleContext.js +14 -6
  84. 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
- 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 {};
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 BaseText = props => {
18
- const {
19
- as: As = "p",
20
- className,
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
- } = props;
27
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(As, {
28
- className: (0, _css.cx)((0, _css.css)({
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: srOnly
33
- }), className),
35
+ srOnly
36
+ }, cssProp),
37
+ ref: ref,
34
38
  ...rest
35
39
  });
36
- };
37
- const Heading = props => {
38
- const {
39
- as = "h1",
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
- } = 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,
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<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;
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 = exports.InternalToastTitle = exports.InternalToastDescription = void 0;
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 = exports.InternalToastDescription = withContext(_react.Toast.Description, "description");
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
- as: "div",
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 = exports.InternalToastTitle = withContext(_react.Toast.Title, "title");
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
- as: "div",
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("@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>>;
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("@emotion/react/jsx-runtime").JSX.Element;
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)((props, ref) => {
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
- className: (0, _css.cx)(slotStyles === null || slotStyles === void 0 ? void 0 : slotStyles[slot], props.className)
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)((props, ref) => {
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
- className: (0, _css.cx)(slotStyles === null || slotStyles === void 0 ? void 0 : slotStyles[slot], props.className)
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.2",
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.3.1",
32
- "@ark-ui/react": "^3.3.0",
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.1",
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": "882ce593e9f688151f370555f8203ca467ac7e2b"
47
+ "gitHead": "c3c7ec99f9fa1bcd8e6d6f0c96d77f59773323cc"
48
48
  }