gd-design-library 1.4.0 → 1.5.0

package/ai/README.md

@@ -85,7 +85,7 @@ Component catalog
   - Forms: Form, Input, Select, Search, Label, Textarea, Switch, Toggle, RadioGroup, Slider, InputFile, DragAndDropFiles
   - Feedback & overlays: InlineNotification, Loader, Skeleton, Snackbar, SnackbarManager, Tooltip, Modal, Portal
   - Navigation & structure: Breadcrumbs, Tabs, Stepper, List, Accordion (with subcomponents: AccordionItem, AccordionHeader, AccordionContent), Link
-  - Display & content: Typography, Button, Icon, Image, Card, Avatar, Carousel, ContentCarousel, Counter, Price, ProgressBar, Rating, ChatContainer, ChatBubble
+  - Display & content: Typography, Button, Icon, Image, Card, Avatar, Carousel, ContentCarousel (with visibleItems, scrollStep, scrollAlignment props), Counter, Price, ProgressBar, Rating, ChatContainer, ChatBubble
 - Not part of gd-design-library (do not request/use): Grid, Stack, Alert, Toast, Table, Badge, ButtonGroup, Dropdown, Drawer, Popover, Pagination, Heading, Spinner.
 
 Important component structures:

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

@@ -0,0 +1,57 @@
+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;
+            default: string;
+            enum: string[];
+            required?: undefined;
+        } | {
+            name: string;
+            type: string;
+            description: string;
+            default: string;
+            enum?: undefined;
+            required?: undefined;
+        } | {
+            name: string;
+            type: string;
+            description: string;
+            default?: undefined;
+            enum?: undefined;
+            required?: undefined;
+        } | {
+            name: string;
+            type: string;
+            description: string;
+            required: boolean;
+            default?: undefined;
+            enum?: undefined;
+        } | {
+            name: string;
+            type: string;
+            description: string;
+            default: {};
+            enum?: undefined;
+            required?: undefined;
+        })[];
+        examples: string[];
+    };
+    compositionTips: string[];
+};
+export default _default;

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

@@ -50,6 +50,24 @@ declare const _default: {
             required?: undefined;
             examples?: undefined;
             recommended?: undefined;
+        } | {
+            name: string;
+            type: string;
+            description: string;
+            default: string;
+            examples: number[];
+            recommended: string;
+            required?: undefined;
+            accessibility?: undefined;
+        } | {
+            name: string;
+            type: string;
+            description: string;
+            default: string;
+            examples: string[];
+            recommended: string;
+            required?: undefined;
+            accessibility?: undefined;
         } | {
             name: string;
             type: string;
@@ -72,8 +90,9 @@ declare const _default: {
         quickStart: {
             basic: string;
             withNavigation: string;
-            itemByItem: string;
-            accessible: string;
+            multipleVisible: string;
+            centered: string;
+            customScrollStep: string;
         };
         commonPatterns: {
             'Product Gallery': {

package/components/core/Badge/Badge.d.ts

@@ -0,0 +1,2 @@
+import { BadgeProps } from './';
+export declare const Badge: import('react').ForwardRefExoticComponent<BadgeProps & import('react').RefAttributes<HTMLSpanElement>>;

package/components/core/Badge/Badge.js

@@ -0,0 +1,30 @@
+"use client";
+import { jsxs as p, jsx as d } from "@emotion/react/jsx-runtime";
+import { forwardRef as f } from "react";
+import { convertToInlineBoxStyles as u } from "../../../tokens/utils.js";
+import { COMPONENT_NAME as e } from "./constants.js";
+import { BadgeStyled as y, BadgeStartIconStyled as $, BadgeContentStyled as B, BadgeEndIconStyled as g } from "./BadgeStyled.js";
+import { useTheme as h } from "../../../hooks/useTheme/useTheme.js";
+const S = f(({
+  variant: n = "primary",
+  appearance: o = "filled",
+  size: l = "md",
+  children: i,
+  disabled: m,
+  iconStart: r = null,
+  iconEnd: a = null,
+  ...s
+}, c) => {
+  const {
+    theme: t
+  } = h();
+  return /* @__PURE__ */ p(y, { ref: c, $variant: n, $appearance: o, $size: l, theme: t, $disabled: m, "data-testid": e, ...u(s), children: [
+    r ? /* @__PURE__ */ d($, { theme: t, "data-testid": `${e}-icon-start`, children: r }) : null,
+    /* @__PURE__ */ d(B, { theme: t, "data-testid": `${e}-content`, children: i }),
+    a ? /* @__PURE__ */ d(g, { theme: t, "data-testid": `${e}-icon-end`, children: a }) : null
+  ] });
+});
+S.displayName = e;
+export {
+  S as Badge
+};

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

@@ -0,0 +1,20 @@
+import { PropsWithChildren, ReactNode } from 'react';
+import { EnumOrPrimitive } from '../../../types';
+import { BoxCssComponentProps, BoxCssComponentStyledProps } from '../..';
+export type BadgeVariant = 'primary' | 'secondary' | 'tertiary' | 'quaternary' | 'quinary';
+export type BadgeAppearance = 'outline' | 'outlineFilledLight' | 'filled' | 'filledLight';
+export type BadgeSize = 'sm' | 'md';
+export interface BadgeProps extends BoxCssComponentProps<HTMLSpanElement>, PropsWithChildren {
+    variant?: EnumOrPrimitive<BadgeVariant>;
+    disabled?: boolean;
+    appearance?: EnumOrPrimitive<BadgeAppearance>;
+    size?: EnumOrPrimitive<BadgeSize>;
+    iconStart?: ReactNode;
+    iconEnd?: ReactNode;
+}
+export interface BadgeStyledProps extends BoxCssComponentStyledProps<HTMLSpanElement>, PropsWithChildren {
+    $variant?: EnumOrPrimitive<BadgeVariant>;
+    $appearance?: EnumOrPrimitive<BadgeAppearance>;
+    $size?: EnumOrPrimitive<BadgeSize>;
+    $disabled?: boolean;
+}

package/components/core/Badge/BadgeStyled.d.ts

@@ -0,0 +1,5 @@
+import { BadgeStyledProps } from './';
+export declare const BadgeStyled: import('react').ForwardRefExoticComponent<Omit<BadgeStyledProps, "ref"> & import('react').RefAttributes<HTMLSpanElement>>;
+export declare const BadgeContentStyled: import('react').ForwardRefExoticComponent<Omit<BadgeStyledProps, "ref"> & import('react').RefAttributes<HTMLSpanElement>>;
+export declare const BadgeStartIconStyled: import('react').ForwardRefExoticComponent<Omit<BadgeStyledProps, "ref"> & import('react').RefAttributes<HTMLSpanElement>>;
+export declare const BadgeEndIconStyled: import('react').ForwardRefExoticComponent<Omit<BadgeStyledProps, "ref"> & import('react').RefAttributes<HTMLSpanElement>>;

package/components/core/Badge/BadgeStyled.js

@@ -0,0 +1,54 @@
+import { jsx as d } from "@emotion/react/jsx-runtime";
+import { forwardRef as a } from "react";
+import { getBoxStyles as i, tokensHandler as B } from "../../../tokens/utils.js";
+import { get as e } from "../../../utils/helpers.js";
+const I = a(({
+  theme: {
+    badge: s,
+    ...n
+  } = {},
+  $variant: t,
+  $appearance: o,
+  $size: r,
+  $disabled: l,
+  className: m,
+  styles: f = {},
+  ...g
+}, p) => {
+  const {
+    boxStyles: y,
+    restProps: S
+  } = i(g), c = new Proxy(s || {}, B(n)), u = [e(c, "default", {}), e(c, [t, o, "default"], {}), l ? e(c, [t, o, "disabled"], {}) : {}, r ? e(c, ["size", r], {}) : {}, y, f];
+  return /* @__PURE__ */ d("span", { css: u, className: m, ...S, ref: p });
+}), N = a(({
+  theme: {
+    badge: s
+  } = {},
+  styles: n,
+  ...t
+}, o) => {
+  const r = e(s, "content", {});
+  return /* @__PURE__ */ d("span", { css: [e(r, "default", {}), n], className: "gd-badge__content", ...t, ref: o });
+}), P = a(({
+  theme: {
+    badge: s
+  } = {},
+  ...n
+}, t) => {
+  const o = e(s, "startIcon", {});
+  return /* @__PURE__ */ d("span", { css: e(o, "default", {}), className: "gd-badge__icon-start", ...n, ref: t });
+}), w = a(({
+  theme: {
+    badge: s
+  } = {},
+  ...n
+}, t) => {
+  const o = e(s, "endIcon", {});
+  return /* @__PURE__ */ d("span", { css: e(o, "default", {}), className: "gd-badge__icon-end", ...n, ref: t });
+});
+export {
+  N as BadgeContentStyled,
+  w as BadgeEndIconStyled,
+  P as BadgeStartIconStyled,
+  I as BadgeStyled
+};

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

@@ -0,0 +1 @@
+export declare const COMPONENT_NAME = "Badge";

package/components/core/Badge/constants.js

@@ -0,0 +1,4 @@
+const N = "Badge";
+export {
+  N as COMPONENT_NAME
+};

package/components/core/Badge/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Badge';
+export * from './Badge.types';

package/components/core/Box/index.d.ts

@@ -1,3 +1,2 @@
 export * from './Box';
 export * from './Box.types';
-export * from './constants';

package/components/core/DropdownItem/DropdownItem.js

@@ -1,45 +1,46 @@
 "use client";
 import { jsx as E } from "@emotion/react/jsx-runtime";
-import { forwardRef as x, useMemo as I, useCallback as u } from "react";
-import { KEYBOARD_KEYS as O } from "../../../constants/keyboard.js";
+import { forwardRef as x, useMemo as O, useCallback as p } from "react";
+import { KEYBOARD_KEYS as K } from "../../../constants/keyboard.js";
 import { COMPONENT_NAME as D } from "./constants.js";
-import { DropdownItemStyled as v } from "./DropdownItemStyled.js";
-import { useSelectContext as K } from "../Select/hooks/useSelectContext.js";
-import { useTheme as T } from "../../../hooks/useTheme/useTheme.js";
-import { TabIndex as p } from "../../../types/accesability.js";
-const k = x((S, N) => {
+import { DropdownItemStyled as N } from "./DropdownItemStyled.js";
+import { useSelectContext as T } from "../Select/hooks/useSelectContext.js";
+import { useTheme as k } from "../../../hooks/useTheme/useTheme.js";
+import { TabIndex as y } from "../../../types/accesability.js";
+const I = x((S, v) => {
   const {
-    children: y,
-    value: n,
-    onSelect: i,
-    className: o,
-    disabled: e,
-    name: d,
+    children: A,
+    value: a,
+    onSelect: l,
+    className: e,
+    disabled: t,
+    name: c,
     ...b
   } = S, {
     theme: h
-  } = T(), {
+  } = k(), {
     onSelect: s,
-    value: l,
-    itemIdentifier: m
-  } = K(), r = {
-    name: d,
-    value: n
-  }, c = JSON.stringify(r), f = l !== void 0 && m ? m(l, r) : o == null ? void 0 : o.includes("active"), w = I(() => `${o || ""} ${f ? "active" : ""}`, [o, f]), a = u((t) => {
-    if (!e)
-      return i ? i({
-        event: t,
-        data: r
+    value: n,
+    itemIdentifier: i,
+    multiple: u
+  } = T(), o = {
+    name: c,
+    value: a
+  }, f = JSON.stringify(o), m = n === void 0 ? e == null ? void 0 : e.includes("active") : u && Array.isArray(n) ? n.some((r) => (i == null ? void 0 : i(r, o)) ?? r.value === o.value) : !u && !Array.isArray(n) && i ? i(n, o) : e == null ? void 0 : e.includes("active"), w = O(() => `${e || ""} ${m ? "active" : ""}`, [e, m]), d = p((r) => {
+    if (!t)
+      return l ? l({
+        event: r,
+        data: o
       }) : s && s({
-        event: t,
-        data: r
-      }), n;
-  }, [i, s, c, JSON.stringify(n), e]), C = u((t) => {
-    e || t.key === O.ENTER && (t.preventDefault(), a(t));
-  }, [a, e, c]);
-  return /* @__PURE__ */ E(v, { ref: N, theme: h, $disabled: e, tabIndex: e ? p.Disabled : p.Default, "data-testid": D, className: w, onClick: a, onKeyDown: C, ...b, children: y || d });
+        event: r,
+        data: o
+      }), a;
+  }, [l, s, f, JSON.stringify(a), t]), C = p((r) => {
+    t || r.key === K.ENTER && (r.preventDefault(), d(r));
+  }, [d, t, f]);
+  return /* @__PURE__ */ E(N, { ref: v, theme: h, $disabled: t, tabIndex: t ? y.Disabled : y.Default, "data-testid": D, className: w, onClick: d, onKeyDown: C, ...b, children: A || c });
 });
-k.displayName = D;
+I.displayName = D;
 export {
-  k as DropdownItem
+  I as DropdownItem
 };

package/components/core/Modal/Modal.js

@@ -1,11 +1,11 @@
 "use client";
 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 { forwardRef as T, useCallback as s, 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 { get as g } 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";
@@ -18,39 +18,39 @@ const _ = T(({
   closeOnClickOutside: o = !0,
   closeOnEscape: f,
   title: a,
-  children: m,
+  children: l,
   footer: u,
   styles: h,
   ...S
-}, M) => {
+}, b) => {
   const {
     theme: r
-  } = D(), l = F(), b = s(r, "modal.icons", {}), k = a || !!(n && t), E = g(() => {
-    l.debug(`${e}: Close`, {
+  } = D(), m = F(), M = g(r, "modal.icons", {}), k = a || !!(n && t), E = s(() => {
+    m.debug(`${e}: Close`, {
       trigger: "overlay",
       closeOnClickOutside: o
     }), o && (t == null || t());
-  }, [t, o]), $ = g(() => {
-    l.debug(`${e}: Close`, {
+  }, [t, o]), $ = s(() => {
+    m.debug(`${e}: Close`, {
       trigger: "closeButton"
     }), t == null || t();
   }, [t]);
   return w(() => {
     if (!f) return;
     const i = (v) => {
-      t && v.key === Y.ESCAPE && (l.debug(`${e}: Close`, {
+      t && v.key === Y.ESCAPE && (m.debug(`${e}: Close`, {
         trigger: "escape"
       }), t == null || t());
     };
     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: [
+  }, [c, f, t]), c ? /* @__PURE__ */ d(H, { blocksScroll: !0, children: /* @__PURE__ */ d(x, { onClick: E, theme: r, children: /* @__PURE__ */ d(N, { ref: b, onClick: (i) => i.stopPropagation(), "data-testid": e, theme: r, styles: h, ...I(S), children: p ? l : /* @__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", {
+      n && t && /* @__PURE__ */ d(K, { onClick: $, "data-testid": "close-button", theme: r, "aria-label": "Close modal", children: /* @__PURE__ */ d(R, { ...g(M, "close", {
         name: "cross"
       }) }) })
     ] }),
-    m && /* @__PURE__ */ d(L, { theme: r, "data-testid": `${e}-body`, children: m }),
+    l && /* @__PURE__ */ d(L, { theme: r, "data-testid": `${e}-body`, children: l }),
     u && /* @__PURE__ */ d(j, { theme: r, "data-testid": `${e}-footer`, children: u })
   ] }) }) }) }) : null;
 });