gd-design-library 0.7.5 → 0.8.0

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/ai/README.md

@@ -0,0 +1,137 @@
+# AI prompt and codegen usage for gd-design-library (GridKit)
+
+This README explains how to use the AI helpers in `/ai` to reliably generate React/TSX that only uses `gd-design-library`. It consolidates the hard rules, guardrails, and helper APIs exposed by this folder.
+
+Why these rules exist:
+
+- Consistency: a single design system source makes UI consistent and themable.
+- Accessibility: components provide sensible defaults and ARIA support.
+- Maintainability: no ad‑hoc CSS/HTML or third‑party UI imports.
+
+Core rule (must follow):
+
+- Use ONLY components exported by `gd-design-library` for layout, forms, feedback, display, and navigation. Do not invent components. Do not import from other UI libraries.
+
+Single-source import (enforced):
+
+- Correct: `import { Form, Input, Button, Typography, FlexContainer, Column, Card, Link } from 'gd-design-library';`
+- Incorrect: `import Button from 'some-ui-lib';`, `import { Box } from '@mui/material';`, or using `./styles.css` for layout spacing.
+
+How to use the AI helpers
+
+1. Programmatic prompt builder (recommended)
+
+- Import from the AI helpers barrel:
+  - `import { buildClaudeSystemPrompt } from 'gd-design-library/ai';`
+- Build your system+task prompt:
+  - `const prompt = buildClaudeSystemPrompt('Create a sign-in form with email and password');`
+    What this does:
+- Includes a live list of available components and composition tips from `./ai/schemas/components.ts` and `./ai/schemas/components/*`.
+- Enforces single-source imports from `gd-design-library` and accessibility/theming guardrails.
+
+2. Legacy/basic builder
+
+- `buildGDLibraryPrompt(request: string)` is kept for compatibility. It defers to `buildClaudeSystemPrompt`.
+
+3. Direct constant (advanced)
+
+- `CLAUDE_GRIDKIT_SYSTEM_PROMPT` contains the full system instructions. You can append your task to it manually if needed.
+
+Practical generation tips (what the model should output)
+
+- Output ONLY valid React TSX. No markdown fences or commentary.
+- Prefer composition using the provided layout primitives (FlexContainer, Column, Row, Card.\* subcomponents, etc.).
+- Keep custom styles minimal; use component props for spacing, alignment, sizing.
+- Always ensure accessibility: label all form controls (Label or Input label prop), use appropriate aria-\* attributes, and keep keyboard navigation sensible.
+- Do not inline the ThemeProvider inside leaf components; provide it at the app root. See Theme provider/hook entries in the schema.
+- Keep imports consolidated to one source: `gd-design-library`.
+
+API guardrails from the schema/prompt (must-follow)
+
+- Row/Column/Card.Row/Card.Column: use `isWrap` (boolean), NOT `wrap`.
+- Image and Card.Image: `width` and `height` props are numbers only (e.g., `width={96}`), not strings like `"96px"`.
+- Card.Title and other Card subcomponents: `sizeVariant` only accepts `CardSizeVariant.Default` or `CardSizeVariant.Sm`.
+- Counter and Card.Counter: use `initial` (not `value`) for the starting quantity; use `onCounterChange` as the change handler.
+- Button `variant` must be one of `ButtonVariant.Contained | ButtonVariant.Outlined | ButtonVariant.Text | ButtonVariant.Inherit`.
+- Button `color` must be one of `ButtonColorVariant.Primary | ButtonColorVariant.Secondary`.
+
+Component catalog
+
+- The authoritative, up-to-date list of supported components, their props, examples, and composition tips is generated from:
+  - `./schemas/components.ts` (registry)
+  - `./schemas/components/*` (per-component schemas)
+- The list includes layout, forms, feedback, display, navigation, and theme provider/hook entries. Always consult these when unsure.
+- Quick categories (from schema v1.0.0):
+  - Theme: useTheme.provider (ThemeProvider), useTheme.hook (useTheme)
+  - Layout: FlexContainer, Column, Row, Wrapper, Scroll, Separator
+  - 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, Link
+  - Display & content: Typography, Button, Icon, Image, Card, Avatar, Carousel, ContentCarousel, 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.
+
+Patterns from stories (grounded tips)
+
+- Textarea:
+  - Control resizing with the `resize` prop using the `TextareaResize` enum (e.g., None, Horizontal, Vertical, Both). Prefer `dynamicHeightAdjustment` for auto-growing content.
+  - Use `rows` for fixed height or `minHeight`/`maxHeight` for constraints.
+  - Controlled vs uncontrolled: use `value` with `onChange` for controlled; use `defaultValue` for uncontrolled.
+  - Accessibility: use `ariaDescribedBy` to connect helper/error text; set `readOnly`/`disabled` as needed; `autoFocus` is available.
+  - Limits and events: `maxLength` to constrain length; `onCustomResize` receives `{ height, width }` when user resizes.
+- Buttons:
+  - Variants: `ButtonVariant.Contained | Outlined | Text | Inherit`; Colors: `ButtonColorVariant.Primary | Secondary`. For icon-only buttons, set `isIcon`.
+- Forms and labels:
+  - Always provide a visible label via the `label` prop or a separate `<Label htmlFor>` paired with the input `name/id`. Wrap controls with `<Form>` and handle submit via `onSubmit`.
+- Layout composition:
+  - Use `FlexContainer` with `Column`/`Row` and `gap` to manage spacing. Avoid raw CSS margins except where necessary.
+- Cards and images:
+  - `Card.Title` uses `sizeVariant={CardSizeVariant.Default | CardSizeVariant.Sm}` only. `Card.Image` and `Image` require numeric `width`/`height` props.
+
+Example: Correct usage
+
+```
+import { Form, Input, Button, Typography, FlexContainer, Column, Card, Link } from 'gd-design-library';
+
+export function LoginCard() {
+  return (
+    <FlexContainer alignItems="center" justifyContent="center" minHeight="100vh" padding="24px">
+      <Card width={360} padding="24px">
+        <Column gap="12px">
+          <Typography as="h1" variant="h2">Sign in</Typography>
+          <Form onSubmit={(e) => { e.preventDefault(); /* TODO: submit */ }}>
+            <Column gap="12px">
+              <Input variant="email" label="Email" name="email" />
+              <Input variant="password" label="Password" name="password" />
+              <Button type="submit" fullWidth>Sign in</Button>
+            </Column>
+          </Form>
+          <Typography variant="small">
+            Don’t have an account? <Link href="#">Sign up</Link>
+          </Typography>
+        </Column>
+      </Card>
+    </FlexContainer>
+  );
+}
+```
+
+Incorrect usage (anti-patterns)
+
+```
+import Button from 'some-ui-lib';
+import { Box } from '@mui/material';
+
+export function Login() {
+  return (
+    <div className="container"> {/* Do not build layout with raw divs/CSS */}
+      <button>Sign in</button>   {/* Do not use native elements for styled UI */}
+    </div>
+  );
+}
+```
+
+Troubleshooting and notes
+
+- If a component/prop isn’t recognized, verify it exists in `gd-design-library` exports and the AI schemas under `./ai/schemas/components/*`.
+- When new components are added to the design system, update their schema and the central registry in `./ai/schemas/components.ts` so prompts stay accurate.
+- The default intro string in code (`defaultAIPromptIntro`) is aligned with the schema. Prefer the schema-driven builders (e.g., `buildClaudeSystemPrompt`) for the most accurate, current catalog.

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