@telia/teddy 0.0.15 → 0.0.17

package/dist/components/accordion/accordion.d.ts

@@ -1,4 +1,5 @@
-import { HeadingProps, IconProps } from '..';
+import { IconProps } from '../icon';
+import { HeadingProps } from '../heading';
 import { default as React } from 'react';
 
 import * as AccordionPrimitive from '@radix-ui/react-accordion';

package/dist/components/accordion/accordion.js

@@ -1,27 +1,93 @@
-import "react/jsx-runtime";
-import "../../clsx-DB4S2d7J.js";
-import "react";
-import { A as y } from "../../badge-Cnug5TzH.js";
-import "../../radio-group-B--zT3OL.js";
-import "../box/box.js";
-import "../flex/flex.js";
-import "../grid/grid.js";
-import "../../navigation-menu-DKuyW8zE.js";
-import "../link/link.js";
-import "../button/button.js";
-import "../field-error-text/field-error-text.js";
-import "../helper-text/helper-text.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import React__default from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { Heading } from "../heading/heading.js";
 import "../../assets/4bbd022cee9b0f06.svg";
-import "../icon/icon.js";
-import "../input/input.js";
-import "../label/label.js";
-import "../spinner/spinner.js";
-import "../text/text.js";
-import "../text-field/text-field.js";
-import "../heading/heading.js";
-import "../visually-hidden/visually-hidden.js";
-import "../text-spacing/text-spacing.js";
-import "../../index-DpfSJps6.js";
+import { Icon } from "../icon/icon.js";
+import { Slottable } from "@radix-ui/react-slot";
+const slideDown = "_slideDown_fs2mc_1";
+const slideUp = "_slideUp_fs2mc_1";
+const styles = {
+  "teddy-accordion--indented": "_teddy-accordion--indented_fs2mc_3",
+  "teddy-accordion__trigger": "_teddy-accordion__trigger_fs2mc_3",
+  "teddy-accordion__content": "_teddy-accordion__content_fs2mc_4",
+  "teddy-accordion--negative": "_teddy-accordion--negative_fs2mc_13",
+  "teddy-accordion__header": "_teddy-accordion__header_fs2mc_13",
+  "teddy-accordion__title": "_teddy-accordion__title_fs2mc_17",
+  "teddy-accordion__item": "_teddy-accordion__item_fs2mc_28",
+  "teddy-accordion": "_teddy-accordion_fs2mc_3",
+  "teddy-accordion__indicator": "_teddy-accordion__indicator_fs2mc_107",
+  slideDown,
+  slideUp
+};
+const rootClassName = "teddy-accordion";
+const Root = React__default.forwardRef(
+  ({ className, variant = "default", children, indented = false, ...props }, forwardRef) => {
+    const classes = clsx(
+      styles[rootClassName],
+      styles[`${rootClassName}--${variant}`],
+      {
+        [styles[`${rootClassName}--indented`]]: indented
+      },
+      className
+    );
+    return /* @__PURE__ */ jsx(AccordionPrimitive.Root, { ...props, ref: forwardRef, className: classes, children });
+  }
+);
+Root.displayName = "Accordion";
+const Item = React__default.forwardRef(
+  ({ className, children, ...props }, forwardRef) => {
+    const classes = clsx([styles[`${rootClassName}__item`]], className);
+    return /* @__PURE__ */ jsx(AccordionPrimitive.Item, { ...props, ref: forwardRef, className: classes, children });
+  }
+);
+const Header = React__default.forwardRef(
+  ({ className, children, ...props }, forwardRef) => {
+    const classes = clsx([styles[`${rootClassName}__header`]], className);
+    return /* @__PURE__ */ jsx(AccordionPrimitive.Header, { ...props, ref: forwardRef, asChild: true, className: classes, children: /* @__PURE__ */ jsx(Heading, { variant: "title-100", ...props.asChild ? { asChild: true } : { as: "h3" }, children }) });
+  }
+);
+Header.displayName = "Accordion.Header";
+const Trigger = React__default.forwardRef(
+  ({ className, children, hideIndicator, ...props }, forwardRef) => {
+    const classes = clsx([styles[`${rootClassName}__trigger`]], className);
+    return /* @__PURE__ */ jsxs(AccordionPrimitive.Trigger, { ...props, ref: forwardRef, className: classes, children: [
+      /* @__PURE__ */ jsx(Slottable, { children }),
+      !hideIndicator && /* @__PURE__ */ jsx(Indicator, {})
+    ] });
+  }
+);
+Trigger.displayName = "Accordion.Trigger";
+const Indicator = React__default.forwardRef(
+  ({ className, children, ...props }, forwardRef) => {
+    const classes = clsx([styles[`${rootClassName}__indicator`]], className);
+    return /* @__PURE__ */ jsx(Icon, { "aria-hidden": true, name: "chevron-down", ...props, ref: forwardRef, className: classes, children });
+  }
+);
+Indicator.displayName = "Accordion.Indicator";
+const Content = React__default.forwardRef(
+  ({ className, children, ...props }, forwardRef) => {
+    const classes = clsx([styles[`${rootClassName}__content`]], className);
+    return /* @__PURE__ */ jsx(AccordionPrimitive.Content, { ...props, ref: forwardRef, className: classes, children });
+  }
+);
+Content.displayName = "Accordion.Content";
+const Title = React__default.forwardRef(
+  ({ className, children, variant = "title-400", ...props }, forwardRef) => {
+    const classes = clsx([styles[`${rootClassName}__title`]], className);
+    return /* @__PURE__ */ jsx(Heading, { ...props, variant, ref: forwardRef, className: classes, children });
+  }
+);
+Title.displayName = "Accordion.Title";
+const Accordion = Object.assign(Root, {
+  Trigger,
+  Content,
+  Header,
+  Item,
+  Indicator,
+  Title
+});
 export {
-  y as Accordion
+  Accordion
 };

package/dist/components/accordion/index.js

@@ -1,4 +1,4 @@
-import { A as c } from "../../badge-Cnug5TzH.js";
+import { Accordion } from "./accordion.js";
 export {
-  c as Accordion
+  Accordion
 };

package/dist/components/badge/badge.js

@@ -1,27 +1,43 @@
-import "react/jsx-runtime";
-import "../../clsx-DB4S2d7J.js";
-import "react";
-import { B as y } from "../../badge-Cnug5TzH.js";
-import "../../index-DpfSJps6.js";
-import "../../radio-group-B--zT3OL.js";
-import "../box/box.js";
-import "../flex/flex.js";
-import "../grid/grid.js";
-import "../../navigation-menu-DKuyW8zE.js";
-import "../link/link.js";
-import "../button/button.js";
-import "../field-error-text/field-error-text.js";
-import "../helper-text/helper-text.js";
+import { jsxs, jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import React__default from "react";
+import { Slottable, Slot } from "@radix-ui/react-slot";
 import "../../assets/4bbd022cee9b0f06.svg";
-import "../icon/icon.js";
-import "../input/input.js";
-import "../label/label.js";
-import "../spinner/spinner.js";
-import "../text/text.js";
-import "../text-field/text-field.js";
-import "../heading/heading.js";
-import "../visually-hidden/visually-hidden.js";
-import "../text-spacing/text-spacing.js";
+import { Icon } from "../icon/icon.js";
+const styles = {
+  "teddy-badge": "_teddy-badge_sg6ab_1",
+  "teddy-badge--attention": "_teddy-badge--attention_sg6ab_13",
+  "teddy-badge--special": "_teddy-badge--special_sg6ab_17",
+  "teddy-badge--neutral": "_teddy-badge--neutral_sg6ab_21",
+  "teddy-badge--information": "_teddy-badge--information_sg6ab_25",
+  "teddy-badge--success": "_teddy-badge--success_sg6ab_29",
+  "teddy-badge--warning": "_teddy-badge--warning_sg6ab_33",
+  "teddy-badge--error": "_teddy-badge--error_sg6ab_37"
+};
+const rootClassName = "teddy-badge";
+function getIcon(variant) {
+  if (variant === "success") {
+    return "check-circle";
+  }
+  if (variant === "warning") {
+    return "alert";
+  }
+  if (variant === "error") {
+    return "error";
+  }
+}
+const Badge = React__default.forwardRef(
+  ({ className, variant, hideIcon, asChild, children, ...props }, forwardRef) => {
+    const classes = clsx([styles[`${rootClassName}`]], [styles[`${rootClassName}--${variant}`]], className);
+    const Comp = asChild ? Slot : "span";
+    const iconName = getIcon(variant);
+    return /* @__PURE__ */ jsxs(Comp, { ...props, ref: forwardRef, className: classes, children: [
+      !hideIcon && iconName && /* @__PURE__ */ jsx(Icon, { name: iconName }),
+      /* @__PURE__ */ jsx(Slottable, { children })
+    ] });
+  }
+);
+Badge.displayName = "Badge";
 export {
-  y as Badge
+  Badge
 };

package/dist/components/badge/index.js

@@ -1,4 +1,4 @@
-import { B as o } from "../../badge-Cnug5TzH.js";
+import { Badge } from "./badge.js";
 export {
-  o as Badge
+  Badge
 };

package/dist/components/box/box.js

@@ -1,13 +1,17 @@
-import { jsx as m } from "react/jsx-runtime";
-import p from "react";
-import { c as f } from "../../clsx-DB4S2d7J.js";
-import { extractProps as l } from "../../utils/layout/index.js";
-import { $ as d } from "../../index-DpfSJps6.js";
-const i = {}, x = "teddy-box", n = p.forwardRef((o, s) => {
-  const { className: t, asChild: r, style: e, ...c } = l(o), a = f([i[`${x}`]], t);
-  return /* @__PURE__ */ m(r ? d : "div", { ...c, style: e, ref: s, className: a });
+import { jsx } from "react/jsx-runtime";
+import React__default from "react";
+import clsx from "clsx";
+import { extractProps } from "../../utils/layout/index.js";
+import { Slot } from "@radix-ui/react-slot";
+const styles = {};
+const rootClassName = "teddy-box";
+const Box = React__default.forwardRef((props, forwardRef) => {
+  const { className, asChild, style, ...rest } = extractProps(props);
+  const classes = clsx([styles[`${rootClassName}`]], className);
+  const Comp = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(Comp, { ...rest, style, ref: forwardRef, className: classes });
 });
-n.displayName = "Box";
+Box.displayName = "Box";
 export {
-  n as Box
+  Box
 };

package/dist/components/box/index.js

@@ -1,4 +1,4 @@
-import { Box as x } from "./box.js";
+import { Box } from "./box.js";
 export {
-  x as Box
+  Box
 };

package/dist/components/button/button.js

@@ -1,11 +1,12 @@
-import '../../assets/button.css';
-import { jsxs as $, jsx as _ } from "react/jsx-runtime";
-import { a as A, $ as C } from "../../index-DpfSJps6.js";
-import { c as I } from "../../clsx-DB4S2d7J.js";
-import * as N from "react";
-import { Spinner as w } from "../spinner/spinner.js";
-import { extractProps as j } from "../../utils/layout/index.js";
-const k = "_fadeInAnimation_1biph_1", R = "_scaleInAnimation_1biph_1", t = {
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Slottable, Slot } from "@radix-ui/react-slot";
+import { clsx } from "clsx";
+import * as React from "react";
+import { Spinner } from "../spinner/spinner.js";
+import { extractProps } from "../../utils/layout/index.js";
+const fadeInAnimation = "_fadeInAnimation_1biph_1";
+const scaleInAnimation = "_scaleInAnimation_1biph_1";
+const styles = {
   "teddy-button": "_teddy-button_1biph_18",
   "teddy-button--sm": "_teddy-button--sm_1biph_53",
   "teddy-button--icon-only": "_teddy-button--icon-only_1biph_56",
@@ -27,10 +28,12 @@ const k = "_fadeInAnimation_1biph_1", R = "_scaleInAnimation_1biph_1", t = {
   "teddy-button--text-negative": "_teddy-button--text-negative_1biph_195",
   "teddy-button--text": "_teddy-button--text_1biph_195",
   "teddy-button__loading": "_teddy-button__loading_1biph_242",
-  fadeInAnimation: k,
+  fadeInAnimation,
   "teddy-button__spinner": "_teddy-button__spinner_1biph_253",
-  scaleInAnimation: R
-}, e = "teddy-button", W = [
+  scaleInAnimation
+};
+const rootClassName = "teddy-button";
+const variants = [
   "primary",
   "secondary",
   "destructive",
@@ -43,63 +46,68 @@ const k = "_fadeInAnimation_1biph_1", R = "_scaleInAnimation_1biph_1", t = {
   "tertiary-purple-negative",
   "text-negative",
   "expressive-negative"
-], b = N.forwardRef((y, p) => {
+];
+const Root = React.forwardRef((args, ref) => {
   const {
-    className: u,
-    variant: d,
-    size: o = "md",
-    iconOnly: c,
-    fullWidth: l,
-    disabled: i = !1,
-    loading: n = !1,
-    asChild: v = !1,
-    onClick: a,
-    children: m,
-    ...s
-  } = j(y), h = v ? C : "button", g = I(
-    [t[e], t[`${e}--${d}`], t[`${e}--${o}`]],
+    className,
+    variant,
+    size = "md",
+    iconOnly,
+    fullWidth,
+    disabled = false,
+    loading = false,
+    asChild = false,
+    onClick,
+    children,
+    ...props
+  } = extractProps(args);
+  const Comp = asChild ? Slot : "button";
+  const classes = clsx(
+    [styles[rootClassName], styles[`${rootClassName}--${variant}`], styles[`${rootClassName}--${size}`]],
     {
-      [t[`${e}--icon-only`]]: c,
-      [t[`${e}--negative`]]: d.endsWith("negative"),
-      [t[`${e}--full-width`]]: l,
-      [t[`${e}--disabled`]]: i || n
+      [styles[`${rootClassName}--icon-only`]]: iconOnly,
+      [styles[`${rootClassName}--negative`]]: variant.endsWith("negative"),
+      [styles[`${rootClassName}--full-width`]]: fullWidth,
+      [styles[`${rootClassName}--disabled`]]: disabled || loading
     },
-    u
+    className
   );
-  function f(r) {
-    if (i || n) {
-      r.preventDefault();
+  function handleClick(event) {
+    if (disabled || loading) {
+      event.preventDefault();
       return;
     }
-    a && a(r);
+    if (onClick) {
+      onClick(event);
+    }
   }
-  const x = () => d.endsWith("negative") ? "negative-disabled" : "disabled";
-  return /* @__PURE__ */ $(
-    h,
+  const getSpinnerVariant = () => variant.endsWith("negative") ? "negative-disabled" : "disabled";
+  return /* @__PURE__ */ jsxs(
+    Comp,
     {
-      className: g,
-      "aria-disabled": s["aria-disabled"] || i || n,
-      onClick: f,
-      ref: p,
-      ...s,
+      className: classes,
+      "aria-disabled": props["aria-disabled"] || disabled || loading,
+      onClick: handleClick,
+      ref,
+      ...props,
       children: [
-        /* @__PURE__ */ _(A, { children: m }),
-        n && /* @__PURE__ */ _(
-          w,
+        /* @__PURE__ */ jsx(Slottable, { children }),
+        loading && /* @__PURE__ */ jsx(
+          Spinner,
           {
-            size: o === "lg" ? "xs" : "xxs",
-            variant: x(),
-            className: t[`${e}__spinner`]
+            size: size === "lg" ? "xs" : "xxs",
+            variant: getSpinnerVariant(),
+            className: styles[`${rootClassName}__spinner`]
           }
         )
       ]
     }
   );
 });
-b.displayName = "Button";
-const P = Object.assign(b, {
-  variants: W
+Root.displayName = "Button";
+const Button = Object.assign(Root, {
+  variants
 });
 export {
-  P as Button
+  Button
 };

package/dist/components/button/index.js

@@ -1,4 +1,4 @@
-import { Button as r } from "./button.js";
+import { Button } from "./button.js";
 export {
-  r as Button
+  Button
 };

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

@@ -1,4 +1,8 @@
-import { Button as PrimitiveButton, Heading as PrimitiveHeading, Link as PrimitiveLink, Box, Flex } from '..';
+import { Link as PrimitiveLink } from '../link';
+import { Button as PrimitiveButton } from '../button';
+import { Heading as PrimitiveHeading } from '../heading';
+import { Box } from '../box';
+import { Flex } from '../flex';
 import { default as React } from 'react';
 
 declare const variantOptions: readonly ["purple-light", "purple-dark", "gray", "white", "beige"];
@@ -34,11 +38,17 @@ type ImageProps = React.ComponentPropsWithoutRef<'img'> & {
     /** The inset allows make the image bleed out to the edges */
     inset?: (typeof insetOptions)[number];
 };
-type ButtonProps = Omit<React.ComponentPropsWithoutRef<typeof PrimitiveButton>, 'variant'>;
+type ButtonProps = Omit<React.ComponentPropsWithoutRef<typeof PrimitiveButton>, 'variant'> & {
+    variant?: React.ComponentPropsWithoutRef<typeof PrimitiveButton>['variant'];
+};
 /** -------------------------------------------------------------------------------------------------
  * Link
  * -----------------------------------------------------------------------------------------------*/
 type LinkProps = React.ComponentPropsWithoutRef<typeof PrimitiveLink>;
+/** -------------------------------------------------------------------------------------------------
+ * Line
+ * -----------------------------------------------------------------------------------------------*/
+type LineProps = Omit<React.ComponentPropsWithoutRef<typeof Box>, 'asChild' | 'as' | 'children'>;
 declare const Card: React.ForwardRefExoticComponent<RootProps & React.RefAttributes<HTMLDivElement>> & {
     Root: React.ForwardRefExoticComponent<RootProps & React.RefAttributes<HTMLDivElement>>;
     Heading: React.ForwardRefExoticComponent<HeadingProps & React.RefAttributes<HTMLHeadingElement>>;
@@ -47,7 +57,27 @@ declare const Card: React.ForwardRefExoticComponent<RootProps & React.RefAttribu
         /** The inset allows make the image bleed out to the edges */
         inset?: "all" | "top" | "bottom" | "right" | "left" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "top-right-left" | "bottom-left-right" | "top-bottom" | "left-right" | undefined;
     } & React.RefAttributes<HTMLImageElement>>;
-    Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+    Button: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "aria-label"> & import('../../utils/layout/flex').FlexChildren & import('../../utils/layout/grid').GridChildren & import('../../utils/layout/position').PositionProps & import('../../utils/layout/inset').InsetProps & import('../../utils/layout/margin').MarginProps & import('../../utils/layout/padding').PaddingProps & import('../../utils/layout/width').WidthProps & import('../../utils/layout/height').HeightProps & {
+        asChild?: boolean | undefined;
+        loading?: boolean | undefined;
+        fullWidth?: boolean | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+        variant: "text" | "primary" | "secondary" | "destructive" | "tertiary-purple" | "expressive" | "primary-negative" | "secondary-negative" | "destructive-negative" | "tertiary-purple-negative" | "text-negative" | "expressive-negative";
+    } & {
+        iconOnly: true;
+        "aria-label": string;
+    } & React.RefAttributes<HTMLButtonElement>, "ref"> | Omit<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "aria-label"> & import('../../utils/layout/flex').FlexChildren & import('../../utils/layout/grid').GridChildren & import('../../utils/layout/position').PositionProps & import('../../utils/layout/inset').InsetProps & import('../../utils/layout/margin').MarginProps & import('../../utils/layout/padding').PaddingProps & import('../../utils/layout/width').WidthProps & import('../../utils/layout/height').HeightProps & {
+        asChild?: boolean | undefined;
+        loading?: boolean | undefined;
+        fullWidth?: boolean | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+        variant: "text" | "primary" | "secondary" | "destructive" | "tertiary-purple" | "expressive" | "primary-negative" | "secondary-negative" | "destructive-negative" | "tertiary-purple-negative" | "text-negative" | "expressive-negative";
+    } & {
+        iconOnly?: false | undefined;
+        "aria-label"?: string | undefined;
+    } & React.RefAttributes<HTMLButtonElement>, "ref">, "variant"> & {
+        variant?: "text" | "primary" | "secondary" | "destructive" | "tertiary-purple" | "expressive" | "primary-negative" | "secondary-negative" | "destructive-negative" | "tertiary-purple-negative" | "text-negative" | "expressive-negative" | undefined;
+    } & React.RefAttributes<HTMLButtonElement>>;
     Link: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & {
         asChild?: boolean | undefined;
         disableVisited?: boolean | undefined;
@@ -56,6 +86,7 @@ declare const Card: React.ForwardRefExoticComponent<RootProps & React.RefAttribu
         variant: "text" | "navigation" | "text-negative" | "standalone" | "standalone-negative" | "navigation-negative";
     } & React.RefAttributes<HTMLAnchorElement>, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
     Slot: React.ForwardRefExoticComponent<SlotProps & React.RefAttributes<HTMLDivElement>>;
+    Line: React.ForwardRefExoticComponent<LineProps & React.RefAttributes<HTMLDivElement>>;
     variantOptions: readonly ["purple-light", "purple-dark", "gray", "white", "beige"];
     insetOptions: readonly ["top", "bottom", "left", "right", "all", "top-right-left", "bottom-left-right", "top-left", "top-right", "bottom-left", "bottom-right", "top-bottom", "left-right"];
 };
@@ -67,6 +98,7 @@ type CardProps = {
     Image: ImageProps;
     Slot: SlotProps;
     Link: LinkProps;
+    Line: LineProps;
 };
 export { Card };
 export type { CardProps };