@danielcruzcode/ui-core 0.1.5 → 0.1.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/JumboProvider/JumboProvider.d.ts +6 -0
- package/dist/JumboProvider/JumboProvider.d.ts.map +1 -0
- package/dist/JumboProvider/JumboProvider.js +37 -0
- package/dist/JumboProvider/JumboProvider.js.map +1 -0
- package/dist/JumboProvider/index.d.ts +3 -0
- package/dist/JumboProvider/index.d.ts.map +1 -0
- package/dist/JumboProvider/index.js +2 -0
- package/dist/JumboProvider/index.js.map +1 -0
- package/dist/commerce/ProductCard/ProductCard.d.ts +4 -5
- package/dist/commerce/ProductCard/ProductCard.d.ts.map +1 -1
- package/dist/commerce/ProductCard/ProductCard.js +42 -0
- package/dist/commerce/ProductCard/ProductCard.js.map +1 -0
- package/dist/commerce/ProductCard/ProductCard.styles.d.ts +106 -0
- package/dist/commerce/ProductCard/ProductCard.styles.d.ts.map +1 -0
- package/dist/commerce/ProductCard/ProductCard.styles.js +212 -0
- package/dist/commerce/ProductCard/ProductCard.styles.js.map +1 -0
- package/dist/commerce/ProductCard/index.js +2 -0
- package/dist/commerce/ProductCard/index.js.map +1 -0
- package/dist/commerce/ProductShelf/ProductShelf.d.ts +6 -3
- package/dist/commerce/ProductShelf/ProductShelf.d.ts.map +1 -1
- package/dist/commerce/ProductShelf/ProductShelf.js +20 -0
- package/dist/commerce/ProductShelf/ProductShelf.js.map +1 -0
- package/dist/commerce/ProductShelf/index.js +2 -0
- package/dist/commerce/ProductShelf/index.js.map +1 -0
- package/dist/components/Card/Card.d.ts +1 -1
- package/dist/components/Card/Card.d.ts.map +1 -1
- package/dist/components/Card/Card.js +33 -0
- package/dist/components/Card/Card.js.map +1 -0
- package/dist/components/Carousel/Carousel.d.ts +8 -3
- package/dist/components/Carousel/Carousel.d.ts.map +1 -1
- package/dist/components/Carousel/Carousel.js +102 -0
- package/dist/components/Carousel/Carousel.js.map +1 -0
- package/dist/components/Carousel/index.js +2 -0
- package/dist/components/Carousel/index.js.map +1 -0
- package/dist/index.cjs.js +1 -1
- package/dist/index.cjs10.js +1 -1
- package/dist/index.cjs11.js +1 -1
- package/dist/index.cjs12.js +1 -5
- package/dist/index.cjs13.js +1 -6
- package/dist/index.cjs14.js +1 -1
- package/dist/index.cjs15.js +1 -1
- package/dist/index.cjs16.js +1 -1
- package/dist/index.cjs17.js +26 -1
- package/dist/index.cjs18.js +1 -1
- package/dist/index.cjs19.js +1 -0
- package/dist/index.cjs2.js +1 -19
- package/dist/index.cjs20.js +1 -0
- package/dist/index.cjs21.js +1 -0
- package/dist/index.cjs22.js +1 -0
- package/dist/index.cjs23.js +1 -0
- package/dist/index.cjs24.js +1 -0
- package/dist/index.cjs25.js +1 -0
- package/dist/index.cjs26.js +1 -0
- package/dist/index.cjs27.js +1 -0
- package/dist/index.cjs28.js +1 -0
- package/dist/index.cjs29.js +1 -0
- package/dist/index.cjs3.js +1 -12
- package/dist/index.cjs4.js +1 -17
- package/dist/index.cjs5.js +1 -17
- package/dist/index.cjs6.js +1 -8
- package/dist/index.cjs7.js +1 -12
- package/dist/index.cjs8.js +1 -8
- package/dist/index.cjs9.js +1 -18
- package/dist/index.d.ts +2 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.esm.js +18 -16
- package/dist/index.esm10.js +101 -61
- package/dist/index.esm11.js +57 -24
- package/dist/index.esm12.js +11 -11
- package/dist/index.esm13.js +27 -12
- package/dist/index.esm14.js +26 -45
- package/dist/index.esm15.js +75 -22
- package/dist/index.esm16.js +45 -33
- package/dist/index.esm17.js +167 -1202
- package/dist/index.esm18.js +22 -50
- package/dist/index.esm19.js +12 -0
- package/dist/index.esm2.js +47 -37
- package/dist/index.esm20.js +130 -0
- package/dist/index.esm21.js +7 -0
- package/dist/index.esm22.js +34 -0
- package/dist/index.esm23.js +10 -0
- package/dist/index.esm24.js +22 -0
- package/dist/index.esm25.js +53 -0
- package/dist/index.esm26.js +9 -0
- package/dist/index.esm27.js +52 -0
- package/dist/index.esm28.js +35 -0
- package/dist/index.esm29.js +1204 -0
- package/dist/index.esm3.js +31 -26
- package/dist/index.esm4.js +27 -27
- package/dist/index.esm5.js +84 -34
- package/dist/index.esm6.js +72 -23
- package/dist/index.esm7.js +62 -27
- package/dist/index.esm8.js +68 -34
- package/dist/index.esm9.js +114 -68
- package/dist/index.js +19 -0
- package/dist/index.js.map +1 -0
- package/dist/layout/Container/Container.js +14 -0
- package/dist/layout/Container/Container.js.map +1 -0
- package/dist/layout/Stack/Stack.js +13 -0
- package/dist/layout/Stack/Stack.js.map +1 -0
- package/dist/primitives/Badge/Badge.d.ts +3 -2
- package/dist/primitives/Badge/Badge.d.ts.map +1 -1
- package/dist/primitives/Badge/Badge.js +31 -0
- package/dist/primitives/Badge/Badge.js.map +1 -0
- package/dist/primitives/Badge/index.js +2 -0
- package/dist/primitives/Badge/index.js.map +1 -0
- package/dist/primitives/Button/Button.js +37 -0
- package/dist/primitives/Button/Button.js.map +1 -0
- package/dist/primitives/Checkbox/Checkbox.js +28 -0
- package/dist/primitives/Checkbox/Checkbox.js.map +1 -0
- package/dist/primitives/Input/Input.js +36 -0
- package/dist/primitives/Input/Input.js.map +1 -0
- package/dist/primitives/Select/Select.js +24 -0
- package/dist/primitives/Select/Select.js.map +1 -0
- package/dist/primitives/Tag/Tag.js +29 -0
- package/dist/primitives/Tag/Tag.js.map +1 -0
- package/package.json +1 -1
|
@@ -0,0 +1 @@
|
|
|
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"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import styled from '@emotion/styled';
|
|
3
|
+
import { tokens } from '@danielcruzcode/design-tokens';
|
|
4
|
+
const maxWidthMap = { sm: '640px', md: '768px', lg: '1024px', xl: '1280px', full: '100%' };
|
|
5
|
+
const StyledContainer = styled.div `
|
|
6
|
+
width:100%;margin-inline:auto;padding-inline:${tokens.space.md};
|
|
7
|
+
max-width:${({ maxWidth }) => maxWidthMap[maxWidth]};
|
|
8
|
+
@media screen and (min-width:640px){padding-inline:${tokens.space.lg};}
|
|
9
|
+
@media screen and (min-width:1024px){padding-inline:${tokens.space.xl};}
|
|
10
|
+
`;
|
|
11
|
+
export function Container({ maxWidth = 'xl', children, as, className }) {
|
|
12
|
+
return _jsx(StyledContainer, { as: as, maxWidth: maxWidth, className: className, children: children });
|
|
13
|
+
}
|
|
14
|
+
//# sourceMappingURL=Container.js.map
|
|
@@ -0,0 +1 @@
|
|
|
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"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import styled from '@emotion/styled';
|
|
3
|
+
import { tokens } from '@danielcruzcode/design-tokens';
|
|
4
|
+
const alignMap = { start: 'flex-start', center: 'center', end: 'flex-end', stretch: 'stretch' };
|
|
5
|
+
const StyledStack = styled.div `
|
|
6
|
+
display:flex;flex-direction:column;
|
|
7
|
+
align-items:${({ align }) => alignMap[align]};
|
|
8
|
+
gap:${({ gap }) => (gap ? tokens.space[gap] : '0')};
|
|
9
|
+
`;
|
|
10
|
+
export function Stack({ gap, align = 'stretch', children, as, className }) {
|
|
11
|
+
return _jsx(StyledStack, { as: as, gap: gap, align: align, className: className, children: children });
|
|
12
|
+
}
|
|
13
|
+
//# sourceMappingURL=Stack.js.map
|
|
@@ -0,0 +1 @@
|
|
|
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"}
|
|
@@ -1,8 +1,9 @@
|
|
|
1
|
-
import
|
|
1
|
+
import type React from 'react';
|
|
2
2
|
export interface BadgeProps {
|
|
3
3
|
variant?: 'brand' | 'success' | 'warning' | 'danger' | 'neutral';
|
|
4
4
|
size?: 'sm' | 'md';
|
|
5
5
|
children: React.ReactNode;
|
|
6
|
+
visible?: boolean;
|
|
6
7
|
}
|
|
7
|
-
export declare function Badge({ variant, size, children }: BadgeProps): import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
export declare function Badge({ variant, size, children, visible }: BadgeProps): import("react/jsx-runtime").JSX.Element;
|
|
8
9
|
//# sourceMappingURL=Badge.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../src/primitives/Badge/Badge.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,
|
|
1
|
+
{"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"}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { tokens } from '@danielcruzcode/design-tokens';
|
|
3
|
+
import styled from '@emotion/styled';
|
|
4
|
+
const variantStyles = {
|
|
5
|
+
brand: `background-color: ${tokens.color.brandSubtle}; color: ${tokens.color.brand};`,
|
|
6
|
+
success: `background-color: ${tokens.color.successSubtle}; color: ${tokens.color.success};`,
|
|
7
|
+
warning: `background-color: ${tokens.color.warningSubtle}; color: ${tokens.color.warning};`,
|
|
8
|
+
danger: `background-color: ${tokens.color.dangerSubtle}; color: ${tokens.color.danger};`,
|
|
9
|
+
neutral: `background-color: ${tokens.color.surface}; color: ${tokens.color.textMuted};`,
|
|
10
|
+
};
|
|
11
|
+
const sizeStyles = {
|
|
12
|
+
sm: `font-size: 11px; padding: 2px 6px;`,
|
|
13
|
+
md: `font-size: 13px; padding: 4px ${tokens.space.sm};`,
|
|
14
|
+
};
|
|
15
|
+
const StyledBadge = styled.span `
|
|
16
|
+
display: inline-flex;
|
|
17
|
+
align-items: center;
|
|
18
|
+
justify-content: center;
|
|
19
|
+
border-radius: ${tokens.radius.full};
|
|
20
|
+
font-family: ${tokens.font.body};
|
|
21
|
+
font-weight: 600;
|
|
22
|
+
line-height: 1;
|
|
23
|
+
white-space: nowrap;
|
|
24
|
+
width: fit-content;
|
|
25
|
+
${({ variant }) => variantStyles[variant]}
|
|
26
|
+
${({ size }) => sizeStyles[size]}
|
|
27
|
+
`;
|
|
28
|
+
export function Badge({ variant = 'neutral', size = 'md', children, visible = true }) {
|
|
29
|
+
return (_jsx(StyledBadge, { variant: variant, size: size, style: { visibility: visible ? 'visible' : 'hidden' }, children: children }));
|
|
30
|
+
}
|
|
31
|
+
//# sourceMappingURL=Badge.js.map
|
|
@@ -0,0 +1 @@
|
|
|
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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/primitives/Badge/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC"}
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import styled from '@emotion/styled';
|
|
3
|
+
import { tokens } from '@danielcruzcode/design-tokens';
|
|
4
|
+
const variantStyles = {
|
|
5
|
+
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};}`,
|
|
6
|
+
secondary: `background-color:transparent;color:${tokens.color.brand};border:1.5px solid ${tokens.color.brand};&:hover:not(:disabled){background-color:${tokens.color.brandSubtle};}`,
|
|
7
|
+
ghost: `background-color:transparent;color:${tokens.color.text};border:none;&:hover:not(:disabled){background-color:${tokens.color.surface};}`,
|
|
8
|
+
danger: `background-color:${tokens.color.danger};color:#fff;border:none;&:hover:not(:disabled){opacity:0.9;}`,
|
|
9
|
+
};
|
|
10
|
+
const sizeStyles = {
|
|
11
|
+
sm: `height:32px;padding-inline:${tokens.space.sm};font-size:13px;`,
|
|
12
|
+
md: `height:40px;padding-inline:${tokens.space.md};font-size:15px;`,
|
|
13
|
+
lg: `height:48px;padding-inline:${tokens.space.lg};font-size:17px;`,
|
|
14
|
+
};
|
|
15
|
+
const StyledButton = styled.button `
|
|
16
|
+
display: inline-flex;
|
|
17
|
+
align-items: center;
|
|
18
|
+
justify-content: center;
|
|
19
|
+
gap: ${tokens.space.sm};
|
|
20
|
+
border-radius: ${tokens.radius.md};
|
|
21
|
+
font-family: ${tokens.font.body};
|
|
22
|
+
font-weight: 600;
|
|
23
|
+
cursor: pointer;
|
|
24
|
+
transition: background-color ${tokens.transition.fast}, opacity ${tokens.transition.fast}, box-shadow ${tokens.transition.fast};
|
|
25
|
+
text-decoration: none;
|
|
26
|
+
white-space: nowrap;
|
|
27
|
+
position: relative;
|
|
28
|
+
width: ${({ fullWidth }) => (fullWidth ? '100%' : 'auto')};
|
|
29
|
+
&:disabled { cursor: not-allowed; opacity: 0.5; }
|
|
30
|
+
&:focus-visible { outline: 2px solid ${tokens.color.borderFocus}; outline-offset: 2px; }
|
|
31
|
+
${({ variant }) => variantStyles[variant]}
|
|
32
|
+
${({ size }) => sizeStyles[size]}
|
|
33
|
+
`;
|
|
34
|
+
export function Button({ variant = 'primary', size = 'md', fullWidth = false, loading = false, disabled = false, leftIcon, rightIcon, onClick, children, type = 'button', className }) {
|
|
35
|
+
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 })] })) }));
|
|
36
|
+
}
|
|
37
|
+
//# sourceMappingURL=Button.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/primitives/Button/Button.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import styled from '@emotion/styled';
|
|
3
|
+
import { tokens } from '@danielcruzcode/design-tokens';
|
|
4
|
+
import { useEffect, useId, useRef } from 'react';
|
|
5
|
+
const Wrapper = styled.label `
|
|
6
|
+
display: inline-flex; align-items: center; gap: ${tokens.space.sm};
|
|
7
|
+
cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
|
|
8
|
+
opacity: ${({ disabled }) => (disabled ? 0.5 : 1)};
|
|
9
|
+
font-family: ${tokens.font.body}; user-select: none;
|
|
10
|
+
`;
|
|
11
|
+
const HiddenInput = styled.input `position:absolute;opacity:0;width:0;height:0;margin:0;`;
|
|
12
|
+
const Box = styled.span `
|
|
13
|
+
width: 18px; height: 18px; border-radius: ${tokens.radius.sm};
|
|
14
|
+
border: 1.5px solid ${({ active }) => (active ? tokens.color.brand : tokens.color.border)};
|
|
15
|
+
background-color: ${({ active }) => (active ? tokens.color.brand : tokens.color.background)};
|
|
16
|
+
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
|
|
17
|
+
transition: background-color ${tokens.transition.fast}, border-color ${tokens.transition.fast};
|
|
18
|
+
`;
|
|
19
|
+
const LabelText = styled.span `font-size: 15px; color: ${tokens.color.text};`;
|
|
20
|
+
export function Checkbox({ checked = false, onChange, label, disabled = false, indeterminate = false, name, id: idProp }) {
|
|
21
|
+
const generatedId = useId();
|
|
22
|
+
const id = idProp ?? generatedId;
|
|
23
|
+
const inputRef = useRef(null);
|
|
24
|
+
useEffect(() => { if (inputRef.current)
|
|
25
|
+
inputRef.current.indeterminate = indeterminate; }, [indeterminate]);
|
|
26
|
+
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 })] }));
|
|
27
|
+
}
|
|
28
|
+
//# sourceMappingURL=Checkbox.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../src/primitives/Checkbox/Checkbox.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import styled from '@emotion/styled';
|
|
3
|
+
import { tokens } from '@danielcruzcode/design-tokens';
|
|
4
|
+
import { useId } from 'react';
|
|
5
|
+
const Wrapper = styled.div `display:flex;flex-direction:column;gap:4px;font-family:${tokens.font.body};`;
|
|
6
|
+
const Label = styled.label `font-size:13px;font-weight:500;color:${tokens.color.text};`;
|
|
7
|
+
const RequiredMark = styled.span `color:${tokens.color.danger};margin-left:2px;`;
|
|
8
|
+
const InputWrapper = styled.div `
|
|
9
|
+
display:flex;align-items:center;gap:${tokens.space.sm};
|
|
10
|
+
border-radius:${tokens.radius.md};
|
|
11
|
+
border:1.5px solid ${({ hasError }) => (hasError ? tokens.color.danger : tokens.color.border)};
|
|
12
|
+
background-color:${({ disabled }) => (disabled ? tokens.color.surface : tokens.color.background)};
|
|
13
|
+
padding-inline:${tokens.space.sm};opacity:${({ disabled }) => (disabled ? 0.6 : 1)};
|
|
14
|
+
cursor:${({ disabled }) => (disabled ? 'not-allowed' : 'auto')};
|
|
15
|
+
transition:border-color ${tokens.transition.fast};
|
|
16
|
+
&:focus-within {
|
|
17
|
+
border-color:${({ hasError }) => (hasError ? tokens.color.danger : tokens.color.borderFocus)};
|
|
18
|
+
box-shadow:0 0 0 3px ${({ hasError }) => (hasError ? tokens.color.dangerSubtle : tokens.color.brandSubtle)};
|
|
19
|
+
}
|
|
20
|
+
`;
|
|
21
|
+
const StyledInput = styled.input `
|
|
22
|
+
flex:1;border:none;outline:none;background:transparent;
|
|
23
|
+
font-family:${tokens.font.body};font-size:15px;color:${tokens.color.text};height:40px;
|
|
24
|
+
&::placeholder{color:${tokens.color.textMuted};}&:disabled{cursor:not-allowed;}
|
|
25
|
+
`;
|
|
26
|
+
const IconSlot = styled.span `display:flex;align-items:center;color:${tokens.color.textMuted};flex-shrink:0;`;
|
|
27
|
+
const Hint = styled.span `font-size:12px;color:${tokens.color.textMuted};`;
|
|
28
|
+
const ErrorText = styled.span `font-size:12px;color:${tokens.color.danger};`;
|
|
29
|
+
export function Input({ label, placeholder, value, onChange, type = 'text', error, hint, disabled = false, required = false, leftIcon, rightIcon, name, id: idProp }) {
|
|
30
|
+
const generatedId = useId();
|
|
31
|
+
const id = idProp ?? generatedId;
|
|
32
|
+
const errorId = error ? `${id}-error` : undefined;
|
|
33
|
+
const hintId = hint ? `${id}-hint` : undefined;
|
|
34
|
+
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 })] }));
|
|
35
|
+
}
|
|
36
|
+
//# sourceMappingURL=Input.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../src/primitives/Input/Input.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import styled from '@emotion/styled';
|
|
3
|
+
import { tokens } from '@danielcruzcode/design-tokens';
|
|
4
|
+
import { useId } from 'react';
|
|
5
|
+
const Wrapper = styled.div `display:flex;flex-direction:column;gap:4px;font-family:${tokens.font.body};`;
|
|
6
|
+
const Label = styled.label `font-size:13px;font-weight:500;color:${tokens.color.text};`;
|
|
7
|
+
const SelectWrapper = styled.div `position:relative;display:flex;align-items:center;`;
|
|
8
|
+
const StyledSelect = styled.select `
|
|
9
|
+
width:100%;height:40px;padding-inline-start:${tokens.space.sm};padding-inline-end:36px;
|
|
10
|
+
border-radius:${tokens.radius.md};border:1.5px solid ${({ hasError }) => (hasError ? tokens.color.danger : tokens.color.border)};
|
|
11
|
+
background-color:${tokens.color.background};font-family:${tokens.font.body};font-size:15px;
|
|
12
|
+
color:${tokens.color.text};appearance:none;cursor:pointer;transition:border-color ${tokens.transition.fast};
|
|
13
|
+
&: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)};}
|
|
14
|
+
&:disabled{background-color:${tokens.color.surface};cursor:not-allowed;opacity:0.6;}
|
|
15
|
+
`;
|
|
16
|
+
const Chevron = styled.span `position:absolute;right:${tokens.space.sm};pointer-events:none;color:${tokens.color.textMuted};display:flex;align-items:center;`;
|
|
17
|
+
const ErrorText = styled.span `font-size:12px;color:${tokens.color.danger};`;
|
|
18
|
+
export function Select({ options, value, onChange, label, placeholder, error, disabled = false, name, id: idProp }) {
|
|
19
|
+
const generatedId = useId();
|
|
20
|
+
const id = idProp ?? generatedId;
|
|
21
|
+
const errorId = error ? `${id}-error` : undefined;
|
|
22
|
+
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 })] }));
|
|
23
|
+
}
|
|
24
|
+
//# sourceMappingURL=Select.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../src/primitives/Select/Select.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import styled from '@emotion/styled';
|
|
3
|
+
import { tokens } from '@danielcruzcode/design-tokens';
|
|
4
|
+
const variantStyles = {
|
|
5
|
+
default: `background-color:${tokens.color.surface};color:${tokens.color.text};border:1px solid ${tokens.color.border};`,
|
|
6
|
+
brand: `background-color:${tokens.color.brandSubtle};color:${tokens.color.brand};border:1px solid ${tokens.color.brand};`,
|
|
7
|
+
};
|
|
8
|
+
const StyledTag = styled.span `
|
|
9
|
+
display: inline-flex;
|
|
10
|
+
align-items: center;
|
|
11
|
+
gap: 4px;
|
|
12
|
+
border-radius: ${tokens.radius.full};
|
|
13
|
+
font-family: ${tokens.font.body};
|
|
14
|
+
font-size: 13px;
|
|
15
|
+
font-weight: 500;
|
|
16
|
+
padding: 4px ${tokens.space.sm};
|
|
17
|
+
${({ variant }) => variantStyles[variant]}
|
|
18
|
+
`;
|
|
19
|
+
const RemoveBtn = styled.button `
|
|
20
|
+
display: inline-flex; align-items: center; justify-content: center;
|
|
21
|
+
background: none; border: none; padding: 0; cursor: pointer;
|
|
22
|
+
color: inherit; opacity: 0.7; border-radius: ${tokens.radius.full};
|
|
23
|
+
&:hover { opacity: 1; }
|
|
24
|
+
&:focus-visible { outline: 2px solid ${tokens.color.borderFocus}; outline-offset: 1px; }
|
|
25
|
+
`;
|
|
26
|
+
export function Tag({ label, onRemove, variant = 'default' }) {
|
|
27
|
+
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" }) }) }))] }));
|
|
28
|
+
}
|
|
29
|
+
//# sourceMappingURL=Tag.js.map
|
|
@@ -0,0 +1 @@
|
|
|
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"}
|