@navikt/ds-react 8.2.0 → 8.2.2

package/src/internal-header/InternalHeader.tsx

@@ -1,6 +1,5 @@
 import React, { HTMLAttributes, forwardRef } from "react";
 import { Theme } from "../theme/Theme";
-import type { OverridableComponent } from "../utils-external";
 import { cl } from "../utils/helpers";
 import InternalHeaderButton, {
   InternalHeaderButtonProps,
@@ -15,38 +14,32 @@ import InternalHeaderUserButton, {
   InternalHeaderUserButtonProps,
 } from "./InternalHeaderUserButton";
 
-export interface InternalHeaderProps extends HTMLAttributes<HTMLElement> {
+interface InternalHeaderProps extends HTMLAttributes<HTMLElement> {
   children: React.ReactNode;
 }
 
-interface InternalHeaderComponent
-  extends React.ForwardRefExoticComponent<
-    InternalHeaderProps & React.RefAttributes<HTMLElement>
-  > {
+interface InternalHeaderComponent extends React.ForwardRefExoticComponent<
+  InternalHeaderProps & React.RefAttributes<HTMLElement>
+> {
   /**
    * @see 🏷️ {@link InternalHeaderTitleProps}
    * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
    */
-  Title: OverridableComponent<InternalHeaderTitleProps, HTMLAnchorElement>;
+  Title: typeof InternalHeaderTitle;
   /**
    * @see 🏷️ {@link InternalHeaderUserProps}
    */
-  User: React.ForwardRefExoticComponent<
-    InternalHeaderUserProps & React.RefAttributes<HTMLDivElement>
-  >;
+  User: typeof InternalHeaderUser;
   /**
    * @see 🏷️ {@link InternalHeaderButtonProps}
    * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
    */
-  Button: OverridableComponent<InternalHeaderButtonProps, HTMLButtonElement>;
+  Button: typeof InternalHeaderButton;
   /**
    * @see 🏷️ {@link InternalHeaderUserButtonProps}
    * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
    */
-  UserButton: OverridableComponent<
-    InternalHeaderUserButtonProps,
-    HTMLButtonElement
-  >;
+  UserButton: typeof InternalHeaderUserButton;
 }
 
 /**
@@ -98,3 +91,16 @@ InternalHeader.Button = InternalHeaderButton;
 InternalHeader.UserButton = InternalHeaderUserButton;
 
 export default InternalHeader;
+export {
+  InternalHeaderTitle,
+  InternalHeaderUser,
+  InternalHeaderButton,
+  InternalHeaderUserButton,
+};
+export type {
+  InternalHeaderProps,
+  InternalHeaderTitleProps,
+  InternalHeaderUserProps,
+  InternalHeaderButtonProps,
+  InternalHeaderUserButtonProps,
+};

package/src/internal-header/index.ts

@@ -1,21 +1,15 @@
 "use client";
 export {
   default as InternalHeader,
-  type InternalHeaderProps,
+  InternalHeaderButton,
+  InternalHeaderTitle,
+  InternalHeaderUser,
+  InternalHeaderUserButton,
+} from "./InternalHeader";
+export type {
+  InternalHeaderProps,
+  InternalHeaderButtonProps,
+  InternalHeaderTitleProps,
+  InternalHeaderUserProps,
+  InternalHeaderUserButtonProps,
 } from "./InternalHeader";
-export {
-  default as InternalHeaderButton,
-  type InternalHeaderButtonProps,
-} from "./InternalHeaderButton";
-export {
-  default as InternalHeaderTitle,
-  type InternalHeaderTitleProps,
-} from "./InternalHeaderTitle";
-export {
-  default as InternalHeaderUser,
-  type InternalHeaderUserProps,
-} from "./InternalHeaderUser";
-export {
-  default as InternalHeaderUserButton,
-  type InternalHeaderUserButtonProps,
-} from "./InternalHeaderUserButton";

package/src/layout/bleed/Bleed.tsx

@@ -61,7 +61,7 @@ export interface BleedProps extends React.HTMLAttributes<HTMLDivElement> {
  * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
  *
  * @example
- * <Box padding="4">
+ * <Box padding="space-16">
  *   <Bleed marginInline="space-16" marginBlock="space-16">
  *     <BodyLong>Some content</BodyLong>
  *   </Bleed>

package/src/layout/responsive/Responsive.tsx

@@ -65,14 +65,14 @@ const Responsive = forwardRef<
  * @see 🏷️ {@link ResponsiveProps}
  *
  * @example
- * <HGrid columns={{ xs: 1, md: 2 }} gap="4">
+ * <HGrid columns={{ xs: 1, md: 2 }} gap="space-16">
  *   <div/>
  *   <Hide below="md" asChild>
  *      // Only visible above "md"
  *   </Hide>
  * </HGrid>
  * @example
- * <HGrid columns={{ xs: 1, md: 2 }} gap="4">
+ * <HGrid columns={{ xs: 1, md: 2 }} gap="space-16">
  *   <div/>
  *   <Hide above="md" asChild>
  *      // Only visible below "md"
@@ -90,14 +90,14 @@ export const Hide = forwardRef<HTMLDivElement, ResponsiveProps>(
  * @see 🏷️ {@link ResponsiveProps}
  *
  * @example
- * <HGrid columns={{ xs: 1, md: 2 }} gap="4">
+ * <HGrid columns={{ xs: 1, md: 2 }} gap="space-16">
  *   <div/>
  *   <Show below="md" asChild>
  *      // Only visible below "md"
  *   </Show>
  * </HGrid>
  * @example
- * <HGrid columns={{ xs: 1, md: 2 }} gap="4">
+ * <HGrid columns={{ xs: 1, md: 2 }} gap="space-16">
  *   <div/>
  *   <Show above="md" asChild>
  *      // Only visible above "md"

package/src/layout/stack/HStack.tsx

@@ -13,14 +13,14 @@ export type HStackProps = PrimitiveAsChildProps & Omit<StackProps, "direction">;
  * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
  *
  * @example
- * <HStack gap="8">
+ * <HStack gap="space-32">
  *  <MyComponent />
  *  <MyComponent />
  * </HStack>
  *
  * @example
  * // Responsive gap
- * <HStack gap={{xs: "2", md: "6"}}>
+ * <HStack gap={{xs: "space-8", md: "space-24"}}>
  *  <MyComponent />
  *  <MyComponent />
  * </HStack>

package/src/layout/stack/Spacer.tsx

@@ -6,7 +6,7 @@ import React from "react";
  * @see [📝 Documentation](https://aksel.nav.no/komponenter/primitives/hstack)
  *
  * @example
- * <HStack gap="8">
+ * <HStack gap="space-32">
  *  <MyComponent />
  *  <Spacer />
  *  <MyComponent />

package/src/layout/stack/VStack.tsx

@@ -14,14 +14,14 @@ export type VStackProps = PrimitiveAsChildProps &
  * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
  *
  * @example
- * <VStack gap="8">
+ * <VStack gap="space-32">
  *  <MyComponent />
  *  <MyComponent />
  * </VStack>
  *
  * @example
  * // Responsive gap
- * <VStack gap={{xs: "2", md: "6"}}>
+ * <VStack gap={{xs: "space-8", md: "space-24"}}>
  *  <MyComponent />
  *  <MyComponent />
  * </VStack>

package/src/link-panel/LinkPanel.tsx

@@ -9,8 +9,7 @@ import {
 } from "./LinkPanelDescription";
 import { LinkPanelTitle, LinkPanelTitleProps } from "./LinkPanelTitle";
 
-export interface LinkPanelProps
-  extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+export interface LinkPanelProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
   /**
    * Panel content
    */
@@ -22,10 +21,12 @@ export interface LinkPanelProps
   border?: boolean;
 }
 
-interface LinkPanelComponentType
-  extends OverridableComponent<LinkPanelProps, HTMLAnchorElement> {
+interface LinkPanelComponentType extends OverridableComponent<
+  LinkPanelProps,
+  HTMLAnchorElement
+> {
   /**
-   * @see 🏷️ {@link LinkPanelDescriptionProps}
+   * @see 🏷️ {@link LinkPanelTitleProps}
    * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
    */
   Title: OverridableComponent<LinkPanelTitleProps, HTMLDivElement>;

package/src/list/List.tsx

@@ -3,13 +3,11 @@ import { BodyLong } from "../typography";
 import { cl } from "../utils/helpers";
 import { ListItem } from "./List.Item";
 import { ListContext } from "./List.context";
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 import type { ListItemProps, ListProps } from "./List.types";
 
-export interface ListComponent
-  extends React.ForwardRefExoticComponent<
-    ListProps & React.RefAttributes<HTMLDivElement>
-  > {
+interface ListComponent extends React.ForwardRefExoticComponent<
+  ListProps & React.RefAttributes<HTMLDivElement>
+> {
   /**
    * @see 🏷️ {@link ListItemProps}
    */
@@ -78,3 +76,5 @@ export const List = forwardRef<HTMLDivElement, ListProps>(
 List.Item = ListItem;
 
 export default List;
+export { ListItem };
+export type { ListProps, ListItemProps };

package/src/list/index.ts

@@ -1,4 +1,3 @@
 "use client";
-export { default as List } from "./List";
-export type { ListProps, ListItemProps } from "./List.types";
-export { default as ListItem } from "./List.Item";
+export { default as List, ListItem } from "./List";
+export type { ListProps, ListItemProps } from "./List";

package/src/overlays/action-menu/ActionMenu.tsx

@@ -52,7 +52,7 @@ interface ActionMenuComponent extends React.FC<ActionMenuProps> {
    * @example
    * ```jsx
    * <ActionMenu.Trigger>
-   *     <button>Open Menu</button>
+   *   <button>Open Menu</button>
    * </ActionMenu.Trigger>
    * ```
    */
@@ -62,12 +62,12 @@ interface ActionMenuComponent extends React.FC<ActionMenuProps> {
    * @example
    * ```jsx
    * <ActionMenu.Content>
-   *     <ActionMenu.Item>
-   *       Item 1
-   *     </ActionMenu.Item>
-   *     <ActionMenu.Item>
-   *       Item 2
-   *     </ActionMenu.Item>
+   *   <ActionMenu.Item>
+   *     Item 1
+   *   </ActionMenu.Item>
+   *   <ActionMenu.Item>
+   *     Item 2
+   *   </ActionMenu.Item>
    * </ActionMenu.Content>
    * ```
    */
@@ -81,22 +81,22 @@ interface ActionMenuComponent extends React.FC<ActionMenuProps> {
    * @example
    * ```jsx
    * <ActionMenu.Content>
-   *     <ActionMenu.Group label="Group 1">
-   *         <ActionMenu.Item>
-   *           Item 1
-   *         </ActionMenu.Item>
-   *         <ActionMenu.Item>
-   *           Item 2
-   *         </ActionMenu.Item>
-   *     </ActionMenu.Group>
-   *     <ActionMenu.Group label="Group 2">
-   *         <ActionMenu.Item>
-   *           Item 3
-   *         </ActionMenu.Item>
-   *         <ActionMenu.Item>
-   *           Item 4
-   *         </ActionMenu.Item>
-   *     </ActionMenu.Group>
+   *   <ActionMenu.Group label="Group 1">
+   *     <ActionMenu.Item>
+   *       Item 1
+   *     </ActionMenu.Item>
+   *     <ActionMenu.Item>
+   *       Item 2
+   *     </ActionMenu.Item>
+   *   </ActionMenu.Group>
+   *   <ActionMenu.Group label="Group 2">
+   *     <ActionMenu.Item>
+   *       Item 3
+   *     </ActionMenu.Item>
+   *     <ActionMenu.Item>
+   *       Item 4
+   *     </ActionMenu.Item>
+   *   </ActionMenu.Group>
    * </ActionMenu.Content>
    * ```
    */
@@ -107,10 +107,10 @@ interface ActionMenuComponent extends React.FC<ActionMenuProps> {
    * @example
    * ```jsx
    * <ActionMenu.Content>
-   *     <ActionMenu.Label>
-   *         Label
-   *     </ActionMenu.Label>
-   *     <ActionMenu.Divider />
+   *   <ActionMenu.Label>
+   *     Label
+   *   </ActionMenu.Label>
+   *   <ActionMenu.Divider />
    * </ActionMenu.Content
    * ```
    */
@@ -121,26 +121,26 @@ interface ActionMenuComponent extends React.FC<ActionMenuProps> {
    * @example
    * ```jsx
    * <ActionMenu.Content>
-   *     // Grouped
-   *     <ActionMenu.Group label="Group 1">
-   *         <ActionMenu.Item onSelect={navigate}>
-   *           Item 1
-   *         </ActionMenu.Item>
-   *         <ActionMenu.Item onSelect={navigate}>
-   *           Item 2
-   *         </ActionMenu.Item>
-   *     </ActionMenu.Group>
-   *     <ActionMenu.Divider />
-   *     // Standalone
-   *     <ActionMenu.Item onSelect={updateState}>
-   *        Item 3
+   *   // Grouped
+   *   <ActionMenu.Group label="Group 1">
+   *     <ActionMenu.Item onSelect={navigate}>
+   *       Item 1
    *     </ActionMenu.Item>
+   *     <ActionMenu.Item onSelect={navigate}>
+   *       Item 2
+   *     </ActionMenu.Item>
+   *   </ActionMenu.Group>
+   *   <ActionMenu.Divider />
+   *   // Standalone
+   *   <ActionMenu.Item onSelect={updateState}>
+   *      Item 3
+   *   </ActionMenu.Item>
    * </ActionMenu.Content>
    * ```
    * @example As link
    * ```jsx
    * <ActionMenu.Item as="a" href="#">
-   *     Item
+   *   Item
    * </ActionMenu.Item>
    * ```
    */
@@ -296,7 +296,7 @@ const ActionMenuRoot = ({
  *       Item 2
  *     </ActionMenu.Item>
  *   </ActionMenu.Content>
- * <ActionMenu>
+ * </ActionMenu>
  * ```
  */
 export const ActionMenu = ActionMenuRoot as ActionMenuComponent;
@@ -304,8 +304,7 @@ export const ActionMenu = ActionMenuRoot as ActionMenuComponent;
 /* -------------------------------------------------------------------------- */
 /*                             ActionMenuTrigger                              */
 /* -------------------------------------------------------------------------- */
-interface ActionMenuTriggerProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+interface ActionMenuTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   children: React.ReactElement;
 }
 
@@ -351,8 +350,10 @@ export const ActionMenuTrigger = forwardRef<
 /* -------------------------------------------------------------------------- */
 /*                             ActionMenuContent                              */
 /* -------------------------------------------------------------------------- */
-interface ActionMenuContentProps
-  extends Omit<React.HTMLAttributes<HTMLDivElement>, "id"> {
+interface ActionMenuContentProps extends Omit<
+  React.HTMLAttributes<HTMLDivElement>,
+  "id"
+> {
   children?: React.ReactNode;
   align?: "start" | "end";
 }
@@ -606,8 +607,10 @@ type MenuCheckboxItemProps = React.ComponentPropsWithoutRef<
   typeof Menu.CheckboxItem
 >;
 
-interface ActionMenuCheckboxItemProps
-  extends Omit<MenuCheckboxItemProps, "asChild"> {
+interface ActionMenuCheckboxItemProps extends Omit<
+  MenuCheckboxItemProps,
+  "asChild"
+> {
   children: React.ReactNode;
   /**
    * Shows connected shortcut-keys for the item.
@@ -890,8 +893,10 @@ type ActionMenuSubTriggerElement = React.ElementRef<typeof Menu.SubTrigger>;
 type MenuSubTriggerProps = React.ComponentPropsWithoutRef<
   typeof Menu.SubTrigger
 >;
-interface ActionMenuSubTriggerProps
-  extends Omit<MenuSubTriggerProps, "asChild"> {
+interface ActionMenuSubTriggerProps extends Omit<
+  MenuSubTriggerProps,
+  "asChild"
+> {
   icon?: React.ReactNode;
   /**
    * Position of icon.
@@ -947,8 +952,7 @@ export const ActionMenuSubTrigger = forwardRef<
 /* -------------------------------------------------------------------------- */
 type ActionMenuSubContentElement = React.ElementRef<typeof Menu.Content>;
 
-interface ActionMenuSubContentProps
-  extends React.HTMLAttributes<HTMLDivElement> {
+interface ActionMenuSubContentProps extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
 }
 

package/src/panel/Panel.tsx

@@ -23,8 +23,8 @@ export type PanelType = OverridableComponent<PanelProps, HTMLElement>;
  * @deprecated
  * Use Box with padding and border instead
  * ```
- * <Box padding="4" borderRadius="2" />
- * <Box padding="4" borderWidth="1" borderRadius="2" />
+ * <Box padding="space-16" borderRadius="2" />
+ * <Box padding="space-16" borderWidth="1" borderRadius="2" />
  * ```
  * Component will be removed in a future major release
  */

package/src/stepper/Stepper.tsx

@@ -3,7 +3,7 @@ import { cl } from "../utils/helpers";
 import Step, { StepperStepProps } from "./Step";
 import { StepperContextProvider } from "./context";
 
-export interface StepperProps extends React.HTMLAttributes<HTMLOListElement> {
+interface StepperProps extends React.HTMLAttributes<HTMLOListElement> {
   /**
    * `<Stepper.Step />` elements.
    */
@@ -33,10 +33,9 @@ export interface StepperProps extends React.HTMLAttributes<HTMLOListElement> {
   interactive?: boolean;
 }
 
-interface StepperComponent
-  extends React.ForwardRefExoticComponent<
-    StepperProps & React.RefAttributes<HTMLOListElement>
-  > {
+interface StepperComponent extends React.ForwardRefExoticComponent<
+  StepperProps & React.RefAttributes<HTMLOListElement>
+> {
   /**
    * @see 🏷️ {@link StepperStepProps}
    * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
@@ -128,3 +127,5 @@ export const Stepper: StepperComponent = forwardRef<
 Stepper.Step = Step;
 
 export default Stepper;
+export { Step as StepperStep };
+export type { StepperProps, StepperStepProps };

package/src/stepper/index.ts

@@ -1,3 +1,3 @@
 "use client";
-export { default as Stepper, type StepperProps } from "./Stepper";
-export { default as StepperStep, type StepperStepProps } from "./Step";
+export { default as Stepper, StepperStep } from "./Stepper";
+export type { StepperProps, StepperStepProps } from "./Stepper";

package/src/tabs/Tabs.tsx

@@ -6,15 +6,14 @@ import {
   useTabsDescendants,
 } from "./Tabs.context";
 import { TabsProps } from "./Tabs.types";
-import Tab from "./parts/tab/Tab";
-import TabList from "./parts/tablist/TabList";
-import TabPanel from "./parts/tabpanel/TabPanel";
+import Tab, { TabProps } from "./parts/tab/Tab";
+import TabList, { TabListProps } from "./parts/tablist/TabList";
+import TabPanel, { TabPanelProps } from "./parts/tabpanel/TabPanel";
 import { useTabs } from "./useTabs";
 
-interface TabsComponent
-  extends React.ForwardRefExoticComponent<
-    TabsProps & React.RefAttributes<HTMLDivElement>
-  > {
+interface TabsComponent extends React.ForwardRefExoticComponent<
+  TabsProps & React.RefAttributes<HTMLDivElement>
+> {
   /**
    * @see 🏷️ {@link TabProps}
    * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
@@ -112,3 +111,10 @@ Tabs.List = TabList;
 Tabs.Panel = TabPanel;
 
 export default Tabs;
+export { Tab as TabsTab, TabList as TabsList, TabPanel as TabsPanel };
+export type {
+  TabsProps,
+  TabProps as TabsTabProps,
+  TabListProps as TabsListProps,
+  TabPanelProps as TabsPanelProps,
+};

package/src/tabs/index.ts

@@ -1,12 +1,8 @@
 "use client";
-export { default as Tabs } from "./Tabs";
-export type { TabsProps } from "./Tabs.types";
-export { default as TabsTab, type TabProps } from "./parts/tab/Tab";
-export {
-  default as TabsList,
-  type TabListProps,
-} from "./parts/tablist/TabList";
-export {
-  default as TabsPanel,
-  type TabPanelProps,
-} from "./parts/tabpanel/TabPanel";
+export { default as Tabs, TabsTab, TabsList, TabsPanel } from "./Tabs";
+export type {
+  TabsProps,
+  TabsTabProps,
+  TabsListProps,
+  TabsPanelProps,
+} from "./Tabs";

package/src/toggle-group/ToggleGroup.tsx

@@ -9,15 +9,14 @@ import {
   useToggleGroupDescendants,
 } from "./ToggleGroup.context";
 import { ToggleGroupProps } from "./ToggleGroup.types";
-import ToggleItem from "./parts/ToggleItem";
+import ToggleItem, { ToggleGroupItemProps } from "./parts/ToggleItem";
 import { useToggleGroup } from "./useToggleGroup";
 
-interface ToggleGroupComponent
-  extends React.ForwardRefExoticComponent<
-    ToggleGroupProps & React.RefAttributes<HTMLDivElement>
-  > {
+interface ToggleGroupComponent extends React.ForwardRefExoticComponent<
+  ToggleGroupProps & React.RefAttributes<HTMLDivElement>
+> {
   /**
-   * @see 🏷️ {@link ToggleItem}
+   * @see 🏷️ {@link ToggleGroupItemProps}
    */
   Item: typeof ToggleItem;
 }
@@ -134,3 +133,5 @@ function variantToColor(
 ToggleGroup.Item = ToggleItem;
 
 export default ToggleGroup;
+export { ToggleItem as ToggleGroupItem };
+export type { ToggleGroupProps, ToggleGroupItemProps };

package/src/toggle-group/index.ts

@@ -1,7 +1,3 @@
 "use client";
-export { default as ToggleGroup } from "./ToggleGroup";
-export type { ToggleGroupProps } from "./ToggleGroup.types";
-export {
-  default as ToggleGroupItem,
-  type ToggleGroupItemProps,
-} from "./parts/ToggleItem";
+export { default as ToggleGroup, ToggleGroupItem } from "./ToggleGroup";
+export type { ToggleGroupProps, ToggleGroupItemProps } from "./ToggleGroup";