@navikt/ds-react 8.1.0 → 8.2.1

package/esm/toggle-group/ToggleGroup.js

@@ -70,4 +70,5 @@ function variantToColor(variant) {
 }
 ToggleGroup.Item = ToggleItem;
 export default ToggleGroup;
+export { ToggleItem as ToggleGroupItem };
 //# sourceMappingURL=ToggleGroup.js.map

package/esm/toggle-group/ToggleGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleGroup.js","sourceRoot":"","sources":["../../src/toggle-group/ToggleGroup.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,OAAO,EAAE,EAAE,EAAE,MAAM,kBAAkB,CAAC;AACtC,OAAO,EACL,8BAA8B,EAC9B,mBAAmB,EACnB,yBAAyB,GAC1B,MAAM,uBAAuB,CAAC;AAE/B,OAAO,UAAU,MAAM,oBAAoB,CAAC;AAC5C,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAYlD;;;;;;;;;;;;;;GAcG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,UAAU,CACnC,CACE,EAYC,EACD,GAAG,EACH,EAAE;QAdF,EACE,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,IAAI,GAAG,QAAQ,EACf,KAAK,EACL,KAAK,EACL,YAAY,EACZ,OAAO,EACP,IAAI,GAAG,KAAK,EACZ,YAAY,EAAE,KAAK,OAEpB,EADI,IAAI,cAXT,gHAYC,CADQ;IAIT,MAAM,WAAW,GAAG,yBAAyB,EAAE,CAAC;IAEhD,MAAM,kBAAkB,GAAG,cAAc,CAAC;QACxC,YAAY;QACZ,KAAK;QACL,QAAQ;KACT,CAAC,CAAC;IAEH;;OAEG;IACH,MAAM,OAAO,mCACR,kBAAkB,KACrB,IAAI,GACL,CAAC;IAEF,MAAM,OAAO,GAAG,KAAK,EAAE,CAAC;IAExB,IAAI,CAAC,KAAK,IAAI,CAAC,YAAY,EAAE,CAAC;QAC5B,OAAO,CAAC,KAAK,CAAC,0DAA0D,CAAC,CAAC;IAC5E,CAAC;IAED,IAAI,CAAC,KAAK,IAAI,CAAC,YAAY,EAAE,CAAC;QAC5B,OAAO,CAAC,KAAK,CAAC,kDAAkD,CAAC,CAAC;IACpE,CAAC;IAED,OAAO,CACL,oBAAC,8BAA8B,IAAC,KAAK,EAAE,WAAW;QAChD,oBAAC,mBAAmB,oBAAK,OAAO;YAC9B,6BACE,SAAS,EAAE,EAAE,CAAC,6BAA6B,EAAE,SAAS,EAAE;oBACtD,mCAAmC,EAAE,IAAI;iBAC1C,CAAC,gBACU,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,cAAc,CAAC,OAAO,CAAC;gBAE3C,KAAK,IAAI,CACR,oBAAC,KAAK,IACJ,EAAE,EAAC,KAAK,EACR,IAAI,EAAE,IAAI,EACV,SAAS,EAAC,2BAA2B,EACrC,EAAE,EAAE,OAAO,IAEV,KAAK,CACA,CACT;gBACD,8DACmB,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,IACxC,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,oBAAoB,EACpB,uBAAuB,IAAI,EAAE,CAC9B,EACD,IAAI,EAAC,YAAY,KAEhB,QAAQ,CACL,CACF,CACc,CACS,CAClC,CAAC;AACJ,CAAC,CACsB,CAAC;AAE1B,SAAS,cAAc,CACrB,OAAqC;IAErC,QAAQ,OAAO,EAAE,CAAC;QAChB,KAAK,QAAQ;YACX,OAAO,QAAQ,CAAC;QAClB,KAAK,SAAS;YACZ,OAAO,SAAS,CAAC;QACnB;YACE,OAAO,SAAS,CAAC;IACrB,CAAC;AACH,CAAC;AAED,WAAW,CAAC,IAAI,GAAG,UAAU,CAAC;AAE9B,eAAe,WAAW,CAAC"}
+{"version":3,"file":"ToggleGroup.js","sourceRoot":"","sources":["../../src/toggle-group/ToggleGroup.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,OAAO,EAAE,EAAE,EAAE,MAAM,kBAAkB,CAAC;AACtC,OAAO,EACL,8BAA8B,EAC9B,mBAAmB,EACnB,yBAAyB,GAC1B,MAAM,uBAAuB,CAAC;AAE/B,OAAO,UAAoC,MAAM,oBAAoB,CAAC;AACtE,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAWlD;;;;;;;;;;;;;;GAcG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,UAAU,CACnC,CACE,EAYC,EACD,GAAG,EACH,EAAE;QAdF,EACE,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,IAAI,GAAG,QAAQ,EACf,KAAK,EACL,KAAK,EACL,YAAY,EACZ,OAAO,EACP,IAAI,GAAG,KAAK,EACZ,YAAY,EAAE,KAAK,OAEpB,EADI,IAAI,cAXT,gHAYC,CADQ;IAIT,MAAM,WAAW,GAAG,yBAAyB,EAAE,CAAC;IAEhD,MAAM,kBAAkB,GAAG,cAAc,CAAC;QACxC,YAAY;QACZ,KAAK;QACL,QAAQ;KACT,CAAC,CAAC;IAEH;;OAEG;IACH,MAAM,OAAO,mCACR,kBAAkB,KACrB,IAAI,GACL,CAAC;IAEF,MAAM,OAAO,GAAG,KAAK,EAAE,CAAC;IAExB,IAAI,CAAC,KAAK,IAAI,CAAC,YAAY,EAAE,CAAC;QAC5B,OAAO,CAAC,KAAK,CAAC,0DAA0D,CAAC,CAAC;IAC5E,CAAC;IAED,IAAI,CAAC,KAAK,IAAI,CAAC,YAAY,EAAE,CAAC;QAC5B,OAAO,CAAC,KAAK,CAAC,kDAAkD,CAAC,CAAC;IACpE,CAAC;IAED,OAAO,CACL,oBAAC,8BAA8B,IAAC,KAAK,EAAE,WAAW;QAChD,oBAAC,mBAAmB,oBAAK,OAAO;YAC9B,6BACE,SAAS,EAAE,EAAE,CAAC,6BAA6B,EAAE,SAAS,EAAE;oBACtD,mCAAmC,EAAE,IAAI;iBAC1C,CAAC,gBACU,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,cAAc,CAAC,OAAO,CAAC;gBAE3C,KAAK,IAAI,CACR,oBAAC,KAAK,IACJ,EAAE,EAAC,KAAK,EACR,IAAI,EAAE,IAAI,EACV,SAAS,EAAC,2BAA2B,EACrC,EAAE,EAAE,OAAO,IAEV,KAAK,CACA,CACT;gBACD,8DACmB,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,IACxC,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,oBAAoB,EACpB,uBAAuB,IAAI,EAAE,CAC9B,EACD,IAAI,EAAC,YAAY,KAEhB,QAAQ,CACL,CACF,CACc,CACS,CAClC,CAAC;AACJ,CAAC,CACsB,CAAC;AAE1B,SAAS,cAAc,CACrB,OAAqC;IAErC,QAAQ,OAAO,EAAE,CAAC;QAChB,KAAK,QAAQ;YACX,OAAO,QAAQ,CAAC;QAClB,KAAK,SAAS;YACZ,OAAO,SAAS,CAAC;QACnB;YACE,OAAO,SAAS,CAAC;IACrB,CAAC;AACH,CAAC;AAED,WAAW,CAAC,IAAI,GAAG,UAAU,CAAC;AAE9B,eAAe,WAAW,CAAC;AAC3B,OAAO,EAAE,UAAU,IAAI,eAAe,EAAE,CAAC"}

package/esm/toggle-group/index.d.ts

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

package/esm/toggle-group/index.js

@@ -1,4 +1,3 @@
 "use client";
-export { default as ToggleGroup } from "./ToggleGroup.js";
-export { default as ToggleGroupItem, } from "./parts/ToggleItem.js";
+export { default as ToggleGroup, ToggleGroupItem } from "./ToggleGroup.js";
 //# sourceMappingURL=index.js.map

package/esm/toggle-group/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/toggle-group/index.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AACb,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AAEvD,OAAO,EACL,OAAO,IAAI,eAAe,GAE3B,MAAM,oBAAoB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/toggle-group/index.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AACb,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "8.1.0",
+  "version": "8.2.1",
   "description": "React components from the Norwegian Labour and Welfare Administration.",
   "author": "Aksel, a team part of the Norwegian Labour and Welfare Administration.",
   "license": "MIT",
@@ -705,8 +705,8 @@
   "dependencies": {
     "@floating-ui/react": "0.27.8",
     "@floating-ui/react-dom": "^2.1.6",
-    "@navikt/aksel-icons": "^8.1.0",
-    "@navikt/ds-tokens": "^8.1.0",
+    "@navikt/aksel-icons": "^8.2.1",
+    "@navikt/ds-tokens": "^8.2.1",
     "date-fns": "^4.0.0",
     "react-day-picker": "9.7.0"
   },
@@ -716,23 +716,23 @@
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.5.2",
     "@types/jscodeshift": "^0.11.11",
-    "@types/react": "19.2.3",
+    "@types/react": "19.2.9",
     "@types/react-dom": "19.2.3",
     "aksel": "workspace:^",
     "concurrently": "9.2.1",
     "copyfiles": "^2.4.1",
-    "fast-glob": "3.2.11",
-    "jscodeshift": "0.15.2",
+    "fast-glob": "3.3.3",
+    "jscodeshift": "17.3.0",
     "jsdom": "27.1.0",
     "react": "19.2.3",
     "react-dom": "19.2.3",
     "react-router": "^7.12.0",
-    "rimraf": "6.0.1",
+    "rimraf": "6.1.2",
     "swr": "^2.3.6",
     "tsc-alias": "1.8.16",
     "tsx": "^4.20.6",
     "typescript": "5.9.3",
-    "vitest": "4.0.17"
+    "vitest": "4.0.18"
   },
   "peerDependencies": {
     "@types/react": "^17.0.30 || ^18 || ^19",

package/src/accordion/Accordion.tsx

@@ -10,31 +10,24 @@ import { AccordionContext } from "./AccordionContext";
 import AccordionHeader, { AccordionHeaderProps } from "./AccordionHeader";
 import AccordionItem, { AccordionItemProps } from "./AccordionItem";
 
-interface AccordionComponent
-  extends React.ForwardRefExoticComponent<
-    AccordionProps & React.RefAttributes<HTMLDivElement>
-  > {
+interface AccordionComponent extends React.ForwardRefExoticComponent<
+  AccordionProps & React.RefAttributes<HTMLDivElement>
+> {
   /**
    * @see 🏷️ {@link AccordionItemProps}
    */
-  Item: React.ForwardRefExoticComponent<
-    AccordionItemProps & React.RefAttributes<HTMLDivElement>
-  >;
+  Item: typeof AccordionItem;
   /**
    * @see 🏷️ {@link AccordionHeaderProps}
    */
-  Header: React.ForwardRefExoticComponent<
-    AccordionHeaderProps & React.RefAttributes<HTMLButtonElement>
-  >;
+  Header: typeof AccordionHeader;
   /**
    * @see 🏷️ {@link AccordionContentProps}
    */
-  Content: React.ForwardRefExoticComponent<
-    AccordionContentProps & React.RefAttributes<HTMLDivElement>
-  >;
+  Content: typeof AccordionContent;
 }
 
-export interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {
+interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
    * @deprecated Will be removed in a future major version. Use `data-color` instead.
    */
@@ -144,3 +137,10 @@ Accordion.Content = AccordionContent;
 Accordion.Item = AccordionItem;
 
 export default Accordion;
+export { AccordionItem, AccordionHeader, AccordionContent };
+export type {
+  AccordionProps,
+  AccordionItemProps,
+  AccordionHeaderProps,
+  AccordionContentProps,
+};

package/src/accordion/index.ts

@@ -1,14 +1,13 @@
 "use client";
-export { type AccordionProps, default as Accordion } from "./Accordion";
 export {
-  default as AccordionHeader,
-  type AccordionHeaderProps,
-} from "./AccordionHeader";
-export {
-  default as AccordionContent,
-  type AccordionContentProps,
-} from "./AccordionContent";
-export {
-  default as AccordionItem,
-  type AccordionItemProps,
-} from "./AccordionItem";
+  default as Accordion,
+  AccordionHeader,
+  AccordionContent,
+  AccordionItem,
+} from "./Accordion";
+export type {
+  AccordionProps,
+  AccordionHeaderProps,
+  AccordionContentProps,
+  AccordionItemProps,
+} from "./Accordion";

package/src/chat/Chat.tsx

@@ -9,7 +9,7 @@ export const VARIANTS = ["subtle", "info", "neutral"] as const;
 export const POSITIONS = ["left", "right"] as const;
 export const SIZES = ["medium", "small"] as const;
 
-export interface ChatProps extends HTMLAttributes<HTMLDivElement> {
+interface ChatProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * Children of type `<Chat.Bubble />`.
    */
@@ -62,10 +62,9 @@ export interface ChatProps extends HTMLAttributes<HTMLDivElement> {
   "data-color"?: Exclude<AkselColor, AkselStatusColorRole>;
 }
 
-interface ChatComponent
-  extends React.ForwardRefExoticComponent<
-    ChatProps & React.RefAttributes<HTMLDivElement>
-  > {
+interface ChatComponent extends React.ForwardRefExoticComponent<
+  ChatProps & React.RefAttributes<HTMLDivElement>
+> {
   /**
    * @see 🏷️ {@link ChatBubbleProps}
    */
@@ -162,3 +161,5 @@ function variantToColor(variant: ChatProps["variant"]): AkselColor {
 Chat.Bubble = Bubble;
 
 export default Chat;
+export { Bubble as ChatBubble };
+export type { ChatProps, ChatBubbleProps };

package/src/chat/index.ts

@@ -1,3 +1,3 @@
 "use client";
-export { default as Chat, type ChatProps } from "./Chat";
-export { default as ChatBubble, type ChatBubbleProps } from "./Bubble";
+export { default as Chat, ChatBubble } from "./Chat";
+export type { ChatProps, ChatBubbleProps } from "./Chat";

package/src/chips/Chips.tsx

@@ -1,10 +1,9 @@
 import React, { HTMLAttributes, forwardRef } from "react";
-import type { OverridableComponent } from "../utils-external";
 import { cl } from "../utils/helpers";
 import RemovableChips, { ChipsRemovableProps } from "./Removable";
 import ToggleChips, { ChipsToggleProps } from "./Toggle";
 
-export interface ChipsProps extends HTMLAttributes<HTMLUListElement> {
+interface ChipsProps extends HTMLAttributes<HTMLUListElement> {
   children: React.ReactNode;
   /**
    * Changes padding and font-sizes.
@@ -13,22 +12,21 @@ export interface ChipsProps extends HTMLAttributes<HTMLUListElement> {
   size?: "medium" | "small";
 }
 
-interface ChipsComponent
-  extends React.ForwardRefExoticComponent<
-    ChipsProps & React.RefAttributes<HTMLUListElement>
-  > {
+interface ChipsComponent extends React.ForwardRefExoticComponent<
+  ChipsProps & React.RefAttributes<HTMLUListElement>
+> {
   /**
    * Toggle between selected-states.
    * @see 🏷️ {@link ToggleChipsProps}
    * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
    */
-  Toggle: OverridableComponent<ChipsToggleProps, HTMLButtonElement>;
+  Toggle: typeof ToggleChips;
   /**
    * Remove filter or the likes on click.
    * @see 🏷️ {@link RemovableChipsProps}
    * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
    */
-  Removable: OverridableComponent<ChipsRemovableProps, HTMLButtonElement>;
+  Removable: typeof RemovableChips;
 }
 
 /**
@@ -81,3 +79,5 @@ Chips.Toggle = ToggleChips;
 Chips.Removable = RemovableChips;
 
 export default Chips;
+export { ToggleChips as ChipsToggle, RemovableChips as ChipsRemovable };
+export type { ChipsProps, ChipsToggleProps, ChipsRemovableProps };

package/src/chips/index.ts

@@ -1,7 +1,7 @@
 "use client";
-export { default as Chips, type ChipsProps } from "./Chips";
-export {
-  RemovableChips as ChipsRemovable,
-  type ChipsRemovableProps,
-} from "./Removable";
-export { ToggleChips as ChipsToggle, type ChipsToggleProps } from "./Toggle";
+export { default as Chips, ChipsRemovable, ChipsToggle } from "./Chips";
+export type {
+  ChipsProps,
+  ChipsRemovableProps,
+  ChipsToggleProps,
+} from "./Chips";

package/src/collapsible/Collapsible.tsx

@@ -3,17 +3,19 @@ import { useId } from "../utils-external";
 import { useControllableState } from "../utils/hooks";
 import { CollapsibleContextProvider } from "./Collapsible.context";
 import { CollapsibleBaseProps } from "./Collapsible.types";
-import CollapsibleContent from "./parts/Collapsible.Content";
-import CollapsibleTrigger from "./parts/Collapsible.Trigger";
+import CollapsibleContent, {
+  CollapsibleContentProps,
+} from "./parts/Collapsible.Content";
+import CollapsibleTrigger, {
+  CollapsibleTriggerProps,
+} from "./parts/Collapsible.Trigger";
 
-export interface CollapsibleProps
-  extends CollapsibleBaseProps,
-    React.HTMLAttributes<HTMLDivElement> {}
+interface CollapsibleProps
+  extends CollapsibleBaseProps, React.HTMLAttributes<HTMLDivElement> {}
 
-interface CollapsibleComponent
-  extends React.ForwardRefExoticComponent<
-    CollapsibleProps & React.RefAttributes<HTMLDivElement>
-  > {
+interface CollapsibleComponent extends React.ForwardRefExoticComponent<
+  CollapsibleProps & React.RefAttributes<HTMLDivElement>
+> {
   /**
    * @see 🏷️ {@link CollapsibleTriggerProps}
    */
@@ -47,7 +49,7 @@ interface CollapsibleComponent
  *     <Button>Button</Button>
  *   </Collapsible.Trigger>
  *   <Collapsible.Content asChild>
- *     <Box padding="4" background="info-soft">
+ *     <Box padding="space-16" background="info-soft">
  *       <div>lorem ipsum</div>
  *     </Box>
  *   </Collapsible.Content>
@@ -99,3 +101,9 @@ Collapsible.Trigger = CollapsibleTrigger;
 Collapsible.Content = CollapsibleContent;
 
 export default Collapsible;
+export { CollapsibleTrigger, CollapsibleContent };
+export type {
+  CollapsibleProps,
+  CollapsibleTriggerProps,
+  CollapsibleContentProps,
+};

package/src/collapsible/index.ts

@@ -1,10 +1,11 @@
 "use client";
-export { default as Collapsible, type CollapsibleProps } from "./Collapsible";
 export {
-  default as CollapsibleTrigger,
-  type CollapsibleTriggerProps,
-} from "./parts/Collapsible.Trigger";
-export {
-  default as CollapsibleContent,
-  type CollapsibleContentProps,
-} from "./parts/Collapsible.Content";
+  default as Collapsible,
+  CollapsibleTrigger,
+  CollapsibleContent,
+} from "./Collapsible";
+export type {
+  CollapsibleProps,
+  CollapsibleTriggerProps,
+  CollapsibleContentProps,
+} from "./Collapsible";

package/src/data/action-bar/root/DataActionBarRoot.tsx

@@ -0,0 +1,59 @@
+import React from "react";
+import { Button } from "../../../button";
+import { Box } from "../../../layout/box";
+import { HStack, Spacer } from "../../../layout/stack";
+import { BodyShort } from "../../../typography";
+
+interface DataActionBarProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+  /**
+   * Number of selected rows
+   */
+  numOfSelectedRows: number;
+  /**
+   * Callback for the clear button
+   */
+  onClear: () => void;
+}
+
+/**
+ * TODO
+ *
+ * @see 🏷️ {@link DataActionBarProps}
+ * @example
+ * ```tsx
+ * <DataActionBar numOfSelectedRows={selectedRows.length} onClear={handleClear}>
+ *   TODO
+ * </DataActionBar>
+ * ```
+ */
+const DataActionBar = React.forwardRef<HTMLDivElement, DataActionBarProps>(
+  ({ children, numOfSelectedRows, onClear, ...rest }, forwardRef) => {
+    return (
+      <Box
+        asChild
+        borderWidth="1"
+        borderRadius="16"
+        borderColor="neutral"
+        background="raised"
+        padding="space-16"
+        data-color="neutral"
+      >
+        <HStack gap="space-16" align="center" ref={forwardRef} {...rest}>
+          <BodyShort textColor="subtle">
+            {numOfSelectedRows} rad{numOfSelectedRows > 1 ? "er" : ""} valgt
+          </BodyShort>
+          <Button variant="secondary" size="small" onClick={onClear}>
+            Nullstill valg
+          </Button>
+          <Spacer />
+          {children}
+        </HStack>
+      </Box>
+    );
+  },
+);
+
+export default DataActionBar;
+export { DataActionBar };
+export type { DataActionBarProps };

package/src/data/filter/index.ts

@@ -0,0 +1,6 @@
+"use client";
+export { DataFilter, DataFilterItem } from "./root/DataFilterRoot";
+export type {
+  DataFilterProps,
+  DataFilterItemProps,
+} from "./root/DataFilterRoot";

package/src/data/filter/item/DataFilterItem.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+
+type DataFilterItemProps = React.HTMLAttributes<HTMLDivElement>;
+
+const DataFilterItem = React.forwardRef<HTMLDivElement, DataFilterItemProps>(
+  ({ className, ...props }, ref) => {
+    return <div className={className} ref={ref} {...props} />;
+  },
+);
+
+export { DataFilterItem };
+export type { DataFilterItemProps };

package/src/data/filter/root/DataFilterRoot.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import {
+  DataFilterItem,
+  type DataFilterItemProps,
+} from "../item/DataFilterItem";
+
+interface DataFilterProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+}
+
+interface DataFilterRootComponent extends React.ForwardRefExoticComponent<
+  DataFilterProps & React.RefAttributes<HTMLDivElement>
+> {
+  /**
+   * @see 🏷️ {@link DataFilterItemProps}
+   * @example
+   * ```tsx
+   * <DataFilter>
+   *   <DataFilter.Item />
+   *   <DataFilter.Item />
+   *   <DataFilter.Item />
+   * </DataFilter>
+   * ```
+   */
+  Item: typeof DataFilterItem;
+}
+
+const DataFilter = React.forwardRef<HTMLDivElement, DataFilterProps>(
+  ({ children, ...rest }, forwardRef) => {
+    return (
+      <div ref={forwardRef} {...rest}>
+        {children}
+      </div>
+    );
+  },
+) as DataFilterRootComponent;
+
+DataFilter.Item = DataFilterItem;
+
+export default DataFilter;
+export { DataFilter, DataFilterItem };
+export type { DataFilterProps, DataFilterItemProps };