@telia/teddy 0.0.10 → 0.0.11

package/dist/{radio-group-DN1IYZdr.js → radio-group-B--zT3OL.js}

@@ -3,7 +3,7 @@ import { jsx as I } from "react/jsx-runtime";
 import p, { forwardRef as x, createElement as b, useRef as w, useState as T, useEffect as P, useCallback as k } from "react";
 import { c as S } from "./clsx-DB4S2d7J.js";
 import { _ as m, b as M, $ as $e } from "./index-DpfSJps6.js";
-import { $ as _e, a as q, b as H, c as Y, d as ve, e as y, f as ge, g as me, h as Re, i as he } from "./index-DPFZO9xk.js";
+import { $ as _e, a as q, b as H, c as Y, d as ve, e as y, f as ge, g as me, h as Re, i as he } from "./index-FPIZOCcD.js";
 import { $ as A } from "./index-DM5e-Whg.js";
 import { Label as Ie } from "./components/label/label.js";
 import { useComposedRefs as ye } from "./utils/composeRefs.js";
@@ -370,13 +370,13 @@ const Ye = [
     ref: t
   }));
 }), oo = Je, to = Ze, ro = eo, F = {
-  "teddy-radio-group": "_teddy-radio-group_upian_1",
-  "teddy-radio-group__group-label": "_teddy-radio-group__group-label_upian_10",
-  "teddy-radio-group__label": "_teddy-radio-group__label_upian_13",
-  "teddy-radio-group__group-label--required": "_teddy-radio-group__group-label--required_upian_23",
-  "teddy-radio-group__item": "_teddy-radio-group__item_upian_26",
-  "teddy-radio-group__trigger": "_teddy-radio-group__trigger_upian_45",
-  "teddy-radio-group__indicator": "_teddy-radio-group__indicator_upian_102"
+  "teddy-radio-group": "_teddy-radio-group_1flae_1",
+  "teddy-radio-group__group-label": "_teddy-radio-group__group-label_1flae_10",
+  "teddy-radio-group__label": "_teddy-radio-group__label_1flae_13",
+  "teddy-radio-group__group-label--required": "_teddy-radio-group__group-label--required_1flae_23",
+  "teddy-radio-group__item": "_teddy-radio-group__item_1flae_26",
+  "teddy-radio-group__trigger": "_teddy-radio-group__trigger_1flae_54",
+  "teddy-radio-group__indicator": "_teddy-radio-group__indicator_1flae_111"
 }, E = "teddy-radio-group", re = p.createContext(void 0), ne = p.forwardRef(
   ({ className: e, ...t }, o) => {
     const r = S([F[`${E}`]], e), [n, a] = p.useState();

package/dist/tokens/breakpoint/variables.json.d.ts

@@ -0,0 +1,11 @@
+declare const _default: {
+  "breakpoint": {
+    "sm": "0px",
+    "md": "600px",
+    "lg": "1024px",
+    "xl": "1440px"
+  }
+}
+;
+
+export default _default;

package/dist/utils/component-props-as.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+type ComponentPropsAs<C extends React.ElementType<any>, T extends string> = Omit<Extract<React.ComponentPropsWithoutRef<C>, {
+    as: T;
+}>, 'as' | 'asChild'>;
+export type { ComponentPropsAs };

package/dist/utils/component-props-as.js

@@ -0,0 +1 @@
+

package/dist/utils/layout/align.d.ts

@@ -0,0 +1,46 @@
+import { Responsive } from './util';
+
+declare const alignValues: readonly [{
+    readonly key: "start";
+    readonly value: "flex-start";
+}, {
+    readonly key: "center";
+    readonly value: "center";
+}, {
+    readonly key: "end";
+    readonly value: "flex-end";
+}, {
+    readonly key: "baseline";
+    readonly value: "baseline";
+}, {
+    readonly key: "stretch";
+    readonly value: "stretch";
+}];
+export declare const align: readonly [{
+    readonly key: "align";
+    readonly className: "teddy-ai";
+    readonly values: readonly [{
+        readonly key: "start";
+        readonly value: "flex-start";
+    }, {
+        readonly key: "center";
+        readonly value: "center";
+    }, {
+        readonly key: "end";
+        readonly value: "flex-end";
+    }, {
+        readonly key: "baseline";
+        readonly value: "baseline";
+    }, {
+        readonly key: "stretch";
+        readonly value: "stretch";
+    }];
+}];
+/**
+ * The alignment of the grid items. It can be 'start', 'center', 'end', 'baseline', 'stretch' or a responsive value.
+ * A responsive value is an object with the keys 'sm', 'md', 'lg', 'xl' and a value for the corresponding breakpoint.
+ * @example align={{ sm: 'start', md: 'center' }}
+ * @default 'stretch'
+ */
+export type Align = Responsive<(typeof alignValues)[number]['key']>;
+export {};

package/dist/utils/layout/align.js

@@ -0,0 +1,31 @@
+const e = [
+  {
+    key: "start",
+    value: "flex-start"
+  },
+  {
+    key: "center",
+    value: "center"
+  },
+  {
+    key: "end",
+    value: "flex-end"
+  },
+  {
+    key: "baseline",
+    value: "baseline"
+  },
+  {
+    key: "stretch",
+    value: "stretch"
+  }
+], a = [
+  {
+    key: "align",
+    className: "teddy-ai",
+    values: e
+  }
+];
+export {
+  a as align
+};

package/dist/utils/layout/flex.d.ts

@@ -1,23 +1,294 @@
 import { Responsive } from './util';
 
-export declare const flexGrowValues: readonly ["0", "1"];
-export declare const flexShrinkValues: readonly ["0", "1"];
-export declare const flexBasisValues: readonly [...("0" | "10" | "25" | "50" | "100" | "150" | "200" | "250" | "300" | "400" | "600" | "800" | "1000" | "1200" | "1600")[], "auto", "100%", "50%"];
+declare const flexGrowValues: readonly [{
+    readonly key: "0";
+    readonly value: "0";
+}, {
+    readonly key: "1";
+    readonly value: "1";
+}];
+declare const flexShrinkValues: readonly [{
+    readonly key: "0";
+    readonly value: "0";
+}, {
+    readonly key: "1";
+    readonly value: "1";
+}];
+declare const flexBasisValues: readonly [{
+    readonly key: "0";
+    readonly value: "var(--teddy-spacing-0)";
+}, {
+    readonly key: "10";
+    readonly value: "var(--teddy-spacing-10)";
+}, {
+    readonly key: "25";
+    readonly value: "var(--teddy-spacing-25)";
+}, {
+    readonly key: "50";
+    readonly value: "var(--teddy-spacing-50)";
+}, {
+    readonly key: "100";
+    readonly value: "var(--teddy-spacing-100)";
+}, {
+    readonly key: "150";
+    readonly value: "var(--teddy-spacing-150)";
+}, {
+    readonly key: "200";
+    readonly value: "var(--teddy-spacing-200)";
+}, {
+    readonly key: "250";
+    readonly value: "var(--teddy-spacing-250)";
+}, {
+    readonly key: "300";
+    readonly value: "var(--teddy-spacing-300)";
+}, {
+    readonly key: "400";
+    readonly value: "var(--teddy-spacing-400)";
+}, {
+    readonly key: "600";
+    readonly value: "var(--teddy-spacing-600)";
+}, {
+    readonly key: "800";
+    readonly value: "var(--teddy-spacing-800)";
+}, {
+    readonly key: "1000";
+    readonly value: "var(--teddy-spacing-1000)";
+}, {
+    readonly key: "1200";
+    readonly value: "var(--teddy-spacing-1200)";
+}, {
+    readonly key: "1600";
+    readonly value: "var(--teddy-spacing-1600)";
+}, {
+    readonly key: "gutter-sm";
+    readonly value: "var(--teddy-spacing-gutter-sm)";
+}, {
+    readonly key: "gutter-md";
+    readonly value: "var(--teddy-spacing-gutter-md)";
+}, {
+    readonly key: "gutter-lg";
+    readonly value: "var(--teddy-spacing-gutter-lg)";
+}, {
+    readonly key: "gutter-xl";
+    readonly value: "var(--teddy-spacing-gutter-xl)";
+}, {
+    readonly key: "page-padding-sm";
+    readonly value: "var(--teddy-spacing-page-padding-sm)";
+}, {
+    readonly key: "page-padding-md";
+    readonly value: "var(--teddy-spacing-page-padding-md)";
+}, {
+    readonly key: "page-padding-lg";
+    readonly value: "var(--teddy-spacing-page-padding-lg)";
+}, {
+    readonly key: "page-padding-xl";
+    readonly value: "var(--teddy-spacing-page-padding-xl)";
+}, {
+    readonly key: "auto";
+    readonly value: "auto";
+}, {
+    readonly key: "full";
+    readonly value: "100%";
+}, {
+    readonly key: "1/2";
+    readonly value: "50%";
+}];
+declare const flexDirectionValues: readonly [{
+    readonly key: "row";
+    readonly value: "row";
+}, {
+    readonly key: "row-reverse";
+    readonly value: "row-reverse";
+}, {
+    readonly key: "column";
+    readonly value: "column";
+}, {
+    readonly key: "column-reverse";
+    readonly value: "column-reverse";
+}];
+export declare const displayFlexValues: readonly [{
+    readonly key: "none";
+    readonly value: "none";
+}, {
+    readonly key: "inline-flex";
+    readonly value: "inline-flex";
+}, {
+    readonly key: "flex";
+    readonly value: "flex";
+}];
+declare const flexWrapValues: readonly [{
+    readonly key: "nowrap";
+    readonly value: "nowrap";
+}, {
+    readonly key: "wrap";
+    readonly value: "wrap";
+}, {
+    readonly key: "wrap-reverse";
+    readonly value: "wrap-reverse";
+}];
 export declare const flexLayout: readonly [{
+    readonly key: "display";
+    readonly className: "teddy-display";
+    readonly values: readonly [{
+        readonly key: "none";
+        readonly value: "none";
+    }, {
+        readonly key: "inline-flex";
+        readonly value: "inline-flex";
+    }, {
+        readonly key: "flex";
+        readonly value: "flex";
+    }];
+}, {
+    readonly key: "wrap";
+    readonly className: "teddy-fw";
+    readonly values: readonly [{
+        readonly key: "nowrap";
+        readonly value: "nowrap";
+    }, {
+        readonly key: "wrap";
+        readonly value: "wrap";
+    }, {
+        readonly key: "wrap-reverse";
+        readonly value: "wrap-reverse";
+    }];
+}, {
+    readonly key: "direction";
+    readonly className: "teddy-fd";
+    readonly values: readonly [{
+        readonly key: "row";
+        readonly value: "row";
+    }, {
+        readonly key: "row-reverse";
+        readonly value: "row-reverse";
+    }, {
+        readonly key: "column";
+        readonly value: "column";
+    }, {
+        readonly key: "column-reverse";
+        readonly value: "column-reverse";
+    }];
+}];
+export declare const flexChildren: readonly [{
     readonly key: "flexGrow";
     readonly className: "teddy-fg";
-    readonly values: readonly ["0", "1"];
+    readonly values: readonly [{
+        readonly key: "0";
+        readonly value: "0";
+    }, {
+        readonly key: "1";
+        readonly value: "1";
+    }];
 }, {
     readonly key: "flexShrink";
     readonly className: "teddy-fs";
-    readonly values: readonly ["0", "1"];
+    readonly values: readonly [{
+        readonly key: "0";
+        readonly value: "0";
+    }, {
+        readonly key: "1";
+        readonly value: "1";
+    }];
 }, {
     readonly key: "flexBasis";
     readonly className: "teddy-fb";
-    readonly values: readonly [...("0" | "10" | "25" | "50" | "100" | "150" | "200" | "250" | "300" | "400" | "600" | "800" | "1000" | "1200" | "1600")[], "auto", "100%", "50%"];
+    readonly values: readonly [{
+        readonly key: "0";
+        readonly value: "var(--teddy-spacing-0)";
+    }, {
+        readonly key: "10";
+        readonly value: "var(--teddy-spacing-10)";
+    }, {
+        readonly key: "25";
+        readonly value: "var(--teddy-spacing-25)";
+    }, {
+        readonly key: "50";
+        readonly value: "var(--teddy-spacing-50)";
+    }, {
+        readonly key: "100";
+        readonly value: "var(--teddy-spacing-100)";
+    }, {
+        readonly key: "150";
+        readonly value: "var(--teddy-spacing-150)";
+    }, {
+        readonly key: "200";
+        readonly value: "var(--teddy-spacing-200)";
+    }, {
+        readonly key: "250";
+        readonly value: "var(--teddy-spacing-250)";
+    }, {
+        readonly key: "300";
+        readonly value: "var(--teddy-spacing-300)";
+    }, {
+        readonly key: "400";
+        readonly value: "var(--teddy-spacing-400)";
+    }, {
+        readonly key: "600";
+        readonly value: "var(--teddy-spacing-600)";
+    }, {
+        readonly key: "800";
+        readonly value: "var(--teddy-spacing-800)";
+    }, {
+        readonly key: "1000";
+        readonly value: "var(--teddy-spacing-1000)";
+    }, {
+        readonly key: "1200";
+        readonly value: "var(--teddy-spacing-1200)";
+    }, {
+        readonly key: "1600";
+        readonly value: "var(--teddy-spacing-1600)";
+    }, {
+        readonly key: "gutter-sm";
+        readonly value: "var(--teddy-spacing-gutter-sm)";
+    }, {
+        readonly key: "gutter-md";
+        readonly value: "var(--teddy-spacing-gutter-md)";
+    }, {
+        readonly key: "gutter-lg";
+        readonly value: "var(--teddy-spacing-gutter-lg)";
+    }, {
+        readonly key: "gutter-xl";
+        readonly value: "var(--teddy-spacing-gutter-xl)";
+    }, {
+        readonly key: "page-padding-sm";
+        readonly value: "var(--teddy-spacing-page-padding-sm)";
+    }, {
+        readonly key: "page-padding-md";
+        readonly value: "var(--teddy-spacing-page-padding-md)";
+    }, {
+        readonly key: "page-padding-lg";
+        readonly value: "var(--teddy-spacing-page-padding-lg)";
+    }, {
+        readonly key: "page-padding-xl";
+        readonly value: "var(--teddy-spacing-page-padding-xl)";
+    }, {
+        readonly key: "auto";
+        readonly value: "auto";
+    }, {
+        readonly key: "full";
+        readonly value: "100%";
+    }, {
+        readonly key: "1/2";
+        readonly value: "50%";
+    }];
 }];
-export type FlexChildProps = {
-    flexBasis?: Responsive<(typeof flexBasisValues)[number]>;
-    flexGrow?: Responsive<(typeof flexGrowValues)[number]>;
-    flexShrink?: Responsive<(typeof flexShrinkValues)[number]>;
+export type FlexLayout = {
+    /**
+     * The display of the flex. It can be 'none', 'inline-flex', 'flex' or a responsive value.
+     * @default 'flex'
+     */
+    display?: Responsive<(typeof displayFlexValues)[number]['key']>;
+    direction?: Responsive<(typeof flexDirectionValues)[number]['key']>;
+    wrap?: Responsive<(typeof flexWrapValues)[number]['key']>;
+};
+export type FlexChildren = {
+    flexBasis?: Responsive<(typeof flexBasisValues)[number]['key']>;
+    flexGrow?: Responsive<(typeof flexGrowValues)[number]['key']>;
+    flexShrink?: Responsive<(typeof flexShrinkValues)[number]['key']>;
 };
+export {};
+/**
+ * The direction of the flex items. It can be 'row', 'column', 'row-reverse', 'column-reverse' or a responsive value.
+ * A responsive value is an object with the keys 'sm', 'md', 'lg', 'xl' and a value for the corresponding breakpoint.
+ * @example direction={{ sm: 'row', md: 'column' }}
+ */

package/dist/utils/layout/flex.js

@@ -1,9 +1,46 @@
-import { spacingValues as e } from "./util.js";
-const s = ["0", "1"], a = ["0", "1"], l = [...e, "auto", "100%", "50%"], o = [
+import { spacingValues as l } from "./util.js";
+const e = [
+  { key: "0", value: "0" },
+  { key: "1", value: "1" }
+], a = e, s = [
+  ...l,
+  { key: "auto", value: "auto" },
+  { key: "full", value: "100%" },
+  { key: "1/2", value: "50%" }
+], u = [
+  { key: "row", value: "row" },
+  { key: "row-reverse", value: "row-reverse" },
+  { key: "column", value: "column" },
+  { key: "column-reverse", value: "column-reverse" }
+], r = [
+  { key: "none", value: "none" },
+  { key: "inline-flex", value: "inline-flex" },
+  { key: "flex", value: "flex" }
+], y = [
+  { key: "nowrap", value: "nowrap" },
+  { key: "wrap", value: "wrap" },
+  { key: "wrap-reverse", value: "wrap-reverse" }
+], n = [
+  {
+    key: "display",
+    className: "teddy-display",
+    values: r
+  },
+  {
+    key: "wrap",
+    className: "teddy-fw",
+    values: y
+  },
+  {
+    key: "direction",
+    className: "teddy-fd",
+    values: u
+  }
+], v = [
   {
     key: "flexGrow",
     className: "teddy-fg",
-    values: s
+    values: e
   },
   {
     key: "flexShrink",
@@ -13,12 +50,11 @@ const s = ["0", "1"], a = ["0", "1"], l = [...e, "auto", "100%", "50%"], o = [
   {
     key: "flexBasis",
     className: "teddy-fb",
-    values: l
+    values: s
   }
 ];
 export {
-  l as flexBasisValues,
-  s as flexGrowValues,
-  o as flexLayout,
-  a as flexShrinkValues
+  r as displayFlexValues,
+  v as flexChildren,
+  n as flexLayout
 };