@ndla/primitives 0.0.1

package/lib/Dialog.js

@@ -0,0 +1,338 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InternalDialogRoot = exports.DialogTrigger = exports.DialogTitle = exports.DialogStandaloneContent = exports.DialogRoot = exports.DialogPositioner = exports.DialogHeader = exports.DialogDescription = exports.DialogContent = exports.DialogCloseTrigger = exports.DialogBody = exports.DialogBackdrop = void 0;
+var _react = require("react");
+var _react2 = require("@ark-ui/react");
+var _css = require("@ndla/styled-system/css");
+var _jsx2 = require("@ndla/styled-system/jsx");
+var _createStyleContext = require("./createStyleContext");
+var _Text = require("./Text");
+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 dialogRecipe = (0, _css.sva)({
+  // We only use a subset of the dialog components, so we roll our own slots instead of relying on @ark/anatomy.
+  slots: ["positioner", "backdrop", "content"],
+  className: "dialog",
+  base: {
+    backdrop: {
+      position: "fixed",
+      height: "100vh",
+      width: "100vw",
+      zIndex: "overlay",
+      left: "0",
+      top: "0",
+      // TODO: Consider if this should be a token. It's probably consistent enough between dark and light mode to be a token.
+      background: "rgba(1, 1, 1, 0.3)",
+      _open: {
+        animation: "backdrop-in"
+      },
+      _closed: {
+        animation: "backdrop-out"
+      }
+    },
+    positioner: {
+      position: "fixed",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      overflow: "hidden",
+      left: "0",
+      top: "0",
+      width: "100vw",
+      height: "100dvh",
+      zIndex: "modal"
+    },
+    content: {
+      "--margin": "token(sizes.medium)",
+      position: "relative",
+      background: "surface.default",
+      boxShadow: "xlarge",
+      height: "min-content",
+      maxWidth: "95%",
+      maxHeight: "95%",
+      margin: "auto",
+      overflowY: "auto",
+      borderRadius: {
+        base: "sharp",
+        tablet: "small"
+      },
+      paddingBlockStart: "env(safe-area-inset-top)",
+      paddingBlockEnd: "env(safe-area-inset-bottom)",
+      paddingInlineStart: "env(safe-area-inset-left)",
+      paddingInlineEnd: "env(safe-area-inset-right)",
+      tabletDown: {
+        "--margin": "0px",
+        minWidth: "100%",
+        minHeight: "100%"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "medium",
+    position: "center"
+  },
+  compoundVariants: [{
+    variant: "drawer",
+    position: "left",
+    css: {
+      content: {
+        minHeight: "100%",
+        maxHeight: "100%",
+        width: "var(--size)",
+        _open: {
+          animation: "drawer-in-left"
+        },
+        _closed: {
+          animation: "drawer-out-left"
+        }
+      }
+    }
+  }, {
+    variant: "drawer",
+    position: "right",
+    css: {
+      content: {
+        minHeight: "100%",
+        maxHeight: "100%",
+        width: "var(--size)",
+        _open: {
+          animation: "drawer-in-right"
+        },
+        _closed: {
+          animation: "drawer-out-right"
+        }
+      }
+    }
+  }, {
+    variant: "drawer",
+    position: "top",
+    css: {
+      content: {
+        minWidth: "100%",
+        maxWidth: "100%",
+        height: "var(--size)",
+        _open: {
+          animation: "drawer-in-top"
+        },
+        _closed: {
+          animation: "drawer-out-top"
+        }
+      }
+    }
+  }, {
+    variant: "drawer",
+    position: "bottom",
+    css: {
+      content: {
+        minWidth: "100%",
+        maxWidth: "100%",
+        height: "var(--size)",
+        _open: {
+          animation: "drawer-in-bottom"
+        },
+        _closed: {
+          animation: "drawer-out-bottom"
+        }
+      }
+    }
+  }, {
+    variant: "drawer",
+    size: "xsmall",
+    css: {
+      content: {
+        "--size": "sizes.surface.3xsmall"
+      }
+    }
+  }, {
+    variant: "drawer",
+    size: "small",
+    css: {
+      content: {
+        "--size": "sizes.surface.xsmall"
+      }
+    }
+  }, {
+    variant: "drawer",
+    size: "medium",
+    css: {
+      content: {
+        "--size": "sizes.surface.medium"
+      }
+    }
+  }, {
+    variant: "drawer",
+    size: "large",
+    css: {
+      content: {
+        "--size": "sizes.surface.xlarge"
+      }
+    }
+  }],
+  variants: {
+    variant: {
+      drawer: {
+        content: {
+          "--margin": "0px",
+          borderRadius: {
+            base: "sharp",
+            tablet: "sharp"
+          }
+        }
+      },
+      dialog: {
+        content: {
+          width: "var(--size)",
+          _open: {
+            animation: "dialog-in"
+          },
+          _closed: {
+            animation: "dialog-out"
+          }
+        }
+      }
+    },
+    position: {
+      left: {
+        content: {
+          marginInlineStart: "min(var(--margin), 5%)"
+        }
+      },
+      center: {},
+      right: {
+        content: {
+          marginInlineEnd: "var(--margin)"
+        }
+      },
+      bottom: {
+        content: {
+          marginBlockEnd: "var(--margin)"
+        }
+      },
+      top: {
+        content: {
+          marginBlockStart: "var(--margin)"
+        }
+      }
+    },
+    size: {
+      full: {
+        content: {
+          "--margin": "0px",
+          minHeight: "100%",
+          minWidth: "100%",
+          borderRadius: "sharp"
+        }
+      },
+      xsmall: {
+        content: {
+          "--size": "sizes.surface.xsmall"
+        }
+      },
+      small: {
+        content: {
+          "--size": "sizes.surface.medium"
+        }
+      },
+      medium: {
+        content: {
+          "--size": "sizes.surface.xlarge"
+        }
+      },
+      large: {
+        content: {
+          "--size": "sizes.surface.4xlarge"
+        }
+      }
+    }
+  }
+});
+const {
+  withRootProvider,
+  withContext
+} = (0, _createStyleContext.createStyleContext)(dialogRecipe);
+const InternalDialogRoot = exports.InternalDialogRoot = withRootProvider(_react2.Dialog.Root);
+const DialogRoot = _ref => {
+  let {
+    lazyMount = true,
+    unmountOnExit = true,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(InternalDialogRoot, {
+    lazyMount: lazyMount,
+    unmountOnExit: unmountOnExit,
+    ...props
+  });
+};
+exports.DialogRoot = DialogRoot;
+const DialogBackdrop = exports.DialogBackdrop = withContext(_react2.Dialog.Backdrop, "backdrop");
+const DialogStandaloneContent = exports.DialogStandaloneContent = withContext(_react2.Dialog.Content, "content");
+const DialogPositioner = exports.DialogPositioner = withContext(_react2.Dialog.Positioner, "positioner");
+const DialogContent = exports.DialogContent = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(DialogBackdrop, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(DialogPositioner, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(DialogStandaloneContent, {
+      ref: ref,
+      ...props
+    })
+  })]
+}));
+const DialogDescription = _ref2 => {
+  let {
+    textStyle = "body.large",
+    ...rest
+  } = _ref2;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Dialog.Description, {
+    asChild: true,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.Text, {
+      as: "p",
+      textStyle: textStyle,
+      ...rest
+    })
+  });
+};
+exports.DialogDescription = DialogDescription;
+const DialogTitle = _ref3 => {
+  let {
+    textStyle = "title.medium",
+    ...rest
+  } = _ref3;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Dialog.Title, {
+    asChild: true,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.Heading, {
+      as: "h1",
+      textStyle: textStyle,
+      ...rest
+    })
+  });
+};
+exports.DialogTitle = DialogTitle;
+const DialogTrigger = exports.DialogTrigger = _react2.Dialog.Trigger;
+const DialogCloseTrigger = exports.DialogCloseTrigger = _react2.Dialog.CloseTrigger;
+const DialogHeader = exports.DialogHeader = (0, _jsx2.styled)("div", {
+  base: {
+    display: "flex",
+    paddingInline: "medium",
+    paddingBlockStart: "medium",
+    justifyContent: "space-between",
+    gap: "xsmall"
+  }
+});
+const DialogBody = exports.DialogBody = (0, _jsx2.styled)("div", {
+  base: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "xsmall",
+    paddingInline: "medium",
+    paddingBlockStart: "small",
+    paddingBlockEnd: "medium"
+  }
+});

package/lib/ExpandableBox.d.ts

@@ -0,0 +1,12 @@
+/**
+ * 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 { ComponentPropsWithoutRef } from "react";
+export type ExpandableBoxProps = ComponentPropsWithoutRef<"details">;
+export declare const ExpandableBox: (props: ExpandableBoxProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export type ExpandableBoxSummaryProps = ComponentPropsWithoutRef<"summary">;
+export declare const ExpandableBoxSummary: ({ children, ...rest }: ExpandableBoxSummaryProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/lib/ExpandableBox.js

@@ -0,0 +1,63 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ExpandableBoxSummary = exports.ExpandableBox = void 0;
+var _jsx2 = require("@ndla/styled-system/jsx");
+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 StyledExpandableBox = (0, _jsx2.styled)("details", {
+  base: {
+    transitionDuration: "fast",
+    width: "100%",
+    position: "relative",
+    border: "1px solid",
+    borderRadius: "xsmall",
+    borderColor: "stroke.subtle",
+    padding: "medium",
+    _open: {
+      padding: "medium",
+      "& summary": {
+        marginBlockEnd: "-xxsmall"
+      }
+    }
+  }
+});
+const ExpandableBox = props => /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledExpandableBox, {
+  ...props
+});
+exports.ExpandableBox = ExpandableBox;
+const StyledExpandableBoxSummary = (0, _jsx2.styled)("summary", {
+  base: {
+    cursor: "pointer",
+    margin: "-medium",
+    padding: "medium",
+    textStyle: "label.large!",
+    _hover: {
+      color: "text.action"
+    },
+    "& > *": {
+      display: "inline!",
+      textStyle: "label.large!"
+    }
+  }
+});
+const ExpandableBoxSummary = _ref => {
+  let {
+    children,
+    ...rest
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledExpandableBoxSummary, {
+    ...rest,
+    children: children
+  });
+};
+exports.ExpandableBoxSummary = ExpandableBoxSummary;

package/lib/FieldErrorMessage.d.ts

@@ -0,0 +1,11 @@
+/**
+ * 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 { TextProps } from "./Text";
+export declare const FieldErrorMessage: import("react").ForwardRefExoticComponent<Omit<TextProps & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;

package/lib/FieldErrorMessage.js

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FieldErrorMessage = void 0;
+var _react = require("react");
+var _css = require("@ndla/styled-system/css");
+var _jsx2 = require("@ndla/styled-system/jsx");
+var _FormControl = require("./FormControl");
+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 StyledErrorMessage = (0, _jsx2.styled)("div", {
+  base: {
+    color: "text.error",
+    whiteSpace: "pre-line"
+  }
+});
+const FieldErrorMessage = exports.FieldErrorMessage = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  var _field$getErrorMessag;
+  let {
+    textStyle = "label.small",
+    fontWeight,
+    color,
+    srOnly,
+    className,
+    ...props
+  } = _ref;
+  const field = (0, _FormControl.useFormControlContext)();
+  if (field && !field.isInvalid) return null;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledErrorMessage, {
+    ...((_field$getErrorMessag = field === null || field === void 0 ? void 0 : field.getErrorMessageProps(props, ref)) !== null && _field$getErrorMessag !== void 0 ? _field$getErrorMessag : {
+      ref,
+      ...props
+    }),
+    className: (0, _css.cx)((0, _css.css)({
+      textStyle,
+      fontWeight,
+      color,
+      srOnly: srOnly
+    }), className)
+  });
+});

package/lib/FieldHelper.d.ts

@@ -0,0 +1,11 @@
+/**
+ * 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 { TextProps } from "./Text";
+export declare const FieldHelper: import("react").ForwardRefExoticComponent<Omit<TextProps & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/lib/FieldHelper.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FieldHelper = void 0;
+var _react = require("react");
+var _css = require("@ndla/styled-system/css");
+var _jsx2 = require("@ndla/styled-system/jsx");
+var _FormControl = require("./FormControl");
+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 FieldHelper = exports.FieldHelper = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  var _field$getHelpTextPro;
+  let {
+    textStyle = "label.small",
+    fontWeight,
+    color,
+    srOnly,
+    className,
+    ...props
+  } = _ref;
+  const field = (0, _FormControl.useFormControlContext)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsx2.styled.div, {
+    ...((_field$getHelpTextPro = field === null || field === void 0 ? void 0 : field.getHelpTextProps(props, ref)) !== null && _field$getHelpTextPro !== void 0 ? _field$getHelpTextPro : {
+      ref,
+      ...props
+    }),
+    className: (0, _css.cx)((0, _css.css)({
+      textStyle,
+      fontWeight,
+      color,
+      srOnly
+    }), className)
+  });
+});

package/lib/FormControl.d.ts

@@ -0,0 +1,65 @@
+/**
+ * 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 { ComponentPropsWithRef, ElementType, HTMLAttributes, Ref, RefObject } from "react";
+type Merge<T, P> = P & Omit<T, keyof P>;
+type PropGetter<T extends ElementType = ElementType, P = {}> = (props?: Merge<ComponentPropsWithRef<T>, P>, ref?: Ref<any> | RefObject<any>) => Merge<ComponentPropsWithRef<T>, P>;
+export interface FormControlOptions {
+    isDisabled?: boolean;
+    isInvalid?: boolean;
+    isRequired?: boolean;
+}
+export interface FormControlProps extends FormControlOptions {
+    id: string;
+}
+/**
+ * Form control component inspired by chakra-ui. Allows for easy composition of form fields.
+ */
+export declare const FormControl: ({ children, id, isDisabled, isInvalid, isRequired, ...rest }: HTMLAttributes<HTMLDivElement> & FormControlProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const useFormControlContext: () => {
+    isRequired: boolean;
+    isDisabled: boolean;
+    isInvalid: boolean;
+    hasErrorText: boolean;
+    setHasErrorText: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    hasHelpText: boolean;
+    setHasHelpText: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    id: string;
+    labelId: string;
+    errorTextId: string;
+    helpTextId: string;
+    getHelpTextProps: PropGetter<ElementType, {}>;
+    getErrorMessageProps: PropGetter<ElementType, {}>;
+    getLabelProps: PropGetter<ElementType, {}>;
+} | undefined;
+export interface UseFormControlProps extends FormControlOptions {
+    id?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    required?: boolean;
+    "aria-describedby"?: string;
+}
+export declare const useFormControlProps: <T extends UseFormControlProps>({ id, disabled, required, isDisabled, isInvalid, isRequired, ...rest }: T) => Omit<T, "id" | "disabled" | "required" | "isRequired" | "isDisabled" | "isInvalid"> & {
+    "aria-describedby": string | undefined;
+    id: string | undefined;
+    isDisabled: boolean | undefined;
+    isRequired: boolean | undefined;
+    isInvalid: boolean | undefined;
+};
+export declare const useFormControl: <T extends UseFormControlProps>(props: T) => Omit<Omit<T, "id" | "disabled" | "required" | "isRequired" | "isDisabled" | "isInvalid"> & {
+    "aria-describedby": string | undefined;
+    id: string | undefined;
+    isDisabled: boolean | undefined;
+    isRequired: boolean | undefined;
+    isInvalid: boolean | undefined;
+}, "isRequired" | "isDisabled" | "isInvalid"> & {
+    disabled: boolean | undefined;
+    required: boolean | undefined;
+    "aria-invalid": boolean | undefined;
+    "aria-required": boolean | undefined;
+};
+export {};