@digdir/designsystemet-react 1.20.0 → 1.20.1

package/dist/cjs/components/textfield/textfield.cjs

@@ -0,0 +1,49 @@
+'use client';
+const require_label = require("../label/label.cjs");
+const require_validation_message = require("../validation-message/validation-message.cjs");
+const require_input = require("../input/input.cjs");
+const require_field_affix = require("../field/field-affix.cjs");
+const require_field_description = require("../field/field-description.cjs");
+const require_index = require("../field/index.cjs");
+const require_textarea = require("../textarea/textarea.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/textfield/textfield.tsx
+/**
+*  Composed text input component using `Field`
+*
+* `classname` & `style` are passed to the wrapper elements.
+*
+* Rest props are passed to the `Input` or `Textarea` component.
+* @example
+* <Textfield label="Textfield label">
+*/
+const Textfield = (0, react.forwardRef)(function Textfield({ label, description, error, multiline, prefix, suffix, "data-color": color, "data-size": size, counter, style, className, ...rest }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_index.Field, {
+		className,
+		"data-color": color,
+		"data-size": size,
+		style,
+		children: [
+			!!label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_label.Label, { children: label }),
+			!!description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_field_description.FieldDescription, { children: description }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_field_affix.FieldAffixes, { children: [
+				prefix === void 0 || /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_field_affix.FieldAffix, { children: prefix }),
+				multiline === true ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_textarea.Textarea, {
+					ref,
+					"aria-invalid": Boolean(error) || void 0,
+					...rest
+				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_input.Input, {
+					ref,
+					"aria-invalid": Boolean(error) || void 0,
+					...rest
+				}),
+				suffix === void 0 || /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_field_affix.FieldAffix, { children: suffix })
+			] }),
+			!!counter && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.Field.Counter, { ...typeof counter === "number" ? { limit: counter } : counter }),
+			!!error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_validation_message.ValidationMessage, { children: error })
+		]
+	});
+});
+//#endregion
+exports.Textfield = Textfield;

package/dist/cjs/components/textfield/textfield.d.cts

@@ -0,0 +1,78 @@
+
+import { DefaultProps, LabelRequired } from "../../types.cjs";
+import { FieldCounterProps } from "../field/field-counter.cjs";
+import "../field/index.cjs";
+import { InputProps } from "../input/input.cjs";
+import { TextareaProps } from "../textarea/textarea.cjs";
+import { ReactNode } from "react";
+//#region src/components/textfield/textfield.d.ts
+type InputProps_ = Omit<InputProps, 'prefix' | 'className' | 'style' | 'type'>;
+type TextareaProps_ = Omit<TextareaProps, 'prefix' | 'className' | 'style'>;
+type SharedTextfieldProps = {
+  /**
+   * Classname on the wrapper element `Field`
+   */
+  className?: InputProps['className'];
+  /**
+   * Style on the wrapper element `Field`
+   * @default undefined
+   */
+  style?: InputProps['style'];
+  /**
+   * Label
+   */
+  label?: ReactNode;
+  /**
+   * Description
+   */
+  description?: ReactNode;
+  /**
+   * Prefix
+   */
+  prefix?: string;
+  /**
+   * Suffix
+   */
+  suffix?: string;
+  /**
+   * Error message for field
+   */
+  error?: ReactNode;
+  /**
+   * Uses `Field.Counter` to display a character counter
+   * Pass a number to set a limit, or an object to configure the counter
+   */
+  counter?: FieldCounterProps | number;
+} & LabelRequired & DefaultProps;
+type TextfieldTextareaProps = {
+  /**
+   * Use to render a `Textarea` instead of `Input` for multiline support
+   **/
+  multiline: true;
+  type?: never;
+} & TextareaProps_;
+type TextfieldInputProps = {
+  /**
+   * Use to render a `Textarea` instead of `Input` for multiline support
+   **/
+  multiline?: false;
+  /**
+   * Supported `input` types
+   *
+   * @default 'text'
+   * */
+  type?: Exclude<InputProps['type'], 'radio' | 'checkbox'>;
+} & InputProps_;
+type TextfieldProps = SharedTextfieldProps & (TextfieldTextareaProps | TextfieldInputProps);
+/**
+ *  Composed text input component using `Field`
+ *
+ * `classname` & `style` are passed to the wrapper elements.
+ *
+ * Rest props are passed to the `Input` or `Textarea` component.
+ * @example
+ * <Textfield label="Textfield label">
+ */
+declare const Textfield: import("react").ForwardRefExoticComponent<TextfieldProps & import("react").RefAttributes<HTMLInputElement | HTMLTextAreaElement>>;
+//#endregion
+export { Textfield, TextfieldProps };

package/dist/cjs/components/toggle-group/index.cjs

@@ -0,0 +1,19 @@
+'use client';
+const require_toggle_group = require("./toggle-group.cjs");
+const require_toggle_group_item = require("./toggle-group-item.cjs");
+//#region src/components/toggle-group/index.ts
+/**
+* Display a group of buttons that can be toggled between.
+*
+* @example
+* <ToggleGroup aria-label="Label" onChange={(value) => console.log(value)}>
+*   <ToggleGroup.Item value='1'>Toggle 1</ToggleGroup.Item>
+*   <ToggleGroup.Item value='2'>Toggle 2</ToggleGroup.Item>
+*   <ToggleGroup.Item value='3'>Toggle 3</ToggleGroup.Item>
+* </ToggleGroup>
+*/
+const ToggleGroupComponent = Object.assign(require_toggle_group.ToggleGroup, { Item: require_toggle_group_item.ToggleGroupItem });
+ToggleGroupComponent.Item.displayName = "ToggleGroup.Item";
+//#endregion
+exports.ToggleGroup = ToggleGroupComponent;
+exports.ToggleGroupItem = require_toggle_group_item.ToggleGroupItem;

package/dist/cjs/components/toggle-group/index.d.cts

@@ -0,0 +1,25 @@
+
+import { ToggleGroup as ToggleGroup$1, ToggleGroupProps } from "./toggle-group.cjs";
+import { ToggleGroupItem, ToggleGroupItemProps } from "./toggle-group-item.cjs";
+//#region src/components/toggle-group/index.d.ts
+type ToggleGroup = typeof ToggleGroup$1 & {
+  /**
+   * A single item in a ToggleGroup.
+   * @example
+   * <ToggleGroup.Item value='1'>Toggle 1</ToggleGroup.Item>
+   */
+  Item: typeof ToggleGroupItem;
+};
+/**
+ * Display a group of buttons that can be toggled between.
+ *
+ * @example
+ * <ToggleGroup aria-label="Label" onChange={(value) => console.log(value)}>
+ *   <ToggleGroup.Item value='1'>Toggle 1</ToggleGroup.Item>
+ *   <ToggleGroup.Item value='2'>Toggle 2</ToggleGroup.Item>
+ *   <ToggleGroup.Item value='3'>Toggle 3</ToggleGroup.Item>
+ * </ToggleGroup>
+ */
+declare const ToggleGroupComponent: ToggleGroup;
+//#endregion
+export { ToggleGroupComponent as ToggleGroup, ToggleGroupItem, type ToggleGroupItemProps, type ToggleGroupProps };

package/dist/cjs/components/toggle-group/toggle-group-item.cjs

@@ -0,0 +1,46 @@
+'use client';
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+const require_toggle_group = require("./toggle-group.cjs");
+let clsx_lite = require("clsx/lite");
+clsx_lite = require_runtime.__toESM(clsx_lite, 1);
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/toggle-group/toggle-group-item.tsx
+/**
+* A single item in a ToggleGroup.
+* @example
+* <ToggleGroupItem value='1'>Toggle 1</ToggleGroupItem>
+*/
+const ToggleGroupItem = (0, react.forwardRef)(function ToggleGroupItem({ className, children, icon, value: rawValue, ...rest }, ref) {
+	const genValue = (0, react.useId)();
+	const toggleGroup = (0, react.useContext)(require_toggle_group.ToggleGroupContext);
+	const value = rawValue ?? genValue;
+	const active = toggleGroup.value === value;
+	const { "aria-disabled": ariaDisabled, disabled, readOnly, form, formAction, formEncType, formMethod, formNoValidate, formTarget, required, ...labelProps } = rest;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+		ref,
+		...labelProps,
+		className: (0, clsx_lite.default)("ds-button", className),
+		"data-variant": "tertiary",
+		"aria-disabled": ariaDisabled ?? disabled,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+			"aria-disabled": ariaDisabled,
+			checked: active,
+			disabled,
+			readOnly,
+			form,
+			formAction,
+			formEncType,
+			formMethod,
+			formNoValidate,
+			formTarget,
+			name: toggleGroup.name,
+			onChange: () => toggleGroup.onChange?.(value),
+			required,
+			type: "radio",
+			value
+		}), children]
+	});
+});
+//#endregion
+exports.ToggleGroupItem = ToggleGroupItem;

package/dist/cjs/components/toggle-group/toggle-group-item.d.cts

@@ -0,0 +1,33 @@
+
+import { DefaultProps } from "../../types.cjs";
+import { InputHTMLAttributes, LabelHTMLAttributes } from "react";
+//#region src/components/toggle-group/toggle-group-item.d.ts
+type ToggleGroupItemProps = {
+  /**
+   * The value of the ToggleGroupItem.
+   * Generates a random value if not set.
+   **/
+  value?: string;
+  /**
+   * @deprecated Icon prop is deprecated
+   **/
+  icon?: boolean;
+} & DefaultProps & LabelHTMLAttributes<HTMLLabelElement> & Pick<InputHTMLAttributes<HTMLInputElement>, 'formAction' | 'formEncType' | 'formTarget' | 'formMethod' | 'required' | 'formNoValidate' | 'value' | 'disabled' | 'readOnly'>;
+/**
+ * A single item in a ToggleGroup.
+ * @example
+ * <ToggleGroupItem value='1'>Toggle 1</ToggleGroupItem>
+ */
+declare const ToggleGroupItem: import("react").ForwardRefExoticComponent<{
+  /**
+   * The value of the ToggleGroupItem.
+   * Generates a random value if not set.
+   **/
+  value?: string;
+  /**
+   * @deprecated Icon prop is deprecated
+   **/
+  icon?: boolean;
+} & DefaultProps & LabelHTMLAttributes<HTMLLabelElement> & Pick<InputHTMLAttributes<HTMLInputElement>, "value" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "readOnly" | "required"> & import("react").RefAttributes<HTMLLabelElement>>;
+//#endregion
+export { ToggleGroupItem, ToggleGroupItemProps };

package/dist/cjs/components/toggle-group/toggle-group.cjs

@@ -0,0 +1,53 @@
+'use client';
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+let clsx_lite = require("clsx/lite");
+clsx_lite = require_runtime.__toESM(clsx_lite, 1);
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/toggle-group/toggle-group.tsx
+const ToggleGroupContext = (0, react.createContext)({});
+/**
+* Display a group of buttons that can be toggled between.
+*
+* @example
+* <ToggleGroup aria-label="Label" onChange={(value) => console.log(value)}>
+*   <ToggleGroup.Item value='1'>Toggle 1</ToggleGroup.Item>
+*   <ToggleGroup.Item value='2'>Toggle 2</ToggleGroup.Item>
+*   <ToggleGroup.Item value='3'>Toggle 3</ToggleGroup.Item>
+* </ToggleGroup>
+*/
+const ToggleGroup = (0, react.forwardRef)(function ToggleGroup({ "data-toggle-group": label, children, className, defaultValue, name, onChange, value, variant, ...rest }, ref) {
+	const nameId = (0, react.useId)();
+	const isControlled = value !== void 0;
+	const [uncontrolledValue, setUncontrolledValue] = (0, react.useState)(defaultValue);
+	let onValueChange = onChange;
+	if (!isControlled) {
+		onValueChange = (newValue) => {
+			setUncontrolledValue(newValue);
+			onChange?.(newValue);
+		};
+		value = uncontrolledValue;
+	}
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToggleGroupContext.Provider, {
+		value: {
+			defaultValue,
+			name: name ?? `togglegroup-name-${nameId}`,
+			onChange: onValueChange,
+			value,
+			variant
+		},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("fieldset", {
+			"aria-label": label,
+			className: (0, clsx_lite.default)("ds-toggle-group", className),
+			"data-variant": variant,
+			focusgroup: "radiogroup",
+			ref,
+			suppressHydrationWarning: true,
+			...rest,
+			children
+		})
+	});
+});
+//#endregion
+exports.ToggleGroup = ToggleGroup;
+exports.ToggleGroupContext = ToggleGroupContext;

package/dist/cjs/components/toggle-group/toggle-group.d.cts

@@ -0,0 +1,58 @@
+
+import { DefaultProps } from "../../types.cjs";
+import { MergeRight } from "../../utilities/types.cjs";
+import "../../utilities/index.cjs";
+import { HTMLAttributes } from "react";
+//#region src/components/toggle-group/toggle-group.d.ts
+type ToggleGroupProps = MergeRight<DefaultProps & Omit<HTMLAttributes<HTMLFieldSetElement>, 'value' | 'onChange' | 'aria-label' | 'aria-labelledby'>, {
+  /**
+   * Specify which variant to use
+   * @default 'primary'
+   */
+  variant?: 'primary' | 'secondary';
+  /**
+   * Controlled state for `ToggleGroup` component.
+   */
+  value?: string;
+  /**
+   * Default value.
+   */
+  defaultValue?: string;
+  /**
+   * Callback with selected `ToggleGroupItem` `value`
+   */
+  onChange?: (value: string) => void;
+  /**
+   * Form element name
+   */
+  name?: string;
+} & ({
+  /**
+   * Toggle group label for accessibility
+   * @deprecated Use aria-label or aria-labelledby instead.
+   */
+  'data-toggle-group'?: string;
+  'aria-label'?: never;
+  'aria-labelledby'?: never;
+} | {
+  'data-toggle-group'?: never;
+  'aria-labelledby'?: never;
+  'aria-label': string;
+} | {
+  'data-toggle-group'?: never;
+  'aria-labelledby': string;
+  'aria-label'?: never;
+})>;
+/**
+ * Display a group of buttons that can be toggled between.
+ *
+ * @example
+ * <ToggleGroup aria-label="Label" onChange={(value) => console.log(value)}>
+ *   <ToggleGroup.Item value='1'>Toggle 1</ToggleGroup.Item>
+ *   <ToggleGroup.Item value='2'>Toggle 2</ToggleGroup.Item>
+ *   <ToggleGroup.Item value='3'>Toggle 3</ToggleGroup.Item>
+ * </ToggleGroup>
+ */
+declare const ToggleGroup: import("react").ForwardRefExoticComponent<ToggleGroupProps & import("react").RefAttributes<HTMLFieldSetElement>>;
+//#endregion
+export { ToggleGroup, ToggleGroupProps };

package/dist/cjs/components/tooltip/tooltip.cjs

@@ -0,0 +1,36 @@
+'use client';
+require("@digdir/designsystemet-web");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _radix_ui_react_slot = require("@radix-ui/react-slot");
+//#region src/components/tooltip/tooltip.tsx
+/**
+* Tooltip component that displays a small piece of information when hovering or focusing on an element.
+*
+* @example
+* <Tooltip content='This is a tooltip'>
+*  <button>Hover me</button>
+* </Tooltip>
+*
+* @example
+* <Tooltip content='This is a tooltip'>
+*  Hover me
+* </Tooltip>
+*/
+const Tooltip = (0, react.forwardRef)(function Tooltip({ content, placement = "top", autoPlacement = true, ...rest }, ref) {
+	const isString = typeof rest.children === "string";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_slot.Slot, {
+		"data-tooltip": content,
+		"data-placement": placement,
+		"data-autoplacement": autoPlacement,
+		suppressHydrationWarning: true,
+		ref,
+		...rest,
+		children: isString ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			tabIndex: 0,
+			children: rest.children
+		}) : rest.children
+	});
+});
+//#endregion
+exports.Tooltip = Tooltip;

package/dist/cjs/components/tooltip/tooltip.d.cts

@@ -0,0 +1,94 @@
+
+import { DefaultProps, Placement } from "../../types.cjs";
+import { MergeRight } from "../../utilities/types.cjs";
+import "../../utilities/index.cjs";
+import "@digdir/designsystemet-web";
+import { HTMLAttributes, ReactElement, RefAttributes } from "react";
+//#region src/components/tooltip/tooltip.d.ts
+type TooltipProps = MergeRight<DefaultProps & HTMLAttributes<HTMLDivElement>, {
+  /**
+   * The element or string that triggers the tooltip.
+   *
+   * @note If it is a string, it will be wrapped in a span.
+   * @note If it is an element, it needs to be able to receive a ref.
+   */
+  children: (ReactElement & RefAttributes<HTMLElement>) | string;
+  /**
+   * Content of the tooltip
+   **/
+  content: string;
+  /**
+   * Placement of the tooltip on the trigger.
+   * @default 'top'
+   */
+  placement?: Placement;
+  /**
+   * Whether to enable auto placement.
+   * @default true
+   */
+  autoPlacement?: boolean;
+  /**
+   * Whether the tooltip is open or not.
+   * This overrides the internal state of the tooltip.
+   *
+   * @deprecated This should not be used on Tooltip. Use a Popover instead
+   * @TODO Look at this prop
+   */
+  open?: boolean;
+  /**
+   * @deprecated This prop has no effect. The tooltip will be set as `aria-description`
+   * if the component already contains accessible text, and `aria-label` otherwise.
+   */
+  type?: 'describedby' | 'labelledby';
+}>;
+/**
+ * Tooltip component that displays a small piece of information when hovering or focusing on an element.
+ *
+ * @example
+ * <Tooltip content='This is a tooltip'>
+ *  <button>Hover me</button>
+ * </Tooltip>
+ *
+ * @example
+ * <Tooltip content='This is a tooltip'>
+ *  Hover me
+ * </Tooltip>
+ */
+declare const Tooltip: import("react").ForwardRefExoticComponent<Omit<DefaultProps & HTMLAttributes<HTMLDivElement>, "children" | "content" | "type" | "placement" | "open" | "autoPlacement"> & {
+  /**
+   * The element or string that triggers the tooltip.
+   *
+   * @note If it is a string, it will be wrapped in a span.
+   * @note If it is an element, it needs to be able to receive a ref.
+   */
+  children: (ReactElement & RefAttributes<HTMLElement>) | string;
+  /**
+   * Content of the tooltip
+   **/
+  content: string;
+  /**
+   * Placement of the tooltip on the trigger.
+   * @default 'top'
+   */
+  placement?: Placement;
+  /**
+   * Whether to enable auto placement.
+   * @default true
+   */
+  autoPlacement?: boolean;
+  /**
+   * Whether the tooltip is open or not.
+   * This overrides the internal state of the tooltip.
+   *
+   * @deprecated This should not be used on Tooltip. Use a Popover instead
+   * @TODO Look at this prop
+   */
+  open?: boolean;
+  /**
+   * @deprecated This prop has no effect. The tooltip will be set as `aria-description`
+   * if the component already contains accessible text, and `aria-label` otherwise.
+   */
+  type?: "describedby" | "labelledby";
+} & RefAttributes<HTMLDivElement>>;
+//#endregion
+export { Tooltip, TooltipProps };

package/dist/cjs/components/validation-message/validation-message.cjs

@@ -0,0 +1,25 @@
+'use client';
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+let clsx_lite = require("clsx/lite");
+clsx_lite = require_runtime.__toESM(clsx_lite, 1);
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _radix_ui_react_slot = require("@radix-ui/react-slot");
+//#region src/components/validation-message/validation-message.tsx
+/**
+* Use `ValidationMessage` to display validation text
+*
+* @example
+* <ValidationMessage>This is a danger validation message</ValidationMessage>
+*/
+const ValidationMessage = (0, react.forwardRef)(function ValidationMessage({ className, asChild, ...rest }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(asChild ? _radix_ui_react_slot.Slot : "p", {
+		className: (0, clsx_lite.default)("ds-validation-message", className),
+		"data-field": "validation",
+		ref,
+		suppressHydrationWarning: true,
+		...rest
+	});
+});
+//#endregion
+exports.ValidationMessage = ValidationMessage;

package/dist/cjs/components/validation-message/validation-message.d.cts

@@ -0,0 +1,28 @@
+
+import { DefaultProps } from "../../types.cjs";
+import { MergeRight } from "../../utilities/types.cjs";
+import "../../utilities/index.cjs";
+import { HTMLAttributes } from "react";
+//#region src/components/validation-message/validation-message.d.ts
+type ValidationMessageProps = MergeRight<DefaultProps & HTMLAttributes<HTMLParagraphElement>, {
+  /**
+   * Change the default rendered element for the one passed as a child, merging their props and behavior.
+   * @default false
+   */
+  asChild?: boolean;
+}>;
+/**
+ * Use `ValidationMessage` to display validation text
+ *
+ * @example
+ * <ValidationMessage>This is a danger validation message</ValidationMessage>
+ */
+declare const ValidationMessage: import("react").ForwardRefExoticComponent<Omit<DefaultProps & HTMLAttributes<HTMLParagraphElement>, "asChild"> & {
+  /**
+   * Change the default rendered element for the one passed as a child, merging their props and behavior.
+   * @default false
+   */
+  asChild?: boolean;
+} & import("react").RefAttributes<HTMLParagraphElement>>;
+//#endregion
+export { ValidationMessage, ValidationMessageProps };