@telia/teddy 0.0.5 → 0.0.6

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

@@ -7,6 +7,7 @@ import * as AccordionPrimitive from '@radix-ui/react-accordion';
  * -----------------------------------------------------------------------------------------------*/
 type RootProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Root> & {
     variant?: 'default' | 'negative';
+    indented?: boolean;
 };
 /** -------------------------------------------------------------------------------------------------
  * Item

package/dist/components/accordion/accordion.js

@@ -1,9 +1,12 @@
 import "react/jsx-runtime";
 import "../../clsx-DB4S2d7J.js";
 import "react";
-import { A as u } from "../../badge-CbHdlkcM.js";
+import { A as y } from "../../badge-tBBi5HpV.js";
+import "../../radio-group-0Oc9WTDf.js";
+import "../box/box.js";
+import "../flex/flex.js";
 import "../grid/grid.js";
-import "../../navigation-menu-BgN7IKev.js";
+import "../navigation-menu/navigation-menu.js";
 import "../link/link.js";
 import "../button/button.js";
 import "../field-error-text/field-error-text.js";
@@ -20,5 +23,5 @@ import "../visually-hidden/visually-hidden.js";
 import "../text-spacing/text-spacing.js";
 import "../../index-DpfSJps6.js";
 export {
-  u as Accordion
+  y as Accordion
 };

package/dist/components/accordion/index.js

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

package/dist/components/badge/badge.js

@@ -1,10 +1,13 @@
 import "react/jsx-runtime";
 import "../../clsx-DB4S2d7J.js";
 import "react";
-import { B as u } from "../../badge-CbHdlkcM.js";
+import { B as y } from "../../badge-tBBi5HpV.js";
 import "../../index-DpfSJps6.js";
+import "../../radio-group-0Oc9WTDf.js";
+import "../box/box.js";
+import "../flex/flex.js";
 import "../grid/grid.js";
-import "../../navigation-menu-BgN7IKev.js";
+import "../navigation-menu/navigation-menu.js";
 import "../link/link.js";
 import "../button/button.js";
 import "../field-error-text/field-error-text.js";
@@ -20,5 +23,5 @@ import "../heading/heading.js";
 import "../visually-hidden/visually-hidden.js";
 import "../text-spacing/text-spacing.js";
 export {
-  u as Badge
+  y as Badge
 };

package/dist/components/badge/index.js

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

package/dist/components/box/box.d.ts

@@ -0,0 +1,23 @@
+import { ChildrenLayoutProps } from '../../utils/layout';
+import { default as React } from 'react';
+
+/** -------------------------------------------------------------------------------------------------
+ * Box
+ * -----------------------------------------------------------------------------------------------*/
+type AsChildProps = {
+    asChild: true;
+    as?: never;
+} & React.ComponentPropsWithoutRef<'span'>;
+type SpanProps = {
+    as?: 'span';
+    asChild?: false;
+} & React.ComponentPropsWithoutRef<'span'>;
+type DivProps = {
+    as: 'div';
+    asChild?: false;
+} & React.ComponentPropsWithoutRef<'div'>;
+type BoxProps = React.ComponentPropsWithoutRef<'div'> & ChildrenLayoutProps & (AsChildProps | SpanProps | DivProps);
+/** */
+declare const Box: React.ForwardRefExoticComponent<BoxProps & React.RefAttributes<HTMLDivElement>>;
+export { Box };
+export type { BoxProps };

package/dist/components/box/box.js

@@ -0,0 +1,13 @@
+import { jsx as a } from "react/jsx-runtime";
+import m from "react";
+import { c as p } from "../../clsx-DB4S2d7J.js";
+import { extractPropsResponsiveLayout as f } from "../../utils/layout.js";
+import { $ as i } from "../../index-DpfSJps6.js";
+const l = {}, d = "teddy-box", n = m.forwardRef((o, s) => {
+  const { className: t, asChild: e, ...r } = f(o), c = p([l[`${d}`]], t);
+  return /* @__PURE__ */ a(e ? i : "div", { ...r, ref: s, className: c });
+});
+n.displayName = "Box";
+export {
+  n as Box
+};

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

@@ -0,0 +1,2 @@
+export { Box } from './box';
+export type { BoxProps } from './box';

package/dist/components/box/index.js

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

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

@@ -43,7 +43,7 @@ declare const Card: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps
     Content: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
     Image: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "ref"> & {
         /** The inset allows make the image bleed out to the edges */
-        inset?: "top" | "bottom" | "left" | "right" | "all" | "top-right-left" | "bottom-left-right" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "top-bottom" | "left-right" | undefined;
+        inset?: "all" | "top" | "bottom" | "left" | "right" | "top-right-left" | "bottom-left-right" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "top-bottom" | "left-right" | undefined;
     } & React.RefAttributes<HTMLImageElement>>;
     Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
     Link: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & {
@@ -51,7 +51,7 @@ declare const Card: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps
         disableVisited?: boolean | undefined;
         ensureTargetArea?: boolean | undefined;
         silent?: boolean | undefined;
-        variant: "text" | "text-negative" | "navigation" | "standalone" | "standalone-negative" | "navigation-negative";
+        variant: "text" | "navigation" | "text-negative" | "standalone" | "standalone-negative" | "navigation-negative";
     } & React.RefAttributes<HTMLAnchorElement>, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
     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"];

package/dist/components/card/card.js

@@ -1,9 +1,12 @@
 import "react/jsx-runtime";
 import "react";
 import "../../clsx-DB4S2d7J.js";
-import { C as u } from "../../badge-CbHdlkcM.js";
+import { C as y } from "../../badge-tBBi5HpV.js";
+import "../../radio-group-0Oc9WTDf.js";
+import "../box/box.js";
+import "../flex/flex.js";
 import "../grid/grid.js";
-import "../../navigation-menu-BgN7IKev.js";
+import "../navigation-menu/navigation-menu.js";
 import "../link/link.js";
 import "../button/button.js";
 import "../field-error-text/field-error-text.js";
@@ -20,5 +23,5 @@ import "../text-spacing/text-spacing.js";
 import "../../utils/composeRefs.js";
 import "../../utils/composeEventHandlers.js";
 export {
-  u as Card
+  y as Card
 };

package/dist/components/card/index.js

@@ -1,4 +1,4 @@
-import { C as o } from "../../badge-CbHdlkcM.js";
+import { C as o } from "../../badge-tBBi5HpV.js";
 export {
   o as Card
 };

package/dist/components/flex/flex.d.ts

@@ -0,0 +1,23 @@
+import { LayoutFlexProps } from '../../utils/layout';
+import { default as React } from 'react';
+
+/** -------------------------------------------------------------------------------------------------
+ * Flex
+ * -----------------------------------------------------------------------------------------------*/
+type AsChildProps = {
+    asChild: true;
+    as?: never;
+} & React.ComponentPropsWithoutRef<'span'>;
+type SpanProps = {
+    as?: 'span';
+    asChild?: false;
+} & React.ComponentPropsWithoutRef<'span'>;
+type DivProps = {
+    as: 'div';
+    asChild?: false;
+} & React.ComponentPropsWithoutRef<'div'>;
+type FlexProps = React.ComponentPropsWithoutRef<'div'> & LayoutFlexProps & (AsChildProps | SpanProps | DivProps);
+/** */
+declare const Flex: React.ForwardRefExoticComponent<FlexProps & React.RefAttributes<HTMLDivElement>>;
+export { Flex };
+export type { FlexProps };

package/dist/components/flex/flex.js

@@ -0,0 +1,16 @@
+import '../../assets/flex.css';
+import { jsx as a } from "react/jsx-runtime";
+import m from "react";
+import { c as l } from "../../clsx-DB4S2d7J.js";
+import { $ as f } from "../../index-DpfSJps6.js";
+import { extractPropsResponsiveLayout as d } from "../../utils/layout.js";
+const p = {
+  "teddy-flex": "_teddy-flex_19teo_2"
+}, x = "teddy-flex", i = m.forwardRef((e, o) => {
+  const { className: s, asChild: t, ...r } = d(e), c = l([p[`${x}`]], s);
+  return /* @__PURE__ */ a(t ? f : "div", { ...r, ref: o, className: c });
+});
+i.displayName = "Flex";
+export {
+  i as Flex
+};

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

@@ -0,0 +1,2 @@
+export { Flex } from './flex';
+export type { FlexProps } from './flex';

package/dist/components/flex/index.js

@@ -0,0 +1,4 @@
+import { Flex as r } from "./flex.js";
+export {
+  r as Flex
+};

package/dist/components/grid/grid.d.ts

@@ -1,4 +1,4 @@
-import { LayoutProps } from '../../utils/layout';
+import { LayoutGridProps } from '../../utils/layout';
 import { default as React } from 'react';
 
 /** -------------------------------------------------------------------------------------------------
@@ -16,7 +16,7 @@ type DivProps = {
     as: 'div';
     asChild?: false;
 } & React.ComponentPropsWithoutRef<'div'>;
-type GridProps = React.ComponentPropsWithoutRef<'div'> & LayoutProps & (AsChildProps | SpanProps | DivProps);
+type GridProps = React.ComponentPropsWithoutRef<'div'> & LayoutGridProps & (AsChildProps | SpanProps | DivProps);
 /** */
 declare const Grid: React.ForwardRefExoticComponent<GridProps & React.RefAttributes<HTMLDivElement>>;
 export { Grid };

package/dist/components/grid/grid.js

@@ -1,18 +1,16 @@
 import '../../assets/grid.css';
-import { jsx as x } from "react/jsx-runtime";
-import _ from "react";
-import { c as $ } from "../../clsx-DB4S2d7J.js";
-import { $ as g } from "../../index-DpfSJps6.js";
-import { extractResponsiveLayout as u } from "../../utils/layout.js";
-const v = {
-  "teddy-grid": "_teddy-grid_12o73_2"
-}, C = "teddy-grid", G = _.forwardRef(
-  ({ className: s, display: o, columns: r, rows: e, flow: t, align: c, justify: a, gap: d = "100", as: i = "div", asChild: m, ...p }, f) => {
-    const n = m ? g : i, l = u({ display: o, columns: r, rows: e, flow: t, align: c, justify: a, gap: d }), y = $([v[`${C}`]], l, s);
-    return /* @__PURE__ */ x(n, { ...p, ref: f, className: y });
-  }
-);
-G.displayName = "Grid";
+import { jsx as m } from "react/jsx-runtime";
+import i from "react";
+import { c as p } from "../../clsx-DB4S2d7J.js";
+import { $ as f } from "../../index-DpfSJps6.js";
+import { extractPropsResponsiveLayout as l } from "../../utils/layout.js";
+const n = {
+  "teddy-grid": "_teddy-grid_1dv1t_2"
+}, y = "teddy-grid", x = i.forwardRef((s, o) => {
+  const { className: r, as: t = "div", asChild: e, ...a } = l(s), c = e ? f : t, d = p([n[`${y}`]], r);
+  return /* @__PURE__ */ m(c, { ...a, ref: o, className: d });
+});
+x.displayName = "Grid";
 export {
-  G as Grid
+  x as Grid
 };

package/dist/components/index.d.ts

@@ -1,3 +1,6 @@
+export * from './radio-group';
+export * from './box';
+export * from './flex';
 export * from './card';
 export * from './grid';
 export * from './navigation-menu';

package/dist/components/index.js

@@ -1,40 +1,46 @@
-import { A as e, B as t, C as p, S as x } from "../badge-CbHdlkcM.js";
-import { Grid as m } from "./grid/grid.js";
-import { N as i } from "../navigation-menu-BgN7IKev.js";
-import { Link as d } from "./link/link.js";
-import { Button as l } from "./button/button.js";
-import { FieldErrorText as c } from "./field-error-text/field-error-text.js";
-import { HelperText as g } from "./helper-text/helper-text.js";
-import { default as S } from "../assets/5161b177f001ea1a.svg";
-import { Icon as I } from "./icon/icon.js";
-import { Input as C, InputGroup as F } from "./input/input.js";
-import { Label as L } from "./label/label.js";
-import { Spinner as b } from "./spinner/spinner.js";
-import { Text as k } from "./text/text.js";
-import { TextField as w } from "./text-field/text-field.js";
-import { Heading as E } from "./heading/heading.js";
-import { VisuallyHidden as V } from "./visually-hidden/visually-hidden.js";
-import { TextSpacing as q } from "./text-spacing/text-spacing.js";
+import { R as e } from "../radio-group-0Oc9WTDf.js";
+import { Box as p } from "./box/box.js";
+import { Flex as f } from "./flex/flex.js";
+import { A as a, B as i, C as n, S as d } from "../badge-tBBi5HpV.js";
+import { Grid as s } from "./grid/grid.js";
+import { NavigationMenu as c } from "./navigation-menu/navigation-menu.js";
+import { Link as g } from "./link/link.js";
+import { Button as H } from "./button/button.js";
+import { FieldErrorText as F } from "./field-error-text/field-error-text.js";
+import { HelperText as I } from "./helper-text/helper-text.js";
+import { default as C } from "../assets/5161b177f001ea1a.svg";
+import { Icon as R } from "./icon/icon.js";
+import { Input as h, InputGroup as k } from "./input/input.js";
+import { Label as w } from "./label/label.js";
+import { Spinner as E } from "./spinner/spinner.js";
+import { Text as N } from "./text/text.js";
+import { TextField as j } from "./text-field/text-field.js";
+import { Heading as z } from "./heading/heading.js";
+import { VisuallyHidden as J } from "./visually-hidden/visually-hidden.js";
+import { TextSpacing as O } from "./text-spacing/text-spacing.js";
 export {
-  e as Accordion,
-  t as Badge,
-  l as Button,
-  p as Card,
-  c as FieldErrorText,
-  m as Grid,
-  E as Heading,
-  g as HelperText,
-  I as Icon,
-  C as Input,
-  F as InputGroup,
-  L as Label,
-  d as Link,
-  i as NavigationMenu,
-  b as Spinner,
-  x as Switch,
-  k as Text,
-  w as TextField,
-  q as TextSpacing,
-  V as VisuallyHidden,
-  S as iconsHref
+  a as Accordion,
+  i as Badge,
+  p as Box,
+  H as Button,
+  n as Card,
+  F as FieldErrorText,
+  f as Flex,
+  s as Grid,
+  z as Heading,
+  I as HelperText,
+  R as Icon,
+  h as Input,
+  k as InputGroup,
+  w as Label,
+  g as Link,
+  c as NavigationMenu,
+  e as RadioGroup,
+  E as Spinner,
+  d as Switch,
+  N as Text,
+  j as TextField,
+  O as TextSpacing,
+  J as VisuallyHidden,
+  C as iconsHref
 };

package/dist/components/input/input.d.ts

@@ -8,6 +8,7 @@ type InputProps = Omit<Input, 'children'> & {
     validationState?: ValidationState;
     /** Whether to show a loading indicator. */
     isLoading?: boolean;
+    /** Called when the value changes. */
     onValueChange?: (value: string) => void;
 };
 /** The input element */
@@ -16,6 +17,7 @@ declare const Input: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTM
     validationState?: ValidationState | undefined;
     /** Whether to show a loading indicator. */
     isLoading?: boolean | undefined;
+    /** Called when the value changes. */
     onValueChange?: ((value: string) => void) | undefined;
 } & React.RefAttributes<HTMLInputElement>>;
 type InputIndicatorProps = React.ComponentPropsWithoutRef<'svg'> & {
@@ -28,6 +30,7 @@ declare const InputGroup: React.ForwardRefExoticComponent<Omit<React.DetailedHTM
         validationState?: ValidationState | undefined;
         /** Whether to show a loading indicator. */
         isLoading?: boolean | undefined;
+        /** Called when the value changes. */
         onValueChange?: ((value: string) => void) | undefined;
     } & React.RefAttributes<HTMLInputElement>>;
     Indicator: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & {

package/dist/components/input/input.js

@@ -1,11 +1,11 @@
 import '../../assets/input.css';
-import { jsxs as y, jsx as o } from "react/jsx-runtime";
+import { jsxs as y, jsx as r } from "react/jsx-runtime";
 import { c } from "../../clsx-DB4S2d7J.js";
-import s from "react";
+import a from "react";
 import "../../assets/5161b177f001ea1a.svg";
-import { Icon as C } from "../icon/icon.js";
-import { Spinner as h } from "../spinner/spinner.js";
-const x = "_fadeInAnimation_1o9uu_1", A = "_scaleInAnimation_1o9uu_1", a = {
+import { Icon as x } from "../icon/icon.js";
+import { Spinner as A } from "../spinner/spinner.js";
+const C = "_fadeInAnimation_1o9uu_1", G = "_scaleInAnimation_1o9uu_1", s = {
   "teddy-input": "_teddy-input_1o9uu_17",
   "teddy-input__frame": "_teddy-input__frame_1o9uu_24",
   "teddy-input__input": "_teddy-input__input_1o9uu_31",
@@ -13,92 +13,91 @@ const x = "_fadeInAnimation_1o9uu_1", A = "_scaleInAnimation_1o9uu_1", a = {
   "teddy-input__input--invalid": "_teddy-input__input--invalid_1o9uu_66",
   "teddy-input__indicator": "_teddy-input__indicator_1o9uu_72",
   "teddy-input__input--error": "_teddy-input__input--error_1o9uu_75",
-  fadeInAnimation: x,
-  scaleInAnimation: A
+  fadeInAnimation: C,
+  scaleInAnimation: G
 }, _ = "teddy-input";
-function G(i) {
-  const e = i == null ? void 0 : i.target;
-  if (e.closest("input, button, a"))
+function P(n) {
+  const i = n == null ? void 0 : n.target;
+  if (i.closest("input, button, a"))
     return;
-  const t = [...i.currentTarget.getElementsByTagName("input")].find((d) => d);
+  const t = [...n.currentTarget.getElementsByTagName("input")].find((d) => d);
   if (!t)
     return;
-  const r = (t.compareDocumentPosition(e) & Node.DOCUMENT_POSITION_PRECEDING) !== 0 ? 0 : t.value.length;
+  const u = (t.compareDocumentPosition(i) & Node.DOCUMENT_POSITION_PRECEDING) !== 0 ? 0 : t.value.length;
   requestAnimationFrame(() => {
     try {
-      t.setSelectionRange(r, r);
+      t.setSelectionRange(u, u);
     } finally {
       t.focus();
     }
   });
 }
-const g = s.createContext(void 0), p = s.forwardRef(
-  ({ className: i, children: e, ...t }, n) => {
-    const u = c([a[`${_}`]], i);
-    return /* @__PURE__ */ y("div", { ...t, onPointerDown: G, ref: n, className: u, children: [
-      /* @__PURE__ */ o(g.Provider, { value: !0, children: e }),
-      /* @__PURE__ */ o("div", { className: a[`${_}__frame`] })
+const v = a.createContext(void 0), p = a.forwardRef(
+  ({ className: n, children: i, ...t }, e) => {
+    const o = c([s[`${_}`]], n);
+    return /* @__PURE__ */ y("div", { ...t, onPointerDown: P, ref: e, className: o, children: [
+      /* @__PURE__ */ r(v.Provider, { value: !0, children: i }),
+      /* @__PURE__ */ r("div", { className: s[`${_}__frame`] })
     ] });
   }
 );
 p.displayName = "InputGroup";
-const v = s.forwardRef(
-  ({ className: i, isLoading: e, validationState: t, ...n }, u) => {
-    const r = s.useContext(g), d = c(
+const N = a.forwardRef(
+  ({ className: n, onValueChange: i, isLoading: t, validationState: e, ...o }, u) => {
+    const d = a.useContext(v), m = c(
       [
-        a[`${_}__input`],
+        s[`${_}__input`],
         {
-          [a[`${_}__input--valid`]]: t === "valid",
-          [a[`${_}__input--error`]]: t === "invalid"
+          [s[`${_}__input--valid`]]: e === "valid",
+          [s[`${_}__input--error`]]: e === "invalid"
         }
       ],
-      i
-    ), N = r === !0;
-    function m(f) {
-      var I;
-      (I = n.onValueChange) == null || I.call(n, f.target.value), n.onChange && n.onChange(f);
+      n
+    ), g = d === !0;
+    function f(I) {
+      i == null || i(I.target.value), o.onChange && o.onChange(I);
     }
-    return N ? /* @__PURE__ */ o(
+    return g ? /* @__PURE__ */ r(
       "input",
       {
-        "aria-invalid": t === "invalid",
-        ...n,
-        onChange: m,
-        className: d,
+        "aria-invalid": e === "invalid",
+        ...o,
+        onChange: f,
+        className: m,
         ref: u
       }
     ) : /* @__PURE__ */ y(p, { children: [
-      /* @__PURE__ */ o(
+      /* @__PURE__ */ r(
         "input",
         {
-          "aria-invalid": t === "invalid",
-          ...n,
-          onChange: m,
-          className: d,
+          "aria-invalid": e === "invalid",
+          ...o,
+          onChange: f,
+          className: m,
           ref: u
         }
       ),
-      /* @__PURE__ */ o(l, { isValid: t === "valid", isLoading: e })
+      /* @__PURE__ */ r(l, { isValid: e === "valid", isLoading: t })
     ] });
   }
 );
-v.displayName = "Input";
-const l = s.forwardRef(
-  ({ className: i, isLoading: e, isValid: t, ...n }, u) => {
-    if (!t && !e)
+N.displayName = "Input";
+const l = a.forwardRef(
+  ({ className: n, isLoading: i, isValid: t, ...e }, o) => {
+    if (!t && !i)
       return null;
-    if (!t && e)
-      return /* @__PURE__ */ o(h, { className: i, size: "xs", ...n, ref: u });
-    const r = c([a[`${_}__indicator`]], i);
-    return /* @__PURE__ */ o(C, { ...n, size: "md", name: "check-circle-filled", className: r, ref: u });
+    if (!t && i)
+      return /* @__PURE__ */ r(A, { className: n, size: "xs", ...e, ref: o });
+    const u = c([s[`${_}__indicator`]], n);
+    return /* @__PURE__ */ r(x, { ...e, size: "md", name: "check-circle-filled", className: u, ref: o });
   }
 );
 l.displayName = "InputIndicator";
 const T = Object.assign(p, {
-  Input: v,
+  Input: N,
   Indicator: l
 });
 export {
-  v as Input,
+  N as Input,
   T as InputGroup
 };

package/dist/components/navigation-menu/index.js

@@ -1,4 +1,4 @@
-import { N as e } from "../../navigation-menu-BgN7IKev.js";
+import { NavigationMenu as e } from "./navigation-menu.js";
 export {
   e as NavigationMenu
 };