gd-design-library 1.4.0 → 1.6.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:
@@ -266,7 +266,7 @@ export function FAQSection() {
           <Typography as="h3" variant="h5">How do I get started?</Typography>
         </AccordionHeader>
         <AccordionContent>
-          <Typography variant="body">
+          <Typography variant="p">
             Follow these steps to begin using the design system in your project.
           </Typography>
         </AccordionContent>
@@ -276,7 +276,7 @@ export function FAQSection() {
           <Typography as="h3" variant="h5">What are the pricing options?</Typography>
         </AccordionHeader>
         <AccordionContent>
-          <Typography variant="body">
+          <Typography variant="p">
             We offer three flexible pricing plans to meet your needs.
           </Typography>
         </AccordionContent>
@@ -310,7 +310,7 @@ export function StyledAccordionSection() {
           <Typography as="h3" variant="h5">Item with Box Props</Typography>
         </AccordionHeader>
         <AccordionContent>
-          <Typography variant="body">
+          <Typography variant="p">
             This AccordionItem uses Box layout props like margin, padding, width, and maxWidth for flexible layout control.
           </Typography>
         </AccordionContent>
@@ -325,7 +325,7 @@ export function StyledAccordionSection() {
           <Typography as="h3" variant="h5">Flex Item</Typography>
         </AccordionHeader>
         <AccordionContent>
-          <Typography variant="body">
+          <Typography variant="p">
             Using flex="1" for flexible width distribution in a flex container.
           </Typography>
         </AccordionContent>

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/ai/schemas/components/Counter.d.ts

@@ -19,6 +19,11 @@ declare const _default: {
             type: string;
             description: string;
             default: number;
+        } | {
+            name: string;
+            type: string;
+            description: string;
+            default: boolean;
         } | {
             name: string;
             type: string;

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/Image/Image.d.ts

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

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

@@ -1,2 +1,2 @@
 import { InputFieldProps } from './Input.types';
-export declare const Input: import('react').ForwardRefExoticComponent<(InputFieldProps & Partial<Omit<HTMLInputElement, "color" | "prefix" | "disabled" | "tabIndex" | "type" | "hidden" | "width" | "content" | "translate" | "name" | "label" | "children" | "className" | "styles" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "id" | "lang" | "nonce" | "slot" | "spellCheck" | "style" | "title" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "variant" | "placeholder" | "adornmentStart" | "adornmentEnd" | "debounceCallbackTime" | "readOnly" | "required" | "ariaRequired" | "ariaDescribedBy" | "wrapperAs" | "helperText">>) & import('react').RefAttributes<HTMLInputElement>>;
+export declare const Input: import('react').ForwardRefExoticComponent<(InputFieldProps & Partial<Omit<HTMLInputElement, "color" | "prefix" | "disabled" | "tabIndex" | "type" | "hidden" | "width" | "content" | "translate" | "name" | "label" | "children" | "className" | "styles" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "id" | "lang" | "nonce" | "slot" | "spellCheck" | "style" | "title" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "variant" | "placeholder" | "adornmentStart" | "adornmentEnd" | "debounceCallbackTime" | "readOnly" | "required" | "ariaRequired" | "ariaDescribedBy" | "inputmode" | "wrapperAs" | "helperText">>) & import('react').RefAttributes<HTMLInputElement>>;

package/components/core/Input/Input.js

@@ -4,8 +4,8 @@ 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 { InputWrapper as u } from "./InputWrapper/InputWrapper.js";
+import { InputHelper as l } from "./InputHelper/InputHelper.js";
 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";
@@ -22,7 +22,7 @@ const G = q(({
   readOnly: O = e.readOnly,
   // Accessibility props
   ariaRequired: w = e.ariaRequired,
-  role: y = e.role,
+  role: y,
   tabIndex: E = e.tabIndex,
   ariaDescribedBy: a,
   // Event handling props
@@ -51,9 +51,9 @@ const G = q(({
     onChange: M,
     debounceCallbackTime: F
   });
-  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: [
+  return /* @__PURE__ */ s(u, { as: h, withGap: P, className: _, width: N, styles: I, children: [
+    i && /* @__PURE__ */ r(l, { children: i }),
+    /* @__PURE__ */ s(u, { 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
@@ -64,7 +64,7 @@ const G = q(({
       ] }),
       d && /* @__PURE__ */ r(f, { children: d })
     ] }),
-    t && /* @__PURE__ */ r(u, { color: m, size: g.Sm, children: t })
+    t && /* @__PURE__ */ r(l, { color: m, size: g.Sm, children: t })
   ] });
 });
 G.displayName = o;

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

@@ -1,5 +1,5 @@
 import { ChangeEvent, FocusEvent, MouseEvent, KeyboardEvent, ReactNode, ElementType, PropsWithChildren } from 'react';
-import { EnumOrPrimitive, InputColorVariant, InputRole, InputVariantType, SizeVariant } from '../../../types';
+import { EnumOrPrimitive, InputColorVariant, InputVariantType, SizeVariant } from '../../../types';
 import { CommonCssComponentProps, CommonCssComponentStyledProps } from '../..';
 export interface BaseInputFieldProps extends CommonCssComponentProps<HTMLInputElement> {
     readOnly?: boolean;
@@ -21,7 +21,8 @@ export interface BaseInputFieldProps extends CommonCssComponentProps<HTMLInputEl
     required?: boolean;
     ariaRequired?: boolean;
     ariaDescribedBy?: string;
-    role?: EnumOrPrimitive<InputRole>;
+    role?: string;
+    inputmode?: string;
     tabIndex?: number;
     debounceCallbackTime?: number;
 }

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

@@ -1,4 +1,4 @@
-import { TabIndex, InputColorVariant, InputRole, InputVariantType } from '../../../types';
+import { TabIndex, InputColorVariant, InputVariantType } from '../../../types';
 export declare const COMPONENT_NAME = "Input";
 export declare const DEFAULT_PROPS: {
     variant: InputVariantType;
@@ -6,8 +6,6 @@ export declare const DEFAULT_PROPS: {
     disabled: boolean;
     readOnly: boolean;
     ariaRequired: boolean;
-    role: InputRole;
     tabIndex: TabIndex;
-    styles: {};
 };
 export declare const FOCUS_EXCLUDED_LIST: InputVariantType[];

package/components/core/Input/constants.js

@@ -1,16 +1,15 @@
-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 = {
+import { InputVariantType as a, InputColorVariant as e } from "../../../types/input.js";
+import { TabIndex as r } from "../../../types/accesability.js";
+const n = "Input", i = {
   variant: a.Text,
-  color: o.Primary,
+  color: e.Primary,
   disabled: !1,
   readOnly: !1,
   ariaRequired: !1,
-  role: e.Textbox,
-  tabIndex: t.Default
-}, p = [a.Checkbox, a.Radio, a.Range];
+  tabIndex: r.Default
+}, l = [a.Checkbox, a.Radio, a.Range];
 export {
-  i as COMPONENT_NAME,
-  l as DEFAULT_PROPS,
-  p as FOCUS_EXCLUDED_LIST
+  n as COMPONENT_NAME,
+  i as DEFAULT_PROPS,
+  l as FOCUS_EXCLUDED_LIST
 };

package/components/core/Loader/Loader.js

@@ -13,16 +13,16 @@ const g = N((d, s) => {
   const {
     theme: t
   } = M(), {
-    name: f,
+    name: f = "circle",
     variant: r = m.Inline,
     rounded: l = V(t, "loader.attrs.rounded", "none"),
     children: a,
-    size: u = W.Md,
-    animationProps: c = P,
+    size: c = W.Md,
+    animationProps: u = P,
     withWrapper: i = !0,
     WrapperView: n = "span",
     ...h
-  } = d, e = () => a || /* @__PURE__ */ o($, { ref: s, theme: t, $name: f, $variant: r, $size: u, $animationProps: c, $rounded: l, "data-testid": p, ...h });
+  } = d, e = () => a || /* @__PURE__ */ o($, { ref: s, theme: t, $name: f, $variant: r, $size: c, $animationProps: u, $rounded: l, "data-testid": p, ...h });
   return r === m.FullPage ? /* @__PURE__ */ o(w, { wrapperVariant: r, withWrapper: i, WrapperView: n, children: e() }) : i ? /* @__PURE__ */ o(A, { variant: r, as: n, children: e() }) : e();
 });
 g.displayName = p;

package/components/core/Modal/Modal.js

@@ -11,46 +11,48 @@ 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 _ = T(({
-  isOpen: c = !1,
+  isOpen: l = !1,
   isCustomView: p = !1,
   onClose: t,
   showCloseButton: n = !0,
-  closeOnClickOutside: o = !0,
+  closeOnClickOutside: m = !0,
   closeOnEscape: f,
-  title: a,
-  children: m,
+  title: i,
+  children: c,
   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(), a = F(), M = s(r, "modal.icons", {}), k = i || !!(n && t), E = g(() => {
+    a.debug(`${e}: Close`, {
       trigger: "overlay",
-      closeOnClickOutside: o
-    }), o && (t == null || t());
-  }, [t, o]), $ = g(() => {
-    l.debug(`${e}: Close`, {
+      closeOnClickOutside: m
+    }), m && (t == null || t());
+  }, [t, m, a]), $ = g(() => {
+    a.debug(`${e}: Close`, {
       trigger: "closeButton"
     }), t == null || t();
-  }, [t]);
+  }, [t, a]);
   return w(() => {
     if (!f) return;
-    const i = (v) => {
-      t && v.key === Y.ESCAPE && (l.debug(`${e}: Close`, {
+    const o = (v) => {
+      t && v.key === Y.ESCAPE && (a.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: [
-    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", {
+    return l && document.addEventListener("keydown", o), () => {
+      document.removeEventListener("keydown", o);
+    };
+  }, [l, f, t, a]), l ? /* @__PURE__ */ d(H, { blocksScroll: !0, children: /* @__PURE__ */ d(x, { onClick: E, theme: r, children: /* @__PURE__ */ d(N, { ref: b, onClick: (o) => o.stopPropagation(), "data-testid": e, theme: r, styles: h, ...I(S), children: p ? c : /* @__PURE__ */ y(B, { children: [
+    k && /* @__PURE__ */ y(P, { theme: r, $withTitle: !!i, "data-testid": `${e}-header`, children: [
+      i && /* @__PURE__ */ d(A, { theme: r, "data-testid": `${e}-title`, children: i }),
+      n && t && /* @__PURE__ */ d(K, { onClick: $, "data-testid": "close-button", theme: r, "aria-label": "Close modal", children: /* @__PURE__ */ d(R, { ...s(M, "close", {
         name: "cross"
       }) }) })
     ] }),
-    m && /* @__PURE__ */ d(L, { theme: r, "data-testid": `${e}-body`, children: m }),
+    c && /* @__PURE__ */ d(L, { theme: r, "data-testid": `${e}-body`, children: c }),
     u && /* @__PURE__ */ d(j, { theme: r, "data-testid": `${e}-footer`, children: u })
   ] }) }) }) }) : null;
 });