my-npm-libb 0.2.0

package/dist/cjs/components/Button/Button.js

@@ -0,0 +1,78 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var antd = require('antd');
+var styled = require('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 = styled.css `
+  width: 100%;
+`;
+const outlineStyle = styled.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 = styled.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(antd.Button) `
+  /* 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 (jsxRuntime.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';
+
+exports.Button = Button;
+//# sourceMappingURL=Button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sources":["../../../../../src/components/Button/Button.tsx"],"sourcesContent":[null],"names":["css","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,GAAGA,UAAG,CAAA;;CAEzB;AAED,MAAM,YAAY,GAAGA,UAAG,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,GAAGA,UAAG,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,CAACC,WAAS,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,cAAA,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/cjs/components/Input/Input.js

@@ -0,0 +1,72 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var antd = require('antd');
+var styled = require('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 = styled.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(antd.Input) `
+  ${({ $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 (jsxRuntime.jsxs(InputWrapper, { "$fullWidth": fullWidth, children: [label && jsxRuntime.jsx(Label, { htmlFor: inputId, children: label }), jsxRuntime.jsx(StyledAntInput, { ref: ref, id: inputId, size: antSizeMap[size], status: antStatusMap[status], "$fullWidth": fullWidth, ...rest }), helperText && jsxRuntime.jsx(HelperText, { "$status": status, children: helperText })] }));
+});
+Input.displayName = 'Input';
+
+exports.Input = Input;
+//# sourceMappingURL=Input.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Input.js","sources":["../../../../../src/components/Input/Input.tsx"],"sourcesContent":[null],"names":["css","AntInput","_jsxs","_jsx"],"mappings":"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"}

package/dist/cjs/index.js

@@ -0,0 +1,36 @@
+'use strict';
+
+var colors = require('./tokens/colors.js');
+var spacing = require('./tokens/spacing.js');
+var typography = require('./tokens/typography.js');
+var shadows = require('./tokens/shadows.js');
+var borders = require('./tokens/borders.js');
+var breakpoints = require('./tokens/breakpoints.js');
+var ThemeProvider = require('./theme/ThemeProvider.js');
+var theme = require('./theme/theme.js');
+var Button = require('./components/Button/Button.js');
+var Input = require('./components/Input/Input.js');
+
+
+
+exports.brandColors = colors.brandColors;
+exports.colors = colors.colors;
+exports.neutralColors = colors.neutralColors;
+exports.semanticColors = colors.semanticColors;
+exports.spacing = spacing.spacing;
+exports.fontFamilies = typography.fontFamilies;
+exports.fontSizes = typography.fontSizes;
+exports.fontWeights = typography.fontWeights;
+exports.lineHeights = typography.lineHeights;
+exports.typography = typography.typography;
+exports.shadows = shadows.shadows;
+exports.borderRadius = borders.borderRadius;
+exports.borderWidth = borders.borderWidth;
+exports.borders = borders.borders;
+exports.breakpoints = breakpoints.breakpoints;
+exports.ThemeProvider = ThemeProvider.ThemeProvider;
+exports.antdTheme = theme.antdTheme;
+exports.appTheme = theme.appTheme;
+exports.Button = Button.Button;
+exports.Input = Input.Input;
+//# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

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

package/dist/cjs/theme/ThemeProvider.js

@@ -0,0 +1,34 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var antd = require('antd');
+var styled = require('styled-components');
+var theme = require('./theme.js');
+
+// ============================================
+// ThemeProvider Component
+// ============================================
+const ThemeProvider = ({ children, antdThemeOverride, styledThemeOverride, }) => {
+    // Merge Ant Design theme
+    const mergedAntdTheme = antdThemeOverride
+        ? {
+            ...theme.antdTheme,
+            token: {
+                ...theme.antdTheme.token,
+                ...antdThemeOverride.token,
+            },
+            components: {
+                ...theme.antdTheme.components,
+                ...antdThemeOverride.components,
+            },
+        }
+        : theme.antdTheme;
+    // Merge styled-components theme
+    const mergedStyledTheme = styledThemeOverride
+        ? { ...theme.appTheme, ...styledThemeOverride }
+        : theme.appTheme;
+    return (jsxRuntime.jsx(antd.ConfigProvider, { theme: mergedAntdTheme, children: jsxRuntime.jsx(styled.ThemeProvider, { theme: mergedStyledTheme, children: children }) }));
+};
+
+exports.ThemeProvider = ThemeProvider;
+//# sourceMappingURL=ThemeProvider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeProvider.js","sources":["../../../../src/theme/ThemeProvider.tsx"],"sourcesContent":[null],"names":["antdTheme","appTheme","_jsx","ConfigProvider","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,GAAGA,eAAS;AACZ,YAAA,KAAK,EAAE;gBACL,GAAGA,eAAS,CAAC,KAAK;gBAClB,GAAG,iBAAiB,CAAC,KAAK;AAC3B,aAAA;AACD,YAAA,UAAU,EAAE;gBACV,GAAGA,eAAS,CAAC,UAAU;gBACvB,GAAG,iBAAiB,CAAC,UAAU;AAChC,aAAA;AACF;UACDA,eAAS;;IAGb,MAAM,iBAAiB,GAAa;AAClC,UAAE,EAAE,GAAGC,cAAQ,EAAE,GAAG,mBAAmB;UACrCA,cAAQ;AAEZ,IAAA,QACEC,cAAA,CAACC,mBAAc,IAAC,KAAK,EAAE,eAAe,EAAA,QAAA,EACpCD,cAAA,CAACE,oBAAmB,EAAA,EAAC,KAAK,EAAE,iBAAiB,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAuB,EAAA,CAChE;AAErB;;;;"}

package/dist/cjs/theme/theme.js

@@ -0,0 +1,86 @@
+'use strict';
+
+var colors = require('../tokens/colors.js');
+var spacing = require('../tokens/spacing.js');
+var typography = require('../tokens/typography.js');
+var shadows = require('../tokens/shadows.js');
+var borders = require('../tokens/borders.js');
+var breakpoints = require('../tokens/breakpoints.js');
+
+// ============================================
+// Styled-components Theme Object
+// ============================================
+const appTheme = {
+    colors: {
+        brand: colors.brandColors,
+        neutral: colors.neutralColors,
+        semantic: colors.semanticColors,
+    },
+    spacing: spacing.spacing,
+    typography: {
+        fontFamilies: typography.fontFamilies,
+        fontSizes: typography.fontSizes,
+        fontWeights: typography.fontWeights,
+        lineHeights: typography.lineHeights,
+    },
+    shadows: shadows.shadows,
+    borderRadius: borders.borderRadius,
+    borderWidth: borders.borderWidth,
+    breakpoints: breakpoints.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: colors.brandColors.primary[500],
+        colorLink: colors.brandColors.primary[500],
+        colorLinkHover: colors.brandColors.primary[400],
+        colorLinkActive: colors.brandColors.primary[600],
+        // Semantic colors
+        colorSuccess: colors.semanticColors.success.default,
+        colorWarning: colors.semanticColors.warning.default,
+        colorError: colors.semanticColors.error.default,
+        colorInfo: colors.semanticColors.info.default,
+        // Typography
+        fontFamily: typography.fontFamilies.base,
+        fontSize: typography.fontSizes.sm, // 14px — Ant Design default
+        fontSizeLG: typography.fontSizes.md, // 16px
+        fontSizeSM: typography.fontSizes.xs, // 12px
+        fontSizeXL: typography.fontSizes.lg, // 18px
+        // Spacing
+        padding: spacing.spacing.lg, // 16px
+        paddingSM: spacing.spacing.sm, // 8px
+        paddingXS: spacing.spacing.xs, // 4px
+        paddingLG: spacing.spacing['2xl'], // 24px
+        margin: spacing.spacing.lg, // 16px
+        marginSM: spacing.spacing.sm, // 8px
+        marginXS: spacing.spacing.xs, // 4px
+        marginLG: spacing.spacing['2xl'], // 24px
+        // Border
+        borderRadius: borders.borderRadius.lg, // 6px — Ant Design default
+        borderRadiusLG: borders.borderRadius.xl, // 8px
+        borderRadiusSM: borders.borderRadius.md, // 4px
+        lineWidth: borders.borderWidth.thin, // 1px
+        lineWidthFocus: borders.borderWidth.thick, // 4px — focus ring
+        // Neutral
+        colorText: colors.neutralColors.gray[800],
+        colorTextSecondary: colors.neutralColors.gray[600],
+        colorTextTertiary: colors.neutralColors.gray[500],
+        colorTextDisabled: colors.neutralColors.gray[400],
+        colorBgBase: colors.neutralColors.white,
+        colorBgLayout: colors.neutralColors.gray[50],
+        colorBorder: colors.neutralColors.gray[300],
+        colorBorderSecondary: colors.neutralColors.gray[200],
+        // Shadow
+        boxShadow: shadows.shadows.sm,
+        boxShadowSecondary: shadows.shadows.md,
+    },
+};
+
+exports.antdTheme = antdTheme;
+exports.appTheme = appTheme;
+//# sourceMappingURL=theme.js.map

package/dist/cjs/theme/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.js","sources":["../../../../src/theme/theme.ts"],"sourcesContent":[null],"names":["brandColors","neutralColors","semanticColors","spacing","fontFamilies","fontSizes","fontWeights","lineHeights","shadows","borderRadius","borderWidth","breakpoints"],"mappings":";;;;;;;;;AAyCA;AACA;AACA;AAEO,MAAM,QAAQ,GAAa;AAChC,IAAA,MAAM,EAAE;AACN,QAAA,KAAK,EAAEA,kBAAW;AAClB,QAAA,OAAO,EAAEC,oBAAa;AACtB,QAAA,QAAQ,EAAEC,qBAAc;AACzB,KAAA;aACDC,eAAO;AACP,IAAA,UAAU,EAAE;sBACVC,uBAAY;mBACZC,oBAAS;qBACTC,sBAAW;qBACXC,sBAAW;AACZ,KAAA;aACDC,eAAO;kBACPC,oBAAY;iBACZC,mBAAW;iBACXC,uBAAW;;AAGb;AACA;AACA;AACA;AACA;AAEO,MAAM,SAAS,GAAgB;AACpC,IAAA,KAAK,EAAE;;AAEL,QAAA,YAAY,EAAEX,kBAAW,CAAC,OAAO,CAAC,GAAG,CAAC;AACtC,QAAA,SAAS,EAAEA,kBAAW,CAAC,OAAO,CAAC,GAAG,CAAC;AACnC,QAAA,cAAc,EAAEA,kBAAW,CAAC,OAAO,CAAC,GAAG,CAAC;AACxC,QAAA,eAAe,EAAEA,kBAAW,CAAC,OAAO,CAAC,GAAG,CAAC;;AAGzC,QAAA,YAAY,EAAEE,qBAAc,CAAC,OAAO,CAAC,OAAO;AAC5C,QAAA,YAAY,EAAEA,qBAAc,CAAC,OAAO,CAAC,OAAO;AAC5C,QAAA,UAAU,EAAEA,qBAAc,CAAC,KAAK,CAAC,OAAO;AACxC,QAAA,SAAS,EAAEA,qBAAc,CAAC,IAAI,CAAC,OAAO;;QAGtC,UAAU,EAAEE,uBAAY,CAAC,IAAI;AAC7B,QAAA,QAAQ,EAAEC,oBAAS,CAAC,EAAE;AACtB,QAAA,UAAU,EAAEA,oBAAS,CAAC,EAAE;AACxB,QAAA,UAAU,EAAEA,oBAAS,CAAC,EAAE;AACxB,QAAA,UAAU,EAAEA,oBAAS,CAAC,EAAE;;AAGxB,QAAA,OAAO,EAAEF,eAAO,CAAC,EAAE;AACnB,QAAA,SAAS,EAAEA,eAAO,CAAC,EAAE;AACrB,QAAA,SAAS,EAAEA,eAAO,CAAC,EAAE;AACrB,QAAA,SAAS,EAAEA,eAAO,CAAC,KAAK,CAAC;AACzB,QAAA,MAAM,EAAEA,eAAO,CAAC,EAAE;AAClB,QAAA,QAAQ,EAAEA,eAAO,CAAC,EAAE;AACpB,QAAA,QAAQ,EAAEA,eAAO,CAAC,EAAE;AACpB,QAAA,QAAQ,EAAEA,eAAO,CAAC,KAAK,CAAC;;AAGxB,QAAA,YAAY,EAAEM,oBAAY,CAAC,EAAE;AAC7B,QAAA,cAAc,EAAEA,oBAAY,CAAC,EAAE;AAC/B,QAAA,cAAc,EAAEA,oBAAY,CAAC,EAAE;AAC/B,QAAA,SAAS,EAAEC,mBAAW,CAAC,IAAI;AAC3B,QAAA,cAAc,EAAEA,mBAAW,CAAC,KAAK;;AAGjC,QAAA,SAAS,EAAET,oBAAa,CAAC,IAAI,CAAC,GAAG,CAAC;AAClC,QAAA,kBAAkB,EAAEA,oBAAa,CAAC,IAAI,CAAC,GAAG,CAAC;AAC3C,QAAA,iBAAiB,EAAEA,oBAAa,CAAC,IAAI,CAAC,GAAG,CAAC;AAC1C,QAAA,iBAAiB,EAAEA,oBAAa,CAAC,IAAI,CAAC,GAAG,CAAC;QAC1C,WAAW,EAAEA,oBAAa,CAAC,KAAK;AAChC,QAAA,aAAa,EAAEA,oBAAa,CAAC,IAAI,CAAC,EAAE,CAAC;AACrC,QAAA,WAAW,EAAEA,oBAAa,CAAC,IAAI,CAAC,GAAG,CAAC;AACpC,QAAA,oBAAoB,EAAEA,oBAAa,CAAC,IAAI,CAAC,GAAG,CAAC;;QAG7C,SAAS,EAAEO,eAAO,CAAC,EAAE;QACrB,kBAAkB,EAAEA,eAAO,CAAC,EAAE;AAC/B,KAAA;;;;;;"}

package/dist/cjs/tokens/borders.js

@@ -0,0 +1,53 @@
+'use strict';
+
+/**
+ * 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,
+};
+
+exports.borderRadius = borderRadius;
+exports.borderWidth = borderWidth;
+exports.borders = borders;
+//# sourceMappingURL=borders.js.map

package/dist/cjs/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/cjs/tokens/breakpoints.js

@@ -0,0 +1,25 @@
+'use strict';
+
+/**
+ * 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,
+};
+
+exports.breakpoints = breakpoints;
+//# sourceMappingURL=breakpoints.js.map

package/dist/cjs/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/cjs/tokens/colors.js

@@ -0,0 +1,97 @@
+'use strict';
+
+/**
+ * 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,
+};
+
+exports.brandColors = brandColors;
+exports.colors = colors;
+exports.neutralColors = neutralColors;
+exports.semanticColors = semanticColors;
+//# sourceMappingURL=colors.js.map

package/dist/cjs/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/cjs/tokens/shadows.js

@@ -0,0 +1,23 @@
+'use strict';
+
+/**
+ * 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)',
+};
+
+exports.shadows = shadows;
+//# sourceMappingURL=shadows.js.map

package/dist/cjs/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/cjs/tokens/spacing.js

@@ -0,0 +1,39 @@
+'use strict';
+
+/**
+ * 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,
+};
+
+exports.spacing = spacing;
+//# sourceMappingURL=spacing.js.map

package/dist/cjs/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;;;;;"}