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

package/README.md

@@ -1,6 +1,6 @@
 # @ndla/primitives
 
-A set of primitive components used throughout ndla packages and websites. Mostly styled versions of components from [ ark-ui ](https://ark-ui.com).
+A set of primitive components used throughout ndla packages and websites. Mostly styled versions of components from [ ark-ui ](https://ark-ui.com)
 
 ## Installation
 

package/dist/panda.buildinfo.json

@@ -283,6 +283,18 @@
       "color]___[value:stroke.default",
       "textDecoration]___[value:underline]___[cond:_checked",
       "textDecoration]___[value:underline]___[cond:_highlighted",
+      "animation]___[value:fade-shift-in 0.25s ease-in-out]___[cond:_open",
+      "animation]___[value:fade-shift-out 0.25s ease-in-out]___[cond:_closed",
+      "gap]___[value:5xsmall",
+      "borderCollapse]___[value:separate",
+      "borderSpacing]___[value:5xsmall",
+      "margin]___[value:-5xsmall",
+      "content]___[value:'-']___[cond:&[data-today]<___>_before",
+      "color]___[value:stroke.default]___[cond:&[data-today]<___>_before",
+      "position]___[value:absolute]___[cond:&[data-today]<___>_before",
+      "marginBlockStart]___[value:medium]___[cond:&[data-today]<___>_before",
+      "color]___[value:text.subtle]___[cond:&[data-outside-range]",
+      "fontWeight]___[value:normal]___[cond:&[data-outside-range]",
       "position]___[value:fixed",
       "height]___[value:100vh",
       "width]___[value:100vw",

package/dist/styles.css

@@ -392,6 +392,22 @@
     color: var(--colors-stroke-default);
 }
 
+  .gap_5xsmall {
+    gap: var(--spacing-5xsmall);
+}
+
+  .bd-cl_separate {
+    border-collapse: separate;
+}
+
+  .bd-sp_5xsmall {
+    border-spacing: var(--spacing-5xsmall);
+}
+
+  .m_-5xsmall {
+    margin: calc(var(--spacing-5xsmall) * -1);
+}
+
   .pos_fixed {
     position: fixed;
 }
@@ -1709,6 +1725,18 @@
     text-decoration: underline;
 }
 
+  .open\:anim_fade-shift-in_0\.25s_ease-in-out:is([open], [data-open], [data-state="open"]) {
+    animation: fade-shift-in 0.25s ease-in-out;
+}
+
+  .closed\:anim_fade-shift-out_0\.25s_ease-in-out:is([closed], [data-closed], [data-state="closed"]) {
+    animation: fade-shift-out 0.25s ease-in-out;
+}
+
+  .\[\&\[data-outside-range\]\]\:c_text\.subtle[data-outside-range] {
+    color: var(--colors-text-subtle);
+}
+
   .open\:anim_backdrop-in:is([open], [data-open], [data-state="open"]) {
     animation: var(--animations-backdrop-in);
 }
@@ -2064,6 +2092,10 @@
     transition-timing-function: var(--easings-default);
 }
 
+  .\[\&\[data-outside-range\]\]\:fw_normal[data-outside-range] {
+    font-weight: var(--font-weights-normal);
+}
+
   .\[\&_\>_\*\]\:grid-cs_2 > * {
     grid-column-start: 2;
 }
@@ -2602,6 +2634,18 @@
     transform: rotate(180deg);
 }
 
+  .\[\&\[data-today\]\]\:before\:c_stroke\.default[data-today]::before {
+    color: var(--colors-stroke-default);
+}
+
+  .\[\&\[data-today\]\]\:before\:pos_absolute[data-today]::before {
+    position: absolute;
+}
+
+  .\[\&\[data-today\]\]\:before\:mbs_medium[data-today]::before {
+    margin-block-start: var(--spacing-medium);
+}
+
   .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'] {
     margin-block-end: calc(var(--spacing-xxsmall) * -1);
 }
@@ -2748,6 +2792,10 @@
     background-color: var(--colors-surface-default);
 }
 
+  .\[\&\[data-today\]\]\:before\:content_\'-\'[data-today]::before {
+    content: '-';
+}
+
   .first\:hover\:bd-bs-c_var\(--border-hover\):first-child:is(:hover, [data-hover]) {
     border-block-start-color: var(--border-hover);
 }

package/es/DatePicker.js

@@ -0,0 +1,177 @@
+/**
+ * Copyright (c) 2024-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import { forwardRef } from "react";
+import { DatePicker, datePickerAnatomy } from "@ark-ui/react";
+import { sva } from "@ndla/styled-system/css";
+import { createStyleContext } from "./createStyleContext";
+import { Label } from "./Label";
+import { jsx as _jsx } from "react/jsx-runtime";
+const datePickerRecipe = sva({
+  slots: datePickerAnatomy.keys(),
+  base: {
+    root: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "xsmall"
+    },
+    content: {
+      background: "surface.default",
+      borderRadius: "xsmall",
+      boxShadow: "large",
+      display: "flex",
+      flexDirection: "column",
+      gap: "xsmall",
+      padding: "xsmall",
+      zIndex: "dropdown",
+      _open: {
+        animation: "fade-shift-in 0.25s ease-in-out"
+      },
+      _closed: {
+        animation: "fade-shift-out 0.25s ease-in-out"
+      }
+    },
+    control: {
+      display: "flex",
+      width: "fit-content",
+      gap: "xsmall"
+    },
+    label: {},
+    tableHeader: {},
+    viewControl: {
+      display: "flex",
+      gap: "5xsmall",
+      justifyContent: "space-between"
+    },
+    table: {
+      width: "100%",
+      borderCollapse: "separate",
+      borderSpacing: "5xsmall",
+      margin: "-5xsmall"
+    },
+    tableCell: {
+      textAlign: "center"
+    },
+    tableCellTrigger: {
+      width: "100%",
+      "&[data-today]": {
+        _before: {
+          content: "'-'",
+          color: "stroke.default",
+          position: "absolute",
+          marginBlockStart: "medium"
+        }
+      },
+      "&[data-outside-range]": {
+        color: "text.subtle",
+        fontWeight: "normal"
+      }
+    },
+    view: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "xsmall"
+    }
+  }
+});
+const {
+  withProvider,
+  withContext
+} = createStyleContext(datePickerRecipe);
+export const DatePickerRoot = withProvider(DatePicker.Root, "root", {
+  baseComponent: true
+});
+export const DatePickerClearTrigger = withContext(DatePicker.ClearTrigger, "clearTrigger", {
+  baseComponent: true
+});
+export const DatePickerContent = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/_jsx(DatePickerPositioner, {
+  children: /*#__PURE__*/_jsx(DatePickerStandaloneContent, {
+    ...props,
+    ref: ref
+  })
+}));
+export const DatePickerStandaloneContent = withContext(DatePicker.Content, "content", {
+  baseComponent: true
+});
+export const DatePickerControl = withContext(DatePicker.Control, "control", {
+  baseComponent: true
+});
+export const DatePickerInput = withContext(DatePicker.Input, "input", {
+  baseComponent: true
+});
+const InternalDatePickerLabel = withContext(DatePicker.Label, "label");
+export const DatePickerLabel = _ref => {
+  let {
+    textStyle = "label.medium",
+    fontWeight = "bold",
+    ...props
+  } = _ref;
+  return /*#__PURE__*/_jsx(InternalDatePickerLabel, {
+    asChild: true,
+    children: /*#__PURE__*/_jsx(Label, {
+      textStyle: textStyle,
+      fontWeight: fontWeight,
+      ...props
+    })
+  });
+};
+export const DatePickerMonthSelect = withContext(DatePicker.MonthSelect, "monthSelect", {
+  baseComponent: true
+});
+export const DatePickerNextTrigger = withContext(DatePicker.NextTrigger, "nextTrigger", {
+  baseComponent: true
+});
+export const DatePickerPositioner = withContext(DatePicker.Positioner, "positioner", {
+  baseComponent: true
+});
+export const DatePickerPresetTrigger = withContext(DatePicker.PresetTrigger, "presetTrigger", {
+  baseComponent: true
+});
+export const DatePickerPrevTrigger = withContext(DatePicker.PrevTrigger, "prevTrigger", {
+  baseComponent: true
+});
+export const DatePickerRangeText = withContext(DatePicker.RangeText, "rangeText", {
+  baseComponent: true
+});
+export const DatePickerTableBody = withContext(DatePicker.TableBody, "tableBody", {
+  baseComponent: true
+});
+export const DatePickerTableCell = withContext(DatePicker.TableCell, "tableCell", {
+  baseComponent: true
+});
+export const DatePickerTableCellTrigger = withContext(DatePicker.TableCellTrigger, "tableCellTrigger", {
+  baseComponent: true
+});
+export const DatePickerTableHead = withContext(DatePicker.TableHead, "tableHead", {
+  baseComponent: true
+});
+export const DatePickerTableHeader = withContext(DatePicker.TableHeader, "tableHeader", {
+  baseComponent: true
+});
+export const DatePickerTable = withContext(DatePicker.Table, "table", {
+  baseComponent: true
+});
+export const DatePickerTableRow = withContext(DatePicker.TableRow, "tableRow", {
+  baseComponent: true
+});
+export const DatePickerTrigger = withContext(DatePicker.Trigger, "trigger", {
+  baseComponent: true
+});
+export const DatePickerViewControl = withContext(DatePicker.ViewControl, "viewControl", {
+  baseComponent: true
+});
+export const DatePickerView = withContext(DatePicker.View, "view", {
+  baseComponent: true
+});
+export const DatePickerViewTrigger = withContext(DatePicker.ViewTrigger, "viewTrigger", {
+  baseComponent: true
+});
+export const DatePickerYearSelect = withContext(DatePicker.YearSelect, "yearSelect", {
+  baseComponent: true
+});
+export { DatePickerContext } from "@ark-ui/react";

package/es/index.js

@@ -16,6 +16,7 @@ export { createStyleContext } from "./createStyleContext";
 export { ToggleGroupRoot, ToggleGroupItem } from "./ToggleGroup";
 export { CheckboxRoot, CheckboxIndicator, CheckboxLabel, CheckboxControl, CheckboxGroup, CheckboxHiddenInput } from "./Checkbox";
 export { ComboboxRoot, ComboboxClearTrigger, ComboboxContent, ComboboxContentStandalone, ComboboxControl, ComboboxInput, ComboboxItemGroupLabel, ComboboxItemGroup, ComboboxItemIndicator, ComboboxItem, ComboboxItemText, ComboboxLabel, ComboboxPositioner, ComboboxTrigger, ComboboxList } from "./Combobox";
+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";
 export { DialogRoot, DialogBackdrop, DialogStandaloneContent, DialogPositioner, DialogContent, DialogDescription, DialogTitle, DialogTrigger, DialogCloseTrigger, DialogHeader, DialogBody, DialogFooter, useDialog, DialogRootProvider } from "./Dialog";
 export { ExpandableBox, ExpandableBoxSummary } from "./ExpandableBox";
 export { ErrorMessageRoot, ErrorMessageContent, ErrorMessageActions, ErrorMessageDescription, ErrorMessageTitle } from "./ErrorMessage/ErrorMessage";

package/lib/DatePicker.d.ts

@@ -0,0 +1,88 @@
+/**
+ * Copyright (c) 2024-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import { DatePicker } from "@ark-ui/react";
+import type { JsxStyleProps } from "@ndla/styled-system/types";
+import type { TextProps } from "./Text";
+export interface DatePickerRootProps extends DatePicker.RootProps, JsxStyleProps {
+    translations: DatePicker.RootProps["translations"];
+    locale: DatePicker.RootProps["locale"];
+}
+export declare const DatePickerRoot: import("react").ForwardRefExoticComponent<DatePickerRootProps & import("react").RefAttributes<HTMLDivElement>>;
+interface ClearTriggerProps extends DatePicker.ClearTriggerProps, JsxStyleProps {
+}
+export declare const DatePickerClearTrigger: import("react").ForwardRefExoticComponent<ClearTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const DatePickerContent: import("react").ForwardRefExoticComponent<DatePicker.ContentProps & {
+    consumeCss?: boolean;
+} & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLDivElement>>;
+interface DatePickerContentProps extends DatePicker.ContentProps, JsxStyleProps {
+}
+export declare const DatePickerStandaloneContent: import("react").ForwardRefExoticComponent<DatePickerContentProps & import("react").RefAttributes<HTMLDivElement>>;
+interface DatePickerControlProps extends DatePicker.ControlProps, JsxStyleProps {
+}
+export declare const DatePickerControl: import("react").ForwardRefExoticComponent<DatePickerControlProps & import("react").RefAttributes<HTMLDivElement>>;
+interface DatePickerInputProps extends DatePicker.InputProps, JsxStyleProps {
+}
+export declare const DatePickerInput: import("react").ForwardRefExoticComponent<DatePickerInputProps & import("react").RefAttributes<HTMLInputElement>>;
+interface DatePickerLabelProps extends DatePicker.LabelProps, JsxStyleProps {
+}
+export declare const DatePickerLabel: ({ textStyle, fontWeight, ...props }: DatePickerLabelProps & TextProps) => import("react/jsx-runtime").JSX.Element;
+interface DatePickerMonthSelectProps extends DatePicker.MonthSelectProps, JsxStyleProps {
+}
+export declare const DatePickerMonthSelect: import("react").ForwardRefExoticComponent<DatePickerMonthSelectProps & import("react").RefAttributes<HTMLSelectElement>>;
+interface DatePickerNextTrigger extends DatePicker.NextTriggerProps, JsxStyleProps {
+}
+export declare const DatePickerNextTrigger: import("react").ForwardRefExoticComponent<DatePickerNextTrigger & import("react").RefAttributes<HTMLButtonElement>>;
+interface DatePickerPositionerProps extends DatePicker.PositionerProps, JsxStyleProps {
+}
+export declare const DatePickerPositioner: import("react").ForwardRefExoticComponent<DatePickerPositionerProps & import("react").RefAttributes<HTMLDivElement>>;
+interface DatePickerPresetTriggerProps extends DatePicker.PresetTriggerProps, JsxStyleProps {
+}
+export declare const DatePickerPresetTrigger: import("react").ForwardRefExoticComponent<DatePickerPresetTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+interface DatePickerPrevTriggerProps extends DatePicker.PrevTriggerProps, JsxStyleProps {
+}
+export declare const DatePickerPrevTrigger: import("react").ForwardRefExoticComponent<DatePickerPrevTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+interface DatePickerRangeTextProps extends DatePicker.RangeTextProps, JsxStyleProps {
+}
+export declare const DatePickerRangeText: import("react").ForwardRefExoticComponent<DatePickerRangeTextProps & import("react").RefAttributes<HTMLDivElement>>;
+interface DatePickerTableBodyProps extends DatePicker.TableBodyProps, JsxStyleProps {
+}
+export declare const DatePickerTableBody: import("react").ForwardRefExoticComponent<DatePickerTableBodyProps & import("react").RefAttributes<HTMLTableSectionElement>>;
+interface DatePickerTableCellProps extends DatePicker.TableCellProps, JsxStyleProps {
+}
+export declare const DatePickerTableCell: import("react").ForwardRefExoticComponent<DatePickerTableCellProps & import("react").RefAttributes<HTMLTableCellElement>>;
+interface DatePickerTableCellTriggerProps extends DatePicker.TableCellTriggerProps, JsxStyleProps {
+}
+export declare const DatePickerTableCellTrigger: import("react").ForwardRefExoticComponent<DatePickerTableCellTriggerProps & import("react").RefAttributes<HTMLDivElement>>;
+interface DatePickerTableHeadProps extends DatePicker.TableHeadProps, JsxStyleProps {
+}
+export declare const DatePickerTableHead: import("react").ForwardRefExoticComponent<DatePickerTableHeadProps & import("react").RefAttributes<HTMLTableSectionElement>>;
+interface DatePickerTableHeaderProps extends DatePicker.TableHeaderProps, JsxStyleProps {
+}
+export declare const DatePickerTableHeader: import("react").ForwardRefExoticComponent<DatePickerTableHeaderProps & import("react").RefAttributes<HTMLTableCellElement>>;
+interface DatePickerTableProps extends DatePicker.TableProps, JsxStyleProps {
+}
+export declare const DatePickerTable: import("react").ForwardRefExoticComponent<DatePickerTableProps & import("react").RefAttributes<HTMLTableElement>>;
+interface DatePickerTableRowProps extends DatePicker.TableRowProps, JsxStyleProps {
+}
+export declare const DatePickerTableRow: import("react").ForwardRefExoticComponent<DatePickerTableRowProps & import("react").RefAttributes<HTMLTableRowElement>>;
+interface DatePickerTriggerProps extends DatePicker.TriggerProps, JsxStyleProps {
+}
+export declare const DatePickerTrigger: import("react").ForwardRefExoticComponent<DatePickerTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+interface DatePickerViewControlProps extends DatePicker.ViewControlProps, JsxStyleProps {
+}
+export declare const DatePickerViewControl: import("react").ForwardRefExoticComponent<DatePickerViewControlProps & import("react").RefAttributes<HTMLDivElement>>;
+interface DatePickerViewProps extends DatePicker.ViewProps, JsxStyleProps {
+}
+export declare const DatePickerView: import("react").ForwardRefExoticComponent<DatePickerViewProps & import("react").RefAttributes<HTMLDivElement>>;
+interface DatePickerViewTriggerProps extends DatePicker.ViewTriggerProps, JsxStyleProps {
+}
+export declare const DatePickerViewTrigger: import("react").ForwardRefExoticComponent<DatePickerViewTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+interface DatePickerYearSelectProps extends DatePicker.YearSelectProps, JsxStyleProps {
+}
+export declare const DatePickerYearSelect: import("react").ForwardRefExoticComponent<DatePickerYearSelectProps & import("react").RefAttributes<HTMLSelectElement>>;
+export { DatePickerContext } from "@ark-ui/react";

package/lib/DatePicker.js

@@ -0,0 +1,190 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DatePickerContent = exports.DatePickerClearTrigger = void 0;
+Object.defineProperty(exports, "DatePickerContext", {
+  enumerable: true,
+  get: function () {
+    return _react2.DatePickerContext;
+  }
+});
+exports.DatePickerYearSelect = exports.DatePickerViewTrigger = exports.DatePickerViewControl = exports.DatePickerView = exports.DatePickerTrigger = exports.DatePickerTableRow = exports.DatePickerTableHeader = exports.DatePickerTableHead = exports.DatePickerTableCellTrigger = exports.DatePickerTableCell = exports.DatePickerTableBody = exports.DatePickerTable = exports.DatePickerStandaloneContent = exports.DatePickerRoot = exports.DatePickerRangeText = exports.DatePickerPrevTrigger = exports.DatePickerPresetTrigger = exports.DatePickerPositioner = exports.DatePickerNextTrigger = exports.DatePickerMonthSelect = exports.DatePickerLabel = exports.DatePickerInput = exports.DatePickerControl = void 0;
+var _react = require("react");
+var _react2 = require("@ark-ui/react");
+var _css = require("@ndla/styled-system/css");
+var _createStyleContext = require("./createStyleContext");
+var _Label = require("./Label");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * Copyright (c) 2024-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+const datePickerRecipe = (0, _css.sva)({
+  slots: _react2.datePickerAnatomy.keys(),
+  base: {
+    root: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "xsmall"
+    },
+    content: {
+      background: "surface.default",
+      borderRadius: "xsmall",
+      boxShadow: "large",
+      display: "flex",
+      flexDirection: "column",
+      gap: "xsmall",
+      padding: "xsmall",
+      zIndex: "dropdown",
+      _open: {
+        animation: "fade-shift-in 0.25s ease-in-out"
+      },
+      _closed: {
+        animation: "fade-shift-out 0.25s ease-in-out"
+      }
+    },
+    control: {
+      display: "flex",
+      width: "fit-content",
+      gap: "xsmall"
+    },
+    label: {},
+    tableHeader: {},
+    viewControl: {
+      display: "flex",
+      gap: "5xsmall",
+      justifyContent: "space-between"
+    },
+    table: {
+      width: "100%",
+      borderCollapse: "separate",
+      borderSpacing: "5xsmall",
+      margin: "-5xsmall"
+    },
+    tableCell: {
+      textAlign: "center"
+    },
+    tableCellTrigger: {
+      width: "100%",
+      "&[data-today]": {
+        _before: {
+          content: "'-'",
+          color: "stroke.default",
+          position: "absolute",
+          marginBlockStart: "medium"
+        }
+      },
+      "&[data-outside-range]": {
+        color: "text.subtle",
+        fontWeight: "normal"
+      }
+    },
+    view: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "xsmall"
+    }
+  }
+});
+const {
+  withProvider,
+  withContext
+} = (0, _createStyleContext.createStyleContext)(datePickerRecipe);
+const DatePickerRoot = exports.DatePickerRoot = withProvider(_react2.DatePicker.Root, "root", {
+  baseComponent: true
+});
+const DatePickerClearTrigger = exports.DatePickerClearTrigger = withContext(_react2.DatePicker.ClearTrigger, "clearTrigger", {
+  baseComponent: true
+});
+const DatePickerContent = exports.DatePickerContent = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(DatePickerPositioner, {
+  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(DatePickerStandaloneContent, {
+    ...props,
+    ref: ref
+  })
+}));
+const DatePickerStandaloneContent = exports.DatePickerStandaloneContent = withContext(_react2.DatePicker.Content, "content", {
+  baseComponent: true
+});
+const DatePickerControl = exports.DatePickerControl = withContext(_react2.DatePicker.Control, "control", {
+  baseComponent: true
+});
+const DatePickerInput = exports.DatePickerInput = withContext(_react2.DatePicker.Input, "input", {
+  baseComponent: true
+});
+const InternalDatePickerLabel = withContext(_react2.DatePicker.Label, "label");
+const DatePickerLabel = _ref => {
+  let {
+    textStyle = "label.medium",
+    fontWeight = "bold",
+    ...props
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(InternalDatePickerLabel, {
+    asChild: true,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Label.Label, {
+      textStyle: textStyle,
+      fontWeight: fontWeight,
+      ...props
+    })
+  });
+};
+exports.DatePickerLabel = DatePickerLabel;
+const DatePickerMonthSelect = exports.DatePickerMonthSelect = withContext(_react2.DatePicker.MonthSelect, "monthSelect", {
+  baseComponent: true
+});
+const DatePickerNextTrigger = exports.DatePickerNextTrigger = withContext(_react2.DatePicker.NextTrigger, "nextTrigger", {
+  baseComponent: true
+});
+const DatePickerPositioner = exports.DatePickerPositioner = withContext(_react2.DatePicker.Positioner, "positioner", {
+  baseComponent: true
+});
+const DatePickerPresetTrigger = exports.DatePickerPresetTrigger = withContext(_react2.DatePicker.PresetTrigger, "presetTrigger", {
+  baseComponent: true
+});
+const DatePickerPrevTrigger = exports.DatePickerPrevTrigger = withContext(_react2.DatePicker.PrevTrigger, "prevTrigger", {
+  baseComponent: true
+});
+const DatePickerRangeText = exports.DatePickerRangeText = withContext(_react2.DatePicker.RangeText, "rangeText", {
+  baseComponent: true
+});
+const DatePickerTableBody = exports.DatePickerTableBody = withContext(_react2.DatePicker.TableBody, "tableBody", {
+  baseComponent: true
+});
+const DatePickerTableCell = exports.DatePickerTableCell = withContext(_react2.DatePicker.TableCell, "tableCell", {
+  baseComponent: true
+});
+const DatePickerTableCellTrigger = exports.DatePickerTableCellTrigger = withContext(_react2.DatePicker.TableCellTrigger, "tableCellTrigger", {
+  baseComponent: true
+});
+const DatePickerTableHead = exports.DatePickerTableHead = withContext(_react2.DatePicker.TableHead, "tableHead", {
+  baseComponent: true
+});
+const DatePickerTableHeader = exports.DatePickerTableHeader = withContext(_react2.DatePicker.TableHeader, "tableHeader", {
+  baseComponent: true
+});
+const DatePickerTable = exports.DatePickerTable = withContext(_react2.DatePicker.Table, "table", {
+  baseComponent: true
+});
+const DatePickerTableRow = exports.DatePickerTableRow = withContext(_react2.DatePicker.TableRow, "tableRow", {
+  baseComponent: true
+});
+const DatePickerTrigger = exports.DatePickerTrigger = withContext(_react2.DatePicker.Trigger, "trigger", {
+  baseComponent: true
+});
+const DatePickerViewControl = exports.DatePickerViewControl = withContext(_react2.DatePicker.ViewControl, "viewControl", {
+  baseComponent: true
+});
+const DatePickerView = exports.DatePickerView = withContext(_react2.DatePicker.View, "view", {
+  baseComponent: true
+});
+const DatePickerViewTrigger = exports.DatePickerViewTrigger = withContext(_react2.DatePicker.ViewTrigger, "viewTrigger", {
+  baseComponent: true
+});
+const DatePickerYearSelect = exports.DatePickerYearSelect = withContext(_react2.DatePicker.YearSelect, "yearSelect", {
+  baseComponent: true
+});

package/lib/index.d.ts

@@ -24,6 +24,8 @@ export type { CheckboxVariantProps, CheckboxRootProps } from "./Checkbox";
 export { CheckboxRoot, CheckboxIndicator, CheckboxLabel, CheckboxControl, CheckboxGroup, CheckboxHiddenInput, } from "./Checkbox";
 export type { ComboboxVariantProps, ComboboxRootProps, ComboboxClearTriggerProps, ComboboxContentProps, ComboboxControlProps, ComboboxInputProps, ComboboxItemGroupLabelProps, ComboboxItemGroupProps, ComboboxItemProps, ComboboxItemIndicatorProps, ComboboxItemTextProps, ComboboxLabelProps, ComboboxPositionerProps, ComboboxTriggerProps, ComboboxListProps, } from "./Combobox";
 export { ComboboxRoot, ComboboxClearTrigger, ComboboxContent, ComboboxContentStandalone, ComboboxControl, ComboboxInput, ComboboxItemGroupLabel, ComboboxItemGroup, ComboboxItemIndicator, ComboboxItem, ComboboxItemText, ComboboxLabel, ComboboxPositioner, ComboboxTrigger, ComboboxList, } from "./Combobox";
+export type { DatePickerRootProps } from "./DatePicker";
+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";
 export type { DialogVariantProps, DialogRootProps } from "./Dialog";
 export { DialogRoot, DialogBackdrop, DialogStandaloneContent, DialogPositioner, DialogContent, DialogDescription, DialogTitle, DialogTrigger, DialogCloseTrigger, DialogHeader, DialogBody, DialogFooter, useDialog, DialogRootProvider, } from "./Dialog";
 export type { ExpandableBoxProps, ExpandableBoxSummaryProps } from "./ExpandableBox";

package/lib/index.js

@@ -207,6 +207,162 @@ Object.defineProperty(exports, "ComboboxTrigger", {
     return _Combobox.ComboboxTrigger;
   }
 });
+Object.defineProperty(exports, "DatePickerClearTrigger", {
+  enumerable: true,
+  get: function () {
+    return _DatePicker.DatePickerClearTrigger;
+  }
+});
+Object.defineProperty(exports, "DatePickerContent", {
+  enumerable: true,
+  get: function () {
+    return _DatePicker.DatePickerContent;
+  }
+});
+Object.defineProperty(exports, "DatePickerContext", {
+  enumerable: true,
+  get: function () {
+    return _DatePicker.DatePickerContext;
+  }
+});
+Object.defineProperty(exports, "DatePickerControl", {
+  enumerable: true,
+  get: function () {
+    return _DatePicker.DatePickerControl;
+  }
+});
+Object.defineProperty(exports, "DatePickerInput", {
+  enumerable: true,
+  get: function () {
+    return _DatePicker.DatePickerInput;
+  }
+});
+Object.defineProperty(exports, "DatePickerLabel", {
+  enumerable: true,
+  get: function () {
+    return _DatePicker.DatePickerLabel;
+  }
+});
+Object.defineProperty(exports, "DatePickerMonthSelect", {
+  enumerable: true,
+  get: function () {
+    return _DatePicker.DatePickerMonthSelect;
+  }
+});
+Object.defineProperty(exports, "DatePickerNextTrigger", {
+  enumerable: true,
+  get: function () {
+    return _DatePicker.DatePickerNextTrigger;
+  }
+});
+Object.defineProperty(exports, "DatePickerPositioner", {
+  enumerable: true,
+  get: function () {
+    return _DatePicker.DatePickerPositioner;
+  }
+});
+Object.defineProperty(exports, "DatePickerPresetTrigger", {
+  enumerable: true,
+  get: function () {
+    return _DatePicker.DatePickerPresetTrigger;
+  }
+});
+Object.defineProperty(exports, "DatePickerPrevTrigger", {
+  enumerable: true,
+  get: function () {
+    return _DatePicker.DatePickerPrevTrigger;
+  }
+});
+Object.defineProperty(exports, "DatePickerRangeText", {
+  enumerable: true,
+  get: function () {
+    return _DatePicker.DatePickerRangeText;
+  }
+});
+Object.defineProperty(exports, "DatePickerRoot", {
+  enumerable: true,
+  get: function () {
+    return _DatePicker.DatePickerRoot;
+  }
+});
+Object.defineProperty(exports, "DatePickerStandaloneContent", {
+  enumerable: true,
+  get: function () {
+    return _DatePicker.DatePickerStandaloneContent;
+  }
+});
+Object.defineProperty(exports, "DatePickerTable", {
+  enumerable: true,
+  get: function () {
+    return _DatePicker.DatePickerTable;
+  }
+});
+Object.defineProperty(exports, "DatePickerTableBody", {
+  enumerable: true,
+  get: function () {
+    return _DatePicker.DatePickerTableBody;
+  }
+});
+Object.defineProperty(exports, "DatePickerTableCell", {
+  enumerable: true,
+  get: function () {
+    return _DatePicker.DatePickerTableCell;
+  }
+});
+Object.defineProperty(exports, "DatePickerTableCellTrigger", {
+  enumerable: true,
+  get: function () {
+    return _DatePicker.DatePickerTableCellTrigger;
+  }
+});
+Object.defineProperty(exports, "DatePickerTableHead", {
+  enumerable: true,
+  get: function () {
+    return _DatePicker.DatePickerTableHead;
+  }
+});
+Object.defineProperty(exports, "DatePickerTableHeader", {
+  enumerable: true,
+  get: function () {
+    return _DatePicker.DatePickerTableHeader;
+  }
+});
+Object.defineProperty(exports, "DatePickerTableRow", {
+  enumerable: true,
+  get: function () {
+    return _DatePicker.DatePickerTableRow;
+  }
+});
+Object.defineProperty(exports, "DatePickerTrigger", {
+  enumerable: true,
+  get: function () {
+    return _DatePicker.DatePickerTrigger;
+  }
+});
+Object.defineProperty(exports, "DatePickerView", {
+  enumerable: true,
+  get: function () {
+    return _DatePicker.DatePickerView;
+  }
+});
+Object.defineProperty(exports, "DatePickerViewControl", {
+  enumerable: true,
+  get: function () {
+    return _DatePicker.DatePickerViewControl;
+  }
+});
+Object.defineProperty(exports, "DatePickerViewTrigger", {
+  enumerable: true,
+  get: function () {
+    return _DatePicker.DatePickerViewTrigger;
+  }
+});
+Object.defineProperty(exports, "DatePickerYearSelect", {
+  enumerable: true,
+  get: function () {
+    return _DatePicker.DatePickerYearSelect;
+  }
+});
 Object.defineProperty(exports, "DefinitionList", {
   enumerable: true,
   get: function () {
@@ -1393,6 +1549,7 @@ var _createStyleContext = require("./createStyleContext");
 var _ToggleGroup = require("./ToggleGroup");
 var _Checkbox = require("./Checkbox");
 var _Combobox = require("./Combobox");
+var _DatePicker = require("./DatePicker");
 var _Dialog = require("./Dialog");
 var _ExpandableBox = require("./ExpandableBox");
 var _ErrorMessage = require("./ErrorMessage/ErrorMessage");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/primitives",
-  "version": "1.0.87-alpha.0",
+  "version": "1.0.89-alpha.0",
   "description": "Primitive components for NDLA",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -43,5 +43,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "168853a36b0654ff01db41b8b78e81b1afb66768"
+  "gitHead": "dc0f32d958e7f1df5a4330a412ad3ce03452d300"
 }