@telia/teddy 0.0.9 → 0.0.10

package/dist/utils/{layout.d.ts → layout/index.d.ts}

@@ -1,13 +1,11 @@
-import { breakpoint } from '../tokens/breakpoint/variables.json';
+import { WidthProps } from './width';
+import { FlexChildProps } from './flex';
+import { MarginProps } from './margin';
+import { Responsive } from './util';
 
-type Breakpoint = keyof typeof breakpoint;
-export type Responsive<T> = {
-    [key in Breakpoint]?: T;
-} | T;
 export declare const displayGridValues: readonly ["none", "inline-grid", "grid"];
 export declare const displayFlexValues: readonly ["none", "inline-flex", "flex"];
 export declare const displayValues: readonly ["none", "inline-flex", "flex", "none", "inline-grid", "grid"];
-export declare const marginValues: readonly [...("0" | "10" | "25" | "50" | "100" | "150" | "200" | "250" | "300" | "400" | "600" | "800" | "1000" | "1200" | "1600")[], "auto"];
 export declare const alignValues: readonly ["start", "center", "end", "baseline", "stretch"];
 export declare const justifyValues: readonly ["start", "center", "end", "between"];
 export declare const gapValues: ("0" | "10" | "25" | "50" | "100" | "150" | "200" | "250" | "300" | "400" | "600" | "800" | "1000" | "1200" | "1600")[];
@@ -21,36 +19,7 @@ export declare const gridRowStartValues: readonly ["1", "2", "3", "4", "5", "6",
 export declare const gridRowEndValues: readonly ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"];
 export declare const flexDirectionValues: readonly ["row", "column", "row-reverse", "column-reverse"];
 export declare const flexWrapValues: readonly ["nowrap", "wrap", "wrap-reverse"];
-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%"];
-export type CommonChildrenLayoutProps = {
-    /**
-     * The margin of the element.
-     */
-    m?: Responsive<(typeof marginValues)[number]>;
-    /**
-     * The margin-top of the element.
-     */
-    mt?: Responsive<(typeof marginValues)[number]>;
-    /**
-     * The margin-bottom of the element.
-     */
-    mb?: Responsive<(typeof marginValues)[number]>;
-    /**
-     * The margin-right of the element.
-     */
-    mr?: Responsive<(typeof marginValues)[number]>;
-    /**
-     * The margin-left of the element.
-     */
-    ml?: Responsive<(typeof marginValues)[number]>;
-};
-export type FlexChildProps = {
-    flexBasis?: Responsive<(typeof flexBasisValues)[number]>;
-    flexGrow?: Responsive<(typeof flexGrowValues)[number]>;
-    flexShrink?: Responsive<(typeof flexShrinkValues)[number]>;
-};
+export type CommonChildrenLayoutProps = MarginProps & WidthProps;
 export type GridChildProps = {
     gridColumnStart?: Responsive<(typeof gridColumnStartValues)[number]>;
     gridColumnEnd?: Responsive<(typeof gridColumnEndValues)[number]>;
@@ -140,11 +109,10 @@ export type LayoutGridProps = CommonFlexGridLayoutProps & {
 export type LayoutProps = Omit<LayoutGridProps, 'display'> & Omit<LayoutFlexProps, 'display'> & {
     display?: (typeof displayValues)[number];
 };
-export declare function extractPropsResponsiveLayout<T extends LayoutProps>(args: T): Omit<T, "direction" | "display" | "align" | "rows" | "wrap" | "columns" | "flow" | "justify" | "gap" | "gapX" | "gapY" | keyof FlexChildProps | keyof GridChildProps | keyof CommonChildrenLayoutProps> & {
+export declare function extractPropsResponsiveLayout<T extends LayoutProps>(args: T): Omit<T, "direction" | "display" | "align" | "rows" | "wrap" | "columns" | "flow" | "justify" | "gap" | "gapX" | "gapY" | keyof FlexChildProps | keyof GridChildProps | keyof MarginProps | keyof WidthProps> & {
     className: string;
 };
 export declare function extractResponsiveClassName<T>({ responsiveValue, rootClassName, }: {
     responsiveValue: Responsive<T>;
     rootClassName: string;
 }): string[] | string[][];
-export {};

package/dist/utils/layout/index.js

@@ -0,0 +1,156 @@
+import { c as m } from "../../clsx-DB4S2d7J.js";
+import { spacingValues as y, numberIterator as n } from "./util.js";
+import { margins as p } from "./margin.js";
+import { flexLayout as g } from "./flex.js";
+import { widths as f } from "./width.js";
+const N = ["none", "inline-grid", "grid"], w = ["none", "inline-flex", "flex"], v = [...w, ...N], V = ["start", "center", "end", "baseline", "stretch"], k = ["start", "center", "end", "between"], o = y, x = [...n, "none"], C = [...n, "none"], $ = ["row", "column", "dense", "row-dense", "column-dense"], R = n, b = n, j = [
+  ...n,
+  "span-2",
+  "span-3",
+  "span-4",
+  "span-5",
+  "span-6",
+  "span-7",
+  "span-8",
+  "span-9",
+  "span-10",
+  "span-11",
+  "span-12"
+], E = n, S = n, h = ["row", "column", "row-reverse", "column-reverse"], P = ["nowrap", "wrap", "wrap-reverse"], A = [
+  {
+    key: "display",
+    className: "teddy-display",
+    values: v
+  },
+  {
+    key: "columns",
+    className: "teddy-gtc",
+    values: x
+  },
+  {
+    key: "rows",
+    className: "teddy-gtr",
+    values: C
+  },
+  {
+    key: "flow",
+    className: "teddy-gaf",
+    values: $
+  },
+  {
+    key: "align",
+    className: "teddy-ai",
+    values: V
+  },
+  {
+    key: "justify",
+    className: "teddy-jc",
+    values: k
+  },
+  {
+    key: "gap",
+    className: "teddy-gap",
+    values: o
+  },
+  {
+    key: "gapX",
+    className: "teddy-cg",
+    values: o
+  },
+  {
+    key: "gapY",
+    className: "teddy-rg",
+    values: o
+  },
+  {
+    key: "wrap",
+    className: "teddy-fw",
+    values: P
+  },
+  {
+    key: "direction",
+    className: "teddy-fd",
+    values: h
+  },
+  {
+    key: "gridColumnStart",
+    className: "teddy-gcs",
+    values: R
+  },
+  {
+    key: "gridColumnEnd",
+    className: "teddy-gce",
+    values: b
+  },
+  {
+    key: "gridRowStart",
+    className: "teddy-grs",
+    values: E
+  },
+  {
+    key: "gridRowEnd",
+    className: "teddy-gre",
+    values: S
+  },
+  {
+    key: "gridColumn",
+    className: "teddy-gc",
+    values: j
+  },
+  ...p,
+  ...g,
+  ...f
+];
+function I(e) {
+  const t = { className: "" };
+  return Object.entries(e).map(([a, s]) => {
+    const r = A.find((l) => l.key === a);
+    return s !== null && r ? [
+      "className",
+      F({
+        responsiveValue: s,
+        rootClassName: `${r.className}`
+      })
+    ] : [a, s];
+  }).reduce(
+    (a, [s, r]) => typeof s != "string" ? a : s === "className" ? { ...a, [s]: m(a.className, r) } : { ...a, [s]: r },
+    t
+  );
+}
+function F({
+  responsiveValue: e,
+  rootClassName: t
+}) {
+  if (!e)
+    return [];
+  if (typeof e == "object" && e !== null)
+    return Object.entries(e).map(([l, d]) => {
+      const i = `${t}`, u = `${l}:${t}--${c(d)}`;
+      return [i, u];
+    });
+  const a = `${t}`, s = `${t}--${c(e)}`;
+  return [a, s];
+}
+function c(e) {
+  return typeof e == "string" && e.endsWith("%") ? e.replace("%", "p") : e;
+}
+export {
+  V as alignValues,
+  w as displayFlexValues,
+  N as displayGridValues,
+  v as displayValues,
+  I as extractPropsResponsiveLayout,
+  F as extractResponsiveClassName,
+  h as flexDirectionValues,
+  P as flexWrapValues,
+  o as gapValues,
+  b as gridColumnEndValues,
+  R as gridColumnStartValues,
+  j as gridColumnValues,
+  x as gridColumnsValues,
+  $ as gridFlowValues,
+  S as gridRowEndValues,
+  E as gridRowStartValues,
+  C as gridRowsValues,
+  k as justifyValues
+};

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

@@ -0,0 +1,46 @@
+import { Responsive } from './util';
+
+export declare const marginValues: readonly [...("0" | "10" | "25" | "50" | "100" | "150" | "200" | "250" | "300" | "400" | "600" | "800" | "1000" | "1200" | "1600")[], "auto"];
+export type MarginProps = {
+    /**
+     * The margin of the element.
+     */
+    m?: Responsive<(typeof marginValues)[number]>;
+    /**
+     * The margin-top of the element.
+     */
+    mt?: Responsive<(typeof marginValues)[number]>;
+    /**
+     * The margin-bottom of the element.
+     */
+    mb?: Responsive<(typeof marginValues)[number]>;
+    /**
+     * The margin-right of the element.
+     */
+    mr?: Responsive<(typeof marginValues)[number]>;
+    /**
+     * The margin-left of the element.s
+     */
+    ml?: Responsive<(typeof marginValues)[number]>;
+};
+export declare const margins: readonly [{
+    readonly key: "m";
+    readonly className: "teddy-m";
+    readonly values: readonly [...("0" | "10" | "25" | "50" | "100" | "150" | "200" | "250" | "300" | "400" | "600" | "800" | "1000" | "1200" | "1600")[], "auto"];
+}, {
+    readonly key: "mt";
+    readonly className: "teddy-mt";
+    readonly values: readonly [...("0" | "10" | "25" | "50" | "100" | "150" | "200" | "250" | "300" | "400" | "600" | "800" | "1000" | "1200" | "1600")[], "auto"];
+}, {
+    readonly key: "mb";
+    readonly className: "teddy-mb";
+    readonly values: readonly [...("0" | "10" | "25" | "50" | "100" | "150" | "200" | "250" | "300" | "400" | "600" | "800" | "1000" | "1200" | "1600")[], "auto"];
+}, {
+    readonly key: "ml";
+    readonly className: "teddy-ml";
+    readonly values: readonly [...("0" | "10" | "25" | "50" | "100" | "150" | "200" | "250" | "300" | "400" | "600" | "800" | "1000" | "1200" | "1600")[], "auto"];
+}, {
+    readonly key: "mr";
+    readonly className: "teddy-mr";
+    readonly values: readonly [...("0" | "10" | "25" | "50" | "100" | "150" | "200" | "250" | "300" | "400" | "600" | "800" | "1000" | "1200" | "1600")[], "auto"];
+}];

package/dist/utils/layout/margin.js

@@ -0,0 +1,32 @@
+import { spacingValues as a } from "./util.js";
+const e = [...a, "auto"], m = [
+  {
+    key: "m",
+    className: "teddy-m",
+    values: e
+  },
+  {
+    key: "mt",
+    className: "teddy-mt",
+    values: e
+  },
+  {
+    key: "mb",
+    className: "teddy-mb",
+    values: e
+  },
+  {
+    key: "ml",
+    className: "teddy-ml",
+    values: e
+  },
+  {
+    key: "mr",
+    className: "teddy-mr",
+    values: e
+  }
+];
+export {
+  e as marginValues,
+  m as margins
+};

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

@@ -0,0 +1,8 @@
+import { breakpoint } from '../../tokens/breakpoint/variables.json';
+
+export type Breakpoint = keyof typeof breakpoint;
+export type Responsive<T> = {
+    [key in Breakpoint]?: T;
+} | T;
+export declare const spacingValues: ("0" | "10" | "25" | "50" | "100" | "150" | "200" | "250" | "300" | "400" | "600" | "800" | "1000" | "1200" | "1600")[];
+export declare const numberIterator: readonly ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"];

package/dist/utils/layout/util.js

@@ -0,0 +1,33 @@
+const e = {
+  0: "0rem",
+  10: "0.0625rem",
+  25: "0.125rem",
+  50: "0.25rem",
+  100: "0.5rem",
+  150: "0.75rem",
+  200: "1rem",
+  250: "1.25rem",
+  300: "1.5rem",
+  400: "2rem",
+  600: "3rem",
+  800: "4rem",
+  1e3: "5rem",
+  1200: "6rem",
+  1600: "8rem",
+  gutter: {
+    sm: "1rem",
+    md: "1.5rem",
+    lg: "1.5rem",
+    xl: "1.5rem"
+  },
+  "page-padding": {
+    sm: "1rem",
+    md: "1.5rem",
+    lg: "3rem",
+    xl: "3rem"
+  }
+}, m = Object.keys(e), r = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"];
+export {
+  r as numberIterator,
+  m as spacingValues
+};

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

@@ -0,0 +1,33 @@
+import { Responsive } from './util';
+
+export declare const widthValues: readonly ["bp-sm", "bp-md", "bp-lg", "bp-xl", "auto", "100%", "50%"];
+export type WidthProps = {
+    /**
+     * Static width.
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/width
+     */
+    width?: Responsive<(typeof widthValues)[number]>;
+    /**
+     * Min width.
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/min-width
+     */
+    minWidth?: Responsive<(typeof widthValues)[number]>;
+    /**
+     * Max width.
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/max-width
+     */
+    maxWidth?: Responsive<(typeof widthValues)[number]>;
+};
+export declare const widths: readonly [{
+    readonly key: "width";
+    readonly className: "teddy-w";
+    readonly values: readonly ["bp-sm", "bp-md", "bp-lg", "bp-xl", "auto", "100%", "50%"];
+}, {
+    readonly key: "minWidth";
+    readonly className: "teddy-min-w";
+    readonly values: readonly ["bp-sm", "bp-md", "bp-lg", "bp-xl", "auto", "100%", "50%"];
+}, {
+    readonly key: "maxWidth";
+    readonly className: "teddy-max-w";
+    readonly values: readonly ["bp-sm", "bp-md", "bp-lg", "bp-xl", "auto", "100%", "50%"];
+}];

package/dist/utils/layout/width.js

@@ -0,0 +1,21 @@
+const e = ["bp-sm", "bp-md", "bp-lg", "bp-xl", "auto", "100%", "50%"], s = [
+  {
+    key: "width",
+    className: "teddy-w",
+    values: e
+  },
+  {
+    key: "minWidth",
+    className: "teddy-min-w",
+    values: e
+  },
+  {
+    key: "maxWidth",
+    className: "teddy-max-w",
+    values: e
+  }
+];
+export {
+  e as widthValues,
+  s as widths
+};

package/package.json

@@ -11,7 +11,7 @@
     "pnpm": ">=8"
   },
   "private": false,
-  "version": "0.0.9",
+  "version": "0.0.10",
   "sideEffects": [
     "**/*.css"
   ],
@@ -28,6 +28,7 @@
     "@storybook/addon-links": "^8.0.9",
     "@storybook/addon-storysource": "^8.0.9",
     "@storybook/blocks": "^8.0.9",
+    "@storybook/client-api": "^7.6.17",
     "@storybook/manager-api": "^8.0.9",
     "@storybook/react": "^8.0.9",
     "@storybook/react-vite": "^8.0.9",
@@ -70,12 +71,14 @@
   },
   "dependencies": {
     "@radix-ui/react-accordion": "^1.1.2",
+    "@radix-ui/react-collapsible": "^1.0.3",
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-navigation-menu": "^1.1.4",
     "@radix-ui/react-radio-group": "^1.1.3",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-toast": "^1.1.5",
+    "@radix-ui/react-use-controllable-state": "^1.0.1",
     "@react-spring/web": "^9.7.3",
     "clsx": "^2.1.0"
   },