gd-design-library 0.3.5 → 0.5.0

package/CHANGELOG.md

@@ -2,7 +2,7 @@
 
 # Changelog
 
-## [0.1.0]
+## [0.1.0] - 2025-05-15
 
 ### Features
 
@@ -51,25 +51,127 @@
 
 ---
 
-## Previous Changes
+## [0.2.0] - 2025-06-12
 
-<details>
-<summary>Expand full history</summary>
+### Added
 
-### Older Features
+- New `Stepper` component with horizontal/vertical orientation
+- `Button` now supports `loading` prop
 
-- **Search**: Added search functionality based on select (#102)
-- **Tabs**: Implemented Tabs component (#139)
-- **Stepper**: Added stepper view (#46)
-- **Form**: Added base form concept (#32)
-- **Textarea**: Added core textarea functionality (#26)
-- **Link**: Added Link component (#27)
-- **Input**: Added base input component (#13)
+### Changed
 
-### Infrastructure
+- `Input` now accepts `size="small" | "medium" | "large"`
+- Improved `Modal` focus trap behavior
 
-- **Monorepo**: Integrated Nx monorepo setup
-- **Linting**: Configured ESLint and Prettier (#6)
-- **Testing**: Added Jest and React Testing Library (#11)
+### Fixed
 
-</details>
+- Fixed `Tooltip` not displaying on keyboard focus
+- `Checkbox` label alignment issue in Safari
+
+### Removed
+
+- Deprecated `LegacyBanner` component (removed in v1.2.0)
+
+## [0.3.0] - 2025-07-14
+
+### Features
+
+- Integrated Google Generative AI with markdown support and file uploads in ChatDemo.
+- Added multi-chat session support with search functionality and chat caching.
+- Introduced ChatBubble component with status-based styling (pending, fulfilled, rejected).
+- Implemented AI feedback loop for iterative improvements in chat interactions.
+- Added DragAndDrop widget with file validation and upload progress indicators.
+- New Separator component for visual content division.
+- Enhanced Loader with customizable name prop for targeted styling.
+- Added use client directive for Next.js compatibility.
+- Dynamic theme support in ChatBubble using commonHeader tokens.
+
+### Refactor
+
+- Full migration from styled-components to @emotion/styled across all components.
+- Restructured Storybook stories and updated meta titles for consistency.
+- Replaced static styles with array-based computed styles (e.g., Avatar, Carousel).
+- Standardized prop names (e.g., wrap → isWrap in Row/Column).
+- Library imports are optimized for tree-shaking and performance.
+
+### Fixes
+
+- Fixed OptionPicker accessibility by adding explicit type="radio".
+- Resolved textarea dynamic height reset and added minHeight/maxHeight support.
+- Addressed chat container overflow, snackbar shadow clipping, and file card rendering issues.
+- Patched type errors, linter warnings, and CI/CD pipeline failures.
+- Restored automation step in Jenkins workflow.
+- Fixed ChatDemo image handling and scroll behavior.
+
+### Documentation
+
+- Updated Storybook documentation for all components post-Emotion migration.
+- Revised theming guide to use @emotion/styled and gd-design-library.
+- Added .env.example for ChatDemo API key setup.
+- Enhanced component docs with JSDoc examples and usage guidelines.
+
+### Summary
+
+This release delivers major enhancements to the chat system, full Emotion adoption for styling, critical UX fixes, and
+comprehensive documentation updates. The refactor improves maintainability, while new features like AI integration and
+drag-and-drop elevate component capabilities.
+
+## [0.4.0] - 2025-08-18
+
+### New Features
+
+- Added responsiveness documentation for layout composition techniques
+- Implemented TokenViewer for visual theme token representation in Storybook
+- Added styleVariant prop to Typography for combined styles (bold/italic/underline)
+- Introduced theme export script with downloadable defaultTheme.json in documentation
+
+### Improvements
+
+- Enhanced theme styles, fixed typos, and improved documentation across components
+- Updated mobile responsiveness and documentation for ChatBubble, ChatContainer, and Breadcrumbs
+- Refined Storybook controls and documentation for Button, Modal, and Card
+- Improved Textarea usability (removed deprecated props, added rows, updated docs)
+- Optimized build with tree shaking, dependency updates, and external library dependencies
+
+### Bug Fixes
+
+- Fixed Carousel SSR type errors and Dropdown linting issues
+- Adjusted Snackbar documentation and fixed style inconsistencies
+- Fixed Image styles, Carousel token styles, and RadioGroupItem behavior
+- Resolved avatar and chat page responsiveness issues
+- Eliminated console warnings in app.tsx and removed unused code
+- Fixed hardcoded Google API key by adding environment variable support
+- Patched entry point configuration and Portal import errors
+
+## [0.5.0] - 2025-09-01
+
+### Features
+
+- **Input**: Added wrapperAs prop for custom wrapper elements and improved styling customization
+- **Form**: Introduced core form configuration system with state management and field dependencies
+- **Loader**: Added customizable WrapperView prop and enhanced theme integration
+- **ChatContainer**: New component for chat-based interfaces
+- **Theme**: Added detailed theme previews in Storybook for colors, fonts, and spacing tokens
+- **Snackbar**: Added animated close functionality and improved customization options
+- **Icons**: Introduced standardized size variants (Xs, Sm, Md, Lg, Xl) for consistent scaling
+
+### Improvements
+
+- **Tooltip**: Enhanced type handling, prop interfaces, and theme usage
+- **Counter**: Improved type handling and theme configuration
+- **Stepper**: Refactored layout using FlexContainer for better mobile experience
+- **Tabs**: Enhanced styling with overflow handling and improved documentation
+- **Selector**: Replaced div elements with span for better accessibility
+- **Textarea**: Added dynamic height adjustment based on content
+- **Documentation**: Enhanced Storybook docs with detailed prop descriptions
+- **Theme**: Updated default colors and improved token structure
+- **Carousel**: Refactored styles and improved content navigation flexibility
+
+### Fixes
+
+- **Button**: Fixed border styling issues in disabled state
+- **Textarea**: Fixed dynamic height adjustment behavior
+- **Selector**: Corrected semantic HTML usage and import paths
+- **Build**: Fixed dist output paths and dependency isolation
+- **Types**: Resolved various TypeScript compatibility issues
+- **Storybook**: Corrected TokenViewer import paths and theme consistency

package/assets/styles.css

@@ -1 +1 @@
-@import"https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap";*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;font-family:Fira Sans,sans-serif;line-height:1.6}ol,ul{list-style:none}table{border-collapse:collapse}img{max-width:100%;height:auto;display:block}a{text-decoration:none;color:inherit}
+@import"https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap";*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:Fira Sans,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji"}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}

package/components/core/DropdownItem/DropdownItem.js

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

package/components/core/DropdownItem/DropdownItemStyled.d.ts

@@ -1,2 +1,2 @@
-import { DropdownItemStyledProps } from './DropdownItem.types';
+import { DropdownItemStyledProps } from './';
 export declare const DropdownItemStyled: import('react').ForwardRefExoticComponent<Omit<DropdownItemStyledProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;

package/components/core/Icon/Icon.js

@@ -1,33 +1,40 @@
 "use client";
-import { jsx as d } from "@emotion/react/jsx-runtime";
-import { forwardRef as p } from "react";
-import { IconsList as g, COMPONENT_NAME as l } from "./constants.js";
-import { useTheme as h } from "../../../hooks/useTheme/useTheme.js";
+import { jsx as h } from "@emotion/react/jsx-runtime";
+import { forwardRef as S } from "react";
+import { IconsList as $, COMPONENT_NAME as l } from "./constants.js";
+import { useTheme as L } from "../../../hooks/useTheme/useTheme.js";
 import { get as n } from "../../../utils/helpers.js";
-let r = {};
-const x = (o) => {
-  r = {
-    ...r,
+let i = {};
+const M = (o) => {
+  i = {
+    ...i,
     ...o
   };
-}, $ = p((o, m) => {
+}, N = S((o, m) => {
   const {
     name: t,
     width: f,
     height: u,
     fill: s,
     fillSvg: e,
-    ...I
+    size: I,
+    ...a
   } = o, {
-    theme: a
-  } = h(), i = n(a, "colors", {}), c = {
-    ...g,
-    ...r
+    theme: d
+  } = L(), {
+    icon: p,
+    colors: r
+  } = d || {}, g = n(p, ["size", I], {
+    width: f,
+    height: u
+  }), c = {
+    ...$,
+    ...i
   }[t];
-  return c ? /* @__PURE__ */ d(c, { ref: m, "data-testid": `${l}-${t}`, width: f, height: u, fill: s && n(i, s, s), fillSvg: e && n(i, e, e), ...I }) : (console.warn(`Icon "${String(t)}" not found.`), null);
+  return c ? /* @__PURE__ */ h(c, { ref: m, "data-testid": `${l}-${t}`, fill: s && n(r, s, s), fillSvg: e && n(r, e, e), ...g, ...a }) : (console.warn(`Icon "${String(t)}" not found.`), null);
 });
-$.displayName = l;
+N.displayName = l;
 export {
-  $ as Icon,
-  x as registerCustomIcons
+  N as Icon,
+  M as registerCustomIcons
 };

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

@@ -1,7 +1,9 @@
+import { EnumOrPrimitive, SizeVariant } from '../../../types';
 export interface IconProps {
     name: string;
     width?: number;
     height?: number;
     fill?: string;
     fillSvg?: string;
+    size?: EnumOrPrimitive<SizeVariant>;
 }

package/components/core/Image/Image.js

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

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

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import { CommonCssComponentProps, CommonCssComponentStyledProps } from '../..';
 export interface ImageProps extends CommonCssComponentProps {
     id?: string;
@@ -11,6 +12,7 @@ export interface ImageProps extends CommonCssComponentProps {
     onClick?: () => void;
     onError?: () => void;
     onLoad?: () => void;
+    fallbackComponent?: ReactNode;
     objectFit?: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
 }
 export interface ImageWrapperStyledProps extends Pick<ImageProps, 'width' | 'height' | 'id' | 'className'>, CommonCssComponentStyledProps {

package/components/core/Image/ImageStyled.js

@@ -1,8 +1,8 @@
 "use client";
 import { jsx as r } from "@emotion/react/jsx-runtime";
-import { forwardRef as n } from "react";
+import { forwardRef as a } from "react";
 import { get as c } from "../../../utils/helpers.js";
-const g = (o) => {
+const h = (o) => {
   const {
     width: t,
     height: e,
@@ -15,20 +15,21 @@ const g = (o) => {
     height: `${e ? `${e}px` : "100%"}`
   }];
   return /* @__PURE__ */ r("div", { css: p, ...i });
-}, h = n((o, t) => {
+}, u = a((o, t) => {
   const {
     objectFit: e = "cover",
     $isLoading: s,
     theme: {
       image: i
     } = {},
-    ...p
-  } = o, m = [c(i, "default", {}), {
+    styles: p,
+    ...m
+  } = o, n = [c(i, "default", {}), {
     objectFit: e,
     opacity: `${s ? 0 : 1}`
-  }];
-  return /* @__PURE__ */ r("img", { css: m, ...p, ref: t });
-}), u = (o) => {
+  }, p];
+  return /* @__PURE__ */ r("img", { css: n, ...m, ref: t });
+}), y = (o) => {
   const {
     theme: {
       image: t
@@ -36,7 +37,7 @@ const g = (o) => {
     ...e
   } = o, s = [c(t, "placeholder", {})];
   return /* @__PURE__ */ r("div", { css: s, ...e });
-}, y = (o) => {
+}, f = (o) => {
   const {
     theme: {
       image: t
@@ -46,8 +47,8 @@ const g = (o) => {
   return /* @__PURE__ */ r("figcaption", { css: s, ...e });
 };
 export {
-  y as CaptionStyled,
-  h as ImageStyled,
-  g as ImageWrapperStyled,
-  u as PlaceholderStyled
+  f as CaptionStyled,
+  u as ImageStyled,
+  h as ImageWrapperStyled,
+  y as PlaceholderStyled
 };

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

@@ -1,2 +1,2 @@
 import { InputFieldProps } from './Input.types';
-export declare const Input: import('react').ForwardRefExoticComponent<InputFieldProps & import('react').RefAttributes<HTMLInputElement>>;
+export declare const Input: import('react').ForwardRefExoticComponent<(InputFieldProps & Partial<Omit<HTMLInputElement, "color" | "prefix" | "disabled" | "tabIndex" | "type" | "hidden" | "children" | "className" | "role" | "width" | "content" | "translate" | "name" | "label" | "styles" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "id" | "lang" | "nonce" | "slot" | "spellCheck" | "style" | "title" | "radioGroup" | "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>>;

package/components/core/Input/Input.js

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

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

@@ -8,8 +8,8 @@ export interface BaseInputFieldProps extends CommonCssComponentProps<HTMLInputEl
     variant?: EnumOrPrimitive<InputVariantType>;
     color?: EnumOrPrimitive<InputColorVariant>;
     label?: string;
+    value?: string;
     placeholder?: string;
-    value?: string | number;
     defaultValue?: string | number;
     onClick?: (event: MouseEvent<HTMLInputElement>) => void;
     onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
@@ -25,11 +25,11 @@ export interface BaseInputFieldProps extends CommonCssComponentProps<HTMLInputEl
     tabIndex?: number;
     debounceCallbackTime?: number;
 }
+export type InputFieldRestHtmlProps = Partial<Omit<HTMLInputElement, keyof InputFieldProps | 'type'>>;
 export interface RadioButtonProps extends Omit<BaseInputFieldProps, 'type'> {
     type: InputVariantType.Radio;
     checked?: boolean;
     defaultChecked?: boolean;
-    value: string | number;
 }
 export interface CheckboxFieldProps extends Omit<BaseInputFieldProps, 'type' | 'value'> {
     type: InputVariantType;
@@ -37,6 +37,7 @@ export interface CheckboxFieldProps extends Omit<BaseInputFieldProps, 'type' | '
     defaultChecked?: boolean;
 }
 export type InputFieldProps = (BaseInputFieldProps | RadioButtonProps | CheckboxFieldProps) & {
+    wrapperAs?: keyof HTMLElementTagNameMap | ElementType;
     width?: string;
     label?: ReactNode;
     helperText?: ReactNode;

package/components/core/Input/InputAdornment/InputAdornmentStyled.js

@@ -6,9 +6,9 @@ const c = (t) => {
     theme: {
       input: e
     } = {},
-    ...o
-  } = t, n = [s(e, "adornment.default", {})];
-  return /* @__PURE__ */ r("div", { css: n, ...o });
+    ...n
+  } = t, o = [s(e, "adornment.default", {})];
+  return /* @__PURE__ */ r("span", { css: o, ...n });
 };
 export {
   c as InputAdornmentStyled