@ndla/primitives 1.0.87-alpha.0 → 1.0.88-alpha.0

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/dist/panda.buildinfo.json +12 -0
  2. package/dist/styles.css +48 -0
  3. package/lib/DatePicker.d.ts +88 -0
  4. package/lib/index.d.ts +2 -0
  5. package/package.json +2 -2
  6. package/es/Accordion.js +0 -140
  7. package/es/ArticleLists.js +0 -186
  8. package/es/Badge.js +0 -85
  9. package/es/BlockQuote.js +0 -55
  10. package/es/Button.js +0 -320
  11. package/es/Card/Card.js +0 -92
  12. package/es/Checkbox.js +0 -250
  13. package/es/Combobox.js +0 -258
  14. package/es/Dialog.js +0 -409
  15. package/es/ErrorMessage/ErrorMessage.js +0 -80
  16. package/es/ExpandableBox.js +0 -60
  17. package/es/Field.js +0 -25
  18. package/es/FieldErrorMessage.js +0 -68
  19. package/es/FieldHelper.js +0 -59
  20. package/es/Figure.js +0 -125
  21. package/es/FileUpload.js +0 -176
  22. package/es/FramedContent.js +0 -59
  23. package/es/Hero.js +0 -120
  24. package/es/Image.js +0 -165
  25. package/es/Input.js +0 -191
  26. package/es/Label.js +0 -102
  27. package/es/Layout/PageContainer.js +0 -48
  28. package/es/Layout/PageContent.js +0 -106
  29. package/es/ListItem/ListItem.js +0 -216
  30. package/es/Menu.js +0 -226
  31. package/es/MessageBox.js +0 -63
  32. package/es/NdlaLogo.js +0 -287
  33. package/es/Pagination.js +0 -48
  34. package/es/Popover.js +0 -125
  35. package/es/RadioGroup.js +0 -166
  36. package/es/Select.js +0 -239
  37. package/es/Skeleton.js +0 -30
  38. package/es/Slider.js +0 -115
  39. package/es/Spinner.js +0 -67
  40. package/es/Switch.js +0 -143
  41. package/es/Table.js +0 -81
  42. package/es/Tabs.js +0 -257
  43. package/es/TagsInput.js +0 -146
  44. package/es/Text.js +0 -59
  45. package/es/Toast.js +0 -125
  46. package/es/ToggleGroup.js +0 -31
  47. package/es/Tooltip.js +0 -74
  48. package/es/Tree/Tree.js +0 -219
  49. package/es/createStyleContext.js +0 -71
  50. package/es/index.js +0 -53
  51. package/es/storybookHelpers/data.js +0 -212
  52. package/lib/Accordion.js +0 -146
  53. package/lib/ArticleLists.js +0 -192
  54. package/lib/Badge.js +0 -91
  55. package/lib/BlockQuote.js +0 -61
  56. package/lib/Button.js +0 -326
  57. package/lib/Card/Card.js +0 -98
  58. package/lib/Checkbox.js +0 -257
  59. package/lib/Combobox.js +0 -268
  60. package/lib/Dialog.js +0 -418
  61. package/lib/ErrorMessage/ErrorMessage.js +0 -86
  62. package/lib/ExpandableBox.js +0 -66
  63. package/lib/Field.js +0 -31
  64. package/lib/FieldErrorMessage.js +0 -74
  65. package/lib/FieldHelper.js +0 -65
  66. package/lib/Figure.js +0 -131
  67. package/lib/FileUpload.js +0 -182
  68. package/lib/FramedContent.js +0 -65
  69. package/lib/Hero.js +0 -126
  70. package/lib/Image.js +0 -173
  71. package/lib/Input.js +0 -197
  72. package/lib/Label.js +0 -108
  73. package/lib/Layout/PageContainer.js +0 -54
  74. package/lib/Layout/PageContent.js +0 -112
  75. package/lib/ListItem/ListItem.js +0 -222
  76. package/lib/Menu.js +0 -234
  77. package/lib/MessageBox.js +0 -69
  78. package/lib/NdlaLogo.js +0 -296
  79. package/lib/Pagination.js +0 -54
  80. package/lib/Popover.js +0 -134
  81. package/lib/RadioGroup.js +0 -173
  82. package/lib/Select.js +0 -246
  83. package/lib/Skeleton.js +0 -36
  84. package/lib/Slider.js +0 -122
  85. package/lib/Spinner.js +0 -73
  86. package/lib/Switch.js +0 -150
  87. package/lib/Table.js +0 -87
  88. package/lib/Tabs.js +0 -265
  89. package/lib/TagsInput.js +0 -152
  90. package/lib/Text.js +0 -65
  91. package/lib/Toast.js +0 -133
  92. package/lib/ToggleGroup.js +0 -37
  93. package/lib/Tooltip.js +0 -80
  94. package/lib/Tree/Tree.js +0 -227
  95. package/lib/createStyleContext.js +0 -78
  96. package/lib/index.js +0 -1430
  97. package/lib/storybookHelpers/data.js +0 -218
@@ -283,6 +283,18 @@
283
283
  "color]___[value:stroke.default",
284
284
  "textDecoration]___[value:underline]___[cond:_checked",
285
285
  "textDecoration]___[value:underline]___[cond:_highlighted",
286
+ "animation]___[value:fade-shift-in 0.25s ease-in-out]___[cond:_open",
287
+ "animation]___[value:fade-shift-out 0.25s ease-in-out]___[cond:_closed",
288
+ "gap]___[value:5xsmall",
289
+ "borderCollapse]___[value:separate",
290
+ "borderSpacing]___[value:5xsmall",
291
+ "margin]___[value:-5xsmall",
292
+ "content]___[value:'-']___[cond:&[data-today]<___>_before",
293
+ "color]___[value:stroke.default]___[cond:&[data-today]<___>_before",
294
+ "position]___[value:absolute]___[cond:&[data-today]<___>_before",
295
+ "marginBlockStart]___[value:medium]___[cond:&[data-today]<___>_before",
296
+ "color]___[value:text.subtle]___[cond:&[data-outside-range]",
297
+ "fontWeight]___[value:normal]___[cond:&[data-outside-range]",
286
298
  "position]___[value:fixed",
287
299
  "height]___[value:100vh",
288
300
  "width]___[value:100vw",
package/dist/styles.css CHANGED
@@ -392,6 +392,22 @@
392
392
  color: var(--colors-stroke-default);
393
393
  }
394
394
 
395
+ .gap_5xsmall {
396
+ gap: var(--spacing-5xsmall);
397
+ }
398
+
399
+ .bd-cl_separate {
400
+ border-collapse: separate;
401
+ }
402
+
403
+ .bd-sp_5xsmall {
404
+ border-spacing: var(--spacing-5xsmall);
405
+ }
406
+
407
+ .m_-5xsmall {
408
+ margin: calc(var(--spacing-5xsmall) * -1);
409
+ }
410
+
395
411
  .pos_fixed {
396
412
  position: fixed;
397
413
  }
@@ -1709,6 +1725,18 @@
1709
1725
  text-decoration: underline;
1710
1726
  }
1711
1727
 
1728
+ .open\:anim_fade-shift-in_0\.25s_ease-in-out:is([open], [data-open], [data-state="open"]) {
1729
+ animation: fade-shift-in 0.25s ease-in-out;
1730
+ }
1731
+
1732
+ .closed\:anim_fade-shift-out_0\.25s_ease-in-out:is([closed], [data-closed], [data-state="closed"]) {
1733
+ animation: fade-shift-out 0.25s ease-in-out;
1734
+ }
1735
+
1736
+ .\[\&\[data-outside-range\]\]\:c_text\.subtle[data-outside-range] {
1737
+ color: var(--colors-text-subtle);
1738
+ }
1739
+
1712
1740
  .open\:anim_backdrop-in:is([open], [data-open], [data-state="open"]) {
1713
1741
  animation: var(--animations-backdrop-in);
1714
1742
  }
@@ -2064,6 +2092,10 @@
2064
2092
  transition-timing-function: var(--easings-default);
2065
2093
  }
2066
2094
 
2095
+ .\[\&\[data-outside-range\]\]\:fw_normal[data-outside-range] {
2096
+ font-weight: var(--font-weights-normal);
2097
+ }
2098
+
2067
2099
  .\[\&_\>_\*\]\:grid-cs_2 > * {
2068
2100
  grid-column-start: 2;
2069
2101
  }
@@ -2602,6 +2634,18 @@
2602
2634
  transform: rotate(180deg);
2603
2635
  }
2604
2636
 
2637
+ .\[\&\[data-today\]\]\:before\:c_stroke\.default[data-today]::before {
2638
+ color: var(--colors-stroke-default);
2639
+ }
2640
+
2641
+ .\[\&\[data-today\]\]\:before\:pos_absolute[data-today]::before {
2642
+ position: absolute;
2643
+ }
2644
+
2645
+ .\[\&\[data-today\]\]\:before\:mbs_medium[data-today]::before {
2646
+ margin-block-start: var(--spacing-medium);
2647
+ }
2648
+
2605
2649
  .open\:\[\&_summary\,_\[data-embed-type\=\'expandable-box-summary\'\]\]\:mbe_-xxsmall:is([open], [data-open], [data-state="open"]) summary,.open\:\[\&_summary\,_\[data-embed-type\=\'expandable-box-summary\'\]\]\:mbe_-xxsmall:is([open], [data-open], [data-state="open"]) [data-embed-type='expandable-box-summary'] {
2606
2650
  margin-block-end: calc(var(--spacing-xxsmall) * -1);
2607
2651
  }
@@ -2748,6 +2792,10 @@
2748
2792
  background-color: var(--colors-surface-default);
2749
2793
  }
2750
2794
 
2795
+ .\[\&\[data-today\]\]\:before\:content_\'-\'[data-today]::before {
2796
+ content: '-';
2797
+ }
2798
+
2751
2799
  .first\:hover\:bd-bs-c_var\(--border-hover\):first-child:is(:hover, [data-hover]) {
2752
2800
  border-block-start-color: var(--border-hover);
2753
2801
  }
@@ -0,0 +1,88 @@
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 { DatePicker } from "@ark-ui/react";
9
+ import type { JsxStyleProps } from "@ndla/styled-system/types";
10
+ import type { TextProps } from "./Text";
11
+ export interface DatePickerRootProps extends DatePicker.RootProps, JsxStyleProps {
12
+ translations: DatePicker.RootProps["translations"];
13
+ locale: DatePicker.RootProps["locale"];
14
+ }
15
+ export declare const DatePickerRoot: import("react").ForwardRefExoticComponent<DatePickerRootProps & import("react").RefAttributes<HTMLDivElement>>;
16
+ interface ClearTriggerProps extends DatePicker.ClearTriggerProps, JsxStyleProps {
17
+ }
18
+ export declare const DatePickerClearTrigger: import("react").ForwardRefExoticComponent<ClearTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
19
+ export declare const DatePickerContent: import("react").ForwardRefExoticComponent<DatePicker.ContentProps & {
20
+ consumeCss?: boolean;
21
+ } & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLDivElement>>;
22
+ interface DatePickerContentProps extends DatePicker.ContentProps, JsxStyleProps {
23
+ }
24
+ export declare const DatePickerStandaloneContent: import("react").ForwardRefExoticComponent<DatePickerContentProps & import("react").RefAttributes<HTMLDivElement>>;
25
+ interface DatePickerControlProps extends DatePicker.ControlProps, JsxStyleProps {
26
+ }
27
+ export declare const DatePickerControl: import("react").ForwardRefExoticComponent<DatePickerControlProps & import("react").RefAttributes<HTMLDivElement>>;
28
+ interface DatePickerInputProps extends DatePicker.InputProps, JsxStyleProps {
29
+ }
30
+ export declare const DatePickerInput: import("react").ForwardRefExoticComponent<DatePickerInputProps & import("react").RefAttributes<HTMLInputElement>>;
31
+ interface DatePickerLabelProps extends DatePicker.LabelProps, JsxStyleProps {
32
+ }
33
+ export declare const DatePickerLabel: ({ textStyle, fontWeight, ...props }: DatePickerLabelProps & TextProps) => import("react/jsx-runtime").JSX.Element;
34
+ interface DatePickerMonthSelectProps extends DatePicker.MonthSelectProps, JsxStyleProps {
35
+ }
36
+ export declare const DatePickerMonthSelect: import("react").ForwardRefExoticComponent<DatePickerMonthSelectProps & import("react").RefAttributes<HTMLSelectElement>>;
37
+ interface DatePickerNextTrigger extends DatePicker.NextTriggerProps, JsxStyleProps {
38
+ }
39
+ export declare const DatePickerNextTrigger: import("react").ForwardRefExoticComponent<DatePickerNextTrigger & import("react").RefAttributes<HTMLButtonElement>>;
40
+ interface DatePickerPositionerProps extends DatePicker.PositionerProps, JsxStyleProps {
41
+ }
42
+ export declare const DatePickerPositioner: import("react").ForwardRefExoticComponent<DatePickerPositionerProps & import("react").RefAttributes<HTMLDivElement>>;
43
+ interface DatePickerPresetTriggerProps extends DatePicker.PresetTriggerProps, JsxStyleProps {
44
+ }
45
+ export declare const DatePickerPresetTrigger: import("react").ForwardRefExoticComponent<DatePickerPresetTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
46
+ interface DatePickerPrevTriggerProps extends DatePicker.PrevTriggerProps, JsxStyleProps {
47
+ }
48
+ export declare const DatePickerPrevTrigger: import("react").ForwardRefExoticComponent<DatePickerPrevTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
49
+ interface DatePickerRangeTextProps extends DatePicker.RangeTextProps, JsxStyleProps {
50
+ }
51
+ export declare const DatePickerRangeText: import("react").ForwardRefExoticComponent<DatePickerRangeTextProps & import("react").RefAttributes<HTMLDivElement>>;
52
+ interface DatePickerTableBodyProps extends DatePicker.TableBodyProps, JsxStyleProps {
53
+ }
54
+ export declare const DatePickerTableBody: import("react").ForwardRefExoticComponent<DatePickerTableBodyProps & import("react").RefAttributes<HTMLTableSectionElement>>;
55
+ interface DatePickerTableCellProps extends DatePicker.TableCellProps, JsxStyleProps {
56
+ }
57
+ export declare const DatePickerTableCell: import("react").ForwardRefExoticComponent<DatePickerTableCellProps & import("react").RefAttributes<HTMLTableCellElement>>;
58
+ interface DatePickerTableCellTriggerProps extends DatePicker.TableCellTriggerProps, JsxStyleProps {
59
+ }
60
+ export declare const DatePickerTableCellTrigger: import("react").ForwardRefExoticComponent<DatePickerTableCellTriggerProps & import("react").RefAttributes<HTMLDivElement>>;
61
+ interface DatePickerTableHeadProps extends DatePicker.TableHeadProps, JsxStyleProps {
62
+ }
63
+ export declare const DatePickerTableHead: import("react").ForwardRefExoticComponent<DatePickerTableHeadProps & import("react").RefAttributes<HTMLTableSectionElement>>;
64
+ interface DatePickerTableHeaderProps extends DatePicker.TableHeaderProps, JsxStyleProps {
65
+ }
66
+ export declare const DatePickerTableHeader: import("react").ForwardRefExoticComponent<DatePickerTableHeaderProps & import("react").RefAttributes<HTMLTableCellElement>>;
67
+ interface DatePickerTableProps extends DatePicker.TableProps, JsxStyleProps {
68
+ }
69
+ export declare const DatePickerTable: import("react").ForwardRefExoticComponent<DatePickerTableProps & import("react").RefAttributes<HTMLTableElement>>;
70
+ interface DatePickerTableRowProps extends DatePicker.TableRowProps, JsxStyleProps {
71
+ }
72
+ export declare const DatePickerTableRow: import("react").ForwardRefExoticComponent<DatePickerTableRowProps & import("react").RefAttributes<HTMLTableRowElement>>;
73
+ interface DatePickerTriggerProps extends DatePicker.TriggerProps, JsxStyleProps {
74
+ }
75
+ export declare const DatePickerTrigger: import("react").ForwardRefExoticComponent<DatePickerTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
76
+ interface DatePickerViewControlProps extends DatePicker.ViewControlProps, JsxStyleProps {
77
+ }
78
+ export declare const DatePickerViewControl: import("react").ForwardRefExoticComponent<DatePickerViewControlProps & import("react").RefAttributes<HTMLDivElement>>;
79
+ interface DatePickerViewProps extends DatePicker.ViewProps, JsxStyleProps {
80
+ }
81
+ export declare const DatePickerView: import("react").ForwardRefExoticComponent<DatePickerViewProps & import("react").RefAttributes<HTMLDivElement>>;
82
+ interface DatePickerViewTriggerProps extends DatePicker.ViewTriggerProps, JsxStyleProps {
83
+ }
84
+ export declare const DatePickerViewTrigger: import("react").ForwardRefExoticComponent<DatePickerViewTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
85
+ interface DatePickerYearSelectProps extends DatePicker.YearSelectProps, JsxStyleProps {
86
+ }
87
+ export declare const DatePickerYearSelect: import("react").ForwardRefExoticComponent<DatePickerYearSelectProps & import("react").RefAttributes<HTMLSelectElement>>;
88
+ export { DatePickerContext } from "@ark-ui/react";
package/lib/index.d.ts CHANGED
@@ -24,6 +24,8 @@ export type { CheckboxVariantProps, CheckboxRootProps } from "./Checkbox";
24
24
  export { CheckboxRoot, CheckboxIndicator, CheckboxLabel, CheckboxControl, CheckboxGroup, CheckboxHiddenInput, } from "./Checkbox";
25
25
  export type { ComboboxVariantProps, ComboboxRootProps, ComboboxClearTriggerProps, ComboboxContentProps, ComboboxControlProps, ComboboxInputProps, ComboboxItemGroupLabelProps, ComboboxItemGroupProps, ComboboxItemProps, ComboboxItemIndicatorProps, ComboboxItemTextProps, ComboboxLabelProps, ComboboxPositionerProps, ComboboxTriggerProps, ComboboxListProps, } from "./Combobox";
26
26
  export { ComboboxRoot, ComboboxClearTrigger, ComboboxContent, ComboboxContentStandalone, ComboboxControl, ComboboxInput, ComboboxItemGroupLabel, ComboboxItemGroup, ComboboxItemIndicator, ComboboxItem, ComboboxItemText, ComboboxLabel, ComboboxPositioner, ComboboxTrigger, ComboboxList, } from "./Combobox";
27
+ export type { DatePickerRootProps } from "./DatePicker";
28
+ export { DatePickerRoot, DatePickerClearTrigger, DatePickerContent, DatePickerStandaloneContent, DatePickerControl, DatePickerInput, DatePickerLabel, DatePickerMonthSelect, DatePickerNextTrigger, DatePickerPositioner, DatePickerPresetTrigger, DatePickerPrevTrigger, DatePickerRangeText, DatePickerTableBody, DatePickerTableCell, DatePickerTableCellTrigger, DatePickerTableHead, DatePickerTableHeader, DatePickerTable, DatePickerTableRow, DatePickerTrigger, DatePickerViewControl, DatePickerView, DatePickerViewTrigger, DatePickerYearSelect, DatePickerContext, } from "./DatePicker";
27
29
  export type { DialogVariantProps, DialogRootProps } from "./Dialog";
28
30
  export { DialogRoot, DialogBackdrop, DialogStandaloneContent, DialogPositioner, DialogContent, DialogDescription, DialogTitle, DialogTrigger, DialogCloseTrigger, DialogHeader, DialogBody, DialogFooter, useDialog, DialogRootProvider, } from "./Dialog";
29
31
  export type { ExpandableBoxProps, ExpandableBoxSummaryProps } from "./ExpandableBox";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ndla/primitives",
3
- "version": "1.0.87-alpha.0",
3
+ "version": "1.0.88-alpha.0",
4
4
  "description": "Primitive components for NDLA",
5
5
  "license": "GPL-3.0",
6
6
  "main": "lib/index.js",
@@ -43,5 +43,5 @@
43
43
  "publishConfig": {
44
44
  "access": "public"
45
45
  },
46
- "gitHead": "168853a36b0654ff01db41b8b78e81b1afb66768"
46
+ "gitHead": "52adafa4348c1c02ebc4da28317aa5270cbe2a80"
47
47
  }
package/es/Accordion.js DELETED
@@ -1,140 +0,0 @@
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
-
9
- import { Accordion, accordionAnatomy } from "@ark-ui/react";
10
- import { sva } from "@ndla/styled-system/css";
11
- import { createStyleContext } from "./createStyleContext";
12
- const accordionRecipe = sva({
13
- slots: accordionAnatomy.keys(),
14
- base: {
15
- root: {
16
- display: "flex",
17
- flexDirection: "column",
18
- gap: "3xsmall"
19
- },
20
- itemTrigger: {
21
- display: "flex",
22
- alignItems: "center",
23
- justifyContent: "space-between",
24
- background: "surface.default",
25
- cursor: "pointer",
26
- transitionDuration: "fast",
27
- transitionTimingFunction: "default",
28
- transitionProperty: "background, border-color, border, border-radius",
29
- _closed: {
30
- transitionProperty: "background, border-color, border, border-radius"
31
- },
32
- _disabled: {
33
- cursor: "not-allowed",
34
- background: "surface.disabled.subtle",
35
- boxShadowColor: "stroke.disabled",
36
- color: "text.disabled",
37
- _hover: {
38
- background: "surface.disabled.subtle",
39
- boxShadowColor: "stroke.disabled",
40
- color: "text.disabled"
41
- }
42
- }
43
- },
44
- itemIndicator: {
45
- color: "icon.strong",
46
- transformOrigin: "center",
47
- transitionDuration: "normal",
48
- transitionProperty: "transform",
49
- transitionTimingFunction: "default",
50
- _open: {
51
- transform: "rotate(180deg)"
52
- },
53
- _motionReduce: {
54
- transition: "none",
55
- transitionDuration: "0s"
56
- }
57
- },
58
- itemContent: {
59
- overflow: "hidden",
60
- // TODO: Is this needed?
61
- transitionProperty: "padding-bottom",
62
- transitionDuration: "normal",
63
- transitionTimingFunction: "default",
64
- paddingBlock: "xsmall",
65
- paddingInline: "small",
66
- _open: {
67
- animation: "collapse-in",
68
- _motionReduce: {
69
- animation: "none"
70
- }
71
- },
72
- _closed: {
73
- animation: "collapse-out",
74
- _motionReduce: {
75
- animation: "none"
76
- }
77
- }
78
- },
79
- item: {
80
- width: "100%"
81
- }
82
- },
83
- defaultVariants: {
84
- variant: "bordered"
85
- },
86
- variants: {
87
- variant: {
88
- clean: {},
89
- bordered: {
90
- itemTrigger: {
91
- paddingInline: "medium",
92
- paddingBlock: "medium",
93
- width: "100%",
94
- borderRadius: "xsmall",
95
- boxShadowColor: "stroke.subtle",
96
- boxShadow: "inset 0 0 0 1px var(--shadow-color)",
97
- _hover: {
98
- background: "surface.actionSubtle.hover",
99
- boxShadowColor: "stroke.hover"
100
- },
101
- _open: {
102
- background: "surface.actionSubtle.active",
103
- boxShadowColor: "stroke.default",
104
- borderBottomRadius: "sharp"
105
- },
106
- _focusVisible: {
107
- outline: "none",
108
- boxShadowColor: "stroke.default",
109
- boxShadow: "inset 0 0 0 3px var(--shadow-color)"
110
- }
111
- },
112
- itemContent: {
113
- borderBottomRadius: "xsmall",
114
- borderWidth: "0 1px 1px",
115
- borderStyle: "solid",
116
- borderColor: "stroke.default"
117
- }
118
- }
119
- }
120
- }
121
- });
122
- const {
123
- withProvider,
124
- withContext
125
- } = createStyleContext(accordionRecipe);
126
- export const AccordionRoot = withProvider(Accordion.Root, "root", {
127
- baseComponent: true
128
- });
129
- export const AccordionItemContent = withContext(Accordion.ItemContent, "itemContent", {
130
- baseComponent: true
131
- });
132
- export const AccordionItemIndicator = withContext(Accordion.ItemIndicator, "itemIndicator", {
133
- baseComponent: true
134
- });
135
- export const AccordionItem = withContext(Accordion.Item, "item", {
136
- baseComponent: true
137
- });
138
- export const AccordionItemTrigger = withContext(Accordion.ItemTrigger, "itemTrigger", {
139
- baseComponent: true
140
- });
@@ -1,186 +0,0 @@
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
-
9
- import { forwardRef, useMemo } from "react";
10
- import { ark } from "@ark-ui/react";
11
- import { css, cva } from "@ndla/styled-system/css";
12
- import { styled } from "@ndla/styled-system/jsx";
13
- import { jsx as _jsx } from "react/jsx-runtime";
14
- const LIST_ITEM = "& > li";
15
- const LETTER_LIST = "& > ol[data-variant='letters']";
16
- const NUMBER_LIST = "& > ol:not([data-variant='letters'])";
17
- const LETTER_LIST_ITEM = `${LETTER_LIST} > li`;
18
- const orderedListRecipe = cva({
19
- base: {
20
- marginInlineStart: "small",
21
- paddingInlineStart: "small",
22
- [LIST_ITEM]: {
23
- "& > ul": {
24
- marginInlineStart: "0 !important"
25
- },
26
- _before: {
27
- position: "absolute",
28
- transform: "translateX(calc(-100% + (token(spacing.small) * -1)))",
29
- fontVariantNumeric: "tabular-nums"
30
- }
31
- },
32
- "& li": {
33
- marginBlock: "small"
34
- }
35
- },
36
- defaultVariants: {
37
- variant: "numbers"
38
- },
39
- variants: {
40
- variant: {
41
- numbers: {
42
- [NUMBER_LIST]: {
43
- marginInlineStart: "0",
44
- paddingInlineStart: "0"
45
- },
46
- counterReset: "level1",
47
- "&[data-count='true']": {
48
- counterReset: "level1 var(--start, 0)"
49
- },
50
- [LIST_ITEM]: {
51
- counterIncrement: "level1",
52
- _before: {
53
- content: "counter(level1, decimal) '. '"
54
- },
55
- [NUMBER_LIST]: {
56
- counterReset: "level2",
57
- "&[data-count='true']": {
58
- counterReset: "level2 var(--start, 0)"
59
- },
60
- [LIST_ITEM]: {
61
- marginInlineStart: "small",
62
- counterIncrement: "level2",
63
- _before: {
64
- content: "counter(level1, decimal) '.' counter(level2, decimal) '. '"
65
- },
66
- [NUMBER_LIST]: {
67
- counterReset: "level3",
68
- "&[data-count='true']": {
69
- counterReset: "level3 var(--start, 0)"
70
- },
71
- [LIST_ITEM]: {
72
- marginInlineStart: "calc(1.5ch + token(spacing.small))",
73
- counterIncrement: "level3",
74
- _before: {
75
- content: "counter(level1, decimal) '.' counter(level2, decimal) '.' counter(level3, decimal) '. '"
76
- },
77
- [NUMBER_LIST]: {
78
- counterReset: "level4",
79
- "&[data-count='true']": {
80
- counterReset: "level4 var(--start, 0)"
81
- },
82
- [LIST_ITEM]: {
83
- marginInlineStart: "calc(3ch + token(spacing.small))",
84
- counterIncrement: "level4",
85
- _before: {
86
- content: "counter(level1, decimal) '.' counter(level2, decimal) '.' counter(level3, decimal) '.' counter(level4, decimal) '. '"
87
- }
88
- }
89
- }
90
- }
91
- }
92
- }
93
- }
94
- }
95
- },
96
- letters: {
97
- counterReset: "level1",
98
- "&[data-count='true']": {
99
- counterReset: "level1 var(--start, 0)"
100
- },
101
- [LETTER_LIST]: {
102
- marginInlineStart: "0",
103
- paddingInlineStart: "0"
104
- },
105
- [LIST_ITEM]: {
106
- counterIncrement: "level1",
107
- _before: {
108
- content: "counter(level1, upper-alpha) '. '"
109
- },
110
- [LETTER_LIST_ITEM]: {
111
- _before: {
112
- content: "counter(level1, lower-alpha) '. '"
113
- },
114
- [LETTER_LIST_ITEM]: {
115
- _before: {
116
- content: "counter(level1, lower-roman) '. '"
117
- }
118
- }
119
- }
120
- }
121
- }
122
- }
123
- }
124
- });
125
- const StyledOrderedList = styled(ark.ol, {}, {
126
- baseComponent: true
127
- });
128
- export const OrderedList = /*#__PURE__*/forwardRef((_ref, ref) => {
129
- let {
130
- variant,
131
- css: cssProp,
132
- start,
133
- ...props
134
- } = _ref;
135
- const style = useMemo(() => ({
136
- "--start": start ? start - 1 : undefined
137
- }), [start]);
138
- return /*#__PURE__*/_jsx(StyledOrderedList, {
139
- "data-embed-type": "ordered-list",
140
- "data-variant": variant,
141
- "data-count": start !== undefined,
142
- css: css.raw(orderedListRecipe.raw({
143
- variant
144
- }), cssProp),
145
- style: style,
146
- ref: ref,
147
- ...props
148
- });
149
- });
150
- export const UnOrderedList = styled("ul", {
151
- base: {
152
- listStyle: "revert",
153
- marginInlineStart: "medium",
154
- paddingInlineStart: "small",
155
- "& ul": {
156
- marginInlineStart: "0"
157
- },
158
- "& li": {
159
- marginBlock: "small",
160
- paddingInlineStart: "small",
161
- _marker: {
162
- color: "icon.strong"
163
- },
164
- "& > ol": {
165
- marginInlineStart: "0 !important"
166
- }
167
- },
168
- listStyleType: "disc",
169
- "& > li > ul": {
170
- listStyleType: "circle",
171
- "& > li > ul": {
172
- listStyleType: "square"
173
- }
174
- }
175
- }
176
- });
177
- export const DefinitionList = styled("dl", {
178
- base: {
179
- "& dt": {
180
- fontWeight: "bold"
181
- },
182
- "& dd": {
183
- marginInlineStart: "medium"
184
- }
185
- }
186
- });
package/es/Badge.js DELETED
@@ -1,85 +0,0 @@
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
-
9
- import { forwardRef } from "react";
10
- import { ark } from "@ark-ui/react";
11
- import { css, cva } from "@ndla/styled-system/css";
12
- import { styled } from "@ndla/styled-system/jsx";
13
- import { jsx as _jsx } from "react/jsx-runtime";
14
- const badgeRecipe = cva({
15
- base: {
16
- paddingInline: "xsmall",
17
- borderRadius: "xsmall",
18
- border: "1px solid",
19
- width: "fit-content",
20
- color: "text.default"
21
- },
22
- defaultVariants: {
23
- colorTheme: "neutral",
24
- size: "medium"
25
- },
26
- variants: {
27
- size: {
28
- small: {
29
- textStyle: "label.small"
30
- },
31
- medium: {
32
- textStyle: "label.medium"
33
- }
34
- },
35
- colorTheme: {
36
- brand1: {
37
- backgroundColor: "surface.brand.1.moderate",
38
- borderColor: "surface.brand.1.strong"
39
- },
40
- brand2: {
41
- backgroundColor: "surface.brand.2.moderate",
42
- borderColor: "surface.brand.2.strong"
43
- },
44
- brand3: {
45
- backgroundColor: "surface.brand.3.subtle",
46
- borderColor: "surface.brand.3.strong"
47
- },
48
- neutral: {
49
- backgroundColor: "surface.infoSubtle",
50
- borderColor: "stroke.default"
51
- },
52
- danger: {
53
- backgroundColor: "surface.dangerSubtle",
54
- borderColor: "surface.danger"
55
- },
56
- success: {
57
- backgroundColor: "surface.successSubtle",
58
- borderColor: "surface.success"
59
- },
60
- warning: {
61
- backgroundColor: "surface.warningSubtle",
62
- borderColor: "surface.warning"
63
- }
64
- }
65
- }
66
- });
67
- const StyledBadge = styled(ark.div, {}, {
68
- baseComponent: true
69
- });
70
- export const Badge = /*#__PURE__*/forwardRef((_ref, ref) => {
71
- let {
72
- colorTheme,
73
- size,
74
- css: cssProp,
75
- ...props
76
- } = _ref;
77
- return /*#__PURE__*/_jsx(StyledBadge, {
78
- css: css.raw(badgeRecipe.raw({
79
- colorTheme,
80
- size
81
- }), cssProp),
82
- ...props,
83
- ref: ref
84
- });
85
- });
package/es/BlockQuote.js DELETED
@@ -1,55 +0,0 @@
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
-
9
- import { forwardRef } from "react";
10
- import { ark } from "@ark-ui/react";
11
- import { css, cva } from "@ndla/styled-system/css";
12
- import { styled } from "@ndla/styled-system/jsx";
13
- import { jsx as _jsx } from "react/jsx-runtime";
14
- const blockQuoteRecipe = cva({
15
- base: {
16
- borderInlineStart: "4px solid",
17
- paddingInline: "medium"
18
- },
19
- variants: {
20
- variant: {
21
- neutral: {
22
- borderColor: "stroke.subtle",
23
- background: "surface.default"
24
- },
25
- brand1: {
26
- background: "surface.brand.1.subtle",
27
- borderColor: "surface.brand.1.strong"
28
- },
29
- brand2: {
30
- background: "surface.brand.2.subtle",
31
- borderColor: "surface.brand.2.strong"
32
- }
33
- }
34
- },
35
- defaultVariants: {
36
- variant: "neutral"
37
- }
38
- });
39
- const StyledBlockQuote = styled(ark.blockquote, {}, {
40
- baseComponent: true
41
- });
42
- export const BlockQuote = /*#__PURE__*/forwardRef((_ref, ref) => {
43
- let {
44
- variant,
45
- css: cssProp,
46
- ...props
47
- } = _ref;
48
- return /*#__PURE__*/_jsx(StyledBlockQuote, {
49
- css: css.raw(blockQuoteRecipe.raw({
50
- variant
51
- }), cssProp),
52
- ...props,
53
- ref: ref
54
- });
55
- });