@ndla/primitives 0.0.1

package/lib/Button.js

@@ -0,0 +1,217 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.iconButtonRecipe = exports.buttonRecipe = exports.buttonBaseRecipe = exports.IconButton = exports.Button = void 0;
+var _react = require("react");
+var _css = require("@ndla/styled-system/css");
+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 buttonBaseRecipe = exports.buttonBaseRecipe = (0, _css.cva)({
+  base: {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: "xsmall",
+    cursor: "pointer",
+    textDecoration: "none",
+    textStyle: "label.medium",
+    fontWeight: "bold",
+    transitionProperty: "all",
+    transitionDuration: "fast",
+    transitionTimingFunction: "default",
+    textAlign: "center",
+    borderRadius: "xsmall",
+    outline: "none",
+    boxShadowColor: "stroke.default",
+    _disabled: {
+      cursor: "not-allowed",
+      color: "text.onAction",
+      background: "surface.disabled",
+      _hover: {
+        color: "text.onAction",
+        background: "surface.disabled"
+      }
+    },
+    _focusVisible: {
+      boxShadow: "inset 0 0 0 3px var(--shadow-color)"
+    }
+  },
+  defaultVariants: {
+    variant: "primary"
+  },
+  variants: {
+    variant: {
+      primary: {
+        color: "text.onAction",
+        background: "surface.action",
+        _hover: {
+          color: "text.onAction",
+          background: "surface.action.hover"
+        },
+        _active: {
+          color: "text.onAction",
+          background: "surface.action.active"
+        },
+        _focusVisible: {
+          boxShadow: "inset 0 0 0 3px var(--shadow-color), inset 0px 0px 0px 6px currentcolor"
+        }
+      },
+      secondary: {
+        color: "text.strong",
+        background: "transparent",
+        boxShadow: "inset 0 0 0 1px var(--shadow-color)",
+        _hover: {
+          background: "surface.actionSubtle.hover"
+        },
+        _active: {
+          background: "surface.actionSubtle.active"
+        }
+      },
+      tertiary: {
+        color: "text.strong",
+        background: "transparent",
+        _hover: {
+          boxShadow: "inset 0 0 0 1px var(--shadow-color)",
+          background: "surface.actionSubtle.hover",
+          _focusVisible: {
+            boxShadow: "inset 0 0 0 3px var(--shadow-color)"
+          }
+        },
+        _active: {
+          borderColor: "stroke.default",
+          background: "surface.actionSubtle.active"
+        }
+      },
+      clear: {
+        background: "transparent",
+        color: "text.strong",
+        _hover: {
+          color: "stroke.hover"
+        }
+      },
+      clearSubtle: {
+        background: "transparent",
+        color: "text.onAction",
+        _hover: {
+          color: "surface.actionSubtle.hover.strong"
+        }
+      },
+      danger: {
+        background: "surface.error",
+        color: "text.onAction",
+        _hover: {
+          background: "surface.error.hover"
+        },
+        _active: {
+          background: "surface.error.active"
+        },
+        _focusVisible: {
+          boxShadowColor: "surface.error",
+          boxShadow: "inset 0 0 0 3px var(--shadow-color), inset 0px 0px 0px 6px currentcolor"
+        }
+      },
+      success: {
+        background: "surface.success",
+        color: "text.onAction",
+        _hover: {
+          background: "surface.success.hover"
+        },
+        _active: {
+          background: "surface.success.active"
+        },
+        _focusVisible: {
+          boxShadowColor: "surface.success",
+          boxShadow: "inset 0 0 0 3px var(--shadow-color), inset 0px 0px 0px 6px currentcolor"
+        }
+      },
+      link: {
+        background: "transparent",
+        color: "text.link",
+        textDecoration: "underline",
+        textDecorationThickness: "1px",
+        _hover: {
+          textDecoration: "none"
+        }
+      }
+    }
+  }
+});
+const buttonRecipe = exports.buttonRecipe = (0, _css.cva)({
+  defaultVariants: {
+    size: "default"
+  },
+  variants: {
+    size: {
+      default: {
+        paddingInline: "medium",
+        paddingBlock: "xxsmall",
+        minHeight: "24"
+      },
+      small: {
+        textStyle: "label.small",
+        minHeight: "19",
+        paddingInline: "small",
+        paddingBlock: "3xsmall"
+      }
+    }
+  }
+});
+const Button = exports.Button = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    type,
+    size,
+    className,
+    variant,
+    ...rest
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsx2.styled.button, {
+    type: type !== null && type !== void 0 ? type : "button",
+    className: (0, _css.cx)((0, _css.css)(buttonBaseRecipe.raw({
+      variant
+    }), buttonRecipe.raw({
+      size
+    })), className),
+    ...rest,
+    ref: ref
+  });
+});
+const IconButton = exports.IconButton = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
+  let {
+    type,
+    className,
+    variant,
+    ...rest
+  } = _ref2;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsx2.styled.button, {
+    type: type !== null && type !== void 0 ? type : "button",
+    className: (0, _css.cx)((0, _css.css)(buttonBaseRecipe.raw({
+      variant
+    }), iconButtonRecipe.raw()), className),
+    ...rest,
+    ref: ref
+  });
+});
+const iconButtonRecipe = exports.iconButtonRecipe = (0, _css.cva)({
+  base: {
+    lineHeight: "1",
+    minHeight: "unset",
+    "& svg": {
+      marginInline: "0",
+      marginBlock: "0",
+      width: "medium",
+      height: "medium"
+    },
+    paddingInline: "xsmall",
+    paddingBlock: "xsmall"
+  }
+});

package/lib/Checkbox.d.ts

@@ -0,0 +1,15 @@
+/**
+ * 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 { Checkbox } from "@ark-ui/react";
+import { TextProps } from "./Text";
+export type CheckboxRootProps = Checkbox.RootProps;
+export declare const CheckboxRoot: import("react").ForwardRefExoticComponent<Checkbox.RootProps & import("react").RefAttributes<HTMLLabelElement>>;
+export declare const CheckboxIndicator: import("react").ForwardRefExoticComponent<Checkbox.IndicatorProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const CheckboxLabel: ({ textStyle, children, ...props }: Checkbox.LabelProps & TextProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const CheckboxControl: import("react").ForwardRefExoticComponent<Checkbox.ControlProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const CheckboxHiddenInput: import("react").ForwardRefExoticComponent<Checkbox.HiddenInputProps & import("react").RefAttributes<HTMLInputElement>>;

package/lib/Checkbox.js

@@ -0,0 +1,125 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CheckboxRoot = exports.CheckboxLabel = exports.CheckboxIndicator = exports.CheckboxHiddenInput = exports.CheckboxControl = void 0;
+var _react = require("react");
+var _anatomy = require("@ark-ui/anatomy");
+var _react2 = require("@ark-ui/react");
+var _css = require("@ndla/styled-system/css");
+var _createStyleContext = require("./createStyleContext");
+var _FormControl = require("./FormControl");
+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 checkboxRecipe = (0, _css.sva)({
+  slots: _anatomy.checkboxAnatomy.keys(),
+  base: {
+    root: {
+      userSelect: "none",
+      display: "flex",
+      alignItems: "center",
+      cursor: "pointer",
+      gap: "xxsmall",
+      _disabled: {
+        color: "text.disabled",
+        cursor: "not-allowed"
+      },
+      _hover: {
+        color: "text.action"
+      },
+      _focus: {
+        outline: "2px solid",
+        outlineOffset: "4xsmall",
+        outlineColor: "stroke.default",
+        borderRadius: "xsmall"
+      }
+    },
+    control: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      cursor: "pointer",
+      width: "medium",
+      height: "medium",
+      background: "surface.default",
+      borderRadius: "xsmall",
+      border: "2px solid",
+      borderColor: "stroke.subtle",
+      color: "text.strong",
+      transitionDuration: "normal",
+      transitionProperty: "border-color, background, box-shadow, color",
+      transitionTimingFunction: "default",
+      _hover: {
+        boxShadow: "0 0 0 4px var(--shadow-color)",
+        boxShadowColor: "surface.actionSubtle.hover.strong"
+      },
+      _checked: {
+        color: "icon.onAction",
+        backgroundColor: "surface.action",
+        borderColor: "surface.action"
+      },
+      _disabled: {
+        borderColor: "stroke.disabled",
+        _hover: {
+          borderColor: "stroke.disabled",
+          boxShadow: "none"
+        },
+        _checked: {
+          background: "surface.disabled"
+        }
+      },
+      _invalid: {
+        borderColor: "stroke.error",
+        _checked: {
+          color: "stroke.error",
+          borderColor: "stroke.error",
+          backgroundColor: "surface.default"
+        }
+      }
+    }
+  }
+});
+const {
+  withProvider,
+  withContext
+} = (0, _createStyleContext.createStyleContext)(checkboxRecipe);
+const InternalCheckboxRoot = withProvider(_react2.Checkbox.Root, "root");
+const CheckboxRoot = exports.CheckboxRoot = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  var _field$invalid;
+  const field = (0, _FormControl.useFormControl)(props);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(InternalCheckboxRoot, {
+    ...field,
+    invalid: (_field$invalid = field.invalid) !== null && _field$invalid !== void 0 ? _field$invalid : !!field["aria-invalid"],
+    ref: ref,
+    "aria-invalid": undefined
+  });
+});
+const CheckboxIndicator = exports.CheckboxIndicator = withContext(_react2.Checkbox.Indicator, "indicator");
+const InternalCheckboxLabel = withContext(_react2.Checkbox.Label, "label");
+const CheckboxLabel = _ref => {
+  let {
+    textStyle = "label.medium",
+    children,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(InternalCheckboxLabel, {
+    ...props,
+    asChild: true,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.Text, {
+      textStyle: textStyle,
+      children: children
+    })
+  });
+};
+exports.CheckboxLabel = CheckboxLabel;
+const CheckboxControl = exports.CheckboxControl = withContext(_react2.Checkbox.Control, "control");
+const CheckboxHiddenInput = exports.CheckboxHiddenInput = _react2.Checkbox.HiddenInput;

package/lib/Dialog.d.ts

@@ -0,0 +1,107 @@
+/**
+ * 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 { Dialog } from "@ark-ui/react";
+import { RecipeVariantProps } from "@ndla/styled-system/css";
+import { SystemProperties } from "@ndla/styled-system/types";
+import { TextProps } from "./Text";
+declare const dialogRecipe: import("@ndla/styled-system/types").SlotRecipeRuntimeFn<"content" | "positioner" | "backdrop", {
+    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";
+            };
+        };
+    };
+}>;
+export type DialogVariantProps = RecipeVariantProps<typeof dialogRecipe>;
+export type DialogRootProps = Dialog.RootProps & DialogVariantProps;
+export declare const InternalDialogRoot: (props: Dialog.RootProps & {
+    variant?: "dialog" | "drawer" | undefined;
+    position?: "center" | "bottom" | "left" | "right" | "top" | undefined;
+    size?: "small" | "xsmall" | "medium" | "large" | "full" | undefined;
+}) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const DialogRoot: ({ lazyMount, unmountOnExit, ...props }: DialogRootProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const DialogBackdrop: import("react").ForwardRefExoticComponent<Omit<SystemProperties, keyof Dialog.BackdropProps> & Dialog.BackdropProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const DialogStandaloneContent: import("react").ForwardRefExoticComponent<Omit<SystemProperties, keyof Dialog.ContentProps> & Dialog.ContentProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const DialogPositioner: import("react").ForwardRefExoticComponent<Omit<SystemProperties, keyof Dialog.PositionerProps> & Dialog.PositionerProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const DialogContent: import("react").ForwardRefExoticComponent<Omit<Omit<SystemProperties, keyof Dialog.ContentProps> & Dialog.ContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const DialogDescription: ({ textStyle, ...rest }: Dialog.DescriptionProps & TextProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const DialogTitle: ({ textStyle, ...rest }: Dialog.TitleProps & TextProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const DialogTrigger: import("react").ForwardRefExoticComponent<Dialog.TriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const DialogCloseTrigger: import("react").ForwardRefExoticComponent<Dialog.CloseTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const DialogHeader: import("@ndla/styled-system/jsx").StyledComponent<"div", {}>;
+export declare const DialogBody: import("@ndla/styled-system/jsx").StyledComponent<"div", {}>;
+export {};