@postenbring/hedwig-react 0.0.66 → 0.0.68

package/dist/tabs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/tabs/index.tsx","../../src/tabs/tabs.tsx","../../src/tabs/context.ts","../../src/tabs/tabs-list.tsx","../../src/utils.ts","../../src/tabs/tabs-content.tsx"],"sourcesContent":["import { Tabs } from \"./tabs\";\nimport { TabsList, TabsTab } from \"./tabs-list\";\nimport { TabsContents, TabsContent } from \"./tabs-content\";\n\nconst TabsComponent = Tabs as typeof Tabs & {\n  List: typeof TabsList;\n  Tab: typeof TabsTab;\n  Contents: typeof TabsContents;\n  Content: typeof TabsContent;\n};\nTabsComponent.List = TabsList;\nTabsComponent.Tab = TabsTab;\nTabsComponent.Contents = TabsContents;\nTabsComponent.Content = TabsContent;\n\nexport { TabsComponent as Tabs, TabsList, TabsTab, TabsContents, TabsContent };\n\nexport type * from \"./tabs\";\nexport type * from \"./tabs-list\";\nexport type * from \"./tabs-content\";\n","import type { HTMLAttributes, ReactElement } from \"react\";\nimport { forwardRef, useState } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport type { OverridableComponent } from \"../utils\";\nimport { TabsContext } from \"./context\";\nimport type { TabContentsProps } from \"./tabs-content\";\nimport type { TabListProps } from \"./tabs-list\";\n\nexport interface TabsProps extends HTMLAttributes<HTMLElement> {\n  children: ReactElement<TabListProps | TabContentsProps>[] | ReactElement;\n\n  /**\n   * Define which tab to use as default. Must be one of the <Tab/>s identifier.\n   */\n  defaultTab: string;\n}\n\nexport const Tabs: OverridableComponent<TabsProps, HTMLDivElement> = forwardRef(\n  ({ as: Component = \"div\", defaultTab, children, ...rest }, ref) => {\n    const [activeTabId, setActiveTabId] = useState<string>(defaultTab);\n    return (\n      <Component className={clsx(\"hds-tabs\")} ref={ref} {...rest}>\n        <TabsContext.Provider value={{ activeTabId, toggleActiveTabId: setActiveTabId }}>\n          {children}\n        </TabsContext.Provider>\n      </Component>\n    );\n  },\n);\n\nTabs.displayName = \"Tabs\";\n","import { createContext, useContext } from \"react\";\n\nexport interface TabsContextProps {\n  activeTabId: string;\n  toggleActiveTabId: (tabId: string) => void;\n}\n\nexport const TabsContext = createContext<TabsContextProps | null>(null);\n\nexport function useTabsContext() {\n  const context = useContext(TabsContext);\n  if (!context) {\n    throw new Error(\n      \"Tabs context required. Did you use `<Tabs.List />`, `<Tabs.Tab />`, or `<Tabs.Content />` outside of <Tabs/>?\",\n    );\n  }\n  return context;\n}\n","import type { HTMLAttributes, ReactElement, MouseEvent } from \"react\";\nimport { forwardRef, useEffect, useRef } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { type OverridableComponent, useResize } from \"../utils\";\nimport { useTabsContext } from \"./context\";\n\nexport interface TabListProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactElement<TabsTabProps> | ReactElement<TabsTabProps>[];\n\n  /**\n   * Direction of the tabs. Can either be vertical or horizontal.\n   * Horizontal breaks on window width with fallback back to vertical\n   */\n  direction?: \"vertical\" | \"horizontal\";\n}\n\nexport function TabsList({ children, direction = \"horizontal\", className, ...rest }: TabListProps) {\n  const { activeTabId } = useTabsContext();\n  const tabsListRef = useRef<HTMLDivElement>(null);\n  const { width: tabsWidth } = useResize(tabsListRef);\n  const { innerWidth } = window;\n  const wideEnough = innerWidth >= tabsWidth;\n\n  const previousTabId = useRef(activeTabId);\n\n  // Marker animation\n  useEffect(() => {\n    const tabList = tabsListRef.current;\n    const activeTab = tabList?.querySelector(`[data-tabid=\"${activeTabId}\"]`);\n    if (!activeTab || !tabList) return;\n\n    const { offsetHeight: containerHeight, offsetWidth: containerWidth } = tabList;\n    const { offsetHeight, offsetWidth, offsetTop, offsetLeft } = activeTab as HTMLElement;\n\n    // Calculate the height and width of the marker relative to the container\n    const height = offsetHeight / containerHeight;\n    const width = offsetWidth / containerWidth;\n\n    // NOTE: Doing a DOM manipulation here to set the CSS variables for the marker\n    // Not really the react idomatic way, but as long as it works we are able to skip some intermidiate `useState`\n    tabsListRef.current.style.setProperty(\"--_hds-tabs-marker-height\", String(height));\n    tabsListRef.current.style.setProperty(\"--_hds-tabs-marker-width\", String(width));\n    tabsListRef.current.style.setProperty(\"--_hds-tabs-marker-top\", `${offsetTop}px`);\n    tabsListRef.current.style.setProperty(\"--_hds-tabs-marker-left\", `${offsetLeft}px`);\n\n    // Start with border fallback, then switch to the animated marker when the user changes tabs\n    // This way the marker is placed immediately to the default tab, then animates smoothly to the next when selected\n    if (previousTabId.current !== activeTabId) {\n      tabsListRef.current.style.setProperty(\n        \"--_hds-tabs-marker-animated-color\",\n        \"var(--_hds-tabs-marker-color)\",\n      );\n      tabsListRef.current.style.setProperty(\n        \"--_hds-tabs-marker-border-fallback-color\",\n        \"transparent\",\n      );\n    }\n    previousTabId.current = activeTabId;\n  }, [activeTabId, innerWidth]);\n\n  return (\n    <div\n      className={clsx(\n        \"hds-tabs__list\",\n        direction === \"horizontal\"\n          ? {\n              \"hds-tabs__list--horizontal\": wideEnough,\n              \"hds-tabs__list--vertical\": !wideEnough,\n            }\n          : {\n              \"hds-tabs__list--vertical\": true,\n            },\n        className as undefined,\n      )}\n      ref={tabsListRef}\n      role=\"tablist\"\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n}\n\nTabsList.displayName = \"Tabs.List\";\n\nexport interface TabsTabProps extends HTMLAttributes<HTMLButtonElement> {\n  children: ReactElement<HTMLElement> | string;\n\n  /**\n   * Identifier for the tab\n   */\n  tabId: string;\n}\n\nexport const TabsTab: OverridableComponent<TabsTabProps, HTMLButtonElement> = forwardRef(\n  ({ as: Component = \"button\", children, tabId, className, onClick, ...rest }, ref) => {\n    const context = useTabsContext();\n\n    const toggleTab = (e: MouseEvent<HTMLButtonElement>) => {\n      e.preventDefault();\n      context.toggleActiveTabId(tabId);\n      onClick && onClick(e);\n    };\n    return (\n      <Component\n        className={clsx(\n          \"hds-tabs__tab\",\n          { \"hds-tabs__tab--active\": context.activeTabId === tabId },\n          className as undefined,\n        )}\n        data-tabid={tabId}\n        onClick={toggleTab}\n        ref={ref}\n        role=\"tab\"\n        {...rest}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\n\nTabsTab.displayName = \"Tabs.Tab\";\n","import type { ComponentPropsWithRef, ElementType, FC, RefAttributes } from \"react\";\nimport * as React from \"react\";\nimport { useCallback, useEffect, useState } from \"react\";\n\n/**\n * OverridableComponent makes the `as` prop available,\n * to be used to override the html element being used for a component\n *\n * Taken from digdir design system: https://github.com/digdir/designsystem/blob/main/packages/react/src/types/OverridableComponent.ts\n */\nexport type OverridableComponent<ComponentProps, Element extends HTMLElement> = {\n  (props: ComponentProps & RefAttributes<Element>): ReturnType<FC>;\n\n  <As extends ElementType>(\n    props: {\n      /** Override html element */\n      as?: As;\n    } & ComponentProps &\n      Omit<ComponentPropsWithRef<As>, keyof ComponentProps>,\n  ): ReturnType<FC>;\n} & Pick<FC, \"displayName\">;\n\n/**\n * Merges an array of refs into a single memoized callback ref or `null`.\n * @see https://floating-ui.com/docs/useMergeRefs\n */\nexport function useMergeRefs<Instance>(\n  refs: (React.Ref<Instance> | undefined)[],\n): React.RefCallback<Instance> | null {\n  return React.useMemo(() => {\n    if (refs.every((ref) => ref === null)) {\n      return null;\n    }\n\n    return (value) => {\n      refs.forEach((ref) => {\n        if (typeof ref === \"function\") {\n          ref(value);\n        } else if (ref !== null) {\n          (ref as React.MutableRefObject<Instance | null>).current = value;\n        }\n      });\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- It's ok\n  }, refs);\n}\n\nexport function useResize<Instance extends HTMLElement>(\n  ref: React.RefObject<Instance> | undefined | null,\n): { width: number; height: number } {\n  const [width, setWidth] = useState<number>(0);\n  const [height, setHeight] = useState<number>(0);\n  const handleResize = useCallback(() => {\n    if (ref?.current !== null) {\n      setWidth(ref?.current?.offsetWidth ?? 0);\n      setHeight(ref?.current?.offsetHeight ?? 0);\n    }\n  }, [ref]);\n  useEffect(() => {\n    window.addEventListener(\"load\", handleResize);\n    window.addEventListener(\"resize\", handleResize);\n    return () => {\n      window.removeEventListener(\"load\", handleResize);\n      window.removeEventListener(\"resize\", handleResize);\n    };\n  }, [ref, handleResize]);\n  useEffect(() => {\n    handleResize();\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- It's ok\n  }, []);\n  return { width, height };\n}\n","import type { HTMLAttributes, ReactElement } from \"react\";\nimport { forwardRef } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport type { OverridableComponent } from \"../utils\";\nimport { useTabsContext } from \"./context\";\n\nexport interface TabContentsProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactElement<TabsContentProps> | ReactElement<TabsContentProps>[];\n}\n\nexport function TabsContents({ children, ...rest }: TabContentsProps) {\n  return (\n    <div className={clsx(\"hds-tabs__contents\")} {...rest}>\n      {children}\n    </div>\n  );\n}\nTabsContents.displayName = \"Tabs.Contents\";\n\nexport interface TabsContentProps extends HTMLAttributes<HTMLElement> {\n  children: ReactElement<HTMLElement> | ReactElement<HTMLElement>[] | string;\n\n  /**\n   * Content for the referenced tabId\n   */\n  forTabId: string;\n}\n\nexport const TabsContent: OverridableComponent<TabsContentProps, HTMLElement> = forwardRef(\n  ({ as: Component = \"div\", forTabId, children, ...rest }, ref) => {\n    const context = useTabsContext();\n\n    if (context.activeTabId === forTabId) {\n      return (\n        <Component {...rest} ref={ref}>\n          {children}\n        </Component>\n      );\n    }\n    return null;\n  },\n);\n\nTabsContent.displayName = \"Tabs.Content\";\n"],"mappings":"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","names":["import_react","import_react","import_typed_classname","import_react","import_jsx_runtime","import_react","import_typed_classname","import_jsx_runtime"]}
+{"version":3,"sources":["../../src/tabs/index.tsx","../../src/tabs/tabs.tsx","../../src/tabs/context.ts","../../src/tabs/tabs-list.tsx","../../src/utils.ts","../../src/tabs/tabs-content.tsx"],"sourcesContent":["import { Tabs } from \"./tabs\";\nimport { TabsList, TabsTab } from \"./tabs-list\";\nimport { TabsContents, TabsContent } from \"./tabs-content\";\n\nconst TabsComponent = Tabs as typeof Tabs & {\n  List: typeof TabsList;\n  Tab: typeof TabsTab;\n  Contents: typeof TabsContents;\n  Content: typeof TabsContent;\n};\nTabsComponent.List = TabsList;\nTabsComponent.Tab = TabsTab;\nTabsComponent.Contents = TabsContents;\nTabsComponent.Content = TabsContent;\n\nexport { TabsComponent as Tabs, TabsList, TabsTab, TabsContents, TabsContent };\n\nexport type * from \"./tabs\";\nexport type * from \"./tabs-list\";\nexport type * from \"./tabs-content\";\n","import type { HTMLAttributes, ReactElement } from \"react\";\nimport { forwardRef, useState } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport type { OverridableComponent } from \"../utils\";\nimport { TabsContext } from \"./context\";\nimport type { TabContentsProps } from \"./tabs-content\";\nimport type { TabListProps } from \"./tabs-list\";\n\nexport interface TabsProps extends HTMLAttributes<HTMLElement> {\n  children: ReactElement<TabListProps | TabContentsProps>[] | ReactElement;\n\n  /**\n   * Define which tab to use as default. Must be one of the <Tab/>s identifier.\n   */\n  defaultTab: string;\n}\n\nexport const Tabs: OverridableComponent<TabsProps, HTMLDivElement> = forwardRef(\n  ({ as: Component = \"div\", defaultTab, children, ...rest }, ref) => {\n    const [activeTabId, setActiveTabId] = useState<string>(defaultTab);\n    return (\n      <Component className={clsx(\"hds-tabs\")} ref={ref} {...rest}>\n        <TabsContext.Provider value={{ activeTabId, toggleActiveTabId: setActiveTabId }}>\n          {children}\n        </TabsContext.Provider>\n      </Component>\n    );\n  },\n);\n\nTabs.displayName = \"Tabs\";\n","import { createContext, useContext } from \"react\";\n\nexport interface TabsContextProps {\n  activeTabId: string;\n  toggleActiveTabId: (tabId: string) => void;\n}\n\nexport const TabsContext = createContext<TabsContextProps | null>(null);\n\nexport function useTabsContext() {\n  const context = useContext(TabsContext);\n  if (!context) {\n    throw new Error(\n      \"Tabs context required. Did you use `<Tabs.List />`, `<Tabs.Tab />`, or `<Tabs.Content />` outside of <Tabs/>?\",\n    );\n  }\n  return context;\n}\n","import type { HTMLAttributes, ReactElement, MouseEvent } from \"react\";\nimport { forwardRef, useEffect, useRef } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { type OverridableComponent, useResize, useHydrated } from \"../utils\";\nimport { useTabsContext } from \"./context\";\n\nexport interface TabListProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactElement<TabsTabProps> | ReactElement<TabsTabProps>[];\n\n  /**\n   * Direction of the tabs. Can either be vertical or horizontal.\n   * Horizontal breaks on window width with fallback back to vertical\n   */\n  direction?: \"vertical\" | \"horizontal\";\n}\n\nexport function TabsList({ children, direction = \"horizontal\", className, ...rest }: TabListProps) {\n  const { activeTabId } = useTabsContext();\n  const tabsListRef = useRef<HTMLDivElement>(null);\n  const { width: tabsWidth } = useResize(tabsListRef);\n\n  const isClientSide = useHydrated();\n  const { innerWidth } = isClientSide ? window : { innerWidth: 1000 };\n  const wideEnough = innerWidth >= tabsWidth;\n\n  const previousTabId = useRef(activeTabId);\n\n  // Marker animation\n  useEffect(() => {\n    const tabList = tabsListRef.current;\n    const activeTab = tabList?.querySelector(`[data-tabid=\"${activeTabId}\"]`);\n    if (!activeTab || !tabList) return;\n\n    const { offsetHeight: containerHeight, offsetWidth: containerWidth } = tabList;\n    const { offsetHeight, offsetWidth, offsetTop, offsetLeft } = activeTab as HTMLElement;\n\n    // Calculate the height and width of the marker relative to the container\n    const height = offsetHeight / containerHeight;\n    const width = offsetWidth / containerWidth;\n\n    // NOTE: Doing a DOM manipulation here to set the CSS variables for the marker\n    // Not really the react idomatic way, but as long as it works we are able to skip some intermidiate `useState`\n    tabsListRef.current.style.setProperty(\"--_hds-tabs-marker-height\", String(height));\n    tabsListRef.current.style.setProperty(\"--_hds-tabs-marker-width\", String(width));\n    tabsListRef.current.style.setProperty(\"--_hds-tabs-marker-top\", `${offsetTop}px`);\n    tabsListRef.current.style.setProperty(\"--_hds-tabs-marker-left\", `${offsetLeft}px`);\n\n    // Start with border fallback, then switch to the animated marker when the user changes tabs\n    // This way the marker is placed immediately to the default tab, then animates smoothly to the next when selected\n    if (previousTabId.current !== activeTabId) {\n      tabsListRef.current.style.setProperty(\n        \"--_hds-tabs-marker-animated-color\",\n        \"var(--_hds-tabs-marker-color)\",\n      );\n      tabsListRef.current.style.setProperty(\n        \"--_hds-tabs-marker-border-fallback-color\",\n        \"transparent\",\n      );\n    }\n    previousTabId.current = activeTabId;\n  }, [activeTabId, innerWidth]);\n\n  return (\n    <div\n      className={clsx(\n        \"hds-tabs__list\",\n        direction === \"horizontal\"\n          ? {\n              \"hds-tabs__list--horizontal\": wideEnough,\n              \"hds-tabs__list--vertical\": !wideEnough,\n            }\n          : {\n              \"hds-tabs__list--vertical\": true,\n            },\n        className as undefined,\n      )}\n      ref={tabsListRef}\n      role=\"tablist\"\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n}\n\nTabsList.displayName = \"Tabs.List\";\n\nexport interface TabsTabProps extends HTMLAttributes<HTMLButtonElement> {\n  children: ReactElement<HTMLElement> | string;\n\n  /**\n   * Identifier for the tab\n   */\n  tabId: string;\n}\n\nexport const TabsTab: OverridableComponent<TabsTabProps, HTMLButtonElement> = forwardRef(\n  ({ as: Component = \"button\", children, tabId, className, onClick, ...rest }, ref) => {\n    const context = useTabsContext();\n\n    const toggleTab = (e: MouseEvent<HTMLButtonElement>) => {\n      e.preventDefault();\n      context.toggleActiveTabId(tabId);\n      onClick && onClick(e);\n    };\n    return (\n      <Component\n        className={clsx(\n          \"hds-tabs__tab\",\n          { \"hds-tabs__tab--active\": context.activeTabId === tabId },\n          className as undefined,\n        )}\n        data-tabid={tabId}\n        onClick={toggleTab}\n        ref={ref}\n        role=\"tab\"\n        {...rest}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\n\nTabsTab.displayName = \"Tabs.Tab\";\n","import type { ComponentPropsWithRef, ElementType, FC, RefAttributes } from \"react\";\nimport * as React from \"react\";\nimport { useCallback, useEffect, useState } from \"react\";\n\n/**\n * OverridableComponent makes the `as` prop available,\n * to be used to override the html element being used for a component\n *\n * Taken from digdir design system: https://github.com/digdir/designsystem/blob/main/packages/react/src/types/OverridableComponent.ts\n */\nexport type OverridableComponent<ComponentProps, Element extends HTMLElement> = {\n  (props: ComponentProps & RefAttributes<Element>): ReturnType<FC>;\n\n  <As extends ElementType>(\n    props: {\n      /** Override html element */\n      as?: As;\n    } & ComponentProps &\n      Omit<ComponentPropsWithRef<As>, keyof ComponentProps>,\n  ): ReturnType<FC>;\n} & Pick<FC, \"displayName\">;\n\n/**\n * Merges an array of refs into a single memoized callback ref or `null`.\n * @see https://floating-ui.com/docs/useMergeRefs\n */\nexport function useMergeRefs<Instance>(\n  refs: (React.Ref<Instance> | undefined)[],\n): React.RefCallback<Instance> | null {\n  return React.useMemo(() => {\n    if (refs.every((ref) => ref === null)) {\n      return null;\n    }\n\n    return (value) => {\n      refs.forEach((ref) => {\n        if (typeof ref === \"function\") {\n          ref(value);\n        } else if (ref !== null) {\n          (ref as React.MutableRefObject<Instance | null>).current = value;\n        }\n      });\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- It's ok\n  }, refs);\n}\n\nexport function useResize<Instance extends HTMLElement>(\n  ref: React.RefObject<Instance> | undefined | null,\n): { width: number; height: number } {\n  const [width, setWidth] = useState<number>(0);\n  const [height, setHeight] = useState<number>(0);\n  const handleResize = useCallback(() => {\n    if (ref?.current !== null) {\n      setWidth(ref?.current?.offsetWidth ?? 0);\n      setHeight(ref?.current?.offsetHeight ?? 0);\n    }\n  }, [ref]);\n  useEffect(() => {\n    window.addEventListener(\"load\", handleResize);\n    window.addEventListener(\"resize\", handleResize);\n    return () => {\n      window.removeEventListener(\"load\", handleResize);\n      window.removeEventListener(\"resize\", handleResize);\n    };\n  }, [ref, handleResize]);\n  useEffect(() => {\n    handleResize();\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- It's ok\n  }, []);\n  return { width, height };\n}\n\nfunction subscribe() {\n  // eslint-disable-next-line @typescript-eslint/no-empty-function -- It's ok\n  return () => {};\n}\n\nexport function useHydrated() {\n  return React.useSyncExternalStore(\n    subscribe,\n    () => true,\n    () => false,\n  );\n}\n","import type { HTMLAttributes, ReactElement } from \"react\";\nimport { forwardRef } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport type { OverridableComponent } from \"../utils\";\nimport { useTabsContext } from \"./context\";\n\nexport interface TabContentsProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactElement<TabsContentProps> | ReactElement<TabsContentProps>[];\n}\n\nexport function TabsContents({ children, ...rest }: TabContentsProps) {\n  return (\n    <div className={clsx(\"hds-tabs__contents\")} {...rest}>\n      {children}\n    </div>\n  );\n}\nTabsContents.displayName = \"Tabs.Contents\";\n\nexport interface TabsContentProps extends HTMLAttributes<HTMLElement> {\n  children: ReactElement<HTMLElement> | ReactElement<HTMLElement>[] | string;\n\n  /**\n   * Content for the referenced tabId\n   */\n  forTabId: string;\n}\n\nexport const TabsContent: OverridableComponent<TabsContentProps, HTMLElement> = forwardRef(\n  ({ as: Component = \"div\", forTabId, children, ...rest }, ref) => {\n    const context = useTabsContext();\n\n    if (context.activeTabId === forTabId) {\n      return (\n        <Component {...rest} ref={ref}>\n          {children}\n        </Component>\n      );\n    }\n    return null;\n  },\n);\n\nTabsContent.displayName = \"Tabs.Content\";\n"],"mappings":"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","names":["import_react","import_react","import_typed_classname","import_react","import_jsx_runtime","import_react","import_typed_classname","import_jsx_runtime"]}

package/dist/tabs/index.mjs

@@ -1,6 +1,6 @@
 import {
   TabsComponent
-} from "../chunk-IFGQR4J6.mjs";
+} from "../chunk-ZRFDCZ62.mjs";
 import {
   TabsContent,
   TabsContents
@@ -8,10 +8,10 @@ import {
 import {
   TabsList,
   TabsTab
-} from "../chunk-CLXHNRAI.mjs";
+} from "../chunk-B56JZJOS.mjs";
 import "../chunk-XVFQWVHO.mjs";
 import "../chunk-KQITCS3U.mjs";
-import "../chunk-WCA2WPFS.mjs";
+import "../chunk-ZL56N4UK.mjs";
 import "../chunk-R4SQKVDQ.mjs";
 export {
   TabsComponent as Tabs,

package/dist/tabs/tabs-list.js

@@ -92,6 +92,17 @@ function useResize(ref) {
   }, []);
   return { width, height };
 }
+function subscribe() {
+  return () => {
+  };
+}
+function useHydrated() {
+  return React.useSyncExternalStore(
+    subscribe,
+    () => true,
+    () => false
+  );
+}
 
 // src/tabs/context.ts
 var import_react2 = require("react");
@@ -113,7 +124,8 @@ function TabsList(_a) {
   const { activeTabId } = useTabsContext();
   const tabsListRef = (0, import_react3.useRef)(null);
   const { width: tabsWidth } = useResize(tabsListRef);
-  const { innerWidth } = window;
+  const isClientSide = useHydrated();
+  const { innerWidth } = isClientSide ? window : { innerWidth: 1e3 };
   const wideEnough = innerWidth >= tabsWidth;
   const previousTabId = (0, import_react3.useRef)(activeTabId);
   (0, import_react3.useEffect)(() => {

package/dist/tabs/tabs-list.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/tabs/tabs-list.tsx","../../src/utils.ts","../../src/tabs/context.ts"],"sourcesContent":["import type { HTMLAttributes, ReactElement, MouseEvent } from \"react\";\nimport { forwardRef, useEffect, useRef } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { type OverridableComponent, useResize } from \"../utils\";\nimport { useTabsContext } from \"./context\";\n\nexport interface TabListProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactElement<TabsTabProps> | ReactElement<TabsTabProps>[];\n\n  /**\n   * Direction of the tabs. Can either be vertical or horizontal.\n   * Horizontal breaks on window width with fallback back to vertical\n   */\n  direction?: \"vertical\" | \"horizontal\";\n}\n\nexport function TabsList({ children, direction = \"horizontal\", className, ...rest }: TabListProps) {\n  const { activeTabId } = useTabsContext();\n  const tabsListRef = useRef<HTMLDivElement>(null);\n  const { width: tabsWidth } = useResize(tabsListRef);\n  const { innerWidth } = window;\n  const wideEnough = innerWidth >= tabsWidth;\n\n  const previousTabId = useRef(activeTabId);\n\n  // Marker animation\n  useEffect(() => {\n    const tabList = tabsListRef.current;\n    const activeTab = tabList?.querySelector(`[data-tabid=\"${activeTabId}\"]`);\n    if (!activeTab || !tabList) return;\n\n    const { offsetHeight: containerHeight, offsetWidth: containerWidth } = tabList;\n    const { offsetHeight, offsetWidth, offsetTop, offsetLeft } = activeTab as HTMLElement;\n\n    // Calculate the height and width of the marker relative to the container\n    const height = offsetHeight / containerHeight;\n    const width = offsetWidth / containerWidth;\n\n    // NOTE: Doing a DOM manipulation here to set the CSS variables for the marker\n    // Not really the react idomatic way, but as long as it works we are able to skip some intermidiate `useState`\n    tabsListRef.current.style.setProperty(\"--_hds-tabs-marker-height\", String(height));\n    tabsListRef.current.style.setProperty(\"--_hds-tabs-marker-width\", String(width));\n    tabsListRef.current.style.setProperty(\"--_hds-tabs-marker-top\", `${offsetTop}px`);\n    tabsListRef.current.style.setProperty(\"--_hds-tabs-marker-left\", `${offsetLeft}px`);\n\n    // Start with border fallback, then switch to the animated marker when the user changes tabs\n    // This way the marker is placed immediately to the default tab, then animates smoothly to the next when selected\n    if (previousTabId.current !== activeTabId) {\n      tabsListRef.current.style.setProperty(\n        \"--_hds-tabs-marker-animated-color\",\n        \"var(--_hds-tabs-marker-color)\",\n      );\n      tabsListRef.current.style.setProperty(\n        \"--_hds-tabs-marker-border-fallback-color\",\n        \"transparent\",\n      );\n    }\n    previousTabId.current = activeTabId;\n  }, [activeTabId, innerWidth]);\n\n  return (\n    <div\n      className={clsx(\n        \"hds-tabs__list\",\n        direction === \"horizontal\"\n          ? {\n              \"hds-tabs__list--horizontal\": wideEnough,\n              \"hds-tabs__list--vertical\": !wideEnough,\n            }\n          : {\n              \"hds-tabs__list--vertical\": true,\n            },\n        className as undefined,\n      )}\n      ref={tabsListRef}\n      role=\"tablist\"\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n}\n\nTabsList.displayName = \"Tabs.List\";\n\nexport interface TabsTabProps extends HTMLAttributes<HTMLButtonElement> {\n  children: ReactElement<HTMLElement> | string;\n\n  /**\n   * Identifier for the tab\n   */\n  tabId: string;\n}\n\nexport const TabsTab: OverridableComponent<TabsTabProps, HTMLButtonElement> = forwardRef(\n  ({ as: Component = \"button\", children, tabId, className, onClick, ...rest }, ref) => {\n    const context = useTabsContext();\n\n    const toggleTab = (e: MouseEvent<HTMLButtonElement>) => {\n      e.preventDefault();\n      context.toggleActiveTabId(tabId);\n      onClick && onClick(e);\n    };\n    return (\n      <Component\n        className={clsx(\n          \"hds-tabs__tab\",\n          { \"hds-tabs__tab--active\": context.activeTabId === tabId },\n          className as undefined,\n        )}\n        data-tabid={tabId}\n        onClick={toggleTab}\n        ref={ref}\n        role=\"tab\"\n        {...rest}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\n\nTabsTab.displayName = \"Tabs.Tab\";\n","import type { ComponentPropsWithRef, ElementType, FC, RefAttributes } from \"react\";\nimport * as React from \"react\";\nimport { useCallback, useEffect, useState } from \"react\";\n\n/**\n * OverridableComponent makes the `as` prop available,\n * to be used to override the html element being used for a component\n *\n * Taken from digdir design system: https://github.com/digdir/designsystem/blob/main/packages/react/src/types/OverridableComponent.ts\n */\nexport type OverridableComponent<ComponentProps, Element extends HTMLElement> = {\n  (props: ComponentProps & RefAttributes<Element>): ReturnType<FC>;\n\n  <As extends ElementType>(\n    props: {\n      /** Override html element */\n      as?: As;\n    } & ComponentProps &\n      Omit<ComponentPropsWithRef<As>, keyof ComponentProps>,\n  ): ReturnType<FC>;\n} & Pick<FC, \"displayName\">;\n\n/**\n * Merges an array of refs into a single memoized callback ref or `null`.\n * @see https://floating-ui.com/docs/useMergeRefs\n */\nexport function useMergeRefs<Instance>(\n  refs: (React.Ref<Instance> | undefined)[],\n): React.RefCallback<Instance> | null {\n  return React.useMemo(() => {\n    if (refs.every((ref) => ref === null)) {\n      return null;\n    }\n\n    return (value) => {\n      refs.forEach((ref) => {\n        if (typeof ref === \"function\") {\n          ref(value);\n        } else if (ref !== null) {\n          (ref as React.MutableRefObject<Instance | null>).current = value;\n        }\n      });\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- It's ok\n  }, refs);\n}\n\nexport function useResize<Instance extends HTMLElement>(\n  ref: React.RefObject<Instance> | undefined | null,\n): { width: number; height: number } {\n  const [width, setWidth] = useState<number>(0);\n  const [height, setHeight] = useState<number>(0);\n  const handleResize = useCallback(() => {\n    if (ref?.current !== null) {\n      setWidth(ref?.current?.offsetWidth ?? 0);\n      setHeight(ref?.current?.offsetHeight ?? 0);\n    }\n  }, [ref]);\n  useEffect(() => {\n    window.addEventListener(\"load\", handleResize);\n    window.addEventListener(\"resize\", handleResize);\n    return () => {\n      window.removeEventListener(\"load\", handleResize);\n      window.removeEventListener(\"resize\", handleResize);\n    };\n  }, [ref, handleResize]);\n  useEffect(() => {\n    handleResize();\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- It's ok\n  }, []);\n  return { width, height };\n}\n","import { createContext, useContext } from \"react\";\n\nexport interface TabsContextProps {\n  activeTabId: string;\n  toggleActiveTabId: (tabId: string) => void;\n}\n\nexport const TabsContext = createContext<TabsContextProps | null>(null);\n\nexport function useTabsContext() {\n  const context = useContext(TabsContext);\n  if (!context) {\n    throw new Error(\n      \"Tabs context required. Did you use `<Tabs.List />`, `<Tabs.Tab />`, or `<Tabs.Content />` outside of <Tabs/>?\",\n    );\n  }\n  return context;\n}\n"],"mappings":"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","names":["import_react","import_react"]}
+{"version":3,"sources":["../../src/tabs/tabs-list.tsx","../../src/utils.ts","../../src/tabs/context.ts"],"sourcesContent":["import type { HTMLAttributes, ReactElement, MouseEvent } from \"react\";\nimport { forwardRef, useEffect, useRef } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { type OverridableComponent, useResize, useHydrated } from \"../utils\";\nimport { useTabsContext } from \"./context\";\n\nexport interface TabListProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactElement<TabsTabProps> | ReactElement<TabsTabProps>[];\n\n  /**\n   * Direction of the tabs. Can either be vertical or horizontal.\n   * Horizontal breaks on window width with fallback back to vertical\n   */\n  direction?: \"vertical\" | \"horizontal\";\n}\n\nexport function TabsList({ children, direction = \"horizontal\", className, ...rest }: TabListProps) {\n  const { activeTabId } = useTabsContext();\n  const tabsListRef = useRef<HTMLDivElement>(null);\n  const { width: tabsWidth } = useResize(tabsListRef);\n\n  const isClientSide = useHydrated();\n  const { innerWidth } = isClientSide ? window : { innerWidth: 1000 };\n  const wideEnough = innerWidth >= tabsWidth;\n\n  const previousTabId = useRef(activeTabId);\n\n  // Marker animation\n  useEffect(() => {\n    const tabList = tabsListRef.current;\n    const activeTab = tabList?.querySelector(`[data-tabid=\"${activeTabId}\"]`);\n    if (!activeTab || !tabList) return;\n\n    const { offsetHeight: containerHeight, offsetWidth: containerWidth } = tabList;\n    const { offsetHeight, offsetWidth, offsetTop, offsetLeft } = activeTab as HTMLElement;\n\n    // Calculate the height and width of the marker relative to the container\n    const height = offsetHeight / containerHeight;\n    const width = offsetWidth / containerWidth;\n\n    // NOTE: Doing a DOM manipulation here to set the CSS variables for the marker\n    // Not really the react idomatic way, but as long as it works we are able to skip some intermidiate `useState`\n    tabsListRef.current.style.setProperty(\"--_hds-tabs-marker-height\", String(height));\n    tabsListRef.current.style.setProperty(\"--_hds-tabs-marker-width\", String(width));\n    tabsListRef.current.style.setProperty(\"--_hds-tabs-marker-top\", `${offsetTop}px`);\n    tabsListRef.current.style.setProperty(\"--_hds-tabs-marker-left\", `${offsetLeft}px`);\n\n    // Start with border fallback, then switch to the animated marker when the user changes tabs\n    // This way the marker is placed immediately to the default tab, then animates smoothly to the next when selected\n    if (previousTabId.current !== activeTabId) {\n      tabsListRef.current.style.setProperty(\n        \"--_hds-tabs-marker-animated-color\",\n        \"var(--_hds-tabs-marker-color)\",\n      );\n      tabsListRef.current.style.setProperty(\n        \"--_hds-tabs-marker-border-fallback-color\",\n        \"transparent\",\n      );\n    }\n    previousTabId.current = activeTabId;\n  }, [activeTabId, innerWidth]);\n\n  return (\n    <div\n      className={clsx(\n        \"hds-tabs__list\",\n        direction === \"horizontal\"\n          ? {\n              \"hds-tabs__list--horizontal\": wideEnough,\n              \"hds-tabs__list--vertical\": !wideEnough,\n            }\n          : {\n              \"hds-tabs__list--vertical\": true,\n            },\n        className as undefined,\n      )}\n      ref={tabsListRef}\n      role=\"tablist\"\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n}\n\nTabsList.displayName = \"Tabs.List\";\n\nexport interface TabsTabProps extends HTMLAttributes<HTMLButtonElement> {\n  children: ReactElement<HTMLElement> | string;\n\n  /**\n   * Identifier for the tab\n   */\n  tabId: string;\n}\n\nexport const TabsTab: OverridableComponent<TabsTabProps, HTMLButtonElement> = forwardRef(\n  ({ as: Component = \"button\", children, tabId, className, onClick, ...rest }, ref) => {\n    const context = useTabsContext();\n\n    const toggleTab = (e: MouseEvent<HTMLButtonElement>) => {\n      e.preventDefault();\n      context.toggleActiveTabId(tabId);\n      onClick && onClick(e);\n    };\n    return (\n      <Component\n        className={clsx(\n          \"hds-tabs__tab\",\n          { \"hds-tabs__tab--active\": context.activeTabId === tabId },\n          className as undefined,\n        )}\n        data-tabid={tabId}\n        onClick={toggleTab}\n        ref={ref}\n        role=\"tab\"\n        {...rest}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\n\nTabsTab.displayName = \"Tabs.Tab\";\n","import type { ComponentPropsWithRef, ElementType, FC, RefAttributes } from \"react\";\nimport * as React from \"react\";\nimport { useCallback, useEffect, useState } from \"react\";\n\n/**\n * OverridableComponent makes the `as` prop available,\n * to be used to override the html element being used for a component\n *\n * Taken from digdir design system: https://github.com/digdir/designsystem/blob/main/packages/react/src/types/OverridableComponent.ts\n */\nexport type OverridableComponent<ComponentProps, Element extends HTMLElement> = {\n  (props: ComponentProps & RefAttributes<Element>): ReturnType<FC>;\n\n  <As extends ElementType>(\n    props: {\n      /** Override html element */\n      as?: As;\n    } & ComponentProps &\n      Omit<ComponentPropsWithRef<As>, keyof ComponentProps>,\n  ): ReturnType<FC>;\n} & Pick<FC, \"displayName\">;\n\n/**\n * Merges an array of refs into a single memoized callback ref or `null`.\n * @see https://floating-ui.com/docs/useMergeRefs\n */\nexport function useMergeRefs<Instance>(\n  refs: (React.Ref<Instance> | undefined)[],\n): React.RefCallback<Instance> | null {\n  return React.useMemo(() => {\n    if (refs.every((ref) => ref === null)) {\n      return null;\n    }\n\n    return (value) => {\n      refs.forEach((ref) => {\n        if (typeof ref === \"function\") {\n          ref(value);\n        } else if (ref !== null) {\n          (ref as React.MutableRefObject<Instance | null>).current = value;\n        }\n      });\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- It's ok\n  }, refs);\n}\n\nexport function useResize<Instance extends HTMLElement>(\n  ref: React.RefObject<Instance> | undefined | null,\n): { width: number; height: number } {\n  const [width, setWidth] = useState<number>(0);\n  const [height, setHeight] = useState<number>(0);\n  const handleResize = useCallback(() => {\n    if (ref?.current !== null) {\n      setWidth(ref?.current?.offsetWidth ?? 0);\n      setHeight(ref?.current?.offsetHeight ?? 0);\n    }\n  }, [ref]);\n  useEffect(() => {\n    window.addEventListener(\"load\", handleResize);\n    window.addEventListener(\"resize\", handleResize);\n    return () => {\n      window.removeEventListener(\"load\", handleResize);\n      window.removeEventListener(\"resize\", handleResize);\n    };\n  }, [ref, handleResize]);\n  useEffect(() => {\n    handleResize();\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- It's ok\n  }, []);\n  return { width, height };\n}\n\nfunction subscribe() {\n  // eslint-disable-next-line @typescript-eslint/no-empty-function -- It's ok\n  return () => {};\n}\n\nexport function useHydrated() {\n  return React.useSyncExternalStore(\n    subscribe,\n    () => true,\n    () => false,\n  );\n}\n","import { createContext, useContext } from \"react\";\n\nexport interface TabsContextProps {\n  activeTabId: string;\n  toggleActiveTabId: (tabId: string) => void;\n}\n\nexport const TabsContext = createContext<TabsContextProps | null>(null);\n\nexport function useTabsContext() {\n  const context = useContext(TabsContext);\n  if (!context) {\n    throw new Error(\n      \"Tabs context required. Did you use `<Tabs.List />`, `<Tabs.Tab />`, or `<Tabs.Content />` outside of <Tabs/>?\",\n    );\n  }\n  return context;\n}\n"],"mappings":"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","names":["import_react","import_react"]}

package/dist/tabs/tabs-list.mjs

@@ -1,9 +1,9 @@
 import {
   TabsList,
   TabsTab
-} from "../chunk-CLXHNRAI.mjs";
+} from "../chunk-B56JZJOS.mjs";
 import "../chunk-KQITCS3U.mjs";
-import "../chunk-WCA2WPFS.mjs";
+import "../chunk-ZL56N4UK.mjs";
 import "../chunk-R4SQKVDQ.mjs";
 export {
   TabsList,

package/dist/utils.d.mts

@@ -1,3 +1,4 @@
 export { useMergeRefs } from './_tsup-dts-rollup';
 export { useResize } from './_tsup-dts-rollup';
+export { useHydrated } from './_tsup-dts-rollup';
 export { OverridableComponent } from './_tsup-dts-rollup';

package/dist/utils.d.ts

@@ -1,3 +1,4 @@
 export { useMergeRefs } from './_tsup-dts-rollup';
 export { useResize } from './_tsup-dts-rollup';
+export { useHydrated } from './_tsup-dts-rollup';
 export { OverridableComponent } from './_tsup-dts-rollup';

package/dist/utils.js

@@ -30,6 +30,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/utils.ts
 var utils_exports = {};
 __export(utils_exports, {
+  useHydrated: () => useHydrated,
   useMergeRefs: () => useMergeRefs,
   useResize: () => useResize
 });
@@ -75,8 +76,20 @@ function useResize(ref) {
   }, []);
   return { width, height };
 }
+function subscribe() {
+  return () => {
+  };
+}
+function useHydrated() {
+  return React.useSyncExternalStore(
+    subscribe,
+    () => true,
+    () => false
+  );
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  useHydrated,
   useMergeRefs,
   useResize
 });

package/dist/utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/utils.ts"],"sourcesContent":["import type { ComponentPropsWithRef, ElementType, FC, RefAttributes } from \"react\";\nimport * as React from \"react\";\nimport { useCallback, useEffect, useState } from \"react\";\n\n/**\n * OverridableComponent makes the `as` prop available,\n * to be used to override the html element being used for a component\n *\n * Taken from digdir design system: https://github.com/digdir/designsystem/blob/main/packages/react/src/types/OverridableComponent.ts\n */\nexport type OverridableComponent<ComponentProps, Element extends HTMLElement> = {\n  (props: ComponentProps & RefAttributes<Element>): ReturnType<FC>;\n\n  <As extends ElementType>(\n    props: {\n      /** Override html element */\n      as?: As;\n    } & ComponentProps &\n      Omit<ComponentPropsWithRef<As>, keyof ComponentProps>,\n  ): ReturnType<FC>;\n} & Pick<FC, \"displayName\">;\n\n/**\n * Merges an array of refs into a single memoized callback ref or `null`.\n * @see https://floating-ui.com/docs/useMergeRefs\n */\nexport function useMergeRefs<Instance>(\n  refs: (React.Ref<Instance> | undefined)[],\n): React.RefCallback<Instance> | null {\n  return React.useMemo(() => {\n    if (refs.every((ref) => ref === null)) {\n      return null;\n    }\n\n    return (value) => {\n      refs.forEach((ref) => {\n        if (typeof ref === \"function\") {\n          ref(value);\n        } else if (ref !== null) {\n          (ref as React.MutableRefObject<Instance | null>).current = value;\n        }\n      });\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- It's ok\n  }, refs);\n}\n\nexport function useResize<Instance extends HTMLElement>(\n  ref: React.RefObject<Instance> | undefined | null,\n): { width: number; height: number } {\n  const [width, setWidth] = useState<number>(0);\n  const [height, setHeight] = useState<number>(0);\n  const handleResize = useCallback(() => {\n    if (ref?.current !== null) {\n      setWidth(ref?.current?.offsetWidth ?? 0);\n      setHeight(ref?.current?.offsetHeight ?? 0);\n    }\n  }, [ref]);\n  useEffect(() => {\n    window.addEventListener(\"load\", handleResize);\n    window.addEventListener(\"resize\", handleResize);\n    return () => {\n      window.removeEventListener(\"load\", handleResize);\n      window.removeEventListener(\"resize\", handleResize);\n    };\n  }, [ref, handleResize]);\n  useEffect(() => {\n    handleResize();\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- It's ok\n  }, []);\n  return { width, height };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,YAAuB;AACvB,mBAAiD;AAwB1C,SAAS,aACd,MACoC;AACpC,SAAa,cAAQ,MAAM;AACzB,QAAI,KAAK,MAAM,CAAC,QAAQ,QAAQ,IAAI,GAAG;AACrC,aAAO;AAAA,IACT;AAEA,WAAO,CAAC,UAAU;AAChB,WAAK,QAAQ,CAAC,QAAQ;AACpB,YAAI,OAAO,QAAQ,YAAY;AAC7B,cAAI,KAAK;AAAA,QACX,WAAW,QAAQ,MAAM;AACvB,UAAC,IAAgD,UAAU;AAAA,QAC7D;AAAA,MACF,CAAC;AAAA,IACH;AAAA,EAEF,GAAG,IAAI;AACT;AAEO,SAAS,UACd,KACmC;AACnC,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAiB,CAAC;AAC5C,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAAiB,CAAC;AAC9C,QAAM,mBAAe,0BAAY,MAAM;AApDzC;AAqDI,SAAI,2BAAK,aAAY,MAAM;AACzB,gBAAS,sCAAK,YAAL,mBAAc,gBAAd,YAA6B,CAAC;AACvC,iBAAU,sCAAK,YAAL,mBAAc,iBAAd,YAA8B,CAAC;AAAA,IAC3C;AAAA,EACF,GAAG,CAAC,GAAG,CAAC;AACR,8BAAU,MAAM;AACd,WAAO,iBAAiB,QAAQ,YAAY;AAC5C,WAAO,iBAAiB,UAAU,YAAY;AAC9C,WAAO,MAAM;AACX,aAAO,oBAAoB,QAAQ,YAAY;AAC/C,aAAO,oBAAoB,UAAU,YAAY;AAAA,IACnD;AAAA,EACF,GAAG,CAAC,KAAK,YAAY,CAAC;AACtB,8BAAU,MAAM;AACd,iBAAa;AAAA,EAEf,GAAG,CAAC,CAAC;AACL,SAAO,EAAE,OAAO,OAAO;AACzB;","names":[]}
+{"version":3,"sources":["../src/utils.ts"],"sourcesContent":["import type { ComponentPropsWithRef, ElementType, FC, RefAttributes } from \"react\";\nimport * as React from \"react\";\nimport { useCallback, useEffect, useState } from \"react\";\n\n/**\n * OverridableComponent makes the `as` prop available,\n * to be used to override the html element being used for a component\n *\n * Taken from digdir design system: https://github.com/digdir/designsystem/blob/main/packages/react/src/types/OverridableComponent.ts\n */\nexport type OverridableComponent<ComponentProps, Element extends HTMLElement> = {\n  (props: ComponentProps & RefAttributes<Element>): ReturnType<FC>;\n\n  <As extends ElementType>(\n    props: {\n      /** Override html element */\n      as?: As;\n    } & ComponentProps &\n      Omit<ComponentPropsWithRef<As>, keyof ComponentProps>,\n  ): ReturnType<FC>;\n} & Pick<FC, \"displayName\">;\n\n/**\n * Merges an array of refs into a single memoized callback ref or `null`.\n * @see https://floating-ui.com/docs/useMergeRefs\n */\nexport function useMergeRefs<Instance>(\n  refs: (React.Ref<Instance> | undefined)[],\n): React.RefCallback<Instance> | null {\n  return React.useMemo(() => {\n    if (refs.every((ref) => ref === null)) {\n      return null;\n    }\n\n    return (value) => {\n      refs.forEach((ref) => {\n        if (typeof ref === \"function\") {\n          ref(value);\n        } else if (ref !== null) {\n          (ref as React.MutableRefObject<Instance | null>).current = value;\n        }\n      });\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- It's ok\n  }, refs);\n}\n\nexport function useResize<Instance extends HTMLElement>(\n  ref: React.RefObject<Instance> | undefined | null,\n): { width: number; height: number } {\n  const [width, setWidth] = useState<number>(0);\n  const [height, setHeight] = useState<number>(0);\n  const handleResize = useCallback(() => {\n    if (ref?.current !== null) {\n      setWidth(ref?.current?.offsetWidth ?? 0);\n      setHeight(ref?.current?.offsetHeight ?? 0);\n    }\n  }, [ref]);\n  useEffect(() => {\n    window.addEventListener(\"load\", handleResize);\n    window.addEventListener(\"resize\", handleResize);\n    return () => {\n      window.removeEventListener(\"load\", handleResize);\n      window.removeEventListener(\"resize\", handleResize);\n    };\n  }, [ref, handleResize]);\n  useEffect(() => {\n    handleResize();\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- It's ok\n  }, []);\n  return { width, height };\n}\n\nfunction subscribe() {\n  // eslint-disable-next-line @typescript-eslint/no-empty-function -- It's ok\n  return () => {};\n}\n\nexport function useHydrated() {\n  return React.useSyncExternalStore(\n    subscribe,\n    () => true,\n    () => false,\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,YAAuB;AACvB,mBAAiD;AAwB1C,SAAS,aACd,MACoC;AACpC,SAAa,cAAQ,MAAM;AACzB,QAAI,KAAK,MAAM,CAAC,QAAQ,QAAQ,IAAI,GAAG;AACrC,aAAO;AAAA,IACT;AAEA,WAAO,CAAC,UAAU;AAChB,WAAK,QAAQ,CAAC,QAAQ;AACpB,YAAI,OAAO,QAAQ,YAAY;AAC7B,cAAI,KAAK;AAAA,QACX,WAAW,QAAQ,MAAM;AACvB,UAAC,IAAgD,UAAU;AAAA,QAC7D;AAAA,MACF,CAAC;AAAA,IACH;AAAA,EAEF,GAAG,IAAI;AACT;AAEO,SAAS,UACd,KACmC;AACnC,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAiB,CAAC;AAC5C,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAAiB,CAAC;AAC9C,QAAM,mBAAe,0BAAY,MAAM;AApDzC;AAqDI,SAAI,2BAAK,aAAY,MAAM;AACzB,gBAAS,sCAAK,YAAL,mBAAc,gBAAd,YAA6B,CAAC;AACvC,iBAAU,sCAAK,YAAL,mBAAc,iBAAd,YAA8B,CAAC;AAAA,IAC3C;AAAA,EACF,GAAG,CAAC,GAAG,CAAC;AACR,8BAAU,MAAM;AACd,WAAO,iBAAiB,QAAQ,YAAY;AAC5C,WAAO,iBAAiB,UAAU,YAAY;AAC9C,WAAO,MAAM;AACX,aAAO,oBAAoB,QAAQ,YAAY;AAC/C,aAAO,oBAAoB,UAAU,YAAY;AAAA,IACnD;AAAA,EACF,GAAG,CAAC,KAAK,YAAY,CAAC;AACtB,8BAAU,MAAM;AACd,iBAAa;AAAA,EAEf,GAAG,CAAC,CAAC;AACL,SAAO,EAAE,OAAO,OAAO;AACzB;AAEA,SAAS,YAAY;AAEnB,SAAO,MAAM;AAAA,EAAC;AAChB;AAEO,SAAS,cAAc;AAC5B,SAAa;AAAA,IACX;AAAA,IACA,MAAM;AAAA,IACN,MAAM;AAAA,EACR;AACF;","names":[]}

package/dist/utils.mjs

@@ -1,9 +1,11 @@
 import {
+  useHydrated,
   useMergeRefs,
   useResize
-} from "./chunk-WCA2WPFS.mjs";
+} from "./chunk-ZL56N4UK.mjs";
 import "./chunk-R4SQKVDQ.mjs";
 export {
+  useHydrated,
   useMergeRefs,
   useResize
 };

package/dist/warning-banner/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/warning-banner/index.tsx","../../src/warning-banner/warning-banner.tsx","../../src/box/box.tsx","../../src/box/index.tsx"],"sourcesContent":["export { WarningBanner } from \"./warning-banner\";\nexport type * from \"./warning-banner\";\n","import type { ReactNode } from \"react\";\nimport { forwardRef, useState } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport type { OverridableComponent } from \"../utils\";\nimport { Box } from \"../box\";\n\nexport interface WarningBannerProps {\n  title: ReactNode;\n  description?: ReactNode;\n}\n\nexport const WarningBanner: OverridableComponent<WarningBannerProps, HTMLDivElement> = forwardRef(\n  ({ title, description, className, ...rest }, ref) => {\n    const expandable = !!description;\n    return (\n      <Box {...rest} className={clsx(\"hds-warning-banner\", className as undefined)} ref={ref}>\n        <WarningBannerTitle variant={expandable ? \"expandable\" : \"default\"}>\n          {title}\n        </WarningBannerTitle>\n        {expandable ? <WarningBannerDescription>{description}</WarningBannerDescription> : null}\n      </Box>\n    );\n  },\n);\nWarningBanner.displayName = \"WarningBanner\";\n\ninterface WarningBannerTitleProps {\n  variant: \"expandable\" | \"default\";\n  children: ReactNode;\n}\n\nconst WarningBannerTitle: OverridableComponent<WarningBannerTitleProps, HTMLDivElement> =\n  forwardRef(\n    (\n      {\n        variant,\n        as: Component = variant === \"expandable\" ? \"button\" : \"p\",\n        children,\n        className,\n        ...rest\n      },\n      ref,\n    ) => {\n      const [open, setOpen] = useState<boolean>(false);\n      if (variant === \"expandable\") {\n        return (\n          <Component\n            className={clsx(\n              \"hds-warning-banner__title\",\n              \"hds-warning-banner__title-trigger\",\n              { \"hds-warning-banner--closed\": !open },\n              className as undefined,\n            )}\n            onClick={() => {\n              setOpen(!open);\n            }}\n            ref={ref}\n            type=\"button\"\n            {...rest}\n          >\n            <span>{children}</span>\n          </Component>\n        );\n      }\n      return (\n        <Component\n          className={clsx(\"hds-warning-banner__title\", className as undefined)}\n          ref={ref}\n          {...rest}\n        >\n          {children}\n        </Component>\n      );\n    },\n  );\nWarningBannerTitle.displayName = \"WarningBannerTitle\";\n\nconst WarningBannerDescription: OverridableComponent<object, HTMLParagraphElement> = forwardRef(\n  ({ as: Component = \"p\", className, ...rest }, ref) => {\n    return (\n      <Component\n        className={clsx(\"hds-warning-banner__description\", className as undefined)}\n        ref={ref}\n        {...rest}\n      />\n    );\n  },\n);\nWarningBannerDescription.displayName = \"WarningBannerDescription\";\n","import { forwardRef, useCallback, useState } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport type { OverridableComponent } from \"../utils\";\n\nexport interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {\n  variant?: \"light-grey\" | \"lighter\" | \"white\" | \"warning\";\n  children?: React.ReactNode;\n\n  /**\n   * If `true`, a close button will be shown.\n   * Use when you want to control the close button using the BoxCloseButton component.\n   */\n  closeable?: boolean;\n\n  /**\n   * Callback fired when the component requests to be closed.\n   * If not set, the component will be closed without any user interaction.\n   *\n   * If set, and the handler returns non-true value, the component will not be closed.\n   * Use this if you want to control the closing of the component, using the `closed` prop\n   *\n   * If set, and the handler returns the true, the component will be closed.\n   * Use this with `window.confirm()` to ask the user to confirm closing the component.\n   */\n  // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents -- It's fine, I want to have the boolean in the type\n  onClose?: () => boolean | unknown;\n\n  /**\n   * If `true`, the box will be closed and hidden from view\n   */\n  closed?: boolean;\n\n  /**\n   * Props applied to the close button element.\n   */\n  closeButtonProps?: BoxCloseButtonProps;\n}\n\nexport const Box: OverridableComponent<BoxProps, HTMLDivElement> = forwardRef(\n  (\n    {\n      as: Component = \"div\",\n      variant,\n      closeable = false,\n      onClose: onCloseProp,\n      closed: closedProp,\n      closeButtonProps,\n      children,\n      className,\n      ...rest\n    },\n    ref,\n  ) => {\n    const [closedState, setClosedState] = useState(false);\n    const onClose = useCallback(() => {\n      if (onCloseProp) {\n        const result = onCloseProp();\n        if (result === true) {\n          setClosedState(true);\n        }\n      } else {\n        setClosedState(true);\n      }\n      // eslint-disable-next-line react-hooks/exhaustive-deps -- I know better\n    }, []);\n    const closed = closedProp ?? closedState;\n\n    return (\n      <Component\n        className={clsx(\n          \"hds-box\",\n          variant && `hds-box--${variant}`,\n          { \"hds-box--closed\": closed },\n          className as undefined,\n        )}\n        ref={ref}\n        {...rest}\n      >\n        {closeable ? <BoxCloseButton onClick={onClose} {...closeButtonProps} /> : null}\n        {children}\n      </Component>\n    );\n  },\n);\nBox.displayName = \"Box\";\n\nexport type BoxCloseButtonProps = Omit<React.HTMLAttributes<HTMLButtonElement>, \"children\">;\nexport const BoxCloseButton = forwardRef<HTMLButtonElement, BoxCloseButtonProps>(\n  ({ className, ...rest }, ref) => {\n    return (\n      <button\n        className={clsx(\"hds-box__close-button\", className as undefined)}\n        ref={ref}\n        type=\"button\"\n        {...rest}\n      />\n    );\n  },\n);\nBoxCloseButton.displayName = \"Box.CloseButton\";\n","import { Box, BoxCloseButton } from \"./box\";\n\nconst BoxComponent = Box as typeof Box & {\n  CloseButton: typeof BoxCloseButton;\n};\nBoxComponent.CloseButton = BoxCloseButton;\n\nexport { BoxComponent as Box };\n\nexport type * from \"./box\";\n"],"mappings":"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","names":["import_react","import_typed_classname","import_jsx_runtime"]}
+{"version":3,"sources":["../../src/warning-banner/index.tsx","../../src/warning-banner/warning-banner.tsx","../../src/box/box.tsx","../../src/box/index.tsx"],"sourcesContent":["export { WarningBanner } from \"./warning-banner\";\nexport type * from \"./warning-banner\";\n","import type { ReactNode } from \"react\";\nimport { forwardRef, useState } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport type { OverridableComponent } from \"../utils\";\nimport { Box } from \"../box\";\n\nexport interface WarningBannerProps {\n  title: ReactNode;\n  description?: ReactNode;\n}\n\nexport const WarningBanner: OverridableComponent<WarningBannerProps, HTMLDivElement> = forwardRef(\n  ({ title, description, className, ...rest }, ref) => {\n    const expandable = !!description;\n    return (\n      <Box {...rest} className={clsx(\"hds-warning-banner\", className as undefined)} ref={ref}>\n        <WarningBannerTitle variant={expandable ? \"expandable\" : \"default\"}>\n          {title}\n        </WarningBannerTitle>\n        {expandable ? <WarningBannerDescription>{description}</WarningBannerDescription> : null}\n      </Box>\n    );\n  },\n);\nWarningBanner.displayName = \"WarningBanner\";\n\ninterface WarningBannerTitleProps {\n  variant: \"expandable\" | \"default\";\n  children: ReactNode;\n}\n\nconst WarningBannerTitle: OverridableComponent<WarningBannerTitleProps, HTMLDivElement> =\n  forwardRef(\n    (\n      {\n        variant,\n        as: Component = variant === \"expandable\" ? \"button\" : \"p\",\n        children,\n        className,\n        ...rest\n      },\n      ref,\n    ) => {\n      const [open, setOpen] = useState<boolean>(false);\n      if (variant === \"expandable\") {\n        return (\n          <Component\n            className={clsx(\n              \"hds-warning-banner__title\",\n              \"hds-warning-banner__title-trigger\",\n              { \"hds-warning-banner--closed\": !open },\n              className as undefined,\n            )}\n            onClick={() => {\n              setOpen(!open);\n            }}\n            ref={ref}\n            type=\"button\"\n            {...rest}\n          >\n            <span>{children}</span>\n          </Component>\n        );\n      }\n      return (\n        <Component\n          className={clsx(\"hds-warning-banner__title\", className as undefined)}\n          ref={ref}\n          {...rest}\n        >\n          {children}\n        </Component>\n      );\n    },\n  );\nWarningBannerTitle.displayName = \"WarningBannerTitle\";\n\nconst WarningBannerDescription: OverridableComponent<object, HTMLParagraphElement> = forwardRef(\n  ({ as: Component = \"p\", className, ...rest }, ref) => {\n    return (\n      <Component\n        className={clsx(\"hds-warning-banner__description\", className as undefined)}\n        ref={ref}\n        {...rest}\n      />\n    );\n  },\n);\nWarningBannerDescription.displayName = \"WarningBannerDescription\";\n","import { forwardRef, useCallback, useState } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport type { OverridableComponent } from \"../utils\";\n\nexport interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {\n  variant?: \"light-grey\" | \"lighter\" | \"white\" | \"warning\";\n  children?: React.ReactNode;\n\n  /**\n   * If `true`, a close button will be shown.\n   * Use when you want to control the close button using the BoxCloseButton component.\n   */\n  closeable?: boolean;\n\n  /**\n   * Callback fired when the component requests to be closed.\n   * If not set, the component will be closed without any user interaction.\n   *\n   * If set, and the handler returns non-true value, the component will not be closed.\n   * Use this if you want to control the closing of the component, using the `closed` prop\n   *\n   * If set, and the handler returns the true, the component will be closed.\n   * Use this with `window.confirm()` to ask the user to confirm closing the component.\n   */\n  // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents -- It's fine, I want to have the boolean in the type\n  onClose?: () => boolean | unknown;\n\n  /**\n   * If `true`, the box will be closed and hidden from view\n   */\n  closed?: boolean;\n\n  /**\n   * Props applied to the close button element.\n   */\n  closeButtonProps?: BoxCloseButtonProps;\n}\n\nexport const Box: OverridableComponent<BoxProps, HTMLDivElement> = forwardRef(\n  (\n    {\n      as: Component = \"div\",\n      variant,\n      closeable = false,\n      onClose: onCloseProp,\n      closed: closedProp,\n      closeButtonProps,\n      children,\n      className,\n      ...rest\n    },\n    ref,\n  ) => {\n    const [closedState, setClosedState] = useState(false);\n    const onClose = useCallback(() => {\n      if (onCloseProp) {\n        const result = onCloseProp();\n        if (result === true) {\n          setClosedState(true);\n        }\n      } else {\n        setClosedState(true);\n      }\n      // eslint-disable-next-line react-hooks/exhaustive-deps -- I know better\n    }, []);\n    const closed = closedProp ?? closedState;\n\n    return (\n      <Component\n        className={clsx(\n          \"hds-box\",\n          variant && `hds-box--${variant}`,\n          { \"hds-box--closed\": closed },\n          className as undefined,\n        )}\n        ref={ref}\n        {...rest}\n      >\n        {closeable ? <BoxCloseButton onClick={onClose} {...closeButtonProps} /> : null}\n        {children}\n      </Component>\n    );\n  },\n);\nBox.displayName = \"Box\";\n\nexport type BoxCloseButtonProps = Omit<React.HTMLAttributes<HTMLButtonElement>, \"children\">;\nexport const BoxCloseButton = forwardRef<HTMLButtonElement, BoxCloseButtonProps>(\n  ({ className, ...rest }, ref) => {\n    return (\n      <button\n        className={clsx(\"hds-box__close-button\", className as undefined)}\n        ref={ref}\n        type=\"button\"\n        {...rest}\n      />\n    );\n  },\n);\nBoxCloseButton.displayName = \"Box.CloseButton\";\n","import { Box, BoxCloseButton } from \"./box\";\n\nconst BoxComponent = Box as typeof Box & {\n  CloseButton: typeof BoxCloseButton;\n};\nBoxComponent.CloseButton = BoxCloseButton;\n\nexport { BoxComponent as Box, BoxCloseButton };\n\nexport type * from \"./box\";\n"],"mappings":"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","names":["import_react","import_typed_classname","import_jsx_runtime"]}

package/dist/warning-banner/index.mjs

@@ -1,8 +1,8 @@
 import "../chunk-3D2MWIEX.mjs";
 import {
   WarningBanner
-} from "../chunk-IAS3E2S3.mjs";
-import "../chunk-BZNDK3KJ.mjs";
+} from "../chunk-PUESATBQ.mjs";
+import "../chunk-NMMFIRLZ.mjs";
 import "../chunk-EGXM575K.mjs";
 import "../chunk-R4SQKVDQ.mjs";
 export {

package/dist/warning-banner/warning-banner.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/warning-banner/warning-banner.tsx","../../src/box/box.tsx","../../src/box/index.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { forwardRef, useState } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport type { OverridableComponent } from \"../utils\";\nimport { Box } from \"../box\";\n\nexport interface WarningBannerProps {\n  title: ReactNode;\n  description?: ReactNode;\n}\n\nexport const WarningBanner: OverridableComponent<WarningBannerProps, HTMLDivElement> = forwardRef(\n  ({ title, description, className, ...rest }, ref) => {\n    const expandable = !!description;\n    return (\n      <Box {...rest} className={clsx(\"hds-warning-banner\", className as undefined)} ref={ref}>\n        <WarningBannerTitle variant={expandable ? \"expandable\" : \"default\"}>\n          {title}\n        </WarningBannerTitle>\n        {expandable ? <WarningBannerDescription>{description}</WarningBannerDescription> : null}\n      </Box>\n    );\n  },\n);\nWarningBanner.displayName = \"WarningBanner\";\n\ninterface WarningBannerTitleProps {\n  variant: \"expandable\" | \"default\";\n  children: ReactNode;\n}\n\nconst WarningBannerTitle: OverridableComponent<WarningBannerTitleProps, HTMLDivElement> =\n  forwardRef(\n    (\n      {\n        variant,\n        as: Component = variant === \"expandable\" ? \"button\" : \"p\",\n        children,\n        className,\n        ...rest\n      },\n      ref,\n    ) => {\n      const [open, setOpen] = useState<boolean>(false);\n      if (variant === \"expandable\") {\n        return (\n          <Component\n            className={clsx(\n              \"hds-warning-banner__title\",\n              \"hds-warning-banner__title-trigger\",\n              { \"hds-warning-banner--closed\": !open },\n              className as undefined,\n            )}\n            onClick={() => {\n              setOpen(!open);\n            }}\n            ref={ref}\n            type=\"button\"\n            {...rest}\n          >\n            <span>{children}</span>\n          </Component>\n        );\n      }\n      return (\n        <Component\n          className={clsx(\"hds-warning-banner__title\", className as undefined)}\n          ref={ref}\n          {...rest}\n        >\n          {children}\n        </Component>\n      );\n    },\n  );\nWarningBannerTitle.displayName = \"WarningBannerTitle\";\n\nconst WarningBannerDescription: OverridableComponent<object, HTMLParagraphElement> = forwardRef(\n  ({ as: Component = \"p\", className, ...rest }, ref) => {\n    return (\n      <Component\n        className={clsx(\"hds-warning-banner__description\", className as undefined)}\n        ref={ref}\n        {...rest}\n      />\n    );\n  },\n);\nWarningBannerDescription.displayName = \"WarningBannerDescription\";\n","import { forwardRef, useCallback, useState } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport type { OverridableComponent } from \"../utils\";\n\nexport interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {\n  variant?: \"light-grey\" | \"lighter\" | \"white\" | \"warning\";\n  children?: React.ReactNode;\n\n  /**\n   * If `true`, a close button will be shown.\n   * Use when you want to control the close button using the BoxCloseButton component.\n   */\n  closeable?: boolean;\n\n  /**\n   * Callback fired when the component requests to be closed.\n   * If not set, the component will be closed without any user interaction.\n   *\n   * If set, and the handler returns non-true value, the component will not be closed.\n   * Use this if you want to control the closing of the component, using the `closed` prop\n   *\n   * If set, and the handler returns the true, the component will be closed.\n   * Use this with `window.confirm()` to ask the user to confirm closing the component.\n   */\n  // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents -- It's fine, I want to have the boolean in the type\n  onClose?: () => boolean | unknown;\n\n  /**\n   * If `true`, the box will be closed and hidden from view\n   */\n  closed?: boolean;\n\n  /**\n   * Props applied to the close button element.\n   */\n  closeButtonProps?: BoxCloseButtonProps;\n}\n\nexport const Box: OverridableComponent<BoxProps, HTMLDivElement> = forwardRef(\n  (\n    {\n      as: Component = \"div\",\n      variant,\n      closeable = false,\n      onClose: onCloseProp,\n      closed: closedProp,\n      closeButtonProps,\n      children,\n      className,\n      ...rest\n    },\n    ref,\n  ) => {\n    const [closedState, setClosedState] = useState(false);\n    const onClose = useCallback(() => {\n      if (onCloseProp) {\n        const result = onCloseProp();\n        if (result === true) {\n          setClosedState(true);\n        }\n      } else {\n        setClosedState(true);\n      }\n      // eslint-disable-next-line react-hooks/exhaustive-deps -- I know better\n    }, []);\n    const closed = closedProp ?? closedState;\n\n    return (\n      <Component\n        className={clsx(\n          \"hds-box\",\n          variant && `hds-box--${variant}`,\n          { \"hds-box--closed\": closed },\n          className as undefined,\n        )}\n        ref={ref}\n        {...rest}\n      >\n        {closeable ? <BoxCloseButton onClick={onClose} {...closeButtonProps} /> : null}\n        {children}\n      </Component>\n    );\n  },\n);\nBox.displayName = \"Box\";\n\nexport type BoxCloseButtonProps = Omit<React.HTMLAttributes<HTMLButtonElement>, \"children\">;\nexport const BoxCloseButton = forwardRef<HTMLButtonElement, BoxCloseButtonProps>(\n  ({ className, ...rest }, ref) => {\n    return (\n      <button\n        className={clsx(\"hds-box__close-button\", className as undefined)}\n        ref={ref}\n        type=\"button\"\n        {...rest}\n      />\n    );\n  },\n);\nBoxCloseButton.displayName = \"Box.CloseButton\";\n","import { Box, BoxCloseButton } from \"./box\";\n\nconst BoxComponent = Box as typeof Box & {\n  CloseButton: typeof BoxCloseButton;\n};\nBoxComponent.CloseButton = BoxCloseButton;\n\nexport { BoxComponent as Box };\n\nexport type * from \"./box\";\n"],"mappings":"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","names":["import_react","import_typed_classname","import_jsx_runtime"]}
+{"version":3,"sources":["../../src/warning-banner/warning-banner.tsx","../../src/box/box.tsx","../../src/box/index.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { forwardRef, useState } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport type { OverridableComponent } from \"../utils\";\nimport { Box } from \"../box\";\n\nexport interface WarningBannerProps {\n  title: ReactNode;\n  description?: ReactNode;\n}\n\nexport const WarningBanner: OverridableComponent<WarningBannerProps, HTMLDivElement> = forwardRef(\n  ({ title, description, className, ...rest }, ref) => {\n    const expandable = !!description;\n    return (\n      <Box {...rest} className={clsx(\"hds-warning-banner\", className as undefined)} ref={ref}>\n        <WarningBannerTitle variant={expandable ? \"expandable\" : \"default\"}>\n          {title}\n        </WarningBannerTitle>\n        {expandable ? <WarningBannerDescription>{description}</WarningBannerDescription> : null}\n      </Box>\n    );\n  },\n);\nWarningBanner.displayName = \"WarningBanner\";\n\ninterface WarningBannerTitleProps {\n  variant: \"expandable\" | \"default\";\n  children: ReactNode;\n}\n\nconst WarningBannerTitle: OverridableComponent<WarningBannerTitleProps, HTMLDivElement> =\n  forwardRef(\n    (\n      {\n        variant,\n        as: Component = variant === \"expandable\" ? \"button\" : \"p\",\n        children,\n        className,\n        ...rest\n      },\n      ref,\n    ) => {\n      const [open, setOpen] = useState<boolean>(false);\n      if (variant === \"expandable\") {\n        return (\n          <Component\n            className={clsx(\n              \"hds-warning-banner__title\",\n              \"hds-warning-banner__title-trigger\",\n              { \"hds-warning-banner--closed\": !open },\n              className as undefined,\n            )}\n            onClick={() => {\n              setOpen(!open);\n            }}\n            ref={ref}\n            type=\"button\"\n            {...rest}\n          >\n            <span>{children}</span>\n          </Component>\n        );\n      }\n      return (\n        <Component\n          className={clsx(\"hds-warning-banner__title\", className as undefined)}\n          ref={ref}\n          {...rest}\n        >\n          {children}\n        </Component>\n      );\n    },\n  );\nWarningBannerTitle.displayName = \"WarningBannerTitle\";\n\nconst WarningBannerDescription: OverridableComponent<object, HTMLParagraphElement> = forwardRef(\n  ({ as: Component = \"p\", className, ...rest }, ref) => {\n    return (\n      <Component\n        className={clsx(\"hds-warning-banner__description\", className as undefined)}\n        ref={ref}\n        {...rest}\n      />\n    );\n  },\n);\nWarningBannerDescription.displayName = \"WarningBannerDescription\";\n","import { forwardRef, useCallback, useState } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport type { OverridableComponent } from \"../utils\";\n\nexport interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {\n  variant?: \"light-grey\" | \"lighter\" | \"white\" | \"warning\";\n  children?: React.ReactNode;\n\n  /**\n   * If `true`, a close button will be shown.\n   * Use when you want to control the close button using the BoxCloseButton component.\n   */\n  closeable?: boolean;\n\n  /**\n   * Callback fired when the component requests to be closed.\n   * If not set, the component will be closed without any user interaction.\n   *\n   * If set, and the handler returns non-true value, the component will not be closed.\n   * Use this if you want to control the closing of the component, using the `closed` prop\n   *\n   * If set, and the handler returns the true, the component will be closed.\n   * Use this with `window.confirm()` to ask the user to confirm closing the component.\n   */\n  // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents -- It's fine, I want to have the boolean in the type\n  onClose?: () => boolean | unknown;\n\n  /**\n   * If `true`, the box will be closed and hidden from view\n   */\n  closed?: boolean;\n\n  /**\n   * Props applied to the close button element.\n   */\n  closeButtonProps?: BoxCloseButtonProps;\n}\n\nexport const Box: OverridableComponent<BoxProps, HTMLDivElement> = forwardRef(\n  (\n    {\n      as: Component = \"div\",\n      variant,\n      closeable = false,\n      onClose: onCloseProp,\n      closed: closedProp,\n      closeButtonProps,\n      children,\n      className,\n      ...rest\n    },\n    ref,\n  ) => {\n    const [closedState, setClosedState] = useState(false);\n    const onClose = useCallback(() => {\n      if (onCloseProp) {\n        const result = onCloseProp();\n        if (result === true) {\n          setClosedState(true);\n        }\n      } else {\n        setClosedState(true);\n      }\n      // eslint-disable-next-line react-hooks/exhaustive-deps -- I know better\n    }, []);\n    const closed = closedProp ?? closedState;\n\n    return (\n      <Component\n        className={clsx(\n          \"hds-box\",\n          variant && `hds-box--${variant}`,\n          { \"hds-box--closed\": closed },\n          className as undefined,\n        )}\n        ref={ref}\n        {...rest}\n      >\n        {closeable ? <BoxCloseButton onClick={onClose} {...closeButtonProps} /> : null}\n        {children}\n      </Component>\n    );\n  },\n);\nBox.displayName = \"Box\";\n\nexport type BoxCloseButtonProps = Omit<React.HTMLAttributes<HTMLButtonElement>, \"children\">;\nexport const BoxCloseButton = forwardRef<HTMLButtonElement, BoxCloseButtonProps>(\n  ({ className, ...rest }, ref) => {\n    return (\n      <button\n        className={clsx(\"hds-box__close-button\", className as undefined)}\n        ref={ref}\n        type=\"button\"\n        {...rest}\n      />\n    );\n  },\n);\nBoxCloseButton.displayName = \"Box.CloseButton\";\n","import { Box, BoxCloseButton } from \"./box\";\n\nconst BoxComponent = Box as typeof Box & {\n  CloseButton: typeof BoxCloseButton;\n};\nBoxComponent.CloseButton = BoxCloseButton;\n\nexport { BoxComponent as Box, BoxCloseButton };\n\nexport type * from \"./box\";\n"],"mappings":"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","names":["import_react","import_typed_classname","import_jsx_runtime"]}

package/dist/warning-banner/warning-banner.mjs

@@ -1,7 +1,7 @@
 import {
   WarningBanner
-} from "../chunk-IAS3E2S3.mjs";
-import "../chunk-BZNDK3KJ.mjs";
+} from "../chunk-PUESATBQ.mjs";
+import "../chunk-NMMFIRLZ.mjs";
 import "../chunk-EGXM575K.mjs";
 import "../chunk-R4SQKVDQ.mjs";
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@postenbring/hedwig-react",
-  "version": "0.0.66",
+  "version": "0.0.68",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -14,13 +14,13 @@
   "devDependencies": {
     "@microsoft/api-extractor": "7.43.0",
     "@types/react": "^18.2.74",
-    "@types/react-dom": "^18.2.23",
+    "@types/react-dom": "^18.2.24",
     "react": "^18.2.0",
     "react-dom": "18.2.0",
     "tsup": "^8.0.1",
-    "typescript": "^5.4.3",
-    "hedwig-tsconfig": "0.0.0",
-    "eslint-config-custom": "0.0.1"
+    "typescript": "^5.4.4",
+    "eslint-config-custom": "0.0.1",
+    "hedwig-tsconfig": "0.0.0"
   },
   "peerDependencies": {
     "@types/react": "^17.0.0 || ^18.0.0",
@@ -31,7 +31,7 @@
   "dependencies": {
     "@radix-ui/react-slot": "1.0.2",
     "focus-trap-react": "10.2.3",
-    "@postenbring/hedwig-css": "0.0.57"
+    "@postenbring/hedwig-css": "0.0.59"
   },
   "publishConfig": {
     "access": "public"

package/dist/chunk-CLXHNRAI.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/tabs/tabs-list.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactElement, MouseEvent } from \"react\";\nimport { forwardRef, useEffect, useRef } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { type OverridableComponent, useResize } from \"../utils\";\nimport { useTabsContext } from \"./context\";\n\nexport interface TabListProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactElement<TabsTabProps> | ReactElement<TabsTabProps>[];\n\n  /**\n   * Direction of the tabs. Can either be vertical or horizontal.\n   * Horizontal breaks on window width with fallback back to vertical\n   */\n  direction?: \"vertical\" | \"horizontal\";\n}\n\nexport function TabsList({ children, direction = \"horizontal\", className, ...rest }: TabListProps) {\n  const { activeTabId } = useTabsContext();\n  const tabsListRef = useRef<HTMLDivElement>(null);\n  const { width: tabsWidth } = useResize(tabsListRef);\n  const { innerWidth } = window;\n  const wideEnough = innerWidth >= tabsWidth;\n\n  const previousTabId = useRef(activeTabId);\n\n  // Marker animation\n  useEffect(() => {\n    const tabList = tabsListRef.current;\n    const activeTab = tabList?.querySelector(`[data-tabid=\"${activeTabId}\"]`);\n    if (!activeTab || !tabList) return;\n\n    const { offsetHeight: containerHeight, offsetWidth: containerWidth } = tabList;\n    const { offsetHeight, offsetWidth, offsetTop, offsetLeft } = activeTab as HTMLElement;\n\n    // Calculate the height and width of the marker relative to the container\n    const height = offsetHeight / containerHeight;\n    const width = offsetWidth / containerWidth;\n\n    // NOTE: Doing a DOM manipulation here to set the CSS variables for the marker\n    // Not really the react idomatic way, but as long as it works we are able to skip some intermidiate `useState`\n    tabsListRef.current.style.setProperty(\"--_hds-tabs-marker-height\", String(height));\n    tabsListRef.current.style.setProperty(\"--_hds-tabs-marker-width\", String(width));\n    tabsListRef.current.style.setProperty(\"--_hds-tabs-marker-top\", `${offsetTop}px`);\n    tabsListRef.current.style.setProperty(\"--_hds-tabs-marker-left\", `${offsetLeft}px`);\n\n    // Start with border fallback, then switch to the animated marker when the user changes tabs\n    // This way the marker is placed immediately to the default tab, then animates smoothly to the next when selected\n    if (previousTabId.current !== activeTabId) {\n      tabsListRef.current.style.setProperty(\n        \"--_hds-tabs-marker-animated-color\",\n        \"var(--_hds-tabs-marker-color)\",\n      );\n      tabsListRef.current.style.setProperty(\n        \"--_hds-tabs-marker-border-fallback-color\",\n        \"transparent\",\n      );\n    }\n    previousTabId.current = activeTabId;\n  }, [activeTabId, innerWidth]);\n\n  return (\n    <div\n      className={clsx(\n        \"hds-tabs__list\",\n        direction === \"horizontal\"\n          ? {\n              \"hds-tabs__list--horizontal\": wideEnough,\n              \"hds-tabs__list--vertical\": !wideEnough,\n            }\n          : {\n              \"hds-tabs__list--vertical\": true,\n            },\n        className as undefined,\n      )}\n      ref={tabsListRef}\n      role=\"tablist\"\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n}\n\nTabsList.displayName = \"Tabs.List\";\n\nexport interface TabsTabProps extends HTMLAttributes<HTMLButtonElement> {\n  children: ReactElement<HTMLElement> | string;\n\n  /**\n   * Identifier for the tab\n   */\n  tabId: string;\n}\n\nexport const TabsTab: OverridableComponent<TabsTabProps, HTMLButtonElement> = forwardRef(\n  ({ as: Component = \"button\", children, tabId, className, onClick, ...rest }, ref) => {\n    const context = useTabsContext();\n\n    const toggleTab = (e: MouseEvent<HTMLButtonElement>) => {\n      e.preventDefault();\n      context.toggleActiveTabId(tabId);\n      onClick && onClick(e);\n    };\n    return (\n      <Component\n        className={clsx(\n          \"hds-tabs__tab\",\n          { \"hds-tabs__tab--active\": context.activeTabId === tabId },\n          className as undefined,\n        )}\n        data-tabid={tabId}\n        onClick={toggleTab}\n        ref={ref}\n        role=\"tab\"\n        {...rest}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\n\nTabsTab.displayName = \"Tabs.Tab\";\n"],"mappings":";;;;;;;;;;;;;AACA,SAAS,YAAY,WAAW,cAAc;AAC9C,SAAS,YAAY;AA2DjB;AA7CG,SAAS,SAAS,IAA0E;AAA1E,eAAE,YAAU,YAAY,cAAc,UAhB/D,IAgByB,IAAoD,iBAApD,IAAoD,CAAlD,YAAU,aAA0B;AAC7D,QAAM,EAAE,YAAY,IAAI,eAAe;AACvC,QAAM,cAAc,OAAuB,IAAI;AAC/C,QAAM,EAAE,OAAO,UAAU,IAAI,UAAU,WAAW;AAClD,QAAM,EAAE,WAAW,IAAI;AACvB,QAAM,aAAa,cAAc;AAEjC,QAAM,gBAAgB,OAAO,WAAW;AAGxC,YAAU,MAAM;AACd,UAAM,UAAU,YAAY;AAC5B,UAAM,YAAY,mCAAS,cAAc,gBAAgB,WAAW;AACpE,QAAI,CAAC,aAAa,CAAC;AAAS;AAE5B,UAAM,EAAE,cAAc,iBAAiB,aAAa,eAAe,IAAI;AACvE,UAAM,EAAE,cAAc,aAAa,WAAW,WAAW,IAAI;AAG7D,UAAM,SAAS,eAAe;AAC9B,UAAM,QAAQ,cAAc;AAI5B,gBAAY,QAAQ,MAAM,YAAY,6BAA6B,OAAO,MAAM,CAAC;AACjF,gBAAY,QAAQ,MAAM,YAAY,4BAA4B,OAAO,KAAK,CAAC;AAC/E,gBAAY,QAAQ,MAAM,YAAY,0BAA0B,GAAG,SAAS,IAAI;AAChF,gBAAY,QAAQ,MAAM,YAAY,2BAA2B,GAAG,UAAU,IAAI;AAIlF,QAAI,cAAc,YAAY,aAAa;AACzC,kBAAY,QAAQ,MAAM;AAAA,QACxB;AAAA,QACA;AAAA,MACF;AACA,kBAAY,QAAQ,MAAM;AAAA,QACxB;AAAA,QACA;AAAA,MACF;AAAA,IACF;AACA,kBAAc,UAAU;AAAA,EAC1B,GAAG,CAAC,aAAa,UAAU,CAAC;AAE5B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,cAAc,eACV;AAAA,UACE,8BAA8B;AAAA,UAC9B,4BAA4B,CAAC;AAAA,QAC/B,IACA;AAAA,UACE,4BAA4B;AAAA,QAC9B;AAAA,QACJ;AAAA,MACF;AAAA,MACA,KAAK;AAAA,MACL,MAAK;AAAA,OACD,OAfL;AAAA,MAiBE;AAAA;AAAA,EACH;AAEJ;AAEA,SAAS,cAAc;AAWhB,IAAM,UAAiE;AAAA,EAC5E,CAAC,IAA4E,QAAQ;AAApF,iBAAE,MAAI,YAAY,UAAU,UAAU,OAAO,WAAW,QA/F3D,IA+FG,IAAoE,iBAApE,IAAoE,CAAlE,MAA0B,YAAU,SAAO,aAAW;AACvD,UAAM,UAAU,eAAe;AAE/B,UAAM,YAAY,CAAC,MAAqC;AACtD,QAAE,eAAe;AACjB,cAAQ,kBAAkB,KAAK;AAC/B,iBAAW,QAAQ,CAAC;AAAA,IACtB;AACA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,EAAE,yBAAyB,QAAQ,gBAAgB,MAAM;AAAA,UACzD;AAAA,QACF;AAAA,QACA,cAAY;AAAA,QACZ,SAAS;AAAA,QACT;AAAA,QACA,MAAK;AAAA,SACD,OAVL;AAAA,QAYE;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,QAAQ,cAAc;","names":[]}

package/dist/chunk-L4GQJETB.mjs

@@ -1 +0,0 @@
-//# sourceMappingURL=chunk-L4GQJETB.mjs.map

package/dist/chunk-RVJD2UZF.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/form/select/select.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { SelectHTMLAttributes } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { InputGroup } from \"../input-group\";\nimport type { InputGroupProps } from \"../input-group\";\n\nexport type SelectProps = Omit<\n  InputGroupProps & SelectHTMLAttributes<HTMLSelectElement>,\n  \"readOnly\"\n>;\n\nexport const Select = forwardRef<HTMLSelectElement, SelectProps>(function Select(\n  { className, variant, errorMessage, labelProps, label, id, style, disabled, children, ...rest },\n  ref,\n) {\n  return (\n    <InputGroup\n      className={clsx(\"hds-select\", className as undefined)}\n      disabled={disabled}\n      errorMessage={errorMessage}\n      id={id}\n      label={label}\n      labelProps={labelProps}\n      style={style}\n      variant={variant}\n    >\n      <select {...rest} disabled={disabled} ref={ref}>\n        {children}\n      </select>\n    </InputGroup>\n  );\n});\n\nSelect.displayName = \"Select\";\n"],"mappings":";;;;;;;;;;AAAA,SAAS,kBAAkB;AAE3B,SAAS,YAAY;AAwBf;AAfC,IAAM,SAAS,WAA2C,SAASA,QACxE,IACA,KACA;AAFA,eAAE,aAAW,SAAS,cAAc,YAAY,OAAO,IAAI,OAAO,UAAU,SAZ9E,IAYE,IAAyF,iBAAzF,IAAyF,CAAvF,aAAW,WAAS,gBAAc,cAAY,SAAO,MAAI,SAAO,YAAU;AAG5E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,KAAK,cAAc,SAAsB;AAAA,MACpD;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA,8BAAC,2CAAW,OAAX,EAAiB,UAAoB,KACnC,WACH;AAAA;AAAA,EACF;AAEJ,CAAC;AAED,OAAO,cAAc;","names":["Select"]}

package/dist/chunk-SKI2APSK.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/form/input-group/input-group.tsx"],"sourcesContent":["import { useId, forwardRef, Children, isValidElement, cloneElement } from \"react\";\nimport type { LabelHTMLAttributes, ReactNode, CSSProperties } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { ErrorMessage } from \"../error-message\";\n\ninterface InputProps {\n  \"aria-describedby\"?: string;\n  \"aria-invalid\"?: boolean;\n  id?: string;\n  className?: string;\n}\n\nexport interface InputGroupProps {\n  id?: string;\n  className?: string;\n  style?: CSSProperties;\n  variant?: \"default\" | \"white\";\n  errorMessage?: ReactNode;\n  labelProps?: LabelHTMLAttributes<HTMLLabelElement>;\n  label: ReactNode;\n  disabled?: boolean;\n  readOnly?: boolean;\n  children: ReactNode;\n}\n\nexport const InputGroup = forwardRef<HTMLDivElement, InputGroupProps>(function InputGroup(\n  {\n    id,\n    className,\n    style,\n    variant = \"default\",\n    errorMessage,\n    labelProps: { className: labelClassName, ...labelProps } = {},\n    label,\n    disabled,\n    readOnly,\n    children,\n    ...rest\n  },\n  ref,\n) {\n  const errorMessageId = useId();\n  const inputId = useId();\n\n  const renderInput = () => {\n    const input = Children.toArray(children)[0];\n\n    if (!isValidElement<InputProps>(input)) {\n      return;\n    }\n\n    return cloneElement<InputProps>(input, {\n      \"aria-describedby\": errorMessage ? errorMessageId : undefined,\n      \"aria-invalid\": errorMessage ? true : undefined,\n      id: id ?? inputId,\n      ...input.props,\n      className: clsx(\"hds-input-group__input\", input.props.className as undefined),\n    });\n  };\n\n  return (\n    <div\n      className={clsx(\n        \"hds-input-group\",\n        {\n          [`hds-input-group--${variant}`]: variant,\n          \"hds-input-group--error\": errorMessage,\n        },\n        className as undefined,\n      )}\n      ref={ref}\n      style={style}\n      {...rest}\n    >\n      <label\n        className={clsx(\"hds-input-group__label\", labelClassName as undefined)}\n        {...labelProps}\n        htmlFor={id ?? inputId}\n      >\n        {label}\n      </label>\n      <div\n        className={clsx(\"hds-input-group__input-wrapper\")}\n        data-disabled={disabled}\n        data-readonly={readOnly}\n      >\n        {renderInput()}\n      </div>\n      <ErrorMessage id={errorMessageId}>{errorMessage}</ErrorMessage>\n    </div>\n  );\n});\n"],"mappings":";;;;;;;;;;AAAA,SAAS,OAAO,YAAY,UAAU,gBAAgB,oBAAoB;AAE1E,SAAS,YAAY;AA2DjB,SAaE,KAbF;AApCG,IAAM,aAAa,WAA4C,SAASA,YAC7E,IAaA,KACA;AAdA,eAMc;AAAA,IALZ;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA,YAAY,KAA+C,CAAC;AAAA,EAhChE,IA0BE,IAMc,SAAE,aAAW,eAhC7B,IAgCgB,IAAgC,uBAAhC,IAAgC,CAA9B,eANhB,SAOE;AAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EApCJ,IA0BE,IAWK,iBAXL,IAWK;AAAA,IAVH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAKF,QAAM,iBAAiB,MAAM;AAC7B,QAAM,UAAU,MAAM;AAEtB,QAAM,cAAc,MAAM;AACxB,UAAM,QAAQ,SAAS,QAAQ,QAAQ,EAAE,CAAC;AAE1C,QAAI,CAAC,eAA2B,KAAK,GAAG;AACtC;AAAA,IACF;AAEA,WAAO,aAAyB,OAAO;AAAA,MACrC,oBAAoB,eAAe,iBAAiB;AAAA,MACpD,gBAAgB,eAAe,OAAO;AAAA,MACtC,IAAI,kBAAM;AAAA,OACP,MAAM,QAJ4B;AAAA,MAKrC,WAAW,KAAK,0BAA0B,MAAM,MAAM,SAAsB;AAAA,IAC9E,EAAC;AAAA,EACH;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,UACE,CAAC,oBAAoB,OAAO,EAAE,GAAG;AAAA,UACjC,0BAA0B;AAAA,QAC5B;AAAA,QACA;AAAA,MACF;AAAA,MACA;AAAA,MACA;AAAA,OACI,OAXL;AAAA,MAaC;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,KAAK,0BAA0B,cAA2B;AAAA,aACjE,aAFL;AAAA,YAGC,SAAS,kBAAM;AAAA,YAEd;AAAA;AAAA,QACH;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,KAAK,gCAAgC;AAAA,YAChD,iBAAe;AAAA,YACf,iBAAe;AAAA,YAEd,sBAAY;AAAA;AAAA,QACf;AAAA,QACA,oBAAC,gBAAa,IAAI,gBAAiB,wBAAa;AAAA;AAAA;AAAA,EAClD;AAEJ,CAAC;","names":["InputGroup"]}

package/dist/chunk-T24JZIQO.mjs

@@ -1 +0,0 @@
-//# sourceMappingURL=chunk-T24JZIQO.mjs.map

package/dist/chunk-X46LM2QH.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/navbar/navbar-expandable-menu.tsx"],"sourcesContent":["import React, { createContext, useContext, forwardRef, useState, useRef, useEffect } from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport type { ClassValue } from \"@postenbring/hedwig-css/typed-classname/index.mjs\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport FocusTrap from \"focus-trap-react\";\nimport type { OverridableComponent } from \"../utils\";\nimport { CloseIcon, MenuIcon } from \"./icons\";\n\nconst expandableMenuContext = createContext([\n  false as boolean,\n  () => {\n    // Empty\n  },\n] as const);\nexport const useNavbarExpendableMenuContext = () => useContext(expandableMenuContext);\n\n/**\n * Root\n */\nexport interface NavbarExpandableMenuProps {\n  children: React.ReactNode;\n}\nexport function NavbarExpandableMenu({ children }: NavbarExpandableMenuProps) {\n  const [open, setOpen] = useState(false);\n  const toggleOpen = () => {\n    const nextOpenState = !open;\n    setOpen(nextOpenState);\n    if (nextOpenState) {\n      window.scrollTo(0, 0);\n      document.body.classList.add(clsx(\"hds-navbar-scroll-lock\"));\n    } else {\n      document.body.classList.remove(clsx(\"hds-navbar-scroll-lock\"));\n    }\n  };\n  const navbarElement = document.getElementsByClassName(clsx(\"hds-navbar\"))[0];\n  return (\n    <expandableMenuContext.Provider value={[open, toggleOpen]}>\n      {open ? <FocusTrap containerElements={[navbarElement as HTMLElement]} /> : null}\n      {children}\n    </expandableMenuContext.Provider>\n  );\n}\nNavbarExpandableMenu.displayName = \"NavbarExpandableMenu\";\n\ninterface ButtonInterface {\n  className?: ClassValue;\n  open?: boolean;\n  innerRef?: React.RefObject<HTMLButtonElement>;\n  ref?: React.ForwardedRef<HTMLButtonElement>;\n  text: React.ReactNode;\n  title?: string;\n  toggleOpen?: () => void;\n  width?: number;\n}\n\nfunction RenderButton({\n  className,\n  innerRef,\n  open = false,\n  ref,\n  text,\n  title,\n  toggleOpen,\n  width,\n  ...rest\n}: ButtonInterface) {\n  const icon = open ? <CloseIcon /> : <MenuIcon />;\n  const style = width ? { width } : {};\n  return (\n    <button\n      className={clsx(\"hds-navbar__button\", className)}\n      onClick={toggleOpen}\n      ref={ref ?? innerRef}\n      style={style}\n      title={title}\n      type=\"button\"\n      {...rest}\n    >\n      <span className={clsx(\"hds-navbar__button-responsive-text\")}>{text}</span> {icon}\n    </button>\n  );\n}\n\n/**\n * Trigger\n *\n * ## TODO\n * - [x] Hide text when on mobile\n * - [X] Open / Close icon\n * - [X] Make button have consistant width\n */\n\nexport interface NavbarExpandableMenuTriggerProps\n  extends Omit<React.HTMLAttributes<HTMLButtonElement>, \"children\"> {\n  whenClosedText: React.ReactNode;\n  whenClosedHelperTitle?: string;\n\n  whenOpenText: React.ReactNode;\n  whenOpenHelperTitle?: string;\n}\nexport const NavbarExpandableMenuTrigger = forwardRef<\n  HTMLButtonElement,\n  NavbarExpandableMenuTriggerProps\n>(\n  (\n    {\n      whenClosedText,\n      whenClosedHelperTitle,\n\n      whenOpenText,\n      whenOpenHelperTitle,\n\n      className,\n      ...rest\n    },\n    ref,\n  ) => {\n    const [open, toggleOpen] = useNavbarExpendableMenuContext();\n    const [width, setWidth] = useState(0);\n    const measureButtonRef = useRef<HTMLButtonElement>(null);\n\n    const text: React.ReactNode = open ? whenOpenText : whenClosedText;\n    const title = open ? whenOpenHelperTitle : whenClosedHelperTitle;\n\n    /**\n     *\n     * @param element - Button to measure\n     * @param callback - report the width back\n     */\n    const measureButton = (element: React.ReactNode, callback: (width: number) => void) => {\n      // Create an empty div to render the Button in\n      const container = document.createElement(\"div\");\n      container.style.cssText = \"display: inline-block; position: absolute; visibility: hidden\";\n\n      // Attach the empty div inside the navigation section\n      const c = document.getElementsByClassName(\"hds-navbar__navigation\")[0];\n      c.appendChild(container);\n\n      // Render the Button here\n      const root = createRoot(container as HTMLElement);\n      root.render(element);\n\n      /**\n       * Get the offsetWidth now that it is rendered\n       * Also clean up after us\n       */\n      const getWidth = () => {\n        callback(measureButtonRef.current?.offsetWidth ?? 0);\n        root.unmount();\n        c.removeChild(container);\n      };\n      // This is instead of the callback that used to be on ReactDOM.render()\n      setTimeout(getWidth, 0);\n    };\n\n    useEffect(() => {\n      measureButton(\n        <RenderButton\n          className={(className ? className : \"\") as ClassValue}\n          innerRef={measureButtonRef}\n          text={whenClosedText}\n          title={title}\n          {...rest}\n        />,\n        (closedWidth: number) => {\n          measureButton(\n            <RenderButton\n              className={(className ? className : \"\") as ClassValue}\n              innerRef={measureButtonRef}\n              open\n              text={whenOpenText}\n              title={title}\n              {...rest}\n            />,\n            (openWidth: number) => {\n              setWidth(Math.max(openWidth, closedWidth));\n            },\n          );\n        },\n      );\n    }, [className, rest, title, whenClosedText, whenOpenText]);\n\n    return (\n      <RenderButton\n        className={(className ? className : \"\") as ClassValue}\n        open={open}\n        ref={ref}\n        text={text as string}\n        title={title}\n        toggleOpen={toggleOpen}\n        width={width}\n        {...rest}\n      />\n    );\n  },\n);\nNavbarExpandableMenuTrigger.displayName = \"Navbar.ExpandableMenu.Trigger\";\n\n/**\n * Content\n */\nexport interface NavbarExpandableMenuContentProps {\n  children: React.ReactNode;\n  className?: string;\n}\nexport const NavbarExpandableMenuContent: OverridableComponent<\n  NavbarExpandableMenuContentProps,\n  HTMLDivElement\n> = forwardRef(({ as: Component = \"section\", children, className, ...rest }, ref) => {\n  const [open] = useNavbarExpendableMenuContext();\n  return (\n    <Component\n      {...rest}\n      className={clsx(\"hds-navbar__expandable-menu-content\", className as undefined)}\n      data-state={open ? \"open\" : \"closed\"}\n      inert={open ? undefined : \"true\"}\n      ref={ref}\n    >\n      <div className={clsx(\"hds-navbar__expandable-menu-content-inner\")}>{children}</div>\n    </Component>\n  );\n});\nNavbarExpandableMenuContent.displayName = \"Navbar.ExpandableMenu.Content\";\n"],"mappings":";;;;;;;;;;;AAAA,SAAgB,eAAe,YAAY,YAAY,UAAU,QAAQ,iBAAiB;AAC1F,SAAS,kBAAkB;AAE3B,SAAS,YAAY;AACrB,OAAO,eAAe;AAgClB,SACU,KADV;AA5BJ,IAAM,wBAAwB,cAAc;AAAA,EAC1C;AAAA,EACA,MAAM;AAAA,EAEN;AACF,CAAU;AACH,IAAM,iCAAiC,MAAM,WAAW,qBAAqB;AAQ7E,SAAS,qBAAqB,EAAE,SAAS,GAA8B;AAC5E,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,QAAM,aAAa,MAAM;AACvB,UAAM,gBAAgB,CAAC;AACvB,YAAQ,aAAa;AACrB,QAAI,eAAe;AACjB,aAAO,SAAS,GAAG,CAAC;AACpB,eAAS,KAAK,UAAU,IAAI,KAAK,wBAAwB,CAAC;AAAA,IAC5D,OAAO;AACL,eAAS,KAAK,UAAU,OAAO,KAAK,wBAAwB,CAAC;AAAA,IAC/D;AAAA,EACF;AACA,QAAM,gBAAgB,SAAS,uBAAuB,KAAK,YAAY,CAAC,EAAE,CAAC;AAC3E,SACE,qBAAC,sBAAsB,UAAtB,EAA+B,OAAO,CAAC,MAAM,UAAU,GACrD;AAAA,WAAO,oBAAC,aAAU,mBAAmB,CAAC,aAA4B,GAAG,IAAK;AAAA,IAC1E;AAAA,KACH;AAEJ;AACA,qBAAqB,cAAc;AAanC,SAAS,aAAa,IAUF;AAVE,eACpB;AAAA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EA/DF,IAuDsB,IASjB,iBATiB,IASjB;AAAA,IARH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGA,QAAM,OAAO,OAAO,oBAAC,aAAU,IAAK,oBAAC,YAAS;AAC9C,QAAM,QAAQ,QAAQ,EAAE,MAAM,IAAI,CAAC;AACnC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,KAAK,sBAAsB,SAAS;AAAA,MAC/C,SAAS;AAAA,MACT,KAAK,oBAAO;AAAA,MACZ;AAAA,MACA;AAAA,MACA,MAAK;AAAA,OACD,OAPL;AAAA,MASC;AAAA,4BAAC,UAAK,WAAW,KAAK,oCAAoC,GAAI,gBAAK;AAAA,QAAO;AAAA,QAAE;AAAA;AAAA;AAAA,EAC9E;AAEJ;AAmBO,IAAM,8BAA8B;AAAA,EAIzC,CACE,IAUA,QACG;AAXH,iBACE;AAAA;AAAA,MACA;AAAA,MAEA;AAAA,MACA;AAAA,MAEA;AAAA,IAhHN,IAyGI,IAQK,iBARL,IAQK;AAAA,MAPH;AAAA,MACA;AAAA,MAEA;AAAA,MACA;AAAA,MAEA;AAAA;AAKF,UAAM,CAAC,MAAM,UAAU,IAAI,+BAA+B;AAC1D,UAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,CAAC;AACpC,UAAM,mBAAmB,OAA0B,IAAI;AAEvD,UAAM,OAAwB,OAAO,eAAe;AACpD,UAAM,QAAQ,OAAO,sBAAsB;AAO3C,UAAM,gBAAgB,CAAC,SAA0B,aAAsC;AAErF,YAAM,YAAY,SAAS,cAAc,KAAK;AAC9C,gBAAU,MAAM,UAAU;AAG1B,YAAM,IAAI,SAAS,uBAAuB,wBAAwB,EAAE,CAAC;AACrE,QAAE,YAAY,SAAS;AAGvB,YAAM,OAAO,WAAW,SAAwB;AAChD,WAAK,OAAO,OAAO;AAMnB,YAAM,WAAW,MAAM;AAlJ7B,YAAAA,KAAAC;AAmJQ,kBAASA,OAAAD,MAAA,iBAAiB,YAAjB,gBAAAA,IAA0B,gBAA1B,OAAAC,MAAyC,CAAC;AACnD,aAAK,QAAQ;AACb,UAAE,YAAY,SAAS;AAAA,MACzB;AAEA,iBAAW,UAAU,CAAC;AAAA,IACxB;AAEA,cAAU,MAAM;AACd;AAAA,QACE;AAAA,UAAC;AAAA;AAAA,YACC,WAAY,YAAY,YAAY;AAAA,YACpC,UAAU;AAAA,YACV,MAAM;AAAA,YACN;AAAA,aACI;AAAA,QACN;AAAA,QACA,CAAC,gBAAwB;AACvB;AAAA,YACE;AAAA,cAAC;AAAA;AAAA,gBACC,WAAY,YAAY,YAAY;AAAA,gBACpC,UAAU;AAAA,gBACV,MAAI;AAAA,gBACJ,MAAM;AAAA,gBACN;AAAA,iBACI;AAAA,YACN;AAAA,YACA,CAAC,cAAsB;AACrB,uBAAS,KAAK,IAAI,WAAW,WAAW,CAAC;AAAA,YAC3C;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,IACF,GAAG,CAAC,WAAW,MAAM,OAAO,gBAAgB,YAAY,CAAC;AAEzD,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAY,YAAY,YAAY;AAAA,QACpC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,SACI;AAAA,IACN;AAAA,EAEJ;AACF;AACA,4BAA4B,cAAc;AASnC,IAAM,8BAGT,WAAW,CAAC,IAA6D,QAAQ;AAArE,eAAE,MAAI,YAAY,WAAW,UAAU,UAhNvD,IAgNgB,IAAqD,iBAArD,IAAqD,CAAnD,MAA2B,YAAU;AACrD,QAAM,CAAC,IAAI,IAAI,+BAA+B;AAC9C,SACE;AAAA,IAAC;AAAA,qCACK,OADL;AAAA,MAEC,WAAW,KAAK,uCAAuC,SAAsB;AAAA,MAC7E,cAAY,OAAO,SAAS;AAAA,MAC5B,OAAO,OAAO,SAAY;AAAA,MAC1B;AAAA,MAEA,8BAAC,SAAI,WAAW,KAAK,2CAA2C,GAAI,UAAS;AAAA;AAAA,EAC/E;AAEJ,CAAC;AACD,4BAA4B,cAAc;","names":["_a","_b"]}

package/dist/chunk-ZTYEOZLK.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/layout/responsive.ts"],"sourcesContent":["type Breakpoints = \"xsmall\" | \"small\" | \"medium\" | \"large\" | \"xlarge\";\n\ntype ResponsiveValues<T> = {\n  [Breakpoint in Breakpoints]?: T;\n};\n\nexport type ResponsiveProp<T> = T | ResponsiveValues<T>;\n\nexport function getResponsiveProps<T>(\n  variable: `--hds-${string}`,\n  inputValues?: ResponsiveProp<T>,\n  valueTransformer: (value: T) => string = (value) => String(value),\n) {\n  if (!inputValues) return {};\n\n  if (typeof inputValues !== \"object\") {\n    return { [`${variable}-xsmall`]: valueTransformer(inputValues) };\n  }\n\n  const result: Record<string, string> = {};\n  for (const [key, value] of Object.entries(inputValues as ResponsiveValues<T>)) {\n    result[`${variable}-${key}`] = valueTransformer(value);\n  }\n\n  return result;\n}\n"],"mappings":";AAQO,SAAS,mBACd,UACA,aACA,mBAAyC,CAAC,UAAU,OAAO,KAAK,GAChE;AACA,MAAI,CAAC;AAAa,WAAO,CAAC;AAE1B,MAAI,OAAO,gBAAgB,UAAU;AACnC,WAAO,EAAE,CAAC,GAAG,QAAQ,SAAS,GAAG,iBAAiB,WAAW,EAAE;AAAA,EACjE;AAEA,QAAM,SAAiC,CAAC;AACxC,aAAW,CAAC,KAAK,KAAK,KAAK,OAAO,QAAQ,WAAkC,GAAG;AAC7E,WAAO,GAAG,QAAQ,IAAI,GAAG,EAAE,IAAI,iBAAiB,KAAK;AAAA,EACvD;AAEA,SAAO;AACT;","names":[]}