react-restyle-components 0.4.39 → 0.4.40

package/lib/src/core-components/src/components/Breadcrumb/elements.js

@@ -1,8 +1,14 @@
-"use strict";import{styled as a,css as n}from"styled-components";import{breakpoints as o,getFontSize as s}from"../../utils/abstracts";import{tokens as e}from"../../utils/designTokens";export const Text=a.span`
+import { styled, css } from 'styled-components';
+import { breakpoints, getFontSize } from '../../utils/abstracts';
+import { tokens } from '../../utils/designTokens';
+// Simple Text component for internal use (basic span)
+export const Text = styled.span `
   font-size: inherit;
   color: inherit;
   line-height: inherit;
-`,CurrentPage=a.span`
+`;
+// CurrentPage component for the active/last breadcrumb item
+export const CurrentPage = styled.span `
   font-size: inherit;
   line-height: inherit;
   font-weight: 600;
@@ -11,16 +17,39 @@
   align-items: center;
 
   /* Enhanced styling for pills variant */
-  ${({$variant:i})=>i==="pills"&&n`
+  ${({ $variant }) => $variant === 'pills' &&
+    css `
       font-weight: 700;
       letter-spacing: 0.02em;
       text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
     `}
-`;const r={small:{fontSize:s(0),padding:`${e.spacing050} ${e.spacing100}`,gap:e.spacing050,iconSize:"12px"},medium:{fontSize:s(1),padding:`${e.spacing075} ${e.spacing150}`,gap:e.spacing075,iconSize:"14px"},large:{fontSize:s(2),padding:`${e.spacing100} ${e.spacing200}`,gap:e.spacing100,iconSize:"16px"}};export const Container=a.nav`
+`;
+// Size configurations
+const sizeStyles = {
+    small: {
+        fontSize: getFontSize(0),
+        padding: `${tokens.spacing050} ${tokens.spacing100}`,
+        gap: tokens.spacing050,
+        iconSize: '12px',
+    },
+    medium: {
+        fontSize: getFontSize(1),
+        padding: `${tokens.spacing075} ${tokens.spacing150}`,
+        gap: tokens.spacing075,
+        iconSize: '14px',
+    },
+    large: {
+        fontSize: getFontSize(2),
+        padding: `${tokens.spacing100} ${tokens.spacing200}`,
+        gap: tokens.spacing100,
+        iconSize: '16px',
+    },
+};
+export const Container = styled.nav `
   display: flex;
   align-items: center;
   flex-wrap: nowrap;
-  gap: ${({$size:i})=>r[i].gap};
+  gap: ${({ $size }) => sizeStyles[$size].gap};
   width: 100%;
   overflow-x: auto;
   -ms-overflow-style: none;
@@ -31,56 +60,64 @@
   }
 
   /* Variant: contained */
-  ${({$variant:i})=>i==="contained"&&n`
+  ${({ $variant }) => $variant === 'contained' &&
+    css `
       background: linear-gradient(
         135deg,
-        ${e.surface||"#f8f9fa"} 0%,
+        ${tokens.surface || '#f8f9fa'} 0%,
         #f1f3f5 100%
       );
-      border: 1px solid ${e.outline||"#e9ecef"};
-      border-radius: ${e.borderRadius100||"8px"};
-      padding: ${e.spacing100} ${e.spacing200};
+      border: 1px solid ${tokens.outline || '#e9ecef'};
+      border-radius: ${tokens.borderRadius100 || '8px'};
+      padding: ${tokens.spacing100} ${tokens.spacing200};
       box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
     `}
 
   /* Variant: pills */
-  ${({$variant:i})=>i==="pills"&&n`
+  ${({ $variant }) => $variant === 'pills' &&
+    css `
       background: transparent;
-      gap: ${e.spacing050};
+      gap: ${tokens.spacing050};
     `}
 
   /* Responsive: allow wrapping on larger screens */
-  ${o.md} {
+  ${breakpoints.md} {
     flex-wrap: wrap;
   }
 
   /* Smooth scroll behavior */
   scroll-behavior: smooth;
   -webkit-overflow-scrolling: touch;
-`,BreadcrumbList=a.ol`
+`;
+export const BreadcrumbList = styled.ol `
   all: unset;
   display: flex;
   align-items: center;
   flex-wrap: nowrap;
-  gap: ${({$size:i})=>r[i].gap};
+  gap: ${({ $size }) => sizeStyles[$size].gap};
   list-style: none;
   margin: 0;
   padding: 0;
 
-  ${o.md} {
+  ${breakpoints.md} {
     flex-wrap: wrap;
   }
-`,Item=a.li`
+`;
+export const Item = styled.li `
   display: flex;
   align-items: center;
-  gap: ${({$size:i})=>r[i].gap};
+  gap: ${({ $size }) => sizeStyles[$size].gap};
   position: relative;
   transition: all 0.2s ease;
 
   /* Base text styles */
-  color: ${({$isActive:i})=>i?e.onSurface||"#1a1a2e":e.onSurface?`${e.onSurface}99`:"#6c757d"};
-  font-size: ${({$size:i})=>r[i].fontSize};
-  font-weight: ${({$isActive:i})=>i?600:400};
+  color: ${({ $isActive }) => $isActive
+    ? tokens.onSurface || '#1a1a2e'
+    : tokens.onSurface
+        ? `${tokens.onSurface}99`
+        : '#6c757d'};
+  font-size: ${({ $size }) => sizeStyles[$size].fontSize};
+  font-weight: ${({ $isActive }) => ($isActive ? 600 : 400)};
   line-height: 1.5;
   white-space: nowrap;
 
@@ -88,33 +125,46 @@
   [data-aui='link'],
   [data-aui='action.inline'],
   a {
-    color: ${e.primary||"#454cbf"};
+    color: ${tokens.primary || '#454cbf'};
     text-decoration: none;
     transition: all 0.2s ease;
-    padding: ${({$size:i})=>i==="small"?`${e.spacing025} ${e.spacing050}`:i==="large"?`${e.spacing075} ${e.spacing100}`:`${e.spacing050} ${e.spacing075}`};
-    border-radius: ${e.borderRadius050||"4px"};
+    padding: ${({ $size }) => $size === 'small'
+    ? `${tokens.spacing025} ${tokens.spacing050}`
+    : $size === 'large'
+        ? `${tokens.spacing075} ${tokens.spacing100}`
+        : `${tokens.spacing050} ${tokens.spacing075}`};
+    border-radius: ${tokens.borderRadius050 || '4px'};
 
     &:hover {
-      color: ${e.primary||"#454cbf"};
-      background: ${e.primary?`${e.primary}10`:"rgba(69, 76, 191, 0.08)"};
+      color: ${tokens.primary || '#454cbf'};
+      background: ${tokens.primary
+    ? `${tokens.primary}10`
+    : 'rgba(69, 76, 191, 0.08)'};
       text-decoration: underline;
     }
 
     &:focus-visible {
-      outline: 2px solid ${e.primary||"#454cbf"};
+      outline: 2px solid ${tokens.primary || '#454cbf'};
       outline-offset: 2px;
     }
   }
 
   /* Pills variant styling */
-  ${({$variant:i,$isActive:t,$size:p})=>i==="pills"&&n`
-      background: ${t?`linear-gradient(135deg, ${e.primary||"#454cbf"} 0%, ${e.primary?e.primary+"dd":"#5a61c9"} 100%)`:e.surface||"#f8f9fa"};
-      color: ${t?e.white||"#ffffff":e.onSurface||"#1a1a2e"};
-      padding: ${r[p].padding};
-      border-radius: ${e.borderRadius200||"16px"};
+  ${({ $variant, $isActive, $size }) => $variant === 'pills' &&
+    css `
+      background: ${$isActive
+        ? `linear-gradient(135deg, ${tokens.primary || '#454cbf'} 0%, ${tokens.primary ? tokens.primary + 'dd' : '#5a61c9'} 100%)`
+        : tokens.surface || '#f8f9fa'};
+      color: ${$isActive
+        ? tokens.white || '#ffffff'
+        : tokens.onSurface || '#1a1a2e'};
+      padding: ${sizeStyles[$size].padding};
+      border-radius: ${tokens.borderRadius200 || '16px'};
       border: 1px solid
-        ${t?"transparent":e.outline||"#e9ecef"};
-      box-shadow: ${t?"0 2px 8px rgba(69, 76, 191, 0.3)":"0 1px 2px rgba(0, 0, 0, 0.05)"};
+        ${$isActive ? 'transparent' : tokens.outline || '#e9ecef'};
+      box-shadow: ${$isActive
+        ? '0 2px 8px rgba(69, 76, 191, 0.3)'
+        : '0 1px 2px rgba(0, 0, 0, 0.05)'};
       transition: all 0.25s ease;
 
       &:hover:not(:last-child) {
@@ -137,79 +187,89 @@
     `}
 
   /* Collapsed item (ellipsis) */
-  ${({$isCollapsed:i})=>i&&n`
+  ${({ $isCollapsed }) => $isCollapsed &&
+    css `
       cursor: pointer;
-      padding: ${e.spacing050} ${e.spacing075};
-      border-radius: ${e.borderRadius050||"4px"};
-      background: ${e.surface||"#f8f9fa"};
-      border: 1px solid ${e.outline||"#e9ecef"};
+      padding: ${tokens.spacing050} ${tokens.spacing075};
+      border-radius: ${tokens.borderRadius050 || '4px'};
+      background: ${tokens.surface || '#f8f9fa'};
+      border: 1px solid ${tokens.outline || '#e9ecef'};
 
       &:hover {
-        background: ${e.primary?`${e.primary}10`:"rgba(69, 76, 191, 0.08)"};
-        border-color: ${e.primary||"#454cbf"};
+        background: ${tokens.primary
+        ? `${tokens.primary}10`
+        : 'rgba(69, 76, 191, 0.08)'};
+        border-color: ${tokens.primary || '#454cbf'};
       }
     `}
 
   /* Hide on mobile for collapsed items */
-  ${({$isCollapsed:i})=>i&&n`
-      ${o.xs} {
+  ${({ $isCollapsed }) => $isCollapsed &&
+    css `
+      ${breakpoints.xs} {
         display: none;
       }
     `}
-`,Separator=a.span`
+`;
+export const Separator = styled.span `
   display: flex;
   align-items: center;
   justify-content: center;
-  color: ${e.onSurface?`${e.onSurface}66`:"#adb5bd"};
+  color: ${tokens.onSurface ? `${tokens.onSurface}66` : '#adb5bd'};
   flex-shrink: 0;
   transition: color 0.2s ease;
 
   /* Icon styling */
   [data-aui='icon'] {
     color: inherit;
-    width: ${({$size:i})=>r[i].iconSize};
-    height: ${({$size:i})=>r[i].iconSize};
+    width: ${({ $size }) => sizeStyles[$size].iconSize};
+    height: ${({ $size }) => sizeStyles[$size].iconSize};
   }
 
   /* Hide separator on last item via CSS */
   ${Item}:last-child & {
     display: none;
   }
-`,SeparatorText=a.span`
-  font-size: ${({$size:i})=>r[i].fontSize};
+`;
+export const SeparatorText = styled.span `
+  font-size: ${({ $size }) => sizeStyles[$size].fontSize};
   color: inherit;
   user-select: none;
-`,OverflowDots=a.span`
+`;
+export const OverflowDots = styled.span `
   display: none;
-  color: ${e.onSurface?`${e.onSurface}80`:"#6c757d"};
+  color: ${tokens.onSurface ? `${tokens.onSurface}80` : '#6c757d'};
   font-weight: 500;
   letter-spacing: 2px;
-  padding: ${e.spacing050} ${e.spacing075};
-  border-radius: ${e.borderRadius050||"4px"};
-  background: ${e.surface||"#f8f9fa"};
-  border: 1px solid ${e.outline||"#e9ecef"};
+  padding: ${tokens.spacing050} ${tokens.spacing075};
+  border-radius: ${tokens.borderRadius050 || '4px'};
+  background: ${tokens.surface || '#f8f9fa'};
+  border: 1px solid ${tokens.outline || '#e9ecef'};
   cursor: pointer;
   transition: all 0.2s ease;
-  font-size: ${({$size:i})=>r[i].fontSize};
+  font-size: ${({ $size }) => sizeStyles[$size].fontSize};
 
   &:hover {
-    background: ${e.primary?`${e.primary}10`:"rgba(69, 76, 191, 0.08)"};
-    border-color: ${e.primary||"#454cbf"};
-    color: ${e.primary||"#454cbf"};
+    background: ${tokens.primary
+    ? `${tokens.primary}10`
+    : 'rgba(69, 76, 191, 0.08)'};
+    border-color: ${tokens.primary || '#454cbf'};
+    color: ${tokens.primary || '#454cbf'};
   }
 
-  ${o.md} {
+  ${breakpoints.md} {
     display: inline-flex;
     align-items: center;
     justify-content: center;
   }
-`,HomeIcon=a.span`
+`;
+export const HomeIcon = styled.span `
   display: flex;
   align-items: center;
   justify-content: center;
-  width: ${({$size:i})=>r[i].iconSize};
-  height: ${({$size:i})=>r[i].iconSize};
-  color: ${e.primary||"#454cbf"};
+  width: ${({ $size }) => sizeStyles[$size].iconSize};
+  height: ${({ $size }) => sizeStyles[$size].iconSize};
+  color: ${tokens.primary || '#454cbf'};
   transition: all 0.2s ease;
 
   [data-aui='icon'] {
@@ -221,78 +281,90 @@
   &:hover {
     transform: scale(1.1);
   }
-`,IconWrapper=a.span`
+`;
+export const IconWrapper = styled.span `
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
-  width: ${({$size:i})=>i==="small"?"16px":i==="large"?"24px":"20px"};
-  height: ${({$size:i})=>i==="small"?"16px":i==="large"?"24px":"20px"};
+  width: ${({ $size }) => $size === 'small' ? '16px' : $size === 'large' ? '24px' : '20px'};
+  height: ${({ $size }) => $size === 'small' ? '16px' : $size === 'large' ? '24px' : '20px'};
 
   [data-aui='icon'],
   svg {
     width: 100%;
     height: 100%;
   }
-`,MobileMenuButton=a.button`
+`;
+export const MobileMenuButton = styled.button `
   display: flex;
   align-items: center;
   justify-content: center;
-  background: ${e.surface||"#f8f9fa"};
-  border: 1px solid ${e.outline||"#e9ecef"};
-  border-radius: ${e.borderRadius050||"4px"};
-  padding: ${({$size:i})=>i==="small"?e.spacing050:i==="large"?e.spacing100:e.spacing075};
+  background: ${tokens.surface || '#f8f9fa'};
+  border: 1px solid ${tokens.outline || '#e9ecef'};
+  border-radius: ${tokens.borderRadius050 || '4px'};
+  padding: ${({ $size }) => $size === 'small'
+    ? tokens.spacing050
+    : $size === 'large'
+        ? tokens.spacing100
+        : tokens.spacing075};
   cursor: pointer;
   transition: all 0.2s ease;
-  color: ${e.onSurface||"#1a1a2e"};
+  color: ${tokens.onSurface || '#1a1a2e'};
 
   &:hover {
-    background: ${e.primary?`${e.primary}10`:"rgba(69, 76, 191, 0.08)"};
-    border-color: ${e.primary||"#454cbf"};
+    background: ${tokens.primary
+    ? `${tokens.primary}10`
+    : 'rgba(69, 76, 191, 0.08)'};
+    border-color: ${tokens.primary || '#454cbf'};
   }
 
   &:focus-visible {
-    outline: 2px solid ${e.primary||"#454cbf"};
+    outline: 2px solid ${tokens.primary || '#454cbf'};
     outline-offset: 2px;
   }
 
   /* Only show on mobile */
-  ${o.sm} {
+  ${breakpoints.sm} {
     display: none;
   }
-`,DropdownMenu=a.div`
+`;
+export const DropdownMenu = styled.div `
   position: absolute;
   top: 100%;
   left: 0;
   z-index: 100;
   min-width: 200px;
-  background: ${e.surface||"#ffffff"};
-  border: 1px solid ${e.outline||"#e9ecef"};
-  border-radius: ${e.borderRadius100||"8px"};
+  background: ${tokens.surface || '#ffffff'};
+  border: 1px solid ${tokens.outline || '#e9ecef'};
+  border-radius: ${tokens.borderRadius100 || '8px'};
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
-  padding: ${e.spacing050};
-  opacity: ${({$isOpen:i})=>i?1:0};
-  visibility: ${({$isOpen:i})=>i?"visible":"hidden"};
-  transform: ${({$isOpen:i})=>i?"translateY(4px)":"translateY(-8px)"};
+  padding: ${tokens.spacing050};
+  opacity: ${({ $isOpen }) => ($isOpen ? 1 : 0)};
+  visibility: ${({ $isOpen }) => ($isOpen ? 'visible' : 'hidden')};
+  transform: ${({ $isOpen }) => $isOpen ? 'translateY(4px)' : 'translateY(-8px)'};
   transition: all 0.2s ease;
-`,DropdownItem=a.a`
+`;
+export const DropdownItem = styled.a `
   display: flex;
   align-items: center;
-  gap: ${e.spacing100};
-  padding: ${e.spacing100} ${e.spacing150};
-  color: ${e.onSurface||"#1a1a2e"};
+  gap: ${tokens.spacing100};
+  padding: ${tokens.spacing100} ${tokens.spacing150};
+  color: ${tokens.onSurface || '#1a1a2e'};
   text-decoration: none;
-  border-radius: ${e.borderRadius050||"4px"};
+  border-radius: ${tokens.borderRadius050 || '4px'};
   transition: all 0.15s ease;
-  font-size: ${s(1)};
+  font-size: ${getFontSize(1)};
 
   &:hover {
-    background: ${e.primary?`${e.primary}10`:"rgba(69, 76, 191, 0.08)"};
-    color: ${e.primary||"#454cbf"};
+    background: ${tokens.primary
+    ? `${tokens.primary}10`
+    : 'rgba(69, 76, 191, 0.08)'};
+    color: ${tokens.primary || '#454cbf'};
   }
 
   &:focus-visible {
-    outline: 2px solid ${e.primary||"#454cbf"};
+    outline: 2px solid ${tokens.primary || '#454cbf'};
     outline-offset: -2px;
   }
 `;

package/lib/src/core-components/src/components/Breadcrumb/index.js

@@ -1 +1,3 @@
-"use strict";export*from"./Breadcrumb";export*from"./types";export{Text,CurrentPage}from"./elements";
+export * from './Breadcrumb';
+export * from './types';
+export { Text, CurrentPage } from './elements';

package/lib/src/core-components/src/components/Breadcrumb/types.js

@@ -1 +1,3 @@
-"use strict";export const BREADCRUMB_VARIANTS=["default","contained","pills"],BREADCRUMB_SIZES=["small","medium","large"],BREADCRUMB_SEPARATOR_TYPES=["chevron","slash","arrow","dot"];
+export const BREADCRUMB_VARIANTS = ['default', 'contained', 'pills'];
+export const BREADCRUMB_SIZES = ['small', 'medium', 'large'];
+export const BREADCRUMB_SEPARATOR_TYPES = ['chevron', 'slash', 'arrow', 'dot'];

package/lib/src/core-components/src/components/Button/button.component.js

@@ -1 +1,18 @@
-"use strict";import{jsx as s}from"react/jsx-runtime";import{forwardRef as f}from"react";import{Tooltip as h}from"../Tooltip";import t from"../../tc.module.css";import{cn as o}from"../../utils";export const Button=f(({variant:a="solid",tooltip:r,disabled:e=!1,type:i="button",className:l,classNames:p={},styles:d={},children:m,...u},b)=>{const c=a==="solid"?o(t["text-white"],t["bg-[#007BFF]"],t["hover:bg-[#007BFF]"],t["hover:shadow-lg"],t["text-white"]):o(t["dark:text-white"],t["text-black"],t.border,t["border-gray-400"],t["hover:shadow-lg"]),n=s("button",{ref:b,...u,className:o(t["rounded-100px"],t["px-3"],t["py-1"],t["text-md"],t["pt-2"],t["pb-2"],t["font-nunitoSansRegular"],e?t["opacity-50"]:t["opacity-100"],c,l,p.button),style:d.button,type:i,disabled:e,children:m});return r?s(h,{content:r,children:n}):n});Button.displayName="Button";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { Tooltip } from '../Tooltip';
+import s from '../../tc.module.css';
+import { cn } from '../../utils';
+export const Button = forwardRef(({ variant = 'solid', tooltip, disabled = false, type = 'button', className, classNames = {}, styles = {}, children, ...args }, ref) => {
+    const buttonColorClass = variant === 'solid'
+        ? cn(s['text-white'], s['bg-[#007BFF]'], s['hover:bg-[#007BFF]'], s['hover:shadow-lg'], s['text-white'])
+        : cn(s['dark:text-white'], s['text-black'], s['border'], s['border-gray-400'], s['hover:shadow-lg']);
+    const button = (_jsx("button", { ref: ref, ...args, className: cn(s['rounded-100px'], s['px-3'], s['py-1'], s['text-md'], s['pt-2'], s['pb-2'], s['font-nunitoSansRegular'], disabled ? s['opacity-50'] : s['opacity-100'], buttonColorClass, className, classNames.button), style: styles.button, type: type, disabled: disabled, children: children }));
+    if (tooltip) {
+        return _jsx(Tooltip, { content: tooltip, children: button });
+    }
+    else {
+        return button;
+    }
+});
+Button.displayName = 'Button';

package/lib/src/core-components/src/components/Button/buttonGroup/buttonGroup.component.js

@@ -1 +1,4 @@
-"use strict";import{jsx as l}from"react/jsx-runtime";import o from"../../../tc.module.css";import{cn as a}from"../../../utils";export const ButtonGroup=({children:r,orientation:t="horizontal",className:i,classNames:n={},styles:e={}})=>l("div",{className:a(o.flex,t=="horizontal"?o["flex-row"]:o["flex-col"],o["w-fit"],o["gap-2"],i,n.container),style:e.container,children:r});
+import { jsx as _jsx } from "react/jsx-runtime";
+import s from '../../../tc.module.css';
+import { cn } from '../../../utils';
+export const ButtonGroup = ({ children, orientation = 'horizontal', className, classNames = {}, styles = {}, }) => (_jsx("div", { className: cn(s.flex, orientation == 'horizontal' ? s['flex-row'] : s['flex-col'], s['w-fit'], s['gap-2'], className, classNames.container), style: styles.container, children: children }));

package/lib/src/core-components/src/components/Button/index.js

@@ -1 +1,2 @@
-"use strict";export*from"./button.component";export*from"./buttonGroup/buttonGroup.component";
+export * from './button.component';
+export * from './buttonGroup/buttonGroup.component';

package/lib/src/core-components/src/components/Button/types.js

@@ -1 +1 @@
-"use strict";export{};
+export {};

package/lib/src/core-components/src/components/Chip/Chip.js

@@ -1 +1,64 @@
-"use strict";"use client";import{jsx as e,jsxs as $}from"react/jsx-runtime";import{forwardRef as x,useCallback as k}from"react";import{ChipElement as D,ChipLabel as G,IconWrapper as p,AvatarWrapper as W,DeleteButton as g,ChipGroupElement as B}from"./elements";const L=()=>e("svg",{viewBox:"0 0 16 16",fill:"none",stroke:"currentColor",strokeWidth:"2",children:e("polyline",{points:"3 8 6 11 13 4"})}),v=()=>$("svg",{viewBox:"0 0 16 16",fill:"none",stroke:"currentColor",strokeWidth:"2",children:[e("line",{x1:"4",y1:"4",x2:"12",y2:"12"}),e("line",{x1:"12",y1:"4",x2:"4",y2:"12"})]});export const Chip=x(function(l,o){const{label:s,variant:c="soft",size:r="medium",color:a="default",chipType:t="button",selected:n=!1,disabled:i=!1,iconLeft:u,iconRight:f,deletable:z=!1,onDelete:h,onClick:C,avatar:b,className:w,...N}=l,R=k(d=>{i||C?.(d)},[i,C]),m=k(d=>{d.stopPropagation(),!i&&h?.()},[i,h]),I=()=>b?e(W,{$size:r,children:b}):u?e(p,{$size:r,$side:"left",children:u}):t==="selection"&&n?e(p,{$size:r,$side:"left",children:e(L,{})}):null,j=()=>t==="filter"&&n?e(g,{$size:r,onClick:m,role:"button","aria-label":"Remove filter",children:e(v,{})}):z?e(g,{$size:r,onClick:m,role:"button","aria-label":"Delete",children:e(v,{})}):f?e(p,{$size:r,$side:"right",children:f}):null;return $(D,{ref:o,$variant:c,$size:r,$color:a,$selected:n,$disabled:i,disabled:i,onClick:R,role:t==="selection"||t==="filter"?"checkbox":"button","aria-checked":t==="selection"||t==="filter"?n:void 0,"aria-pressed":t==="button"?n:void 0,"data-aui":"chip",className:w,type:"button",...N,children:[I(),e(G,{children:s}),j()]})});Chip.displayName="Chip";export const ChipGroup=x(function(l,o){const{children:s,gap:c="8px",wrap:r=!0,scrollable:a=!1,direction:t="row",className:n,...i}=l;return e(B,{ref:o,$gap:c,$wrap:r,$scrollable:a,$direction:t,"data-aui":"chip-group",className:n,role:"group",...i,children:s})});ChipGroup.displayName="ChipGroup";
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback } from 'react';
+import { ChipElement, ChipLabel, IconWrapper, AvatarWrapper, DeleteButton, ChipGroupElement, } from './elements';
+// Default icons
+const CheckIcon = () => (_jsx("svg", { viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("polyline", { points: "3 8 6 11 13 4" }) }));
+const CloseIcon = () => (_jsxs("svg", { viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("line", { x1: "4", y1: "4", x2: "12", y2: "12" }), _jsx("line", { x1: "12", y1: "4", x2: "4", y2: "12" })] }));
+export const Chip = forwardRef(function ChipComponent(props, ref) {
+    const { label, variant = 'soft', size = 'medium', color = 'default', chipType = 'button', selected = false, disabled = false, iconLeft, iconRight, deletable = false, onDelete, onClick, avatar, className, ...rest } = props;
+    const handleClick = useCallback((e) => {
+        if (disabled)
+            return;
+        onClick?.(e);
+    }, [disabled, onClick]);
+    const handleDelete = useCallback((e) => {
+        e.stopPropagation();
+        if (disabled)
+            return;
+        onDelete?.();
+    }, [disabled, onDelete]);
+    // Determine left icon based on chip type
+    const renderLeftIcon = () => {
+        if (avatar) {
+            return _jsx(AvatarWrapper, { "$size": size, children: avatar });
+        }
+        if (iconLeft) {
+            return (_jsx(IconWrapper, { "$size": size, "$side": "left", children: iconLeft }));
+        }
+        // Show checkmark for selection chips when selected
+        if (chipType === 'selection' && selected) {
+            return (_jsx(IconWrapper, { "$size": size, "$side": "left", children: _jsx(CheckIcon, {}) }));
+        }
+        return null;
+    };
+    // Determine right icon based on chip type
+    const renderRightIcon = () => {
+        // Filter chips show close icon when selected
+        if (chipType === 'filter' && selected) {
+            return (_jsx(DeleteButton, { "$size": size, onClick: handleDelete, role: "button", "aria-label": "Remove filter", children: _jsx(CloseIcon, {}) }));
+        }
+        // Deletable chips show close icon
+        if (deletable) {
+            return (_jsx(DeleteButton, { "$size": size, onClick: handleDelete, role: "button", "aria-label": "Delete", children: _jsx(CloseIcon, {}) }));
+        }
+        if (iconRight) {
+            return (_jsx(IconWrapper, { "$size": size, "$side": "right", children: iconRight }));
+        }
+        return null;
+    };
+    const getRole = () => {
+        if (chipType === 'selection')
+            return 'checkbox';
+        if (chipType === 'filter')
+            return 'checkbox';
+        return 'button';
+    };
+    return (_jsxs(ChipElement, { ref: ref, "$variant": variant, "$size": size, "$color": color, "$selected": selected, "$disabled": disabled, disabled: disabled, onClick: handleClick, role: getRole(), "aria-checked": chipType === 'selection' || chipType === 'filter' ? selected : undefined, "aria-pressed": chipType === 'button' ? selected : undefined, "data-aui": "chip", className: className, type: "button", ...rest, children: [renderLeftIcon(), _jsx(ChipLabel, { children: label }), renderRightIcon()] }));
+});
+Chip.displayName = 'Chip';
+export const ChipGroup = forwardRef(function ChipGroupComponent(props, ref) {
+    const { children, gap = '8px', wrap = true, scrollable = false, direction = 'row', className, ...rest } = props;
+    return (_jsx(ChipGroupElement, { ref: ref, "$gap": gap, "$wrap": wrap, "$scrollable": scrollable, "$direction": direction, "data-aui": "chip-group", className: className, role: "group", ...rest, children: children }));
+});
+ChipGroup.displayName = 'ChipGroup';