gd-design-library 1.3.0 → 1.4.0

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/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/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
 };

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

@@ -1,26 +1,23 @@
 "use client";
 import { jsx as u } from "@emotion/react/jsx-runtime";
-import { getBoxStyles as h, tokensHandler as w } from "../../../../tokens/utils.js";
+import { getBoxStyles as S, tokensHandler as d } from "../../../../tokens/utils.js";
 import { get as t } from "../../../../utils/helpers.js";
-const P = (s) => {
+const w = (o) => {
   const {
     theme: {
-      input: r,
-      ...p
+      input: s,
+      ...r
     } = {},
-    $width: e,
-    $as: n = "span",
-    $withGap: m,
-    styles: c = {},
-    ...l
-  } = s, {
-    boxStyles: i,
+    $as: p = "span",
+    $withGap: n,
+    styles: m = {},
+    ...c
+  } = o, {
+    boxStyles: l,
     restProps: a
-  } = h(l), y = new Proxy(r || {}, w(p)), o = t(y, "wrapper", {}), d = [t(o, "default", {}), m ? t(o, "withGap", {}) : {}, e ? {
-    width: e
-  } : {}, i, c];
-  return /* @__PURE__ */ u(n, { css: d, ...a });
+  } = S(c), y = new Proxy(s || {}, d(r)), e = t(y, "wrapper", {}), i = [t(e, "default", {}), n ? t(e, "withGap", {}) : {}, l, m];
+  return /* @__PURE__ */ u(p, { css: i, ...a });
 };
 export {
-  P as InputWrapperStyled
+  w as InputWrapperStyled
 };

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

@@ -3,7 +3,6 @@ export declare const COMPONENT_NAME = "Input";
 export declare const DEFAULT_PROPS: {
     variant: InputVariantType;
     color: InputColorVariant;
-    className: string;
     disabled: boolean;
     readOnly: boolean;
     ariaRequired: boolean;

package/components/core/Input/constants.js

@@ -1,18 +1,16 @@
-import { InputVariantType as a, InputColorVariant as e, InputRole as t } from "../../../types/input.js";
-import { TabIndex as o } from "../../../types/accesability.js";
-const l = "Input", s = {
+import { InputVariantType as a, InputRole as e, InputColorVariant as o } from "../../../types/input.js";
+import { TabIndex as t } from "../../../types/accesability.js";
+const i = "Input", l = {
   variant: a.Text,
-  color: e.Primary,
-  className: "",
+  color: o.Primary,
   disabled: !1,
   readOnly: !1,
   ariaRequired: !1,
-  role: t.Textbox,
-  tabIndex: o.Default,
-  styles: {}
-}, i = [a.Checkbox, a.Radio, a.Range];
+  role: e.Textbox,
+  tabIndex: t.Default
+}, p = [a.Checkbox, a.Radio, a.Range];
 export {
-  l as COMPONENT_NAME,
-  s as DEFAULT_PROPS,
-  i as FOCUS_EXCLUDED_LIST
+  i as COMPONENT_NAME,
+  l as DEFAULT_PROPS,
+  p as FOCUS_EXCLUDED_LIST
 };

package/components/core/Modal/Modal.js

@@ -1,71 +1,60 @@
 "use client";
-import { jsx as a, jsxs as g, Fragment as T } from "@emotion/react/jsx-runtime";
-import { forwardRef as x, useEffect as u, useCallback as h } from "react";
-import { COMPONENT_NAME as t } from "./constants.js";
-import { ModalOverlayStyled as N, ModalContentStyled as P, ModalHeaderStyled as A, ModalTitleStyled as B, CloseButtonStyled as F, ModalBodyStyled as K, ModalFooterStyled as L } from "./ModalStyled.js";
-import { useTheme as j } from "../../../hooks/useTheme/useTheme.js";
-import { useLogger as D } from "../../../hooks/useLogger/useLogger.js";
-import { get as p } from "../../../utils/helpers.js";
+import { jsx as d, jsxs as y, Fragment as B } from "@emotion/react/jsx-runtime";
+import { forwardRef as T, useCallback as g, useEffect as w } from "react";
+import { COMPONENT_NAME as e } from "./constants.js";
+import { ModalOverlayStyled as x, ModalContentStyled as N, ModalHeaderStyled as P, ModalTitleStyled as A, CloseButtonStyled as K, ModalBodyStyled as L, ModalFooterStyled as j } from "./ModalStyled.js";
+import { useTheme as D } from "../../../hooks/useTheme/useTheme.js";
+import { useLogger as F } from "../../../hooks/useLogger/useLogger.js";
+import { get as s } from "../../../utils/helpers.js";
 import { Portal as H } from "../Portal/Portal.js";
 import { convertToInlineBoxStyles as I } from "../../../tokens/utils.js";
 import { Icon as R } from "../Icon/Icon.js";
 import { KEYBOARD_KEYS as Y } from "../../../constants/keyboard.js";
-const _ = x(({
-  isOpen: o = !1,
-  isCustomView: f = !1,
-  onClose: r,
-  showCloseButton: i = !0,
-  closeOnEscape: c,
-  title: e,
-  children: y,
-  footer: m,
-  styles: s,
+const _ = T(({
+  isOpen: c = !1,
+  isCustomView: p = !1,
+  onClose: t,
+  showCloseButton: n = !0,
+  closeOnClickOutside: o = !0,
+  closeOnEscape: f,
+  title: a,
+  children: m,
+  footer: u,
+  styles: h,
   ...S
-}, k) => {
+}, M) => {
   const {
-    theme: d
-  } = j(), l = D(), b = p(d, "modal.icons", {}), M = e || !!(i && r);
-  u(() => {
-    o && l.debug(`${t}: Open`, {
-      title: e,
-      isCustomView: f,
-      showCloseButton: i,
-      closeOnEscape: c,
-      hasFooter: !!m
-    });
-  }, [o, e, f, i, c, m]);
-  const $ = h(() => {
-    l.debug(`${t}: Close`, {
-      title: e,
-      trigger: "overlay"
-    }), r == null || r();
-  }, [r, e]), v = h(() => {
-    l.debug(`${t}: Close`, {
-      title: e,
+    theme: r
+  } = D(), l = F(), b = s(r, "modal.icons", {}), k = a || !!(n && t), E = g(() => {
+    l.debug(`${e}: Close`, {
+      trigger: "overlay",
+      closeOnClickOutside: o
+    }), o && (t == null || t());
+  }, [t, o]), $ = g(() => {
+    l.debug(`${e}: Close`, {
       trigger: "closeButton"
-    }), r == null || r();
-  }, [r, e]);
-  return u(() => {
-    if (!c) return;
-    const n = (E) => {
-      r && E.key === Y.ESCAPE && (l.debug(`${t}: Close`, {
-        title: e,
+    }), t == null || t();
+  }, [t]);
+  return w(() => {
+    if (!f) return;
+    const i = (v) => {
+      t && v.key === Y.ESCAPE && (l.debug(`${e}: Close`, {
         trigger: "escape"
-      }), r());
+      }), t == null || t());
     };
-    return document.addEventListener("keydown", n), () => document.removeEventListener("keydown", n);
-  }, [o, c, r, e]), o ? /* @__PURE__ */ a(H, { blocksScroll: !0, children: /* @__PURE__ */ a(N, { onClick: $, theme: d, children: /* @__PURE__ */ a(P, { ref: k, onClick: (n) => n.stopPropagation(), "data-testid": t, theme: d, styles: s, ...I(S), children: f ? y : /* @__PURE__ */ g(T, { children: [
-    M && /* @__PURE__ */ g(A, { theme: d, $withTitle: !!e, "data-testid": `${t}-header`, children: [
-      e && /* @__PURE__ */ a(B, { theme: d, "data-testid": `${t}-title`, children: e }),
-      i && r && /* @__PURE__ */ a(F, { onClick: v, "data-testid": "close-button", theme: d, children: /* @__PURE__ */ a(R, { ...p(b, "close", {
+    return document.addEventListener("keydown", i), () => document.removeEventListener("keydown", i);
+  }, [c, f, t]), c ? /* @__PURE__ */ d(H, { blocksScroll: !0, children: /* @__PURE__ */ d(x, { onClick: E, theme: r, children: /* @__PURE__ */ d(N, { ref: M, onClick: (i) => i.stopPropagation(), "data-testid": e, theme: r, styles: h, ...I(S), children: p ? m : /* @__PURE__ */ y(B, { children: [
+    k && /* @__PURE__ */ y(P, { theme: r, $withTitle: !!a, "data-testid": `${e}-header`, children: [
+      a && /* @__PURE__ */ d(A, { theme: r, "data-testid": `${e}-title`, children: a }),
+      n && t && /* @__PURE__ */ d(K, { onClick: $, "data-testid": "close-button", theme: r, children: /* @__PURE__ */ d(R, { ...s(b, "close", {
         name: "cross"
       }) }) })
     ] }),
-    y && /* @__PURE__ */ a(K, { theme: d, "data-testid": `${t}-body`, children: y }),
-    m && /* @__PURE__ */ a(L, { theme: d, "data-testid": `${t}-footer`, children: m })
+    m && /* @__PURE__ */ d(L, { theme: r, "data-testid": `${e}-body`, children: m }),
+    u && /* @__PURE__ */ d(j, { theme: r, "data-testid": `${e}-footer`, children: u })
   ] }) }) }) }) : null;
 });
-_.displayName = t;
+_.displayName = e;
 export {
   _ as Modal
 };

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

@@ -0,0 +1,5 @@
+import { StoryContext } from '@storybook/types';
+export declare const defaultActions: ({ canvasElement, step }: StoryContext) => Promise<void>;
+export declare const noEscapeCloseContentWithScrollActions: ({ canvasElement, step }: StoryContext) => Promise<void>;
+export declare const customViewActions: ({ canvasElement, step }: StoryContext) => Promise<void>;
+export declare const noClickOutsideCloseActions: ({ canvasElement, step }: StoryContext) => Promise<void>;

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

@@ -5,6 +5,7 @@ export interface ModalProps extends Omit<BoxCssComponentProps, 'title'>, PropsWi
     isCustomView?: boolean;
     showCloseButton?: boolean;
     closeOnEscape?: boolean;
+    closeOnClickOutside?: boolean;
     onClose?: () => void;
     title?: ReactNode;
     footer?: ReactNode;

package/components/core/Table/Table.d.ts

@@ -0,0 +1,2 @@
+import { TableProps, TableRef, TableRowData } from './Table.types';
+export declare const Table: import('react').ForwardRefExoticComponent<TableProps<TableRowData<Record<string, unknown>>> & import('react').RefAttributes<TableRef>>;