npm - @fremtind/jokul - Versions diffs - 0.24.0 → 0.25.0 - Mend

@fremtind/jokul 0.24.0 → 0.25.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2688) hide show

package/build/es/components/tabs/tabsContext.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+import { Density, WithChildren } from '../../core/types.js';
+type TabsContext = {
+    density?: Density;
+};
+export declare const useTabsContext: () => TabsContext;
+interface Props extends WithChildren {
+    state: TabsContext;
+}
+export declare const TabsContextProvider: React.FC<Props>;
+export {};

package/build/es/components/tabs/tabsContext.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tabsContext.js","sources":["../../../../src/components/tabs/tabsContext.tsx"],"sourcesContent":["import React, { createContext, useContext } from \"react\";\nimport { Density, WithChildren } from \"~~../..\~~";\n\ntype TabsContext = {\n density?: Density;\n};\n\nconst tabsContext = createContext<TabsContext>({\n density: undefined,\n});\n\nexport const useTabsContext = (): TabsContext => useContext(tabsContext);\n\ninterface Props extends WithChildren {\n state: TabsContext;\n}\n\nexport const TabsContextProvider: React.FC<Props> = ({ state, children }) => (\n <tabsContext.Provider value={state}>{children}</tabsContext.Provider>\n);\n"],"names":["tabsContext","createContext","density","useTabsContext","useContext","TabsContextProvider","state","children","jsx","Provider","value"],"mappings":"8FAOA,MAAMA,EAAcC,EAA2B,CAC3CC,aAAS,IAGAC,EAAiB,IAAmBC,EAAWJ,GAM/CK,EAAuC,EAAGC,MAAAA,EAAOC,SAAAA,KACzDC,EAAAR,EAAYS,SAAZ,CAAqBC,MAAOJ,EAAQC,SAAAA"}
1	+ {"version":3,"file":"tabsContext.js","sources":["../../../../src/components/tabs/tabsContext.tsx"],"sourcesContent":["import React, { createContext, useContext } from \"react\";\nimport { Density, WithChildren } from \"../../core/types.js\";\n\ntype TabsContext = {\n density?: Density;\n};\n\nconst tabsContext = createContext<TabsContext>({\n density: undefined,\n});\n\nexport const useTabsContext = (): TabsContext => useContext(tabsContext);\n\ninterface Props extends WithChildren {\n state: TabsContext;\n}\n\nexport const TabsContextProvider: React.FC<Props> = ({ state, children }) => (\n <tabsContext.Provider value={state}>{children}</tabsContext.Provider>\n);\n"],"names":["tabsContext","createContext","density","useTabsContext","useContext","TabsContextProvider","state","children","jsx","Provider","value"],"mappings":"8FAOA,MAAMA,EAAcC,EAA2B,CAC3CC,aAAS,IAGAC,EAAiB,IAAmBC,EAAWJ,GAM/CK,EAAuC,EAAGC,MAAAA,EAAOC,SAAAA,KACzDC,EAAAR,EAAYS,SAAZ,CAAqBC,MAAOJ,EAAQC,SAAAA"}

package/build/es/components/tag/Tag.d.ts ADDED Viewed

@@ -0,0 +1,15 @@
+import { default as React, ButtonHTMLAttributes, HTMLAttributes, MouseEventHandler } from 'react';
+import { Density } from '../../core/types.js';
+export interface DismissAction extends Exclude<ButtonHTMLAttributes<HTMLButtonElement>, "disabled"> {
+    label: string;
+    onClick: MouseEventHandler<HTMLButtonElement>;
+}
+export interface TagProps extends HTMLAttributes<HTMLSpanElement> {
+    density?: Density;
+    dismissAction?: DismissAction;
+}
+export declare const Tag: React.FC<TagProps>;
+export declare const InfoTag: React.FC<TagProps>;
+export declare const ErrorTag: React.FC<TagProps>;
+export declare const WarningTag: React.FC<TagProps>;
+export declare const SuccessTag: React.FC<TagProps>;

package/build/es/components/tag/Tag.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tag.js","sources":["../../../../src/components/tag/Tag.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { ButtonHTMLAttributes, FC, HTMLAttributes, MouseEventHandler } from \"react\";\nimport { Density } from \"../../core\";\nimport { CloseIcon } from \"../icon\";\nimport { IconButton } from \"../icon-button\";\n\nexport interface DismissAction extends Exclude<ButtonHTMLAttributes<HTMLButtonElement>, \"disabled\"> {\n label: string;\n onClick: MouseEventHandler<HTMLButtonElement>;\n}\n\nexport interface TagProps extends HTMLAttributes<HTMLSpanElement> {\n density?: Density;\n dismissAction?: DismissAction;\n}\n\ntype Variant = \"info\" \| \"error\" \| \"warning\" \| \"success\";\n\nfunction getDisplayName(variant?: Variant) {\n switch (variant) {\n case \"info\":\n return \"InfoTag\";\n case \"error\":\n return \"ErrorTag\";\n case \"warning\":\n return \"WarningTag\";\n case \"success\":\n return \"SuccessTag\";\n default:\n return \"Tag\";\n }\n}\n\nfunction tagFactory(variant?: Variant) {\n const Tag: FC<TagProps> = ({ className, density, dismissAction, children, ...rest }) => (\n <span\n className={clsx(\n \"jkl-tag\",\n {\n \"jkl-tag--info\": variant === \"info\",\n \"jkl-tag--error\": variant === \"error\",\n \"jkl-tag--warning\": variant === \"warning\",\n \"jkl-tag--success\": variant === \"success\",\n },\n className,\n )}\n data-density={density}\n {...rest}\n >\n {children}\n {dismissAction && (\n <IconButton\n className=\"jkl-tag__dismiss-action\"\n density={density}\n title={dismissAction.label}\n onClick={dismissAction.onClick}\n onFocus={dismissAction.onFocus}\n onBlur={dismissAction.onBlur}\n >\n <CloseIcon variant=\"small\" bold />\n </IconButton>\n )}\n </span>\n );\n Tag.displayName = getDisplayName(variant);\n return Tag;\n}\n\nexport const Tag = tagFactory();\nexport const InfoTag = tagFactory(\"info\");\nexport const ErrorTag = tagFactory(\"error\");\nexport const WarningTag = tagFactory(\"warning\");\nexport const SuccessTag = tagFactory(\"success\");\n"],"names":["tagFactory","variant","Tag","className","density","dismissAction","children","rest","jsxs","clsx","jsx","IconButton","title","label","onClick","onFocus","onBlur","CloseIcon","bold","displayName","getDisplayName","InfoTag","ErrorTag","WarningTag","SuccessTag"],"mappings":"i/CAiCA,SAASA,EAAWC,GACVC,MAAAA,EAAoB,EAAGC,UAAAA,EAAWC,QAAAA,EAASC,cAAAA,EAAeC,SAAAA,KAAaC,KACzEC,EAAC,OAAA,CACGL,UAAWM,EACP,UACA,CACI,gBAA6B,SAAZR,EACjB,iBAA8B,UAAZA,EAClB,mBAAgC,YAAZA,EACpB,mBAAgC,YAAZA,GAExBE,GAEJ,eAAcC,KACVG,EAEHD,SAAA,CAAAA,EACAD,GACGK,EAACC,EAAA,CACGR,UAAU,0BACVC,QAAAA,EACAQ,MAAOP,EAAcQ,MACrBC,QAAST,EAAcS,QACvBC,QAASV,EAAcU,QACvBC,OAAQX,EAAcW,OAEtBV,SAACI,EAAAO,EAAA,CAAUhB,QAAQ,QAAQiB,MAAI,SAK/ChB,OAAAA,EAAIiB,YA9CR,SAAwBlB,GACpB,OAAQA,GACJ,IAAK,OACM,MAAA,UACX,IAAK,QACM,MAAA,WACX,IAAK,UACM,MAAA,aACX,IAAK,UACM,MAAA,aACX,QACW,MAAA,MAEnB,CAiCsBmB,CAAenB,GAC1BC,CACX,CAEO,MAAMA,EAAMF,IACNqB,EAAUrB,EAAW,QACrBsB,EAAWtB,EAAW,SACtBuB,EAAavB,EAAW,WACxBwB,EAAaxB,EAAW"}
1	+ {"version":3,"file":"Tag.js","sources":["../../../../src/components/tag/Tag.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { ButtonHTMLAttributes, FC, HTMLAttributes, MouseEventHandler } from \"react\";\nimport { Density } from \"../../core/types.js\";\nimport { CloseIcon } from \"../icon/index.js\";\nimport { IconButton } from \"../icon-button/IconButton.js\";\n\nexport interface DismissAction extends Exclude<ButtonHTMLAttributes<HTMLButtonElement>, \"disabled\"> {\n label: string;\n onClick: MouseEventHandler<HTMLButtonElement>;\n}\n\nexport interface TagProps extends HTMLAttributes<HTMLSpanElement> {\n density?: Density;\n dismissAction?: DismissAction;\n}\n\ntype Variant = \"info\" \| \"error\" \| \"warning\" \| \"success\";\n\nfunction getDisplayName(variant?: Variant) {\n switch (variant) {\n case \"info\":\n return \"InfoTag\";\n case \"error\":\n return \"ErrorTag\";\n case \"warning\":\n return \"WarningTag\";\n case \"success\":\n return \"SuccessTag\";\n default:\n return \"Tag\";\n }\n}\n\nfunction tagFactory(variant?: Variant) {\n const Tag: FC<TagProps> = ({ className, density, dismissAction, children, ...rest }) => (\n <span\n className={clsx(\n \"jkl-tag\",\n {\n \"jkl-tag--info\": variant === \"info\",\n \"jkl-tag--error\": variant === \"error\",\n \"jkl-tag--warning\": variant === \"warning\",\n \"jkl-tag--success\": variant === \"success\",\n },\n className,\n )}\n data-density={density}\n {...rest}\n >\n {children}\n {dismissAction && (\n <IconButton\n className=\"jkl-tag__dismiss-action\"\n density={density}\n title={dismissAction.label}\n onClick={dismissAction.onClick}\n onFocus={dismissAction.onFocus}\n onBlur={dismissAction.onBlur}\n >\n <CloseIcon variant=\"small\" bold />\n </IconButton>\n )}\n </span>\n );\n Tag.displayName = getDisplayName(variant);\n return Tag;\n}\n\nexport const Tag = tagFactory();\nexport const InfoTag = tagFactory(\"info\");\nexport const ErrorTag = tagFactory(\"error\");\nexport const WarningTag = tagFactory(\"warning\");\nexport const SuccessTag = tagFactory(\"success\");\n"],"names":["tagFactory","variant","Tag","className","density","dismissAction","children","rest","jsxs","clsx","jsx","IconButton","title","label","onClick","onFocus","onBlur","CloseIcon","bold","displayName","getDisplayName","InfoTag","ErrorTag","WarningTag","SuccessTag"],"mappings":"i/CAiCA,SAASA,EAAWC,GACVC,MAAAA,EAAoB,EAAGC,UAAAA,EAAWC,QAAAA,EAASC,cAAAA,EAAeC,SAAAA,KAAaC,KACzEC,EAAC,OAAA,CACGL,UAAWM,EACP,UACA,CACI,gBAA6B,SAAZR,EACjB,iBAA8B,UAAZA,EAClB,mBAAgC,YAAZA,EACpB,mBAAgC,YAAZA,GAExBE,GAEJ,eAAcC,KACVG,EAEHD,SAAA,CAAAA,EACAD,GACGK,EAACC,EAAA,CACGR,UAAU,0BACVC,QAAAA,EACAQ,MAAOP,EAAcQ,MACrBC,QAAST,EAAcS,QACvBC,QAASV,EAAcU,QACvBC,OAAQX,EAAcW,OAEtBV,SAACI,EAAAO,EAAA,CAAUhB,QAAQ,QAAQiB,MAAI,SAK/ChB,OAAAA,EAAIiB,YA9CR,SAAwBlB,GACpB,OAAQA,GACJ,IAAK,OACM,MAAA,UACX,IAAK,QACM,MAAA,WACX,IAAK,UACM,MAAA,aACX,IAAK,UACM,MAAA,aACX,QACW,MAAA,MAEnB,CAiCsBmB,CAAenB,GAC1BC,CACX,CAEO,MAAMA,EAAMF,IACNqB,EAAUrB,EAAW,QACrBsB,EAAWtB,EAAW,SACtBuB,EAAavB,EAAW,WACxBwB,EAAaxB,EAAW"}

package/build/es/components/tag/index.d.ts ADDED Viewed

@@ -0,0 +1,3 @@
+import { Tag, InfoTag, ErrorTag, WarningTag, SuccessTag } from './Tag.js';
+export type { TagProps } from './Tag.js';
+export { Tag, InfoTag, ErrorTag, WarningTag, SuccessTag };

package/build/es/components/text-input/BaseTextInput.d.ts ADDED Viewed

@@ -0,0 +1,42 @@
+import { default as React, MouseEventHandler, ReactNode, InputHTMLAttributes, HTMLProps } from 'react';
+import { Density } from '../../core/types.js';
+import { IconProps } from '../icon/index.js';
+interface ActionBaseProps extends Exclude<HTMLProps<HTMLButtonElement>, "disabled"> {
+    icon: React.ReactElement<IconProps>;
+    label: string;
+    buttonRef?: React.Ref<HTMLButtonElement>;
+}
+export interface ActionButton extends ActionBaseProps {
+    type?: "button" | "reset";
+    onClick: MouseEventHandler<HTMLButtonElement>;
+}
+export interface ActionSubmit extends ActionBaseProps {
+    type: "submit";
+    onClick?: MouseEventHandler<HTMLButtonElement>;
+}
+export type Action = ActionButton | ActionSubmit;
+export interface BaseTextInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "children"> {
+    /**
+     * Brukes til inputfelter hvor det brukes maskering, for formatering av store tall. Brukes typisk bare til valuta.
+     * @default "left"
+     */
+    align?: "left" | "right";
+    /**
+     * @deprecated Bruk heller actionButton
+     *
+     */
+    action?: Action;
+    density?: Density;
+    /**
+     * Benevnelse for feltet. Unngå å bruke både benevnelse og handling samtidig
+     * @example "kr"
+     * */
+    unit?: ReactNode;
+    width?: string;
+    /**
+     * Element som vises til høyre for inputfeltet. Brukes typisk til å trigge en handling som f.eks. å vise/skjule passord.
+     */
+    actionButton?: React.ReactElement<IconProps>;
+}
+export declare const BaseTextInput: React.ForwardRefExoticComponent<BaseTextInputProps & React.RefAttributes<HTMLInputElement>>;
+export {};

package/build/es/components/text-input/BaseTextInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BaseTextInput.js","sources":["../../../../src/components/text-input/BaseTextInput.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {\n type CSSProperties,\n forwardRef,\n type MouseEventHandler,\n type ReactNode,\n InputHTMLAttributes,\n HTMLProps,\n} from \"react\";\nimport { Density } from \"../../core\";\nimport { IconProps } from \"../icon\";\nimport { IconButton } from \"../icon-button\";\n\nfunction getWidthAsStyle(width?: string, maxLength?: number): CSSProperties \| undefined {\n if (width) {\n return { width }; // prioritize width prop\n }\n\n if (maxLength) {\n // adapt to maxLength, but capped at 40ch\n const length = `${Math.min(maxLength, 40)}ch`;\n const padding = \"24px\"; // left + right padding\n return { width: `calc(${length} + ${padding})` };\n }\n\n return undefined;\n}\n\ninterface ActionBaseProps extends Exclude<HTMLProps<HTMLButtonElement>, \"disabled\"> {\n icon: React.ReactElement<IconProps>;\n label: string;\n buttonRef?: React.Ref<HTMLButtonElement>;\n}\n\nexport interface ActionButton extends ActionBaseProps {\n type?: \"button\" \| \"reset\";\n onClick: MouseEventHandler<HTMLButtonElement>;\n}\n\nexport interface ActionSubmit extends ActionBaseProps {\n type: \"submit\";\n onClick?: MouseEventHandler<HTMLButtonElement>;\n}\n\nexport type Action = ActionButton \| ActionSubmit;\n\nexport interface BaseTextInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, \"children\"> {\n /*\n Brukes til inputfelter hvor det brukes maskering, for formatering av store tall. Brukes typisk bare til valuta.\n * @default \"left\"\n /\n align?: \"left\" \| \"right\";\n /\n @deprecated Bruk heller actionButton\n \n /\n action?: Action;\n density?: Density;\n /*\n Benevnelse for feltet. Unngå å bruke både benevnelse og handling samtidig\n * @example \"kr\"\n * /\n unit?: ReactNode;\n width?: string;\n /\n Element som vises til høyre for inputfeltet. Brukes typisk til å trigge en handling som f.eks. å vise/skjule passord.\n */\n actionButton?: React.ReactElement<IconProps>;\n}\n\nexport const BaseTextInput = forwardRef<HTMLInputElement, BaseTextInputProps>((props, ref) => {\n const {\n action,\n align = \"left\",\n \"aria-invalid\": ariaInvalid,\n className = \"\",\n density,\n maxLength,\n style,\n type = \"text\",\n unit,\n width,\n actionButton,\n ...rest\n } = props;\n\n return (\n <div\n className=\"jkl-text-input-wrapper\"\n data-invalid={ariaInvalid}\n style={{ ...style, ...getWidthAsStyle(width, maxLength) }}\n >\n <input\n aria-invalid={ariaInvalid}\n ref={ref}\n className={clsx(\"jkl-text-input__input\", className, {\n \"jkl-text-input__input--align-right\": align === \"right\",\n })}\n maxLength={maxLength}\n type={type}\n {...rest}\n />\n {unit && <span className=\"jkl-text-input__unit\">{unit}</span>}\n {!action && actionButton && actionButton}\n {action && !actionButton && (\n <IconButton\n density={density}\n className={clsx(\"jkl-text-input-action-button\", action.className)}\n title={action.label}\n onClick={action.onClick}\n onFocus={action.onFocus}\n onBlur={action.onBlur}\n ref={action.buttonRef}\n type={action.type \|\| \"button\"}\n >\n {action.icon}\n </IconButton>\n )}\n </div>\n );\n});\n\nBaseTextInput.displayName = \"BaseInputField\";\n"],"names":["getWidthAsStyle","width","maxLength","Math","min","BaseTextInput","forwardRef","props","ref","action","align","ariaInvalid","className","density","style","type","unit","actionButton","rest","jsxs","children","jsx","clsx","IconButton","title","label","onClick","onFocus","onBlur","buttonRef","icon","displayName"],"mappings":"6LAaA,SAASA,EAAgBC,EAAgBC,GACjCD,OAAAA,EACO,CAAEA,MAAAA,GAGTC,EAIO,CAAED,MAAO,QAFEE,KAAKC,IAAIF,EAAW,sBAFtCA,CAQR,CA4CO,MAAMG,EAAgBC,GAAiD,CAACC,EAAOC,KAC5E,MACFC,OAAAA,EACAC,MAAAA,EAAQ,OACR,eAAgBC,EAChBC,UAAAA,EAAY,GACZC,QAAAA,EACAX,UAAAA,EACAY,MAAAA,EACAC,KAAAA,EAAO,OACPC,KAAAA,EACAf,MAAAA,EACAgB,aAAAA,KACGC,GACHX,EAGA,OAAAY,EAAC,MAAA,CACGP,UAAU,yBACV,eAAcD,EACdG,MAAO,IAAKA,KAAUd,EAAgBC,EAAOC,IAE7CkB,SAAA,CAAAC,EAAC,QAAA,CACG,eAAcV,EACdH,IAAAA,EACAI,UAAWU,EAAK,wBAAyBV,EAAW,CAChD,qCAAgD,UAAVF,IAE1CR,UAAAA,EACAa,KAAAA,KACIG,IAEPF,GAAQK,EAAC,OAAK,CAAAT,UAAU,uBAAwBQ,SAAKJ,KACpDP,GAAUQ,GAAgBA,EAC3BR,IAAWQ,GACRI,EAACE,EAAA,CACGV,QAAAA,EACAD,UAAWU,EAAK,+BAAgCb,EAAOG,WACvDY,MAAOf,EAAOgB,MACdC,QAASjB,EAAOiB,QAChBC,QAASlB,EAAOkB,QAChBC,OAAQnB,EAAOmB,OACfpB,IAAKC,EAAOoB,UACZd,KAAMN,EAAOM,MAAQ,SAEpBK,SAAOX,EAAAqB,SACZ,IAMhBzB,EAAc0B,YAAc"}
1	+ {"version":3,"file":"BaseTextInput.js","sources":["../../../../src/components/text-input/BaseTextInput.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {\n type CSSProperties,\n forwardRef,\n type MouseEventHandler,\n type ReactNode,\n InputHTMLAttributes,\n HTMLProps,\n} from \"react\";\nimport { Density } from \"../../core/types.js\";\nimport { IconProps } from \"../icon/index.js\";\nimport { IconButton } from \"../icon-button/IconButton.js\";\n\nfunction getWidthAsStyle(width?: string, maxLength?: number): CSSProperties \| undefined {\n if (width) {\n return { width }; // prioritize width prop\n }\n\n if (maxLength) {\n // adapt to maxLength, but capped at 40ch\n const length = `${Math.min(maxLength, 40)}ch`;\n const padding = \"24px\"; // left + right padding\n return { width: `calc(${length} + ${padding})` };\n }\n\n return undefined;\n}\n\ninterface ActionBaseProps extends Exclude<HTMLProps<HTMLButtonElement>, \"disabled\"> {\n icon: React.ReactElement<IconProps>;\n label: string;\n buttonRef?: React.Ref<HTMLButtonElement>;\n}\n\nexport interface ActionButton extends ActionBaseProps {\n type?: \"button\" \| \"reset\";\n onClick: MouseEventHandler<HTMLButtonElement>;\n}\n\nexport interface ActionSubmit extends ActionBaseProps {\n type: \"submit\";\n onClick?: MouseEventHandler<HTMLButtonElement>;\n}\n\nexport type Action = ActionButton \| ActionSubmit;\n\nexport interface BaseTextInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, \"children\"> {\n /*\n Brukes til inputfelter hvor det brukes maskering, for formatering av store tall. Brukes typisk bare til valuta.\n * @default \"left\"\n /\n align?: \"left\" \| \"right\";\n /\n @deprecated Bruk heller actionButton\n \n /\n action?: Action;\n density?: Density;\n /*\n Benevnelse for feltet. Unngå å bruke både benevnelse og handling samtidig\n * @example \"kr\"\n * /\n unit?: ReactNode;\n width?: string;\n /\n Element som vises til høyre for inputfeltet. Brukes typisk til å trigge en handling som f.eks. å vise/skjule passord.\n */\n actionButton?: React.ReactElement<IconProps>;\n}\n\nexport const BaseTextInput = forwardRef<HTMLInputElement, BaseTextInputProps>((props, ref) => {\n const {\n action,\n align = \"left\",\n \"aria-invalid\": ariaInvalid,\n className = \"\",\n density,\n maxLength,\n style,\n type = \"text\",\n unit,\n width,\n actionButton,\n ...rest\n } = props;\n\n return (\n <div\n className=\"jkl-text-input-wrapper\"\n data-invalid={ariaInvalid}\n style={{ ...style, ...getWidthAsStyle(width, maxLength) }}\n >\n <input\n aria-invalid={ariaInvalid}\n ref={ref}\n className={clsx(\"jkl-text-input__input\", className, {\n \"jkl-text-input__input--align-right\": align === \"right\",\n })}\n maxLength={maxLength}\n type={type}\n {...rest}\n />\n {unit && <span className=\"jkl-text-input__unit\">{unit}</span>}\n {!action && actionButton && actionButton}\n {action && !actionButton && (\n <IconButton\n density={density}\n className={clsx(\"jkl-text-input-action-button\", action.className)}\n title={action.label}\n onClick={action.onClick}\n onFocus={action.onFocus}\n onBlur={action.onBlur}\n ref={action.buttonRef}\n type={action.type \|\| \"button\"}\n >\n {action.icon}\n </IconButton>\n )}\n </div>\n );\n});\n\nBaseTextInput.displayName = \"BaseInputField\";\n"],"names":["getWidthAsStyle","width","maxLength","Math","min","BaseTextInput","forwardRef","props","ref","action","align","ariaInvalid","className","density","style","type","unit","actionButton","rest","jsxs","children","jsx","clsx","IconButton","title","label","onClick","onFocus","onBlur","buttonRef","icon","displayName"],"mappings":"6LAaA,SAASA,EAAgBC,EAAgBC,GACjCD,OAAAA,EACO,CAAEA,MAAAA,GAGTC,EAIO,CAAED,MAAO,QAFEE,KAAKC,IAAIF,EAAW,sBAFtCA,CAQR,CA4CO,MAAMG,EAAgBC,GAAiD,CAACC,EAAOC,KAC5E,MACFC,OAAAA,EACAC,MAAAA,EAAQ,OACR,eAAgBC,EAChBC,UAAAA,EAAY,GACZC,QAAAA,EACAX,UAAAA,EACAY,MAAAA,EACAC,KAAAA,EAAO,OACPC,KAAAA,EACAf,MAAAA,EACAgB,aAAAA,KACGC,GACHX,EAGA,OAAAY,EAAC,MAAA,CACGP,UAAU,yBACV,eAAcD,EACdG,MAAO,IAAKA,KAAUd,EAAgBC,EAAOC,IAE7CkB,SAAA,CAAAC,EAAC,QAAA,CACG,eAAcV,EACdH,IAAAA,EACAI,UAAWU,EAAK,wBAAyBV,EAAW,CAChD,qCAAgD,UAAVF,IAE1CR,UAAAA,EACAa,KAAAA,KACIG,IAEPF,GAAQK,EAAC,OAAK,CAAAT,UAAU,uBAAwBQ,SAAKJ,KACpDP,GAAUQ,GAAgBA,EAC3BR,IAAWQ,GACRI,EAACE,EAAA,CACGV,QAAAA,EACAD,UAAWU,EAAK,+BAAgCb,EAAOG,WACvDY,MAAOf,EAAOgB,MACdC,QAASjB,EAAOiB,QAChBC,QAASlB,EAAOkB,QAChBC,OAAQnB,EAAOmB,OACfpB,IAAKC,EAAOoB,UACZd,KAAMN,EAAOM,MAAQ,SAEpBK,SAAOX,EAAAqB,SACZ,IAMhBzB,EAAc0B,YAAc"}

package/build/es/components/text-input/TextArea.d.ts ADDED Viewed

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+import { InputGroupProps } from '../input-group/InputGroup.js';
+import { BaseTextAreaProps } from './BaseTextArea.js';
+export interface TextAreaProps extends Omit<InputGroupProps, "children">, BaseTextAreaProps {
+}
+export declare const TextArea: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;

package/build/es/components/text-input/TextArea.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsx as o}from"react/jsx-runtime";import{c as n}from"../../../clsx-BeLtu-UY.js";import{forwardRef as i}from"react";import"../../hooks/useScreen/useScreen.js";import"../../hooks/useId/useId.js";import"../tooltip/Tooltip.js";import"../tooltip/TooltipContent.js";import"../tooltip/TooltipTrigger.js";import"../icon/Icon.js";import"../icon/icons/animated/ArrowVerticalAnimated.js";import"../icon/icons/animated/ArrowHorizontalAnimated.js";import"../icon/icons/animated/PlusRemoveAnimated.js";import"../icon/icons/ArrowDownIcon.js";import"../icon/icons/ArrowLeftIcon.js";import"../icon/icons/ArrowNorthEastIcon.js";import"../icon/icons/ArrowRightIcon.js";import"../icon/icons/ArrowUpIcon.js";import"../icon/icons/CalendarIcon.js";import"../icon/icons/CheckIcon.js";import"../icon/icons/ChevronDownIcon.js";import"../icon/icons/ChevronLeftIcon.js";import"../icon/icons/ChevronRightIcon.js";import"../icon/icons/ChevronUpIcon.js";import"../icon/icons/CloseIcon.js";import"../icon/icons/CopyIcon.js";import"../icon/icons/DotsIcon.js";import"../icon/icons/DragIcon.js";import"../icon/icons/ErrorIcon.js";import"../icon/icons/GreenCheckIcon.js";import"../icon/icons/HamburgerIcon.js";import"../icon/icons/InfoIcon.js";import"../icon/icons/LinkIcon.js";import"../icon/icons/PlusIcon.js";import"../icon/icons/QuestionIcon.js";import"../icon/icons/RedCrossIcon.js";import"../icon/icons/SearchIcon.js";import"../icon/icons/SuccessIcon.js";import"../icon/icons/WarningIcon.js";import"../icon/icons/MinusIcon.js";import"../icon/icons/ThumbDownIcon.js";import"../icon/icons/ThumbUpIcon.js";import"../icon/icons/TrashCanIcon.js";import"../icon/icons/PenIcon.js";import{InputGroup as r}from"../input-group/InputGroup.js";import{BaseTextArea as s}from"./BaseTextArea.js";const c=i(((i,c)=>{const{autoExpand:t,className:e,counter:p,density:a,errorLabel:m,helpLabel:j,inline:l,label:I,labelProps:u,startOpen:d,supportLabelProps:h,tooltipProps:x,...A}=i,b={label:I,density:a,errorLabel:m,helpLabel:j,labelProps:u,inline:l,supportLabelProps:h,tooltipProps:x},C={autoExpand:t,counter:p,startOpen:d};return o(r,{className:n("jkl-text-area",e,{"jkl-text-area--start-open":d,"jkl-text-area--auto-expand":t}),"data-testid":"jkl-text-area",...b,children:o(s,{ref:c,...A,...C})})}));c.displayName="TextArea";export{c as TextArea};
+import{jsx as e}from"react/jsx-runtime";import{c as a}from"../../../clsx-BeLtu-UY.js";import{forwardRef as r}from"react";import{InputGroup as t}from"../input-group/InputGroup.js";import{BaseTextArea as o}from"./BaseTextArea.js";const s=r(((r,s)=>{const{autoExpand:p,className:l,counter:n,density:i,errorLabel:u,helpLabel:x,inline:m,label:c,labelProps:b,startOpen:d,supportLabelProps:j,tooltipProps:f,...L}=r,P={label:c,density:i,errorLabel:u,helpLabel:x,labelProps:b,inline:m,supportLabelProps:j,tooltipProps:f},k={autoExpand:p,counter:n,startOpen:d};return e(t,{className:a("jkl-text-area",l,{"jkl-text-area--start-open":d,"jkl-text-area--auto-expand":p}),"data-testid":"jkl-text-area",...P,children:e(o,{ref:s,...L,...k})})}));s.displayName="TextArea";export{s as TextArea};
 //# sourceMappingURL=TextArea.js.map

package/build/es/components/text-input/TextArea.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TextArea.js","sources":["../../../../src/components/text-input/TextArea.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport { InputGroup, InputGroupProps } from \"../input-group\";\nimport { BaseTextArea, BaseTextAreaProps } from \"./BaseTextArea\";\n\nexport interface TextAreaProps extends Omit<InputGroupProps, \"children\">, BaseTextAreaProps {}\n\nexport const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>((props, ref) => {\n const {\n autoExpand,\n className,\n counter,\n density,\n errorLabel,\n helpLabel,\n inline,\n label,\n labelProps,\n startOpen,\n supportLabelProps,\n tooltipProps,\n ...rest\n } = props;\n const inputGroupProps = {\n label,\n density,\n errorLabel,\n helpLabel,\n labelProps,\n inline,\n supportLabelProps,\n tooltipProps,\n };\n const textAreaProps = { autoExpand, counter, startOpen };\n return (\n <InputGroup\n className={clsx(\"jkl-text-area\", className, {\n \"jkl-text-area--start-open\": startOpen,\n \"jkl-text-area--auto-expand\": autoExpand,\n })}\n data-testid=\"jkl-text-area\"\n {...inputGroupProps}\n >\n <BaseTextArea ref={ref} {...rest} {...textAreaProps} />\n </InputGroup>\n );\n});\nTextArea.displayName = \"TextArea\";\n"],"names":["TextArea","forwardRef","props","ref","autoExpand","className","counter","density","errorLabel","helpLabel","inline","label","labelProps","startOpen","supportLabelProps","tooltipProps","rest","inputGroupProps","textAreaProps","jsx","InputGroup","clsx","children","BaseTextArea","displayName"],"mappings":"~~6tDAOO~~,MAAMA,EAAWC,GAA+C,CAACC,EAAOC,KACrE,MACFC,WAAAA,EACAC,UAAAA,EACAC,QAAAA,EACAC,QAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAC,OAAAA,EACAC,MAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAC,kBAAAA,EACAC,aAAAA,KACGC,GACHd,EACEe,EAAkB,CACpBN,MAAAA,EACAJ,QAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAG,WAAAA,EACAF,OAAAA,EACAI,kBAAAA,EACAC,aAAAA,GAEEG,EAAgB,CAAEd,WAAAA,EAAYE,QAAAA,EAASO,UAAAA,GAEzC,OAAAM,EAACC,EAAA,CACGf,UAAWgB,EAAK,gBAAiBhB,EAAW,CACxC,4BAA6BQ,EAC7B,6BAA8BT,IAElC,cAAY,mBACRa,EAEJK,WAACC,EAAa,CAAApB,IAAAA,KAAca,KAAUE,KAAe,IAIjElB,EAASwB,YAAc"}
1	+ {"version":3,"file":"TextArea.js","sources":["../../../../src/components/text-input/TextArea.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport { InputGroup, InputGroupProps } from \"../input-group/InputGroup.js\";\nimport { BaseTextArea, BaseTextAreaProps } from \"./BaseTextArea.js\";\n\nexport interface TextAreaProps extends Omit<InputGroupProps, \"children\">, BaseTextAreaProps {}\n\nexport const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>((props, ref) => {\n const {\n autoExpand,\n className,\n counter,\n density,\n errorLabel,\n helpLabel,\n inline,\n label,\n labelProps,\n startOpen,\n supportLabelProps,\n tooltipProps,\n ...rest\n } = props;\n const inputGroupProps = {\n label,\n density,\n errorLabel,\n helpLabel,\n labelProps,\n inline,\n supportLabelProps,\n tooltipProps,\n };\n const textAreaProps = { autoExpand, counter, startOpen };\n return (\n <InputGroup\n className={clsx(\"jkl-text-area\", className, {\n \"jkl-text-area--start-open\": startOpen,\n \"jkl-text-area--auto-expand\": autoExpand,\n })}\n data-testid=\"jkl-text-area\"\n {...inputGroupProps}\n >\n <BaseTextArea ref={ref} {...rest} {...textAreaProps} />\n </InputGroup>\n );\n});\nTextArea.displayName = \"TextArea\";\n"],"names":["TextArea","forwardRef","props","ref","autoExpand","className","counter","density","errorLabel","helpLabel","inline","label","labelProps","startOpen","supportLabelProps","tooltipProps","rest","inputGroupProps","textAreaProps","jsx","InputGroup","clsx","children","BaseTextArea","displayName"],"mappings":"oOAOO,MAAMA,EAAWC,GAA+C,CAACC,EAAOC,KACrE,MACFC,WAAAA,EACAC,UAAAA,EACAC,QAAAA,EACAC,QAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAC,OAAAA,EACAC,MAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAC,kBAAAA,EACAC,aAAAA,KACGC,GACHd,EACEe,EAAkB,CACpBN,MAAAA,EACAJ,QAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAG,WAAAA,EACAF,OAAAA,EACAI,kBAAAA,EACAC,aAAAA,GAEEG,EAAgB,CAAEd,WAAAA,EAAYE,QAAAA,EAASO,UAAAA,GAEzC,OAAAM,EAACC,EAAA,CACGf,UAAWgB,EAAK,gBAAiBhB,EAAW,CACxC,4BAA6BQ,EAC7B,6BAA8BT,IAElC,cAAY,mBACRa,EAEJK,WAACC,EAAa,CAAApB,IAAAA,KAAca,KAAUE,KAAe,IAIjElB,EAASwB,YAAc"}

package/build/es/components/text-input/TextInput.d.ts ADDED Viewed

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+import { InputGroupProps } from '../input-group/InputGroup.js';
+import { BaseTextInputProps } from './BaseTextInput.js';
+export interface TextInputProps extends Omit<InputGroupProps, "children">, BaseTextInputProps {
+    "data-testautoid"?: string;
+    inline?: boolean;
+    inputClassName?: string;
+}
+export declare const TextInput: React.ForwardRefExoticComponent<TextInputProps & React.RefAttributes<HTMLInputElement>>;

package/build/es/components/text-input/TextInput.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsx as o}from"react/jsx-runtime";import{c as i}from"../../../clsx-BeLtu-UY.js";import{forwardRef as n}from"react";import"../../hooks/useScreen/useScreen.js";import"../../hooks/useId/useId.js";import"../tooltip/Tooltip.js";import"../tooltip/TooltipContent.js";import"../tooltip/TooltipTrigger.js";import"../icon/Icon.js";import"../icon/icons/animated/ArrowVerticalAnimated.js";import"../icon/icons/animated/ArrowHorizontalAnimated.js";import"../icon/icons/animated/PlusRemoveAnimated.js";import"../icon/icons/ArrowDownIcon.js";import"../icon/icons/ArrowLeftIcon.js";import"../icon/icons/ArrowNorthEastIcon.js";import"../icon/icons/ArrowRightIcon.js";import"../icon/icons/ArrowUpIcon.js";import"../icon/icons/CalendarIcon.js";import"../icon/icons/CheckIcon.js";import"../icon/icons/ChevronDownIcon.js";import"../icon/icons/ChevronLeftIcon.js";import"../icon/icons/ChevronRightIcon.js";import"../icon/icons/ChevronUpIcon.js";import"../icon/icons/CloseIcon.js";import"../icon/icons/CopyIcon.js";import"../icon/icons/DotsIcon.js";import"../icon/icons/DragIcon.js";import"../icon/icons/ErrorIcon.js";import"../icon/icons/GreenCheckIcon.js";import"../icon/icons/HamburgerIcon.js";import"../icon/icons/InfoIcon.js";import"../icon/icons/LinkIcon.js";import"../icon/icons/PlusIcon.js";import"../icon/icons/QuestionIcon.js";import"../icon/icons/RedCrossIcon.js";import"../icon/icons/SearchIcon.js";import"../icon/icons/SuccessIcon.js";import"../icon/icons/WarningIcon.js";import"../icon/icons/MinusIcon.js";import"../icon/icons/ThumbDownIcon.js";import"../icon/icons/ThumbUpIcon.js";import"../icon/icons/TrashCanIcon.js";import"../icon/icons/PenIcon.js";import{InputGroup as s}from"../input-group/InputGroup.js";import{BaseTextInput as c}from"./BaseTextInput.js";const r=n(((n,r)=>{const{label:t,className:p,density:e,errorLabel:m,helpLabel:a,inline:j,inputClassName:l,labelProps:I,supportLabelProps:u,tooltipProps:d,...h}=n;return o(s,{label:t,density:e,errorLabel:m,helpLabel:a,labelProps:I,inline:j,supportLabelProps:u,tooltipProps:d,className:i(p,"jkl-text-input",{"jkl-text-input--inline":j}),"data-testid":"jkl-text-input",density:j?"compact":e,children:o(c,{ref:r,...h,className:l})})}));r.displayName="TextInput";export{r as TextInput};
+import{jsx as t}from"react/jsx-runtime";import{c as e}from"../../../clsx-BeLtu-UY.js";import{forwardRef as r}from"react";import{InputGroup as s}from"../input-group/InputGroup.js";import{BaseTextInput as p}from"./BaseTextInput.js";const a=r(((r,a)=>{const{label:o,className:l,density:i,errorLabel:n,helpLabel:u,inline:m,inputClassName:c,labelProps:x,supportLabelProps:b,tooltipProps:d,...f}=r;return t(s,{label:o,density:i,errorLabel:n,helpLabel:u,labelProps:x,inline:m,supportLabelProps:b,tooltipProps:d,className:e(l,"jkl-text-input",{"jkl-text-input--inline":m}),"data-testid":"jkl-text-input",density:m?"compact":i,children:t(p,{ref:a,...f,className:c})})}));a.displayName="TextInput";export{a as TextInput};
 //# sourceMappingURL=TextInput.js.map

package/build/es/components/text-input/TextInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TextInput.js","sources":["../../../../src/components/text-input/TextInput.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport { InputGroup, InputGroupProps } from \"../input-group\";\nimport { BaseTextInput, BaseTextInputProps } from \"./BaseTextInput\";\n\nexport interface TextInputProps extends Omit<InputGroupProps, \"children\">, BaseTextInputProps {\n \"data-testautoid\"?: string;\n inline?: boolean;\n inputClassName?: string;\n}\n\nexport const TextInput = forwardRef<HTMLInputElement, TextInputProps>((props, ref) => {\n const {\n label,\n className,\n density,\n errorLabel,\n helpLabel,\n inline,\n inputClassName,\n labelProps,\n supportLabelProps,\n tooltipProps,\n ...rest\n } = props;\n const inputGroupProps = {\n label,\n density,\n errorLabel,\n helpLabel,\n labelProps,\n inline,\n supportLabelProps,\n tooltipProps,\n };\n return (\n <InputGroup\n {...inputGroupProps}\n className={clsx(className, \"jkl-text-input\", {\n \"jkl-text-input--inline\": inline,\n })}\n data-testid=\"jkl-text-input\"\n density={inline ? \"compact\" : density}\n >\n <BaseTextInput ref={ref} {...rest} className={inputClassName} />\n </InputGroup>\n );\n});\n\nTextInput.displayName = \"TextInput\";\n"],"names":["TextInput","forwardRef","props","ref","label","className","density","errorLabel","helpLabel","inline","inputClassName","labelProps","supportLabelProps","tooltipProps","rest","jsx","InputGroup","clsx","children","BaseTextInput","displayName"],"mappings":"~~+tDAWO~~,MAAMA,EAAYC,GAA6C,CAACC,EAAOC,KACpE,MACFC,MAAAA,EACAC,UAAAA,EACAC,QAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAC,OAAAA,EACAC,eAAAA,EACAC,WAAAA,EACAC,kBAAAA,EACAC,aAAAA,KACGC,GACHZ,EAYA,OAAAa,EAACC,EAAA,CAVDZ,MAAAA,EACAE,QAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAG,WAAAA,EACAF,OAAAA,EACAG,kBAAAA,EACAC,aAAAA,EAKIR,UAAWY,EAAKZ,EAAW,iBAAkB,CACzC,yBAA0BI,IAE9B,cAAY,iBACZH,QAASG,EAAS,UAAYH,EAE9BY,WAACC,EAAc,CAAAhB,IAAAA,KAAcW,EAAMT,UAAWK,KAAgB,IAK1EV,EAAUoB,YAAc"}
1	+ {"version":3,"file":"TextInput.js","sources":["../../../../src/components/text-input/TextInput.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport { InputGroup, InputGroupProps } from \"../input-group/InputGroup.js\";\nimport { BaseTextInput, BaseTextInputProps } from \"./BaseTextInput.js\";\n\nexport interface TextInputProps extends Omit<InputGroupProps, \"children\">, BaseTextInputProps {\n \"data-testautoid\"?: string;\n inline?: boolean;\n inputClassName?: string;\n}\n\nexport const TextInput = forwardRef<HTMLInputElement, TextInputProps>((props, ref) => {\n const {\n label,\n className,\n density,\n errorLabel,\n helpLabel,\n inline,\n inputClassName,\n labelProps,\n supportLabelProps,\n tooltipProps,\n ...rest\n } = props;\n const inputGroupProps = {\n label,\n density,\n errorLabel,\n helpLabel,\n labelProps,\n inline,\n supportLabelProps,\n tooltipProps,\n };\n return (\n <InputGroup\n {...inputGroupProps}\n className={clsx(className, \"jkl-text-input\", {\n \"jkl-text-input--inline\": inline,\n })}\n data-testid=\"jkl-text-input\"\n density={inline ? \"compact\" : density}\n >\n <BaseTextInput ref={ref} {...rest} className={inputClassName} />\n </InputGroup>\n );\n});\n\nTextInput.displayName = \"TextInput\";\n"],"names":["TextInput","forwardRef","props","ref","label","className","density","errorLabel","helpLabel","inline","inputClassName","labelProps","supportLabelProps","tooltipProps","rest","jsx","InputGroup","clsx","children","BaseTextInput","displayName"],"mappings":"sOAWO,MAAMA,EAAYC,GAA6C,CAACC,EAAOC,KACpE,MACFC,MAAAA,EACAC,UAAAA,EACAC,QAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAC,OAAAA,EACAC,eAAAA,EACAC,WAAAA,EACAC,kBAAAA,EACAC,aAAAA,KACGC,GACHZ,EAYA,OAAAa,EAACC,EAAA,CAVDZ,MAAAA,EACAE,QAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAG,WAAAA,EACAF,OAAAA,EACAG,kBAAAA,EACAC,aAAAA,EAKIR,UAAWY,EAAKZ,EAAW,iBAAkB,CACzC,yBAA0BI,IAE9B,cAAY,iBACZH,QAASG,EAAS,UAAYH,EAE9BY,WAACC,EAAc,CAAAhB,IAAAA,KAAcW,EAAMT,UAAWK,KAAgB,IAK1EV,EAAUoB,YAAc"}

package/build/es/components/text-input/index.d.ts ADDED Viewed

@@ -0,0 +1,4 @@
+export { BaseTextArea, type BaseTextAreaProps } from './BaseTextArea.js';
+export { BaseTextInput, type BaseTextInputProps } from './BaseTextInput.js';
+export { TextArea, type TextAreaProps } from './TextArea.js';
+export { TextInput, type TextInputProps } from './TextInput.js';

package/build/es/components/toast/Toast.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import { AriaToastProps } from '@react-aria/toast';
+import { QueuedToast, ToastState } from '@react-stately/toast';
+import { default as React } from 'react';
+import { ToastContent, ToastOptions } from './types.js';
+interface ToastProps<T extends ToastContent> extends AriaToastProps<T> {
+    className?: string;
+    state: ToastState<T>;
+    toast: QueuedToast<T> & ToastOptions;
+}
+export declare function Toast<T extends ToastContent>({ className, state, ...props }: ToastProps<T>): React.JSX.Element;
+export {};

package/build/es/components/toast/Toast.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Toast.js","sources":["../../../../src/components/toast/Toast.tsx"],"sourcesContent":["import { type AriaToastProps, useToast } from \"@react-aria/toast\";\nimport { QueuedToast, type ToastState } from \"@react-stately/toast\";\nimport clsx from \"clsx\";\nimport React, { useEffect, useRef } from \"react\";\nimport { useBrowserPreferences } from \"../../hooks\";\nimport { CloseIcon, ErrorIcon, InfoIcon, SuccessIcon, WarningIcon } from \"../icon\";\nimport { IconButton } from \"../icon-button\";\nimport { Countdown } from \"../progress-bar\";\nimport { ToastContent, ToastOptions } from \"./types\";\n\ninterface ToastProps<T extends ToastContent> extends AriaToastProps<T> {\n className?: string;\n state: ToastState<T>;\n toast: QueuedToast<T> & ToastOptions;\n}\n\nconst getIcon = (messageType?: \"error\" \| \"info\" \| \"success\" \| \"warning\") => {\n switch (messageType) {\n case \"error\":\n return <ErrorIcon className=\"jkl-toast__icon\" />;\n case \"info\":\n return <InfoIcon className=\"jkl-toast__icon\" />;\n case \"success\":\n return <SuccessIcon className=\"jkl-toast__icon\" />;\n case \"warning\":\n return <WarningIcon className=\"jkl-toast__icon\" />;\n default:\n return null;\n }\n};\n\nexport function Toast<T extends ToastContent>({ className, state, ...props }: ToastProps<T>) {\n let ref = useRef(null);\n let { toastProps, titleProps } = useToast(props, state, ref);\n\n const content = typeof props.toast.content === \"string\" ? props.toast.content : props.toast.content.content;\n const title = typeof props.toast.content === \"string\" ? undefined : props.toast.content.title;\n\n // @ts-ignore Proxy for å sjekke om timeren er pauset: https://github.com/adobe/react-spectrum/blob/b1545c0d225b12672fb6a4e7b787268591d66b90/packages/%40react-stately/toast/src/useToastState.ts#L222\n const isPaused = props.toast.timer?.timerId == null;\n\n const { prefersReducedMotion } = useBrowserPreferences();\n\n useEffect(() => {\n if (prefersReducedMotion && props.toast.animation === \"exiting\") {\n // If user has prefers-reduced-motion the exit animation won't run and our\n // onAnimationEnd callback won't be invoked. In this case, remove the toast\n // manually.\n state.remove(props.toast.key);\n }\n }, [prefersReducedMotion, props.toast.animation, props.toast.key, state]);\n\n return (\n <div\n {...toastProps}\n ref={ref}\n className={clsx(\n \"jkl-toast\",\n {\n \"jkl-toast--info\": props.toast.variant === \"info\",\n \"jkl-toast--error\": props.toast.variant === \"error\",\n \"jkl-toast--warning\": props.toast.variant === \"warning\",\n \"jkl-toast--success\": props.toast.variant === \"success\",\n },\n className,\n )}\n data-animation={props.toast.animation}\n onAnimationEnd={() => {\n // Remove the toast when the exiting animation completes.\n if (props.toast.animation === \"exiting\") {\n state.remove(props.toast.key);\n }\n }}\n >\n <span className=\"jkl-toast__progress\">\n {props.toast.timeout ? (\n <Countdown\n from={props.toast.timeout}\n isPaused={isPaused}\n onAnimationEnd={(e) => {\n // Avoid triggering the toast's onAnimationEnd handler so we still get our exit animation\n e.stopPropagation();\n }}\n />\n ) : null}\n </span>\n {getIcon(props.toast.variant)}\n <div {...titleProps} className=\"jkl-toast__content\">\n {title && <p className=\"jkl-toast__title\">{title}</p>}\n <p className=\"jkl-toast__message\">{content}</p>\n </div>\n <IconButton\n aria-label=\"Lukk varsel\"\n className=\"jkl-toast__dismiss-button\"\n onClick={() => {\n state.close(props.toast.key);\n }}\n >\n <CloseIcon />\n </IconButton>\n </div>\n );\n}\n"],"names":["getIcon","messageType","jsx","ErrorIcon","className","InfoIcon","SuccessIcon","WarningIcon","Toast","state","props","ref","useRef","toastProps","titleProps","useToast","content","toast","title","isPaused","_a","timer","timerId","prefersReducedMotion","useBrowserPreferences","useEffect","animation","remove","key","jsxs","clsx","variant","onAnimationEnd","children","timeout","Countdown","from","e","stopPropagation","IconButton","onClick","close","CloseIcon"],"mappings":"y4DAgBA,MAAMA,EAAWC,IACb,OAAQA,GACJ,IAAK,QACM,OAAAC,EAACC,EAAU,CAAAC,UAAU,oBAChC,IAAK,OACM,OAAAF,EAACG,EAAS,CAAAD,UAAU,oBAC/B,IAAK,UACM,OAAAF,EAACI,EAAY,CAAAF,UAAU,oBAClC,IAAK,UACM,OAAAF,EAACK,EAAY,CAAAH,UAAU,oBAClC,QACW,OAAA,KACf,EAGG,SAASI,GAAgCJ,UAAAA,EAAWK,MAAAA,KAAUC,UAC7D,IAAAC,EAAMC,EAAO,OACXC,WAAAA,EAAYC,WAAAA,GAAeC,EAASL,EAAOD,EAAOE,GAElD,MAAAK,EAAyC,iBAAxBN,EAAMO,MAAMD,QAAuBN,EAAMO,MAAMD,QAAUN,EAAMO,MAAMD,QAAQA,QAC9FE,EAAuC,iBAAxBR,EAAMO,MAAMD,aAAuB,EAAYN,EAAMO,MAAMD,QAAQE,MAGlFC,EAAyC,OAA9B,OAAAC,EAAAV,EAAMO,MAAMI,YAAZ,EAAAD,EAAmBE,UAE5BC,qBAAAA,GAAyBC,IAEjC,OAAAC,GAAU,KACFF,GAAkD,YAA1Bb,EAAMO,MAAMS,WAI9BjB,EAAAkB,OAAOjB,EAAMO,MAAMW,IAAG,GAEjC,CAACL,EAAsBb,EAAMO,MAAMS,UAAWhB,EAAMO,MAAMW,IAAKnB,IAG9DoB,EAAC,MAAA,IACOhB,EACJF,IAAAA,EACAP,UAAW0B,EACP,YACA,CACI,kBAA2C,SAAxBpB,EAAMO,MAAMc,QAC/B,mBAA4C,UAAxBrB,EAAMO,MAAMc,QAChC,qBAA8C,YAAxBrB,EAAMO,MAAMc,QAClC,qBAA8C,YAAxBrB,EAAMO,MAAMc,SAEtC3B,GAEJ,iBAAgBM,EAAMO,MAAMS,UAC5BM,eAAgB,KAEkB,YAA1BtB,EAAMO,MAAMS,WACNjB,EAAAkB,OAAOjB,EAAMO,MAAMW,IAAG,EAIpCK,SAAA,CAAA/B,EAAC,OAAK,CAAAE,UAAU,sBACX6B,SAAAvB,EAAMO,MAAMiB,QACThC,EAACiC,EAAA,CACGC,KAAM1B,EAAMO,MAAMiB,QAClBf,SAAAA,EACAa,eAAiBK,IAEbA,EAAEC,iBAAgB,IAG1B,OAEPtC,EAAQU,EAAMO,MAAMc,SACpBF,EAAA,MAAA,IAAQf,EAAYV,UAAU,qBAC1B6B,SAAA,CAAAf,GAAUhB,EAAA,IAAA,CAAEE,UAAU,mBAAoB6B,SAAMf,IAChDhB,EAAA,IAAA,CAAEE,UAAU,qBAAsB6B,SAAQjB,OAE/Cd,EAACqC,EAAA,CACG,aAAW,cACXnC,UAAU,4BACVoC,QAAS,KACC/B,EAAAgC,MAAM/B,EAAMO,MAAMW,IAAG,EAG/BK,WAACS,EAAU,QAI3B"}
1	+ {"version":3,"file":"Toast.js","sources":["../../../../src/components/toast/Toast.tsx"],"sourcesContent":["import { type AriaToastProps, useToast } from \"@react-aria/toast\";\nimport { QueuedToast, type ToastState } from \"@react-stately/toast\";\nimport clsx from \"clsx\";\nimport React, { useEffect, useRef } from \"react\";\nimport { useBrowserPreferences } from \"../../hooks/index.js\";\nimport { CloseIcon, ErrorIcon, InfoIcon, SuccessIcon, WarningIcon } from \"../icon/index.js\";\nimport { IconButton } from \"../icon-button/IconButton.js\";\nimport { Countdown } from \"../progress-bar/Countdown.js\";\nimport { ToastContent, ToastOptions } from \"./types.js\";\n\ninterface ToastProps<T extends ToastContent> extends AriaToastProps<T> {\n className?: string;\n state: ToastState<T>;\n toast: QueuedToast<T> & ToastOptions;\n}\n\nconst getIcon = (messageType?: \"error\" \| \"info\" \| \"success\" \| \"warning\") => {\n switch (messageType) {\n case \"error\":\n return <ErrorIcon className=\"jkl-toast__icon\" />;\n case \"info\":\n return <InfoIcon className=\"jkl-toast__icon\" />;\n case \"success\":\n return <SuccessIcon className=\"jkl-toast__icon\" />;\n case \"warning\":\n return <WarningIcon className=\"jkl-toast__icon\" />;\n default:\n return null;\n }\n};\n\nexport function Toast<T extends ToastContent>({ className, state, ...props }: ToastProps<T>) {\n let ref = useRef(null);\n let { toastProps, titleProps } = useToast(props, state, ref);\n\n const content = typeof props.toast.content === \"string\" ? props.toast.content : props.toast.content.content;\n const title = typeof props.toast.content === \"string\" ? undefined : props.toast.content.title;\n\n // @ts-ignore Proxy for å sjekke om timeren er pauset: https://github.com/adobe/react-spectrum/blob/b1545c0d225b12672fb6a4e7b787268591d66b90/packages/%40react-stately/toast/src/useToastState.ts#L222\n const isPaused = props.toast.timer?.timerId == null;\n\n const { prefersReducedMotion } = useBrowserPreferences();\n\n useEffect(() => {\n if (prefersReducedMotion && props.toast.animation === \"exiting\") {\n // If user has prefers-reduced-motion the exit animation won't run and our\n // onAnimationEnd callback won't be invoked. In this case, remove the toast\n // manually.\n state.remove(props.toast.key);\n }\n }, [prefersReducedMotion, props.toast.animation, props.toast.key, state]);\n\n return (\n <div\n {...toastProps}\n ref={ref}\n className={clsx(\n \"jkl-toast\",\n {\n \"jkl-toast--info\": props.toast.variant === \"info\",\n \"jkl-toast--error\": props.toast.variant === \"error\",\n \"jkl-toast--warning\": props.toast.variant === \"warning\",\n \"jkl-toast--success\": props.toast.variant === \"success\",\n },\n className,\n )}\n data-animation={props.toast.animation}\n onAnimationEnd={() => {\n // Remove the toast when the exiting animation completes.\n if (props.toast.animation === \"exiting\") {\n state.remove(props.toast.key);\n }\n }}\n >\n <span className=\"jkl-toast__progress\">\n {props.toast.timeout ? (\n <Countdown\n from={props.toast.timeout}\n isPaused={isPaused}\n onAnimationEnd={(e) => {\n // Avoid triggering the toast's onAnimationEnd handler so we still get our exit animation\n e.stopPropagation();\n }}\n />\n ) : null}\n </span>\n {getIcon(props.toast.variant)}\n <div {...titleProps} className=\"jkl-toast__content\">\n {title && <p className=\"jkl-toast__title\">{title}</p>}\n <p className=\"jkl-toast__message\">{content}</p>\n </div>\n <IconButton\n aria-label=\"Lukk varsel\"\n className=\"jkl-toast__dismiss-button\"\n onClick={() => {\n state.close(props.toast.key);\n }}\n >\n <CloseIcon />\n </IconButton>\n </div>\n );\n}\n"],"names":["getIcon","messageType","jsx","ErrorIcon","className","InfoIcon","SuccessIcon","WarningIcon","Toast","state","props","ref","useRef","toastProps","titleProps","useToast","content","toast","title","isPaused","_a","timer","timerId","prefersReducedMotion","useBrowserPreferences","useEffect","animation","remove","key","jsxs","clsx","variant","onAnimationEnd","children","timeout","Countdown","from","e","stopPropagation","IconButton","onClick","close","CloseIcon"],"mappings":"y4DAgBA,MAAMA,EAAWC,IACb,OAAQA,GACJ,IAAK,QACM,OAAAC,EAACC,EAAU,CAAAC,UAAU,oBAChC,IAAK,OACM,OAAAF,EAACG,EAAS,CAAAD,UAAU,oBAC/B,IAAK,UACM,OAAAF,EAACI,EAAY,CAAAF,UAAU,oBAClC,IAAK,UACM,OAAAF,EAACK,EAAY,CAAAH,UAAU,oBAClC,QACW,OAAA,KACf,EAGG,SAASI,GAAgCJ,UAAAA,EAAWK,MAAAA,KAAUC,UAC7D,IAAAC,EAAMC,EAAO,OACXC,WAAAA,EAAYC,WAAAA,GAAeC,EAASL,EAAOD,EAAOE,GAElD,MAAAK,EAAyC,iBAAxBN,EAAMO,MAAMD,QAAuBN,EAAMO,MAAMD,QAAUN,EAAMO,MAAMD,QAAQA,QAC9FE,EAAuC,iBAAxBR,EAAMO,MAAMD,aAAuB,EAAYN,EAAMO,MAAMD,QAAQE,MAGlFC,EAAyC,OAA9B,OAAAC,EAAAV,EAAMO,MAAMI,YAAZ,EAAAD,EAAmBE,UAE5BC,qBAAAA,GAAyBC,IAEjC,OAAAC,GAAU,KACFF,GAAkD,YAA1Bb,EAAMO,MAAMS,WAI9BjB,EAAAkB,OAAOjB,EAAMO,MAAMW,IAAG,GAEjC,CAACL,EAAsBb,EAAMO,MAAMS,UAAWhB,EAAMO,MAAMW,IAAKnB,IAG9DoB,EAAC,MAAA,IACOhB,EACJF,IAAAA,EACAP,UAAW0B,EACP,YACA,CACI,kBAA2C,SAAxBpB,EAAMO,MAAMc,QAC/B,mBAA4C,UAAxBrB,EAAMO,MAAMc,QAChC,qBAA8C,YAAxBrB,EAAMO,MAAMc,QAClC,qBAA8C,YAAxBrB,EAAMO,MAAMc,SAEtC3B,GAEJ,iBAAgBM,EAAMO,MAAMS,UAC5BM,eAAgB,KAEkB,YAA1BtB,EAAMO,MAAMS,WACNjB,EAAAkB,OAAOjB,EAAMO,MAAMW,IAAG,EAIpCK,SAAA,CAAA/B,EAAC,OAAK,CAAAE,UAAU,sBACX6B,SAAAvB,EAAMO,MAAMiB,QACThC,EAACiC,EAAA,CACGC,KAAM1B,EAAMO,MAAMiB,QAClBf,SAAAA,EACAa,eAAiBK,IAEbA,EAAEC,iBAAgB,IAG1B,OAEPtC,EAAQU,EAAMO,MAAMc,SACpBF,EAAA,MAAA,IAAQf,EAAYV,UAAU,qBAC1B6B,SAAA,CAAAf,GAAUhB,EAAA,IAAA,CAAEE,UAAU,mBAAoB6B,SAAMf,IAChDhB,EAAA,IAAA,CAAEE,UAAU,qBAAsB6B,SAAQjB,OAE/Cd,EAACqC,EAAA,CACG,aAAW,cACXnC,UAAU,4BACVoC,QAAS,KACC/B,EAAAgC,MAAM/B,EAAMO,MAAMW,IAAG,EAG/BK,WAACS,EAAU,QAI3B"}

package/build/es/components/toast/ToastRegion.d.ts ADDED Viewed

@@ -0,0 +1,7 @@
+import { ToastQueue } from '@react-stately/toast';
+import { default as React } from 'react';
+import { ToastContent } from './types.js';
+export declare function ToastRegion({ queue, placement }: {
+    queue: ToastQueue<ToastContent>;
+    placement: "center" | "left";
+}): React.ReactPortal | null;

package/build/es/components/toast/ToastRegion.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ToastRegion.js","sources":["../../../../src/components/toast/ToastRegion.tsx"],"sourcesContent":["import { type AriaToastRegionProps, useToastRegion } from \"@react-aria/toast\";\nimport { useToastQueue, type ToastState, ToastQueue } from \"@react-stately/toast\";\nimport clsx from \"clsx\";\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { Toast } from \"./Toast\";\nimport { ToastContent } from \"./types\";\n\ninterface ToastRegionProps<T extends ToastContent = ToastContent> extends AriaToastRegionProps {\n placement: \"center\" \| \"left\";\n state: ToastState<T>;\n}\n\nfunction Region<T extends ToastContent>({ placement, state, ...props }: ToastRegionProps<T>) {\n let ref = React.useRef(null);\n let { regionProps } = useToastRegion(props, state, ref);\n\n return (\n <div\n className={clsx(\"jkl\", \"jkl-toast-region\", {\n \"jkl-toast-region--left\": placement === \"left\",\n })}\n >\n <div {...regionProps} ref={ref} className=\"jkl-toast-region__toasts\">\n {[...state.visibleToasts].reverse().map((toast) => (\n <Toast key={toast.key} toast={toast} state={state} />\n ))}\n </div>\n </div>\n );\n}\n\nexport function ToastRegion({ queue, placement }: { queue: ToastQueue<ToastContent>; placement: \"center\" \| \"left\" }) {\n const state = useToastQueue<ToastContent>(queue);\n return state.visibleToasts.length > 0\n ? ReactDOM.createPortal(<Region state={state} placement={placement} />, document.body)\n : null;\n}\n"],"names":["Region","placement","state","props","ref","React","useRef","regionProps","useToastRegion","jsx","className","clsx","children","visibleToasts","reverse","map","toast","Toast","key","ToastRegion","queue","useToastQueue","length","ReactDOM","createPortal","document","body"],"mappings":"+QAaA,SAASA,GAAiCC,UAAAA,EAAWC,MAAAA,KAAUC,IACvD,IAAAC,EAAMC,EAAMC,OAAO,OACjBC,YAAAA,GAAgBC,EAAeL,EAAOD,EAAOE,GAG/C,OAAAK,EAAC,MAAA,CACGC,UAAWC,EAAK,MAAO,mBAAoB,CACvC,yBAAwC,SAAdV,IAG9BW,SAAAH,EAAC,MAAK,IAAGF,EAAaH,IAAAA,EAAUM,UAAU,2BACrCE,SAAA,IAAIV,EAAMW,eAAeC,UAAUC,KAAKC,GACpCP,EAAAQ,EAAA,CAAsBD,MAAAA,EAAcd,MAAAA,GAAzBc,EAAME,UAKtC,CAEO,SAASC,GAAcC,MAAAA,EAAOnB,UAAAA,IAC3BC,MAAAA,EAAQmB,EAA4BD,GAC1C,OAAOlB,EAAMW,cAAcS,OAAS,EAC9BC,EAASC,aAAcf,EAAAT,EAAA,CAAOE,MAAAA,EAAcD,UAAAA,IAA0BwB,SAASC,MAC/E,IACV"}
1	+ {"version":3,"file":"ToastRegion.js","sources":["../../../../src/components/toast/ToastRegion.tsx"],"sourcesContent":["import { type AriaToastRegionProps, useToastRegion } from \"@react-aria/toast\";\nimport { useToastQueue, type ToastState, ToastQueue } from \"@react-stately/toast\";\nimport clsx from \"clsx\";\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { Toast } from \"./Toast.js\";\nimport { ToastContent } from \"./types.js\";\n\ninterface ToastRegionProps<T extends ToastContent = ToastContent> extends AriaToastRegionProps {\n placement: \"center\" \| \"left\";\n state: ToastState<T>;\n}\n\nfunction Region<T extends ToastContent>({ placement, state, ...props }: ToastRegionProps<T>) {\n let ref = React.useRef(null);\n let { regionProps } = useToastRegion(props, state, ref);\n\n return (\n <div\n className={clsx(\"jkl\", \"jkl-toast-region\", {\n \"jkl-toast-region--left\": placement === \"left\",\n })}\n >\n <div {...regionProps} ref={ref} className=\"jkl-toast-region__toasts\">\n {[...state.visibleToasts].reverse().map((toast) => (\n <Toast key={toast.key} toast={toast} state={state} />\n ))}\n </div>\n </div>\n );\n}\n\nexport function ToastRegion({ queue, placement }: { queue: ToastQueue<ToastContent>; placement: \"center\" \| \"left\" }) {\n const state = useToastQueue<ToastContent>(queue);\n return state.visibleToasts.length > 0\n ? ReactDOM.createPortal(<Region state={state} placement={placement} />, document.body)\n : null;\n}\n"],"names":["Region","placement","state","props","ref","React","useRef","regionProps","useToastRegion","jsx","className","clsx","children","visibleToasts","reverse","map","toast","Toast","key","ToastRegion","queue","useToastQueue","length","ReactDOM","createPortal","document","body"],"mappings":"+QAaA,SAASA,GAAiCC,UAAAA,EAAWC,MAAAA,KAAUC,IACvD,IAAAC,EAAMC,EAAMC,OAAO,OACjBC,YAAAA,GAAgBC,EAAeL,EAAOD,EAAOE,GAG/C,OAAAK,EAAC,MAAA,CACGC,UAAWC,EAAK,MAAO,mBAAoB,CACvC,yBAAwC,SAAdV,IAG9BW,SAAAH,EAAC,MAAK,IAAGF,EAAaH,IAAAA,EAAUM,UAAU,2BACrCE,SAAA,IAAIV,EAAMW,eAAeC,UAAUC,KAAKC,GACpCP,EAAAQ,EAAA,CAAsBD,MAAAA,EAAcd,MAAAA,GAAzBc,EAAME,UAKtC,CAEO,SAASC,GAAcC,MAAAA,EAAOnB,UAAAA,IAC3BC,MAAAA,EAAQmB,EAA4BD,GAC1C,OAAOlB,EAAMW,cAAcS,OAAS,EAC9BC,EAASC,aAAcf,EAAAT,EAAA,CAAOE,MAAAA,EAAcD,UAAAA,IAA0BwB,SAASC,MAC/E,IACV"}

package/build/es/components/toast/index.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export { ToastProvider, useToast } from './toastContext.js';
2	+ export { type ToastContent } from './types.js';

package/build/es/components/toast/toastContext.d.ts ADDED Viewed

@@ -0,0 +1,16 @@
+import { FC } from 'react';
+import { WithChildren } from '../../core/types.js';
+import { ToastContent, ToastOptions } from './types.js';
+interface ToastContextProviderProps extends WithChildren {
+    maxVisibleToasts?: number;
+    /**
+     * @default "center"
+     */
+    placement?: "center" | "left";
+}
+type ToastContext = {
+    add: (toast: ToastContent, options?: ToastOptions) => string;
+};
+export declare const useToast: () => ToastContext;
+export declare const ToastProvider: FC<ToastContextProviderProps>;
+export {};

package/build/es/components/toast/toastContext.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"toastContext.js","sources":["../../../../src/components/toast/toastContext.tsx"],"sourcesContent":["import { ToastQueue } from \"@react-stately/toast\";\nimport React, { createContext, useContext, useState, type FC } from \"react\";\nimport { type WithChildren } from \"~~../..\~~";\nimport { ToastRegion } from \"./ToastRegion\";\nimport { ToastContent, ToastOptions } from \"./types\";\n\ninterface ToastContextProviderProps extends WithChildren {\n maxVisibleToasts?: number;\n /*\n @default \"center\"\n */\n placement?: \"center\" \| \"left\";\n}\n\ntype ToastContext = {\n add: (toast: ToastContent, options?: ToastOptions) => string;\n};\n\nconst context = createContext<ToastContext>({\n add: () => {\n return \"missing-provider\";\n },\n});\n\nexport const useToast = (): ToastContext => useContext(context);\n\nexport const ToastProvider: FC<ToastContextProviderProps> = ({\n children,\n maxVisibleToasts = 5,\n placement = \"center\",\n}) => {\n const [queue] = useState(new ToastQueue<ToastContent>({ maxVisibleToasts, hasExitAnimation: true }));\n\n return (\n <context.Provider\n value={{\n add: (toast: ToastContent, options?: ToastOptions) => {\n let timeout: number \| undefined = 5000;\n\n if (typeof options?.timeout === \"number\") {\n timeout = options.timeout as number;\n } else if (options?.timeout === null \|\| options?.timeout === \"off\") {\n timeout = undefined;\n }\n\n return queue.add(toast, {\n ...options,\n timeout,\n });\n },\n }}\n >\n {children}\n <ToastRegion queue={queue} placement={placement} />\n </context.Provider>\n );\n};\n"],"names":["context","createContext","add","useToast","useContext","ToastProvider","children","maxVisibleToasts","placement","queue","useState","ToastQueue","hasExitAnimation","jsxs","Provider","value","toast","options","timeout","jsx","ToastRegion"],"mappings":"uNAkBA,MAAMA,EAAUC,EAA4B,CACxCC,IAAK,IACM,qBAIFC,EAAW,IAAoBC,EAAWJ,GAE1CK,EAA+C,EACxDC,SAAAA,EACAC,iBAAAA,EAAmB,EACnBC,UAAAA,EAAY,aAEN,MAACC,GAASC,EAAS,IAAIC,EAAyB,CAAEJ,iBAAAA,EAAkBK,kBAAkB,KAGxF,OAAAC,EAACb,EAAQc,SAAR,CACGC,MAAO,CACHb,IAAK,CAACc,EAAqBC,KACvB,IAAIC,EAA8B,IAE9B,MAA4B,iBAArB,MAAAD,OAAAA,EAAAA,EAASC,SAChBA,EAAUD,EAAQC,SACU,QAArB,MAAAD,OAAA,EAAAA,EAASC,UAAyC,SAArB,MAAAD,OAAA,EAAAA,EAASC,YACnCA,OAAA,GAGPT,EAAMP,IAAIc,EAAO,IACjBC,EACHC,QAAAA,GACH,GAIRZ,SAAA,CAAAA,EACDa,EAACC,EAAY,CAAAX,MAAAA,EAAcD,UAAAA,MAAsB"}
1	+ {"version":3,"file":"toastContext.js","sources":["../../../../src/components/toast/toastContext.tsx"],"sourcesContent":["import { ToastQueue } from \"@react-stately/toast\";\nimport React, { createContext, useContext, useState, type FC } from \"react\";\nimport { type WithChildren } from \"../../core/types.js\";\nimport { ToastRegion } from \"./ToastRegion.js\";\nimport { ToastContent, ToastOptions } from \"./types.js\";\n\ninterface ToastContextProviderProps extends WithChildren {\n maxVisibleToasts?: number;\n /*\n @default \"center\"\n */\n placement?: \"center\" \| \"left\";\n}\n\ntype ToastContext = {\n add: (toast: ToastContent, options?: ToastOptions) => string;\n};\n\nconst context = createContext<ToastContext>({\n add: () => {\n return \"missing-provider\";\n },\n});\n\nexport const useToast = (): ToastContext => useContext(context);\n\nexport const ToastProvider: FC<ToastContextProviderProps> = ({\n children,\n maxVisibleToasts = 5,\n placement = \"center\",\n}) => {\n const [queue] = useState(new ToastQueue<ToastContent>({ maxVisibleToasts, hasExitAnimation: true }));\n\n return (\n <context.Provider\n value={{\n add: (toast: ToastContent, options?: ToastOptions) => {\n let timeout: number \| undefined = 5000;\n\n if (typeof options?.timeout === \"number\") {\n timeout = options.timeout as number;\n } else if (options?.timeout === null \|\| options?.timeout === \"off\") {\n timeout = undefined;\n }\n\n return queue.add(toast, {\n ...options,\n timeout,\n });\n },\n }}\n >\n {children}\n <ToastRegion queue={queue} placement={placement} />\n </context.Provider>\n );\n};\n"],"names":["context","createContext","add","useToast","useContext","ToastProvider","children","maxVisibleToasts","placement","queue","useState","ToastQueue","hasExitAnimation","jsxs","Provider","value","toast","options","timeout","jsx","ToastRegion"],"mappings":"uNAkBA,MAAMA,EAAUC,EAA4B,CACxCC,IAAK,IACM,qBAIFC,EAAW,IAAoBC,EAAWJ,GAE1CK,EAA+C,EACxDC,SAAAA,EACAC,iBAAAA,EAAmB,EACnBC,UAAAA,EAAY,aAEN,MAACC,GAASC,EAAS,IAAIC,EAAyB,CAAEJ,iBAAAA,EAAkBK,kBAAkB,KAGxF,OAAAC,EAACb,EAAQc,SAAR,CACGC,MAAO,CACHb,IAAK,CAACc,EAAqBC,KACvB,IAAIC,EAA8B,IAE9B,MAA4B,iBAArB,MAAAD,OAAAA,EAAAA,EAASC,SAChBA,EAAUD,EAAQC,SACU,QAArB,MAAAD,OAAA,EAAAA,EAASC,UAAyC,SAArB,MAAAD,OAAA,EAAAA,EAASC,YACnCA,OAAA,GAGPT,EAAMP,IAAIc,EAAO,IACjBC,EACHC,QAAAA,GACH,GAIRZ,SAAA,CAAAA,EACDa,EAACC,EAAY,CAAAX,MAAAA,EAAcD,UAAAA,MAAsB"}

package/build/es/components/toggle-switch/ToggleSlider.d.ts ADDED Viewed

@@ -0,0 +1,12 @@
+import { FC } from 'react';
+import { Density, WithChildren } from '../../core/types.js';
+interface Props extends WithChildren {
+    labels: [string, string];
+    onToggle: (value: string) => void;
+    defaultValue?: string;
+    className?: string;
+    hideLegend?: boolean;
+    density?: Density;
+}
+export declare const ToggleSlider: FC<Props>;
+export {};

package/build/es/components/toggle-switch/ToggleSlider.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsxs as e,jsx as l}from"react/jsx-runtime";import{c as s}from"../../../clsx-BeLtu-UY.js";import{useState as r,useRef as o,Fragment as i}from"react";import"../../hooks/useScreen/useScreen.js";import{useId as a}from"../../hooks/useId/useId.js";import{useSwipeGesture as t}from"../../hooks/useSwipeGesture/useSwipeGesture.js";import{usePillStyles as d}from"./usePillStyles.js";const n=({children:n,labels:g,className:c="",onToggle:u,defaultValue:m,hideLegend:p=!1,density:j,...k})=>{const[h,_]=r(m||g[0]),f=a("jkl-toggle-slider"),N=a("jkl-toggle-slider-legend"),S=o(null),b=h===g[1],y=d(S,b,[j]),{gestureHandlers:v}=t({onClick:e=>{const{value:l}=e.currentTarget;_(l),u(l)},onChange:(e,l)=>{_(l?g[1]:g[0]),u(l?g[1]:g[0])}}),{onClick:x,...C}=v;return"production"!==process.env.NODE_ENV&&console.error("WARNING: ToggleSlider component has been deprecated and will be removed in some future version of the library"),e("fieldset",{...k,className:s("jkl-toggle-slider",c),"aria-labelledby":N,"data-testid":"jkl-toggle-slider","data-density":j,children:[l("div",{id:N,className:s("jkl-toggle-slider__legend",{"jkl-toggle-slider__legend--sr-only":p}),children:n}),e("div",{className:"jkl-toggle-slider__inputs",...C,children:[g.map((r=>e(i,{children:[l("input",{className:"jkl-toggle-slider__input",type:"radio",value:r,checked:r===h,name:f,id:`${r}-${f}`,onClick:x,onChange:()=>{}}),l("label",{className:s("jkl-toggle-slider__label",{"jkl-toggle-slider__label--selected":r===h}),ref:r===h?S:void 0,htmlFor:`${r}-${f}`,children:r})]},r))),l("span",{className:"jkl-toggle-slider__pill",style:y,"aria-hidden":!0})]})]})};export{n as ToggleSlider};
+import{jsxs as e,jsx as l}from"react/jsx-runtime";import{c as s}from"../../../clsx-BeLtu-UY.js";import{useState as r,useRef as a,Fragment as i}from"react";import{useId as o}from"../../hooks/useId/useId.js";import{useSwipeGesture as t}from"../../hooks/useSwipeGesture/useSwipeGesture.js";import{usePillStyles as d}from"./usePillStyles.js";const n=({children:n,labels:g,className:c="",onToggle:u,defaultValue:m,hideLegend:p=!1,density:j,...k})=>{const[h,_]=r(m||g[0]),f=o("jkl-toggle-slider"),N=o("jkl-toggle-slider-legend"),b=a(null),y=h===g[1],v=d(b,y,[j]),{gestureHandlers:S}=t({onClick:e=>{const{value:l}=e.currentTarget;_(l),u(l)},onChange:(e,l)=>{_(l?g[1]:g[0]),u(l?g[1]:g[0])}}),{onClick:x,...C}=S;return"production"!==process.env.NODE_ENV&&console.error("WARNING: ToggleSlider component has been deprecated and will be removed in some future version of the library"),e("fieldset",{...k,className:s("jkl-toggle-slider",c),"aria-labelledby":N,"data-testid":"jkl-toggle-slider","data-density":j,children:[l("div",{id:N,className:s("jkl-toggle-slider__legend",{"jkl-toggle-slider__legend--sr-only":p}),children:n}),e("div",{className:"jkl-toggle-slider__inputs",...C,children:[g.map((r=>e(i,{children:[l("input",{className:"jkl-toggle-slider__input",type:"radio",value:r,checked:r===h,name:f,id:`${r}-${f}`,onClick:x,onChange:()=>{}}),l("label",{className:s("jkl-toggle-slider__label",{"jkl-toggle-slider__label--selected":r===h}),ref:r===h?b:void 0,htmlFor:`${r}-${f}`,children:r})]},r))),l("span",{className:"jkl-toggle-slider__pill",style:v,"aria-hidden":!0})]})]})};export{n as ToggleSlider};
 //# sourceMappingURL=ToggleSlider.js.map

package/build/es/components/toggle-switch/ToggleSlider.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ToggleSlider.js","sources":["../../../../src/components/toggle-switch/ToggleSlider.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { ~~useState~~, Fragment, ~~useRef~~, FC, ~~MouseEventHandler~~ } from \"react\";\nimport { Density, WithChildren } from \"~~../..\~~";\nimport { useId, useSwipeGesture } from \"../../hooks\";\nimport { ~~type~~ ToggleChangeHandler } from \"./ToggleSwitch\";\nimport { usePillStyles } from \"./usePillStyles\";\n\ninterface Props extends WithChildren {\n labels: [string, string];\n onToggle: (value: string) => void;\n defaultValue?: string;\n className?: string;\n hideLegend?: boolean;\n density?: Density;\n}\n\nexport const ToggleSlider: FC<Props> = ({\n children,\n labels,\n className = \"\",\n onToggle,\n defaultValue,\n hideLegend = false,\n density,\n ...rest\n}) => {\n const [currentLabel, setCurrentLabel] = useState(defaultValue \|\| labels[0]);\n const id = useId(\"jkl-toggle-slider\");\n const legendId = useId(\"jkl-toggle-slider-legend\");\n const activeRef = useRef<HTMLLabelElement>(null);\n\n const shouldTransform = currentLabel === labels[1];\n const pillStyles = usePillStyles(activeRef, shouldTransform, [density]);\n\n const handleChange: ToggleChangeHandler<HTMLElement> = (_, pressed) => {\n setCurrentLabel(pressed ? labels[1] : labels[0]);\n onToggle(pressed ? labels[1] : labels[0]);\n };\n\n const handleClick: MouseEventHandler<HTMLInputElement> = (event) => {\n const { value } = event.currentTarget;\n setCurrentLabel(value);\n onToggle(value);\n };\n\n const { gestureHandlers } = useSwipeGesture<HTMLDivElement>({ onClick: handleClick, onChange: handleChange });\n const { onClick, ...swipeHandlers } = gestureHandlers;\n\n if (process.env.NODE_ENV !== \"production\") {\n console.error(\n \"WARNING: ToggleSlider component has been deprecated and will be removed in some future version of the library\",\n );\n }\n\n return (\n <fieldset\n {...rest}\n className={clsx(\"jkl-toggle-slider\", className)}\n aria-labelledby={legendId}\n data-testid=\"jkl-toggle-slider\"\n data-density={density}\n >\n <div\n id={legendId}\n className={clsx(\"jkl-toggle-slider__legend\", {\n \"jkl-toggle-slider__legend--sr-only\": hideLegend,\n })}\n >\n {children}\n </div>\n <div className=\"jkl-toggle-slider__inputs\" {...swipeHandlers}>\n {labels.map((label) => (\n <Fragment key={label}>\n <input\n className=\"jkl-toggle-slider__input\"\n type=\"radio\"\n value={label}\n checked={label === currentLabel}\n name={id}\n id={`${label}-${id}`}\n onClick={onClick}\n onChange={() => {}}\n />\n <label\n className={clsx(\"jkl-toggle-slider__label\", {\n \"jkl-toggle-slider__label--selected\": label === currentLabel,\n })}\n ref={label === currentLabel ? activeRef : undefined}\n htmlFor={`${label}-${id}`}\n >\n {label}\n </label>\n </Fragment>\n ))}\n <span className=\"jkl-toggle-slider__pill\" style={pillStyles} aria-hidden />\n </div>\n </fieldset>\n );\n};\n"],"names":["ToggleSlider","children","labels","className","onToggle","defaultValue","hideLegend","density","rest","currentLabel","setCurrentLabel","useState","id","useId","legendId","activeRef","useRef","shouldTransform","pillStyles","usePillStyles","gestureHandlers","useSwipeGesture","onClick","event","value","currentTarget","onChange","_","pressed","swipeHandlers","process","env","NODE_ENV","console","error","jsxs","clsx","jsx","map","label","Fragment","type","checked","name","ref","htmlFor","style"],"mappings":"~~6XAgBO~~,MAAMA,EAA0B,EACnCC,SAAAA,EACAC,OAAAA,EACAC,UAAAA,EAAY,GACZC,SAAAA,EACAC,aAAAA,EACAC,WAAAA,GAAa,EACbC,QAAAA,KACGC,MAEG,MAACC,EAAcC,GAAmBC,EAASN,GAAgBH,EAAO,IAClEU,EAAKC,EAAM,qBACXC,EAAWD,EAAM,4BACjBE,EAAYC,EAAyB,MAErCC,EAAkBR,IAAiBP,EAAO,GAC1CgB,EAAaC,EAAcJ,EAAWE,EAAiB,CAACV,KAatDa,gBAAAA,GAAoBC,EAAgC,CAAEC,QANJC,IAChD,MAAEC,MAAAA,GAAUD,EAAME,cACxBf,EAAgBc,GAChBpB,EAASoB,EAAK,EAGkEE,SAX7B,CAACC,EAAGC,KACvDlB,EAAgBkB,EAAU1B,EAAO,GAAKA,EAAO,IAC7CE,EAASwB,EAAU1B,EAAO,GAAKA,EAAO,GAAE,KAUpCoB,QAAAA,KAAYO,GAAkBT,EAElC,MAAyB,eAAzBU,QAAQC,IAAIC,UACJC,QAAAC,MACJ,iHAKJC,EAAC,WAAA,IACO3B,EACJL,UAAWiC,EAAK,oBAAqBjC,GACrC,kBAAiBW,EACjB,cAAY,oBACZ,eAAcP,EAEdN,SAAA,CAAAoC,EAAC,MAAA,CACGzB,GAAIE,EACJX,UAAWiC,EAAK,4BAA6B,CACzC,qCAAsC9B,IAGzCL,SAAAA,IAEJkC,EAAA,MAAA,CAAIhC,UAAU,+BAAgC0B,EAC1C5B,SAAA,CAAAC,EAAOoC,KAAKC,GACTJ,EAACK,EACG,CAAAvC,SAAA,CAAAoC,EAAC,QAAA,CACGlC,UAAU,2BACVsC,KAAK,QACLjB,MAAOe,EACPG,QAASH,IAAU9B,EACnBkC,KAAM/B,EACNA,GAAI,GAAG2B,KAAS3B,IAChBU,QAAAA,EACAI,SAAU,SAEdW,EAAC,QAAA,CACGlC,UAAWiC,EAAK,2BAA4B,CACxC,qCAAsCG,IAAU9B,IAEpDmC,IAAKL,IAAU9B,EAAeM,OAAY,EAC1C8B,QAAS,GAAGN,KAAS3B,IAEpBX,SAAAsC,MAlBMA,OAsBlB,OAAK,CAAApC,UAAU,0BAA0B2C,MAAO5B,EAAY,eAAW,SAC5E"}
1	+ {"version":3,"file":"ToggleSlider.js","sources":["../../../../src/components/toggle-switch/ToggleSlider.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { FC, Fragment, MouseEventHandler, useRef, useState } from \"react\";\nimport { Density, WithChildren } from \"../../core/types.js\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { useSwipeGesture } from \"../../hooks/useSwipeGesture/useSwipeGesture.js\";\nimport { ToggleChangeHandler } from \"./ToggleSwitch.js\";\nimport { usePillStyles } from \"./usePillStyles.js\";\n\ninterface Props extends WithChildren {\n labels: [string, string];\n onToggle: (value: string) => void;\n defaultValue?: string;\n className?: string;\n hideLegend?: boolean;\n density?: Density;\n}\n\nexport const ToggleSlider: FC<Props> = ({\n children,\n labels,\n className = \"\",\n onToggle,\n defaultValue,\n hideLegend = false,\n density,\n ...rest\n}) => {\n const [currentLabel, setCurrentLabel] = useState(defaultValue \|\| labels[0]);\n const id = useId(\"jkl-toggle-slider\");\n const legendId = useId(\"jkl-toggle-slider-legend\");\n const activeRef = useRef<HTMLLabelElement>(null);\n\n const shouldTransform = currentLabel === labels[1];\n const pillStyles = usePillStyles(activeRef, shouldTransform, [density]);\n\n const handleChange: ToggleChangeHandler<HTMLElement> = (_, pressed) => {\n setCurrentLabel(pressed ? labels[1] : labels[0]);\n onToggle(pressed ? labels[1] : labels[0]);\n };\n\n const handleClick: MouseEventHandler<HTMLInputElement> = (event) => {\n const { value } = event.currentTarget;\n setCurrentLabel(value);\n onToggle(value);\n };\n\n const { gestureHandlers } = useSwipeGesture<HTMLDivElement>({ onClick: handleClick, onChange: handleChange });\n const { onClick, ...swipeHandlers } = gestureHandlers;\n\n if (process.env.NODE_ENV !== \"production\") {\n console.error(\n \"WARNING: ToggleSlider component has been deprecated and will be removed in some future version of the library\",\n );\n }\n\n return (\n <fieldset\n {...rest}\n className={clsx(\"jkl-toggle-slider\", className)}\n aria-labelledby={legendId}\n data-testid=\"jkl-toggle-slider\"\n data-density={density}\n >\n <div\n id={legendId}\n className={clsx(\"jkl-toggle-slider__legend\", {\n \"jkl-toggle-slider__legend--sr-only\": hideLegend,\n })}\n >\n {children}\n </div>\n <div className=\"jkl-toggle-slider__inputs\" {...swipeHandlers}>\n {labels.map((label) => (\n <Fragment key={label}>\n <input\n className=\"jkl-toggle-slider__input\"\n type=\"radio\"\n value={label}\n checked={label === currentLabel}\n name={id}\n id={`${label}-${id}`}\n onClick={onClick}\n onChange={() => {}}\n />\n <label\n className={clsx(\"jkl-toggle-slider__label\", {\n \"jkl-toggle-slider__label--selected\": label === currentLabel,\n })}\n ref={label === currentLabel ? activeRef : undefined}\n htmlFor={`${label}-${id}`}\n >\n {label}\n </label>\n </Fragment>\n ))}\n <span className=\"jkl-toggle-slider__pill\" style={pillStyles} aria-hidden />\n </div>\n </fieldset>\n );\n};\n"],"names":["ToggleSlider","children","labels","className","onToggle","defaultValue","hideLegend","density","rest","currentLabel","setCurrentLabel","useState","id","useId","legendId","activeRef","useRef","shouldTransform","pillStyles","usePillStyles","gestureHandlers","useSwipeGesture","onClick","event","value","currentTarget","onChange","_","pressed","swipeHandlers","process","env","NODE_ENV","console","error","jsxs","clsx","jsx","map","label","Fragment","type","checked","name","ref","htmlFor","style"],"mappings":"kVAiBO,MAAMA,EAA0B,EACnCC,SAAAA,EACAC,OAAAA,EACAC,UAAAA,EAAY,GACZC,SAAAA,EACAC,aAAAA,EACAC,WAAAA,GAAa,EACbC,QAAAA,KACGC,MAEG,MAACC,EAAcC,GAAmBC,EAASN,GAAgBH,EAAO,IAClEU,EAAKC,EAAM,qBACXC,EAAWD,EAAM,4BACjBE,EAAYC,EAAyB,MAErCC,EAAkBR,IAAiBP,EAAO,GAC1CgB,EAAaC,EAAcJ,EAAWE,EAAiB,CAACV,KAatDa,gBAAAA,GAAoBC,EAAgC,CAAEC,QANJC,IAChD,MAAEC,MAAAA,GAAUD,EAAME,cACxBf,EAAgBc,GAChBpB,EAASoB,EAAK,EAGkEE,SAX7B,CAACC,EAAGC,KACvDlB,EAAgBkB,EAAU1B,EAAO,GAAKA,EAAO,IAC7CE,EAASwB,EAAU1B,EAAO,GAAKA,EAAO,GAAE,KAUpCoB,QAAAA,KAAYO,GAAkBT,EAElC,MAAyB,eAAzBU,QAAQC,IAAIC,UACJC,QAAAC,MACJ,iHAKJC,EAAC,WAAA,IACO3B,EACJL,UAAWiC,EAAK,oBAAqBjC,GACrC,kBAAiBW,EACjB,cAAY,oBACZ,eAAcP,EAEdN,SAAA,CAAAoC,EAAC,MAAA,CACGzB,GAAIE,EACJX,UAAWiC,EAAK,4BAA6B,CACzC,qCAAsC9B,IAGzCL,SAAAA,IAEJkC,EAAA,MAAA,CAAIhC,UAAU,+BAAgC0B,EAC1C5B,SAAA,CAAAC,EAAOoC,KAAKC,GACTJ,EAACK,EACG,CAAAvC,SAAA,CAAAoC,EAAC,QAAA,CACGlC,UAAU,2BACVsC,KAAK,QACLjB,MAAOe,EACPG,QAASH,IAAU9B,EACnBkC,KAAM/B,EACNA,GAAI,GAAG2B,KAAS3B,IAChBU,QAAAA,EACAI,SAAU,SAEdW,EAAC,QAAA,CACGlC,UAAWiC,EAAK,2BAA4B,CACxC,qCAAsCG,IAAU9B,IAEpDmC,IAAKL,IAAU9B,EAAeM,OAAY,EAC1C8B,QAAS,GAAGN,KAAS3B,IAEpBX,SAAAsC,MAlBMA,OAsBlB,OAAK,CAAApC,UAAU,0BAA0B2C,MAAO5B,EAAY,eAAW,SAC5E"}

package/build/es/components/toggle-switch/ToggleSwitch.d.ts ADDED Viewed

@@ -0,0 +1,32 @@
+import { default as React, ButtonHTMLAttributes } from 'react';
+import { Density } from '../../core/types.js';
+import { SwipeChangeHandler } from '../../hooks/index.js';
+export type ToggleChangeHandler<T extends HTMLElement> = SwipeChangeHandler<T>;
+export type ToggleProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onChange"> & {
+    density?: Density;
+    /**
+     * Handler for å håndtere toggling av knappen. Tar inn en boolean som indikerer om knappen er er togglet på
+     * eller ikke, samt en MouseEvent eller en PointerEvent avhengig av om togglingen skjedde via klikk eller swipe.
+     * @example
+     * ```js
+     * function handleChange(event, pressed) {
+     *    console.log(`ToggleSwitch er ${pressed ? "på" : "av"}`);
+     * }
+     * ```
+     */
+    onChange?: ToggleChangeHandler<HTMLButtonElement>;
+};
+export declare const ToggleSwitch: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onChange"> & {
+    density?: Density | undefined;
+    /**
+     * Handler for å håndtere toggling av knappen. Tar inn en boolean som indikerer om knappen er er togglet på
+     * eller ikke, samt en MouseEvent eller en PointerEvent avhengig av om togglingen skjedde via klikk eller swipe.
+     * @example
+     * ```js
+     * function handleChange(event, pressed) {
+     *    console.log(`ToggleSwitch er ${pressed ? "på" : "av"}`);
+     * }
+     * ```
+     */
+    onChange?: ToggleChangeHandler<HTMLButtonElement> | undefined;
+} & React.RefAttributes<HTMLButtonElement>>;

package/build/es/components/toggle-switch/ToggleSwitch.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ToggleSwitch.js","sources":["../../../../src/components/toggle-switch/ToggleSwitch.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { type ButtonHTMLAttributes, type MouseEventHandler, forwardRef } from \"react\";\nimport { Density } from \"~~../..\~~";\nimport { ~~useId~~, useSwipeGesture, ~~type~~ ~~SwipeChangeHandler~~ } from \"../../hooks\";\nimport { CheckIcon } from \"../icon\";\n\nexport type ToggleChangeHandler<T extends HTMLElement> = SwipeChangeHandler<T>;\n\nexport type ToggleProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, \"onChange\"> & {\n density?: Density;\n /*\n Handler for å håndtere toggling av knappen. Tar inn en boolean som indikerer om knappen er er togglet på\n * eller ikke, samt en MouseEvent eller en PointerEvent avhengig av om togglingen skjedde via klikk eller swipe.\n * @example\n * ```js\n * function handleChange(event, pressed) {\n * console.log(`ToggleSwitch er ${pressed ? \"på\" : \"av\"}`);\n * }\n * ```\n */\n onChange?: ToggleChangeHandler<HTMLButtonElement>;\n};\n\nexport const ToggleSwitch = forwardRef<HTMLButtonElement, ToggleProps>(\n ({ \"aria-pressed\": ariaPressed = false, children, className, density, id, onChange, ...rest }, ref) => {\n const uid = useId(id \|\| \"jkl-toggle-switch\", { generateSuffix: !id });\n const [pressed, setPressed] = React.useState(ariaPressed);\n React.useEffect(() => {\n setPressed(ariaPressed);\n }, [ariaPressed]);\n\n const { onClick, onPointerCancel, onPointerDown, onPointerMove, onPointerUp, ...buttonProps } = rest;\n\n const handleClick: MouseEventHandler<HTMLButtonElement> = (event) => {\n setPressed(!pressed);\n onChange?.(event, !pressed);\n onClick?.(event);\n };\n\n const handleChange: ToggleChangeHandler<HTMLButtonElement> = (event, toggleTo) => {\n if (toggleTo !== pressed) {\n setPressed(toggleTo);\n onChange?.(event, toggleTo);\n }\n };\n\n const { gestureHandlers } = useSwipeGesture({\n onClick: handleClick,\n onChange: handleChange,\n onPointerCancel,\n onPointerDown,\n onPointerMove,\n onPointerUp,\n });\n\n return (\n <button\n className={clsx(\"jkl-toggle-switch\", className)}\n id={uid}\n ref={ref}\n aria-pressed={pressed}\n data-density={density}\n {...buttonProps}\n {...(buttonProps.disabled ? {} : gestureHandlers)}\n >\n {children}\n <div aria-hidden className=\"jkl-toggle-switch-widget\">\n <div className=\"jkl-toggle-switch-widget__slider\">\n <div className=\"jkl-toggle-switch-widget__knob\" />\n <CheckIcon variant=\"small\" bold className=\"jkl-toggle-switch-widget__indicator\" />\n </div>\n </div>\n </button>\n );\n },\n);\nToggleSwitch.displayName = \"ToggleSwitch\";\n"],"names":["ToggleSwitch","forwardRef","ariaPressed","children","className","density","id","onChange","rest","ref","uid","useId","generateSuffix","pressed","setPressed","React","useState","useEffect","onClick","onPointerCancel","onPointerDown","onPointerMove","onPointerUp","buttonProps","gestureHandlers","useSwipeGesture","event","toggleTo","jsxs","clsx","disabled","jsx","CheckIcon","variant","bold","displayName"],"mappings":"~~4oDAuBO~~,MAAMA,EAAeC,GACxB,EAAG,eAAgBC,GAAc,EAAOC,SAAAA,EAAUC,UAAAA,EAAWC,QAAAA,EAASC,GAAAA,EAAIC,SAAAA,KAAaC,GAAQC,KACrF,MAAAC,EAAMC,EAAML,GAAM,oBAAqB,CAAEM,gBAAiBN,KACzDO,EAASC,GAAcC,EAAMC,SAASd,GAC7Ca,EAAME,WAAU,KACZH,EAAWZ,EAAW,GACvB,CAACA,IAEE,MAAEgB,QAAAA,EAASC,gBAAAA,EAAiBC,cAAAA,EAAeC,cAAAA,EAAeC,YAAAA,KAAgBC,GAAgBf,GAexFgB,gBAAAA,GAAoBC,EAAgB,CACxCP,QAduDQ,IACvDZ,GAAYD,GACD,MAAAN,GAAAA,EAAAmB,GAAQb,GACnB,MAAAK,GAAAA,EAAUQ,EAAAA,EAYVnB,SATyD,CAACmB,EAAOC,KAC7DA,IAAad,IACbC,EAAWa,GACX,MAAApB,GAAAA,EAAWmB,EAAOC,GAAAA,EAOtBR,gBAAAA,EACAC,cAAAA,EACAC,cAAAA,EACAC,YAAAA,IAIA,OAAAM,EAAC,SAAA,CACGxB,UAAWyB,EAAK,oBAAqBzB,GACrCE,GAAII,EACJD,IAAAA,EACA,eAAcI,EACd,eAAcR,KACVkB,KACCA,EAAYO,SAAW,CAAA,EAAKN,EAEhCrB,SAAA,CAAAA,EACD4B,EAAC,OAAI,eAAW,EAAC3B,UAAU,2BACvBD,SAAAyB,EAAC,MAAI,CAAAxB,UAAU,mCACXD,SAAA,CAAC4B,EAAA,MAAA,CAAI3B,UAAU,qCACd4B,EAAU,CAAAC,QAAQ,QAAQC,MAAI,EAAC9B,UAAU,+CAElD,IAKhBJ,EAAamC,YAAc"}
1	+ {"version":3,"file":"ToggleSwitch.js","sources":["../../../../src/components/toggle-switch/ToggleSwitch.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { type ButtonHTMLAttributes, type MouseEventHandler, forwardRef } from \"react\";\nimport { Density } from \"../../core/types.js\";\nimport { SwipeChangeHandler, useSwipeGesture } from \"../../hooks/index.js\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { CheckIcon } from \"../icon/index.js\";\n\nexport type ToggleChangeHandler<T extends HTMLElement> = SwipeChangeHandler<T>;\n\nexport type ToggleProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, \"onChange\"> & {\n density?: Density;\n /*\n Handler for å håndtere toggling av knappen. Tar inn en boolean som indikerer om knappen er er togglet på\n * eller ikke, samt en MouseEvent eller en PointerEvent avhengig av om togglingen skjedde via klikk eller swipe.\n * @example\n * ```js\n * function handleChange(event, pressed) {\n * console.log(`ToggleSwitch er ${pressed ? \"på\" : \"av\"}`);\n * }\n * ```\n */\n onChange?: ToggleChangeHandler<HTMLButtonElement>;\n};\n\nexport const ToggleSwitch = forwardRef<HTMLButtonElement, ToggleProps>(\n ({ \"aria-pressed\": ariaPressed = false, children, className, density, id, onChange, ...rest }, ref) => {\n const uid = useId(id \|\| \"jkl-toggle-switch\", { generateSuffix: !id });\n const [pressed, setPressed] = React.useState(ariaPressed);\n React.useEffect(() => {\n setPressed(ariaPressed);\n }, [ariaPressed]);\n\n const { onClick, onPointerCancel, onPointerDown, onPointerMove, onPointerUp, ...buttonProps } = rest;\n\n const handleClick: MouseEventHandler<HTMLButtonElement> = (event) => {\n setPressed(!pressed);\n onChange?.(event, !pressed);\n onClick?.(event);\n };\n\n const handleChange: ToggleChangeHandler<HTMLButtonElement> = (event, toggleTo) => {\n if (toggleTo !== pressed) {\n setPressed(toggleTo);\n onChange?.(event, toggleTo);\n }\n };\n\n const { gestureHandlers } = useSwipeGesture({\n onClick: handleClick,\n onChange: handleChange,\n onPointerCancel,\n onPointerDown,\n onPointerMove,\n onPointerUp,\n });\n\n return (\n <button\n className={clsx(\"jkl-toggle-switch\", className)}\n id={uid}\n ref={ref}\n aria-pressed={pressed}\n data-density={density}\n {...buttonProps}\n {...(buttonProps.disabled ? {} : gestureHandlers)}\n >\n {children}\n <div aria-hidden className=\"jkl-toggle-switch-widget\">\n <div className=\"jkl-toggle-switch-widget__slider\">\n <div className=\"jkl-toggle-switch-widget__knob\" />\n <CheckIcon variant=\"small\" bold className=\"jkl-toggle-switch-widget__indicator\" />\n </div>\n </div>\n </button>\n );\n },\n);\nToggleSwitch.displayName = \"ToggleSwitch\";\n"],"names":["ToggleSwitch","forwardRef","ariaPressed","children","className","density","id","onChange","rest","ref","uid","useId","generateSuffix","pressed","setPressed","React","useState","useEffect","onClick","onPointerCancel","onPointerDown","onPointerMove","onPointerUp","buttonProps","gestureHandlers","useSwipeGesture","event","toggleTo","jsxs","clsx","disabled","jsx","CheckIcon","variant","bold","displayName"],"mappings":"4oDAwBO,MAAMA,EAAeC,GACxB,EAAG,eAAgBC,GAAc,EAAOC,SAAAA,EAAUC,UAAAA,EAAWC,QAAAA,EAASC,GAAAA,EAAIC,SAAAA,KAAaC,GAAQC,KACrF,MAAAC,EAAMC,EAAML,GAAM,oBAAqB,CAAEM,gBAAiBN,KACzDO,EAASC,GAAcC,EAAMC,SAASd,GAC7Ca,EAAME,WAAU,KACZH,EAAWZ,EAAW,GACvB,CAACA,IAEE,MAAEgB,QAAAA,EAASC,gBAAAA,EAAiBC,cAAAA,EAAeC,cAAAA,EAAeC,YAAAA,KAAgBC,GAAgBf,GAexFgB,gBAAAA,GAAoBC,EAAgB,CACxCP,QAduDQ,IACvDZ,GAAYD,GACD,MAAAN,GAAAA,EAAAmB,GAAQb,GACnB,MAAAK,GAAAA,EAAUQ,EAAAA,EAYVnB,SATyD,CAACmB,EAAOC,KAC7DA,IAAad,IACbC,EAAWa,GACX,MAAApB,GAAAA,EAAWmB,EAAOC,GAAAA,EAOtBR,gBAAAA,EACAC,cAAAA,EACAC,cAAAA,EACAC,YAAAA,IAIA,OAAAM,EAAC,SAAA,CACGxB,UAAWyB,EAAK,oBAAqBzB,GACrCE,GAAII,EACJD,IAAAA,EACA,eAAcI,EACd,eAAcR,KACVkB,KACCA,EAAYO,SAAW,CAAA,EAAKN,EAEhCrB,SAAA,CAAAA,EACD4B,EAAC,OAAI,eAAW,EAAC3B,UAAU,2BACvBD,SAAAyB,EAAC,MAAI,CAAAxB,UAAU,mCACXD,SAAA,CAAC4B,EAAA,MAAA,CAAI3B,UAAU,qCACd4B,EAAU,CAAAC,QAAQ,QAAQC,MAAI,EAAC9B,UAAU,+CAElD,IAKhBJ,EAAamC,YAAc"}

package/build/es/components/toggle-switch/index.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export { ToggleSwitch, type ToggleChangeHandler } from './ToggleSwitch.js';
2	+ export { ToggleSlider } from './ToggleSlider.js';

package/build/es/components/tooltip/PopupTip.d.ts ADDED Viewed

@@ -0,0 +1,13 @@
+import { FC, ReactNode, HTMLProps } from 'react';
+import { TooltipProps } from './Tooltip.js';
+export interface PopupTipProps extends Omit<TooltipProps, "triggerOn" | "children"> {
+    /**
+     * Innholdet i tooltipet som vises
+     */
+    content: ReactNode;
+    /**
+     * Eventuelle props du vil sette på trigger-knappen for tooltipet
+     */
+    triggerProps?: Omit<HTMLProps<HTMLButtonElement>, "children" | "type">;
+}
+export declare const PopupTip: FC<PopupTipProps>;

package/build/es/components/tooltip/PopupTip.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PopupTip.js","sources":["../../../../src/components/tooltip/PopupTip.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { useState, type FC, type ReactNode, HTMLProps, FocusEventHandler } from \"react\";\nimport { QuestionIcon } from \"../icon\";\nimport { Tooltip, type TooltipProps } from \"./Tooltip\";\nimport { TooltipContent } from \"./TooltipContent\";\nimport { TooltipTrigger } from \"./TooltipTrigger\";\n\nexport interface PopupTipProps extends Omit<TooltipProps, \"triggerOn\" \| \"children\"> {\n /*\n Innholdet i tooltipet som vises\n /\n content: ReactNode;\n /\n Eventuelle props du vil sette på trigger-knappen for tooltipet\n */\n triggerProps?: Omit<HTMLProps<HTMLButtonElement>, \"children\" \| \"type\">;\n}\n\nexport const PopupTip: FC<PopupTipProps> = ({ content, triggerProps, ...tooltipProps }) => {\n const [isBold, setIsBold] = useState(false);\n\n const handleFocus: FocusEventHandler<HTMLButtonElement> = (event) => {\n setIsBold(true);\n triggerProps?.onFocus?.(event);\n };\n const handleBlur: FocusEventHandler<HTMLButtonElement> = (event) => {\n setIsBold(false);\n triggerProps?.onBlur?.(event);\n };\n\n return (\n <Tooltip triggerOn=\"click\" {...tooltipProps}>\n <TooltipTrigger>\n <button\n {...triggerProps}\n onFocus={handleFocus}\n onBlur={handleBlur}\n type=\"button\"\n className={clsx(\"jkl-tooltip-question-button\", triggerProps?.className)}\n data-testid=\"jkl-tooltip-question-button\"\n >\n <QuestionIcon variant=\"inherit\" bold={isBold} />\n <span className=\"jkl-sr-only\">Vis hjelpetekst</span>\n </button>\n </TooltipTrigger>\n <TooltipContent>{content}</TooltipContent>\n </Tooltip>\n );\n};\n"],"names":["PopupTip","content","triggerProps","tooltipProps","isBold","setIsBold","useState","jsxs","Tooltip","triggerOn","children","jsx","TooltipTrigger","onFocus","event","_a","call","onBlur","type","className","clsx","QuestionIcon","variant","bold","TooltipContent"],"mappings":"4mDAkBO,MAAMA,EAA8B,EAAGC,QAAAA,EAASC,aAAAA,KAAiBC,MACpE,MAAOC,EAAQC,GAAaC,GAAS,GAYhC,OAAAC,EAAAC,EAAA,CAAQC,UAAU,WAAYN,EAC3BO,SAAA,CAAAC,EAACC,EACG,CAAAF,SAAAH,EAAC,SAAA,IACOL,EACJW,QAd2CC,UACvDT,GAAU,GACV,OAAAU,EAAA,MAAAb,OAAAA,EAAAA,EAAcW,UAAdE,EAAAC,KAAAd,EAAwBY,EAAAA,EAaZG,OAX0CH,UACtDT,GAAU,GACV,OAAAU,EAAA,MAAAb,OAAAA,EAAAA,EAAce,SAAdF,EAAAC,KAAAd,EAAuBY,EAAAA,EAUXI,KAAK,SACLC,UAAWC,EAAK,8BAA+B,MAAAlB,OAAA,EAAAA,EAAciB,WAC7D,cAAY,8BAEZT,SAAA,CAAAC,EAACU,EAAa,CAAAC,QAAQ,UAAUC,KAAMnB,IACrCO,EAAA,OAAA,CAAKQ,UAAU,cAAcT,SAAe,yBAGrDC,EAACa,GAAgBd,SAAQT,MAC7B"}
1	+ {"version":3,"file":"PopupTip.js","sources":["../../../../src/components/tooltip/PopupTip.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { useState, type FC, type ReactNode, HTMLProps, FocusEventHandler } from \"react\";\nimport { QuestionIcon } from \"../icon/index.js\";\nimport { Tooltip, type TooltipProps } from \"./Tooltip.js\";\nimport { TooltipContent } from \"./TooltipContent.js\";\nimport { TooltipTrigger } from \"./TooltipTrigger.js\";\n\nexport interface PopupTipProps extends Omit<TooltipProps, \"triggerOn\" \| \"children\"> {\n /*\n Innholdet i tooltipet som vises\n /\n content: ReactNode;\n /\n Eventuelle props du vil sette på trigger-knappen for tooltipet\n */\n triggerProps?: Omit<HTMLProps<HTMLButtonElement>, \"children\" \| \"type\">;\n}\n\nexport const PopupTip: FC<PopupTipProps> = ({ content, triggerProps, ...tooltipProps }) => {\n const [isBold, setIsBold] = useState(false);\n\n const handleFocus: FocusEventHandler<HTMLButtonElement> = (event) => {\n setIsBold(true);\n triggerProps?.onFocus?.(event);\n };\n const handleBlur: FocusEventHandler<HTMLButtonElement> = (event) => {\n setIsBold(false);\n triggerProps?.onBlur?.(event);\n };\n\n return (\n <Tooltip triggerOn=\"click\" {...tooltipProps}>\n <TooltipTrigger>\n <button\n {...triggerProps}\n onFocus={handleFocus}\n onBlur={handleBlur}\n type=\"button\"\n className={clsx(\"jkl-tooltip-question-button\", triggerProps?.className)}\n data-testid=\"jkl-tooltip-question-button\"\n >\n <QuestionIcon variant=\"inherit\" bold={isBold} />\n <span className=\"jkl-sr-only\">Vis hjelpetekst</span>\n </button>\n </TooltipTrigger>\n <TooltipContent>{content}</TooltipContent>\n </Tooltip>\n );\n};\n"],"names":["PopupTip","content","triggerProps","tooltipProps","isBold","setIsBold","useState","jsxs","Tooltip","triggerOn","children","jsx","TooltipTrigger","onFocus","event","_a","call","onBlur","type","className","clsx","QuestionIcon","variant","bold","TooltipContent"],"mappings":"4mDAkBO,MAAMA,EAA8B,EAAGC,QAAAA,EAASC,aAAAA,KAAiBC,MACpE,MAAOC,EAAQC,GAAaC,GAAS,GAYhC,OAAAC,EAAAC,EAAA,CAAQC,UAAU,WAAYN,EAC3BO,SAAA,CAAAC,EAACC,EACG,CAAAF,SAAAH,EAAC,SAAA,IACOL,EACJW,QAd2CC,UACvDT,GAAU,GACV,OAAAU,EAAA,MAAAb,OAAAA,EAAAA,EAAcW,UAAdE,EAAAC,KAAAd,EAAwBY,EAAAA,EAaZG,OAX0CH,UACtDT,GAAU,GACV,OAAAU,EAAA,MAAAb,OAAAA,EAAAA,EAAce,SAAdF,EAAAC,KAAAd,EAAuBY,EAAAA,EAUXI,KAAK,SACLC,UAAWC,EAAK,8BAA+B,MAAAlB,OAAA,EAAAA,EAAciB,WAC7D,cAAY,8BAEZT,SAAA,CAAAC,EAACU,EAAa,CAAAC,QAAQ,UAAUC,KAAMnB,IACrCO,EAAA,OAAA,CAAKQ,UAAU,cAAcT,SAAe,yBAGrDC,EAACa,GAAgBd,SAAQT,MAC7B"}

package/build/es/components/tooltip/Tooltip.d.ts ADDED Viewed

@@ -0,0 +1,43 @@
+import { Placement, UseFloatingReturn, useInteractions } from '@floating-ui/react';
+import { default as React, FC } from 'react';
+import { WithChildren } from '../../core/types.js';
+export type TooltipPlacement = Extract<Placement, "top-start" | "top-end" | "left" | "right" | "top">;
+export interface TooltipProps {
+    /**
+     * Sett til true dersom du ønsker at tooltipen skal være åpen som default
+     * @default false
+     */
+    initialOpen?: boolean;
+    /**
+     * Plassering av tooltipen i forhold til triggeren. Tooltipen vil automatisk
+     * bytte posisjon dersom det ikke er plass.
+     * @default "top"
+     */
+    placement?: TooltipPlacement;
+    /**
+     * Valgfri forsinkelse før tooltipen åpner. Ignoreres dersom triggerOn er satt til "click"
+     * @default 250
+     */
+    delay?: number;
+    /**
+     * Angir om tooltipen skal åpnes ved klikk eller hover
+     * @default "hover"
+     */
+    triggerOn?: "click" | "hover";
+}
+type UseTooltipReturn = {
+    triggerOn: NonNullable<TooltipProps["triggerOn"]>;
+    isOpen: boolean;
+    setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    arrowElement: React.RefObject<HTMLElement>;
+    refs: {
+        description: React.MutableRefObject<HTMLElement | null>;
+        setDescription: (element: HTMLElement | null) => void;
+    } & UseFloatingReturn["refs"];
+} & UseFloatingReturn & ReturnType<typeof useInteractions>;
+export declare const useTooltip: ({ initialOpen, placement, delay, triggerOn, }: TooltipProps) => UseTooltipReturn;
+export type TooltipContext = ReturnType<typeof useTooltip> | null;
+export declare const TooltipProvider: React.Provider<TooltipContext>;
+export declare const useTooltipContext: () => UseTooltipReturn;
+export declare const Tooltip: FC<TooltipProps & WithChildren>;
+export {};

package/build/es/components/tooltip/Tooltip.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tooltip.js","sources":["../../../../src/components/tooltip/Tooltip.tsx"],"sourcesContent":["import {\n type Placement,\n type UseFloatingReturn,\n arrow,\n autoUpdate,\n flip,\n offset,\n shift,\n useClick,\n useDismiss,\n useFloating,\n useFocus,\n useHover,\n useInteractions,\n useRole,\n} from \"@floating-ui/react\";\nimport React, { FC, createContext, useContext, useRef, useState } from \"react\";\nimport { type WithChildren } from \"../../core\";\n\nexport type TooltipPlacement = Extract<Placement, \"top-start\" \| \"top-end\" \| \"left\" \| \"right\" \| \"top\">;\n\nexport interface TooltipProps {\n /*\n Sett til true dersom du ønsker at tooltipen skal være åpen som default\n * @default false\n /\n initialOpen?: boolean;\n /\n Plassering av tooltipen i forhold til triggeren. Tooltipen vil automatisk\n * bytte posisjon dersom det ikke er plass.\n * @default \"top\"\n /\n placement?: TooltipPlacement;\n /\n Valgfri forsinkelse før tooltipen åpner. Ignoreres dersom triggerOn er satt til \"click\"\n * @default 250\n /\n delay?: number;\n /\n Angir om tooltipen skal åpnes ved klikk eller hover\n * @default \"hover\"\n */\n triggerOn?: \"click\" \| \"hover\";\n}\n\ntype UseTooltipReturn = {\n triggerOn: NonNullable<TooltipProps[\"triggerOn\"]>;\n isOpen: boolean;\n setOpen: React.Dispatch<React.SetStateAction<boolean>>;\n arrowElement: React.RefObject<HTMLElement>;\n refs: {\n description: React.MutableRefObject<HTMLElement \| null>;\n setDescription: (element: HTMLElement \| null) => void;\n } & UseFloatingReturn[\"refs\"];\n} & UseFloatingReturn &\n ReturnType<typeof useInteractions>;\n\nexport const useTooltip = ({\n initialOpen = false,\n placement = \"top\",\n delay = 250,\n triggerOn = \"hover\",\n}: TooltipProps): UseTooltipReturn => {\n const [isOpen, setOpen] = useState(initialOpen);\n const arrowElement = useRef<HTMLElement>(null);\n const description = useRef<HTMLElement \| null>(null);\n const setDescription = (element: HTMLElement \| null) => (description.current = element);\n\n const data = useFloating({\n open: isOpen,\n onOpenChange: setOpen,\n placement,\n whileElementsMounted: autoUpdate,\n middleware: [offset(16), flip(), shift({ padding: 16 }), arrow({ element: arrowElement, padding: 20 })],\n });\n\n const role = useRole(data.context, { role: \"tooltip\" });\n const dismiss = useDismiss(data.context, { referencePress: false });\n const click = useClick(data.context, { enabled: triggerOn === \"click\" && !isOpen });\n const hover = useHover(data.context, { enabled: triggerOn === \"hover\", delay: isOpen ? 0 : delay });\n const focus = useFocus(data.context, { enabled: triggerOn === \"click\" ? isOpen : true });\n\n const interactions = useInteractions([dismiss, focus, role, click, hover]);\n\n return {\n triggerOn,\n isOpen,\n setOpen,\n arrowElement,\n ...data,\n refs: {\n ...data.refs,\n description,\n setDescription,\n },\n ...interactions,\n };\n};\n\nexport type TooltipContext = ReturnType<typeof useTooltip> \| null;\n\nconst tooltipContext = createContext<TooltipContext>(null);\n\nexport const TooltipProvider = tooltipContext.Provider;\n\nexport const useTooltipContext = () => {\n const context = useContext(tooltipContext);\n\n if (context === null) {\n throw new Error(\"Tooltip-komponentene kan kun brukes inne i <Tooltip />\");\n }\n\n return context;\n};\n\nexport const Tooltip: FC<TooltipProps & WithChildren> = ({ children, ...options }) => {\n const tooltip = useTooltip(options);\n\n return <TooltipProvider value={tooltip}>{children}</TooltipProvider>;\n};\n"],"names":["useTooltip","initialOpen","placement","delay","triggerOn","isOpen","setOpen","useState","arrowElement","useRef","description","data","useFloating","open","onOpenChange","whileElementsMounted","autoUpdate","middleware","offset","flip","shift","padding","arrow","element","role","useRole","context","dismiss","useDismiss","referencePress","click","useClick","enabled","hover","useHover","focus","useFocus","interactions","useInteractions","refs","setDescription","current","tooltipContext","createContext","TooltipProvider","Provider","useTooltipContext","useContext","Error","Tooltip","children","options","tooltip","jsx","value"],"mappings":"iUAyDO,MAAMA,EAAa,EACtBC,YAAAA,GAAc,EACdC,UAAAA,EAAY,MACZC,MAAAA,EAAQ,IACRC,UAAAA,EAAY,YAEN,MAACC,EAAQC,GAAWC,EAASN,GAC7BO,EAAeC,EAAoB,MACnCC,EAAcD,EAA2B,MAGzCE,EAAOC,EAAY,CACrBC,KAAMR,EACNS,aAAcR,EACdJ,UAAAA,EACAa,qBAAsBC,EACtBC,WAAY,CAACC,EAAO,IAAKC,IAAQC,EAAM,CAAEC,QAAS,KAAOC,EAAM,CAAEC,QAASf,EAAca,QAAS,QAG/FG,EAAOC,EAAQd,EAAKe,QAAS,CAAEF,KAAM,YACrCG,EAAUC,EAAWjB,EAAKe,QAAS,CAAEG,gBAAgB,IACrDC,EAAQC,EAASpB,EAAKe,QAAS,CAAEM,QAAuB,UAAd5B,IAA0BC,IACpE4B,EAAQC,EAASvB,EAAKe,QAAS,CAAEM,QAAuB,UAAd5B,EAAuBD,MAAOE,EAAS,EAAIF,IACrFgC,EAAQC,EAASzB,EAAKe,QAAS,CAAEM,QAAuB,UAAd5B,GAAwBC,IAElEgC,EAAeC,EAAgB,CAACX,EAASQ,EAAOX,EAAMM,EAAOG,IAE5D,MAAA,CACH7B,UAAAA,EACAC,OAAAA,EACAC,QAAAA,EACAE,aAAAA,KACGG,EACH4B,KAAM,IACC5B,EAAK4B,KACR7B,YAAAA,EACA8B,eA3BgBjB,GAAiCb,EAAY+B,QAAUlB,MA6BxEc,EAAA,EAMLK,EAAiBC,EAA8B,MAExCC,EAAkBF,EAAeG,SAEjCC,EAAoB,KACvBpB,MAAAA,EAAUqB,EAAWL,GAE3B,GAAgB,OAAZhB,EACM,MAAA,IAAIsB,MAAM,0DAGbtB,OAAAA,CAAAA,EAGEuB,EAA2C,EAAGC,SAAAA,KAAaC,MAC9DC,MAAAA,EAAUpD,EAAWmD,GAEnB,OAAAE,EAAAT,EAAA,CAAgBU,MAAOF,EAAUF,SAAAA,GAAS"}
1	+ {"version":3,"file":"Tooltip.js","sources":["../../../../src/components/tooltip/Tooltip.tsx"],"sourcesContent":["import {\n type Placement,\n type UseFloatingReturn,\n arrow,\n autoUpdate,\n flip,\n offset,\n shift,\n useClick,\n useDismiss,\n useFloating,\n useFocus,\n useHover,\n useInteractions,\n useRole,\n} from \"@floating-ui/react\";\nimport React, { FC, createContext, useContext, useRef, useState } from \"react\";\nimport { type WithChildren } from \"../../core/types.js\";\n\nexport type TooltipPlacement = Extract<Placement, \"top-start\" \| \"top-end\" \| \"left\" \| \"right\" \| \"top\">;\n\nexport interface TooltipProps {\n /*\n Sett til true dersom du ønsker at tooltipen skal være åpen som default\n * @default false\n /\n initialOpen?: boolean;\n /\n Plassering av tooltipen i forhold til triggeren. Tooltipen vil automatisk\n * bytte posisjon dersom det ikke er plass.\n * @default \"top\"\n /\n placement?: TooltipPlacement;\n /\n Valgfri forsinkelse før tooltipen åpner. Ignoreres dersom triggerOn er satt til \"click\"\n * @default 250\n /\n delay?: number;\n /\n Angir om tooltipen skal åpnes ved klikk eller hover\n * @default \"hover\"\n */\n triggerOn?: \"click\" \| \"hover\";\n}\n\ntype UseTooltipReturn = {\n triggerOn: NonNullable<TooltipProps[\"triggerOn\"]>;\n isOpen: boolean;\n setOpen: React.Dispatch<React.SetStateAction<boolean>>;\n arrowElement: React.RefObject<HTMLElement>;\n refs: {\n description: React.MutableRefObject<HTMLElement \| null>;\n setDescription: (element: HTMLElement \| null) => void;\n } & UseFloatingReturn[\"refs\"];\n} & UseFloatingReturn &\n ReturnType<typeof useInteractions>;\n\nexport const useTooltip = ({\n initialOpen = false,\n placement = \"top\",\n delay = 250,\n triggerOn = \"hover\",\n}: TooltipProps): UseTooltipReturn => {\n const [isOpen, setOpen] = useState(initialOpen);\n const arrowElement = useRef<HTMLElement>(null);\n const description = useRef<HTMLElement \| null>(null);\n const setDescription = (element: HTMLElement \| null) => (description.current = element);\n\n const data = useFloating({\n open: isOpen,\n onOpenChange: setOpen,\n placement,\n whileElementsMounted: autoUpdate,\n middleware: [offset(16), flip(), shift({ padding: 16 }), arrow({ element: arrowElement, padding: 20 })],\n });\n\n const role = useRole(data.context, { role: \"tooltip\" });\n const dismiss = useDismiss(data.context, { referencePress: false });\n const click = useClick(data.context, { enabled: triggerOn === \"click\" && !isOpen });\n const hover = useHover(data.context, { enabled: triggerOn === \"hover\", delay: isOpen ? 0 : delay });\n const focus = useFocus(data.context, { enabled: triggerOn === \"click\" ? isOpen : true });\n\n const interactions = useInteractions([dismiss, focus, role, click, hover]);\n\n return {\n triggerOn,\n isOpen,\n setOpen,\n arrowElement,\n ...data,\n refs: {\n ...data.refs,\n description,\n setDescription,\n },\n ...interactions,\n };\n};\n\nexport type TooltipContext = ReturnType<typeof useTooltip> \| null;\n\nconst tooltipContext = createContext<TooltipContext>(null);\n\nexport const TooltipProvider = tooltipContext.Provider;\n\nexport const useTooltipContext = () => {\n const context = useContext(tooltipContext);\n\n if (context === null) {\n throw new Error(\"Tooltip-komponentene kan kun brukes inne i <Tooltip />\");\n }\n\n return context;\n};\n\nexport const Tooltip: FC<TooltipProps & WithChildren> = ({ children, ...options }) => {\n const tooltip = useTooltip(options);\n\n return <TooltipProvider value={tooltip}>{children}</TooltipProvider>;\n};\n"],"names":["useTooltip","initialOpen","placement","delay","triggerOn","isOpen","setOpen","useState","arrowElement","useRef","description","data","useFloating","open","onOpenChange","whileElementsMounted","autoUpdate","middleware","offset","flip","shift","padding","arrow","element","role","useRole","context","dismiss","useDismiss","referencePress","click","useClick","enabled","hover","useHover","focus","useFocus","interactions","useInteractions","refs","setDescription","current","tooltipContext","createContext","TooltipProvider","Provider","useTooltipContext","useContext","Error","Tooltip","children","options","tooltip","jsx","value"],"mappings":"iUAyDO,MAAMA,EAAa,EACtBC,YAAAA,GAAc,EACdC,UAAAA,EAAY,MACZC,MAAAA,EAAQ,IACRC,UAAAA,EAAY,YAEN,MAACC,EAAQC,GAAWC,EAASN,GAC7BO,EAAeC,EAAoB,MACnCC,EAAcD,EAA2B,MAGzCE,EAAOC,EAAY,CACrBC,KAAMR,EACNS,aAAcR,EACdJ,UAAAA,EACAa,qBAAsBC,EACtBC,WAAY,CAACC,EAAO,IAAKC,IAAQC,EAAM,CAAEC,QAAS,KAAOC,EAAM,CAAEC,QAASf,EAAca,QAAS,QAG/FG,EAAOC,EAAQd,EAAKe,QAAS,CAAEF,KAAM,YACrCG,EAAUC,EAAWjB,EAAKe,QAAS,CAAEG,gBAAgB,IACrDC,EAAQC,EAASpB,EAAKe,QAAS,CAAEM,QAAuB,UAAd5B,IAA0BC,IACpE4B,EAAQC,EAASvB,EAAKe,QAAS,CAAEM,QAAuB,UAAd5B,EAAuBD,MAAOE,EAAS,EAAIF,IACrFgC,EAAQC,EAASzB,EAAKe,QAAS,CAAEM,QAAuB,UAAd5B,GAAwBC,IAElEgC,EAAeC,EAAgB,CAACX,EAASQ,EAAOX,EAAMM,EAAOG,IAE5D,MAAA,CACH7B,UAAAA,EACAC,OAAAA,EACAC,QAAAA,EACAE,aAAAA,KACGG,EACH4B,KAAM,IACC5B,EAAK4B,KACR7B,YAAAA,EACA8B,eA3BgBjB,GAAiCb,EAAY+B,QAAUlB,MA6BxEc,EAAA,EAMLK,EAAiBC,EAA8B,MAExCC,EAAkBF,EAAeG,SAEjCC,EAAoB,KACvBpB,MAAAA,EAAUqB,EAAWL,GAE3B,GAAgB,OAAZhB,EACM,MAAA,IAAIsB,MAAM,0DAGbtB,OAAAA,CAAAA,EAGEuB,EAA2C,EAAGC,SAAAA,KAAaC,MAC9DC,MAAAA,EAAUpD,EAAWmD,GAEnB,OAAAE,EAAAT,EAAA,CAAgBU,MAAOF,EAAUF,SAAAA,GAAS"}