gd-design-library 0.8.1 → 1.0.0

package/ai/README.md

@@ -14,7 +14,7 @@ Core rule (must follow):
 
 Single-source import (enforced):
 
-- Correct: `import { Form, Input, Button, Typography, FlexContainer, Column, Card, Link } from 'gd-design-library';`
+- Correct: `import { Form, Input, Button, Typography, Box, 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
@@ -48,12 +48,12 @@ Practical generation tips (what the model should output)
 
 API guardrails from the schema/prompt (must-follow)
 
-- Row/Column/Card.Row/Card.Column: use `isWrap` (boolean), NOT `wrap`.
+- Row/Column/Card.Row/Card.Column: use `isWrap` (boolean), NOT `wrap`. **IMPORTANT: `isWrap` defaults to `true`**, use `isWrap={false}` to prevent wrapping.
+- Icon: **ONLY use icon names from the available list**: cross, success, error, warning, info, dot, check, arrowDown, arrowRight, arrowLeft, arrowForward, keyboardArrowDown, keyboardArrowUp, mobileMenu, home, slash, localShipping, favorite, favoriteOutlined, shoppingBag, paymentCard, accountCircle, portrait, deleteOutlined, minus, plus, edit, search, filter, ruler, attachment, upload, folder, folderOpen, contentCopy, fileCopy, eye, volumeUp, send, chat, chatBubble, phone, processing, wifiTethering, star, starOutlined, thumbUp, thumbDown, thumbUpFilled, thumbDownFilled, errorOutline. Do NOT use icons not in this list (e.g., no "settings", "close", "add", "info" icons).
 - 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`.
+- Button `variant` must be one of `ButtonVariant.Primary | ButtonVariant.Secondary | ButtonVariant.Tertiary | ButtonVariant.Outlined | ButtonVariant.Text | ButtonVariant.Inherit`.
 
 Component catalog
 
@@ -63,7 +63,7 @@ Component catalog
 - 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
+  - Layout: Box, 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
@@ -79,11 +79,14 @@ Patterns from stories (grounded tips)
   - 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`.
+  - Variants: `ButtonVariant.Primary | Secondary | Tertiary | Outlined | Text | Inherit`. For icon-only buttons, set `isIcon`.
+  - Rounded: Use `rounded` prop with values: `none | xs | sm | md | lg | xl | round`. Use `round` for circular icon buttons.
 - 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 `Box` as the foundational layout primitive with built-in flexbox support and interaction states. Box provides `variant` (horizontal/vertical), `isBordered`, `isHighlighted`, and `withShadowHover` props.
   - Use `FlexContainer` with `Column`/`Row` and `gap` to manage spacing. Avoid raw CSS margins except where necessary.
+  - Prefer `Box` over raw divs for all container needs to maintain design system consistency and leverage built-in theming.
 - Communication icons:
   - Use `Icon name="chat"` for general chat or messaging functionality indicators
   - Apply `Icon name="chatBubble"` for individual message bubbles or conversation threads
@@ -140,7 +143,6 @@ Patterns from stories (grounded tips)
   - Combine with emoji picker or formatting toolbar
   - Use `rows` with `dynamicHeightAdjustment` for initial size with growth
   - Apply with consistent padding and font size
-  - Set with wrap attribute control for long lines
   - Use with keyboard shortcuts for power users
   - Apply in `Card` components for comment sections
   - Combine with mention/autocomplete functionality
@@ -155,12 +157,14 @@ Patterns from stories (grounded tips)
   - Prefer `resize="vertical"` for longer text areas
   - Provide `ariaDescribedBy` for helper text or character counters
 - Cards and images:
+  - `Card` now accepts all `Box` props including `variant`, `isBordered`, `isHighlighted`, and `withShadowHover`.
+  - Use `Card withShadowHover` for interactive/clickable cards with elevation effect on hover. Combine with `backgroundColor="#fff"` and `cursor: "pointer"` for better visibility.
   - `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';
+import { Form, Input, Button, Typography, Box, FlexContainer, Column, Card, Link } from 'gd-design-library';
 
 export function LoginCard() {
   return (

package/ai/codegen.d.ts

@@ -1,10 +0,0 @@
-export type AIIntent = 'login';
-export interface GenerateOptions {
-    componentName?: string;
-}
-/**
- * Returns a TSX string for a classic Login page composed with gd-design-library components.
- * The output is intentionally framework-agnostic TSX that can be pasted into a React project.
- */
-export declare function generateLoginPageTSX(options?: GenerateOptions): string;
-export declare function generateUIFromIntent(intent: AIIntent, options?: GenerateOptions): string;

package/ai/index.d.ts

@@ -1,3 +1,2 @@
 export * from './prompts';
-export * from './codegen';
 export * from './schemas/components';

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

@@ -0,0 +1,101 @@
+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: boolean;
+        } | {
+            name: string;
+            type: string;
+            description: string;
+            default: boolean;
+            enum?: undefined;
+            required?: undefined;
+        } | {
+            name: string;
+            type: string;
+            description: string;
+            required: boolean;
+            default?: undefined;
+            enum?: undefined;
+        } | {
+            name: string;
+            type: string;
+            description: string;
+            default: number;
+            enum?: undefined;
+            required?: undefined;
+        } | {
+            name: string;
+            type: string;
+            description: string;
+            default?: undefined;
+            enum?: undefined;
+            required?: undefined;
+        } | {
+            name: string;
+            type: string;
+            description: string;
+            default: {};
+            enum?: undefined;
+            required?: undefined;
+        })[];
+        quickStart: {
+            basic: string;
+            horizontal: string;
+            bordered: string;
+            interactive: string;
+            centered: string;
+        };
+        commonPatterns: {
+            'Card Container': {
+                code: string;
+                useCase: string;
+            };
+            'Horizontal Layout': {
+                code: string;
+                useCase: string;
+            };
+            'Vertical Stack': {
+                code: string;
+                useCase: string;
+            };
+            'Centered Content': {
+                code: string;
+                useCase: string;
+            };
+            'Dashboard Section': {
+                code: string;
+                useCase: string;
+            };
+        };
+        examples: string[];
+        troubleshooting: {
+            'Children not aligning correctly': string;
+            'Hover effects not working': string;
+            'Border not showing': string;
+            'Gap not working': string;
+            'Focus ring not visible': string;
+        };
+        bestPractices: string[];
+    };
+    compositionTips: string[];
+};
+export default _default;

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

@@ -21,13 +21,6 @@ declare const _default: {
             default: string;
             enum: string[];
             required?: undefined;
-        } | {
-            name: string;
-            type: string;
-            description: string;
-            default: string;
-            enum?: undefined;
-            required?: undefined;
         } | {
             name: string;
             type: string;
@@ -68,6 +61,7 @@ declare const _default: {
             basic: string;
             primary: string;
             secondary: string;
+            rounded: string;
             icon: string;
             withIcon: string;
         };

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

@@ -55,22 +55,32 @@ declare const _default: {
             bordered: string;
             horizontal: string;
             highlighted: string;
+            interactive: string;
+            combined: string;
             scrollable: string;
         };
         commonPatterns: {
-            'Content Card': {
+            'E-commerce Product Card (Vertical)': {
                 code: string;
                 useCase: string;
             };
-            'Media Card': {
+            'Horizontal Media Card': {
                 code: string;
                 useCase: string;
             };
-            'Form Card': {
+            'Compact Interactive Card': {
                 code: string;
                 useCase: string;
             };
-            'Product Card': {
+            'Simple Content Card': {
+                code: string;
+                useCase: string;
+            };
+            'Clickable Card with Shadow': {
+                code: string;
+                useCase: string;
+            };
+            'Combined Effects Card': {
                 code: string;
                 useCase: string;
             };
@@ -82,6 +92,8 @@ declare const _default: {
             'Inconsistent spacing': string;
             'Horizontal layout not working': string;
             'Border not showing': string;
+            'Shadow hover not visible': string;
+            'Hover effects not working': string;
         };
         bestPractices: string[];
     };

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

@@ -4,6 +4,7 @@ declare const _default: {
         import: string;
         description: string;
         category: string;
+        availableIcons: string[];
         complexity: string;
         accessibility: string;
         performance: string;

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";*,: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}
+@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";@import"https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&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:Fira Code,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/Box/Box.d.ts

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

package/components/core/Box/Box.js

@@ -0,0 +1,26 @@
+"use client";
+import { jsx as n } from "@emotion/react/jsx-runtime";
+import { forwardRef as p } from "react";
+import { COMPONENT_NAME as e } from "./constants.js";
+import { BoxStyled as c } from "./BoxStyled.js";
+import { TabIndex as x } from "../../../types/accesability.js";
+import { useTheme as v } from "../../../hooks/useTheme/useTheme.js";
+const w = p((r, t) => {
+  const {
+    variant: o = "vertical",
+    isBordered: i = !1,
+    children: a,
+    tabIndex: s = x.Default,
+    isHighlighted: d = !1,
+    withShadowHover: m = !1,
+    styles: f = {},
+    ...l
+  } = r, {
+    theme: h
+  } = v();
+  return /* @__PURE__ */ n(c, { ref: t, tabIndex: s, "data-testid": e, theme: h, styles: f, $variant: o, $isBordered: i, $isHighlighted: d, $withShadowHover: m, ...l, children: a });
+});
+w.displayName = e;
+export {
+  w as Box
+};

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

@@ -0,0 +1,18 @@
+import { PropsWithChildren } from 'react';
+import { BoxCssComponentProps, BoxCssComponentStyledProps } from '../..';
+import { EnumOrPrimitive, TabIndex } from '../../../types';
+export type BoxVariant = 'horizontal' | 'vertical';
+export interface BoxProps extends Omit<BoxCssComponentProps, 'tabIndex'>, PropsWithChildren {
+    variant?: BoxVariant;
+    isBordered?: boolean;
+    isHighlighted?: boolean;
+    withShadowHover?: boolean;
+    tabIndex?: EnumOrPrimitive<TabIndex>;
+}
+export interface BoxStyledProps extends Omit<BoxCssComponentStyledProps, 'tabIndex'> {
+    $variant: BoxVariant;
+    $isBordered?: boolean;
+    $isHighlighted?: boolean;
+    $withShadowHover?: boolean;
+    tabIndex?: EnumOrPrimitive<TabIndex>;
+}

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

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

package/components/core/Box/BoxStyled.js

@@ -0,0 +1,26 @@
+"use client";
+import { jsx as x } from "@emotion/react/jsx-runtime";
+import { forwardRef as y } from "react";
+import { getBoxStyles as g, tokensHandler as S } from "../../../tokens/utils.js";
+import { get as t } from "../../../utils/helpers.js";
+const H = y((r, s) => {
+  const {
+    theme: {
+      box: d,
+      ...i
+    } = {},
+    $variant: o,
+    $isBordered: l,
+    $isHighlighted: m,
+    $withShadowHover: n,
+    styles: h = {},
+    ...f
+  } = r, {
+    boxStyles: p,
+    restProps: a
+  } = g(f), e = new Proxy(d || {}, S(i)), c = [t(e, "default", {}), t(e, [o, "default"], {}), n ? t(e, "shadowHover", {}) : {}, l ? t(e, [o, "bordered"], {}) : {}, m ? t(e, [o, "highlighted"], {}) : {}, p, h];
+  return /* @__PURE__ */ x("div", { css: c, ...a, ref: s });
+});
+export {
+  H as BoxStyled
+};

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

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

package/components/core/Box/constants.js

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

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

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

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

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

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

@@ -1,4 +1,4 @@
-import { BreadcrumbsStyledProps } from './Breadcrumbs.types';
+import { BreadcrumbsStyledProps } from './';
 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;

package/components/core/Breadcrumbs/BreadcrumbsStyled.js

@@ -1,58 +1,67 @@
 "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) => {
+import { jsx as d } from "@emotion/react/jsx-runtime";
+import { forwardRef as u } from "react";
+import { getBoxStyles as S, tokensHandler as y } from "../../../tokens/utils.js";
+import { get as m } from "../../../utils/helpers.js";
+const x = u((e, t) => {
   const {
     theme: {
-      breadcrumbs: t
+      breadcrumbs: s,
+      ...r
     } = {},
-    $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) => {
+    $bordered: o = !1,
+    styles: n = {},
+    ...c
+  } = e, {
+    boxStyles: l,
+    restProps: b
+  } = S(c), a = new Proxy(s || {}, y(r)), p = [m(a, "default", {}), o ? m(a, "bordered", {}) : {}, l, n];
+  return /* @__PURE__ */ d("div", { css: p, ...b, ref: t });
+}), B = (e) => {
   const {
     theme: {
-      breadcrumbs: s
+      breadcrumbs: t,
+      ...s
     } = {},
-    styles: t = {},
-    ...r
-  } = e, o = [c(s, "item", {}), t];
-  return /* @__PURE__ */ n("div", { css: o, ...r });
-}, u = (e) => {
+    styles: r = {},
+    ...o
+  } = e, n = new Proxy(t || {}, y(s)), c = [m(n, "item", {}), r];
+  return /* @__PURE__ */ d("div", { css: c, ...o });
+}, w = (e) => {
   const {
     theme: {
-      breadcrumbs: s
+      breadcrumbs: t,
+      ...s
     } = {},
-    styles: t = {},
-    ...r
-  } = e, o = [c(s, "separator", {}), t];
-  return /* @__PURE__ */ n("div", { css: o, ...r });
-}, S = (e) => {
+    styles: r = {},
+    ...o
+  } = e, n = new Proxy(t || {}, y(s)), c = [m(n, "separator", {}), r];
+  return /* @__PURE__ */ d("div", { css: c, ...o });
+}, v = (e) => {
   const {
     theme: {
-      breadcrumbs: s
+      breadcrumbs: t,
+      ...s
     } = {},
-    styles: t = {},
-    ...r
-  } = e, o = [c(s, "item.itemStart", {}), t];
-  return /* @__PURE__ */ n("div", { css: o, ...r });
-}, f = (e) => {
+    styles: r = {},
+    ...o
+  } = e, n = new Proxy(t || {}, y(s)), c = [m(n, "item.itemStart", {}), r];
+  return /* @__PURE__ */ d("div", { css: c, ...o });
+}, I = (e) => {
   const {
     theme: {
-      breadcrumbs: s
+      breadcrumbs: t,
+      ...s
     } = {},
-    styles: t = {},
-    ...r
-  } = e, o = [c(s, "item.itemEnd", {}), t];
-  return /* @__PURE__ */ n("div", { css: o, ...r });
+    styles: r = {},
+    ...o
+  } = e, n = new Proxy(t || {}, y(s)), c = [m(n, "item.itemEnd", {}), r];
+  return /* @__PURE__ */ d("div", { css: c, ...o });
 };
 export {
-  i as BreadcrumbItemStyled,
-  b as BreadcrumbsStyled,
-  f as ItemEndStyled,
-  S as ItemStartStyled,
-  u as SeparatorStyled
+  B as BreadcrumbItemStyled,
+  x as BreadcrumbsStyled,
+  I as ItemEndStyled,
+  v as ItemStartStyled,
+  w as SeparatorStyled
 };

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

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

package/components/core/Button/Button.js

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

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

@@ -1,9 +1,9 @@
 import { PropsWithChildren, MouseEvent, ReactNode } from 'react';
-import { ButtonAriaLabel, ButtonColorVariant, ButtonRole, ButtonTypes, ButtonVariant, EnumOrPrimitive } from '../../../types';
+import { ButtonRole, ButtonTypes, ButtonVariant, EnumOrPrimitive } from '../../../types';
 import { BoxCssComponentProps, BoxCssComponentStyledProps } from '../..';
 export interface ButtonProps extends BoxCssComponentProps<HTMLButtonElement>, PropsWithChildren {
     variant?: EnumOrPrimitive<ButtonVariant>;
-    color?: EnumOrPrimitive<ButtonColorVariant>;
+    rounded?: 'none' | 'default' | 'round' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
     iconStart?: ReactNode;
     iconEnd?: ReactNode;
     onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
@@ -11,16 +11,18 @@ export interface ButtonProps extends BoxCssComponentProps<HTMLButtonElement>, Pr
     disabled?: boolean;
     fullWidth?: boolean;
     isIcon?: boolean;
-    ariaLabel?: ButtonAriaLabel | `${ButtonAriaLabel}`;
+    ariaLabel?: string;
     ariaPressed?: boolean;
     role?: ButtonRole | `${ButtonRole}`;
     tabIndex?: number;
 }
-export interface ButtonStyledProps extends BoxCssComponentStyledProps<HTMLButtonElement>, PropsWithChildren {
+export interface ButtonCommonStyledProps extends BoxCssComponentStyledProps<HTMLButtonElement>, PropsWithChildren {
     $variant?: EnumOrPrimitive<ButtonVariant>;
-    $color?: EnumOrPrimitive<ButtonColorVariant>;
     $isIcon?: boolean;
     $fullWidth?: boolean;
     disabled?: boolean;
     type?: ButtonTypes | `${ButtonTypes}`;
 }
+export interface ButtonStyledProps extends ButtonCommonStyledProps {
+    $rounded: 'none' | 'default' | 'round' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+}

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

@@ -1,5 +1,5 @@
-import { ButtonStyledProps } from './Button.types';
+import { ButtonCommonStyledProps, ButtonStyledProps } from './';
 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;
+export declare const ContentStyled: (props: ButtonCommonStyledProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const StartIconStyled: (props: ButtonCommonStyledProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const EndIconStyled: (props: ButtonCommonStyledProps) => import("@emotion/react/jsx-runtime").JSX.Element;