@ndla/primitives 0.0.3 → 0.0.5

package/lib/Label.js

@@ -3,12 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Legend = exports.Label = exports.FormLegend = exports.FormLabel = exports.Fieldset = void 0;
+exports.Legend = exports.Label = exports.Fieldset = exports.FieldLabel = 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 _FormControl = require("./FormControl");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Copyright (c) 2024-present, NDLA.
@@ -45,24 +44,6 @@ const Legend = exports.Legend = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref)
     ref: ref
   });
 });
-const FormLegend = exports.FormLegend = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
-  var _control$getLabelProp;
-  const control = (0, _FormControl.useFormControlContext)();
-  // Legend does not use htmlFor (for), so we remove it.
-  const {
-    id: _,
-    htmlFor: __,
-    ...fieldProps
-  } = (_control$getLabelProp = control === null || control === void 0 ? void 0 : control.getLabelProps(props, ref)) !== null && _control$getLabelProp !== void 0 ? _control$getLabelProp : {
-    ref,
-    ...props
-  };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Legend, {
-    ...props,
-    ...fieldProps,
-    ref: ref
-  });
-});
 const StyledLabel = (0, _jsx2.styled)(_react2.ark.label, {
   base: {
     display: "inline-block",
@@ -89,19 +70,13 @@ const Label = exports.Label = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) =
     ref: ref
   });
 });
-const FormLabel = exports.FormLabel = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
-  var _control$getLabelProp2;
-  const control = (0, _FormControl.useFormControlContext)();
-  const fieldProps = (_control$getLabelProp2 = control === null || control === void 0 ? void 0 : control.getLabelProps(props, ref)) !== null && _control$getLabelProp2 !== void 0 ? _control$getLabelProp2 : {
-    ref,
-    ...props
-  };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Label, {
+const FieldLabel = exports.FieldLabel = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Field.Label, {
+  asChild: true,
+  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Label, {
     ...props,
-    ...fieldProps,
     ref: ref
-  });
-});
+  })
+}));
 const Fieldset = exports.Fieldset = (0, _jsx2.styled)("fieldset", {
   base: {
     border: "none",

package/lib/RadioGroup.js

@@ -9,7 +9,6 @@ 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 _Label = require("./Label");
 var _Text = require("./Text");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -98,14 +97,7 @@ const {
   withProvider,
   withContext
 } = (0, _createStyleContext.createStyleContext)(radioGroupRecipe);
-const InternalRadioGroupRoot = withProvider(_react2.RadioGroup.Root, "root");
-const RadioGroupRoot = exports.RadioGroupRoot = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
-  const field = (0, _FormControl.useFormControl)(props);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(InternalRadioGroupRoot, {
-    ...field,
-    ref: ref
-  });
-});
+const RadioGroupRoot = exports.RadioGroupRoot = withProvider(_react2.RadioGroup.Root, "root");
 const RadioGroupIndicator = exports.RadioGroupIndicator = withContext(_react2.RadioGroup.Indicator, "indicator");
 const RadioGroupItemControl = exports.RadioGroupItemControl = withContext(_react2.RadioGroup.ItemControl, "itemControl");
 const RadioGroupItem = exports.RadioGroupItem = withContext(_react2.RadioGroup.Item, "item");

package/lib/Switch.js

@@ -4,12 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SwitchThumb = exports.SwitchRoot = exports.SwitchLabel = exports.SwitchHiddenInput = exports.SwitchControl = 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");
 /**
@@ -106,19 +104,10 @@ const {
   withProvider,
   withContext
 } = (0, _createStyleContext.createStyleContext)(switchRecipe);
-const InternalSwitchRoot = withProvider(_react2.Switch.Root, "root");
-const SwitchRoot = exports.SwitchRoot = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
-  var _field$invalid;
-  const field = (0, _FormControl.useFormControl)(props);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(InternalSwitchRoot, {
-    invalid: (_field$invalid = field.invalid) !== null && _field$invalid !== void 0 ? _field$invalid : !!field["aria-invalid"],
-    ...field,
-    ref: ref
-  });
-});
-const SwitchControl = exports.SwitchControl = withContext(_react2.Switch.Control, "control");
-const SwitchThumb = exports.SwitchThumb = withContext(_react2.Switch.Thumb, "thumb");
-const InternalSwitchLabel = withContext(_react2.Switch.Label, "label");
+const SwitchRoot = exports.SwitchRoot = withProvider(_react.Switch.Root, "root");
+const SwitchControl = exports.SwitchControl = withContext(_react.Switch.Control, "control");
+const SwitchThumb = exports.SwitchThumb = withContext(_react.Switch.Thumb, "thumb");
+const InternalSwitchLabel = withContext(_react.Switch.Label, "label");
 const SwitchLabel = _ref => {
   let {
     textStyle = "label.medium",
@@ -138,4 +127,4 @@ const SwitchLabel = _ref => {
   });
 };
 exports.SwitchLabel = SwitchLabel;
-const SwitchHiddenInput = exports.SwitchHiddenInput = _react2.Switch.HiddenInput;
+const SwitchHiddenInput = exports.SwitchHiddenInput = _react.Switch.HiddenInput;

package/lib/Tabs.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.TabsTrigger = exports.TabsRoot = exports.TabsList = exports.TabsIndicator = exports.TabsContent = void 0;
+var _anatomy = require("@ark-ui/anatomy");
 var _react = require("@ark-ui/react");
 var _css = require("@ndla/styled-system/css");
 var _createStyleContext = require("./createStyleContext");
@@ -17,9 +18,7 @@ var _jsxRuntime = require("react/jsx-runtime");
  */
 
 const tabsRecipe = (0, _css.sva)({
-  // TODO: Defining the slots manually fixes an issue with variants not generating properly.
-  // Come back to this once ark releases a new version.
-  slots: ["root", "list", "trigger", "content", "indicator"],
+  slots: _anatomy.tabsAnatomy.keys(),
   base: {
     root: {
       position: "relative",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/primitives",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "description": "Primitive components for NDLA",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -34,7 +34,7 @@
     "@ndla/util": "^4.0.4"
   },
   "devDependencies": {
-    "@ndla/preset-panda": "^0.0.2",
+    "@ndla/preset-panda": "^0.0.3",
     "@pandacss/dev": "^0.40.1"
   },
   "peerDependencies": {
@@ -44,5 +44,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "c3c7ec99f9fa1bcd8e6d6f0c96d77f59773323cc"
+  "gitHead": "ca017a610c49c3f08691b7963b7a82284c3baa2b"
 }

package/es/FormControl.js

@@ -1,164 +0,0 @@
-/**
- * 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 { createContext, useCallback, useContext, useState } from "react";
-import { ark } from "@ark-ui/react";
-import { styled } from "@ndla/styled-system/jsx";
-import { composeRefs } from "@ndla/util";
-import { jsx as _jsx } from "react/jsx-runtime";
-const StyledFormControl = styled(ark.div, {
-  base: {
-    display: "flex",
-    flexDirection: "column",
-    gap: "3xsmall"
-  }
-});
-const useFormControlProvider = _ref => {
-  let {
-    id: idProp,
-    isRequired,
-    isDisabled,
-    isInvalid
-  } = _ref;
-  const id = "field-".concat(idProp);
-  const labelId = "".concat(id, "-label");
-  const errorTextId = "".concat(id, "-error-message");
-  const helpTextId = "".concat(id, "-helper");
-  const [hasErrorText, setHasErrorText] = useState(false);
-  const [hasHelpText, setHasHelpText] = useState(false);
-  const getHelpTextProps = useCallback(function () {
-    let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    let forwardedRef = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
-    return {
-      id: helpTextId,
-      ...props,
-      ref: composeRefs(forwardedRef, node => {
-        if (!node) return;
-        setHasHelpText(true);
-      })
-    };
-  }, [helpTextId]);
-  const getLabelProps = useCallback(function () {
-    let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    let forwardedRef = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
-    return {
-      ...props,
-      ref: forwardedRef,
-      "data-disabled": props !== null && props !== void 0 && props["data-disabled"] ? props["data-disabled"] : isDisabled,
-      "data-invalid": props !== null && props !== void 0 && props["data-invalid"] ? props["data-invalid"] : isInvalid,
-      id: props.id !== undefined ? props.id : labelId,
-      htmlFor: props.htmlFor !== undefined ? props.htmlFor : id
-    };
-  }, [id, isDisabled, isInvalid, labelId]);
-  const getErrorMessageProps = useCallback(function () {
-    let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    let forwardedRef = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
-    return {
-      id: errorTextId,
-      ...props,
-      ref: composeRefs(forwardedRef, node => {
-        if (!node) return;
-        setHasErrorText(true);
-      }),
-      "aria-live": "polite"
-    };
-  }, [errorTextId]);
-  return {
-    isRequired: !!isRequired,
-    isDisabled: !!isDisabled,
-    isInvalid: !!isInvalid,
-    hasErrorText,
-    setHasErrorText,
-    hasHelpText,
-    setHasHelpText,
-    id,
-    labelId,
-    errorTextId,
-    helpTextId,
-    getHelpTextProps,
-    getErrorMessageProps,
-    getLabelProps
-  };
-};
-const FormControlContext = /*#__PURE__*/createContext(undefined);
-
-/**
- * Form control component inspired by chakra-ui. Allows for easy composition of form fields.
- */
-export const FormControl = _ref2 => {
-  let {
-    children,
-    id,
-    isDisabled,
-    isInvalid,
-    isRequired,
-    ...rest
-  } = _ref2;
-  const context = useFormControlProvider({
-    id,
-    isDisabled,
-    isInvalid,
-    isRequired
-  });
-  return /*#__PURE__*/_jsx(FormControlContext.Provider, {
-    value: context,
-    children: /*#__PURE__*/_jsx(StyledFormControl, {
-      ...rest,
-      children: children
-    })
-  });
-};
-export const useFormControlContext = () => {
-  const context = useContext(FormControlContext);
-  return context;
-};
-export const useFormControlProps = _ref3 => {
-  let {
-    id,
-    disabled,
-    required,
-    isDisabled,
-    isInvalid,
-    isRequired,
-    ...rest
-  } = _ref3;
-  const field = useFormControlContext();
-  const labelIds = [];
-  if (field !== null && field !== void 0 && field.hasErrorText && field !== null && field !== void 0 && field.isInvalid) {
-    labelIds.push(field.errorTextId);
-  }
-  if (rest["aria-describedby"]) {
-    labelIds.push(rest["aria-describedby"]);
-  }
-  if (field !== null && field !== void 0 && field.hasHelpText) {
-    labelIds.push(field.helpTextId);
-  }
-  return {
-    ...rest,
-    "aria-describedby": labelIds.join(" ") || undefined,
-    id: id !== null && id !== void 0 ? id : field === null || field === void 0 ? void 0 : field.id,
-    isDisabled: disabled !== null && disabled !== void 0 ? disabled : field === null || field === void 0 ? void 0 : field.isDisabled,
-    isRequired: required !== null && required !== void 0 ? required : field === null || field === void 0 ? void 0 : field.isRequired,
-    isInvalid: isInvalid !== null && isInvalid !== void 0 ? isInvalid : field === null || field === void 0 ? void 0 : field.isInvalid
-  };
-};
-export const useFormControl = props => {
-  const {
-    isDisabled,
-    isInvalid,
-    isRequired,
-    ...rest
-  } = useFormControlProps(props);
-  return {
-    ...rest,
-    disabled: isDisabled,
-    required: isRequired,
-    "aria-invalid": isInvalid ? true : undefined,
-    "aria-required": isRequired ? true : undefined
-  };
-};

package/lib/FormControl.d.ts

@@ -1,67 +0,0 @@
-/**
- * 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, Ref, RefObject } from "react";
-import { HTMLArkProps } from "@ark-ui/react";
-import { JsxStyleProps } from "@ndla/styled-system/types";
-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 }: HTMLArkProps<"div"> & JsxStyleProps & FormControlProps) => import("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 {};

package/lib/FormControl.js

@@ -1,174 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useFormControlProps = exports.useFormControlContext = exports.useFormControl = exports.FormControl = void 0;
-var _react = require("react");
-var _react2 = require("@ark-ui/react");
-var _jsx2 = require("@ndla/styled-system/jsx");
-var _util = require("@ndla/util");
-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 StyledFormControl = (0, _jsx2.styled)(_react2.ark.div, {
-  base: {
-    display: "flex",
-    flexDirection: "column",
-    gap: "3xsmall"
-  }
-});
-const useFormControlProvider = _ref => {
-  let {
-    id: idProp,
-    isRequired,
-    isDisabled,
-    isInvalid
-  } = _ref;
-  const id = "field-".concat(idProp);
-  const labelId = "".concat(id, "-label");
-  const errorTextId = "".concat(id, "-error-message");
-  const helpTextId = "".concat(id, "-helper");
-  const [hasErrorText, setHasErrorText] = (0, _react.useState)(false);
-  const [hasHelpText, setHasHelpText] = (0, _react.useState)(false);
-  const getHelpTextProps = (0, _react.useCallback)(function () {
-    let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    let forwardedRef = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
-    return {
-      id: helpTextId,
-      ...props,
-      ref: (0, _util.composeRefs)(forwardedRef, node => {
-        if (!node) return;
-        setHasHelpText(true);
-      })
-    };
-  }, [helpTextId]);
-  const getLabelProps = (0, _react.useCallback)(function () {
-    let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    let forwardedRef = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
-    return {
-      ...props,
-      ref: forwardedRef,
-      "data-disabled": props !== null && props !== void 0 && props["data-disabled"] ? props["data-disabled"] : isDisabled,
-      "data-invalid": props !== null && props !== void 0 && props["data-invalid"] ? props["data-invalid"] : isInvalid,
-      id: props.id !== undefined ? props.id : labelId,
-      htmlFor: props.htmlFor !== undefined ? props.htmlFor : id
-    };
-  }, [id, isDisabled, isInvalid, labelId]);
-  const getErrorMessageProps = (0, _react.useCallback)(function () {
-    let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    let forwardedRef = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
-    return {
-      id: errorTextId,
-      ...props,
-      ref: (0, _util.composeRefs)(forwardedRef, node => {
-        if (!node) return;
-        setHasErrorText(true);
-      }),
-      "aria-live": "polite"
-    };
-  }, [errorTextId]);
-  return {
-    isRequired: !!isRequired,
-    isDisabled: !!isDisabled,
-    isInvalid: !!isInvalid,
-    hasErrorText,
-    setHasErrorText,
-    hasHelpText,
-    setHasHelpText,
-    id,
-    labelId,
-    errorTextId,
-    helpTextId,
-    getHelpTextProps,
-    getErrorMessageProps,
-    getLabelProps
-  };
-};
-const FormControlContext = /*#__PURE__*/(0, _react.createContext)(undefined);
-
-/**
- * Form control component inspired by chakra-ui. Allows for easy composition of form fields.
- */
-const FormControl = _ref2 => {
-  let {
-    children,
-    id,
-    isDisabled,
-    isInvalid,
-    isRequired,
-    ...rest
-  } = _ref2;
-  const context = useFormControlProvider({
-    id,
-    isDisabled,
-    isInvalid,
-    isRequired
-  });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(FormControlContext.Provider, {
-    value: context,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledFormControl, {
-      ...rest,
-      children: children
-    })
-  });
-};
-exports.FormControl = FormControl;
-const useFormControlContext = () => {
-  const context = (0, _react.useContext)(FormControlContext);
-  return context;
-};
-exports.useFormControlContext = useFormControlContext;
-const useFormControlProps = _ref3 => {
-  let {
-    id,
-    disabled,
-    required,
-    isDisabled,
-    isInvalid,
-    isRequired,
-    ...rest
-  } = _ref3;
-  const field = useFormControlContext();
-  const labelIds = [];
-  if (field !== null && field !== void 0 && field.hasErrorText && field !== null && field !== void 0 && field.isInvalid) {
-    labelIds.push(field.errorTextId);
-  }
-  if (rest["aria-describedby"]) {
-    labelIds.push(rest["aria-describedby"]);
-  }
-  if (field !== null && field !== void 0 && field.hasHelpText) {
-    labelIds.push(field.helpTextId);
-  }
-  return {
-    ...rest,
-    "aria-describedby": labelIds.join(" ") || undefined,
-    id: id !== null && id !== void 0 ? id : field === null || field === void 0 ? void 0 : field.id,
-    isDisabled: disabled !== null && disabled !== void 0 ? disabled : field === null || field === void 0 ? void 0 : field.isDisabled,
-    isRequired: required !== null && required !== void 0 ? required : field === null || field === void 0 ? void 0 : field.isRequired,
-    isInvalid: isInvalid !== null && isInvalid !== void 0 ? isInvalid : field === null || field === void 0 ? void 0 : field.isInvalid
-  };
-};
-exports.useFormControlProps = useFormControlProps;
-const useFormControl = props => {
-  const {
-    isDisabled,
-    isInvalid,
-    isRequired,
-    ...rest
-  } = useFormControlProps(props);
-  return {
-    ...rest,
-    disabled: isDisabled,
-    required: isRequired,
-    "aria-invalid": isInvalid ? true : undefined,
-    "aria-required": isRequired ? true : undefined
-  };
-};
-exports.useFormControl = useFormControl;