@telia/teddy 0.3.4 → 0.3.7

package/dist/components/card/card-button.cjs

@@ -28,14 +28,14 @@ const Button = React.forwardRef(
       },
       className
     );
-    const ref = utils_composeRefs.composeRefs(context == null ? void 0 : context.buttonRef, forwardRef);
+    const ref = utils_composeRefs.useComposedRefs(forwardRef, context == null ? void 0 : context.buttonRef);
     return /* @__PURE__ */ jsxRuntime.jsxs(components_flex_flex.Flex, { className: wrapperClasses, children: [
       disclaimer && /* @__PURE__ */ jsxRuntime.jsx(components_text_text.Text, { mr: "100", variant: "additional-100", children: disclaimer }),
       /* @__PURE__ */ jsxRuntime.jsx(
         components_button_button.Button,
         {
-          ...!iconOnly || !props["aria-label"] ? { iconOnly: false, "aria-label": void 0 } : { iconOnly: true, "aria-label": props["aria-label"] },
           ref,
+          ...!iconOnly || !props["aria-label"] ? { iconOnly: false, "aria-label": void 0 } : { iconOnly: true, "aria-label": props["aria-label"] },
           variant: getButtonVariant(context == null ? void 0 : context.variant),
           ...props,
           className: classes

package/dist/components/card/card-button.js

@@ -2,7 +2,7 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import React__default from "react";
 import clsx from "clsx";
 import { RootContext, s as styles, actionElementIdentifier, rootClassName } from "./card.js";
-import { composeRefs } from "../../utils/composeRefs.js";
+import { useComposedRefs } from "../../utils/composeRefs.js";
 import { Button as Button$1 } from "../button/button.js";
 import { Flex } from "../flex/flex.js";
 import { Text } from "../text/text.js";
@@ -26,14 +26,14 @@ const Button = React__default.forwardRef(
       },
       className
     );
-    const ref = composeRefs(context == null ? void 0 : context.buttonRef, forwardRef);
+    const ref = useComposedRefs(forwardRef, context == null ? void 0 : context.buttonRef);
     return /* @__PURE__ */ jsxs(Flex, { className: wrapperClasses, children: [
       disclaimer && /* @__PURE__ */ jsx(Text, { mr: "100", variant: "additional-100", children: disclaimer }),
       /* @__PURE__ */ jsx(
         Button$1,
         {
-          ...!iconOnly || !props["aria-label"] ? { iconOnly: false, "aria-label": void 0 } : { iconOnly: true, "aria-label": props["aria-label"] },
           ref,
+          ...!iconOnly || !props["aria-label"] ? { iconOnly: false, "aria-label": void 0 } : { iconOnly: true, "aria-label": props["aria-label"] },
           variant: getButtonVariant(context == null ? void 0 : context.variant),
           ...props,
           className: classes

package/dist/components/card/card.cjs

@@ -100,13 +100,13 @@ const Root = React.forwardRef(
         ...props,
         className: classes,
         style: customStyle,
-        onClick: utils_composeEventHandlers.composeEventHandlers(props.onClick, (e) => {
-          var _a;
+        onPointerDown: utils_composeEventHandlers.composeEventHandlers(props.onPointerDown, (e) => {
           if (e.isDefaultPrevented())
             return;
-          if (linkRef.current)
+          if (linkRef.current && e.target !== linkRef.current)
             return linkRef.current.click();
-          (_a = buttonRef.current) == null ? void 0 : _a.click();
+          if (buttonRef.current && e.target !== buttonRef.current)
+            return buttonRef.current.click();
         }),
         ref: forwardRef,
         children

package/dist/components/card/card.js

@@ -98,13 +98,13 @@ const Root = React__default.forwardRef(
         ...props,
         className: classes,
         style: customStyle,
-        onClick: composeEventHandlers(props.onClick, (e) => {
-          var _a;
+        onPointerDown: composeEventHandlers(props.onPointerDown, (e) => {
           if (e.isDefaultPrevented())
             return;
-          if (linkRef.current)
+          if (linkRef.current && e.target !== linkRef.current)
             return linkRef.current.click();
-          (_a = buttonRef.current) == null ? void 0 : _a.click();
+          if (buttonRef.current && e.target !== buttonRef.current)
+            return buttonRef.current.click();
         }),
         ref: forwardRef,
         children

package/dist/components/card/index.cjs

@@ -15,35 +15,34 @@ const components_card_cardAvailability = require("./card-availability.cjs");
 const components_card_cardColorDots = require("./card-color-dots.cjs");
 const components_card_cardPrice = require("./card-price.cjs");
 const components_card_cardCarousel = require("./card-carousel.cjs");
-components_card_card.Root.displayName = "Card";
-components_card_cardButton.Button.displayName = "Card.Button";
-components_card_cardContent.Content.displayName = "Card.Content";
-components_card_cardHeading.Heading.displayName = "Card.Heading";
-components_card_cardIllustration.Illustration.displayName = "Card.Illustration";
-components_card_cardLine.Line.displayName = "Card.Line";
-components_card_cardLink.Link.displayName = "Card.Link";
-components_card_cardSlot.Slot.displayName = "Card.Slot";
-components_card_cardFooter.Footer.displayName = "Card.Footer";
-components_card_cardOverline.Overline.displayName = "Card.Overline";
-components_card_cardDescription.Description.displayName = "Card.Description";
-components_card_cardAvailability.Availability.displayName = "Card.Availability";
-components_card_cardColorDots.ColorDots.displayName = "Card.ColorDots";
-components_card_cardPrice.Price.displayName = "Card.Price";
-components_card_cardCarousel.ImageSlider.displayName = "Card.ImageSlider";
-const Card = Object.assign(components_card_card.Root, {
-  Heading: components_card_cardHeading.Heading,
-  Button: components_card_cardButton.Button,
-  Content: components_card_cardContent.Content,
-  Illustration: components_card_cardIllustration.Illustration,
-  Line: components_card_cardLine.Line,
-  Link: components_card_cardLink.Link,
-  Overline: components_card_cardOverline.Overline,
-  Slot: components_card_cardSlot.Slot,
-  Footer: components_card_cardFooter.Footer,
-  Description: components_card_cardDescription.Description,
-  Availability: components_card_cardAvailability.Availability,
-  ColorDots: components_card_cardColorDots.ColorDots,
-  Price: components_card_cardPrice.Price,
-  ImageSlider: components_card_cardCarousel.ImageSlider
-});
+const Card = components_card_card.Root;
+Card.displayName = "Card";
+Card.Heading = components_card_cardHeading.Heading;
+Card.Heading.displayName = "Card.Heading";
+Card.Button = components_card_cardButton.Button;
+Card.Button.displayName = "Card.Button";
+Card.Content = components_card_cardContent.Content;
+Card.Content.displayName = "Card.Content";
+Card.Illustration = components_card_cardIllustration.Illustration;
+Card.Illustration.displayName = "Card.Illustration";
+Card.Line = components_card_cardLine.Line;
+Card.Line.displayName = "Card.Line";
+Card.Link = components_card_cardLink.Link;
+Card.Link.displayName = "Card.Link";
+Card.Slot = components_card_cardSlot.Slot;
+Card.Slot.displayName = "Card.Slot";
+Card.Footer = components_card_cardFooter.Footer;
+Card.Footer.displayName = "Card.Footer";
+Card.Overline = components_card_cardOverline.Overline;
+Card.Overline.displayName = "Card.Overline";
+Card.Description = components_card_cardDescription.Description;
+Card.Description.displayName = "Card.Description";
+Card.Availability = components_card_cardAvailability.Availability;
+Card.Availability.displayName = "Card.Availability";
+Card.ColorDots = components_card_cardColorDots.ColorDots;
+Card.ColorDots.displayName = "Card.ColorDots";
+Card.Price = components_card_cardPrice.Price;
+Card.Price.displayName = "Card.Price";
+Card.ImageSlider = components_card_cardCarousel.ImageSlider;
+Card.ImageSlider.displayName = "Card.ImageSlider";
 exports.Card = Card;

package/dist/components/card/index.d.ts

@@ -1,47 +1,20 @@
-import { HeadingProps } from './card-heading';
+import { Heading, HeadingProps } from './card-heading';
 import { RootProps } from './card';
-import { ButtonProps } from './card-button';
-import { ContentProps } from './card-content';
-import { IllustrationProps } from './card-illustration';
-import { LineProps } from './card-line';
-import { LinkProps } from './card-link';
-import { SlotProps } from './card-slot';
-import { FooterProps } from './card-footer';
-import { OverlineProps } from './card-overline';
-import { DescriptionProps } from './card-description';
-import { AvailabilityProps } from './card-availability';
-import { ColorDotsProps } from './card-color-dots';
-import { PriceProps } from './card-price';
-import { ImageSliderProps } from './card-carousel';
+import { Button, ButtonProps } from './card-button';
+import { Content, ContentProps } from './card-content';
+import { Illustration, IllustrationProps } from './card-illustration';
+import { Line, LineProps } from './card-line';
+import { Link, LinkProps } from './card-link';
+import { Slot, SlotProps } from './card-slot';
+import { Footer, FooterProps } from './card-footer';
+import { Overline, OverlineProps } from './card-overline';
+import { Description, DescriptionProps } from './card-description';
+import { Availability, AvailabilityProps } from './card-availability';
+import { ColorDots, ColorDotsProps } from './card-color-dots';
+import { Price, PriceProps } from './card-price';
+import { ImageSlider, ImageSliderProps } from './card-carousel';
 
-export declare const Card: import('react').ForwardRefExoticComponent<RootProps & import('react').RefAttributes<HTMLDivElement>> & {
-    Heading: import('react').ForwardRefExoticComponent<HeadingProps & import('react').RefAttributes<HTMLHeadingElement>>;
-    Button: import('react').ForwardRefExoticComponent<ButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
-    Content: import('react').ForwardRefExoticComponent<ContentProps & import('react').RefAttributes<HTMLDivElement>>;
-    Illustration: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        inset?: "all" | "top" | "bottom" | "left" | "right" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "top-right-left" | "bottom-left-right" | "top-bottom" | "left-right" | undefined;
-        rounded?: boolean | undefined;
-    } & import('react').RefAttributes<HTMLDivElement>>;
-    Line: import('react').ForwardRefExoticComponent<LineProps & import('react').RefAttributes<HTMLDivElement>>;
-    Link: import('react').ForwardRefExoticComponent<Omit<Omit<import('react').DetailedHTMLProps<import('react').AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & {
-        asChild?: boolean | undefined;
-        disableVisited?: boolean | undefined;
-        ensureTargetArea?: boolean | undefined;
-        silent?: boolean | undefined;
-        variant: "text" | "navigation" | "text-negative" | "standalone" | "standalone-negative" | "navigation-negative";
-    } & import('react').RefAttributes<HTMLAnchorElement>, "ref"> & import('react').RefAttributes<HTMLAnchorElement>>;
-    Overline: import('react').ForwardRefExoticComponent<OverlineProps & import('react').RefAttributes<HTMLSpanElement>>;
-    Slot: import('react').ForwardRefExoticComponent<SlotProps & import('react').RefAttributes<HTMLDivElement>>;
-    Footer: import('react').ForwardRefExoticComponent<FooterProps & import('react').RefAttributes<HTMLDivElement>>;
-    Description: import('react').ForwardRefExoticComponent<DescriptionProps & import('react').RefAttributes<HTMLSpanElement>>;
-    Availability: import('react').ForwardRefExoticComponent<Partial<Omit<import('..').AlertBadgeProps & import('react').RefAttributes<HTMLSpanElement>, "ref">> & {
-        statusText: string;
-    } & import('react').RefAttributes<HTMLDivElement>>;
-    ColorDots: import('react').ForwardRefExoticComponent<ColorDotsProps & import('react').RefAttributes<HTMLDivElement>>;
-    Price: import('react').ForwardRefExoticComponent<PriceProps & import('react').RefAttributes<HTMLDivElement>>;
-    ImageSlider: import('react').ForwardRefExoticComponent<ImageSliderProps & import('react').RefAttributes<HTMLDivElement>>;
-};
-export type CardProps = {
+type CardProps = {
     Root: RootProps;
     Heading: HeadingProps;
     Button: ButtonProps;
@@ -58,3 +31,224 @@ export type CardProps = {
     Price: PriceProps;
     ImageSlider: ImageSliderProps;
 };
+/**
+ * Card is a versatile container component that can be used to display various types of content in a structured and consistent way.
+ * It supports different variants, layouts, and can be used for both static and interactive content.
+ *
+ * @component
+ *
+ * @example
+ * // Basic card with default layout
+ * <Card>
+ *   <Card.Heading>Basic Card</Card.Heading>
+ *   <Card.Content>
+ *     <Text>Some content here</Text>
+ *   </Card.Content>
+ * </Card>
+ *
+ * @example
+ * // Navigation card with vertical layout
+ * <Card layout="navigation-vertical">
+ *   <Card.Heading>Product Card</Card.Heading>
+ *   <Card.Content>
+ *     <Card.Button>View Details</Card.Button>
+ *   </Card.Content>
+ * </Card>
+ *
+ * @example
+ * // Product card with product layout
+ * <Card layout="product">
+ *   <Card.Illustration>
+ *     <Image src="product.jpg" alt="Product" />
+ *   </Card.Illustration>
+ *   <Card.Heading>Product Name</Card.Heading>
+ *   <Card.Price>99.99</Card.Price>
+ *   <Card.Content>
+ *     <Text>Product description</Text>
+ *   </Card.Content>
+ * </Card.Footer>
+ * </Card>
+ *
+ * @example
+ * // Rich card with background image
+ * <Card layout="rich-card" backgroundImageSrc="background.jpg" imageGradient="light">
+ *   <Card.Heading>Featured Content</Card.Heading>
+ *   <Card.Description>Rich content with background image</Card.Description>
+ *   <Card.Content>
+ *     <Card.Button>Learn More</Card.Button>
+ *   </Card.Content>
+ * </Card>
+ */
+declare const Card: import('react').ForwardRefExoticComponent<RootProps & import('react').RefAttributes<HTMLDivElement>> & {
+    /**
+     * Main title of the card. Renders the internal Heading component.
+     * Should be used to provide clear context about the card's content.
+     *
+     * @component
+     *
+     * @example
+     * <Card.Heading>Product Name</Card.Heading>
+     */
+    Heading: typeof Heading;
+    /**
+     * Interactive button for navigation cards.
+     * When used, the entire card becomes interactive through ref forwarding.
+     * Should not be used together with Card.Link in the same card.
+     * Works best with navigation layouts (navigation-vertical, navigation-horizontal-small, etc.).
+     *
+     * @component
+     *
+     * @example
+     * <Card.Content>
+     *   <Card.Button>View Details</Card.Button>
+     * </Card.Content>
+     */
+    Button: typeof Button;
+    /**
+     * Main content area of the card.
+     * Should wrap the primary content of the card.
+     * Layout and positioning are determined by the card's layout prop.
+     *
+     * @component
+     *
+     * @example
+     * <Card.Content>
+     *   <Text>Main content goes here</Text>
+     * </Card.Content>
+     */
+    Content: typeof Content;
+    /**
+     * Container for images or illustrations.
+     * Handles proper sizing and positioning of visual content.
+     * Particularly important for product and rich card layouts.
+     *
+     * @component
+     *
+     * @example
+     * <Card.Illustration>
+     *   <Image src="product.jpg" alt="Product" />
+     * </Card.Illustration>
+     */
+    Illustration: typeof Illustration;
+    /**
+     * Divider line between sections of the card.
+     * Used to create visual separation between content blocks.
+     * Common in product and rich card layouts.
+     *
+     * @component
+     *
+     * @example
+     * <Card.Line />
+     */
+    Line: typeof Line;
+    /**
+     * Alternative to Card.Button for navigation cards.
+     * When used, the entire card becomes interactive through ref forwarding.
+     * Should not be used together with Card.Button in the same card.
+     * Works best with navigation layouts.
+     *
+     * @component
+     *
+     * @example
+     * <Card.Content>
+     *   <Card.Link>Learn More</Card.Link>
+     * </Card.Content>
+     */
+    Link: typeof Link;
+    /**
+     * Flexible container for badges, icons, or other small elements.
+     * Can be positioned using the align prop.
+     * Common in product cards for badges and status indicators.
+     *
+     * @component
+     *
+     * @example
+     * <Card.Slot align="top-right">
+     *   <Badge>New</Badge>
+     * </Card.Slot>
+     */
+    Slot: typeof Slot;
+    /**
+     * Footer section of the card.
+     * Typically used for additional actions or information.
+     * Common in product cards for action buttons.
+     *
+     * @component
+     *
+     * @example
+     * <Card.Footer>
+     *   <Button>Add to Cart</Button>
+     * </Card.Footer>
+     */
+    Footer: typeof Footer;
+    /**
+     * Text displayed above the heading.
+     * Used for additional context or categorization.
+     * Common in product and rich card layouts.
+     *
+     * @component
+     *
+     * @example
+     * <Card.Overline>Featured Product</Card.Overline>
+     */
+    Overline: typeof Overline;
+    /**
+     * Short description text for the card.
+     * Provides additional context about the card's content.
+     * Common in product and rich card layouts.
+     *
+     * @component
+     *
+     * @example
+     * <Card.Description>Limited time offer</Card.Description>
+     */
+    Description: typeof Description;
+    /**
+     * Shows availability status of a product or service.
+     * Primarily used in product card layouts.
+     *
+     * @component
+     *
+     * @example
+     * <Card.Availability>In Stock</Card.Availability>
+     */
+    Availability: typeof Availability;
+    /**
+     * Displays color options or variants.
+     * Useful for product cards with multiple color choices.
+     * Primarily used in product card layouts.
+     *
+     * @component
+     *
+     * @example
+     * <Card.ColorDots colors={['red', 'blue', 'green']} />
+     */
+    ColorDots: typeof ColorDots;
+    /**
+     * Shows pricing information.
+     * Can display various price formats and options.
+     * Primarily used in product card layouts.
+     *
+     * @component
+     *
+     * @example
+     * <Card.Price>99.99</Card.Price>
+     */
+    Price: typeof Price;
+    /**
+     * Carousel component for displaying multiple images.
+     * Useful for product cards with multiple views.
+     * Primarily used in product card layouts.
+     *
+     * @component
+     *
+     * @example
+     * <Card.ImageSlider>
+     *   <Image src="view1.jpg" alt="View 1" />
+     *   <Image src="view2.jpg" alt="View 2" />
+     * </Card.ImageSlider>
+     */
+    ImageSlider: typeof ImageSlider;
+};
+export { Card };
+export type { CardProps };

package/dist/components/card/index.js

@@ -13,37 +13,36 @@ import { Availability } from "./card-availability.js";
 import { ColorDots } from "./card-color-dots.js";
 import { Price } from "./card-price.js";
 import { ImageSlider } from "./card-carousel.js";
-Root.displayName = "Card";
-Button.displayName = "Card.Button";
-Content.displayName = "Card.Content";
-Heading.displayName = "Card.Heading";
-Illustration.displayName = "Card.Illustration";
-Line.displayName = "Card.Line";
-Link.displayName = "Card.Link";
-Slot.displayName = "Card.Slot";
-Footer.displayName = "Card.Footer";
-Overline.displayName = "Card.Overline";
-Description.displayName = "Card.Description";
-Availability.displayName = "Card.Availability";
-ColorDots.displayName = "Card.ColorDots";
-Price.displayName = "Card.Price";
-ImageSlider.displayName = "Card.ImageSlider";
-const Card = Object.assign(Root, {
-  Heading,
-  Button,
-  Content,
-  Illustration,
-  Line,
-  Link,
-  Overline,
-  Slot,
-  Footer,
-  Description,
-  Availability,
-  ColorDots,
-  Price,
-  ImageSlider
-});
+const Card = Root;
+Card.displayName = "Card";
+Card.Heading = Heading;
+Card.Heading.displayName = "Card.Heading";
+Card.Button = Button;
+Card.Button.displayName = "Card.Button";
+Card.Content = Content;
+Card.Content.displayName = "Card.Content";
+Card.Illustration = Illustration;
+Card.Illustration.displayName = "Card.Illustration";
+Card.Line = Line;
+Card.Line.displayName = "Card.Line";
+Card.Link = Link;
+Card.Link.displayName = "Card.Link";
+Card.Slot = Slot;
+Card.Slot.displayName = "Card.Slot";
+Card.Footer = Footer;
+Card.Footer.displayName = "Card.Footer";
+Card.Overline = Overline;
+Card.Overline.displayName = "Card.Overline";
+Card.Description = Description;
+Card.Description.displayName = "Card.Description";
+Card.Availability = Availability;
+Card.Availability.displayName = "Card.Availability";
+Card.ColorDots = ColorDots;
+Card.ColorDots.displayName = "Card.ColorDots";
+Card.Price = Price;
+Card.Price.displayName = "Card.Price";
+Card.ImageSlider = ImageSlider;
+Card.ImageSlider.displayName = "Card.ImageSlider";
 export {
   Card
 };

package/dist/components/drawer/drawer-close.cjs

@@ -32,7 +32,7 @@ const Close = React.forwardRef(
       [drawer_module.styles[`${components_drawer_drawerRoot.rootClassName}__close--floating`]]: props.slot === "floating",
       className
     });
-    return /* @__PURE__ */ jsxRuntime.jsx(DrawerPrimitive__namespace.Close, { ...props, className: classes, ref: forwardedRef, asChild: true, children: props.children || /* @__PURE__ */ jsxRuntime.jsx(components_button_button.Button, { variant: "tertiary-purple", iconOnly: true, "aria-label": props["aria-label"], children: /* @__PURE__ */ jsxRuntime.jsx(components_icon_icon.Icon, { name: "close" }) }) });
+    return /* @__PURE__ */ jsxRuntime.jsx(DrawerPrimitive__namespace.Close, { ...props, className: classes, ref: forwardedRef, asChild: true, children: props.children || /* @__PURE__ */ jsxRuntime.jsx(components_button_button.Button, { variant: "tertiary-purple", iconOnly: true, "aria-label": props["aria-label"] ?? "Lukk", children: /* @__PURE__ */ jsxRuntime.jsx(components_icon_icon.Icon, { name: "close" }) }) });
   }
 );
 Close.displayName = "Close";

package/dist/components/drawer/drawer-close.d.ts

@@ -5,7 +5,12 @@ export type CloseProps = Omit<React.ComponentPropsWithoutRef<typeof DrawerPrimit
     children: React.ReactElement;
     slot: 'content';
 } | {
-    ['aria-label']: string;
+    /**
+     * Accessibility purposes, providing a label for screen readers
+     *
+     * @default 'Lukk'
+     */
+    ['aria-label']?: string;
     slot: 'floating';
     children?: never;
 });

package/dist/components/drawer/drawer-close.js

@@ -13,7 +13,7 @@ const Close = React__default.forwardRef(
       [styles[`${rootClassName}__close--floating`]]: props.slot === "floating",
       className
     });
-    return /* @__PURE__ */ jsx(DrawerPrimitive.Close, { ...props, className: classes, ref: forwardedRef, asChild: true, children: props.children || /* @__PURE__ */ jsx(Button, { variant: "tertiary-purple", iconOnly: true, "aria-label": props["aria-label"], children: /* @__PURE__ */ jsx(Icon, { name: "close" }) }) });
+    return /* @__PURE__ */ jsx(DrawerPrimitive.Close, { ...props, className: classes, ref: forwardedRef, asChild: true, children: props.children || /* @__PURE__ */ jsx(Button, { variant: "tertiary-purple", iconOnly: true, "aria-label": props["aria-label"] ?? "Lukk", children: /* @__PURE__ */ jsx(Icon, { name: "close" }) }) });
   }
 );
 Close.displayName = "Close";

package/dist/components/drawer/index.cjs

@@ -8,21 +8,20 @@ const components_drawer_drawerOverlay = require("./drawer-overlay.cjs");
 const components_drawer_drawerRoot = require("./drawer-root.cjs");
 const components_drawer_drawerTitle = require("./drawer-title.cjs");
 const components_drawer_drawerTrigger = require("./drawer-trigger.cjs");
-components_drawer_drawerClose.Close.displayName = "Drawer.Close";
-components_drawer_drawerContent.Content.displayName = "Drawer.Content";
-components_drawer_drawerDescription.Description.displayName = "Drawer.Description";
-components_drawer_drawerFooter.Footer.displayName = "Drawer.Footer";
-components_drawer_drawerOverlay.Overlay.displayName = "Drawer.Overlay";
-components_drawer_drawerRoot.Root.displayName = "Drawer";
-components_drawer_drawerTitle.Title.displayName = "Drawer.Title";
-components_drawer_drawerTrigger.Trigger.displayName = "Drawer.Trigger";
-const Drawer = Object.assign(components_drawer_drawerRoot.Root, {
-  Title: components_drawer_drawerTitle.Title,
-  Description: components_drawer_drawerDescription.Description,
-  Trigger: components_drawer_drawerTrigger.Trigger,
-  Overlay: components_drawer_drawerOverlay.Overlay,
-  Content: components_drawer_drawerContent.Content,
-  Footer: components_drawer_drawerFooter.Footer,
-  Close: components_drawer_drawerClose.Close
-});
+const Drawer = components_drawer_drawerRoot.Root;
+Drawer.displayName = "Drawer";
+Drawer.Trigger = components_drawer_drawerTrigger.Trigger;
+Drawer.Trigger.displayName = "Drawer.Trigger";
+Drawer.Content = components_drawer_drawerContent.Content;
+Drawer.Content.displayName = "Drawer.Content";
+Drawer.Title = components_drawer_drawerTitle.Title;
+Drawer.Title.displayName = "Drawer.Title";
+Drawer.Description = components_drawer_drawerDescription.Description;
+Drawer.Description.displayName = "Drawer.Description";
+Drawer.Overlay = components_drawer_drawerOverlay.Overlay;
+Drawer.Overlay.displayName = "Drawer.Overlay";
+Drawer.Footer = components_drawer_drawerFooter.Footer;
+Drawer.Footer.displayName = "Drawer.Footer";
+Drawer.Close = components_drawer_drawerClose.Close;
+Drawer.Close.displayName = "Drawer.Close";
 exports.Drawer = Drawer;

package/dist/components/drawer/index.d.ts

@@ -7,16 +7,7 @@ import { Root, RootProps } from './drawer-root';
 import { Title, TitleProps } from './drawer-title';
 import { Trigger, TriggerProps } from './drawer-trigger';
 
-export declare const Drawer: typeof Root & {
-    Title: typeof Title;
-    Description: typeof Description;
-    Trigger: typeof Trigger;
-    Overlay: typeof Overlay;
-    Content: typeof Content;
-    Footer: typeof Footer;
-    Close: typeof Close;
-};
-export type DrawerProps = {
+type DrawerProps = {
     Root: RootProps;
     Title: TitleProps;
     Description: DescriptionProps;
@@ -26,3 +17,124 @@ export type DrawerProps = {
     Footer: FooterProps;
     Close: CloseProps;
 };
+/**
+ * Drawer is a sliding panel that appears from the side of the screen.
+ * It's commonly used for navigation, settings, or displaying additional content without leaving the current page.
+ *
+ * @component
+ *
+ * @example
+ * // Basic usage
+ * <Drawer>
+ *   <Drawer.Trigger>
+ *     <Button variant="primary">Open Drawer</Button>
+ *   </Drawer.Trigger>
+ *   <Drawer.Content>
+ *     <Drawer.Title as="h3">Drawer Title</Drawer.Title>
+ *     <Drawer.Close slot="floating" aria-label="close" />
+ *     <Drawer.Description>Drawer content goes here.</Drawer.Description>
+ *     <Drawer.Footer>
+ *       <Button variant="primary">Save</Button>
+ *     </Drawer.Footer>
+ *   </Drawer.Content>
+ * </Drawer>
+ */
+declare const Drawer: typeof Root & {
+    /**
+     * Trigger component that opens the drawer when clicked.
+     * Must be passed a single child component that will be used as the trigger.
+     *
+     * @component
+     *
+     * @example
+     * <Drawer.Trigger>
+     *   <Button variant="primary">Open Drawer</Button>
+     * </Drawer.Trigger>
+     */
+    Trigger: typeof Trigger;
+    /**
+     * Content component that contains the drawer's content.
+     * Handles the positioning and scrolling behavior of the drawer content.
+     *
+     * @component
+     *
+     * @example
+     * <Drawer.Content>
+     *   <Drawer.Title>Title</Drawer.Title>
+     *   <Drawer.Description>Content</Drawer.Description>
+     * </Drawer.Content>
+     */
+    Content: typeof Content;
+    /**
+     * An accessible title to be announced when the drawer is opened.
+     * It will render the internal Heading component.
+     * If you want to hide the title, wrap it inside our Visually Hidden utility like this `<VisuallyHidden asChild>`.
+     *
+     * @component
+     *
+     * @example
+     * <Drawer.Title as="h3">Drawer Title</Drawer.Title>
+     */
+    Title: typeof Title;
+    /**
+     * An optional accessible description to be announced when the drawer is opened.
+     * This will render the internal Text component with a default p tag.
+     *
+     * If you want to hide the description, wrap it inside our Visually Hidden utility like this `<VisuallyHidden asChild>`.
+     *
+     * @component
+     *
+     * @example
+     * <Drawer.Description>
+     *   This is the main content of the drawer.
+     *   It can contain multiple paragraphs and other components.
+     * </Drawer.Description>
+     */
+    Description: typeof Description;
+    /**
+     * Overlay component provides the backdrop for the drawer.
+     * Handles the background dimming and click-outside behavior.
+     *
+     * @component
+     *
+     * @example
+     * <Drawer.Overlay>
+     *   <Drawer.Content>
+     *     {/* Content will slide in from the side *\/}
+     *   </Drawer.Content>
+     * </Drawer.Overlay>
+     */
+    Overlay: typeof Overlay;
+    /**
+     * Footer component for organizing action buttons or additional content at the bottom of the drawer.
+     * Provides consistent spacing and styling for footer content.
+     *
+     * @component
+     *
+     * @example
+     * <Drawer.Footer>
+     *   <Button variant="tertiary-purple">Cancel</Button>
+     *   <Button variant="primary">Save Changes</Button>
+     * </Drawer.Footer>
+     */
+    Footer: typeof Footer;
+    /**
+     * Close component provides a button to close the drawer.
+     * Can be used either as a floating close button or within content.
+     *
+     * @component
+     *
+     * @example
+     * // Floating close button
+     * <Drawer.Close slot="floating" aria-label="Lukk" />
+     *
+     * @example
+     * // Close button within content
+     * <Drawer.Close slot="content">
+     *   <Button variant="primary">Done</Button>
+     * </Drawer.Close>
+     */
+    Close: typeof Close;
+};
+export { Drawer };
+export type { DrawerProps };

package/dist/components/drawer/index.js

@@ -6,23 +6,22 @@ import { Overlay } from "./drawer-overlay.js";
 import { Root } from "./drawer-root.js";
 import { Title } from "./drawer-title.js";
 import { Trigger } from "./drawer-trigger.js";
-Close.displayName = "Drawer.Close";
-Content.displayName = "Drawer.Content";
-Description.displayName = "Drawer.Description";
-Footer.displayName = "Drawer.Footer";
-Overlay.displayName = "Drawer.Overlay";
-Root.displayName = "Drawer";
-Title.displayName = "Drawer.Title";
-Trigger.displayName = "Drawer.Trigger";
-const Drawer = Object.assign(Root, {
-  Title,
-  Description,
-  Trigger,
-  Overlay,
-  Content,
-  Footer,
-  Close
-});
+const Drawer = Root;
+Drawer.displayName = "Drawer";
+Drawer.Trigger = Trigger;
+Drawer.Trigger.displayName = "Drawer.Trigger";
+Drawer.Content = Content;
+Drawer.Content.displayName = "Drawer.Content";
+Drawer.Title = Title;
+Drawer.Title.displayName = "Drawer.Title";
+Drawer.Description = Description;
+Drawer.Description.displayName = "Drawer.Description";
+Drawer.Overlay = Overlay;
+Drawer.Overlay.displayName = "Drawer.Overlay";
+Drawer.Footer = Footer;
+Drawer.Footer.displayName = "Drawer.Footer";
+Drawer.Close = Close;
+Drawer.Close.displayName = "Drawer.Close";
 export {
   Drawer
 };

package/dist/components/modal/index.d.ts

@@ -88,7 +88,7 @@ declare const Modal: import('react').FC<RootProps> & {
     /**
      * An accessible title to be announced when the dialog is opened.
      * It will render the internal Heading component
-     * If you want to hide the title, wrap it inside our Visually Hidden utility like this <VisuallyHidden asChild>.
+     * If you want to hide the title, wrap it inside our Visually Hidden utility like this`<VisuallyHidden asChild>`.
      *
      * @component
      *
@@ -100,7 +100,7 @@ declare const Modal: import('react').FC<RootProps> & {
      * An optional accessible description to be announced when the dialog is opened.
      * This will render the internal Text component with an default p tag
      *
-     * If you want to hide the description, wrap it inside our Visually Hidden utility like this <VisuallyHidden asChild>
+     * If you want to hide the description, wrap it inside our Visually Hidden utility like this  `<VisuallyHidden asChild>`
      *
      * @component
      *

package/package.json

@@ -20,7 +20,7 @@
     "pnpm": ">=9"
   },
   "private": false,
-  "version": "0.3.4",
+  "version": "0.3.7",
   "sideEffects": [
     "**/*.css",
     "**/*.svg"