@telia/teddy 0.3.4 → 0.3.5

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/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.5",
   "sideEffects": [
     "**/*.css",
     "**/*.svg"