@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.
Files changed (97) hide show
  1. package/LICENSE +674 -0
  2. package/dist/panda.buildinfo.json +426 -0
  3. package/dist/styles.css +1738 -0
  4. package/es/Accordion.js +103 -0
  5. package/es/ArticleLists.js +106 -0
  6. package/es/Badge.js +55 -0
  7. package/es/BlockQuote.js +49 -0
  8. package/es/Button.js +211 -0
  9. package/es/Checkbox.js +118 -0
  10. package/es/Dialog.js +329 -0
  11. package/es/ExpandableBox.js +55 -0
  12. package/es/FieldErrorMessage.js +44 -0
  13. package/es/FieldHelper.js +37 -0
  14. package/es/FormControl.js +163 -0
  15. package/es/FramedContent.js +54 -0
  16. package/es/Icon.js +71 -0
  17. package/es/Input.js +159 -0
  18. package/es/Label.js +104 -0
  19. package/es/Menu.js +171 -0
  20. package/es/MessageBox.js +57 -0
  21. package/es/NdlaLogo.js +284 -0
  22. package/es/Pagination.js +37 -0
  23. package/es/Popover.js +78 -0
  24. package/es/RadioGroup.js +136 -0
  25. package/es/Skeleton.js +31 -0
  26. package/es/Slider.js +102 -0
  27. package/es/Spinner.js +54 -0
  28. package/es/Switch.js +130 -0
  29. package/es/Table.js +75 -0
  30. package/es/Text.js +54 -0
  31. package/es/Toast.js +82 -0
  32. package/es/Tooltip.js +59 -0
  33. package/es/createStyleContext.js +62 -0
  34. package/es/index.js +19 -0
  35. package/lib/Accordion.d.ts +17 -0
  36. package/lib/Accordion.js +109 -0
  37. package/lib/ArticleLists.d.ts +20 -0
  38. package/lib/ArticleLists.js +115 -0
  39. package/lib/Badge.d.ts +33 -0
  40. package/lib/Badge.js +62 -0
  41. package/lib/BlockQuote.d.ts +28 -0
  42. package/lib/BlockQuote.js +56 -0
  43. package/lib/Button.d.ts +131 -0
  44. package/lib/Button.js +217 -0
  45. package/lib/Checkbox.d.ts +15 -0
  46. package/lib/Checkbox.js +125 -0
  47. package/lib/Dialog.d.ts +107 -0
  48. package/lib/Dialog.js +338 -0
  49. package/lib/ExpandableBox.d.ts +12 -0
  50. package/lib/ExpandableBox.js +63 -0
  51. package/lib/FieldErrorMessage.d.ts +11 -0
  52. package/lib/FieldErrorMessage.js +50 -0
  53. package/lib/FieldHelper.d.ts +11 -0
  54. package/lib/FieldHelper.js +43 -0
  55. package/lib/FormControl.d.ts +65 -0
  56. package/lib/FormControl.js +173 -0
  57. package/lib/FramedContent.d.ts +32 -0
  58. package/lib/FramedContent.js +61 -0
  59. package/lib/Icon.d.ts +37 -0
  60. package/lib/Icon.js +78 -0
  61. package/lib/Input.d.ts +20 -0
  62. package/lib/Input.js +165 -0
  63. package/lib/Label.d.ts +16 -0
  64. package/lib/Label.js +110 -0
  65. package/lib/Menu.d.ts +25 -0
  66. package/lib/Menu.js +179 -0
  67. package/lib/MessageBox.d.ts +33 -0
  68. package/lib/MessageBox.js +64 -0
  69. package/lib/NdlaLogo.d.ts +15 -0
  70. package/lib/NdlaLogo.js +293 -0
  71. package/lib/Pagination.d.ts +14 -0
  72. package/lib/Pagination.js +43 -0
  73. package/lib/Popover.d.ts +22 -0
  74. package/lib/Popover.js +87 -0
  75. package/lib/RadioGroup.d.ts +19 -0
  76. package/lib/RadioGroup.js +143 -0
  77. package/lib/Skeleton.d.ts +11 -0
  78. package/lib/Skeleton.js +38 -0
  79. package/lib/Slider.d.ts +17 -0
  80. package/lib/Slider.js +109 -0
  81. package/lib/Spinner.d.ts +26 -0
  82. package/lib/Spinner.js +61 -0
  83. package/lib/Switch.d.ts +21 -0
  84. package/lib/Switch.js +137 -0
  85. package/lib/Table.d.ts +10 -0
  86. package/lib/Table.js +82 -0
  87. package/lib/Text.d.ts +24 -0
  88. package/lib/Text.js +62 -0
  89. package/lib/Toast.d.ts +18 -0
  90. package/lib/Toast.js +90 -0
  91. package/lib/Tooltip.d.ts +16 -0
  92. package/lib/Tooltip.js +65 -0
  93. package/lib/createStyleContext.d.ts +27 -0
  94. package/lib/createStyleContext.js +69 -0
  95. package/lib/index.d.ts +28 -0
  96. package/lib/index.js +130 -0
  97. 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;
@@ -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";