@hyddenlabs/hydn-ui 0.3.13 → 0.3.15
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/components/data-display/code-block/code-block.js +1 -1
- package/dist/components/data-display/code-block/code-block.js.map +1 -1
- package/dist/components/data-display/data-grid/data-grid.js +1 -1
- package/dist/components/data-display/data-grid/data-grid.js.map +1 -1
- package/dist/components/feedback/tooltip/tooltip.d.ts +3 -1
- package/dist/components/feedback/tooltip/tooltip.d.ts.map +1 -1
- package/dist/components/feedback/tooltip/tooltip.js +3 -2
- package/dist/components/feedback/tooltip/tooltip.js.map +1 -1
- package/dist/components/forms/button/button-with-icon.d.ts +3 -0
- package/dist/components/forms/button/button-with-icon.d.ts.map +1 -1
- package/dist/components/forms/button/button-with-icon.js +23 -2
- package/dist/components/forms/button/button-with-icon.js.map +1 -1
- package/dist/components/forms/button/button.d.ts +6 -2
- package/dist/components/forms/button/button.d.ts.map +1 -1
- package/dist/components/forms/button/button.js +22 -6
- package/dist/components/forms/button/button.js.map +1 -1
- package/dist/components/forms/button/icon-button.d.ts +2 -0
- package/dist/components/forms/button/icon-button.d.ts.map +1 -1
- package/dist/components/forms/button/icon-button.js +3 -0
- package/dist/components/forms/button/icon-button.js.map +1 -1
- package/dist/components/forms/button/inline-button.d.ts +2 -0
- package/dist/components/forms/button/inline-button.d.ts.map +1 -1
- package/dist/components/forms/button/inline-button.js +8 -3
- package/dist/components/forms/button/inline-button.js.map +1 -1
- package/dist/components/forms/switch/switch.js +1 -1
- package/dist/components/forms/switch/switch.js.map +1 -1
- package/dist/components/typography/code/code.js +1 -1
- package/dist/components/typography/code/code.js.map +1 -1
- package/dist/style.css +1 -1
- package/dist/theme/tokens.d.ts +1 -0
- package/dist/theme/tokens.d.ts.map +1 -1
- package/dist/theme/tokens.js +38 -28
- package/dist/theme/tokens.js.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../src/theme/tokens.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiDlB,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,MAAM,CAAC;AAC7C,eAAO,MAAM,eAAe,EAA0B,UAAU,EAAE,CAAC;AAEnE,eAAO,MAAM,kBAAkB,sFAAuF,CAAC;AACvH,MAAM,MAAM,gBAAgB,GAAG,CAAC,OAAO,kBAAkB,CAAC,CAAC,MAAM,CAAC,CAAC;AACnE,MAAM,MAAM,eAAe,GAAG,GAAG,gBAAgB,IAAI,UAAU,EAAE,CAAC;AAElE,eAAO,MAAM,iBAAiB,mnRAE7B,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,UAAU,GAAG,eAAe,CAAC;AAE1D;;;;GAIG;AACH,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;AAEvG;;;GAGG;AACH,MAAM,MAAM,wBAAwB,GAAG,OAAO,CAAC,YAAY,EAAE,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC,CAAC;AAE/F;;;GAGG;AACH,MAAM,MAAM,kBAAkB,GAAG,OAAO,CAAC,YAAY,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC,CAAC;AAKhH;;GAEG;AACH,KAAK,kBAAkB,GAAG,MAAM,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC;AAEvD;;;GAGG;AACH,eAAO,MAAM,aAAa,EAAE;IAC1B,KAAK,EAAE,kBAAkB,CAAC;IAC1B,OAAO,EAAE,kBAAkB,CAAC;IAC5B,KAAK,EAAE,kBAAkB,CAAC;IAC1B,IAAI,EAAE,kBAAkB,CAAC;IACzB,IAAI,EAAE,kBAAkB,CAAC;IACzB,KAAK,EAAE,kBAAkB,GAAG;QAAE,QAAQ,EAAE,kBAAkB,CAAA;KAAE,CAAC;IAC7D,KAAK,EAAE,kBAAkB,CAAC;IAC1B,UAAU,EAAE;QAAE,IAAI,EAAE,kBAAkB,CAAC;QAAC,MAAM,EAAE,kBAAkB,CAAA;KAAE,CAAC;
|
|
1
|
+
{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../src/theme/tokens.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiDlB,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,MAAM,CAAC;AAC7C,eAAO,MAAM,eAAe,EAA0B,UAAU,EAAE,CAAC;AAEnE,eAAO,MAAM,kBAAkB,sFAAuF,CAAC;AACvH,MAAM,MAAM,gBAAgB,GAAG,CAAC,OAAO,kBAAkB,CAAC,CAAC,MAAM,CAAC,CAAC;AACnE,MAAM,MAAM,eAAe,GAAG,GAAG,gBAAgB,IAAI,UAAU,EAAE,CAAC;AAElE,eAAO,MAAM,iBAAiB,mnRAE7B,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,UAAU,GAAG,eAAe,CAAC;AAE1D;;;;GAIG;AACH,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;AAEvG;;;GAGG;AACH,MAAM,MAAM,wBAAwB,GAAG,OAAO,CAAC,YAAY,EAAE,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC,CAAC;AAE/F;;;GAGG;AACH,MAAM,MAAM,kBAAkB,GAAG,OAAO,CAAC,YAAY,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC,CAAC;AAKhH;;GAEG;AACH,KAAK,kBAAkB,GAAG,MAAM,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC;AAEvD;;;GAGG;AACH,eAAO,MAAM,aAAa,EAAE;IAC1B,KAAK,EAAE,kBAAkB,CAAC;IAC1B,OAAO,EAAE,kBAAkB,CAAC;IAC5B,KAAK,EAAE,kBAAkB,CAAC;IAC1B,IAAI,EAAE,kBAAkB,CAAC;IACzB,IAAI,EAAE,kBAAkB,CAAC;IACzB,IAAI,EAAE,kBAAkB,CAAC;IACzB,KAAK,EAAE,kBAAkB,GAAG;QAAE,QAAQ,EAAE,kBAAkB,CAAA;KAAE,CAAC;IAC7D,KAAK,EAAE,kBAAkB,CAAC;IAC1B,UAAU,EAAE;QAAE,IAAI,EAAE,kBAAkB,CAAC;QAAC,MAAM,EAAE,kBAAkB,CAAA;KAAE,CAAC;CAmItE,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,MAAM,OAAO,aAAa,CAAC;AAC3D,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,iBAAiB,IAAI,MAAM,CAAC,OAAO,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC;AAE3F,eAAO,MAAM,KAAK;;;;;CAKjB,CAAC;AAEF,eAAO,MAAM,KAAK;;;CAGjB,CAAC;AAEF,eAAO,MAAM,UAAU,sCAAuC,CAAC;AAC/D,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC;AAEpD,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAIvD,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,mBAAmB,g0BAyDtB,CAAC;AAEX,MAAM,MAAM,kBAAkB,GAAG,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,CAAC,CAAC"}
|
package/dist/theme/tokens.js
CHANGED
|
@@ -57,13 +57,13 @@ const outlineBaseClasses = "border-2 bg-transparent transition-colors transition
|
|
|
57
57
|
const colorVariants = {
|
|
58
58
|
// Solid buttons/elements - filled background
|
|
59
59
|
solid: {
|
|
60
|
-
neutral: "bg-neutral text-neutral-foreground hover:bg-neutral-hover active:bg-neutral-active",
|
|
61
|
-
primary: "bg-primary text-primary-foreground hover:bg-primary-hover active:bg-primary-active",
|
|
62
|
-
accent: "bg-accent text-accent-foreground hover:bg-accent-hover active:bg-accent-active",
|
|
63
|
-
info: "bg-info text-info-foreground hover:bg-info-hover active:bg-info-active",
|
|
64
|
-
success: "bg-success text-success-foreground hover:bg-success-hover active:bg-success-active",
|
|
65
|
-
warning: "bg-warning text-warning-foreground hover:bg-warning-hover active:bg-warning-active",
|
|
66
|
-
error: "bg-error text-error-foreground hover:bg-error-hover active:bg-error-active"
|
|
60
|
+
neutral: "border-2 border-transparent bg-neutral text-neutral-foreground hover:bg-neutral-hover active:bg-neutral-active",
|
|
61
|
+
primary: "border-2 border-transparent bg-primary text-primary-foreground hover:bg-primary-hover active:bg-primary-active",
|
|
62
|
+
accent: "border-2 border-transparent bg-accent text-accent-foreground hover:bg-accent-hover active:bg-accent-active",
|
|
63
|
+
info: "border-2 border-transparent bg-info text-info-foreground hover:bg-info-hover active:bg-info-active",
|
|
64
|
+
success: "border-2 border-transparent bg-success text-success-foreground hover:bg-success-hover active:bg-success-active",
|
|
65
|
+
warning: "border-2 border-transparent bg-warning text-warning-foreground hover:bg-warning-hover active:bg-warning-active",
|
|
66
|
+
error: "border-2 border-transparent bg-error text-error-foreground hover:bg-error-hover active:bg-error-active"
|
|
67
67
|
},
|
|
68
68
|
// Outline style - transparent with border
|
|
69
69
|
outline: {
|
|
@@ -77,33 +77,43 @@ const colorVariants = {
|
|
|
77
77
|
},
|
|
78
78
|
// Ghost style - transparent with subtle hover
|
|
79
79
|
ghost: {
|
|
80
|
-
neutral: "bg-transparent text-foreground hover:bg-neutral/10 active:bg-neutral/20",
|
|
81
|
-
primary: "bg-transparent text-primary hover:bg-primary/10 active:bg-primary/20",
|
|
82
|
-
accent: "bg-transparent text-accent hover:bg-accent/10 active:bg-accent/20",
|
|
83
|
-
info: "bg-transparent text-info hover:bg-info/10 active:bg-info/20",
|
|
84
|
-
success: "bg-transparent text-success hover:bg-success/10 active:bg-success/20",
|
|
85
|
-
warning: "bg-transparent text-warning hover:bg-warning/10 active:bg-warning/20",
|
|
86
|
-
error: "bg-transparent text-error hover:bg-error/10 active:bg-error/20"
|
|
80
|
+
neutral: "border-2 border-transparent bg-transparent text-foreground hover:bg-neutral/10 active:bg-neutral/20",
|
|
81
|
+
primary: "border-2 border-transparent bg-transparent text-primary hover:bg-primary/10 active:bg-primary/20",
|
|
82
|
+
accent: "border-2 border-transparent bg-transparent text-accent hover:bg-accent/10 active:bg-accent/20",
|
|
83
|
+
info: "border-2 border-transparent bg-transparent text-info hover:bg-info/10 active:bg-info/20",
|
|
84
|
+
success: "border-2 border-transparent bg-transparent text-success hover:bg-success/10 active:bg-success/20",
|
|
85
|
+
warning: "border-2 border-transparent bg-transparent text-warning hover:bg-warning/10 active:bg-warning/20",
|
|
86
|
+
error: "border-2 border-transparent bg-transparent text-error hover:bg-error/10 active:bg-error/20"
|
|
87
87
|
},
|
|
88
88
|
// Soft style - subtle background
|
|
89
89
|
soft: {
|
|
90
|
-
neutral: "bg-neutral/20 text-neutral hover:bg-neutral/30 active:bg-neutral/40",
|
|
91
|
-
primary: "bg-primary/20 text-primary hover:bg-primary/30 active:bg-primary/40",
|
|
92
|
-
accent: "bg-accent/20 text-accent hover:bg-accent/30 active:bg-accent/40",
|
|
93
|
-
info: "bg-info/20 text-info hover:bg-info/30 active:bg-info/40",
|
|
94
|
-
success: "bg-success/20 text-success hover:bg-success/30 active:bg-success/40",
|
|
95
|
-
warning: "bg-warning/20 text-warning hover:bg-warning/30 active:bg-warning/40",
|
|
96
|
-
error: "bg-error/20 text-error hover:bg-error/30 active:bg-error/40"
|
|
90
|
+
neutral: "border-2 border-transparent bg-neutral/20 text-neutral hover:bg-neutral/30 active:bg-neutral/40",
|
|
91
|
+
primary: "border-2 border-transparent bg-primary/20 text-primary hover:bg-primary/30 active:bg-primary/40",
|
|
92
|
+
accent: "border-2 border-transparent bg-accent/20 text-accent hover:bg-accent/30 active:bg-accent/40",
|
|
93
|
+
info: "border-2 border-transparent bg-info/20 text-info hover:bg-info/30 active:bg-info/40",
|
|
94
|
+
success: "border-2 border-transparent bg-success/20 text-success hover:bg-success/30 active:bg-success/40",
|
|
95
|
+
warning: "border-2 border-transparent bg-warning/20 text-warning hover:bg-warning/30 active:bg-warning/40",
|
|
96
|
+
error: "border-2 border-transparent bg-error/20 text-error hover:bg-error/30 active:bg-error/40"
|
|
97
|
+
},
|
|
98
|
+
// None style - fully transparent, no background on any state
|
|
99
|
+
none: {
|
|
100
|
+
neutral: "border-2 border-transparent bg-transparent text-foreground hover:bg-transparent active:bg-transparent",
|
|
101
|
+
primary: "border-2 border-transparent bg-transparent text-primary hover:bg-transparent active:bg-transparent",
|
|
102
|
+
accent: "border-2 border-transparent bg-transparent text-accent hover:bg-transparent active:bg-transparent",
|
|
103
|
+
info: "border-2 border-transparent bg-transparent text-info hover:bg-transparent active:bg-transparent",
|
|
104
|
+
success: "border-2 border-transparent bg-transparent text-success hover:bg-transparent active:bg-transparent",
|
|
105
|
+
warning: "border-2 border-transparent bg-transparent text-warning hover:bg-transparent active:bg-transparent",
|
|
106
|
+
error: "border-2 border-transparent bg-transparent text-error hover:bg-transparent active:bg-transparent"
|
|
97
107
|
},
|
|
98
108
|
// Link style - text only with underline on hover
|
|
99
109
|
link: {
|
|
100
|
-
neutral: "bg-transparent text-foreground underline-offset-4 hover:underline",
|
|
101
|
-
primary: "bg-transparent text-primary underline-offset-4 hover:underline",
|
|
102
|
-
accent: "bg-transparent text-accent underline-offset-4 hover:underline",
|
|
103
|
-
info: "bg-transparent text-info underline-offset-4 hover:underline",
|
|
104
|
-
success: "bg-transparent text-success underline-offset-4 hover:underline",
|
|
105
|
-
warning: "bg-transparent text-warning underline-offset-4 hover:underline",
|
|
106
|
-
error: "bg-transparent text-error underline-offset-4 hover:underline"
|
|
110
|
+
neutral: "border-2 border-transparent bg-transparent text-foreground underline-offset-4 hover:underline",
|
|
111
|
+
primary: "border-2 border-transparent bg-transparent text-primary underline-offset-4 hover:underline",
|
|
112
|
+
accent: "border-2 border-transparent bg-transparent text-accent underline-offset-4 hover:underline",
|
|
113
|
+
info: "border-2 border-transparent bg-transparent text-info underline-offset-4 hover:underline",
|
|
114
|
+
success: "border-2 border-transparent bg-transparent text-success underline-offset-4 hover:underline",
|
|
115
|
+
warning: "border-2 border-transparent bg-transparent text-warning underline-offset-4 hover:underline",
|
|
116
|
+
error: "border-2 border-transparent bg-transparent text-error underline-offset-4 hover:underline"
|
|
107
117
|
},
|
|
108
118
|
// Badge/Chip style - subtle filled background with border
|
|
109
119
|
badge: {
|
package/dist/theme/tokens.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tokens.js","sources":["../../src/theme/tokens.ts"],"sourcesContent":["/**\n * Theme color tokens and helpers for the design system.\n * Maps CSS custom properties from globals.css (light/dark) to JS for inline styles and class generation.\n */\n\nexport const colors = {\n background: 'var(--background)',\n 'background-hover': 'var(--background-hover)',\n 'background-active': 'var(--background-active)',\n foreground: 'var(--foreground)',\n 'foreground-hover': 'var(--foreground-hover)',\n card: 'var(--card)',\n 'card-hover': 'var(--card-hover)',\n 'card-active': 'var(--card-active)',\n 'card-foreground': 'var(--card-foreground)',\n popover: 'var(--popover)',\n 'popover-foreground': 'var(--popover-foreground)',\n primary: 'var(--primary)',\n 'primary-hover': 'var(--primary-hover)',\n 'primary-active': 'var(--primary-active)',\n 'primary-foreground': 'var(--primary-foreground)',\n accent: 'var(--accent)',\n 'accent-hover': 'var(--accent-hover)',\n 'accent-active': 'var(--accent-active)',\n 'accent-foreground': 'var(--accent-foreground)',\n neutral: 'var(--neutral)',\n 'neutral-hover': 'var(--neutral-hover)',\n 'neutral-active': 'var(--neutral-active)',\n 'neutral-foreground': 'var(--neutral-foreground)',\n muted: 'var(--muted)',\n 'muted-hover': 'var(--muted-hover)',\n 'muted-active': 'var(--muted-active)',\n 'muted-foreground': 'var(--muted-foreground)',\n error: 'var(--error)',\n 'error-hover': 'var(--error-hover)',\n 'error-active': 'var(--error-active)',\n 'error-foreground': 'var(--error-foreground)',\n success: 'var(--success)',\n 'success-hover': 'var(--success-hover)',\n 'success-active': 'var(--success-active)',\n 'success-foreground': 'var(--success-foreground)',\n warning: 'var(--warning)',\n 'warning-hover': 'var(--warning-hover)',\n 'warning-active': 'var(--warning-active)',\n 'warning-foreground': 'var(--warning-foreground)',\n info: 'var(--info)',\n 'info-hover': 'var(--info-hover)',\n 'info-active': 'var(--info-active)',\n 'info-foreground': 'var(--info-foreground)',\n border: 'var(--border)',\n 'border-hover': 'var(--border-hover)',\n input: 'var(--input)',\n 'input-hover': 'var(--input-hover)',\n ring: 'var(--ring)'\n};\n\nexport type ThemeColor = keyof typeof colors;\nexport const themeColorNames = Object.keys(colors) as ThemeColor[];\n\nexport const colorClassPrefixes = ['text', 'bg', 'border', 'ring', 'outline', 'decoration', 'fill', 'stroke'] as const;\nexport type ColorClassPrefix = (typeof colorClassPrefixes)[number];\nexport type ThemeColorClass = `${ColorClassPrefix}-${ThemeColor}`;\n\nexport const themeColorClasses = colorClassPrefixes.flatMap((prefix) =>\n themeColorNames.map((color) => `${prefix}-${color}` as ThemeColorClass)\n);\n\nexport type ThemeColorProp = ThemeColor | ThemeColorClass;\n\n/**\n * Core color variants used across all components\n * Use this type for component `variant` props to ensure consistency\n * Includes: neutral, primary, accent, info, success, warning, error\n */\nexport type ColorVariant = 'neutral' | 'primary' | 'success' | 'warning' | 'error' | 'info' | 'accent';\n\n/**\n * Notification/alert-specific color variants (excludes neutral/primary/accent)\n * For feedback components like Alert, Toast, etc.\n */\nexport type NotificationColorVariant = Exclude<ColorVariant, 'neutral' | 'primary' | 'accent'>;\n\n/**\n * Common color variants for most components (the essential 5)\n * Includes: neutral, primary, success, warning, error\n */\nexport type CommonColorVariant = Extract<ColorVariant, 'neutral' | 'primary' | 'success' | 'warning' | 'error'>;\n\nconst outlineBaseClasses =\n 'border-2 bg-transparent transition-colors transition-shadow duration-200 ease-out focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-transparent' as const;\n\n/**\n * Type-safe record ensuring all color variants are defined for each style\n */\ntype ColorVariantRecord = Record<ColorVariant, string>;\n\n/**\n * Standardized color variant classes for consistent component styling\n * All variants support: neutral, primary, accent, info, success, warning, error\n */\nexport const colorVariants: {\n solid: ColorVariantRecord;\n outline: ColorVariantRecord;\n ghost: ColorVariantRecord;\n soft: ColorVariantRecord;\n link: ColorVariantRecord;\n badge: ColorVariantRecord & { inverted: ColorVariantRecord };\n alert: ColorVariantRecord;\n breadcrumb: { link: ColorVariantRecord; active: ColorVariantRecord };\n} = {\n // Solid buttons/elements - filled background\n solid: {\n neutral: 'bg-neutral text-neutral-foreground hover:bg-neutral-hover active:bg-neutral-active',\n primary: 'bg-primary text-primary-foreground hover:bg-primary-hover active:bg-primary-active',\n accent: 'bg-accent text-accent-foreground hover:bg-accent-hover active:bg-accent-active',\n info: 'bg-info text-info-foreground hover:bg-info-hover active:bg-info-active',\n success: 'bg-success text-success-foreground hover:bg-success-hover active:bg-success-active',\n warning: 'bg-warning text-warning-foreground hover:bg-warning-hover active:bg-warning-active',\n error: 'bg-error text-error-foreground hover:bg-error-hover active:bg-error-active'\n },\n\n // Outline style - transparent with border\n outline: {\n neutral: `${outlineBaseClasses} border-neutral text-neutral hover:border-neutral-hover hover:text-neutral-hover hover:shadow-[inset_0_0_0_1px_var(--neutral))] focus-visible:shadow-[inset_0_0_0_1px_var(--neutral))] focus-visible:outline-neutral/3`,\n primary: `${outlineBaseClasses} border-primary text-primary hover:border-primary-hover hover:text-primary-hover hover:shadow-[inset_0_0_0_1px_var(--primary))] focus-visible:shadow-[inset_0_0_0_1px_var(--primary))] focus-visible:outline-primary/3`,\n accent: `${outlineBaseClasses} border-accent text-accent hover:border-accent-hover hover:text-accent-hover hover:shadow-[inset_0_0_0_1px_var(--accent))] focus-visible:shadow-[inset_0_0_0_1px_var(--accent))] focus-visible:outline-accent/3`,\n info: `${outlineBaseClasses} border-info text-info hover:border-info-hover hover:text-info-hover hover:shadow-[inset_0_0_0_1px_var(--info))] focus-visible:shadow-[inset_0_0_0_1px_var(--info))] focus-visible:outline-info/3`,\n success: `${outlineBaseClasses} border-success text-success hover:border-success-hover hover:text-success-hover hover:shadow-[inset_0_0_0_1px_var(--success))] focus-visible:shadow-[inset_0_0_0_1px_var(--success))] focus-visible:outline-success/3`,\n warning: `${outlineBaseClasses} border-warning text-warning hover:border-warning-hover hover:text-warning-hover hover:shadow-[inset_0_0_0_1px_var(--warning))] focus-visible:shadow-[inset_0_0_0_1px_var(--warning))] focus-visible:outline-warning/3`,\n error: `${outlineBaseClasses} border-error text-error hover:border-error-hover hover:text-error-hover hover:shadow-[inset_0_0_0_1px_var(--error))] focus-visible:shadow-[inset_0_0_0_1px_var(--error))] focus-visible:outline-error/5`\n },\n\n // Ghost style - transparent with subtle hover\n ghost: {\n neutral: 'bg-transparent text-foreground hover:bg-neutral/10 active:bg-neutral/20',\n primary: 'bg-transparent text-primary hover:bg-primary/10 active:bg-primary/20',\n accent: 'bg-transparent text-accent hover:bg-accent/10 active:bg-accent/20',\n info: 'bg-transparent text-info hover:bg-info/10 active:bg-info/20',\n success: 'bg-transparent text-success hover:bg-success/10 active:bg-success/20',\n warning: 'bg-transparent text-warning hover:bg-warning/10 active:bg-warning/20',\n error: 'bg-transparent text-error hover:bg-error/10 active:bg-error/20'\n },\n\n // Soft style - subtle background\n soft: {\n neutral: 'bg-neutral/20 text-neutral hover:bg-neutral/30 active:bg-neutral/40',\n primary: 'bg-primary/20 text-primary hover:bg-primary/30 active:bg-primary/40',\n accent: 'bg-accent/20 text-accent hover:bg-accent/30 active:bg-accent/40',\n info: 'bg-info/20 text-info hover:bg-info/30 active:bg-info/40',\n success: 'bg-success/20 text-success hover:bg-success/30 active:bg-success/40',\n warning: 'bg-warning/20 text-warning hover:bg-warning/30 active:bg-warning/40',\n error: 'bg-error/20 text-error hover:bg-error/30 active:bg-error/40'\n },\n\n // Link style - text only with underline on hover\n link: {\n neutral: 'bg-transparent text-foreground underline-offset-4 hover:underline',\n primary: 'bg-transparent text-primary underline-offset-4 hover:underline',\n accent: 'bg-transparent text-accent underline-offset-4 hover:underline',\n info: 'bg-transparent text-info underline-offset-4 hover:underline',\n success: 'bg-transparent text-success underline-offset-4 hover:underline',\n warning: 'bg-transparent text-warning underline-offset-4 hover:underline',\n error: 'bg-transparent text-error underline-offset-4 hover:underline'\n },\n\n // Badge/Chip style - subtle filled background with border\n badge: {\n neutral: 'bg-neutral/5 text-neutral border border-neutral',\n primary: 'bg-primary/5 text-primary border border-primary',\n accent: 'bg-accent/5 text-accent border border-accent',\n info: 'bg-info/5 text-info border border-info',\n success: 'bg-success/5 text-success border border-success',\n warning: 'bg-warning/5 text-warning border border-warning',\n error: 'bg-error/5 text-error border border-error',\n inverted: {\n neutral: 'bg-neutral/40 text-neutral-foreground border border-neutral',\n primary: 'bg-primary/90 text-primary-foreground border border-primary-foreground',\n accent: 'bg-accent/90 text-accent-foreground border border-accent',\n info: 'bg-info/90 text-info-foreground border border-info',\n success: 'bg-success/90 text-success-foreground border border-success',\n warning: 'bg-warning/90 text-warning-foreground border border-warning',\n error: 'bg-error/90 text-error-foreground border border-error'\n }\n },\n\n // Alert style - translucent background with border\n alert: {\n neutral: 'bg-neutral/30 text-foreground border-neutral/50 backdrop-blur-3xl',\n primary: 'bg-primary/30 text-foreground border-primary/50 backdrop-blur-3xl',\n accent: 'bg-accent/30 text-foreground border-accent/50 backdrop-blur-3xl',\n info: 'bg-info/30 text-foreground border-info/50 backdrop-blur-3xl',\n success: 'bg-success/30 text-foreground border-success/50 backdrop-blur-3xl',\n warning: 'bg-warning/30 text-foreground border-warning/50 backdrop-blur-3xl',\n error: 'bg-error/30 text-foreground border-error/50 backdrop-blur-3xl'\n },\n\n // Breadcrumb style - link and active states\n breadcrumb: {\n link: {\n neutral:\n 'text-neutral hover:text-neutral-hover hover:underline cursor-pointer transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-neutral-ring rounded px-1 -mx-1',\n primary:\n 'text-primary hover:text-primary-hover hover:underline cursor-pointer transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-primary-ring rounded px-1 -mx-1',\n accent:\n 'text-accent hover:text-accent-hover hover:underline cursor-pointer transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-accent-ring rounded px-1 -mx-1',\n info: 'text-info hover:text-info-hover hover:underline cursor-pointer transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-info-ring rounded px-1 -mx-1',\n success:\n 'text-success hover:text-success-hover hover:underline cursor-pointer transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-success-ring rounded px-1 -mx-1',\n warning:\n 'text-warning hover:text-warning-hover hover:underline cursor-pointer transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-warning-ring rounded px-1 -mx-1',\n error:\n 'text-error hover:text-error-hover hover:underline cursor-pointer transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-error-ring rounded px-1 -mx-1'\n },\n active: {\n neutral: 'text-neutral-active font-medium',\n primary: 'text-primary-active font-medium',\n accent: 'text-accent-active font-medium',\n info: 'text-info-active font-medium',\n success: 'text-success-active font-medium',\n warning: 'text-warning-active font-medium',\n error: 'text-error-active font-medium'\n }\n }\n};\n\nexport type ColorVariantStyle = keyof typeof colorVariants;\nexport type ColorVariantKey<T extends ColorVariantStyle> = keyof (typeof colorVariants)[T];\n\nexport const radii = {\n sm: '0.25rem',\n md: '0.5rem',\n lg: '0.75rem',\n xl: '1rem'\n};\n\nexport const fonts = {\n sans: \"'Inter', system-ui, sans-serif\",\n mono: \"'JetBrains Mono', monospace\"\n};\n\nexport const alignments = ['left', 'center', 'right'] as const;\nexport type Alignment = (typeof alignments)[number];\n\nexport const inputAlignClasses: Record<Alignment, string> = {\n left: 'mr-auto',\n center: 'mx-auto',\n right: 'ml-auto'\n};\n\n/**\n * HTML autocomplete attribute values for form inputs\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete\n */\nexport const autocompleteOptions = [\n 'on',\n 'off',\n 'address-line1',\n 'address-line2',\n 'address-line3',\n 'address-level1',\n 'address-level2',\n 'address-level3',\n 'address-level4',\n 'street-address',\n 'country',\n 'country-name',\n 'postal-code',\n 'name',\n 'additional-name',\n 'family-name',\n 'given-name',\n 'honoric-prefix',\n 'honoric-suffix',\n 'nickname',\n 'organization-title',\n 'username',\n 'new-password',\n 'current-password',\n 'bday',\n 'bday-day',\n 'bday-month',\n 'bday-year',\n 'sex',\n 'one-time-code',\n 'organization',\n 'cc-name',\n 'cc-given-name',\n 'cc-additional-name',\n 'cc-family-name',\n 'cc-number',\n 'cc-exp',\n 'cc-exp-month',\n 'cc-exp-year',\n 'cc-csc',\n 'cc-type',\n 'transaction-currency',\n 'transaction-amount',\n 'language',\n 'url',\n 'email',\n 'photo',\n 'tel',\n 'tel-country-code',\n 'tel-national',\n 'tel-area-code',\n 'tel-local',\n 'tel-local-prefix',\n 'tel-local-suffix',\n 'tel-extension',\n 'impp'\n] as const;\n\nexport type AutocompleteOption = (typeof autocompleteOptions)[number];\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"tokens.js","sources":["../../src/theme/tokens.ts"],"sourcesContent":["/**\n * Theme color tokens and helpers for the design system.\n * Maps CSS custom properties from globals.css (light/dark) to JS for inline styles and class generation.\n */\n\nexport const colors = {\n background: 'var(--background)',\n 'background-hover': 'var(--background-hover)',\n 'background-active': 'var(--background-active)',\n foreground: 'var(--foreground)',\n 'foreground-hover': 'var(--foreground-hover)',\n card: 'var(--card)',\n 'card-hover': 'var(--card-hover)',\n 'card-active': 'var(--card-active)',\n 'card-foreground': 'var(--card-foreground)',\n popover: 'var(--popover)',\n 'popover-foreground': 'var(--popover-foreground)',\n primary: 'var(--primary)',\n 'primary-hover': 'var(--primary-hover)',\n 'primary-active': 'var(--primary-active)',\n 'primary-foreground': 'var(--primary-foreground)',\n accent: 'var(--accent)',\n 'accent-hover': 'var(--accent-hover)',\n 'accent-active': 'var(--accent-active)',\n 'accent-foreground': 'var(--accent-foreground)',\n neutral: 'var(--neutral)',\n 'neutral-hover': 'var(--neutral-hover)',\n 'neutral-active': 'var(--neutral-active)',\n 'neutral-foreground': 'var(--neutral-foreground)',\n muted: 'var(--muted)',\n 'muted-hover': 'var(--muted-hover)',\n 'muted-active': 'var(--muted-active)',\n 'muted-foreground': 'var(--muted-foreground)',\n error: 'var(--error)',\n 'error-hover': 'var(--error-hover)',\n 'error-active': 'var(--error-active)',\n 'error-foreground': 'var(--error-foreground)',\n success: 'var(--success)',\n 'success-hover': 'var(--success-hover)',\n 'success-active': 'var(--success-active)',\n 'success-foreground': 'var(--success-foreground)',\n warning: 'var(--warning)',\n 'warning-hover': 'var(--warning-hover)',\n 'warning-active': 'var(--warning-active)',\n 'warning-foreground': 'var(--warning-foreground)',\n info: 'var(--info)',\n 'info-hover': 'var(--info-hover)',\n 'info-active': 'var(--info-active)',\n 'info-foreground': 'var(--info-foreground)',\n border: 'var(--border)',\n 'border-hover': 'var(--border-hover)',\n input: 'var(--input)',\n 'input-hover': 'var(--input-hover)',\n ring: 'var(--ring)'\n};\n\nexport type ThemeColor = keyof typeof colors;\nexport const themeColorNames = Object.keys(colors) as ThemeColor[];\n\nexport const colorClassPrefixes = ['text', 'bg', 'border', 'ring', 'outline', 'decoration', 'fill', 'stroke'] as const;\nexport type ColorClassPrefix = (typeof colorClassPrefixes)[number];\nexport type ThemeColorClass = `${ColorClassPrefix}-${ThemeColor}`;\n\nexport const themeColorClasses = colorClassPrefixes.flatMap((prefix) =>\n themeColorNames.map((color) => `${prefix}-${color}` as ThemeColorClass)\n);\n\nexport type ThemeColorProp = ThemeColor | ThemeColorClass;\n\n/**\n * Core color variants used across all components\n * Use this type for component `variant` props to ensure consistency\n * Includes: neutral, primary, accent, info, success, warning, error\n */\nexport type ColorVariant = 'neutral' | 'primary' | 'success' | 'warning' | 'error' | 'info' | 'accent';\n\n/**\n * Notification/alert-specific color variants (excludes neutral/primary/accent)\n * For feedback components like Alert, Toast, etc.\n */\nexport type NotificationColorVariant = Exclude<ColorVariant, 'neutral' | 'primary' | 'accent'>;\n\n/**\n * Common color variants for most components (the essential 5)\n * Includes: neutral, primary, success, warning, error\n */\nexport type CommonColorVariant = Extract<ColorVariant, 'neutral' | 'primary' | 'success' | 'warning' | 'error'>;\n\nconst outlineBaseClasses =\n 'border-2 bg-transparent transition-colors transition-shadow duration-200 ease-out focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-transparent' as const;\n\n/**\n * Type-safe record ensuring all color variants are defined for each style\n */\ntype ColorVariantRecord = Record<ColorVariant, string>;\n\n/**\n * Standardized color variant classes for consistent component styling\n * All variants support: neutral, primary, accent, info, success, warning, error\n */\nexport const colorVariants: {\n solid: ColorVariantRecord;\n outline: ColorVariantRecord;\n ghost: ColorVariantRecord;\n soft: ColorVariantRecord;\n link: ColorVariantRecord;\n none: ColorVariantRecord;\n badge: ColorVariantRecord & { inverted: ColorVariantRecord };\n alert: ColorVariantRecord;\n breadcrumb: { link: ColorVariantRecord; active: ColorVariantRecord };\n} = {\n // Solid buttons/elements - filled background\n solid: {\n neutral:\n 'border-2 border-transparent bg-neutral text-neutral-foreground hover:bg-neutral-hover active:bg-neutral-active',\n primary:\n 'border-2 border-transparent bg-primary text-primary-foreground hover:bg-primary-hover active:bg-primary-active',\n accent:\n 'border-2 border-transparent bg-accent text-accent-foreground hover:bg-accent-hover active:bg-accent-active',\n info: 'border-2 border-transparent bg-info text-info-foreground hover:bg-info-hover active:bg-info-active',\n success:\n 'border-2 border-transparent bg-success text-success-foreground hover:bg-success-hover active:bg-success-active',\n warning:\n 'border-2 border-transparent bg-warning text-warning-foreground hover:bg-warning-hover active:bg-warning-active',\n error: 'border-2 border-transparent bg-error text-error-foreground hover:bg-error-hover active:bg-error-active'\n },\n\n // Outline style - transparent with border\n outline: {\n neutral: `${outlineBaseClasses} border-neutral text-neutral hover:border-neutral-hover hover:text-neutral-hover hover:shadow-[inset_0_0_0_1px_var(--neutral))] focus-visible:shadow-[inset_0_0_0_1px_var(--neutral))] focus-visible:outline-neutral/3`,\n primary: `${outlineBaseClasses} border-primary text-primary hover:border-primary-hover hover:text-primary-hover hover:shadow-[inset_0_0_0_1px_var(--primary))] focus-visible:shadow-[inset_0_0_0_1px_var(--primary))] focus-visible:outline-primary/3`,\n accent: `${outlineBaseClasses} border-accent text-accent hover:border-accent-hover hover:text-accent-hover hover:shadow-[inset_0_0_0_1px_var(--accent))] focus-visible:shadow-[inset_0_0_0_1px_var(--accent))] focus-visible:outline-accent/3`,\n info: `${outlineBaseClasses} border-info text-info hover:border-info-hover hover:text-info-hover hover:shadow-[inset_0_0_0_1px_var(--info))] focus-visible:shadow-[inset_0_0_0_1px_var(--info))] focus-visible:outline-info/3`,\n success: `${outlineBaseClasses} border-success text-success hover:border-success-hover hover:text-success-hover hover:shadow-[inset_0_0_0_1px_var(--success))] focus-visible:shadow-[inset_0_0_0_1px_var(--success))] focus-visible:outline-success/3`,\n warning: `${outlineBaseClasses} border-warning text-warning hover:border-warning-hover hover:text-warning-hover hover:shadow-[inset_0_0_0_1px_var(--warning))] focus-visible:shadow-[inset_0_0_0_1px_var(--warning))] focus-visible:outline-warning/3`,\n error: `${outlineBaseClasses} border-error text-error hover:border-error-hover hover:text-error-hover hover:shadow-[inset_0_0_0_1px_var(--error))] focus-visible:shadow-[inset_0_0_0_1px_var(--error))] focus-visible:outline-error/5`\n },\n\n // Ghost style - transparent with subtle hover\n ghost: {\n neutral: 'border-2 border-transparent bg-transparent text-foreground hover:bg-neutral/10 active:bg-neutral/20',\n primary: 'border-2 border-transparent bg-transparent text-primary hover:bg-primary/10 active:bg-primary/20',\n accent: 'border-2 border-transparent bg-transparent text-accent hover:bg-accent/10 active:bg-accent/20',\n info: 'border-2 border-transparent bg-transparent text-info hover:bg-info/10 active:bg-info/20',\n success: 'border-2 border-transparent bg-transparent text-success hover:bg-success/10 active:bg-success/20',\n warning: 'border-2 border-transparent bg-transparent text-warning hover:bg-warning/10 active:bg-warning/20',\n error: 'border-2 border-transparent bg-transparent text-error hover:bg-error/10 active:bg-error/20'\n },\n\n // Soft style - subtle background\n soft: {\n neutral: 'border-2 border-transparent bg-neutral/20 text-neutral hover:bg-neutral/30 active:bg-neutral/40',\n primary: 'border-2 border-transparent bg-primary/20 text-primary hover:bg-primary/30 active:bg-primary/40',\n accent: 'border-2 border-transparent bg-accent/20 text-accent hover:bg-accent/30 active:bg-accent/40',\n info: 'border-2 border-transparent bg-info/20 text-info hover:bg-info/30 active:bg-info/40',\n success: 'border-2 border-transparent bg-success/20 text-success hover:bg-success/30 active:bg-success/40',\n warning: 'border-2 border-transparent bg-warning/20 text-warning hover:bg-warning/30 active:bg-warning/40',\n error: 'border-2 border-transparent bg-error/20 text-error hover:bg-error/30 active:bg-error/40'\n },\n\n // None style - fully transparent, no background on any state\n none: {\n neutral: 'border-2 border-transparent bg-transparent text-foreground hover:bg-transparent active:bg-transparent',\n primary: 'border-2 border-transparent bg-transparent text-primary hover:bg-transparent active:bg-transparent',\n accent: 'border-2 border-transparent bg-transparent text-accent hover:bg-transparent active:bg-transparent',\n info: 'border-2 border-transparent bg-transparent text-info hover:bg-transparent active:bg-transparent',\n success: 'border-2 border-transparent bg-transparent text-success hover:bg-transparent active:bg-transparent',\n warning: 'border-2 border-transparent bg-transparent text-warning hover:bg-transparent active:bg-transparent',\n error: 'border-2 border-transparent bg-transparent text-error hover:bg-transparent active:bg-transparent'\n },\n\n // Link style - text only with underline on hover\n link: {\n neutral: 'border-2 border-transparent bg-transparent text-foreground underline-offset-4 hover:underline',\n primary: 'border-2 border-transparent bg-transparent text-primary underline-offset-4 hover:underline',\n accent: 'border-2 border-transparent bg-transparent text-accent underline-offset-4 hover:underline',\n info: 'border-2 border-transparent bg-transparent text-info underline-offset-4 hover:underline',\n success: 'border-2 border-transparent bg-transparent text-success underline-offset-4 hover:underline',\n warning: 'border-2 border-transparent bg-transparent text-warning underline-offset-4 hover:underline',\n error: 'border-2 border-transparent bg-transparent text-error underline-offset-4 hover:underline'\n },\n\n // Badge/Chip style - subtle filled background with border\n badge: {\n neutral: 'bg-neutral/5 text-neutral border border-neutral',\n primary: 'bg-primary/5 text-primary border border-primary',\n accent: 'bg-accent/5 text-accent border border-accent',\n info: 'bg-info/5 text-info border border-info',\n success: 'bg-success/5 text-success border border-success',\n warning: 'bg-warning/5 text-warning border border-warning',\n error: 'bg-error/5 text-error border border-error',\n inverted: {\n neutral: 'bg-neutral/40 text-neutral-foreground border border-neutral',\n primary: 'bg-primary/90 text-primary-foreground border border-primary-foreground',\n accent: 'bg-accent/90 text-accent-foreground border border-accent',\n info: 'bg-info/90 text-info-foreground border border-info',\n success: 'bg-success/90 text-success-foreground border border-success',\n warning: 'bg-warning/90 text-warning-foreground border border-warning',\n error: 'bg-error/90 text-error-foreground border border-error'\n }\n },\n\n // Alert style - translucent background with border\n alert: {\n neutral: 'bg-neutral/30 text-foreground border-neutral/50 backdrop-blur-3xl',\n primary: 'bg-primary/30 text-foreground border-primary/50 backdrop-blur-3xl',\n accent: 'bg-accent/30 text-foreground border-accent/50 backdrop-blur-3xl',\n info: 'bg-info/30 text-foreground border-info/50 backdrop-blur-3xl',\n success: 'bg-success/30 text-foreground border-success/50 backdrop-blur-3xl',\n warning: 'bg-warning/30 text-foreground border-warning/50 backdrop-blur-3xl',\n error: 'bg-error/30 text-foreground border-error/50 backdrop-blur-3xl'\n },\n\n // Breadcrumb style - link and active states\n breadcrumb: {\n link: {\n neutral:\n 'text-neutral hover:text-neutral-hover hover:underline cursor-pointer transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-neutral-ring rounded px-1 -mx-1',\n primary:\n 'text-primary hover:text-primary-hover hover:underline cursor-pointer transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-primary-ring rounded px-1 -mx-1',\n accent:\n 'text-accent hover:text-accent-hover hover:underline cursor-pointer transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-accent-ring rounded px-1 -mx-1',\n info: 'text-info hover:text-info-hover hover:underline cursor-pointer transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-info-ring rounded px-1 -mx-1',\n success:\n 'text-success hover:text-success-hover hover:underline cursor-pointer transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-success-ring rounded px-1 -mx-1',\n warning:\n 'text-warning hover:text-warning-hover hover:underline cursor-pointer transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-warning-ring rounded px-1 -mx-1',\n error:\n 'text-error hover:text-error-hover hover:underline cursor-pointer transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-error-ring rounded px-1 -mx-1'\n },\n active: {\n neutral: 'text-neutral-active font-medium',\n primary: 'text-primary-active font-medium',\n accent: 'text-accent-active font-medium',\n info: 'text-info-active font-medium',\n success: 'text-success-active font-medium',\n warning: 'text-warning-active font-medium',\n error: 'text-error-active font-medium'\n }\n }\n};\n\nexport type ColorVariantStyle = keyof typeof colorVariants;\nexport type ColorVariantKey<T extends ColorVariantStyle> = keyof (typeof colorVariants)[T];\n\nexport const radii = {\n sm: '0.25rem',\n md: '0.5rem',\n lg: '0.75rem',\n xl: '1rem'\n};\n\nexport const fonts = {\n sans: \"'Inter', system-ui, sans-serif\",\n mono: \"'JetBrains Mono', monospace\"\n};\n\nexport const alignments = ['left', 'center', 'right'] as const;\nexport type Alignment = (typeof alignments)[number];\n\nexport const inputAlignClasses: Record<Alignment, string> = {\n left: 'mr-auto',\n center: 'mx-auto',\n right: 'ml-auto'\n};\n\n/**\n * HTML autocomplete attribute values for form inputs\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete\n */\nexport const autocompleteOptions = [\n 'on',\n 'off',\n 'address-line1',\n 'address-line2',\n 'address-line3',\n 'address-level1',\n 'address-level2',\n 'address-level3',\n 'address-level4',\n 'street-address',\n 'country',\n 'country-name',\n 'postal-code',\n 'name',\n 'additional-name',\n 'family-name',\n 'given-name',\n 'honoric-prefix',\n 'honoric-suffix',\n 'nickname',\n 'organization-title',\n 'username',\n 'new-password',\n 'current-password',\n 'bday',\n 'bday-day',\n 'bday-month',\n 'bday-year',\n 'sex',\n 'one-time-code',\n 'organization',\n 'cc-name',\n 'cc-given-name',\n 'cc-additional-name',\n 'cc-family-name',\n 'cc-number',\n 'cc-exp',\n 'cc-exp-month',\n 'cc-exp-year',\n 'cc-csc',\n 'cc-type',\n 'transaction-currency',\n 'transaction-amount',\n 'language',\n 'url',\n 'email',\n 'photo',\n 'tel',\n 'tel-country-code',\n 'tel-national',\n 'tel-area-code',\n 'tel-local',\n 'tel-local-prefix',\n 'tel-local-suffix',\n 'tel-extension',\n 'impp'\n] as const;\n\nexport type AutocompleteOption = (typeof autocompleteOptions)[number];\n"],"names":[],"mappings":"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"}
|