@telia/teddy 0.3.5 → 0.3.7

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/package.json

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