my-npm-libb 0.2.0

package/dist/cjs/tokens/typography.js

@@ -0,0 +1,82 @@
+'use strict';
+
+/**
+ * Typography Tokens
+ *
+ * Bao gồm: font families, font sizes, font weights, line heights.
+ * Font size scale dùng tỉ lệ Major Third (1.25) — phổ biến trong UI design.
+ */
+// ============================================
+// Font Families
+// ============================================
+const fontFamilies = {
+    /** Font chính cho body text */
+    base: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
+    /** Font cho code/monospace */
+    mono: "'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace",
+};
+// ============================================
+// Font Sizes
+// ============================================
+const fontSizes = {
+    /** 12px — Caption, helper text */
+    xs: 12,
+    /** 14px — Body small, Ant Design default */
+    sm: 14,
+    /** 16px — Body */
+    md: 16,
+    /** 18px — Body large */
+    lg: 18,
+    /** 20px — Heading 5 */
+    xl: 20,
+    /** 24px — Heading 4 */
+    '2xl': 24,
+    /** 30px — Heading 3 */
+    '3xl': 30,
+    /** 36px — Heading 2 */
+    '4xl': 36,
+    /** 48px — Heading 1 */
+    '5xl': 48,
+};
+// ============================================
+// Font Weights
+// ============================================
+const fontWeights = {
+    /** 400 — Normal text */
+    regular: 400,
+    /** 500 — Medium emphasis */
+    medium: 500,
+    /** 600 — Semi-bold, subheadings */
+    semibold: 600,
+    /** 700 — Bold, headings */
+    bold: 700,
+};
+// ============================================
+// Line Heights
+// ============================================
+const lineHeights = {
+    /** 1 — Không có line height thêm (icons, single-line) */
+    none: 1,
+    /** 1.375 — Tight, dùng cho headings */
+    tight: 1.375,
+    /** 1.5 — Normal, dùng cho body text */
+    normal: 1.5,
+    /** 1.75 — Relaxed, dùng cho body text dài */
+    relaxed: 1.75,
+};
+// ============================================
+// Export gộp
+// ============================================
+const typography = {
+    fontFamilies,
+    fontSizes,
+    fontWeights,
+    lineHeights,
+};
+
+exports.fontFamilies = fontFamilies;
+exports.fontSizes = fontSizes;
+exports.fontWeights = fontWeights;
+exports.lineHeights = lineHeights;
+exports.typography = typography;
+//# sourceMappingURL=typography.js.map

package/dist/cjs/tokens/typography.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"typography.js","sources":["../../../../src/tokens/typography.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAAA;;;;;AAKG;AAEH;AACA;AACA;AAEO,MAAM,YAAY,GAAG;;AAE1B,IAAA,IAAI,EAAE,4FAA4F;;AAElG,IAAA,IAAI,EAAE,0EAA0E;;AAGlF;AACA;AACA;AAEO,MAAM,SAAS,GAAG;;AAEvB,IAAA,EAAE,EAAE,EAAE;;AAEN,IAAA,EAAE,EAAE,EAAE;;AAEN,IAAA,EAAE,EAAE,EAAE;;AAEN,IAAA,EAAE,EAAE,EAAE;;AAEN,IAAA,EAAE,EAAE,EAAE;;AAEN,IAAA,KAAK,EAAE,EAAE;;AAET,IAAA,KAAK,EAAE,EAAE;;AAET,IAAA,KAAK,EAAE,EAAE;;AAET,IAAA,KAAK,EAAE,EAAE;;AAGX;AACA;AACA;AAEO,MAAM,WAAW,GAAG;;AAEzB,IAAA,OAAO,EAAE,GAAG;;AAEZ,IAAA,MAAM,EAAE,GAAG;;AAEX,IAAA,QAAQ,EAAE,GAAG;;AAEb,IAAA,IAAI,EAAE,GAAG;;AAGX;AACA;AACA;AAEO,MAAM,WAAW,GAAG;;AAEzB,IAAA,IAAI,EAAE,CAAC;;AAEP,IAAA,KAAK,EAAE,KAAK;;AAEZ,IAAA,MAAM,EAAE,GAAG;;AAEX,IAAA,OAAO,EAAE,IAAI;;AAGf;AACA;AACA;AAEO,MAAM,UAAU,GAAG;IACxB,YAAY;IACZ,SAAS;IACT,WAAW;IACX,WAAW;;;;;;;;;"}

package/dist/esm/components/Button/Button.js

@@ -0,0 +1,76 @@
+import { jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { Button as Button$1 } from 'antd';
+import styled, { css } from 'styled-components';
+
+// ============================================
+// Styled Component
+// ============================================
+// Map ButtonSize sang Ant Design size
+const antSizeMap = {
+    sm: 'small',
+    md: 'middle',
+    lg: 'large',
+};
+// Map ButtonVariant sang Ant Design type
+const antTypeMap = {
+    primary: { type: 'primary' },
+    secondary: { type: 'default' },
+    outline: { type: 'default' },
+    ghost: { type: 'text' },
+    danger: { type: 'primary', danger: true },
+};
+const fullWidthStyle = css `
+  width: 100%;
+`;
+const outlineStyle = css `
+  &.ant-btn-default {
+    border-color: ${({ theme }) => theme.colors.brand.primary[500]};
+    color: ${({ theme }) => theme.colors.brand.primary[500]};
+
+    &:hover:not(:disabled) {
+      border-color: ${({ theme }) => theme.colors.brand.primary[400]};
+      color: ${({ theme }) => theme.colors.brand.primary[400]};
+    }
+
+    &:active:not(:disabled) {
+      border-color: ${({ theme }) => theme.colors.brand.primary[600]};
+      color: ${({ theme }) => theme.colors.brand.primary[600]};
+    }
+  }
+`;
+const secondaryStyle = css `
+  &.ant-btn-default {
+    background: ${({ theme }) => theme.colors.neutral.gray[100]};
+    border-color: ${({ theme }) => theme.colors.neutral.gray[300]};
+    color: ${({ theme }) => theme.colors.neutral.gray[800]};
+
+    &:hover:not(:disabled) {
+      background: ${({ theme }) => theme.colors.neutral.gray[200]};
+      border-color: ${({ theme }) => theme.colors.neutral.gray[400]};
+      color: ${({ theme }) => theme.colors.neutral.gray[900]};
+    }
+  }
+`;
+const StyledButton = styled(Button$1) `
+  /* Transition mượt cho tất cả states */
+  transition: all 0.2s ease;
+
+  /* fullWidth */
+  ${({ $fullWidth }) => $fullWidth && fullWidthStyle}
+
+  /* Variant-specific styles */
+  ${({ $variant }) => $variant === 'outline' && outlineStyle}
+  ${({ $variant }) => $variant === 'secondary' && secondaryStyle}
+`;
+// ============================================
+// Component
+// ============================================
+const Button = React.forwardRef(({ variant = 'primary', size = 'md', fullWidth = false, loading = false, children, ...rest }, ref) => {
+    const antType = antTypeMap[variant];
+    return (jsx(StyledButton, { ref: ref, type: antType.type, danger: antType.danger, size: antSizeMap[size], loading: loading, "$variant": variant, "$fullWidth": fullWidth, ...rest, children: children }));
+});
+Button.displayName = 'Button';
+
+export { Button };
+//# sourceMappingURL=Button.js.map

package/dist/esm/components/Button/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sources":["../../../../../src/components/Button/Button.tsx"],"sourcesContent":[null],"names":["AntButton","_jsx"],"mappings":";;;;;AAyBA;AACA;AACA;AAEA;AACA,MAAM,UAAU,GAA+C;AAC7D,IAAA,EAAE,EAAE,OAAO;AACX,IAAA,EAAE,EAAE,QAAQ;AACZ,IAAA,EAAE,EAAE,OAAO;CACZ;AAED;AACA,MAAM,UAAU,GAA8E;AAC5F,IAAA,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;AAC5B,IAAA,SAAS,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;AAC9B,IAAA,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;AAC5B,IAAA,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;IACvB,MAAM,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,IAAI,EAAE;CAC1C;AAED,MAAM,cAAc,GAAG,GAAG,CAAA;;CAEzB;AAED,MAAM,YAAY,GAAG,GAAG,CAAA;;AAEJ,kBAAA,EAAA,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAA;AACrD,WAAA,EAAA,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAA;;;AAGrC,oBAAA,EAAA,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAA;AACrD,aAAA,EAAA,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAA;;;;AAIvC,oBAAA,EAAA,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAA;AACrD,aAAA,EAAA,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAA;;;CAG5D;AAED,MAAM,cAAc,GAAG,GAAG,CAAA;;AAER,gBAAA,EAAA,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;AAC3C,kBAAA,EAAA,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;AACpD,WAAA,EAAA,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;;;AAGtC,kBAAA,EAAA,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;AAC3C,oBAAA,EAAA,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;AACpD,aAAA,EAAA,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;;;CAG3D;AAOD,MAAM,YAAY,GAAG,MAAM,CAACA,QAAS,CAAC,CAAmB;;;;;IAKrD,CAAC,EAAE,UAAU,EAAE,KAAK,UAAU,IAAI,cAAc;;;IAGhD,CAAC,EAAE,QAAQ,EAAE,KAAK,QAAQ,KAAK,SAAS,IAAI,YAAY;IACxD,CAAC,EAAE,QAAQ,EAAE,KAAK,QAAQ,KAAK,WAAW,IAAI,cAAc;CAC/D;AAED;AACA;AACA;AAEO,MAAM,MAAM,GAAG,KAAK,CAAC,UAAU,CACpC,CACE,EAAE,OAAO,GAAG,SAAS,EAAE,IAAI,GAAG,IAAI,EAAE,SAAS,GAAG,KAAK,EAAE,OAAO,GAAG,KAAK,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAC3F,GAAG,KACD;AACF,IAAA,MAAM,OAAO,GAAG,UAAU,CAAC,OAAO,CAAC;AAEnC,IAAA,QACEC,GAAA,CAAC,YAAY,IACX,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,OAAO,CAAC,IAAI,EAClB,MAAM,EAAE,OAAO,CAAC,MAAM,EACtB,IAAI,EAAE,UAAU,CAAC,IAAI,CAAC,EACtB,OAAO,EAAE,OAAO,EAAA,UAAA,EACN,OAAO,EAAA,YAAA,EACL,SAAS,EAAA,GACjB,IAAI,YAEP,QAAQ,EAAA,CACI;AAEnB,CAAC;AAGH,MAAM,CAAC,WAAW,GAAG,QAAQ;;;;"}

package/dist/esm/components/Input/Input.js

@@ -0,0 +1,70 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { Input as Input$1 } from 'antd';
+import styled, { css } from 'styled-components';
+
+// ============================================
+// Map sang Ant Design props
+// ============================================
+const antSizeMap = {
+    sm: 'small',
+    md: 'middle',
+    lg: 'large',
+};
+const antStatusMap = {
+    default: undefined,
+    error: 'error',
+    warning: 'warning',
+};
+// ============================================
+// Styled Components
+// ============================================
+const fullWidthStyle = css `
+  width: 100%;
+`;
+const InputWrapper = styled.div `
+  display: inline-flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing.xs}px;
+  ${({ $fullWidth }) => $fullWidth && fullWidthStyle}
+`;
+const Label = styled.label `
+  font-size: ${({ theme }) => theme.typography.fontSizes.sm}px;
+  font-weight: ${({ theme }) => theme.typography.fontWeights.medium};
+  color: ${({ theme }) => theme.colors.neutral.gray[700]};
+  line-height: ${({ theme }) => theme.typography.lineHeights.normal};
+`;
+const HelperText = styled.span `
+  font-size: ${({ theme }) => theme.typography.fontSizes.xs}px;
+  line-height: ${({ theme }) => theme.typography.lineHeights.normal};
+  color: ${({ theme, $status }) => {
+    switch ($status) {
+        case 'error':
+            return theme.colors.semantic.error.default;
+        case 'warning':
+            return theme.colors.semantic.warning.default;
+        default:
+            return theme.colors.neutral.gray[500];
+    }
+}};
+`;
+const StyledAntInput = styled(Input$1) `
+  ${({ $fullWidth }) => $fullWidth && fullWidthStyle}
+
+  &.ant-input-affix-wrapper,
+  &.ant-input {
+    transition: all 0.2s ease;
+  }
+`;
+// ============================================
+// Component
+// ============================================
+const Input = React.forwardRef(({ size = 'md', status = 'default', label, helperText, fullWidth = false, id, ...rest }, ref) => {
+    // Tạo id tự động nếu có label nhưng không truyền id
+    const inputId = id !== null && id !== void 0 ? id : (label ? `input-${label.toLowerCase().replace(/\s+/g, '-')}` : undefined);
+    return (jsxs(InputWrapper, { "$fullWidth": fullWidth, children: [label && jsx(Label, { htmlFor: inputId, children: label }), jsx(StyledAntInput, { ref: ref, id: inputId, size: antSizeMap[size], status: antStatusMap[status], "$fullWidth": fullWidth, ...rest }), helperText && jsx(HelperText, { "$status": status, children: helperText })] }));
+});
+Input.displayName = 'Input';
+
+export { Input };
+//# sourceMappingURL=Input.js.map

package/dist/esm/components/Input/Input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.js","sources":["../../../../../src/components/Input/Input.tsx"],"sourcesContent":[null],"names":["AntInput","_jsxs","_jsx"],"mappings":";;;;;AAyBA;AACA;AACA;AAEA,MAAM,UAAU,GAA6C;AAC3D,IAAA,EAAE,EAAE,OAAO;AACX,IAAA,EAAE,EAAE,QAAQ;AACZ,IAAA,EAAE,EAAE,OAAO;CACZ;AAED,MAAM,YAAY,GAAiD;AACjE,IAAA,OAAO,EAAE,SAAS;AAClB,IAAA,KAAK,EAAE,OAAO;AACd,IAAA,OAAO,EAAE,SAAS;CACnB;AAED;AACA;AACA;AAEA,MAAM,cAAc,GAAG,GAAG,CAAA;;CAEzB;AAMD,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAAoB;;;SAG1C,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,CAAC,OAAO,CAAC,EAAE,CAAA;IACpC,CAAC,EAAE,UAAU,EAAE,KAAK,UAAU,IAAI,cAAc;CACnD;AAED,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAA;AACX,aAAA,EAAA,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,CAAC,UAAU,CAAC,SAAS,CAAC,EAAE,CAAA;AAC1C,eAAA,EAAA,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,MAAM,CAAA;AACxD,SAAA,EAAA,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;AACvC,eAAA,EAAA,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,MAAM,CAAA;CAClE;AAMD,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAiB;AAChC,aAAA,EAAA,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,CAAC,UAAU,CAAC,SAAS,CAAC,EAAE,CAAA;AAC1C,eAAA,EAAA,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,MAAM,CAAA;AACxD,SAAA,EAAA,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAI;IAC9B,QAAQ,OAAO;AACb,QAAA,KAAK,OAAO;YACV,OAAO,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,OAAO;AAC5C,QAAA,KAAK,SAAS;YACZ,OAAO,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,OAAO,CAAC,OAAO;AAC9C,QAAA;YACE,OAAO,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;;AAE3C,CAAC,CAAA;CACF;AAMD,MAAM,cAAc,GAAG,MAAM,CAACA,OAAQ,CAAC,CAAkB;IACrD,CAAC,EAAE,UAAU,EAAE,KAAK,UAAU,IAAI,cAAc;;;;;;CAMnD;AAED;AACA;AACA;AAEO,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CACnC,CAAC,EAAE,IAAI,GAAG,IAAI,EAAE,MAAM,GAAG,SAAS,EAAE,KAAK,EAAE,UAAU,EAAE,SAAS,GAAG,KAAK,EAAE,EAAE,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,KAAI;;AAE9F,IAAA,MAAM,OAAO,GAAG,EAAE,KAAA,IAAA,IAAF,EAAE,KAAA,MAAA,GAAF,EAAE,IAAK,KAAK,GAAG,CAAA,MAAA,EAAS,KAAK,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA,CAAE,GAAG,SAAS,CAAC;IAE/F,QACEC,IAAA,CAAC,YAAY,EAAA,EAAA,YAAA,EAAa,SAAS,EAAA,QAAA,EAAA,CAChC,KAAK,IAAIC,GAAA,CAAC,KAAK,EAAA,EAAC,OAAO,EAAE,OAAO,EAAA,QAAA,EAAG,KAAK,EAAA,CAAS,EAElDA,GAAA,CAAC,cAAc,EAAA,EACb,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,OAAO,EACX,IAAI,EAAE,UAAU,CAAC,IAAI,CAAC,EACtB,MAAM,EAAE,YAAY,CAAC,MAAM,CAAC,EAAA,YAAA,EAChB,SAAS,EAAA,GACjB,IAAI,EAAA,CACR,EAED,UAAU,IAAIA,GAAA,CAAC,UAAU,EAAA,EAAA,SAAA,EAAU,MAAM,EAAA,QAAA,EAAG,UAAU,EAAA,CAAc,CAAA,EAAA,CACxD;AAEnB,CAAC;AAGH,KAAK,CAAC,WAAW,GAAG,OAAO;;;;"}

package/dist/esm/index.js

@@ -0,0 +1,11 @@
+export { brandColors, colors, neutralColors, semanticColors } from './tokens/colors.js';
+export { spacing } from './tokens/spacing.js';
+export { fontFamilies, fontSizes, fontWeights, lineHeights, typography } from './tokens/typography.js';
+export { shadows } from './tokens/shadows.js';
+export { borderRadius, borderWidth, borders } from './tokens/borders.js';
+export { breakpoints } from './tokens/breakpoints.js';
+export { ThemeProvider } from './theme/ThemeProvider.js';
+export { antdTheme, appTheme } from './theme/theme.js';
+export { Button } from './components/Button/Button.js';
+export { Input } from './components/Input/Input.js';
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}

package/dist/esm/theme/ThemeProvider.js

@@ -0,0 +1,32 @@
+import { jsx } from 'react/jsx-runtime';
+import { ConfigProvider } from 'antd';
+import { ThemeProvider as ThemeProvider$1 } from 'styled-components';
+import { antdTheme, appTheme } from './theme.js';
+
+// ============================================
+// ThemeProvider Component
+// ============================================
+const ThemeProvider = ({ children, antdThemeOverride, styledThemeOverride, }) => {
+    // Merge Ant Design theme
+    const mergedAntdTheme = antdThemeOverride
+        ? {
+            ...antdTheme,
+            token: {
+                ...antdTheme.token,
+                ...antdThemeOverride.token,
+            },
+            components: {
+                ...antdTheme.components,
+                ...antdThemeOverride.components,
+            },
+        }
+        : antdTheme;
+    // Merge styled-components theme
+    const mergedStyledTheme = styledThemeOverride
+        ? { ...appTheme, ...styledThemeOverride }
+        : appTheme;
+    return (jsx(ConfigProvider, { theme: mergedAntdTheme, children: jsx(ThemeProvider$1, { theme: mergedStyledTheme, children: children }) }));
+};
+
+export { ThemeProvider };
+//# sourceMappingURL=ThemeProvider.js.map

package/dist/esm/theme/ThemeProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeProvider.js","sources":["../../../../src/theme/ThemeProvider.tsx"],"sourcesContent":[null],"names":["_jsx","StyledThemeProvider"],"mappings":";;;;;AA+BA;AACA;AACA;AAEO,MAAM,aAAa,GAAiC,CAAC,EAC1D,QAAQ,EACR,iBAAiB,EACjB,mBAAmB,GACpB,KAAI;;IAEH,MAAM,eAAe,GAAgB;AACnC,UAAE;AACE,YAAA,GAAG,SAAS;AACZ,YAAA,KAAK,EAAE;gBACL,GAAG,SAAS,CAAC,KAAK;gBAClB,GAAG,iBAAiB,CAAC,KAAK;AAC3B,aAAA;AACD,YAAA,UAAU,EAAE;gBACV,GAAG,SAAS,CAAC,UAAU;gBACvB,GAAG,iBAAiB,CAAC,UAAU;AAChC,aAAA;AACF;UACD,SAAS;;IAGb,MAAM,iBAAiB,GAAa;AAClC,UAAE,EAAE,GAAG,QAAQ,EAAE,GAAG,mBAAmB;UACrC,QAAQ;AAEZ,IAAA,QACEA,GAAA,CAAC,cAAc,IAAC,KAAK,EAAE,eAAe,EAAA,QAAA,EACpCA,GAAA,CAACC,eAAmB,EAAA,EAAC,KAAK,EAAE,iBAAiB,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAuB,EAAA,CAChE;AAErB;;;;"}

package/dist/esm/theme/theme.js

@@ -0,0 +1,83 @@
+import { neutralColors, semanticColors, brandColors } from '../tokens/colors.js';
+import { spacing } from '../tokens/spacing.js';
+import { fontSizes, fontFamilies, lineHeights, fontWeights } from '../tokens/typography.js';
+import { shadows } from '../tokens/shadows.js';
+import { borderWidth, borderRadius } from '../tokens/borders.js';
+import { breakpoints } from '../tokens/breakpoints.js';
+
+// ============================================
+// Styled-components Theme Object
+// ============================================
+const appTheme = {
+    colors: {
+        brand: brandColors,
+        neutral: neutralColors,
+        semantic: semanticColors,
+    },
+    spacing,
+    typography: {
+        fontFamilies,
+        fontSizes,
+        fontWeights,
+        lineHeights,
+    },
+    shadows,
+    borderRadius,
+    borderWidth,
+    breakpoints,
+};
+// ============================================
+// Ant Design Theme Config
+// ============================================
+// Map design tokens sang Ant Design Design Token System.
+// Tham khảo: https://ant.design/docs/react/customize-theme
+const antdTheme = {
+    token: {
+        // Brand colors
+        colorPrimary: brandColors.primary[500],
+        colorLink: brandColors.primary[500],
+        colorLinkHover: brandColors.primary[400],
+        colorLinkActive: brandColors.primary[600],
+        // Semantic colors
+        colorSuccess: semanticColors.success.default,
+        colorWarning: semanticColors.warning.default,
+        colorError: semanticColors.error.default,
+        colorInfo: semanticColors.info.default,
+        // Typography
+        fontFamily: fontFamilies.base,
+        fontSize: fontSizes.sm, // 14px — Ant Design default
+        fontSizeLG: fontSizes.md, // 16px
+        fontSizeSM: fontSizes.xs, // 12px
+        fontSizeXL: fontSizes.lg, // 18px
+        // Spacing
+        padding: spacing.lg, // 16px
+        paddingSM: spacing.sm, // 8px
+        paddingXS: spacing.xs, // 4px
+        paddingLG: spacing['2xl'], // 24px
+        margin: spacing.lg, // 16px
+        marginSM: spacing.sm, // 8px
+        marginXS: spacing.xs, // 4px
+        marginLG: spacing['2xl'], // 24px
+        // Border
+        borderRadius: borderRadius.lg, // 6px — Ant Design default
+        borderRadiusLG: borderRadius.xl, // 8px
+        borderRadiusSM: borderRadius.md, // 4px
+        lineWidth: borderWidth.thin, // 1px
+        lineWidthFocus: borderWidth.thick, // 4px — focus ring
+        // Neutral
+        colorText: neutralColors.gray[800],
+        colorTextSecondary: neutralColors.gray[600],
+        colorTextTertiary: neutralColors.gray[500],
+        colorTextDisabled: neutralColors.gray[400],
+        colorBgBase: neutralColors.white,
+        colorBgLayout: neutralColors.gray[50],
+        colorBorder: neutralColors.gray[300],
+        colorBorderSecondary: neutralColors.gray[200],
+        // Shadow
+        boxShadow: shadows.sm,
+        boxShadowSecondary: shadows.md,
+    },
+};
+
+export { antdTheme, appTheme };
+//# sourceMappingURL=theme.js.map

package/dist/esm/theme/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.js","sources":["../../../../src/theme/theme.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;AAyCA;AACA;AACA;AAEO,MAAM,QAAQ,GAAa;AAChC,IAAA,MAAM,EAAE;AACN,QAAA,KAAK,EAAE,WAAW;AAClB,QAAA,OAAO,EAAE,aAAa;AACtB,QAAA,QAAQ,EAAE,cAAc;AACzB,KAAA;IACD,OAAO;AACP,IAAA,UAAU,EAAE;QACV,YAAY;QACZ,SAAS;QACT,WAAW;QACX,WAAW;AACZ,KAAA;IACD,OAAO;IACP,YAAY;IACZ,WAAW;IACX,WAAW;;AAGb;AACA;AACA;AACA;AACA;AAEO,MAAM,SAAS,GAAgB;AACpC,IAAA,KAAK,EAAE;;AAEL,QAAA,YAAY,EAAE,WAAW,CAAC,OAAO,CAAC,GAAG,CAAC;AACtC,QAAA,SAAS,EAAE,WAAW,CAAC,OAAO,CAAC,GAAG,CAAC;AACnC,QAAA,cAAc,EAAE,WAAW,CAAC,OAAO,CAAC,GAAG,CAAC;AACxC,QAAA,eAAe,EAAE,WAAW,CAAC,OAAO,CAAC,GAAG,CAAC;;AAGzC,QAAA,YAAY,EAAE,cAAc,CAAC,OAAO,CAAC,OAAO;AAC5C,QAAA,YAAY,EAAE,cAAc,CAAC,OAAO,CAAC,OAAO;AAC5C,QAAA,UAAU,EAAE,cAAc,CAAC,KAAK,CAAC,OAAO;AACxC,QAAA,SAAS,EAAE,cAAc,CAAC,IAAI,CAAC,OAAO;;QAGtC,UAAU,EAAE,YAAY,CAAC,IAAI;AAC7B,QAAA,QAAQ,EAAE,SAAS,CAAC,EAAE;AACtB,QAAA,UAAU,EAAE,SAAS,CAAC,EAAE;AACxB,QAAA,UAAU,EAAE,SAAS,CAAC,EAAE;AACxB,QAAA,UAAU,EAAE,SAAS,CAAC,EAAE;;AAGxB,QAAA,OAAO,EAAE,OAAO,CAAC,EAAE;AACnB,QAAA,SAAS,EAAE,OAAO,CAAC,EAAE;AACrB,QAAA,SAAS,EAAE,OAAO,CAAC,EAAE;AACrB,QAAA,SAAS,EAAE,OAAO,CAAC,KAAK,CAAC;AACzB,QAAA,MAAM,EAAE,OAAO,CAAC,EAAE;AAClB,QAAA,QAAQ,EAAE,OAAO,CAAC,EAAE;AACpB,QAAA,QAAQ,EAAE,OAAO,CAAC,EAAE;AACpB,QAAA,QAAQ,EAAE,OAAO,CAAC,KAAK,CAAC;;AAGxB,QAAA,YAAY,EAAE,YAAY,CAAC,EAAE;AAC7B,QAAA,cAAc,EAAE,YAAY,CAAC,EAAE;AAC/B,QAAA,cAAc,EAAE,YAAY,CAAC,EAAE;AAC/B,QAAA,SAAS,EAAE,WAAW,CAAC,IAAI;AAC3B,QAAA,cAAc,EAAE,WAAW,CAAC,KAAK;;AAGjC,QAAA,SAAS,EAAE,aAAa,CAAC,IAAI,CAAC,GAAG,CAAC;AAClC,QAAA,kBAAkB,EAAE,aAAa,CAAC,IAAI,CAAC,GAAG,CAAC;AAC3C,QAAA,iBAAiB,EAAE,aAAa,CAAC,IAAI,CAAC,GAAG,CAAC;AAC1C,QAAA,iBAAiB,EAAE,aAAa,CAAC,IAAI,CAAC,GAAG,CAAC;QAC1C,WAAW,EAAE,aAAa,CAAC,KAAK;AAChC,QAAA,aAAa,EAAE,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC;AACrC,QAAA,WAAW,EAAE,aAAa,CAAC,IAAI,CAAC,GAAG,CAAC;AACpC,QAAA,oBAAoB,EAAE,aAAa,CAAC,IAAI,CAAC,GAAG,CAAC;;QAG7C,SAAS,EAAE,OAAO,CAAC,EAAE;QACrB,kBAAkB,EAAE,OAAO,CAAC,EAAE;AAC/B,KAAA;;;;;"}

package/dist/esm/tokens/borders.js

@@ -0,0 +1,49 @@
+/**
+ * Border Tokens
+ *
+ * Bao gồm border-radius và border-width.
+ */
+// ============================================
+// Border Radius
+// ============================================
+const borderRadius = {
+    /** 0px — Không bo góc */
+    none: 0,
+    /** 2px — Bo góc rất nhẹ */
+    sm: 2,
+    /** 4px — Bo góc nhẹ */
+    md: 4,
+    /** 6px — Ant Design default */
+    lg: 6,
+    /** 8px — Bo góc trung bình */
+    xl: 8,
+    /** 12px — Bo góc lớn */
+    '2xl': 12,
+    /** 16px — Bo góc rất lớn */
+    '3xl': 16,
+    /** 9999px — Bo tròn hoàn toàn (pill shape) */
+    full: 9999,
+};
+// ============================================
+// Border Width
+// ============================================
+const borderWidth = {
+    /** 0px */
+    none: 0,
+    /** 1px — Default border */
+    thin: 1,
+    /** 2px — Medium border */
+    medium: 2,
+    /** 4px — Thick border (ví dụ: focus ring) */
+    thick: 4,
+};
+// ============================================
+// Export gộp
+// ============================================
+const borders = {
+    radius: borderRadius,
+    width: borderWidth,
+};
+
+export { borderRadius, borderWidth, borders };
+//# sourceMappingURL=borders.js.map

package/dist/esm/tokens/borders.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"borders.js","sources":["../../../../src/tokens/borders.ts"],"sourcesContent":[null],"names":[],"mappings":"AAAA;;;;AAIG;AAEH;AACA;AACA;AAEO,MAAM,YAAY,GAAG;;AAE1B,IAAA,IAAI,EAAE,CAAC;;AAEP,IAAA,EAAE,EAAE,CAAC;;AAEL,IAAA,EAAE,EAAE,CAAC;;AAEL,IAAA,EAAE,EAAE,CAAC;;AAEL,IAAA,EAAE,EAAE,CAAC;;AAEL,IAAA,KAAK,EAAE,EAAE;;AAET,IAAA,KAAK,EAAE,EAAE;;AAET,IAAA,IAAI,EAAE,IAAI;;AAGZ;AACA;AACA;AAEO,MAAM,WAAW,GAAG;;AAEzB,IAAA,IAAI,EAAE,CAAC;;AAEP,IAAA,IAAI,EAAE,CAAC;;AAEP,IAAA,MAAM,EAAE,CAAC;;AAET,IAAA,KAAK,EAAE,CAAC;;AAGV;AACA;AACA;AAEO,MAAM,OAAO,GAAG;AACrB,IAAA,MAAM,EAAE,YAAY;AACpB,IAAA,KAAK,EAAE,WAAW;;;;;"}

package/dist/esm/tokens/breakpoints.js

@@ -0,0 +1,23 @@
+/**
+ * Breakpoint Tokens
+ *
+ * Các breakpoint responsive theo chuẩn phổ biến.
+ * Giá trị tính bằng pixel, dùng mobile-first (min-width).
+ */
+const breakpoints = {
+    /** 480px — Mobile landscape */
+    xs: 480,
+    /** 576px — Small tablet */
+    sm: 576,
+    /** 768px — Tablet */
+    md: 768,
+    /** 992px — Small desktop */
+    lg: 992,
+    /** 1200px — Desktop */
+    xl: 1200,
+    /** 1600px — Large desktop */
+    '2xl': 1600,
+};
+
+export { breakpoints };
+//# sourceMappingURL=breakpoints.js.map

package/dist/esm/tokens/breakpoints.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"breakpoints.js","sources":["../../../../src/tokens/breakpoints.ts"],"sourcesContent":[null],"names":[],"mappings":"AAAA;;;;;AAKG;AAEI,MAAM,WAAW,GAAG;;AAEzB,IAAA,EAAE,EAAE,GAAG;;AAEP,IAAA,EAAE,EAAE,GAAG;;AAEP,IAAA,EAAE,EAAE,GAAG;;AAEP,IAAA,EAAE,EAAE,GAAG;;AAEP,IAAA,EAAE,EAAE,IAAI;;AAER,IAAA,KAAK,EAAE,IAAI;;;;;"}

package/dist/esm/tokens/colors.js

@@ -0,0 +1,92 @@
+/**
+ * Color Tokens
+ *
+ * Hệ thống màu sắc được chia thành 3 nhóm:
+ * - Brand: Màu thương hiệu (primary, secondary)
+ * - Neutral: Màu trung tính (text, background, border)
+ * - Semantic: Màu mang ý nghĩa (success, warning, error, info)
+ */
+// ============================================
+// Brand Colors
+// ============================================
+const brandColors = {
+    primary: {
+        50: '#E6F1FF',
+        100: '#BAD9FF',
+        200: '#8DC1FF',
+        300: '#61A8FF',
+        400: '#3490FF',
+        500: '#1677FF', // Ant Design primary mặc định
+        600: '#0958D9',
+        700: '#003EB3',
+        800: '#002C8C',
+        900: '#001D66',
+    },
+    secondary: {
+        50: '#F0E6FF',
+        100: '#D3B8FF',
+        200: '#B58AFF',
+        300: '#985CFF',
+        400: '#7A2EFF',
+        500: '#6C2BD9',
+        600: '#5A24B3',
+        700: '#481D8C',
+        800: '#361666',
+        900: '#240F40',
+    },
+};
+// ============================================
+// Neutral Colors
+// ============================================
+const neutralColors = {
+    white: '#FFFFFF',
+    black: '#000000',
+    gray: {
+        50: '#FAFAFA',
+        100: '#F5F5F5',
+        200: '#F0F0F0',
+        300: '#D9D9D9',
+        400: '#BFBFBF',
+        500: '#8C8C8C',
+        600: '#595959',
+        700: '#434343',
+        800: '#262626',
+        900: '#141414',
+    },
+};
+// ============================================
+// Semantic Colors
+// ============================================
+const semanticColors = {
+    success: {
+        light: '#F6FFED',
+        default: '#52C41A',
+        dark: '#389E0D',
+    },
+    warning: {
+        light: '#FFFBE6',
+        default: '#FAAD14',
+        dark: '#D48806',
+    },
+    error: {
+        light: '#FFF2F0',
+        default: '#FF4D4F',
+        dark: '#CF1322',
+    },
+    info: {
+        light: '#E6F4FF',
+        default: '#1677FF',
+        dark: '#0958D9',
+    },
+};
+// ============================================
+// Export gộp
+// ============================================
+const colors = {
+    brand: brandColors,
+    neutral: neutralColors,
+    semantic: semanticColors,
+};
+
+export { brandColors, colors, neutralColors, semanticColors };
+//# sourceMappingURL=colors.js.map

package/dist/esm/tokens/colors.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors.js","sources":["../../../../src/tokens/colors.ts"],"sourcesContent":[null],"names":[],"mappings":"AAAA;;;;;;;AAOG;AAEH;AACA;AACA;AAEO,MAAM,WAAW,GAAG;AACzB,IAAA,OAAO,EAAE;AACP,QAAA,EAAE,EAAE,SAAS;AACb,QAAA,GAAG,EAAE,SAAS;AACd,QAAA,GAAG,EAAE,SAAS;AACd,QAAA,GAAG,EAAE,SAAS;AACd,QAAA,GAAG,EAAE,SAAS;QACd,GAAG,EAAE,SAAS;AACd,QAAA,GAAG,EAAE,SAAS;AACd,QAAA,GAAG,EAAE,SAAS;AACd,QAAA,GAAG,EAAE,SAAS;AACd,QAAA,GAAG,EAAE,SAAS;AACf,KAAA;AACD,IAAA,SAAS,EAAE;AACT,QAAA,EAAE,EAAE,SAAS;AACb,QAAA,GAAG,EAAE,SAAS;AACd,QAAA,GAAG,EAAE,SAAS;AACd,QAAA,GAAG,EAAE,SAAS;AACd,QAAA,GAAG,EAAE,SAAS;AACd,QAAA,GAAG,EAAE,SAAS;AACd,QAAA,GAAG,EAAE,SAAS;AACd,QAAA,GAAG,EAAE,SAAS;AACd,QAAA,GAAG,EAAE,SAAS;AACd,QAAA,GAAG,EAAE,SAAS;AACf,KAAA;;AAGH;AACA;AACA;AAEO,MAAM,aAAa,GAAG;AAC3B,IAAA,KAAK,EAAE,SAAS;AAChB,IAAA,KAAK,EAAE,SAAS;AAEhB,IAAA,IAAI,EAAE;AACJ,QAAA,EAAE,EAAE,SAAS;AACb,QAAA,GAAG,EAAE,SAAS;AACd,QAAA,GAAG,EAAE,SAAS;AACd,QAAA,GAAG,EAAE,SAAS;AACd,QAAA,GAAG,EAAE,SAAS;AACd,QAAA,GAAG,EAAE,SAAS;AACd,QAAA,GAAG,EAAE,SAAS;AACd,QAAA,GAAG,EAAE,SAAS;AACd,QAAA,GAAG,EAAE,SAAS;AACd,QAAA,GAAG,EAAE,SAAS;AACf,KAAA;;AAGH;AACA;AACA;AAEO,MAAM,cAAc,GAAG;AAC5B,IAAA,OAAO,EAAE;AACP,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,OAAO,EAAE,SAAS;AAClB,QAAA,IAAI,EAAE,SAAS;AAChB,KAAA;AACD,IAAA,OAAO,EAAE;AACP,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,OAAO,EAAE,SAAS;AAClB,QAAA,IAAI,EAAE,SAAS;AAChB,KAAA;AACD,IAAA,KAAK,EAAE;AACL,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,OAAO,EAAE,SAAS;AAClB,QAAA,IAAI,EAAE,SAAS;AAChB,KAAA;AACD,IAAA,IAAI,EAAE;AACJ,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,OAAO,EAAE,SAAS;AAClB,QAAA,IAAI,EAAE,SAAS;AAChB,KAAA;;AAGH;AACA;AACA;AAEO,MAAM,MAAM,GAAG;AACpB,IAAA,KAAK,EAAE,WAAW;AAClB,IAAA,OAAO,EAAE,aAAa;AACtB,IAAA,QAAQ,EAAE,cAAc;;;;;"}

package/dist/esm/tokens/shadows.js

@@ -0,0 +1,21 @@
+/**
+ * Shadow Tokens
+ *
+ * Hệ thống shadow tạo cảm giác elevation (độ nổi).
+ * Càng cao → shadow càng lớn và mờ → element trông càng "nổi" lên.
+ */
+const shadows = {
+    /** Không có shadow */
+    none: 'none',
+    /** Shadow nhẹ — Cards, containers */
+    sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
+    /** Shadow trung bình — Dropdowns, popovers */
+    md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)',
+    /** Shadow lớn — Modals, dialogs */
+    lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)',
+    /** Shadow rất lớn — Elements nổi bật nhất */
+    xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)',
+};
+
+export { shadows };
+//# sourceMappingURL=shadows.js.map

package/dist/esm/tokens/shadows.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shadows.js","sources":["../../../../src/tokens/shadows.ts"],"sourcesContent":[null],"names":[],"mappings":"AAAA;;;;;AAKG;AAEI,MAAM,OAAO,GAAG;;AAErB,IAAA,IAAI,EAAE,MAAM;;AAEZ,IAAA,EAAE,EAAE,iCAAiC;;AAErC,IAAA,EAAE,EAAE,sEAAsE;;AAE1E,IAAA,EAAE,EAAE,wEAAwE;;AAE5E,IAAA,EAAE,EAAE,yEAAyE;;;;;"}

package/dist/esm/tokens/spacing.js

@@ -0,0 +1,37 @@
+/**
+ * Spacing Tokens
+ *
+ * Hệ thống spacing dựa trên base unit 4px (4-point grid system).
+ * Mỗi bậc nhân đôi hoặc tăng dần đều → tạo nhịp điệu thị giác nhất quán.
+ *
+ * Quy ước đặt tên: xs, sm, md, lg, xl, 2xl, 3xl
+ */
+const spacing = {
+    /** 0px */
+    none: 0,
+    /** 2px — Khoảng cách rất nhỏ (ví dụ: gap giữa icon và text nhỏ) */
+    xxs: 2,
+    /** 4px — Khoảng cách nhỏ */
+    xs: 4,
+    /** 8px — Khoảng cách cơ bản */
+    sm: 8,
+    /** 12px */
+    md: 12,
+    /** 16px — Padding mặc định */
+    lg: 16,
+    /** 20px */
+    xl: 20,
+    /** 24px — Padding lớn */
+    '2xl': 24,
+    /** 32px */
+    '3xl': 32,
+    /** 40px */
+    '4xl': 40,
+    /** 48px */
+    '5xl': 48,
+    /** 64px */
+    '6xl': 64,
+};
+
+export { spacing };
+//# sourceMappingURL=spacing.js.map

package/dist/esm/tokens/spacing.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spacing.js","sources":["../../../../src/tokens/spacing.ts"],"sourcesContent":[null],"names":[],"mappings":"AAAA;;;;;;;AAOG;AAEI,MAAM,OAAO,GAAG;;AAErB,IAAA,IAAI,EAAE,CAAC;;AAEP,IAAA,GAAG,EAAE,CAAC;;AAEN,IAAA,EAAE,EAAE,CAAC;;AAEL,IAAA,EAAE,EAAE,CAAC;;AAEL,IAAA,EAAE,EAAE,EAAE;;AAEN,IAAA,EAAE,EAAE,EAAE;;AAEN,IAAA,EAAE,EAAE,EAAE;;AAEN,IAAA,KAAK,EAAE,EAAE;;AAET,IAAA,KAAK,EAAE,EAAE;;AAET,IAAA,KAAK,EAAE,EAAE;;AAET,IAAA,KAAK,EAAE,EAAE;;AAET,IAAA,KAAK,EAAE,EAAE;;;;;"}