@digdir/designsystemet-react 1.19.1 → 1.20.1

package/dist/esm/components/field/field-counter.d.ts

@@ -0,0 +1,70 @@
+
+import { DefaultProps } from "../../types.js";
+import { ValidationMessageProps } from "../validation-message/validation-message.js";
+import "../../index.js";
+//#region src/components/field/field-counter.d.ts
+type FieldCounterProps = {
+  /**
+   * Label template for when `maxCount` is exceeded.
+   * Use `%d` to insert the number of characters.
+   *
+   * @default '%d tegn for mye'
+   */
+  over?: string;
+  /**
+   * Label template for count.
+   * Use `%d` to insert the number of characters.
+   *
+   * @default '%d tegn igjen'
+   */
+  under?: string;
+  /**
+   * @deprecated The hint attribute is deprecated.
+   */
+  hint?: string;
+  /**
+   * The maximum allowed characters.
+   *
+   * @default undefined
+   **/
+  limit: number;
+} & ValidationMessageProps;
+/**
+ * FieldCounter component, used to display a counter for a form field.
+ *
+ * @example
+ * <Field>
+ *   <Input />
+ *   <Field.Counter limit={100} under='%d tegn igjen' over='%d tegn for mye' />
+ * </Field>
+ */
+declare const FieldCounter: import("react").ForwardRefExoticComponent<{
+  /**
+   * Label template for when `maxCount` is exceeded.
+   * Use `%d` to insert the number of characters.
+   *
+   * @default '%d tegn for mye'
+   */
+  over?: string;
+  /**
+   * Label template for count.
+   * Use `%d` to insert the number of characters.
+   *
+   * @default '%d tegn igjen'
+   */
+  under?: string;
+  /**
+   * @deprecated The hint attribute is deprecated.
+   */
+  hint?: string;
+  /**
+   * The maximum allowed characters.
+   *
+   * @default undefined
+   **/
+  limit: number;
+} & Omit<DefaultProps & import("react").HTMLAttributes<HTMLParagraphElement>, "asChild"> & {
+  asChild?: boolean;
+} & import("react").RefAttributes<HTMLParagraphElement>>;
+//#endregion
+export { FieldCounter, FieldCounterProps };

package/dist/esm/components/field/field-counter.js

@@ -1,23 +1,28 @@
 'use client';
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { warn } from '../../utilities/index.js';
-import { ValidationMessage } from '../validation-message/validation-message.js';
-
+import { warn } from "../../utilities/index.js";
+import { ValidationMessage } from "../validation-message/validation-message.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/field/field-counter.tsx
 /**
- * FieldCounter component, used to display a counter for a form field.
- *
- * @example
- * <Field>
- *   <Input />
- *   <Field.Counter limit={100} under='%d tegn igjen' over='%d tegn for mye' />
- * </Field>
- */
+* FieldCounter component, used to display a counter for a form field.
+*
+* @example
+* <Field>
+*   <Input />
+*   <Field.Counter limit={100} under='%d tegn igjen' over='%d tegn for mye' />
+* </Field>
+*/
 const FieldCounter = forwardRef(function FieldCounter({ limit, under, over, hint, ...rest }, _ref) {
-    if (hint)
-        warn('hint attribute is deprecated on Field.Counter');
-    return (jsx(ValidationMessage, { suppressHydrationWarning // Since <ds-field> adds attributes
-        : true, "data-field": 'counter', "data-limit": limit, "data-under": under, "data-over": over, ...rest }));
+	if (hint) warn("hint attribute is deprecated on Field.Counter");
+	return /* @__PURE__ */ jsx(ValidationMessage, {
+		suppressHydrationWarning: true,
+		"data-field": "counter",
+		"data-limit": limit,
+		"data-under": under,
+		"data-over": over,
+		...rest
+	});
 });
-
+//#endregion
 export { FieldCounter };

package/dist/esm/components/field/field-description.d.ts

@@ -0,0 +1,13 @@
+
+import { HTMLAttributes } from "react";
+//#region src/components/field/field-description.d.ts
+type FieldDescriptionProps = HTMLAttributes<HTMLDivElement>;
+/**
+ * Field description component, used to provide additional information below the input.
+ *
+ * @example
+ * <FieldDescription>Additional information</FieldDescription>
+ */
+declare const FieldDescription: import("react").ForwardRefExoticComponent<FieldDescriptionProps & import("react").RefAttributes<HTMLDivElement>>;
+//#endregion
+export { FieldDescription, FieldDescriptionProps };

package/dist/esm/components/field/field-description.js

@@ -1,16 +1,20 @@
 'use client';
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/field/field-description.tsx
 /**
- * Field description component, used to provide additional information below the input.
- *
- * @example
- * <FieldDescription>Additional information</FieldDescription>
- */
+* Field description component, used to provide additional information below the input.
+*
+* @example
+* <FieldDescription>Additional information</FieldDescription>
+*/
 const FieldDescription = forwardRef(function FieldDescription(rest, ref) {
-    return (jsx("div", { suppressHydrationWarning // Since <ds-field> adds attributes
-        : true, "data-field": 'description', ref: ref, ...rest }));
+	return /* @__PURE__ */ jsx("div", {
+		suppressHydrationWarning: true,
+		"data-field": "description",
+		ref,
+		...rest
+	});
 });
-
+//#endregion
 export { FieldDescription };

package/dist/esm/components/field/field.d.ts

@@ -0,0 +1,44 @@
+
+import { DefaultProps } from "../../types.js";
+import { DSFieldElement } from "@digdir/designsystemet-web";
+import { HTMLAttributes } from "react";
+//#region src/components/field/field.d.ts
+type FieldProps = {
+  /**
+   * Position of toggle inputs (radio, checkbox, switch) in field
+   * @default start
+   */
+  position?: 'start' | 'end';
+  /**
+   * Change the default rendered element for the one passed as a child, merging their props and behavior.
+   * @default false
+   * @deprecated This is not supported anymore, as the element needs to be `ds-field`
+   */
+  asChild?: boolean;
+} & HTMLAttributes<DSFieldElement> & DefaultProps;
+/**
+ * Field component, used to wrap a form field.
+ *
+ * @example
+ * <Field>
+ *   <Label>Kort beskrivelse</Label>
+ *   <Field.Description>Beskrivelse</Field.Description>
+ *   <Input />
+ *   <ValidationMessage>Feilmelding</ValidationMessage>
+ * </Field>
+ */
+declare const Field: import("react").ForwardRefExoticComponent<{
+  /**
+   * Position of toggle inputs (radio, checkbox, switch) in field
+   * @default start
+   */
+  position?: "start" | "end";
+  /**
+   * Change the default rendered element for the one passed as a child, merging their props and behavior.
+   * @default false
+   * @deprecated This is not supported anymore, as the element needs to be `ds-field`
+   */
+  asChild?: boolean;
+} & HTMLAttributes<DSFieldElement> & DefaultProps & import("react").RefAttributes<DSFieldElement>>;
+//#endregion
+export { Field, FieldProps };

package/dist/esm/components/field/field.js

@@ -1,30 +1,33 @@
 'use client';
-import { jsx } from 'react/jsx-runtime';
-import '@digdir/designsystemet-web';
-import { Slot } from '@radix-ui/react-slot';
-import cl from 'clsx/lite';
-import { forwardRef, useRef } from 'react';
-import { useMergeRefs } from '../../utilities/hooks/use-merge-refs/use-merge-refs.js';
-
+import { useMergeRefs } from "../../utilities/hooks/use-merge-refs/use-merge-refs.js";
+import "../../utilities/hooks/index.js";
+import "@digdir/designsystemet-web";
+import cl from "clsx/lite";
+import { forwardRef, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+//#region src/components/field/field.tsx
 /**
- * Field component, used to wrap a form field.
- *
- * @example
- * <Field>
- *   <Label>Kort beskrivelse</Label>
- *   <Field.Description>Beskrivelse</Field.Description>
- *   <Input />
- *   <ValidationMessage>Feilmelding</ValidationMessage>
- * </Field>
- */
+* Field component, used to wrap a form field.
+*
+* @example
+* <Field>
+*   <Label>Kort beskrivelse</Label>
+*   <Field.Description>Beskrivelse</Field.Description>
+*   <Input />
+*   <ValidationMessage>Feilmelding</ValidationMessage>
+* </Field>
+*/
 const Field = forwardRef(function Field({ className, position, asChild, ...rest }, ref) {
-    const Component = asChild ? Slot : 'ds-field';
-    const fieldRef = useRef(null);
-    const mergedRefs = useMergeRefs([fieldRef, ref]);
-    return (jsx(Component, { ...(asChild
-            ? { className: cl('ds-field', className) }
-            : { class: cl('ds-field', className) }), suppressHydrationWarning // Since <ds-field> adds attributes
-        : true, "data-position": position, ref: mergedRefs, ...rest }));
+	const Component = asChild ? Slot : "ds-field";
+	const mergedRefs = useMergeRefs([useRef(null), ref]);
+	return /* @__PURE__ */ jsx(Component, {
+		...asChild ? { className: cl("ds-field", className) } : { class: cl("ds-field", className) },
+		suppressHydrationWarning: true,
+		"data-position": position,
+		ref: mergedRefs,
+		...rest
+	});
 });
-
+//#endregion
 export { Field };

package/dist/esm/components/field/index.d.ts

@@ -0,0 +1,62 @@
+
+import { Field as Field$1, FieldProps } from "./field.js";
+import { FieldAffix, FieldAffixProps, FieldAffixes, FieldAffixesProps } from "./field-affix.js";
+import { FieldCounter, FieldCounterProps } from "./field-counter.js";
+import { FieldDescription, FieldDescriptionProps } from "./field-description.js";
+//#region src/components/field/index.d.ts
+type Field = typeof Field$1 & {
+  /**
+   * Field description component, used to provide additional information below the input.
+   *
+   * @example
+   * <Field.Description>Additional information</Field.Description>
+   */
+  Description: typeof FieldDescription;
+  /**
+   * Field affixes component, used to display affixes like currency or unit.
+   *
+   * @example
+   * <Field.Affixes>
+   *   <Field.Affix>NOK</Field.Affix>
+   *   <Input />
+   *   <Field.Affix>pr. mnd.</Field.Affix>
+   * </Field.Affixes>
+   */
+  Affixes: typeof FieldAffixes;
+  /**
+   * Field Affix component, used to wrap a form field.
+   * Used within Field.Affixes.
+   *
+   * @example
+   * <Field.Affixes>
+   *   <Field.Affix>NOK</Field.Affix>
+   *   <Input />
+   *   <Field.Affix>pr. mnd.</Field.Affix>
+   * </Field.Affixes>
+   */
+  Affix: typeof FieldAffix;
+  /**
+   * Field counter component, used to display a character counter for the field.
+   *
+   * @example
+   * <Field>
+   *   <Input />
+   *   <Field.Counter limit={100} under='%d tegn igjen' over='%d tegn for mye' />
+   * </Field>
+   */
+  Counter: typeof FieldCounter;
+};
+/**
+ * Field component, used to wrap a form field.
+ *
+ * @example
+ * <Field>
+ *   <Label>Kort beskrivelse</Label>
+ *   <Field.Description>Beskrivelse</Field.Description>
+ *   <Input />
+ *   <ValidationMessage>Feilmelding</ValidationMessage>
+ * </Field>
+ */
+declare const FieldComponent: Field;
+//#endregion
+export { FieldComponent as Field, FieldAffix, type FieldAffixProps, FieldAffixes, type FieldAffixesProps, FieldCounter, type FieldCounterProps, FieldDescription, type FieldDescriptionProps, type FieldProps };

package/dist/esm/components/field/index.js

@@ -1,29 +1,29 @@
 'use client';
-import { Field } from './field.js';
-import { FieldAffix, FieldAffixes } from './field-affix.js';
-import { FieldCounter } from './field-counter.js';
-import { FieldDescription } from './field-description.js';
-
+import { Field } from "./field.js";
+import { FieldAffix, FieldAffixes } from "./field-affix.js";
+import { FieldCounter } from "./field-counter.js";
+import { FieldDescription } from "./field-description.js";
+//#region src/components/field/index.ts
 /**
- * Field component, used to wrap a form field.
- *
- * @example
- * <Field>
- *   <Label>Kort beskrivelse</Label>
- *   <Field.Description>Beskrivelse</Field.Description>
- *   <Input />
- *   <ValidationMessage>Feilmelding</ValidationMessage>
- * </Field>
- */
+* Field component, used to wrap a form field.
+*
+* @example
+* <Field>
+*   <Label>Kort beskrivelse</Label>
+*   <Field.Description>Beskrivelse</Field.Description>
+*   <Input />
+*   <ValidationMessage>Feilmelding</ValidationMessage>
+* </Field>
+*/
 const FieldComponent = Object.assign(Field, {
-    Description: FieldDescription,
-    Affixes: FieldAffixes,
-    Affix: FieldAffix,
-    Counter: FieldCounter,
+	Description: FieldDescription,
+	Affixes: FieldAffixes,
+	Affix: FieldAffix,
+	Counter: FieldCounter
 });
-FieldComponent.Description.displayName = 'Field.Description';
-FieldComponent.Affixes.displayName = 'Field.Affixes';
-FieldComponent.Affix.displayName = 'Field.Affix';
-FieldComponent.Counter.displayName = 'Field.Counter';
-
+FieldComponent.Description.displayName = "Field.Description";
+FieldComponent.Affixes.displayName = "Field.Affixes";
+FieldComponent.Affix.displayName = "Field.Affix";
+FieldComponent.Counter.displayName = "Field.Counter";
+//#endregion
 export { FieldComponent as Field, FieldAffix, FieldAffixes, FieldCounter, FieldDescription };

package/dist/esm/components/fieldset/fieldset-description.d.ts

@@ -0,0 +1,19 @@
+
+import { ParagraphProps } from "../paragraph/paragraph.js";
+//#region src/components/fieldset/fieldset-description.d.ts
+type FieldsetDescriptionProps = ParagraphProps;
+/**
+ * FieldsetDescription component, used to display a description for a fieldset.
+ *
+ * @example
+ * <FieldsetDescription>
+ *   Gi en kort beskrivelse i begge feltene
+ * </FieldsetDescription>
+ */
+declare const FieldsetDescription: import("react").ForwardRefExoticComponent<{
+  'data-size'?: "xs" | "sm" | "md" | "lg" | "xl";
+  variant?: "long" | "default" | "short";
+  asChild?: boolean;
+} & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLLegendElement>>;
+//#endregion
+export { FieldsetDescription, FieldsetDescriptionProps };

package/dist/esm/components/fieldset/fieldset-description.js

@@ -1,19 +1,22 @@
 'use client';
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { Paragraph } from '../paragraph/paragraph.js';
-
+import { Paragraph } from "../paragraph/paragraph.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/fieldset/fieldset-description.tsx
 /**
- * FieldsetDescription component, used to display a description for a fieldset.
- *
- * @example
- * <FieldsetDescription>
- *   Gi en kort beskrivelse i begge feltene
- * </FieldsetDescription>
- */
+* FieldsetDescription component, used to display a description for a fieldset.
+*
+* @example
+* <FieldsetDescription>
+*   Gi en kort beskrivelse i begge feltene
+* </FieldsetDescription>
+*/
 const FieldsetDescription = forwardRef(function FieldsetDescription(rest, ref) {
-    return (jsx(Paragraph, { suppressHydrationWarning // Since @digdir/designsystemet-web adds attributes
-        : true, ref: ref, ...rest }));
+	return /* @__PURE__ */ jsx(Paragraph, {
+		suppressHydrationWarning: true,
+		ref,
+		...rest
+	});
 });
-
+//#endregion
 export { FieldsetDescription };

package/dist/esm/components/fieldset/fieldset-legend.d.ts

@@ -0,0 +1,14 @@
+
+import { DefaultProps } from "../../types.js";
+import { HTMLAttributes } from "react";
+//#region src/components/fieldset/fieldset-legend.d.ts
+type FieldsetLegendProps = HTMLAttributes<HTMLLegendElement> & DefaultProps;
+/**
+ * FieldsetLegend component, used to display a legend for a fieldset.
+ *
+ * @example
+ * <FieldsetLegend>Skriv inn dine svar</FieldsetLegend>
+ */
+declare const FieldsetLegend: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLLegendElement> & DefaultProps & import("react").RefAttributes<HTMLLegendElement>>;
+//#endregion
+export { FieldsetLegend, FieldsetLegendProps };

package/dist/esm/components/fieldset/fieldset-legend.js

@@ -1,17 +1,23 @@
 'use client';
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { Label } from '../label/label.js';
-
+import { Label } from "../label/label.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/fieldset/fieldset-legend.tsx
 /**
- * FieldsetLegend component, used to display a legend for a fieldset.
- *
- * @example
- * <FieldsetLegend>Skriv inn dine svar</FieldsetLegend>
- */
+* FieldsetLegend component, used to display a legend for a fieldset.
+*
+* @example
+* <FieldsetLegend>Skriv inn dine svar</FieldsetLegend>
+*/
 const FieldsetLegend = forwardRef(function FieldsetLegend(rest, ref) {
-    return (jsx(Label, { asChild: true, children: jsx("legend", { suppressHydrationWarning // Since @digdir/designsystemet-web adds attributes
-            : true, ref: ref, ...rest }) }));
+	return /* @__PURE__ */ jsx(Label, {
+		asChild: true,
+		children: /* @__PURE__ */ jsx("legend", {
+			suppressHydrationWarning: true,
+			ref,
+			...rest
+		})
+	});
 });
-
+//#endregion
 export { FieldsetLegend };

package/dist/esm/components/fieldset/fieldset.d.ts

@@ -0,0 +1,23 @@
+
+import { DefaultProps } from "../../types.js";
+import { FieldsetHTMLAttributes } from "react";
+//#region src/components/fieldset/fieldset.d.ts
+type FieldsetProps = DefaultProps & FieldsetHTMLAttributes<HTMLFieldSetElement>;
+/**
+ * Fieldset component, used to wrap a form field. Uses native `fieldset` element.
+ *
+ * @example
+ * <Fieldset>
+ *   <Fieldset.Legend>Skriv inn dine svar</Fieldset.Legend>
+ *   <Fieldset.Description>
+ *     Gi en kort beskrivelse i begge feltene
+ *   </Fieldset.Description>
+ *   <Field>
+ *     <Label>Kort beskrivelse</Label>
+ *     <Input />
+ *   </Field>
+ * </Fieldset>
+ */
+declare const Fieldset: import("react").ForwardRefExoticComponent<DefaultProps & FieldsetHTMLAttributes<HTMLFieldSetElement> & import("react").RefAttributes<HTMLFieldSetElement>>;
+//#endregion
+export { Fieldset, FieldsetProps };

package/dist/esm/components/fieldset/fieldset.js

@@ -1,26 +1,30 @@
 'use client';
-import { jsx } from 'react/jsx-runtime';
-import cl from 'clsx/lite';
-import { forwardRef } from 'react';
-
+import cl from "clsx/lite";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/fieldset/fieldset.tsx
 /**
- * Fieldset component, used to wrap a form field. Uses native `fieldset` element.
- *
- * @example
- * <Fieldset>
- *   <Fieldset.Legend>Skriv inn dine svar</Fieldset.Legend>
- *   <Fieldset.Description>
- *     Gi en kort beskrivelse i begge feltene
- *   </Fieldset.Description>
- *   <Field>
- *     <Label>Kort beskrivelse</Label>
- *     <Input />
- *   </Field>
- * </Fieldset>
- */
+* Fieldset component, used to wrap a form field. Uses native `fieldset` element.
+*
+* @example
+* <Fieldset>
+*   <Fieldset.Legend>Skriv inn dine svar</Fieldset.Legend>
+*   <Fieldset.Description>
+*     Gi en kort beskrivelse i begge feltene
+*   </Fieldset.Description>
+*   <Field>
+*     <Label>Kort beskrivelse</Label>
+*     <Input />
+*   </Field>
+* </Fieldset>
+*/
 const Fieldset = forwardRef(function Fieldset({ className, ...rest }, ref) {
-    return (jsx("fieldset", { className: cl('ds-fieldset', className), suppressHydrationWarning // Since @digdir/designsystemet-web adds attributes
-        : true, ref: ref, ...rest }));
+	return /* @__PURE__ */ jsx("fieldset", {
+		className: cl("ds-fieldset", className),
+		suppressHydrationWarning: true,
+		ref,
+		...rest
+	});
 });
-
+//#endregion
 export { Fieldset };

package/dist/esm/components/fieldset/index.d.ts

@@ -0,0 +1,41 @@
+
+import { Fieldset as Fieldset$1, FieldsetProps } from "./fieldset.js";
+import { FieldsetDescription, FieldsetDescriptionProps } from "./fieldset-description.js";
+import { FieldsetLegend, FieldsetLegendProps } from "./fieldset-legend.js";
+//#region src/components/fieldset/index.d.ts
+type Fieldset = typeof Fieldset$1 & {
+  /**
+   * Fieldset.Legend component, used to display a legend for a fieldset.
+   *
+   * @example
+   * <Fieldset.Legend>Skriv inn dine svar</Fieldset.Legend>
+   */
+  Legend: typeof FieldsetLegend;
+  /**
+   * Fieldset.Description component, used to display a description for a fieldset.
+   *
+   * @example
+   * <Fieldset.Description>
+   *   Gi en kort beskrivelse i begge feltene
+   * </Fieldset.Description>
+   */
+  Description: typeof FieldsetDescription;
+};
+/**
+ * Fieldset component, used to wrap a form field.
+ *
+ * @example
+ * <Fieldset>
+ *   <Fieldset.Legend>Skriv inn dine svar</Fieldset.Legend>
+ *   <Fieldset.Description>
+ *     Gi en kort beskrivelse i begge feltene
+ *   </Fieldset.Description>
+ *   <Field>
+ *     <Label>Kort beskrivelse</Label>
+ *     <Input />
+ *   </Field>
+ * </Fieldset>
+ */
+declare const FieldsetComponent: Fieldset;
+//#endregion
+export { FieldsetComponent as Fieldset, FieldsetDescription, type FieldsetDescriptionProps, FieldsetLegend, type FieldsetLegendProps, type FieldsetProps };