@bi-digital/react 0.8.0 → 0.10.0

package/dist/components/selectfield/selectfield.mjs

@@ -1,15 +1,56 @@
-import "../../field-BIBlDQoi.mjs";
-import "../../field-description-Dt2qLchF.mjs";
-import "../../field-affix-DNZXWyx-.mjs";
-import "../../field-D8ZE0keC.mjs";
-import "../../label-QZyUM8Df.mjs";
-import "../../label-BrxPu7QD.mjs";
-import "../../select-vw7cl3d_.mjs";
-import "../../select-option-DLslGIIp.mjs";
-import "../../select-optgroup-BzjAhfRU.mjs";
-import "../../select-D80ba0X2.mjs";
-import "../../validation-message-376E95cm.mjs";
-import "../../validation-message-YHHHXfxE.mjs";
-import { t as Selectfield } from "../../selectfield-BrXuaiOJ.mjs";
+import { Field } from "../field/field.mjs";
+import { FieldDescription } from "../field/field-description.mjs";
+import "../field/index.mjs";
+import { Label } from "../label/label.mjs";
+import "../label/index.mjs";
+import { Select } from "../select/select.mjs";
+import "../select/index.mjs";
+import { ValidationMessage } from "../validation-message/validation-message.mjs";
+import "../validation-message/index.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+//#region src/components/selectfield/selectfield.tsx
+const Selectfield = ({ children, dark, label, description, error, style, className, fullwidth, ref, id: idProp, "aria-describedby": ariaDescribedByProp, ...props }) => {
+	const generatedId = useId();
+	const descriptionId = useId();
+	const validationId = useId();
+	const id = idProp || generatedId;
+	const ariaDescribedBy = [
+		description ? descriptionId : "",
+		error ? validationId : "",
+		ariaDescribedByProp
+	].join(" ").trim() || void 0;
+	return /* @__PURE__ */ jsxs(Field, {
+		className,
+		"data-dark": dark,
+		style,
+		fullwidth,
+		children: [
+			label && /* @__PURE__ */ jsx(Label, {
+				htmlFor: id,
+				children: label
+			}),
+			description && /* @__PURE__ */ jsx(FieldDescription, {
+				id: descriptionId,
+				children: description
+			}),
+			/* @__PURE__ */ jsx(Select, {
+				id,
+				ref,
+				dark,
+				"aria-invalid": Boolean(error) || void 0,
+				"aria-describedby": ariaDescribedBy,
+				...props,
+				children
+			}),
+			!!error && /* @__PURE__ */ jsx(ValidationMessage, {
+				id: validationId,
+				children: error
+			})
+		]
+	});
+};
+//#endregion
+export { Selectfield };
 
-export { Selectfield };
+//# sourceMappingURL=selectfield.mjs.map

package/dist/components/selectfield/selectfield.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"selectfield.mjs","names":[],"sources":["../../../src/components/selectfield/selectfield.tsx"],"sourcesContent":["import { useId, type ReactNode } from 'react';\n\nimport type { LabelRequiredProps } from '../../types';\nimport { Field, FieldDescription } from '../field';\nimport { Label } from '../label';\nimport { Select, type SelectProps } from '../select';\nimport { ValidationMessage } from '../validation-message';\nimport { MergeRight } from '../../utilities';\n\nexport type SelectfieldProps = MergeRight<\n  LabelRequiredProps & SelectProps,\n  {\n    /** Description */\n    description?: ReactNode;\n    /** Error message for field */\n    error?: ReactNode;\n    /** If true, the selectfield will take up the full available width */\n    fullwidth?: boolean;\n  }\n>;\n\nexport const Selectfield = ({\n  children,\n  dark,\n  label,\n  description,\n  error,\n  style,\n  className,\n  fullwidth,\n  ref,\n  id: idProp,\n  'aria-describedby': ariaDescribedByProp,\n  ...props\n}: SelectfieldProps) => {\n  const generatedId = useId();\n  const descriptionId = useId();\n  const validationId = useId();\n  const id = idProp || generatedId;\n\n  const ariaDescribedBy =\n    [description ? descriptionId : '', error ? validationId : '', ariaDescribedByProp].join(' ').trim() || undefined;\n  return (\n    <Field className={className} data-dark={dark} style={style} fullwidth={fullwidth}>\n      {label && <Label htmlFor={id}>{label}</Label>}\n      {description && <FieldDescription id={descriptionId}>{description}</FieldDescription>}\n      <Select\n        id={id}\n        ref={ref}\n        dark={dark}\n        aria-invalid={Boolean(error) || undefined}\n        aria-describedby={ariaDescribedBy}\n        {...props}\n      >\n        {children}\n      </Select>\n      {!!error && <ValidationMessage id={validationId}>{error}</ValidationMessage>}\n    </Field>\n  );\n};\n"],"mappings":";;;;;;;;;;;;AAqBA,MAAa,eAAe,EAC1B,UACA,MACA,OACA,aACA,OACA,OACA,WACA,WACA,KACA,IAAI,QACJ,oBAAoB,qBACpB,GAAG,YACmB;CACtB,MAAM,cAAc,OAAO;CAC3B,MAAM,gBAAgB,OAAO;CAC7B,MAAM,eAAe,OAAO;CAC5B,MAAM,KAAK,UAAU;CAErB,MAAM,kBACJ;EAAC,cAAc,gBAAgB;EAAI,QAAQ,eAAe;EAAI;EAAoB,CAAC,KAAK,IAAI,CAAC,MAAM,IAAI,KAAA;AACzG,QACE,qBAAC,OAAD;EAAkB;EAAW,aAAW;EAAa;EAAkB;YAAvE;GACG,SAAS,oBAAC,OAAD;IAAO,SAAS;cAAK;IAAc,CAAA;GAC5C,eAAe,oBAAC,kBAAD;IAAkB,IAAI;cAAgB;IAA+B,CAAA;GACrF,oBAAC,QAAD;IACM;IACC;IACC;IACN,gBAAc,QAAQ,MAAM,IAAI,KAAA;IAChC,oBAAkB;IAClB,GAAI;IAEH;IACM,CAAA;GACR,CAAC,CAAC,SAAS,oBAAC,mBAAD;IAAmB,IAAI;cAAe;IAA0B,CAAA;GACtE"}

package/dist/components/skip-link/index.d.mts

@@ -1,15 +1,2 @@
-import "../../useCheckboxGroup-BUpI46_M.mjs";
-import "../../useIsomorphicLayoutEffect-gxToSQn7.mjs";
-import "../../types-Bgj7p8nD.mjs";
-import { C as SkipLink, w as SkipLinkProps } from "../../alert-footer-BFTlBQCl.mjs";
-import "../../dialog-trigger-context-BP2Q3KEA.mjs";
-import "../../drawer-trigger-context-BuP2a1-8.mjs";
-import "../../popover-trigger-context-HGF38PbW.mjs";
-import "../../dropdown-item-B9Toa4yI.mjs";
-import "../../dropdown-list-Ce8CUTGr.mjs";
-import "../../footer-links-B8XVWRnL.mjs";
-import "../../pagination-item-DBpTl8iP.mjs";
-import "../../sticky-header-CQ10VPji.mjs";
-import "../../index-C3reD4RP.mjs";
-import "../../useIsElementAboveViewport-BcIGWQqn.mjs";
+import { E as SkipLinkProps, T as SkipLink } from "../../alert-footer-42JbxJ0B.mjs";
 export { SkipLink, SkipLinkProps };

package/dist/components/skip-link/index.mjs

@@ -1,4 +1,2 @@
-import { t as SkipLink } from "../../skip-link-0SNs70lF.mjs";
-import "../../skip-link-DtgRPO9V.mjs";
-
-export { SkipLink };
+import { SkipLink } from "./skip-link.mjs";
+export { SkipLink };

package/dist/components/skip-link/skip-link.d.mts

@@ -1,15 +1,2 @@
-import "../../useCheckboxGroup-BUpI46_M.mjs";
-import "../../useIsomorphicLayoutEffect-gxToSQn7.mjs";
-import "../../types-Bgj7p8nD.mjs";
-import { C as SkipLink, w as SkipLinkProps } from "../../alert-footer-BFTlBQCl.mjs";
-import "../../dialog-trigger-context-BP2Q3KEA.mjs";
-import "../../drawer-trigger-context-BuP2a1-8.mjs";
-import "../../popover-trigger-context-HGF38PbW.mjs";
-import "../../dropdown-item-B9Toa4yI.mjs";
-import "../../dropdown-list-Ce8CUTGr.mjs";
-import "../../footer-links-B8XVWRnL.mjs";
-import "../../pagination-item-DBpTl8iP.mjs";
-import "../../sticky-header-CQ10VPji.mjs";
-import "../../index-C3reD4RP.mjs";
-import "../../useIsElementAboveViewport-BcIGWQqn.mjs";
+import { E as SkipLinkProps, T as SkipLink } from "../../alert-footer-42JbxJ0B.mjs";
 export { SkipLink, SkipLinkProps };

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

@@ -1,3 +1,16 @@
-import { t as SkipLink } from "../../skip-link-0SNs70lF.mjs";
+import clsx from "clsx/lite";
+import { Slot } from "@radix-ui/react-slot";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/skip-link/skip-link.tsx
+const SkipLink = ({ asChild, children, className, dark, ...props }) => {
+	return /* @__PURE__ */ jsx(asChild ? Slot : "a", {
+		className: clsx("bi-skip-link", className),
+		"data-dark": dark,
+		...props,
+		children
+	});
+};
+//#endregion
+export { SkipLink };
 
-export { SkipLink };
+//# sourceMappingURL=skip-link.mjs.map

package/dist/components/skip-link/skip-link.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"skip-link.mjs","names":[],"sources":["../../../src/components/skip-link/skip-link.tsx"],"sourcesContent":["import clsx from 'clsx/lite';\nimport { Slot } from '@radix-ui/react-slot';\nimport type { MergeRight } from '../../utilities';\nimport type { AsChildProps, DefaultProps } from '../../types';\nimport type { AnchorHTMLAttributes, Ref } from 'react';\n\nexport type SkipLinkProps = MergeRight<\n  DefaultProps & AsChildProps & AnchorHTMLAttributes<HTMLAnchorElement>,\n  {\n    ref?: Ref<HTMLAnchorElement>;\n  }\n>;\n\nexport const SkipLink = ({ asChild, children, className, dark, ...props }: SkipLinkProps) => {\n  const Component = asChild ? Slot : 'a';\n  return (\n    <Component className={clsx('bi-skip-link', className)} data-dark={dark} {...props}>\n      {children}\n    </Component>\n  );\n};\n"],"mappings":";;;;AAaA,MAAa,YAAY,EAAE,SAAS,UAAU,WAAW,MAAM,GAAG,YAA2B;AAE3F,QACE,oBAFgB,UAAU,OAAO,KAEjC;EAAW,WAAW,KAAK,gBAAgB,UAAU;EAAE,aAAW;EAAM,GAAI;EACzE;EACS,CAAA"}

package/dist/components/spinner/index.d.mts

@@ -1,15 +1,2 @@
-import "../../useCheckboxGroup-BUpI46_M.mjs";
-import "../../useIsomorphicLayoutEffect-gxToSQn7.mjs";
-import "../../types-Bgj7p8nD.mjs";
-import { S as SpinnerProps, x as Spinner } from "../../alert-footer-BFTlBQCl.mjs";
-import "../../dialog-trigger-context-BP2Q3KEA.mjs";
-import "../../drawer-trigger-context-BuP2a1-8.mjs";
-import "../../popover-trigger-context-HGF38PbW.mjs";
-import "../../dropdown-item-B9Toa4yI.mjs";
-import "../../dropdown-list-Ce8CUTGr.mjs";
-import "../../footer-links-B8XVWRnL.mjs";
-import "../../pagination-item-DBpTl8iP.mjs";
-import "../../sticky-header-CQ10VPji.mjs";
-import "../../index-C3reD4RP.mjs";
-import "../../useIsElementAboveViewport-BcIGWQqn.mjs";
+import { C as Spinner, w as SpinnerProps } from "../../alert-footer-42JbxJ0B.mjs";
 export { Spinner, SpinnerProps };

package/dist/components/spinner/index.mjs

@@ -1,4 +1,2 @@
-import { t as Spinner } from "../../spinner-xmvtWIZ0.mjs";
-import "../../spinner-C4Z-GQVz.mjs";
-
-export { Spinner };
+import { Spinner } from "./spinner.mjs";
+export { Spinner };

package/dist/components/spinner/spinner.d.mts

@@ -1,15 +1,2 @@
-import "../../useCheckboxGroup-BUpI46_M.mjs";
-import "../../useIsomorphicLayoutEffect-gxToSQn7.mjs";
-import "../../types-Bgj7p8nD.mjs";
-import { S as SpinnerProps, x as Spinner } from "../../alert-footer-BFTlBQCl.mjs";
-import "../../dialog-trigger-context-BP2Q3KEA.mjs";
-import "../../drawer-trigger-context-BuP2a1-8.mjs";
-import "../../popover-trigger-context-HGF38PbW.mjs";
-import "../../dropdown-item-B9Toa4yI.mjs";
-import "../../dropdown-list-Ce8CUTGr.mjs";
-import "../../footer-links-B8XVWRnL.mjs";
-import "../../pagination-item-DBpTl8iP.mjs";
-import "../../sticky-header-CQ10VPji.mjs";
-import "../../index-C3reD4RP.mjs";
-import "../../useIsElementAboveViewport-BcIGWQqn.mjs";
+import { C as Spinner, w as SpinnerProps } from "../../alert-footer-42JbxJ0B.mjs";
 export { Spinner, SpinnerProps };

package/dist/components/spinner/spinner.mjs

@@ -1,3 +1,16 @@
-import { t as Spinner } from "../../spinner-xmvtWIZ0.mjs";
+import clsx from "clsx/lite";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/spinner/spinner.tsx
+const Spinner = ({ color = "inherit", size, className, ref, ...props }) => {
+	return /* @__PURE__ */ jsx("span", {
+		className: clsx("bi-spinner", className),
+		"data-size": size,
+		"data-color": color,
+		ref,
+		...props
+	});
+};
+//#endregion
+export { Spinner };
 
-export { Spinner };
+//# sourceMappingURL=spinner.mjs.map

package/dist/components/spinner/spinner.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.mjs","names":[],"sources":["../../../src/components/spinner/spinner.tsx"],"sourcesContent":["import clsx from 'clsx/lite';\nimport type { HTMLAttributes, Ref } from 'react';\nimport type { MergeRight } from '../../utilities';\nimport type { DefaultProps } from '../../types';\n\nexport type SpinnerProps = MergeRight<\n  DefaultProps & HTMLAttributes<HTMLSpanElement>,\n  {\n    /**\n     * The color of the spinner.\n     * @default 'inherit'\n     */\n    color?: 'inherit' | 'black';\n    /**\n     * The size of the spinner.\n     * It sets the font-size as the width and height is `1em`. If not set, the spinner will inherit the font size of its parent.\n     */\n    size?: 'small' | 'medium' | 'large' | 'xl' | '2xl';\n    ref?: Ref<HTMLSpanElement>;\n  }\n>;\n\nexport const Spinner = ({ color = 'inherit', size, className, ref, ...props }: SpinnerProps) => {\n  return <span className={clsx('bi-spinner', className)} data-size={size} data-color={color} ref={ref} {...props} />;\n};\n"],"mappings":";;;AAsBA,MAAa,WAAW,EAAE,QAAQ,WAAW,MAAM,WAAW,KAAK,GAAG,YAA0B;AAC9F,QAAO,oBAAC,QAAD;EAAM,WAAW,KAAK,cAAc,UAAU;EAAE,aAAW;EAAM,cAAY;EAAY;EAAK,GAAI;EAAS,CAAA"}

package/dist/components/sticky-header/index.d.mts

@@ -1,3 +1,2 @@
-import { n as StickyHeaderProps, t as StickyHeader } from "../../sticky-header-CQ10VPji.mjs";
-import "../../index-C3reD4RP.mjs";
+import { n as StickyHeaderProps, t as StickyHeader } from "../../sticky-header-C6gJlnzy.mjs";
 export { StickyHeader, StickyHeaderProps };

package/dist/components/sticky-header/index.mjs

@@ -1,4 +1,2 @@
-import { t as StickyHeader } from "../../sticky-header-Bwee74P6.mjs";
-import "../../sticky-header-j3zwZtj_.mjs";
-
-export { StickyHeader };
+import { StickyHeader } from "./sticky-header.mjs";
+export { StickyHeader };

package/dist/components/sticky-header/sticky-header.d.mts

@@ -1,2 +1,2 @@
-import { n as StickyHeaderProps, t as StickyHeader } from "../../sticky-header-CQ10VPji.mjs";
+import { n as StickyHeaderProps, t as StickyHeader } from "../../sticky-header-C6gJlnzy.mjs";
 export { StickyHeader, StickyHeaderProps };

package/dist/components/sticky-header/sticky-header.mjs

@@ -1,3 +1,19 @@
-import { t as StickyHeader } from "../../sticky-header-Bwee74P6.mjs";
+import { Slot } from "@radix-ui/react-slot";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/sticky-header/sticky-header.tsx
+/**
+* Make a sticky header that will stay at the top of the viewport when scrolling.
+* It handles different distance to the top based on sub-navbar, navbar and other factors.
+* This element is a Slot which simply adds the correct CSS styles to the children.
+* Make sure that the children passed to this component appends className and not overrides it.
+*/
+const StickyHeader = ({ children }) => {
+	return /* @__PURE__ */ jsx(Slot, {
+		className: "bi-sticky-header",
+		children
+	});
+};
+//#endregion
+export { StickyHeader };
 
-export { StickyHeader };
+//# sourceMappingURL=sticky-header.mjs.map

package/dist/components/sticky-header/sticky-header.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"sticky-header.mjs","names":[],"sources":["../../../src/components/sticky-header/sticky-header.tsx"],"sourcesContent":["import { Slot } from '@radix-ui/react-slot';\nimport type { ReactNode } from 'react';\n\nexport type StickyHeaderProps = {\n  children: ReactNode;\n};\n\n/**\n * Make a sticky header that will stay at the top of the viewport when scrolling.\n * It handles different distance to the top based on sub-navbar, navbar and other factors.\n * This element is a Slot which simply adds the correct CSS styles to the children.\n * Make sure that the children passed to this component appends className and not overrides it.\n */\nexport const StickyHeader = ({ children }: StickyHeaderProps) => {\n  const Component = Slot;\n  return <Component className='bi-sticky-header'>{children}</Component>;\n};\n"],"mappings":";;;;;;;;;AAaA,MAAa,gBAAgB,EAAE,eAAkC;AAE/D,QAAO,oBADW,MACX;EAAW,WAAU;EAAoB;EAAqB,CAAA"}

package/dist/components/switch/index.d.mts

@@ -1,15 +1,2 @@
-import "../../useCheckboxGroup-BUpI46_M.mjs";
-import "../../useIsomorphicLayoutEffect-gxToSQn7.mjs";
-import "../../types-Bgj7p8nD.mjs";
-import { b as SwitchProps, y as Switch } from "../../alert-footer-BFTlBQCl.mjs";
-import "../../dialog-trigger-context-BP2Q3KEA.mjs";
-import "../../drawer-trigger-context-BuP2a1-8.mjs";
-import "../../popover-trigger-context-HGF38PbW.mjs";
-import "../../dropdown-item-B9Toa4yI.mjs";
-import "../../dropdown-list-Ce8CUTGr.mjs";
-import "../../footer-links-B8XVWRnL.mjs";
-import "../../pagination-item-DBpTl8iP.mjs";
-import "../../sticky-header-CQ10VPji.mjs";
-import "../../index-C3reD4RP.mjs";
-import "../../useIsElementAboveViewport-BcIGWQqn.mjs";
+import { S as SwitchProps, x as Switch } from "../../alert-footer-42JbxJ0B.mjs";
 export { Switch, SwitchProps };

package/dist/components/switch/index.mjs

@@ -1,12 +1,2 @@
-import "../../field-BIBlDQoi.mjs";
-import "../../field-description-Dt2qLchF.mjs";
-import "../../field-affix-DNZXWyx-.mjs";
-import "../../field-D8ZE0keC.mjs";
-import "../../input-DU_8Z4cN.mjs";
-import "../../input-8Az-c2K1.mjs";
-import "../../label-QZyUM8Df.mjs";
-import "../../label-BrxPu7QD.mjs";
-import { t as Switch } from "../../switch-CJtJvYv6.mjs";
-import "../../switch-DZsMi5Uf.mjs";
-
-export { Switch };
+import { Switch } from "./switch.mjs";
+export { Switch };

package/dist/components/switch/switch.d.mts

@@ -1,15 +1,2 @@
-import "../../useCheckboxGroup-BUpI46_M.mjs";
-import "../../useIsomorphicLayoutEffect-gxToSQn7.mjs";
-import "../../types-Bgj7p8nD.mjs";
-import { b as SwitchProps, y as Switch } from "../../alert-footer-BFTlBQCl.mjs";
-import "../../dialog-trigger-context-BP2Q3KEA.mjs";
-import "../../drawer-trigger-context-BuP2a1-8.mjs";
-import "../../popover-trigger-context-HGF38PbW.mjs";
-import "../../dropdown-item-B9Toa4yI.mjs";
-import "../../dropdown-list-Ce8CUTGr.mjs";
-import "../../footer-links-B8XVWRnL.mjs";
-import "../../pagination-item-DBpTl8iP.mjs";
-import "../../sticky-header-CQ10VPji.mjs";
-import "../../index-C3reD4RP.mjs";
-import "../../useIsElementAboveViewport-BcIGWQqn.mjs";
+import { S as SwitchProps, x as Switch } from "../../alert-footer-42JbxJ0B.mjs";
 export { Switch, SwitchProps };

package/dist/components/switch/switch.mjs

@@ -1,11 +1,36 @@
-import "../../field-BIBlDQoi.mjs";
-import "../../field-description-Dt2qLchF.mjs";
-import "../../field-affix-DNZXWyx-.mjs";
-import "../../field-D8ZE0keC.mjs";
-import "../../input-DU_8Z4cN.mjs";
-import "../../input-8Az-c2K1.mjs";
-import "../../label-QZyUM8Df.mjs";
-import "../../label-BrxPu7QD.mjs";
-import { t as Switch } from "../../switch-CJtJvYv6.mjs";
+import { Field } from "../field/field.mjs";
+import "../field/index.mjs";
+import { Input } from "../input/input.mjs";
+import "../input/index.mjs";
+import { Label } from "../label/label.mjs";
+import "../label/index.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/switch/switch.tsx
+const Switch = ({ dark, label, error, fullwidth, style, className, ref, id, position = "end", ...props }) => {
+	return /* @__PURE__ */ jsx(Field, {
+		className,
+		"data-dark": dark,
+		style,
+		fullwidth,
+		position,
+		asChild: true,
+		children: /* @__PURE__ */ jsxs("label", { children: [/* @__PURE__ */ jsx(Input, {
+			role: "switch",
+			type: "checkbox",
+			id,
+			ref,
+			"aria-invalid": error || void 0,
+			dark,
+			...props
+		}), label && /* @__PURE__ */ jsx(Label, {
+			weight: "medium",
+			htmlFor: id,
+			asChild: true,
+			children: /* @__PURE__ */ jsx("span", { children: label })
+		})] })
+	});
+};
+//#endregion
+export { Switch };
 
-export { Switch };
+//# sourceMappingURL=switch.mjs.map

package/dist/components/switch/switch.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.mjs","names":[],"sources":["../../../src/components/switch/switch.tsx"],"sourcesContent":["import type { ReactNode, Ref } from 'react';\n\nimport type { LabelRequiredProps } from '../../types';\nimport type { MergeRight } from '../../utilities';\nimport { Field, type FieldProps } from '../field';\nimport { Input, type InputProps } from '../input';\nimport { Label } from '../label';\n\nexport type SwitchProps = MergeRight<\n  LabelRequiredProps & Omit<InputProps, 'type' | 'role' | 'size'> & Pick<FieldProps, 'position'>,\n  {\n    /** Label */\n    label?: ReactNode;\n    /** Add error indication to the switch. */\n    error?: boolean;\n    /** If true, the switch will take up the full width of the container, and not just \"fit-content\" which is default */\n    fullwidth?: boolean;\n    ref?: Ref<HTMLInputElement>;\n  }\n>;\n\nexport const Switch = ({\n  dark,\n  label,\n  error,\n  fullwidth,\n  style,\n  className,\n  ref,\n  id,\n  position = 'end',\n  ...props\n}: SwitchProps) => {\n  return (\n    <Field className={className} data-dark={dark} style={style} fullwidth={fullwidth} position={position} asChild>\n      <label>\n        <Input\n          role='switch'\n          type='checkbox'\n          id={id}\n          ref={ref}\n          aria-invalid={error || undefined}\n          dark={dark}\n          {...props}\n        />\n        {label && (\n          <Label weight='medium' htmlFor={id} asChild>\n            <span>{label}</span>\n          </Label>\n        )}\n      </label>\n    </Field>\n  );\n};\n"],"mappings":";;;;;;;;AAqBA,MAAa,UAAU,EACrB,MACA,OACA,OACA,WACA,OACA,WACA,KACA,IACA,WAAW,OACX,GAAG,YACc;AACjB,QACE,oBAAC,OAAD;EAAkB;EAAW,aAAW;EAAa;EAAkB;EAAqB;EAAU,SAAA;YACpG,qBAAC,SAAD,EAAA,UAAA,CACE,oBAAC,OAAD;GACE,MAAK;GACL,MAAK;GACD;GACC;GACL,gBAAc,SAAS,KAAA;GACjB;GACN,GAAI;GACJ,CAAA,EACD,SACC,oBAAC,OAAD;GAAO,QAAO;GAAS,SAAS;GAAI,SAAA;aAClC,oBAAC,QAAD,EAAA,UAAO,OAAa,CAAA;GACd,CAAA,CAEJ,EAAA,CAAA;EACF,CAAA"}

package/dist/components/tabs/index.d.mts

@@ -1,15 +1,2 @@
-import "../../useCheckboxGroup-BUpI46_M.mjs";
-import "../../useIsomorphicLayoutEffect-gxToSQn7.mjs";
-import "../../types-Bgj7p8nD.mjs";
-import { _ as Tabs, d as TabsPanel, f as TabsPanelProps, g as TabProps, h as Tab, m as TabsListProps, p as TabsList, v as TabsProps } from "../../alert-footer-BFTlBQCl.mjs";
-import "../../dialog-trigger-context-BP2Q3KEA.mjs";
-import "../../drawer-trigger-context-BuP2a1-8.mjs";
-import "../../popover-trigger-context-HGF38PbW.mjs";
-import "../../dropdown-item-B9Toa4yI.mjs";
-import "../../dropdown-list-Ce8CUTGr.mjs";
-import "../../footer-links-B8XVWRnL.mjs";
-import "../../pagination-item-DBpTl8iP.mjs";
-import "../../sticky-header-CQ10VPji.mjs";
-import "../../index-C3reD4RP.mjs";
-import "../../useIsElementAboveViewport-BcIGWQqn.mjs";
-export { Tab, TabProps, Tabs, TabsList, TabsListProps, TabsPanel, TabsPanelProps, TabsProps };
+import { b as TabsProps, d as TabsPanel, f as TabsPanelProps, g as TabProps, h as Tab, m as TabsListProps, p as TabsList, v as Tabs, y as TabsContext } from "../../alert-footer-42JbxJ0B.mjs";
+export { Tab, TabProps, Tabs, TabsContext, TabsList, TabsListProps, TabsPanel, TabsPanelProps, TabsProps };

package/dist/components/tabs/index.mjs

@@ -1,11 +1,5 @@
-import "../../spinner-xmvtWIZ0.mjs";
-import "../../spinner-C4Z-GQVz.mjs";
-import "../../button-CDtQwUfp.mjs";
-import "../../button-BoSub8TT.mjs";
-import { t as Tabs } from "../../tabs-BYYODpZJ.mjs";
-import { t as Tab } from "../../tab-qLMKkR-4.mjs";
-import { t as TabsList } from "../../tabs-list-BAnPnTwx.mjs";
-import { t as TabsPanel } from "../../tabs-panel-GX2ZoOvH.mjs";
-import "../../tabs-Bdxundn7.mjs";
-
-export { Tab, Tabs, TabsList, TabsPanel };
+import { Tabs } from "./tabs.mjs";
+import { Tab } from "./tab.mjs";
+import { TabsList } from "./tabs-list.mjs";
+import { TabsPanel } from "./tabs-panel.mjs";
+export { Tab, Tabs, TabsList, TabsPanel };

package/dist/components/tabs/tab.d.mts

@@ -1,15 +1,2 @@
-import "../../useCheckboxGroup-BUpI46_M.mjs";
-import "../../useIsomorphicLayoutEffect-gxToSQn7.mjs";
-import "../../types-Bgj7p8nD.mjs";
-import { g as TabProps, h as Tab } from "../../alert-footer-BFTlBQCl.mjs";
-import "../../dialog-trigger-context-BP2Q3KEA.mjs";
-import "../../drawer-trigger-context-BuP2a1-8.mjs";
-import "../../popover-trigger-context-HGF38PbW.mjs";
-import "../../dropdown-item-B9Toa4yI.mjs";
-import "../../dropdown-list-Ce8CUTGr.mjs";
-import "../../footer-links-B8XVWRnL.mjs";
-import "../../pagination-item-DBpTl8iP.mjs";
-import "../../sticky-header-CQ10VPji.mjs";
-import "../../index-C3reD4RP.mjs";
-import "../../useIsElementAboveViewport-BcIGWQqn.mjs";
+import { g as TabProps, h as Tab } from "../../alert-footer-42JbxJ0B.mjs";
 export { Tab, TabProps };

package/dist/components/tabs/tab.mjs

@@ -1,7 +1,25 @@
-import "../../spinner-xmvtWIZ0.mjs";
-import "../../spinner-C4Z-GQVz.mjs";
-import "../../button-CDtQwUfp.mjs";
-import "../../button-BoSub8TT.mjs";
-import { t as Tab } from "../../tab-qLMKkR-4.mjs";
+import { Context } from "./tabs.mjs";
+import "@digdir/designsystemet-web";
+import { jsx } from "react/jsx-runtime";
+import { use } from "react";
+//#region src/components/tabs/tab.tsx
+const Tab = ({ value, children, dark, onClick, ref, ...props }) => {
+	const { onChange, getPrefixedValue, isProgrammaticClick } = use(Context);
+	return /* @__PURE__ */ jsx("ds-tab", {
+		"aria-controls": props["aria-controls"] ?? getPrefixedValue?.(value),
+		"data-value": value,
+		"data-dark": dark,
+		ref,
+		suppressHydrationWarning: true,
+		onClick: (e) => {
+			if (!isProgrammaticClick?.current) onChange?.(value);
+			onClick?.(e);
+		},
+		...props,
+		children
+	});
+};
+//#endregion
+export { Tab };
 
-export { Tab };
+//# sourceMappingURL=tab.mjs.map

package/dist/components/tabs/tab.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab.mjs","names":[],"sources":["../../../src/components/tabs/tab.tsx"],"sourcesContent":["import type { DSTabElement } from '@digdir/designsystemet-web';\nimport { use, type HTMLAttributes, type Ref } from 'react';\nimport '@digdir/designsystemet-web'; // Import ds-tab custom element\nimport type { MergeRight } from '../../utilities';\nimport { DefaultProps } from '../../types';\nimport { Context } from './tabs';\n\nexport type TabProps = MergeRight<\n  DefaultProps & HTMLAttributes<DSTabElement>,\n  {\n    /** A unique value that associates the trigger with a content. */\n    value: string;\n    ref?: Ref<DSTabElement>;\n  }\n>;\n\nexport const Tab = ({ value, children, dark, onClick, ref, ...props }: TabProps) => {\n  const { onChange, getPrefixedValue, isProgrammaticClick } = use(Context);\n  return (\n    <ds-tab\n      aria-controls={props['aria-controls'] ?? getPrefixedValue?.(value)}\n      data-value={value}\n      data-dark={dark}\n      ref={ref}\n      suppressHydrationWarning // Since <ds-tablist> adds attributes\n      onClick={(e: React.MouseEvent<DSTabElement>) => {\n        if (!isProgrammaticClick?.current) onChange?.(value); // Only call onChange for user interactions, not programmatic clicks used to sync controlled state\n        onClick?.(e);\n      }}\n      {...props}\n    >\n      {children}\n    </ds-tab>\n  );\n};\n"],"mappings":";;;;;AAgBA,MAAa,OAAO,EAAE,OAAO,UAAU,MAAM,SAAS,KAAK,GAAG,YAAsB;CAClF,MAAM,EAAE,UAAU,kBAAkB,wBAAwB,IAAI,QAAQ;AACxE,QACE,oBAAC,UAAD;EACE,iBAAe,MAAM,oBAAoB,mBAAmB,MAAM;EAClE,cAAY;EACZ,aAAW;EACN;EACL,0BAAA;EACA,UAAU,MAAsC;AAC9C,OAAI,CAAC,qBAAqB,QAAS,YAAW,MAAM;AACpD,aAAU,EAAE;;EAEd,GAAI;EAEH;EACM,CAAA"}

package/dist/components/tabs/tabs-list.d.mts

@@ -1,15 +1,2 @@
-import "../../useCheckboxGroup-BUpI46_M.mjs";
-import "../../useIsomorphicLayoutEffect-gxToSQn7.mjs";
-import "../../types-Bgj7p8nD.mjs";
-import { m as TabsListProps, p as TabsList } from "../../alert-footer-BFTlBQCl.mjs";
-import "../../dialog-trigger-context-BP2Q3KEA.mjs";
-import "../../drawer-trigger-context-BuP2a1-8.mjs";
-import "../../popover-trigger-context-HGF38PbW.mjs";
-import "../../dropdown-item-B9Toa4yI.mjs";
-import "../../dropdown-list-Ce8CUTGr.mjs";
-import "../../footer-links-B8XVWRnL.mjs";
-import "../../pagination-item-DBpTl8iP.mjs";
-import "../../sticky-header-CQ10VPji.mjs";
-import "../../index-C3reD4RP.mjs";
-import "../../useIsElementAboveViewport-BcIGWQqn.mjs";
+import { m as TabsListProps, p as TabsList } from "../../alert-footer-42JbxJ0B.mjs";
 export { TabsList, TabsListProps };

package/dist/components/tabs/tabs-list.mjs

@@ -1,3 +1,15 @@
-import { t as TabsList } from "../../tabs-list-BAnPnTwx.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/tabs/tabs-list.tsx
+const TabsList = ({ children, dark, ref, ...props }) => {
+	return /* @__PURE__ */ jsx("ds-tablist", {
+		suppressHydrationWarning: true,
+		"data-dark": dark,
+		ref,
+		...props,
+		children
+	});
+};
+//#endregion
+export { TabsList };
 
-export { TabsList };
+//# sourceMappingURL=tabs-list.mjs.map

package/dist/components/tabs/tabs-list.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs-list.mjs","names":[],"sources":["../../../src/components/tabs/tabs-list.tsx"],"sourcesContent":["import type { DSTabListElement } from '@digdir/designsystemet-web';\nimport type { HTMLAttributes, Ref } from 'react';\nimport type { DefaultProps } from '../../types';\nimport type { MergeRight } from '../../utilities';\n\nexport type TabsListProps = MergeRight<\n  DefaultProps & HTMLAttributes<DSTabListElement>,\n  {\n    ref?: Ref<DSTabListElement>;\n  }\n>;\n\nexport const TabsList = ({ children, dark, ref, ...props }: TabsListProps) => {\n  return (\n    <ds-tablist\n      suppressHydrationWarning // Since <ds-tablist> adds attributes\n      data-dark={dark}\n      ref={ref}\n      {...props}\n    >\n      {children}\n    </ds-tablist>\n  );\n};\n"],"mappings":";;AAYA,MAAa,YAAY,EAAE,UAAU,MAAM,KAAK,GAAG,YAA2B;AAC5E,QACE,oBAAC,cAAD;EACE,0BAAA;EACA,aAAW;EACN;EACL,GAAI;EAEH;EACU,CAAA"}

package/dist/components/tabs/tabs-panel.d.mts

@@ -1,15 +1,2 @@
-import "../../useCheckboxGroup-BUpI46_M.mjs";
-import "../../useIsomorphicLayoutEffect-gxToSQn7.mjs";
-import "../../types-Bgj7p8nD.mjs";
-import { d as TabsPanel, f as TabsPanelProps } from "../../alert-footer-BFTlBQCl.mjs";
-import "../../dialog-trigger-context-BP2Q3KEA.mjs";
-import "../../drawer-trigger-context-BuP2a1-8.mjs";
-import "../../popover-trigger-context-HGF38PbW.mjs";
-import "../../dropdown-item-B9Toa4yI.mjs";
-import "../../dropdown-list-Ce8CUTGr.mjs";
-import "../../footer-links-B8XVWRnL.mjs";
-import "../../pagination-item-DBpTl8iP.mjs";
-import "../../sticky-header-CQ10VPji.mjs";
-import "../../index-C3reD4RP.mjs";
-import "../../useIsElementAboveViewport-BcIGWQqn.mjs";
+import { d as TabsPanel, f as TabsPanelProps } from "../../alert-footer-42JbxJ0B.mjs";
 export { TabsPanel, TabsPanelProps };

package/dist/components/tabs/tabs-panel.mjs

@@ -1,3 +1,19 @@
-import { t as TabsPanel } from "../../tabs-panel-GX2ZoOvH.mjs";
+import { Context } from "./tabs.mjs";
+import { jsx } from "react/jsx-runtime";
+import { use } from "react";
+//#region src/components/tabs/tabs-panel.tsx
+const TabsPanel = ({ value, id, children, dark, ref, ...props }) => {
+	const { getPrefixedValue } = use(Context);
+	return /* @__PURE__ */ jsx("ds-tabpanel", {
+		suppressHydrationWarning: true,
+		ref,
+		"data-dark": dark,
+		id: id ?? getPrefixedValue?.(value),
+		...props,
+		children
+	});
+};
+//#endregion
+export { TabsPanel };
 
-export { TabsPanel };
+//# sourceMappingURL=tabs-panel.mjs.map

package/dist/components/tabs/tabs-panel.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs-panel.mjs","names":[],"sources":["../../../src/components/tabs/tabs-panel.tsx"],"sourcesContent":["import type { DSTabPanelElement } from '@digdir/designsystemet-web';\nimport { use, type HTMLAttributes, type Ref } from 'react';\nimport type { DefaultProps } from '../../types';\nimport type { MergeRight } from '../../utilities';\nimport { Context } from './tabs';\n\nexport type TabsPanelProps = MergeRight<\n  DefaultProps & HTMLAttributes<DSTabPanelElement>,\n  {\n    /** A unique value that associates the content with a trigger. */\n    value: string;\n    ref?: Ref<DSTabPanelElement>;\n  }\n>;\n\nexport const TabsPanel = ({ value, id, children, dark, ref, ...props }: TabsPanelProps) => {\n  const { getPrefixedValue } = use(Context);\n\n  return (\n    <ds-tabpanel\n      suppressHydrationWarning // Since <ds-tablist> adds attributes\n      ref={ref}\n      data-dark={dark}\n      id={id ?? getPrefixedValue?.(value)}\n      {...props}\n    >\n      {children}\n    </ds-tabpanel>\n  );\n};\n"],"mappings":";;;;AAeA,MAAa,aAAa,EAAE,OAAO,IAAI,UAAU,MAAM,KAAK,GAAG,YAA4B;CACzF,MAAM,EAAE,qBAAqB,IAAI,QAAQ;AAEzC,QACE,oBAAC,eAAD;EACE,0BAAA;EACK;EACL,aAAW;EACX,IAAI,MAAM,mBAAmB,MAAM;EACnC,GAAI;EAEH;EACW,CAAA"}

package/dist/components/tabs/tabs.d.mts

@@ -1,15 +1,2 @@
-import "../../useCheckboxGroup-BUpI46_M.mjs";
-import "../../useIsomorphicLayoutEffect-gxToSQn7.mjs";
-import "../../types-Bgj7p8nD.mjs";
-import { _ as Tabs, v as TabsProps } from "../../alert-footer-BFTlBQCl.mjs";
-import "../../dialog-trigger-context-BP2Q3KEA.mjs";
-import "../../drawer-trigger-context-BuP2a1-8.mjs";
-import "../../popover-trigger-context-HGF38PbW.mjs";
-import "../../dropdown-item-B9Toa4yI.mjs";
-import "../../dropdown-list-Ce8CUTGr.mjs";
-import "../../footer-links-B8XVWRnL.mjs";
-import "../../pagination-item-DBpTl8iP.mjs";
-import "../../sticky-header-CQ10VPji.mjs";
-import "../../index-C3reD4RP.mjs";
-import "../../useIsElementAboveViewport-BcIGWQqn.mjs";
-export { Tabs, TabsProps };
+import { _ as Context, b as TabsProps, v as Tabs, y as TabsContext } from "../../alert-footer-42JbxJ0B.mjs";
+export { Context, Tabs, TabsContext, TabsProps };