@digdir/designsystemet-react 1.20.0 → 1.20.1

package/dist/cjs/components/search/search-button.cjs

@@ -0,0 +1,24 @@
+'use client';
+const require_button = require("../button/button.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/search/search-button.tsx
+/**
+* SearchButton component, used to display a search button within a Search component.
+*
+* @example
+* <Search>
+*   <SearchInput aria-label='Søk' />
+*   <SearchButton>Søk</SearchButton>
+* </Search>
+*/
+const SearchButton = (0, react.forwardRef)(function SearchButton({ children = "Søk", ...rest }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.Button, {
+		ref,
+		type: "submit",
+		...rest,
+		children
+	});
+});
+//#endregion
+exports.SearchButton = SearchButton;

package/dist/cjs/components/search/search-button.d.cts

@@ -0,0 +1,41 @@
+
+import { DefaultProps } from "../../types.cjs";
+import { MergeRight } from "../../utilities/types.cjs";
+import "../../utilities/index.cjs";
+import { ButtonProps } from "../button/button.cjs";
+import "../../index.cjs";
+import { ReactNode } from "react";
+//#region src/components/search/search-button.d.ts
+type SearchButtonProps = MergeRight<ButtonProps, {
+  /**
+   * Variant of the button
+   * @default 'primary'
+   */
+  variant?: 'primary' | 'secondary';
+  /**
+   * Children of the button
+   * @default 'Søk'
+   */
+  children?: ReactNode;
+}>;
+/**
+ * SearchButton component, used to display a search button within a Search component.
+ *
+ * @example
+ * <Search>
+ *   <SearchInput aria-label='Søk' />
+ *   <SearchButton>Søk</SearchButton>
+ * </Search>
+ */
+declare const SearchButton: import("react").ForwardRefExoticComponent<Omit<DefaultProps & Omit<import("react").ButtonHTMLAttributes<HTMLButtonElement>, "command" | "commandfor" | "commandFor">, "asChild" | "command" | "commandfor" | "commandFor" | "type" | "variant" | "icon" | "loading"> & {
+  variant?: "primary" | "secondary" | "tertiary";
+  icon?: boolean;
+  loading?: boolean | ReactNode;
+  asChild?: boolean;
+  type?: import("react").ButtonHTMLAttributes<HTMLButtonElement>["type"];
+  command?: string;
+  commandfor?: string;
+  commandFor?: string;
+} & import("react").RefAttributes<HTMLButtonElement>>;
+//#endregion
+export { SearchButton, SearchButtonProps };

package/dist/cjs/components/search/search-clear.cjs

@@ -0,0 +1,25 @@
+'use client';
+const require_button = require("../button/button.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/search/search-clear.tsx
+/**
+* SearchClear component, used to display a clear button when the search input is not empty.
+*
+* @example
+* <Search>
+*   <SearchInput aria-label='Søk' />
+*   <SearchClear />
+* </Search>
+*/
+const SearchClear = (0, react.forwardRef)(function SearchClear({ "aria-label": label = "Tøm", ...rest }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.Button, {
+		"aria-label": label,
+		ref,
+		type: "reset",
+		variant: "tertiary",
+		...rest
+	});
+});
+//#endregion
+exports.SearchClear = SearchClear;

package/dist/cjs/components/search/search-clear.d.cts

@@ -0,0 +1,28 @@
+
+import { ButtonProps } from "../button/button.cjs";
+//#region src/components/search/search-clear.d.ts
+type SearchClearProps = Omit<ButtonProps, 'variant' | 'children'> & {
+  /**
+   * Aria label for the clear button
+   * @default 'Tøm'
+   */
+  'aria-label'?: string;
+};
+/**
+ * SearchClear component, used to display a clear button when the search input is not empty.
+ *
+ * @example
+ * <Search>
+ *   <SearchInput aria-label='Søk' />
+ *   <SearchClear />
+ * </Search>
+ */
+declare const SearchClear: import("react").ForwardRefExoticComponent<Omit<ButtonProps, "children" | "variant"> & {
+  /**
+   * Aria label for the clear button
+   * @default 'Tøm'
+   */
+  'aria-label'?: string;
+} & import("react").RefAttributes<HTMLButtonElement>>;
+//#endregion
+export { SearchClear, SearchClearProps };

package/dist/cjs/components/search/search-input.cjs

@@ -0,0 +1,22 @@
+'use client';
+const require_input = require("../input/input.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/search/search-input.tsx
+/**
+* SearchInput component, used to display a search input within the Search component.
+*
+* @example
+* <Search>
+*   <SearchInput aria-label='Søk' />
+* </Search>
+*/
+const SearchInput = (0, react.forwardRef)(function SearchInput({ type = "search", ...rest }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_input.Input, {
+		ref,
+		type,
+		...rest
+	});
+});
+//#endregion
+exports.SearchInput = SearchInput;

package/dist/cjs/components/search/search-input.d.cts

@@ -0,0 +1,28 @@
+
+import { DefaultProps } from "../../types.cjs";
+import { InputHTMLAttributes } from "react";
+//#region src/components/search/search-input.d.ts
+type SearchInputProps = DefaultProps & Omit<InputHTMLAttributes<HTMLInputElement>, 'readOnly' | 'type'> & {
+  /**
+   * Type of input, affects if magnifying glass is shown or not. Use 'text' to hide magnifying glass.
+   * @default 'search'
+   */
+  type?: 'text' | 'search';
+};
+/**
+ * SearchInput component, used to display a search input within the Search component.
+ *
+ * @example
+ * <Search>
+ *   <SearchInput aria-label='Søk' />
+ * </Search>
+ */
+declare const SearchInput: import("react").ForwardRefExoticComponent<DefaultProps & Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "readOnly"> & {
+  /**
+   * Type of input, affects if magnifying glass is shown or not. Use 'text' to hide magnifying glass.
+   * @default 'search'
+   */
+  type?: "text" | "search";
+} & import("react").RefAttributes<HTMLInputElement>>;
+//#endregion
+export { SearchInput, SearchInputProps };

package/dist/cjs/components/search/search.cjs

@@ -0,0 +1,33 @@
+'use client';
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+require("@digdir/designsystemet-web");
+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/search/search.tsx
+/**
+* Search component, use to display different variations of a search input
+*
+* @example with button
+* <Search>
+*   <Search.Input aria-label='Søk' />
+*   <Search.Clear />
+*   <Search.Button />
+* </Search>
+*
+* @example with icon
+* <Search>
+*   <Search.Input aria-label='Søk' />
+*   <Search.Clear />
+* </Search>
+*/
+const Search = (0, react.forwardRef)(function Search({ className, ...rest }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ds-suggestion", {
+		ref,
+		class: (0, clsx_lite.default)("ds-search", className),
+		...rest
+	});
+});
+//#endregion
+exports.Search = Search;

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

@@ -0,0 +1,25 @@
+
+import { DefaultProps } from "../../types.cjs";
+import { DSSuggestionElement } from "@digdir/designsystemet-web";
+import { HTMLAttributes } from "react";
+//#region src/components/search/search.d.ts
+type SearchProps = DefaultProps & HTMLAttributes<DSSuggestionElement>;
+/**
+ * Search component, use to display different variations of a search input
+ *
+ * @example with button
+ * <Search>
+ *   <Search.Input aria-label='Søk' />
+ *   <Search.Clear />
+ *   <Search.Button />
+ * </Search>
+ *
+ * @example with icon
+ * <Search>
+ *   <Search.Input aria-label='Søk' />
+ *   <Search.Clear />
+ * </Search>
+ */
+declare const Search: import("react").ForwardRefExoticComponent<DefaultProps & HTMLAttributes<DSSuggestionElement> & import("react").RefAttributes<DSSuggestionElement>>;
+//#endregion
+export { Search, SearchProps };

package/dist/cjs/components/select/index.cjs

@@ -0,0 +1,24 @@
+'use client';
+const require_select = require("./select.cjs");
+const require_select_optgroup = require("./select-optgroup.cjs");
+const require_select_option = require("./select-option.cjs");
+//#region src/components/select/index.ts
+/**
+* Select component, used to display a native select.
+*
+* @example
+* <Select>
+*   <Select.Option value='1'>Option 1</Select.Option>
+*   <Select.Option value='2'>Option 2</Select.Option>
+* </Select>
+*/
+const SelectComponent = Object.assign(require_select.Select, {
+	Option: require_select_option.SelectOption,
+	Optgroup: require_select_optgroup.SelectOptgroup
+});
+SelectComponent.Option.displayName = "Select.Option";
+SelectComponent.Optgroup.displayName = "Select.Optgroup";
+//#endregion
+exports.Select = SelectComponent;
+exports.SelectOptgroup = require_select_optgroup.SelectOptgroup;
+exports.SelectOption = require_select_option.SelectOption;

package/dist/cjs/components/select/index.d.cts

@@ -0,0 +1,41 @@
+
+import { Select as Select$1, SelectProps } from "./select.cjs";
+import { SelectOptgroup, SelectOptgroupProps } from "./select-optgroup.cjs";
+import { SelectOption, SelectOptionProps } from "./select-option.cjs";
+//#region src/components/select/index.d.ts
+type Select = typeof Select$1 & {
+  /**
+   * Select.Option component, used to display a native option within a select.
+   *
+   * @example
+   * <Select>
+   *   <Select.Option value='1'>Option 1</Select.Option>
+   *   <Select.Option value='2'>Option 2</Select.Option>
+   * </Select>
+   */
+  Option: typeof SelectOption;
+  /**
+   * Select.Optgroup component, used to display a native optgroup within a select.
+   *
+   * @example
+   * <Select>
+   *   <Select.Optgroup label='Group 1'>
+   *     <Select.Option value='1'>Option 1</Select.Option>
+   *     <Select.Option value='2'>Option 2</Select.Option>
+   *   </Select.Optgroup>
+   * </Select>
+   */
+  Optgroup: typeof SelectOptgroup;
+};
+/**
+ * Select component, used to display a native select.
+ *
+ * @example
+ * <Select>
+ *   <Select.Option value='1'>Option 1</Select.Option>
+ *   <Select.Option value='2'>Option 2</Select.Option>
+ * </Select>
+ */
+declare const SelectComponent: Select;
+//#endregion
+export { SelectComponent as Select, SelectOptgroup, type SelectOptgroupProps, SelectOption, type SelectOptionProps, type SelectProps };

package/dist/cjs/components/select/select-optgroup.cjs

@@ -0,0 +1,24 @@
+'use client';
+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/select/select-optgroup.tsx
+/**
+* SelectOptgroup component, used to display a native optgroup within a select.
+*
+* @example
+* <Select>
+*   <SelectOptgroup label='Group 1'>
+*     <SelectOption value='1'>Option 1</SelectOption>
+*     <SelectOption value='2'>Option 2</SelectOption>
+*   </SelectOptgroup>
+* </Select>
+*/
+const SelectOptgroup = (0, react.forwardRef)(function SelectOptgroup({ asChild, ...rest }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(asChild ? _radix_ui_react_slot.Slot : "optgroup", {
+		...rest,
+		ref
+	});
+});
+//#endregion
+exports.SelectOptgroup = SelectOptgroup;

package/dist/cjs/components/select/select-optgroup.d.cts

@@ -0,0 +1,30 @@
+
+import { OptgroupHTMLAttributes } from "react";
+//#region src/components/select/select-optgroup.d.ts
+type SelectOptgroupProps = {
+  /**
+   * Change the default rendered element for the one passed as a child, merging their props and behavior.
+   * @default false
+   */
+  asChild?: boolean;
+} & OptgroupHTMLAttributes<HTMLOptGroupElement>;
+/**
+ * SelectOptgroup component, used to display a native optgroup within a select.
+ *
+ * @example
+ * <Select>
+ *   <SelectOptgroup label='Group 1'>
+ *     <SelectOption value='1'>Option 1</SelectOption>
+ *     <SelectOption value='2'>Option 2</SelectOption>
+ *   </SelectOptgroup>
+ * </Select>
+ */
+declare const SelectOptgroup: import("react").ForwardRefExoticComponent<{
+  /**
+   * Change the default rendered element for the one passed as a child, merging their props and behavior.
+   * @default false
+   */
+  asChild?: boolean;
+} & OptgroupHTMLAttributes<HTMLOptGroupElement> & import("react").RefAttributes<HTMLOptGroupElement>>;
+//#endregion
+export { SelectOptgroup, SelectOptgroupProps };

package/dist/cjs/components/select/select-option.cjs

@@ -0,0 +1,22 @@
+'use client';
+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/select/select-option.tsx
+/**
+* SelectOption component, used to display a native option within a select.
+*
+* @example
+* <Select>
+*   <SelectOption value='1'>Option 1</SelectOption>
+*   <SelectOption value='2'>Option 2</SelectOption>
+* </Select>
+*/
+const SelectOption = (0, react.forwardRef)(function SelectOption({ asChild, ...rest }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(asChild ? _radix_ui_react_slot.Slot : "option", {
+		...rest,
+		ref
+	});
+});
+//#endregion
+exports.SelectOption = SelectOption;

package/dist/cjs/components/select/select-option.d.cts

@@ -0,0 +1,28 @@
+
+import { OptionHTMLAttributes } from "react";
+//#region src/components/select/select-option.d.ts
+type SelectOptionProps = {
+  /**
+   * Change the default rendered element for the one passed as a child, merging their props and behavior.
+   * @default false
+   */
+  asChild?: boolean;
+} & OptionHTMLAttributes<HTMLOptionElement>;
+/**
+ * SelectOption component, used to display a native option within a select.
+ *
+ * @example
+ * <Select>
+ *   <SelectOption value='1'>Option 1</SelectOption>
+ *   <SelectOption value='2'>Option 2</SelectOption>
+ * </Select>
+ */
+declare const SelectOption: import("react").ForwardRefExoticComponent<{
+  /**
+   * Change the default rendered element for the one passed as a child, merging their props and behavior.
+   * @default false
+   */
+  asChild?: boolean;
+} & OptionHTMLAttributes<HTMLOptionElement> & import("react").RefAttributes<HTMLOptionElement>>;
+//#endregion
+export { SelectOption, SelectOptionProps };

package/dist/cjs/components/select/select.cjs

@@ -0,0 +1,28 @@
+'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/select/select.tsx
+/**
+* Select component, used to display a native select.
+*
+* @example
+* <Select>
+*   <Select.Option value='1'>Option 1</Select.Option>
+*   <Select.Option value='2'>Option 2</Select.Option>
+* </Select>
+*/
+const Select = (0, react.forwardRef)(function Select({ className, onKeyDown, onMouseDown, width, readOnly, ...rest }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("select", {
+		className: (0, clsx_lite.default)("ds-input", className),
+		"aria-readonly": rest["aria-readonly"] ?? readOnly,
+		suppressHydrationWarning: true,
+		"data-width": width,
+		ref,
+		...rest
+	});
+});
+//#endregion
+exports.Select = Select;

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

@@ -0,0 +1,44 @@
+
+import { DefaultProps } from "../../types.cjs";
+import { MergeRight } from "../../utilities/types.cjs";
+import "../../utilities/index.cjs";
+import { SelectHTMLAttributes } from "react";
+//#region src/components/select/select.d.ts
+type SelectProps = MergeRight<DefaultProps & Omit<SelectHTMLAttributes<HTMLSelectElement>, 'multiple' | 'size'> // Also Omit size as this sets amount of visible options in multiselect
+, {
+  /**
+   * Defines if the select is readOnly
+   * @deprecated Use `aria-readonly` instead.
+   * @default false
+   */
+  readOnly?: boolean;
+  /**
+   * Defines the width of Select, where "auto" matches the content width.
+   * @default full
+   */
+  width?: 'full' | 'auto';
+}>;
+/**
+ * Select component, used to display a native select.
+ *
+ * @example
+ * <Select>
+ *   <Select.Option value='1'>Option 1</Select.Option>
+ *   <Select.Option value='2'>Option 2</Select.Option>
+ * </Select>
+ */
+declare const Select: import("react").ForwardRefExoticComponent<Omit<DefaultProps & Omit<SelectHTMLAttributes<HTMLSelectElement>, "size" | "multiple">, "readOnly" | "width"> & {
+  /**
+   * Defines if the select is readOnly
+   * @deprecated Use `aria-readonly` instead.
+   * @default false
+   */
+  readOnly?: boolean;
+  /**
+   * Defines the width of Select, where "auto" matches the content width.
+   * @default full
+   */
+  width?: "full" | "auto";
+} & import("react").RefAttributes<HTMLSelectElement>>;
+//#endregion
+export { Select, SelectProps };

package/dist/cjs/components/skeleton/skeleton.cjs

@@ -0,0 +1,40 @@
+'use client';
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+const require_use_merge_refs = require("../../utilities/hooks/use-merge-refs/use-merge-refs.cjs");
+const require_use_synchronized_animation = require("../../utilities/hooks/use-synchronized-animation/use-synchronized-animation.cjs");
+require("../../utilities/hooks/index.cjs");
+require("../../utilities/index.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/skeleton/skeleton.tsx
+/**
+* Skeleton is used to represent a draft of page while the content loads.
+*
+* @example
+* <Skeleton variant="circle" />
+* <Skeleton variant="text" />
+* <Skeleton variant="rectangle" />
+*/
+const Skeleton = (0, react.forwardRef)(function Skeleton({ asChild, className, height, style, variant, width, ...rest }, ref) {
+	const Component = asChild ? _radix_ui_react_slot.Slot : "span";
+	const isText = variant === "text";
+	const mergedRefs = require_use_merge_refs.useMergeRefs([require_use_synchronized_animation.useSynchronizedAnimation("ds-skeleton-opacity-fade"), ref]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, {
+		"aria-hidden": "true",
+		className: (0, clsx_lite.default)("ds-skeleton", className),
+		"data-text": isText ? "-".repeat(Number(width) || 1) : void 0,
+		"data-variant": variant,
+		ref: mergedRefs,
+		style: isText ? style : {
+			width,
+			height,
+			...style
+		},
+		...rest
+	});
+});
+//#endregion
+exports.Skeleton = Skeleton;

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

@@ -0,0 +1,57 @@
+
+import { HTMLAttributes } from "react";
+//#region src/components/skeleton/skeleton.d.ts
+type SkeletonProps = {
+  /**
+   * The width of the component
+   */
+  width?: string | number;
+  /**
+   * The height of the component
+   */
+  height?: string | number;
+  /**
+   * The shape variant
+   * @default 'rectangle'
+   */
+  variant?: 'rectangle' | 'circle' | 'text';
+  /**
+   * Change the default rendered element for the one passed as a child, merging their props and behavior.
+   * @default false
+   */
+  asChild?: boolean;
+  /** @deprecated This prop has no effect. Use `width` or supply text as children instead */
+  characters?: number;
+} & HTMLAttributes<HTMLSpanElement>;
+/**
+ * Skeleton is used to represent a draft of page while the content loads.
+ *
+ * @example
+ * <Skeleton variant="circle" />
+ * <Skeleton variant="text" />
+ * <Skeleton variant="rectangle" />
+ */
+declare const Skeleton: import("react").ForwardRefExoticComponent<{
+  /**
+   * The width of the component
+   */
+  width?: string | number;
+  /**
+   * The height of the component
+   */
+  height?: string | number;
+  /**
+   * The shape variant
+   * @default 'rectangle'
+   */
+  variant?: "rectangle" | "circle" | "text";
+  /**
+   * Change the default rendered element for the one passed as a child, merging their props and behavior.
+   * @default false
+   */
+  asChild?: boolean;
+  /** @deprecated This prop has no effect. Use `width` or supply text as children instead */
+  characters?: number;
+} & HTMLAttributes<HTMLSpanElement> & import("react").RefAttributes<HTMLSpanElement>>;
+//#endregion
+export { Skeleton, SkeletonProps };

package/dist/cjs/components/skip-link/skip-link.cjs

@@ -0,0 +1,24 @@
+'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/skip-link/skip-link.tsx
+/**
+* SkipLink component, used to display a skip link within the page.
+* Place it at the top of the page to allow users to skip to the main content.
+*
+* @example
+* <SkipLink href='#main-content'>Skip to main content</SkipLink>
+*/
+const SkipLink = (0, react.forwardRef)(function SkipLink({ children, className, ...rest }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+		className: (0, clsx_lite.default)("ds-skip-link", className),
+		...rest,
+		ref,
+		children
+	});
+});
+//#endregion
+exports.SkipLink = SkipLink;

package/dist/cjs/components/skip-link/skip-link.d.cts

@@ -0,0 +1,35 @@
+
+import { DefaultProps } from "../../types.cjs";
+import { MergeRight } from "../../utilities/types.cjs";
+import "../../utilities/index.cjs";
+import { AnchorHTMLAttributes, ReactNode } from "react";
+//#region src/components/skip-link/skip-link.d.ts
+type SkipLinkProps = MergeRight<DefaultProps & AnchorHTMLAttributes<HTMLAnchorElement>, {
+  /**
+   * The content to display inside the skiplink.
+   */
+  children: ReactNode;
+  /**
+   * Href of an element in the DOM the skiplink should skip to. E.g #main-content
+   */
+  href: string;
+}>;
+/**
+ * SkipLink component, used to display a skip link within the page.
+ * Place it at the top of the page to allow users to skip to the main content.
+ *
+ * @example
+ * <SkipLink href='#main-content'>Skip to main content</SkipLink>
+ */
+declare const SkipLink: import("react").ForwardRefExoticComponent<Omit<DefaultProps & AnchorHTMLAttributes<HTMLAnchorElement>, "children" | "href"> & {
+  /**
+   * The content to display inside the skiplink.
+   */
+  children: ReactNode;
+  /**
+   * Href of an element in the DOM the skiplink should skip to. E.g #main-content
+   */
+  href: string;
+} & import("react").RefAttributes<HTMLAnchorElement>>;
+//#endregion
+export { SkipLink, SkipLinkProps };