gd-design-library 1.2.1 → 1.4.0

package/ai/schemas/components/Image.d.ts

@@ -15,14 +15,22 @@ declare const _default: {
         keyboardSupport: boolean;
         screenReaderSupport: boolean;
         props: ({
+            name: string;
+            type: string;
+            description: string;
+            default: string;
+            required?: undefined;
+        } | {
             name: string;
             type: string;
             description: string;
             required: boolean;
+            default?: undefined;
         } | {
             name: string;
             type: string;
             description: string;
+            default?: undefined;
             required?: undefined;
         })[];
         examples: string[];

package/ai/schemas/components/InputFile.d.ts

@@ -25,7 +25,7 @@ declare const _default: {
             name: string;
             type: string;
             description: string;
-            enum: (string | boolean)[];
+            enum: readonly ["user", "environment"];
             default: string;
             required?: undefined;
         } | {

package/ai/schemas/components/Menu.d.ts

@@ -29,6 +29,11 @@ declare const _default: {
             type: string;
             description: string;
             default: string;
+        } | {
+            name: string;
+            type: string;
+            description: string;
+            default: number;
         })[];
         examples: string[];
     };

package/ai/schemas/components/Switch.d.ts

@@ -18,20 +18,20 @@ declare const _default: {
             name: string;
             type: string;
             description: string;
-            default: boolean;
+            default?: undefined;
             enum?: undefined;
         } | {
             name: string;
             type: string;
             description: string;
-            default: string;
-            enum: string[];
+            default: boolean;
+            enum?: undefined;
         } | {
             name: string;
             type: string;
             description: string;
-            default?: undefined;
-            enum?: undefined;
+            default: string;
+            enum: string[];
         } | {
             name: string;
             type: string;

package/ai/schemas/components/Table.d.ts

@@ -0,0 +1,78 @@
+declare const _default: {
+    component: {
+        name: string;
+        import: string;
+        description: string;
+        category: string;
+        complexity: string;
+        accessibility: string;
+        performance: string;
+        dependencies: string[];
+        peerDependencies: string[];
+        bundleSize: string;
+        browserSupport: string;
+        touchSupport: boolean;
+        keyboardSupport: boolean;
+        screenReaderSupport: boolean;
+        props: ({
+            name: string;
+            type: string;
+            description: string;
+            required: boolean;
+            example: string;
+            default?: undefined;
+        } | {
+            name: string;
+            type: string;
+            description: string;
+            default: boolean;
+            required?: undefined;
+            example?: undefined;
+        } | {
+            name: string;
+            type: string;
+            description: string;
+            default: number;
+            required?: undefined;
+            example?: undefined;
+        } | {
+            name: string;
+            type: string;
+            description: string;
+            example: string;
+            required?: undefined;
+            default?: undefined;
+        } | {
+            name: string;
+            type: string;
+            description: string;
+            default: number[];
+            example: string;
+            required?: undefined;
+        } | {
+            name: string;
+            type: string;
+            description: string;
+            required?: undefined;
+            example?: undefined;
+            default?: undefined;
+        })[];
+        ref: {
+            type: string;
+            description: string;
+            methods: {
+                name: string;
+                type: string;
+                description: string;
+                example: string;
+            }[];
+            example: string;
+        };
+        examples: string[];
+        bestPractices: string[];
+        commonMistakes: string[];
+        relatedComponents: string[];
+    };
+    compositionTips: string[];
+};
+export default _default;

package/ai/schemas/components/Truncate.d.ts

@@ -0,0 +1,46 @@
+declare const _default: {
+    component: {
+        name: string;
+        import: string;
+        description: string;
+        category: string;
+        complexity: string;
+        accessibility: string;
+        performance: string;
+        dependencies: string[];
+        peerDependencies: string[];
+        bundleSize: string;
+        browserSupport: string;
+        touchSupport: boolean;
+        keyboardSupport: boolean;
+        screenReaderSupport: boolean;
+        props: ({
+            name: string;
+            type: string;
+            description: string;
+            required: boolean;
+            default?: undefined;
+        } | {
+            name: string;
+            type: string;
+            description: string;
+            default: number;
+            required?: undefined;
+        } | {
+            name: string;
+            type: string;
+            description: string;
+            default: {};
+            required?: undefined;
+        } | {
+            name: string;
+            type: string;
+            description: string;
+            required?: undefined;
+            default?: undefined;
+        })[];
+        examples: string[];
+    };
+    compositionTips: string[];
+};
+export default _default;

package/components/core/Button/Button.js

@@ -8,32 +8,32 @@ import { ButtonVariant as v, ButtonTypes as P, ButtonRole as M } from "../../../
 import { useTheme as O } from "../../../hooks/useTheme/useTheme.js";
 import { get as R } from "../../../utils/helpers.js";
 import { TabIndex as W } from "../../../types/accesability.js";
-const g = x((u, m) => {
+const g = x((s, u) => {
   const {
     theme: t
   } = O(), {
-    variant: c = v.Primary,
-    rounded: f = R(t, "button.attrs.rounded", "none"),
+    variant: m = v.Primary,
+    rounded: c = R(t, "button.attrs.rounded", "none"),
     children: o,
     iconStart: r = null,
     iconEnd: a = null,
-    type: p = P.Button,
-    disabled: y = !1,
-    isIcon: h = !1,
+    type: f = P.Button,
+    disabled: p = !1,
+    isIcon: y = !1,
     ariaLabel: i,
     ariaPressed: l,
-    role: B = M.Button,
-    fullWidth: I = !1,
-    tabIndex: S = W.Default,
-    onClick: $,
+    role: h = M.Button,
+    fullWidth: B = !1,
+    tabIndex: I = W.Default,
+    onClick: S,
     justifyContent: d,
-    ...s
-  } = u;
-  return /* @__PURE__ */ b(C, { ref: m, $variant: c, $isIcon: h, $fullWidth: I, $rounded: f, disabled: y, onClick: $, type: p, role: B, theme: t, tabIndex: S, "data-testid": e, ...T(s), ...i ? {
+    ...$
+  } = s;
+  return /* @__PURE__ */ b(C, { ref: u, $variant: m, $isIcon: y, $fullWidth: B, $rounded: c, disabled: p, onClick: S, type: f, role: h, theme: t, tabIndex: I, "data-testid": e, ...T($), ...i ? {
     "aria-label": i
   } : {}, ...l ? {
     "aria-pressed": l
-  } : {}, ...s, children: [
+  } : {}, children: [
     r ? /* @__PURE__ */ n(E, { theme: t, "data-testid": `${e}-icon-start`, children: r }) : null,
     o ? /* @__PURE__ */ n(N, { theme: t, styles: d ? {
       justifyContent: d

package/components/core/Form/Form.stories.play.d.ts

@@ -0,0 +1,4 @@
+import { StoryContext } from '@storybook/types';
+export declare const withSubmitActions: ({ args, canvasElement, step }: StoryContext) => Promise<void>;
+export declare const withOnChangeActions: ({ args, canvasElement, step }: StoryContext) => Promise<void>;
+export declare const validationErrorsActions: ({ args, canvasElement, step }: StoryContext) => Promise<void>;

package/components/core/Image/Image.d.ts

@@ -1,2 +1,6 @@
 import { ImageProps } from './';
+/**
+ * @TODO: Cerebra
+ * - as span
+ */
 export declare const Image: import('react').ForwardRefExoticComponent<ImageProps & import('react').RefAttributes<HTMLImageElement>>;

package/components/core/Image/Image.js

@@ -1,40 +1,42 @@
 "use client";
-import { jsxs as x, jsx as a } from "@emotion/react/jsx-runtime";
-import { forwardRef as P, useState as p, useCallback as f } from "react";
+import { jsxs as A, jsx as r } from "@emotion/react/jsx-runtime";
+import { forwardRef as F, useState as f, useCallback as u } from "react";
 import { COMPONENT_NAME as e } from "./constants.js";
-import { ImageWrapperStyled as F, PlaceholderStyled as M, ImageStyled as O, CaptionStyled as T } from "./ImageStyled.js";
-import { Skeleton as A } from "../Skeleton/Skeleton.js";
-import { useTheme as R } from "../../../hooks/useTheme/useTheme.js";
-const W = P((u, g) => {
+import { ImageWrapperStyled as M, PlaceholderStyled as O, ImageStyled as T, CaptionStyled as R } from "./ImageStyled.js";
+import { Skeleton as W } from "../Skeleton/Skeleton.js";
+import { useTheme as _ } from "../../../hooks/useTheme/useTheme.js";
+const q = F((g, S) => {
   const {
-    id: S,
-    src: l,
-    alt: k,
-    width: s,
+    id: k,
+    src: s,
+    alt: C,
+    width: l,
     height: i,
     placeholder: d,
     caption: c,
-    onClick: C,
+    onClick: $,
     onLoad: t,
     onError: o,
     objectFit: b,
     fallbackComponent: n,
     styles: y,
-    ...w
-  } = u, {
-    theme: r
-  } = R(), [h, m] = p(!0), [E, I] = p(!1), L = h && d && l, N = (E || !l) && n, $ = f(() => {
-    m(!1), t == null || t();
-  }, [t]), j = f(() => {
-    m(!1), I(!0), o == null || o();
+    as: h,
+    captionAs: w,
+    ...E
+  } = g, {
+    theme: a
+  } = _(), [m, p] = f(!0), [I, L] = f(!1), N = m && d && s, j = (I || !s) && n, x = u(() => {
+    p(!1), t == null || t();
+  }, [t]), P = u(() => {
+    p(!1), L(!0), o == null || o();
   }, [o]);
-  return /* @__PURE__ */ x(F, { "data-testid": `${e}-wrapper`, id: S, width: s, height: i, theme: r, ...w, children: [
-    L && /* @__PURE__ */ a(M, { "data-testid": `${e}-placeholder`, theme: r, children: /* @__PURE__ */ a(A, { height: "100%", children: d }) }),
-    N ? n : /* @__PURE__ */ a(O, { "data-testid": e, theme: r, src: l, alt: k, width: s, height: i, objectFit: b, $isLoading: h, onLoad: $, onError: j, onClick: C, styles: y, ref: g }),
-    c && /* @__PURE__ */ a(T, { "data-testid": `${e}-caption`, theme: r, children: c })
+  return /* @__PURE__ */ A(M, { "data-testid": `${e}-wrapper`, id: k, width: l, height: i, theme: a, $as: h, ...E, children: [
+    N && /* @__PURE__ */ r(O, { "data-testid": `${e}-placeholder`, $as: h, theme: a, children: /* @__PURE__ */ r(W, { height: "100%", children: d }) }),
+    j ? n : /* @__PURE__ */ r(T, { "data-testid": e, theme: a, src: s, alt: C, width: l, height: i, objectFit: b, $isLoading: m, onLoad: x, onError: P, onClick: $, styles: y, ref: S }),
+    c && /* @__PURE__ */ r(R, { "data-testid": `${e}-caption`, $as: w, theme: a, children: c })
   ] });
 });
-W.displayName = e;
+q.displayName = e;
 export {
-  W as Image
+  q as Image
 };

package/components/core/Image/Image.types.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { ElementType, ReactNode } from 'react';
 import { CommonCssComponentProps, CommonCssComponentStyledProps } from '../..';
 export interface ImageProps extends CommonCssComponentProps {
     id?: string;
@@ -13,8 +13,11 @@ export interface ImageProps extends CommonCssComponentProps {
     placeholder?: ReactNode;
     fallbackComponent?: ReactNode;
     objectFit?: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
+    as?: keyof HTMLElementTagNameMap | ElementType;
+    captionAs?: keyof HTMLElementTagNameMap | ElementType;
 }
 export interface ImageWrapperStyledProps extends Pick<ImageProps, 'width' | 'height' | 'id' | 'className'>, CommonCssComponentStyledProps {
+    $as?: keyof HTMLElementTagNameMap | ElementType;
 }
 export interface ImageStyledProps extends Pick<ImageProps, 'objectFit'>, CommonCssComponentStyledProps<HTMLImageElement> {
     $isLoading?: boolean;
@@ -23,5 +26,9 @@ export interface ImageStyledProps extends Pick<ImageProps, 'objectFit'>, CommonC
     width?: number;
     height?: number;
 }
-export type ImagePlaceholderStyledProps = CommonCssComponentStyledProps;
-export type ImageCaptionStyledProps = CommonCssComponentStyledProps;
+export interface ImagePlaceholderStyledProps extends CommonCssComponentStyledProps {
+    $as?: keyof HTMLElementTagNameMap | ElementType;
+}
+export interface ImageCaptionStyledProps extends CommonCssComponentStyledProps {
+    $as?: keyof HTMLElementTagNameMap | ElementType;
+}

package/components/core/Image/ImageStyled.js

@@ -1,76 +1,78 @@
-"use client";
-import { jsx as l } from "@emotion/react/jsx-runtime";
+import { jsx as a } from "@emotion/react/jsx-runtime";
 import { forwardRef as x } from "react";
-import { getBoxStyles as i, tokensHandler as y } from "../../../tokens/utils.js";
+import { getBoxStyles as y, tokensHandler as i } from "../../../tokens/utils.js";
 import { get as d } from "../../../utils/helpers.js";
-const $ = (s) => {
+const I = (s) => {
   const {
     width: t,
     height: e,
+    $as: o = "div",
     theme: {
-      image: o,
-      ...r
+      image: r,
+      ...n
     } = {},
-    styles: c,
-    ...n
+    styles: p,
+    ...c
   } = s, {
-    boxStyles: p,
-    restProps: m
-  } = i(n), a = new Proxy(o || {}, y(r)), h = [d(a, "wrapper", {}), {
+    boxStyles: m,
+    restProps: l
+  } = y(c), h = new Proxy(r || {}, i(n)), g = [d(h, "wrapper", {}), {
     width: `${t ? `${t}px` : "100%"}`,
     height: `${e ? `${e}px` : "100%"}`
-  }, p, c];
-  return /* @__PURE__ */ l("div", { css: h, ...m });
+  }, m, p];
+  return /* @__PURE__ */ a(o, { css: g, ...l });
 }, b = x((s, t) => {
   const {
     objectFit: e = "cover",
     $isLoading: o,
     theme: {
       image: r,
-      ...c
+      ...n
     } = {},
-    styles: n,
-    width: p,
+    styles: p,
+    width: c,
     height: m,
-    ...a
+    ...l
   } = s, {
     boxStyles: h,
     restProps: g
-  } = i(a), P = new Proxy(r || {}, y(c)), S = [d(P, "default", {}), {
+  } = y(l), P = new Proxy(r || {}, i(n)), S = [d(P, "default", {}), {
     objectFit: e,
     opacity: `${o ? 0 : 1}`
-  }, h, n];
-  return /* @__PURE__ */ l("img", { css: S, width: p, height: m, ...g, ref: t });
-}), N = (s) => {
+  }, h, p];
+  return /* @__PURE__ */ a("img", { css: S, width: c, height: m, ...g, ref: t });
+}), C = (s) => {
   const {
     theme: {
       image: t,
       ...e
     } = {},
-    styles: o,
-    ...r
+    $as: o = "span",
+    styles: r,
+    ...n
   } = s, {
-    boxStyles: c,
-    restProps: n
-  } = i(r), p = new Proxy(t || {}, y(e)), m = [d(p, "placeholder", {}), c, o];
-  return /* @__PURE__ */ l("div", { css: m, ...n });
-}, v = (s) => {
+    boxStyles: p,
+    restProps: c
+  } = y(n), m = new Proxy(t || {}, i(e)), l = [d(m, "placeholder", {}), p, r];
+  return /* @__PURE__ */ a(o, { css: l, ...c });
+}, N = (s) => {
   const {
     theme: {
       image: t,
       ...e
     } = {},
-    styles: o,
-    ...r
+    $as: o = "figcaption",
+    styles: r,
+    ...n
   } = s, {
-    boxStyles: c,
-    restProps: n
-  } = i(r), p = new Proxy(t || {}, y(e)), m = [d(p, "caption", {}), c, o];
-  return /* @__PURE__ */ l("figcaption", { css: m, ...n });
+    boxStyles: p,
+    restProps: c
+  } = y(n), m = new Proxy(t || {}, i(e)), l = [d(m, "caption", {}), p, r];
+  return /* @__PURE__ */ a(o, { css: l, ...c });
 };
 export {
-  v as CaptionStyled,
+  N as CaptionStyled,
   b as ImageStyled,
-  $ as ImageWrapperStyled,
-  N as PlaceholderStyled
+  I as ImageWrapperStyled,
+  C as PlaceholderStyled
 };

package/components/core/Input/Input.js

@@ -1,73 +1,73 @@
 "use client";
-import { jsxs as t, jsx as r, Fragment as L } from "@emotion/react/jsx-runtime";
-import { forwardRef as P } from "react";
-import { DEFAULT_PROPS as e, COMPONENT_NAME as o, FOCUS_EXCLUDED_LIST as U } from "./constants.js";
-import { useInputHandlers as g } from "./useInputHandlers.js";
-import { InputStyled as j } from "./InputStyled.js";
-import { InputWrapper as c } from "./InputWrapper/InputWrapper.js";
+import { jsxs as s, jsx as r, Fragment as j } from "@emotion/react/jsx-runtime";
+import { forwardRef as q } from "react";
+import { COMPONENT_NAME as o, DEFAULT_PROPS as e, FOCUS_EXCLUDED_LIST as x } from "./constants.js";
+import { useInputHandlers as z } from "./useInputHandlers.js";
+import { InputStyled as D } from "./InputStyled.js";
+import { InputWrapper as l } from "./InputWrapper/InputWrapper.js";
 import { InputHelper as u } from "./InputHelper/InputHelper.js";
-import { InputAdornment as h } from "./InputAdornment/InputAdornment.js";
-import { useTheme as v } from "../../../hooks/useTheme/useTheme.js";
-import { SizeVariant as z } from "../../../types/common.js";
-const B = P((f, b) => {
+import { InputAdornment as f } from "./InputAdornment/InputAdornment.js";
+import { useTheme as T } from "../../../hooks/useTheme/useTheme.js";
+import { SizeVariant as g } from "../../../types/common.js";
+const G = q(({
+  wrapperAs: h = "label",
+  // Layout props
+  styles: I = {},
+  className: _ = "",
+  width: N,
+  // Input behavior props
+  variant: n = e.variant,
+  color: m = e.color,
+  disabled: S = e.disabled,
+  readOnly: O = e.readOnly,
+  // Accessibility props
+  ariaRequired: w = e.ariaRequired,
+  role: y = e.role,
+  tabIndex: E = e.tabIndex,
+  ariaDescribedBy: a,
+  // Event handling props
+  debounceCallbackTime: F,
+  onChange: M,
+  onKeyDown: $,
+  onMouseDown: b,
+  onBlur: A,
+  // Adornments
+  adornmentStart: p,
+  adornmentEnd: d,
+  // Helper text
+  label: i,
+  helperText: t,
+  ...C
+}, H) => {
   const {
-    theme: I
-  } = v(), {
-    wrapperAs: y = "label",
-    // Layout props
-    width: w,
-    className: N = e.className,
-    styles: S = e.styles,
-    // Input behavior props
-    variant: s = e.variant,
-    color: i = e.color,
-    disabled: _ = e.disabled,
-    readOnly: x = e.readOnly,
-    // Accessibility props
-    ariaRequired: D = e.ariaRequired,
-    role: E = e.role,
-    tabIndex: O = e.tabIndex,
-    ariaDescribedBy: l,
-    // Event handling props
-    debounceCallbackTime: T,
-    onChange: C,
-    onKeyDown: M,
-    onMouseDown: A,
-    onBlur: F,
-    // Adornments
-    adornmentStart: d,
-    adornmentEnd: m,
-    // Helper text
-    label: a,
-    helperText: n,
-    ...R
-  } = f, p = !U.includes(s), $ = !!(a || n), {
-    handlers: q,
-    isMouseInteraction: H
-  } = g({
-    onKeyDown: M,
-    onBlur: F,
-    onMouseDown: A,
-    onChange: C,
-    debounceCallbackTime: T
+    theme: L
+  } = T(), c = !x.includes(n), P = !!(i || t), {
+    handlers: R,
+    isMouseInteraction: U
+  } = z({
+    onKeyDown: $,
+    onBlur: A,
+    onMouseDown: b,
+    onChange: M,
+    debounceCallbackTime: F
   });
-  return /* @__PURE__ */ t(c, { as: y, withGap: $, className: N, width: w, styles: S, children: [
-    a && /* @__PURE__ */ r(u, { children: a }),
-    /* @__PURE__ */ t(c, { width: "100%", children: [
-      d && /* @__PURE__ */ r(h, { children: d }),
-      /* @__PURE__ */ r(j, { $isMouseInteraction: H && p, $color: i, ref: b, disabled: _, role: E, theme: I, type: s, readOnly: x, tabIndex: O, "aria-required": D, "data-testid": o, ...q, ...l ? {
-        "aria-describedby": l
-      } : {}, ...R }),
-      p && /* @__PURE__ */ t(L, { children: [
+  return /* @__PURE__ */ s(l, { as: h, withGap: P, className: _, width: N, styles: I, children: [
+    i && /* @__PURE__ */ r(u, { children: i }),
+    /* @__PURE__ */ s(l, { width: "100%", children: [
+      p && /* @__PURE__ */ r(f, { children: p }),
+      /* @__PURE__ */ r(D, { $isMouseInteraction: U && c, $color: m, ref: H, disabled: S, role: y, theme: L, type: n, readOnly: O, tabIndex: E, "aria-required": w, "data-testid": o, ...R, ...a ? {
+        "aria-describedby": a
+      } : {}, ...C }),
+      c && /* @__PURE__ */ s(j, { children: [
         /* @__PURE__ */ r("span", { className: `${o}__border` }),
         /* @__PURE__ */ r("span", { className: `${o}__outline` })
       ] }),
-      m && /* @__PURE__ */ r(h, { children: m })
+      d && /* @__PURE__ */ r(f, { children: d })
     ] }),
-    n && /* @__PURE__ */ r(u, { color: i, size: z.Sm, children: n })
+    t && /* @__PURE__ */ r(u, { color: m, size: g.Sm, children: t })
   ] });
 });
-B.displayName = o;
+G.displayName = o;
 export {
-  B as Input
+  G as Input
 };

package/components/core/Input/Input.types.d.ts

@@ -57,7 +57,6 @@ export interface InputHelperProps extends CommonCssComponentProps, PropsWithChil
 }
 export interface InputWrapperPropsStyled extends CommonCssComponentStyledProps<HTMLBaseElement>, PropsWithChildren {
     $as?: keyof HTMLElementTagNameMap | ElementType;
-    $width?: string;
     $withGap?: boolean;
 }
 export interface InputHelperPropsStyled extends CommonCssComponentStyledProps, PropsWithChildren {

package/components/core/Input/InputWrapper/InputWrapper.js

@@ -1,22 +1,21 @@
 "use client";
-import { jsx as d } from "@emotion/react/jsx-runtime";
+import { jsx as s } from "@emotion/react/jsx-runtime";
 import { forwardRef as f } from "react";
-import { COMPONENT_NAME as t } from "./constants.js";
+import { COMPONENT_NAME as r } from "./constants.js";
 import { InputWrapperStyled as n } from "./InputWrapperStyled.js";
-import { useTheme as h } from "../../../../hooks/useTheme/useTheme.js";
-const c = f((r, e) => {
+import { useTheme as d } from "../../../../hooks/useTheme/useTheme.js";
+const c = f((t, e) => {
   const {
     theme: o
-  } = h(), {
+  } = d(), {
     children: p,
-    as: i,
-    width: m,
+    as: m,
     withGap: a,
-    ...s
-  } = r;
-  return /* @__PURE__ */ d(n, { $as: i, $width: m, $withGap: a, ref: e, theme: o, "data-testid": t, ...s, children: p });
+    ...i
+  } = t;
+  return /* @__PURE__ */ s(n, { $as: m, $withGap: a, ref: e, theme: o, "data-testid": r, ...i, children: p });
 });
-c.displayName = t;
+c.displayName = r;
 export {
   c as InputWrapper
 };