gd-design-library 0.7.4 → 0.7.6

package/CHANGELOG.md

@@ -0,0 +1,177 @@
+# [Versions](https://www.npmjs.com/package/gd-design-library?activeTab=versions)
+
+# Changelog
+
+## [0.1.0] - 2025-05-15
+
+### Features
+
+- **Icon Stories**: Enhanced Icon stories with custom icons registration (#138)
+- **Custom Icons**: Added support for custom icons (#137)
+- **Header**: Simplified Header component and registered custom icons (#110)
+- **Card Components**: Refactored Card components and improved styles (#135)
+- **Progress Bar**: Added base functionality for progress bar (#199)
+- **Accordion**: Implemented accordion base functionality (#185)
+- **Typography**: Improved Typography component formatting and added "Small" style (#195)
+- **Select**: Added keyboard events and improved select state handling (#113)
+- **Rating**: Added rating view and component (#50)
+- **Theme**: Improved theme switching and custom theme support (#71)
+- **Loader**: Added base Loader component with multiple sizes (#42)
+- **Modal**: Added base modal window functionality (#39)
+- **Tooltip**: Added tooltip component (#35)
+- **Layout**: Created layout container components (Row/Column) (#20)
+
+### Refactor
+
+- **Theme Handling**: Updated typing for theme change handler
+- **Imports**: Removed unused imports from Header component (multiple commits)
+- **Typography**: Refactored typography style handling (#156)
+- **Button**: Enhanced Button component with improved styling support
+- **Components**: Simplified components and aligned imports (#124)
+- **Tokens**: Updated color, radius, and spacing tokens (#65)
+
+### Fixes
+
+- **Console Warnings**: Fixed console warnings in App.tsx (#194)
+- **Snapshot Tests**: Updated snapshots across multiple components
+- **Focus Styles**: Implemented focus styles for checkbox and radio inputs (#186)
+- **Select**: Fixed styles and theme integration (#188)
+- **Textarea**: Skipped snapshot test in textarea (#82)
+
+### CI/CD
+
+- **NPM Publishing**: Added release pipeline for publishing to NPM (#111)
+- **Slack Notifications**: Added Slack notifications to CI (#75)
+- **Playwright**: Added initial Playwright test setup (#69)
+
+### Documentation
+
+- **README**: Updated README with component creation script (#99)
+- **Storybook**: Enhanced Storybook docs for multiple components
+
+---
+
+## [0.2.0] - 2025-06-12
+
+### Added
+
+- New `Stepper` component with horizontal/vertical orientation
+- `Button` now supports `loading` prop
+
+### Changed
+
+- `Input` now accepts `size="small" | "medium" | "large"`
+- Improved `Modal` focus trap behavior
+
+### Fixed
+
+- 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/components/core/Breadcrumbs/Breadcrumbs.d.ts

@@ -0,0 +1,2 @@
+import { BreadcrumbsProps } from './Breadcrumbs.types';
+export declare const Breadcrumbs: import('react').ForwardRefExoticComponent<BreadcrumbsProps & import('react').RefAttributes<HTMLDivElement>>;

package/components/core/Breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,34 @@
+"use client";
+import { jsxs as o, jsx as r } from "@emotion/react/jsx-runtime";
+import { forwardRef as h, Fragment as S } from "react";
+import { COMPONENT_NAME as e } from "./constants.js";
+import { BreadcrumbsStyled as $, ItemStartStyled as y, BreadcrumbItemStyled as E, SeparatorStyled as I, ItemEndStyled as N } from "./BreadcrumbsStyled.js";
+import { useTheme as B } from "../../../hooks/useTheme/useTheme.js";
+const g = h((n, c) => {
+  const {
+    separator: a,
+    itemStart: d,
+    itemEnd: m,
+    separatorAfterLastItem: p = !1,
+    items: i = [],
+    bordered: f,
+    ariaLabel: l = "breadcrumb",
+    ...u
+  } = n, {
+    theme: t
+  } = B();
+  return /* @__PURE__ */ o($, { ref: c, $bordered: f, theme: t, "data-testid": e, ...l ? {
+    "aria-label": l
+  } : {}, ...u, children: [
+    d ? /* @__PURE__ */ r(y, { theme: t, "data-testid": `${e}-item-start`, children: d }) : null,
+    i.map((b, s) => /* @__PURE__ */ o(S, { children: [
+      /* @__PURE__ */ r(E, { theme: t, "data-testid": `${e}-item`, children: b }),
+      a && (p || s < i.length - 1) ? /* @__PURE__ */ r(I, { theme: t, "data-testid": `${e}-separator`, children: a }) : null
+    ] }, `${e}-${s}`)),
+    m ? /* @__PURE__ */ r(N, { theme: t, "data-testid": `${e}-item-end`, children: m }) : null
+  ] });
+});
+g.displayName = e;
+export {
+  g as Breadcrumbs
+};

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

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+import { CommonCssComponentProps, CommonCssComponentStyledProps } from '../..';
+export interface BreadcrumbsProps extends CommonCssComponentProps {
+    separator?: ReactNode;
+    itemStart?: ReactNode;
+    itemEnd?: ReactNode;
+    separatorAfterLastItem?: boolean;
+    bordered?: boolean;
+    items?: (never | ReactNode)[];
+    ariaLabel?: string;
+}
+export interface BreadcrumbsStyledProps extends CommonCssComponentStyledProps {
+    $bordered?: boolean;
+}

package/components/core/Breadcrumbs/BreadcrumbsStyled.d.ts

@@ -0,0 +1,6 @@
+import { BreadcrumbsStyledProps } from './Breadcrumbs.types';
+export declare const BreadcrumbsStyled: import('react').ForwardRefExoticComponent<Omit<BreadcrumbsStyledProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export declare const BreadcrumbItemStyled: (props: BreadcrumbsStyledProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const SeparatorStyled: (props: BreadcrumbsStyledProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ItemStartStyled: (props: BreadcrumbsStyledProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ItemEndStyled: (props: BreadcrumbsStyledProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/components/core/Breadcrumbs/BreadcrumbsStyled.js

@@ -0,0 +1,58 @@
+"use client";
+import { jsx as n } from "@emotion/react/jsx-runtime";
+import { forwardRef as l } from "react";
+import { get as c } from "../../../utils/helpers.js";
+const b = l((e, s) => {
+  const {
+    theme: {
+      breadcrumbs: t
+    } = {},
+    $bordered: r = !1,
+    styles: o = {},
+    ...m
+  } = e, d = [c(t, "default", {}), r ? c(t, "bordered", {}) : {}, o];
+  return /* @__PURE__ */ n("div", { css: d, ...m, ref: s });
+}), i = (e) => {
+  const {
+    theme: {
+      breadcrumbs: s
+    } = {},
+    styles: t = {},
+    ...r
+  } = e, o = [c(s, "item", {}), t];
+  return /* @__PURE__ */ n("div", { css: o, ...r });
+}, u = (e) => {
+  const {
+    theme: {
+      breadcrumbs: s
+    } = {},
+    styles: t = {},
+    ...r
+  } = e, o = [c(s, "separator", {}), t];
+  return /* @__PURE__ */ n("div", { css: o, ...r });
+}, S = (e) => {
+  const {
+    theme: {
+      breadcrumbs: s
+    } = {},
+    styles: t = {},
+    ...r
+  } = e, o = [c(s, "item.itemStart", {}), t];
+  return /* @__PURE__ */ n("div", { css: o, ...r });
+}, f = (e) => {
+  const {
+    theme: {
+      breadcrumbs: s
+    } = {},
+    styles: t = {},
+    ...r
+  } = e, o = [c(s, "item.itemEnd", {}), t];
+  return /* @__PURE__ */ n("div", { css: o, ...r });
+};
+export {
+  i as BreadcrumbItemStyled,
+  b as BreadcrumbsStyled,
+  f as ItemEndStyled,
+  S as ItemStartStyled,
+  u as SeparatorStyled
+};

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

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

package/components/core/Breadcrumbs/constants.js

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

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

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

package/components/core/Button/Button.d.ts

@@ -0,0 +1,2 @@
+import { ButtonProps } from './Button.types';
+export declare const Button: import('react').ForwardRefExoticComponent<ButtonProps & import('react').RefAttributes<HTMLButtonElement>>;

package/components/core/Button/Button.js

@@ -0,0 +1,43 @@
+"use client";
+import { jsxs as $, jsx as e } from "@emotion/react/jsx-runtime";
+import { forwardRef as x } from "react";
+import { convertToInlineBoxStyles as b } from "../../../tokens/utils.js";
+import { COMPONENT_NAME as t } from "./constants.js";
+import { ButtonStyled as C, StartIconStyled as T, ContentStyled as E, EndIconStyled as N } from "./ButtonStyled.js";
+import { useTheme as v } from "../../../hooks/useTheme/useTheme.js";
+import { ButtonColorVariant as P, ButtonVariant as j, ButtonTypes as M, ButtonRole as O } from "../../../types/button.js";
+import { TabIndex as R } from "../../../types/accesability.js";
+const V = x((s, c) => {
+  const {
+    theme: o
+  } = v(), {
+    color: m = P.Primary,
+    variant: u = j.Contained,
+    children: n,
+    iconStart: r = null,
+    iconEnd: a = null,
+    type: f = M.Button,
+    disabled: p = !1,
+    isIcon: y = !1,
+    ariaLabel: l,
+    ariaPressed: i,
+    role: B = O.Button,
+    fullWidth: h = !1,
+    tabIndex: I = R.Default,
+    onClick: S,
+    ...d
+  } = s;
+  return /* @__PURE__ */ $(C, { ref: c, $variant: u, $color: m, $isIcon: y, $fullWidth: h, disabled: p, onClick: S, type: f, role: B, theme: o, tabIndex: I, "data-testid": t, ...b(d), ...l ? {
+    "aria-label": l
+  } : {}, ...i ? {
+    "aria-pressed": i
+  } : {}, ...d, children: [
+    r ? /* @__PURE__ */ e(T, { theme: o, "data-testid": `${t}-icon-start`, children: r }) : null,
+    n ? /* @__PURE__ */ e(E, { theme: o, "data-testid": `${t}-content`, children: n }) : null,
+    a ? /* @__PURE__ */ e(N, { theme: o, "data-testid": `${t}-icon-end`, children: a }) : null
+  ] });
+});
+V.displayName = t;
+export {
+  V as Button
+};

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

@@ -0,0 +1,26 @@
+import { PropsWithChildren, MouseEvent, ReactNode } from 'react';
+import { ButtonAriaLabel, ButtonColorVariant, ButtonRole, ButtonTypes, ButtonVariant, EnumOrPrimitive } from '../../../types';
+import { BoxCssComponentProps, BoxCssComponentStyledProps } from '../..';
+export interface ButtonProps extends BoxCssComponentProps<HTMLButtonElement>, PropsWithChildren {
+    variant?: EnumOrPrimitive<ButtonVariant>;
+    color?: EnumOrPrimitive<ButtonColorVariant>;
+    iconStart?: ReactNode;
+    iconEnd?: ReactNode;
+    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+    type?: ButtonTypes | `${ButtonTypes}`;
+    disabled?: boolean;
+    fullWidth?: boolean;
+    isIcon?: boolean;
+    ariaLabel?: ButtonAriaLabel | `${ButtonAriaLabel}`;
+    ariaPressed?: boolean;
+    role?: ButtonRole | `${ButtonRole}`;
+    tabIndex?: number;
+}
+export interface ButtonStyledProps extends BoxCssComponentStyledProps<HTMLButtonElement>, PropsWithChildren {
+    $variant?: EnumOrPrimitive<ButtonVariant>;
+    $color?: EnumOrPrimitive<ButtonColorVariant>;
+    $isIcon?: boolean;
+    $fullWidth?: boolean;
+    disabled?: boolean;
+    type?: ButtonTypes | `${ButtonTypes}`;
+}

package/components/core/Button/ButtonStyled.d.ts

@@ -0,0 +1,5 @@
+import { ButtonStyledProps } from './Button.types';
+export declare const ButtonStyled: import('react').ForwardRefExoticComponent<Omit<ButtonStyledProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
+export declare const ContentStyled: (props: ButtonStyledProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const StartIconStyled: (props: ButtonStyledProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const EndIconStyled: (props: ButtonStyledProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/components/core/Button/ButtonStyled.js

@@ -0,0 +1,53 @@
+"use client";
+import { jsx as r } from "@emotion/react/jsx-runtime";
+import { forwardRef as f } from "react";
+import { getBoxStyles as y } from "../../../tokens/utils.js";
+import { ButtonVariant as S, ButtonColorVariant as b } from "../../../types/button.js";
+import { get as o } from "../../../utils/helpers.js";
+const $ = f((n, e) => {
+  const {
+    theme: {
+      button: t
+    } = {},
+    $isIcon: s,
+    $fullWidth: c,
+    $variant: l = S.Contained,
+    $color: a = b.Primary,
+    styles: m = {},
+    ...u
+  } = n, {
+    boxStyles: p,
+    restProps: d
+  } = y(u), i = [o(t, "default", {}), o(t, [l, a], {}), p, s ? o(t, "icon", {}) : {}, c ? o(t, "fullWidth", {}) : {}, m];
+  return /* @__PURE__ */ r("button", { css: i, ...d, ref: e });
+}), g = (n) => {
+  const {
+    theme: {
+      button: e
+    } = {},
+    ...t
+  } = n, s = o(e, "content", {});
+  return /* @__PURE__ */ r("span", { css: o(s, "default", {}), className: "gd-button__content", ...t });
+}, C = (n) => {
+  const {
+    theme: {
+      button: e
+    } = {},
+    ...t
+  } = n, s = o(e, "startIcon", {});
+  return /* @__PURE__ */ r("span", { css: o(s, "default", {}), ...t });
+}, N = (n) => {
+  const {
+    theme: {
+      button: e
+    } = {},
+    ...t
+  } = n, s = o(e, "endIcon", {});
+  return /* @__PURE__ */ r("span", { css: o(s, "default", {}), ...t });
+};
+export {
+  $ as ButtonStyled,
+  g as ContentStyled,
+  N as EndIconStyled,
+  C as StartIconStyled
+};

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

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

package/components/core/Button/constants.js

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

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

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

package/components/core/Dropdown/Dropdown.d.ts

@@ -0,0 +1,3 @@
+export declare const Dropdown: import('react').ForwardRefExoticComponent<import('../..').CommonCssComponentProps<HTMLDivElement> & {
+    children?: import('react').ReactNode | undefined;
+} & import('react').RefAttributes<HTMLDivElement>>;

package/components/core/Dropdown/Dropdown.js

@@ -0,0 +1,38 @@
+"use client";
+import { jsx as u } from "@emotion/react/jsx-runtime";
+import { forwardRef as y } from "react";
+import { KEYBOARD_KEYS as s } from "../../../constants/keyboard.js";
+import { getClosestFocusable as D } from "../../../utils/focus.js";
+import { DropdownStyled as E } from "./DropdownStyled.js";
+import { COMPONENT_NAME as c } from "./constants.js";
+import { useTheme as R } from "../../../hooks/useTheme/useTheme.js";
+const w = y((l, p) => {
+  const {
+    children: d,
+    ...f
+  } = l, {
+    theme: a
+  } = R();
+  return /* @__PURE__ */ u(E, { ref: p, theme: a, "data-testid": c, onKeyDown: (o) => {
+    var m;
+    if (![s.ARROW_DOWN, s.ARROW_UP].includes(o.key))
+      return;
+    o.preventDefault();
+    const e = o.currentTarget, i = o.key === s.ARROW_UP, t = (m = e.ownerDocument) == null ? void 0 : m.activeElement;
+    if (t && e.contains(t)) {
+      const r = document.createElement("div");
+      e.insertBefore(r, i ? t : t.nextSibling);
+      const n = D({
+        initial: r,
+        previous: i,
+        root: e,
+        keyboard: !0
+      });
+      e.removeChild(r), n == null || n.focus();
+    }
+  }, ...f, children: d });
+});
+w.displayName = c;
+export {
+  w as Dropdown
+};

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

@@ -0,0 +1,8 @@
+import { PropsWithChildren } from 'react';
+import { CommonCssComponentProps, CommonCssComponentStyledProps } from '../../index.types';
+import { OnSelectProps } from '../types/events.types';
+export type DropdownProps = PropsWithChildren<CommonCssComponentProps>;
+export type DropdownStyledProps = PropsWithChildren<CommonCssComponentStyledProps>;
+export interface DropdownContextType {
+    onSelect?: (props: OnSelectProps) => void;
+}

package/components/core/Dropdown/DropdownStyled.d.ts

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

package/components/core/Dropdown/DropdownStyled.js

@@ -0,0 +1,17 @@
+"use client";
+import { jsx as p } from "@emotion/react/jsx-runtime";
+import { forwardRef as c } from "react";
+import { get as d } from "../../../utils/helpers.js";
+const l = c((o, t) => {
+  const {
+    theme: {
+      select: e
+    } = {},
+    styles: r = {},
+    ...s
+  } = o, m = [d(e, "dropdown", {}), r];
+  return /* @__PURE__ */ p("div", { css: m, ...s, ref: t });
+});
+export {
+  l as DropdownStyled
+};

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

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

package/components/core/Dropdown/constants.js

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

package/components/core/Dropdown/hooks/index.d.ts

@@ -0,0 +1 @@
+export * from './useDropdown';

package/components/core/Dropdown/hooks/useDropdown.d.ts

@@ -0,0 +1,3 @@
+import { DropdownContextType } from '../Dropdown.types';
+export declare const DropdownContext: import('react').Context<DropdownContextType | undefined>;
+export declare const useDropdownContext: () => DropdownContextType;

package/components/core/Dropdown/hooks/useDropdown.js

@@ -0,0 +1,12 @@
+"use client";
+import { createContext as t, useContext as e } from "react";
+const n = t(void 0), s = () => {
+  const o = e(n);
+  if (!o)
+    throw new Error("useDropdownContext must be used within a Dropdown component or children");
+  return o;
+};
+export {
+  n as DropdownContext,
+  s as useDropdownContext
+};

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

@@ -0,0 +1,3 @@
+export * from './Dropdown';
+export * from './Dropdown.types';
+export * from './hooks/useDropdown';

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

@@ -0,0 +1,2 @@
+import { DropdownItemProps } from '.';
+export declare const DropdownItem: import('react').ForwardRefExoticComponent<DropdownItemProps<unknown> & import('react').RefAttributes<HTMLDivElement>>;

package/components/core/DropdownItem/DropdownItem.js

@@ -0,0 +1,45 @@
+"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 { 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) => {
+  const {
+    children: y,
+    value: n,
+    onSelect: i,
+    className: o,
+    disabled: e,
+    name: d,
+    ...b
+  } = S, {
+    theme: h
+  } = T(), {
+    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
+      }) : 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 });
+});
+k.displayName = D;
+export {
+  k as DropdownItem
+};

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

@@ -0,0 +1,9 @@
+import { SelectProps, CommonCssComponentStyledProps } from '../..';
+export interface DropdownItemProps<T> extends Partial<Pick<SelectProps<T>, 'styles' | 'onSelect' | 'children' | 'className'>> {
+    name?: string;
+    disabled?: boolean;
+    value?: unknown;
+}
+export interface DropdownItemStyledProps extends CommonCssComponentStyledProps {
+    $disabled?: boolean;
+}

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

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

package/components/core/DropdownItem/DropdownItemStyled.js

@@ -0,0 +1,17 @@
+"use client";
+import { jsx as m } from "@emotion/react/jsx-runtime";
+import { forwardRef as i } from "react";
+import { get as t } from "../../../utils/helpers.js";
+const u = i((s, o) => {
+  const {
+    theme: {
+      select: e
+    } = {},
+    $disabled: r,
+    ...l
+  } = s, c = t(e, "item.default", {}), d = t(e, "item.disabled", {});
+  return /* @__PURE__ */ m("div", { css: [c, r ? d : {}], ...l, ref: o });
+});
+export {
+  u as DropdownItemStyled
+};