@danielcruzcode/ui-core 0.1.6 → 0.1.8

package/dist/index.js

@@ -0,0 +1,19 @@
+// Primitives
+export { Button } from './primitives/Button';
+export { Badge } from './primitives/Badge';
+export { Tag } from './primitives/Tag';
+export { Input } from './primitives/Input';
+export { Select } from './primitives/Select';
+export { Checkbox } from './primitives/Checkbox';
+// Composition
+export { Card } from './components/Card';
+export { Carousel } from './components/Carousel';
+// Commerce
+export { ProductCard } from './commerce/ProductCard';
+export { ProductShelf } from './commerce/ProductShelf';
+// Provider
+export { JumboProvider } from './JumboProvider';
+// Layout
+export { Stack } from './layout/Stack';
+export { Container } from './layout/Container';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,aAAa;AACb,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAG7C,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAG3C,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAGvC,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAG3C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAG7C,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAGjD,cAAc;AACd,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAGzC,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAGjD,WAAW;AACX,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAGrD,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAGvD,WAAW;AACX,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAGhD,SAAS;AACT,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAGvC,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/layout/Container/Container.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from '@emotion/styled';
+import { tokens } from '@danielcruzcode/design-tokens';
+const maxWidthMap = { sm: '640px', md: '768px', lg: '1024px', xl: '1280px', full: '100%' };
+const StyledContainer = styled.div `
+  width:100%;margin-inline:auto;padding-inline:${tokens.space.md};
+  max-width:${({ maxWidth }) => maxWidthMap[maxWidth]};
+  @media screen and (min-width:640px){padding-inline:${tokens.space.lg};}
+  @media screen and (min-width:1024px){padding-inline:${tokens.space.xl};}
+`;
+export function Container({ maxWidth = 'xl', children, as, className }) {
+    return _jsx(StyledContainer, { as: as, maxWidth: maxWidth, className: className, children: children });
+}
+//# sourceMappingURL=Container.js.map

package/dist/layout/Container/Container.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Container.js","sourceRoot":"","sources":["../../../src/layout/Container/Container.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAA;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,+BAA+B,CAAA;AAUtD,MAAM,WAAW,GAAG,EAAE,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,CAAA;AAE1F,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAuD;iDACxC,MAAM,CAAC,KAAK,CAAC,EAAE;cAClD,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,WAAW,CAAC,QAAQ,CAAC;uDACE,MAAM,CAAC,KAAK,CAAC,EAAE;wDACd,MAAM,CAAC,KAAK,CAAC,EAAE;CACtE,CAAA;AAED,MAAM,UAAU,SAAS,CAAC,EAAE,QAAQ,GAAG,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,SAAS,EAAkB;IACpF,OAAO,KAAC,eAAe,IAAC,EAAE,EAAE,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,YAAG,QAAQ,GAAmB,CAAA;AACxG,CAAC"}

package/dist/layout/Stack/Stack.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from '@emotion/styled';
+import { tokens } from '@danielcruzcode/design-tokens';
+const alignMap = { start: 'flex-start', center: 'center', end: 'flex-end', stretch: 'stretch' };
+const StyledStack = styled.div `
+  display:flex;flex-direction:column;
+  align-items:${({ align }) => alignMap[align]};
+  gap:${({ gap }) => (gap ? tokens.space[gap] : '0')};
+`;
+export function Stack({ gap, align = 'stretch', children, as, className }) {
+    return _jsx(StyledStack, { as: as, gap: gap, align: align, className: className, children: children });
+}
+//# sourceMappingURL=Stack.js.map

package/dist/layout/Stack/Stack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stack.js","sourceRoot":"","sources":["../../../src/layout/Stack/Stack.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAA;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,+BAA+B,CAAA;AAWtD,MAAM,QAAQ,GAAG,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,EAAE,UAAU,EAAE,OAAO,EAAE,SAAS,EAAE,CAAA;AAE/F,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAsE;;gBAEpF,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC;QACtC,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;CACnD,CAAA;AAED,MAAM,UAAU,KAAK,CAAC,EAAE,GAAG,EAAE,KAAK,GAAG,SAAS,EAAE,QAAQ,EAAE,EAAE,EAAE,SAAS,EAAc;IACnF,OAAO,KAAC,WAAW,IAAC,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,YAAG,QAAQ,GAAe,CAAA;AACpG,CAAC"}

package/dist/primitives/Badge/Badge.d.ts

@@ -1,8 +1,9 @@
-import { default as React } from 'react';
+import type React from 'react';
 export interface BadgeProps {
     variant?: 'brand' | 'success' | 'warning' | 'danger' | 'neutral';
     size?: 'sm' | 'md';
     children: React.ReactNode;
+    visible?: boolean;
 }
-export declare function Badge({ variant, size, children }: BadgeProps): import("react/jsx-runtime").JSX.Element;
+export declare function Badge({ variant, size, children, visible }: BadgeProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Badge.d.ts.map

package/dist/primitives/Badge/Badge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../src/primitives/Badge/Badge.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,MAAM,WAAW,UAAU;IACzB,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAA;IAChE,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AA4BD,wBAAgB,KAAK,CAAC,EAAE,OAAmB,EAAE,IAAW,EAAE,QAAQ,EAAE,EAAE,UAAU,2CAE/E"}
+{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../src/primitives/Badge/Badge.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,UAAU;IACzB,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAC;IACjE,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAgCD,wBAAgB,KAAK,CAAC,EAAE,OAAmB,EAAE,IAAW,EAAE,QAAQ,EAAE,OAAc,EAAE,EAAE,UAAU,2CAU/F"}

package/dist/primitives/Badge/Badge.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { tokens } from '@danielcruzcode/design-tokens';
+import styled from '@emotion/styled';
+const variantStyles = {
+    brand: `background-color: ${tokens.color.brandSubtle}; color: ${tokens.color.brand};`,
+    success: `background-color: ${tokens.color.successSubtle}; color: ${tokens.color.success};`,
+    warning: `background-color: ${tokens.color.warningSubtle}; color: ${tokens.color.warning};`,
+    danger: `background-color: ${tokens.color.dangerSubtle}; color: ${tokens.color.danger};`,
+    neutral: `background-color: ${tokens.color.surface}; color: ${tokens.color.textMuted};`,
+};
+const sizeStyles = {
+    sm: `font-size: 11px; padding: 2px 6px;`,
+    md: `font-size: 13px; padding: 4px ${tokens.space.sm};`,
+};
+const StyledBadge = styled.span `
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: ${tokens.radius.full};
+  font-family: ${tokens.font.body};
+  font-weight: 600;
+  line-height: 1;
+  white-space: nowrap;
+  width: fit-content;
+  ${({ variant }) => variantStyles[variant]}
+  ${({ size }) => sizeStyles[size]}
+`;
+export function Badge({ variant = 'neutral', size = 'md', children, visible = true }) {
+    return (_jsx(StyledBadge, { variant: variant, size: size, style: { visibility: visible ? 'visible' : 'hidden' }, children: children }));
+}
+//# sourceMappingURL=Badge.js.map

package/dist/primitives/Badge/Badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../../src/primitives/Badge/Badge.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,+BAA+B,CAAC;AACvD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAUrC,MAAM,aAAa,GAAG;IACpB,KAAK,EAAE,qBAAqB,MAAM,CAAC,KAAK,CAAC,WAAW,YAAY,MAAM,CAAC,KAAK,CAAC,KAAK,GAAG;IACrF,OAAO,EAAE,qBAAqB,MAAM,CAAC,KAAK,CAAC,aAAa,YAAY,MAAM,CAAC,KAAK,CAAC,OAAO,GAAG;IAC3F,OAAO,EAAE,qBAAqB,MAAM,CAAC,KAAK,CAAC,aAAa,YAAY,MAAM,CAAC,KAAK,CAAC,OAAO,GAAG;IAC3F,MAAM,EAAE,qBAAqB,MAAM,CAAC,KAAK,CAAC,YAAY,YAAY,MAAM,CAAC,KAAK,CAAC,MAAM,GAAG;IACxF,OAAO,EAAE,qBAAqB,MAAM,CAAC,KAAK,CAAC,OAAO,YAAY,MAAM,CAAC,KAAK,CAAC,SAAS,GAAG;CACxF,CAAC;AAEF,MAAM,UAAU,GAAG;IACjB,EAAE,EAAE,oCAAoC;IACxC,EAAE,EAAE,iCAAiC,MAAM,CAAC,KAAK,CAAC,EAAE,GAAG;CACxD,CAAC;AAEF,MAAM,WAAW,GAAG,MAAM,CAAC,IAAI,CAG7B;;;;mBAIiB,MAAM,CAAC,MAAM,CAAC,IAAI;iBACpB,MAAM,CAAC,IAAI,CAAC,IAAI;;;;;IAK7B,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,aAAa,CAAC,OAAO,CAAC;IACvC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC;CACjC,CAAC;AAEF,MAAM,UAAU,KAAK,CAAC,EAAE,OAAO,GAAG,SAAS,EAAE,IAAI,GAAG,IAAI,EAAE,QAAQ,EAAE,OAAO,GAAG,IAAI,EAAc;IAC9F,OAAO,CACL,KAAC,WAAW,IACV,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,EAAE,UAAU,EAAE,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,EAAE,YAEpD,QAAQ,GACG,CACf,CAAC;AACJ,CAAC"}

package/dist/primitives/Badge/index.js

@@ -0,0 +1,2 @@
+export { Badge } from './Badge';
+//# sourceMappingURL=index.js.map

package/dist/primitives/Badge/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/primitives/Badge/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC"}

package/dist/primitives/Button/Button.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from '@emotion/styled';
+import { tokens } from '@danielcruzcode/design-tokens';
+const variantStyles = {
+    primary: `background-color:${tokens.color.brand};color:#fff;border:none;&:hover:not(:disabled){background-color:${tokens.color.brandHover};}&:active:not(:disabled){background-color:${tokens.color.brandHover};box-shadow:${tokens.shadow.sm};}`,
+    secondary: `background-color:transparent;color:${tokens.color.brand};border:1.5px solid ${tokens.color.brand};&:hover:not(:disabled){background-color:${tokens.color.brandSubtle};}`,
+    ghost: `background-color:transparent;color:${tokens.color.text};border:none;&:hover:not(:disabled){background-color:${tokens.color.surface};}`,
+    danger: `background-color:${tokens.color.danger};color:#fff;border:none;&:hover:not(:disabled){opacity:0.9;}`,
+};
+const sizeStyles = {
+    sm: `height:32px;padding-inline:${tokens.space.sm};font-size:13px;`,
+    md: `height:40px;padding-inline:${tokens.space.md};font-size:15px;`,
+    lg: `height:48px;padding-inline:${tokens.space.lg};font-size:17px;`,
+};
+const StyledButton = styled.button `
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: ${tokens.space.sm};
+  border-radius: ${tokens.radius.md};
+  font-family: ${tokens.font.body};
+  font-weight: 600;
+  cursor: pointer;
+  transition: background-color ${tokens.transition.fast}, opacity ${tokens.transition.fast}, box-shadow ${tokens.transition.fast};
+  text-decoration: none;
+  white-space: nowrap;
+  position: relative;
+  width: ${({ fullWidth }) => (fullWidth ? '100%' : 'auto')};
+  &:disabled { cursor: not-allowed; opacity: 0.5; }
+  &:focus-visible { outline: 2px solid ${tokens.color.borderFocus}; outline-offset: 2px; }
+  ${({ variant }) => variantStyles[variant]}
+  ${({ size }) => sizeStyles[size]}
+`;
+export function Button({ variant = 'primary', size = 'md', fullWidth = false, loading = false, disabled = false, leftIcon, rightIcon, onClick, children, type = 'button', className }) {
+    return (_jsx(StyledButton, { type: type, variant: variant, size: size, fullWidth: fullWidth, disabled: disabled || loading, onClick: onClick, "aria-busy": loading, className: className, children: loading ? (_jsx("output", { "aria-label": "Cargando", style: { display: 'inline-flex', alignItems: 'center' }, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", style: { animation: 'spin 0.75s linear infinite' }, "aria-hidden": "true", children: _jsx("path", { d: "M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83" }) }) })) : (_jsxs(_Fragment, { children: [leftIcon && _jsx("span", { "aria-hidden": "true", children: leftIcon }), children, rightIcon && _jsx("span", { "aria-hidden": "true", children: rightIcon })] })) }));
+}
+//# sourceMappingURL=Button.js.map

package/dist/primitives/Button/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/primitives/Button/Button.tsx"],"names":[],"mappings":"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"}

package/dist/primitives/Checkbox/Checkbox.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from '@emotion/styled';
+import { tokens } from '@danielcruzcode/design-tokens';
+import { useEffect, useId, useRef } from 'react';
+const Wrapper = styled.label `
+  display: inline-flex; align-items: center; gap: ${tokens.space.sm};
+  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
+  opacity: ${({ disabled }) => (disabled ? 0.5 : 1)};
+  font-family: ${tokens.font.body}; user-select: none;
+`;
+const HiddenInput = styled.input `position:absolute;opacity:0;width:0;height:0;margin:0;`;
+const Box = styled.span `
+  width: 18px; height: 18px; border-radius: ${tokens.radius.sm};
+  border: 1.5px solid ${({ active }) => (active ? tokens.color.brand : tokens.color.border)};
+  background-color: ${({ active }) => (active ? tokens.color.brand : tokens.color.background)};
+  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
+  transition: background-color ${tokens.transition.fast}, border-color ${tokens.transition.fast};
+`;
+const LabelText = styled.span `font-size: 15px; color: ${tokens.color.text};`;
+export function Checkbox({ checked = false, onChange, label, disabled = false, indeterminate = false, name, id: idProp }) {
+    const generatedId = useId();
+    const id = idProp ?? generatedId;
+    const inputRef = useRef(null);
+    useEffect(() => { if (inputRef.current)
+        inputRef.current.indeterminate = indeterminate; }, [indeterminate]);
+    return (_jsxs(Wrapper, { htmlFor: id, disabled: disabled, children: [_jsx(HiddenInput, { ref: inputRef, id: id, name: name, type: "checkbox", checked: checked, disabled: disabled, onChange: (e) => onChange?.(e.target.checked), "aria-checked": indeterminate ? 'mixed' : checked }), _jsxs(Box, { active: checked || indeterminate, "aria-hidden": "true", children: [indeterminate && _jsx("svg", { width: "10", height: "2", viewBox: "0 0 10 2", fill: "none", children: _jsx("path", { d: "M1 1h8", stroke: "white", strokeWidth: "2", strokeLinecap: "round" }) }), checked && !indeterminate && _jsx("svg", { width: "10", height: "8", viewBox: "0 0 10 8", fill: "none", children: _jsx("path", { d: "M1 4l3 3 5-6", stroke: "white", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) })] }), label && _jsx(LabelText, { children: label })] }));
+}
+//# sourceMappingURL=Checkbox.js.map

package/dist/primitives/Checkbox/Checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../src/primitives/Checkbox/Checkbox.tsx"],"names":[],"mappings":"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"}

package/dist/primitives/Input/Input.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from '@emotion/styled';
+import { tokens } from '@danielcruzcode/design-tokens';
+import { useId } from 'react';
+const Wrapper = styled.div `display:flex;flex-direction:column;gap:4px;font-family:${tokens.font.body};`;
+const Label = styled.label `font-size:13px;font-weight:500;color:${tokens.color.text};`;
+const RequiredMark = styled.span `color:${tokens.color.danger};margin-left:2px;`;
+const InputWrapper = styled.div `
+  display:flex;align-items:center;gap:${tokens.space.sm};
+  border-radius:${tokens.radius.md};
+  border:1.5px solid ${({ hasError }) => (hasError ? tokens.color.danger : tokens.color.border)};
+  background-color:${({ disabled }) => (disabled ? tokens.color.surface : tokens.color.background)};
+  padding-inline:${tokens.space.sm};opacity:${({ disabled }) => (disabled ? 0.6 : 1)};
+  cursor:${({ disabled }) => (disabled ? 'not-allowed' : 'auto')};
+  transition:border-color ${tokens.transition.fast};
+  &:focus-within {
+    border-color:${({ hasError }) => (hasError ? tokens.color.danger : tokens.color.borderFocus)};
+    box-shadow:0 0 0 3px ${({ hasError }) => (hasError ? tokens.color.dangerSubtle : tokens.color.brandSubtle)};
+  }
+`;
+const StyledInput = styled.input `
+  flex:1;border:none;outline:none;background:transparent;
+  font-family:${tokens.font.body};font-size:15px;color:${tokens.color.text};height:40px;
+  &::placeholder{color:${tokens.color.textMuted};}&:disabled{cursor:not-allowed;}
+`;
+const IconSlot = styled.span `display:flex;align-items:center;color:${tokens.color.textMuted};flex-shrink:0;`;
+const Hint = styled.span `font-size:12px;color:${tokens.color.textMuted};`;
+const ErrorText = styled.span `font-size:12px;color:${tokens.color.danger};`;
+export function Input({ label, placeholder, value, onChange, type = 'text', error, hint, disabled = false, required = false, leftIcon, rightIcon, name, id: idProp }) {
+    const generatedId = useId();
+    const id = idProp ?? generatedId;
+    const errorId = error ? `${id}-error` : undefined;
+    const hintId = hint ? `${id}-hint` : undefined;
+    return (_jsxs(Wrapper, { children: [label && _jsxs(Label, { htmlFor: id, children: [label, required && _jsx(RequiredMark, { "aria-hidden": "true", children: " *" })] }), _jsxs(InputWrapper, { hasError: Boolean(error), disabled: disabled, children: [leftIcon && _jsx(IconSlot, { "aria-hidden": "true", children: leftIcon }), _jsx(StyledInput, { id: id, name: name, type: type, placeholder: placeholder, value: value, onChange: (e) => onChange?.(e.target.value), disabled: disabled, required: required, "aria-invalid": error ? true : undefined, "aria-describedby": [errorId, hintId].filter(Boolean).join(' ') || undefined }), rightIcon && _jsx(IconSlot, { "aria-hidden": "true", children: rightIcon })] }), error && _jsx(ErrorText, { id: errorId, role: "alert", children: error }), hint && !error && _jsx(Hint, { id: hintId, children: hint })] }));
+}
+//# sourceMappingURL=Input.js.map

package/dist/primitives/Input/Input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../src/primitives/Input/Input.tsx"],"names":[],"mappings":"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"}

package/dist/primitives/Select/Select.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from '@emotion/styled';
+import { tokens } from '@danielcruzcode/design-tokens';
+import { useId } from 'react';
+const Wrapper = styled.div `display:flex;flex-direction:column;gap:4px;font-family:${tokens.font.body};`;
+const Label = styled.label `font-size:13px;font-weight:500;color:${tokens.color.text};`;
+const SelectWrapper = styled.div `position:relative;display:flex;align-items:center;`;
+const StyledSelect = styled.select `
+  width:100%;height:40px;padding-inline-start:${tokens.space.sm};padding-inline-end:36px;
+  border-radius:${tokens.radius.md};border:1.5px solid ${({ hasError }) => (hasError ? tokens.color.danger : tokens.color.border)};
+  background-color:${tokens.color.background};font-family:${tokens.font.body};font-size:15px;
+  color:${tokens.color.text};appearance:none;cursor:pointer;transition:border-color ${tokens.transition.fast};
+  &:focus{outline:none;border-color:${({ hasError }) => (hasError ? tokens.color.danger : tokens.color.borderFocus)};box-shadow:0 0 0 3px ${({ hasError }) => (hasError ? tokens.color.dangerSubtle : tokens.color.brandSubtle)};}
+  &:disabled{background-color:${tokens.color.surface};cursor:not-allowed;opacity:0.6;}
+`;
+const Chevron = styled.span `position:absolute;right:${tokens.space.sm};pointer-events:none;color:${tokens.color.textMuted};display:flex;align-items:center;`;
+const ErrorText = styled.span `font-size:12px;color:${tokens.color.danger};`;
+export function Select({ options, value, onChange, label, placeholder, error, disabled = false, name, id: idProp }) {
+    const generatedId = useId();
+    const id = idProp ?? generatedId;
+    const errorId = error ? `${id}-error` : undefined;
+    return (_jsxs(Wrapper, { children: [label && _jsx(Label, { htmlFor: id, children: label }), _jsxs(SelectWrapper, { children: [_jsxs(StyledSelect, { id: id, name: name, hasError: Boolean(error), value: value, onChange: (e) => onChange?.(e.target.value), disabled: disabled, "aria-invalid": error ? true : undefined, "aria-describedby": errorId, children: [placeholder && _jsx("option", { value: "", disabled: true, children: placeholder }), options.map((opt) => _jsx("option", { value: opt.value, disabled: opt.disabled, children: opt.label }, opt.value))] }), _jsx(Chevron, { "aria-hidden": "true", children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: _jsx("path", { d: "M4 6l4 4 4-4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) })] }), error && _jsx(ErrorText, { id: errorId, role: "alert", children: error })] }));
+}
+//# sourceMappingURL=Select.js.map

package/dist/primitives/Select/Select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../src/primitives/Select/Select.tsx"],"names":[],"mappings":"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"}

package/dist/primitives/Tag/Tag.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from '@emotion/styled';
+import { tokens } from '@danielcruzcode/design-tokens';
+const variantStyles = {
+    default: `background-color:${tokens.color.surface};color:${tokens.color.text};border:1px solid ${tokens.color.border};`,
+    brand: `background-color:${tokens.color.brandSubtle};color:${tokens.color.brand};border:1px solid ${tokens.color.brand};`,
+};
+const StyledTag = styled.span `
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  border-radius: ${tokens.radius.full};
+  font-family: ${tokens.font.body};
+  font-size: 13px;
+  font-weight: 500;
+  padding: 4px ${tokens.space.sm};
+  ${({ variant }) => variantStyles[variant]}
+`;
+const RemoveBtn = styled.button `
+  display: inline-flex; align-items: center; justify-content: center;
+  background: none; border: none; padding: 0; cursor: pointer;
+  color: inherit; opacity: 0.7; border-radius: ${tokens.radius.full};
+  &:hover { opacity: 1; }
+  &:focus-visible { outline: 2px solid ${tokens.color.borderFocus}; outline-offset: 1px; }
+`;
+export function Tag({ label, onRemove, variant = 'default' }) {
+    return (_jsxs(StyledTag, { variant: variant, children: [label, onRemove && (_jsx(RemoveBtn, { type: "button", onClick: onRemove, "aria-label": `Eliminar ${label}`, children: _jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M9 3L3 9M3 3l6 6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }) }))] }));
+}
+//# sourceMappingURL=Tag.js.map

package/dist/primitives/Tag/Tag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tag.js","sourceRoot":"","sources":["../../../src/primitives/Tag/Tag.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAA;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,+BAA+B,CAAA;AAQtD,MAAM,aAAa,GAAG;IACpB,OAAO,EAAE,oBAAoB,MAAM,CAAC,KAAK,CAAC,OAAO,UAAU,MAAM,CAAC,KAAK,CAAC,IAAI,qBAAqB,MAAM,CAAC,KAAK,CAAC,MAAM,GAAG;IACvH,KAAK,EAAE,oBAAoB,MAAM,CAAC,KAAK,CAAC,WAAW,UAAU,MAAM,CAAC,KAAK,CAAC,KAAK,qBAAqB,MAAM,CAAC,KAAK,CAAC,KAAK,GAAG;CAC1H,CAAA;AAED,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAA+C;;;;mBAIzD,MAAM,CAAC,MAAM,CAAC,IAAI;iBACpB,MAAM,CAAC,IAAI,CAAC,IAAI;;;iBAGhB,MAAM,CAAC,KAAK,CAAC,EAAE;IAC5B,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,aAAa,CAAC,OAAO,CAAC;CAC1C,CAAA;AAED,MAAM,SAAS,GAAG,MAAM,CAAC,MAAM,CAAA;;;iDAGkB,MAAM,CAAC,MAAM,CAAC,IAAI;;yCAE1B,MAAM,CAAC,KAAK,CAAC,WAAW;CAChE,CAAA;AAED,MAAM,UAAU,GAAG,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAO,GAAG,SAAS,EAAY;IACpE,OAAO,CACL,MAAC,SAAS,IAAC,OAAO,EAAE,OAAO,aACxB,KAAK,EACL,QAAQ,IAAI,CACX,KAAC,SAAS,IAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,QAAQ,gBAAc,YAAY,KAAK,EAAE,YACzE,cAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,iBAAa,MAAM,YAC5E,eAAM,CAAC,EAAC,kBAAkB,EAAC,MAAM,EAAC,cAAc,EAAC,WAAW,EAAC,KAAK,EAAC,aAAa,EAAC,OAAO,GAAG,GACvF,GACI,CACb,IACS,CACb,CAAA;AACH,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danielcruzcode/ui-core",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "publishConfig": {
     "access": "public"
   },
@@ -32,6 +32,7 @@
   },
   "dependencies": {
     "@danielcruzcode/design-tokens": "^0.1.0",
+    "@emotion/cache": "^11.14.0",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
     "embla-carousel-react": "^8.6.0"