@ndla/primitives 0.0.2 → 0.0.4

package/lib/BlockQuote.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.BlockQuote = void 0;
+var _react = require("@ark-ui/react");
 var _css = require("@ndla/styled-system/css");
-var _jsx2 = require("@ndla/styled-system/jsx");
-var _jsxRuntime = require("react/jsx-runtime");
+var _jsx = require("@ndla/styled-system/jsx");
 /**
  * Copyright (c) 2024-present, NDLA.
  *
@@ -23,8 +23,8 @@ const blockQuoteRecipe = (0, _css.cva)({
   variants: {
     variant: {
       neutral: {
-        borderColor: "stroke.subtle"
-        // TODO: Figure out if this should have a background color.
+        borderColor: "stroke.subtle",
+        background: "surface.default"
       },
       brand1: {
         background: "surface.brand.1.subtle",
@@ -40,17 +40,4 @@ const blockQuoteRecipe = (0, _css.cva)({
     variant: "neutral"
   }
 });
-const BlockQuote = _ref => {
-  let {
-    className,
-    variant,
-    ...rest
-  } = _ref;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsx2.styled.blockquote, {
-    className: (0, _css.cx)(blockQuoteRecipe({
-      variant
-    }), className),
-    ...rest
-  });
-};
-exports.BlockQuote = BlockQuote;
+const BlockQuote = exports.BlockQuote = (0, _jsx.styled)(_react.ark.blockquote, blockQuoteRecipe);

package/lib/Button.d.ts

@@ -5,8 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import { ComponentPropsWithRef } from "react";
+import { HTMLArkProps } from "@ark-ui/react";
 import { RecipeVariantProps } from "@ndla/styled-system/css";
+import { JsxStyleProps, RecipeVariant } from "@ndla/styled-system/types";
 export declare const buttonBaseRecipe: import("@ndla/styled-system/types").RecipeRuntimeFn<{
     variant: {
         primary: {
@@ -118,14 +119,26 @@ export declare const buttonRecipe: import("@ndla/styled-system/types").RecipeRun
         };
     };
 }>;
-export type ButtonVariantProps = RecipeVariantProps<typeof buttonBaseRecipe> & RecipeVariantProps<typeof buttonRecipe>;
-export type ButtonProps = ComponentPropsWithRef<"button"> & ButtonVariantProps & {
-    variant?: Exclude<NonNullable<ButtonVariantProps>["variant"], "clear" | "clearSubtle">;
-};
-export declare const Button: import("react").ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
-export type IconButtonVariantProps = RecipeVariantProps<typeof buttonBaseRecipe>;
-export type IconButtonProps = ComponentPropsWithRef<"button"> & IconButtonVariantProps & {
-    variant?: Exclude<NonNullable<IconButtonVariantProps>["variant"], "link">;
-};
-export declare const IconButton: import("react").ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
 export declare const iconButtonRecipe: import("@ndla/styled-system/types").RecipeRuntimeFn<import("@ndla/styled-system/types").RecipeVariantRecord>;
+type Variant = RecipeVariant<typeof buttonBaseRecipe>["variant"];
+type ButtonVariant = Exclude<Variant, "clear" | "clearSubtle">;
+export type ButtonVariantProps = {
+    variant?: ButtonVariant;
+} & RecipeVariantProps<typeof buttonRecipe>;
+export type ButtonProps = HTMLArkProps<"button"> & JsxStyleProps & ButtonVariantProps;
+export declare const Button: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import("@ark-ui/react").PolymorphicProps & {
+    forwardCssProp?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & {
+    variant?: ButtonVariant | undefined;
+} & {
+    size?: "small" | "default" | undefined;
+} & import("react").RefAttributes<HTMLButtonElement>>;
+type IconButtonVariant = Exclude<Variant, "link">;
+export type IconButtonVariantProps = {
+    variant?: IconButtonVariant;
+};
+export type IconButtonProps = HTMLArkProps<"button"> & IconButtonVariantProps & JsxStyleProps;
+export declare const IconButton: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import("@ark-ui/react").PolymorphicProps & IconButtonVariantProps & {
+    forwardCssProp?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLButtonElement>>;
+export {};

package/lib/Button.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.iconButtonRecipe = exports.buttonRecipe = exports.buttonBaseRecipe = exports.IconButton = exports.Button = 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 _jsxRuntime = require("react/jsx-runtime");
@@ -166,53 +167,59 @@ const buttonRecipe = exports.buttonRecipe = (0, _css.cva)({
     }
   }
 });
+const iconButtonRecipe = exports.iconButtonRecipe = (0, _css.cva)({
+  base: {
+    lineHeight: "1",
+    minHeight: "unset",
+    height: "fit-content",
+    "& svg": {
+      marginInline: "0",
+      marginBlock: "0",
+      width: "medium",
+      height: "medium"
+    },
+    paddingInline: "xsmall",
+    paddingBlock: "xsmall"
+  }
+});
+const StyledButton = (0, _jsx2.styled)(_react2.ark.button, {}, {
+  defaultProps: {
+    type: "button"
+  }
+});
 const Button = exports.Button = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
-    type,
-    size,
-    className,
     variant,
-    ...rest
+    size,
+    css: cssProp,
+    ...props
   } = _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({
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledButton, {
+    ...props,
+    css: _css.css.raw(buttonBaseRecipe.raw({
       variant
     }), buttonRecipe.raw({
       size
-    })), className),
-    ...rest,
+    }), cssProp),
     ref: ref
   });
 });
+const StyledIconButton = (0, _jsx2.styled)(_react2.ark.button, {}, {
+  defaultProps: {
+    type: "button"
+  }
+});
 const IconButton = exports.IconButton = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
   let {
-    type,
-    className,
     variant,
-    ...rest
+    css: cssProp,
+    ...props
   } = _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({
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledIconButton, {
+    ...props,
+    css: _css.css.raw(buttonBaseRecipe.raw({
       variant
-    }), iconButtonRecipe.raw()), className),
-    ...rest,
+    }), iconButtonRecipe.raw(), cssProp),
     ref: ref
   });
-});
-const iconButtonRecipe = exports.iconButtonRecipe = (0, _css.cva)({
-  base: {
-    lineHeight: "1",
-    minHeight: "unset",
-    height: "fit-content",
-    "& svg": {
-      marginInline: "0",
-      marginBlock: "0",
-      width: "medium",
-      height: "medium"
-    },
-    paddingInline: "xsmall",
-    paddingBlock: "xsmall"
-  }
 });

package/lib/Checkbox.d.ts

@@ -6,10 +6,177 @@
  *
  */
 import { Checkbox } from "@ark-ui/react";
+import { JsxStyleProps, RecipeVariantProps } from "@ndla/styled-system/types";
 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>>;
+declare const checkboxRecipe: import("@ndla/styled-system/types").SlotRecipeRuntimeFn<"label" | "group" | "root" | "indicator" | "control", {
+    variant: {
+        checkbox: {
+            root: {
+                gap: "xxsmall";
+                _hover: {
+                    color: "text.action";
+                };
+                _focus: {
+                    outline: "2px solid";
+                    outlineOffset: "4xsmall";
+                    outlineColor: "stroke.default";
+                    borderRadius: "xsmall";
+                };
+            };
+            control: {
+                border: "2px solid";
+                borderColor: "stroke.subtle";
+                borderRadius: "xsmall";
+                background: "surface.default";
+                _hover: {
+                    boxShadow: "0 0 0 4px var(--shadow-color)";
+                    boxShadowColor: "surface.actionSubtle.hover.strong";
+                };
+                _checked: {
+                    backgroundColor: "surface.action";
+                    borderColor: "surface.action";
+                    color: "icon.onAction";
+                };
+                _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";
+                    };
+                };
+            };
+        };
+        chip: {
+            root: {
+                width: "fit-content";
+                color: "text.default";
+                gap: "4xsmall";
+                background: "surface.actionSubtle";
+                border: "1px solid";
+                borderColor: "stroke.subtle";
+                outlineColor: "stroke.subtle";
+                paddingInline: "xsmall";
+                paddingBlock: "4xsmall";
+                borderRadius: "large";
+                minHeight: "large";
+                transitionDuration: "normal";
+                transitionProperty: "border-color, background, box-shadow, color";
+                transitionTimingFunction: "default";
+                _disabled: {
+                    color: "text.disabled";
+                    borderColor: "stroke.disabled";
+                    background: "surface.disabled";
+                    _hover: {
+                        color: "text.disabled";
+                        borderColor: "stroke.disabled";
+                        background: "surface.disabled";
+                    };
+                    _checked: {
+                        color: "text.disabled";
+                        borderColor: "stroke.disabled";
+                        background: "surface.disabled";
+                        _hover: {
+                            color: "text.disabled";
+                            borderColor: "stroke.disabled";
+                            background: "surface.disabled";
+                        };
+                    };
+                };
+                _hover: {
+                    background: "surface.actionSubtle.hover";
+                    borderColor: "stroke.hover";
+                    outlineColor: "stroke.hover";
+                    _invalid: {
+                        backgroundColor: "surface.dangerSubtle";
+                    };
+                };
+                _checked: {
+                    color: "text.onAction";
+                    background: "surface.actionSubtle.selected";
+                    borderColor: "surface.actionSubtle.selected";
+                    outlineColor: "icon.onAction";
+                    _focus: {
+                        outlineOffset: "-4px";
+                    };
+                    _hover: {
+                        outlineOffset: "-2px";
+                        background: "surface.actionSubtle.hover";
+                        color: "text.default";
+                        borderColor: "stroke.hover";
+                        outlineColor: "stroke.hover";
+                    };
+                };
+                _invalid: {
+                    borderColor: "stroke.error";
+                    outlineColor: "stroke.error";
+                    background: "surface.dangerSubtle";
+                    outlineOffset: "-2px";
+                    _checked: {
+                        color: "text.default";
+                        borderColor: "stroke.error";
+                        outlineColor: "stroke.error";
+                        background: "surface.dangerSubtle";
+                        outlineOffset: "-2px";
+                        _hover: {
+                            borderColor: "stroke.hover";
+                            outlineColor: "stroke.hover";
+                        };
+                    };
+                };
+                _focus: {
+                    outlineStyle: "solid";
+                    outlineWidth: "2px";
+                    outlineOffset: "-2px";
+                };
+            };
+            control: {
+                display: "none";
+                _checked: {
+                    display: "flex";
+                    color: "text.onAction";
+                    _hover: {
+                        color: "stroke.hover";
+                    };
+                };
+                _disabled: {
+                    color: "stroke.disabled";
+                    _hover: {
+                        color: "stroke.disabled";
+                    };
+                };
+                _invalid: {
+                    _checked: {
+                        color: "stroke.error";
+                    };
+                };
+            };
+        };
+    };
+}>;
+export type CheckboxVariantProps = RecipeVariantProps<typeof checkboxRecipe>;
+export type CheckboxRootProps = Checkbox.RootProps & CheckboxVariantProps & JsxStyleProps;
+export declare const CheckboxRoot: import("react").ForwardRefExoticComponent<Checkbox.RootProps & {
+    variant?: "checkbox" | "chip" | undefined;
+} & {
+    forwardCssProp?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLLabelElement>>;
+export declare const CheckboxIndicator: import("react").ForwardRefExoticComponent<Checkbox.IndicatorProps & {
+    forwardCssProp?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLDivElement>>;
+export declare const CheckboxLabel: ({ textStyle, children, ...props }: Checkbox.LabelProps & TextProps & JsxStyleProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CheckboxControl: import("react").ForwardRefExoticComponent<{
+    forwardCssProp?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & Checkbox.ControlProps & import("react").RefAttributes<HTMLDivElement>>;
 export declare const CheckboxHiddenInput: import("react").ForwardRefExoticComponent<Checkbox.HiddenInputProps & import("react").RefAttributes<HTMLInputElement>>;
+export {};

package/lib/Checkbox.js

@@ -4,12 +4,10 @@ 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 _react = 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");
 /**
@@ -28,19 +26,12 @@ const checkboxRecipe = (0, _css.sva)({
       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"
+        cursor: "not-allowed",
+        _hover: {
+          color: "text.disabled"
+        }
       }
     },
     control: {
@@ -50,39 +41,167 @@ const checkboxRecipe = (0, _css.sva)({
       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"
+      transitionTimingFunction: "default"
+    }
+  },
+  defaultVariants: {
+    variant: "checkbox"
+  },
+  variants: {
+    variant: {
+      checkbox: {
+        root: {
+          gap: "xxsmall",
+          _hover: {
+            color: "text.action"
+          },
+          _focus: {
+            outline: "2px solid",
+            outlineOffset: "4xsmall",
+            outlineColor: "stroke.default",
+            borderRadius: "xsmall"
+          }
         },
-        _checked: {
-          background: "surface.disabled"
+        control: {
+          border: "2px solid",
+          borderColor: "stroke.subtle",
+          borderRadius: "xsmall",
+          background: "surface.default",
+          _hover: {
+            boxShadow: "0 0 0 4px var(--shadow-color)",
+            boxShadowColor: "surface.actionSubtle.hover.strong"
+          },
+          _checked: {
+            backgroundColor: "surface.action",
+            borderColor: "surface.action",
+            color: "icon.onAction"
+          },
+          _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"
+            }
+          }
         }
       },
-      _invalid: {
-        borderColor: "stroke.error",
-        _checked: {
-          color: "stroke.error",
-          borderColor: "stroke.error",
-          backgroundColor: "surface.default"
+      chip: {
+        root: {
+          width: "fit-content",
+          color: "text.default",
+          gap: "4xsmall",
+          background: "surface.actionSubtle",
+          border: "1px solid",
+          borderColor: "stroke.subtle",
+          outlineColor: "stroke.subtle",
+          paddingInline: "xsmall",
+          paddingBlock: "4xsmall",
+          borderRadius: "large",
+          minHeight: "large",
+          transitionDuration: "normal",
+          transitionProperty: "border-color, background, box-shadow, color",
+          transitionTimingFunction: "default",
+          _disabled: {
+            color: "text.disabled",
+            borderColor: "stroke.disabled",
+            background: "surface.disabled",
+            _hover: {
+              color: "text.disabled",
+              borderColor: "stroke.disabled",
+              background: "surface.disabled"
+            },
+            _checked: {
+              color: "text.disabled",
+              borderColor: "stroke.disabled",
+              background: "surface.disabled",
+              _hover: {
+                color: "text.disabled",
+                borderColor: "stroke.disabled",
+                background: "surface.disabled"
+              }
+            }
+          },
+          _hover: {
+            background: "surface.actionSubtle.hover",
+            borderColor: "stroke.hover",
+            outlineColor: "stroke.hover",
+            _invalid: {
+              backgroundColor: "surface.dangerSubtle"
+            }
+          },
+          _checked: {
+            color: "text.onAction",
+            background: "surface.actionSubtle.selected",
+            borderColor: "surface.actionSubtle.selected",
+            outlineColor: "icon.onAction",
+            _focus: {
+              outlineOffset: "-4px"
+            },
+            _hover: {
+              outlineOffset: "-2px",
+              background: "surface.actionSubtle.hover",
+              color: "text.default",
+              borderColor: "stroke.hover",
+              outlineColor: "stroke.hover"
+            }
+          },
+          _invalid: {
+            borderColor: "stroke.error",
+            outlineColor: "stroke.error",
+            background: "surface.dangerSubtle",
+            outlineOffset: "-2px",
+            _checked: {
+              color: "text.default",
+              borderColor: "stroke.error",
+              outlineColor: "stroke.error",
+              background: "surface.dangerSubtle",
+              outlineOffset: "-2px",
+              _hover: {
+                borderColor: "stroke.hover",
+                outlineColor: "stroke.hover"
+              }
+            }
+          },
+          _focus: {
+            outlineStyle: "solid",
+            outlineWidth: "2px",
+            outlineOffset: "-2px"
+          }
+        },
+        control: {
+          display: "none",
+          _checked: {
+            display: "flex",
+            color: "text.onAction",
+            _hover: {
+              color: "stroke.hover"
+            }
+          },
+          _disabled: {
+            color: "stroke.disabled",
+            _hover: {
+              color: "stroke.disabled"
+            }
+          },
+          _invalid: {
+            _checked: {
+              color: "stroke.error"
+            }
+          }
         }
       }
     }
@@ -92,19 +211,9 @@ 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 CheckboxRoot = exports.CheckboxRoot = withProvider(_react.Checkbox.Root, "root");
+const CheckboxIndicator = exports.CheckboxIndicator = withContext(_react.Checkbox.Indicator, "indicator");
+const InternalCheckboxLabel = withContext(_react.Checkbox.Label, "label");
 const CheckboxLabel = _ref => {
   let {
     textStyle = "label.medium",
@@ -121,5 +230,5 @@ const CheckboxLabel = _ref => {
   });
 };
 exports.CheckboxLabel = CheckboxLabel;
-const CheckboxControl = exports.CheckboxControl = withContext(_react2.Checkbox.Control, "control");
-const CheckboxHiddenInput = exports.CheckboxHiddenInput = _react2.Checkbox.HiddenInput;
+const CheckboxControl = exports.CheckboxControl = withContext(_react.Checkbox.Control, "control");
+const CheckboxHiddenInput = exports.CheckboxHiddenInput = _react.Checkbox.HiddenInput;