@hexdspace/react 0.1.3 → 0.1.4
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/index.js +36 -35
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -1068,11 +1068,12 @@ import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs3 } from "react/jsx-run
|
|
|
1068
1068
|
var buttonBase = cn(
|
|
1069
1069
|
"relative isolate inline-flex items-center justify-center gap-2 leading-none text-sm font-medium select-none cursor-pointer",
|
|
1070
1070
|
"rounded-[var(--radius-btn)]",
|
|
1071
|
+
"shadow-[var(--shadow-10)]",
|
|
1071
1072
|
"transition-[background-color,color,box-shadow,transform] duration-150 ease",
|
|
1072
1073
|
"[--state-hover:color-mix(in_oklab,currentColor,transparent_92%)]",
|
|
1073
1074
|
"[--state-active:color-mix(in_oklab,currentColor,transparent_86%)]",
|
|
1074
|
-
"after:content-[''] after:absolute after:inset-0 after:rounded-[inherit] after:bg-[var(--state-hover)] after:opacity-0 after:pointer-events-none after:transition-opacity after:duration-100 after:ease",
|
|
1075
|
-
"hover:after:opacity-100 active:after:bg-[var(--state-active)] active:after:opacity-100",
|
|
1075
|
+
"after:content-[''] after:absolute after:inset-0 after:rounded-[inherit] after:bg-[color:var(--state-hover)] after:opacity-0 after:pointer-events-none after:transition-opacity after:duration-100 after:ease",
|
|
1076
|
+
"hover:after:opacity-100 active:after:bg-[color:var(--state-active)] active:after:opacity-100",
|
|
1076
1077
|
"disabled:opacity-50 disabled:pointer-events-none disabled:cursor-not-allowed"
|
|
1077
1078
|
);
|
|
1078
1079
|
var pushChrome = cn(
|
|
@@ -1115,15 +1116,15 @@ var hairlineChrome = cn(
|
|
|
1115
1116
|
var buttonVariants = cva(buttonBase, {
|
|
1116
1117
|
variants: {
|
|
1117
1118
|
variant: {
|
|
1118
|
-
primary: "bg-[var(--brand)] text-[var(--text-inverted)]",
|
|
1119
|
-
secondary: "border border-[var(--border)] bg-[var(--surface-2)]
|
|
1120
|
-
outline: "bg-transparent
|
|
1121
|
-
ghost: "bg-transparent
|
|
1122
|
-
success: "bg-[var(--success)] text-[var(--on-success)]",
|
|
1123
|
-
info: "bg-[var(--info)] text-[var(--on-info)]",
|
|
1124
|
-
warning: "bg-[var(--warning)] text-[var(--on-warning)]",
|
|
1125
|
-
danger: "bg-[var(--danger)] text-[var(--on-danger)]",
|
|
1126
|
-
link: "bg-transparent p-0 h-auto shadow-none text-[var(--link)] hover:underline hover:text-[var(--link-hover)]"
|
|
1119
|
+
primary: "bg-[color:var(--brand)] text-[color:var(--text-inverted)]",
|
|
1120
|
+
secondary: "border border-[color:var(--border)] bg-[color:var(--surface-2)]",
|
|
1121
|
+
outline: "bg-transparent border border-[color:var(--border)] shadow-none",
|
|
1122
|
+
ghost: "bg-transparent shadow-none",
|
|
1123
|
+
success: "bg-[color:var(--success)] text-[color:var(--on-success)]",
|
|
1124
|
+
info: "bg-[color:var(--info)] text-[color:var(--on-info)]",
|
|
1125
|
+
warning: "bg-[color:var(--warning)] text-[color:var(--on-warning)]",
|
|
1126
|
+
danger: "bg-[color:var(--danger)] text-[color:var(--on-danger)]",
|
|
1127
|
+
link: "bg-transparent p-0 h-auto shadow-none text-[color:var(--link)] hover:underline hover:text-[color:var(--link-hover)]"
|
|
1127
1128
|
},
|
|
1128
1129
|
size: {
|
|
1129
1130
|
sm: "px-3 py-1.5",
|
|
@@ -1145,8 +1146,8 @@ var buttonVariants = cva(buttonBase, {
|
|
|
1145
1146
|
compoundVariants: [
|
|
1146
1147
|
{ variant: "ghost", className: "border-0" },
|
|
1147
1148
|
{ variant: "link", className: "border-0" },
|
|
1148
|
-
{ chrome: "soft", className: "text-[var(--text-1)]" },
|
|
1149
|
-
{ chrome: "glass", className: "text-[var(--text-1)]" },
|
|
1149
|
+
{ chrome: "soft", className: "text-[color:var(--text-1)]" },
|
|
1150
|
+
{ chrome: "glass", className: "text-[color:var(--text-1)]" },
|
|
1150
1151
|
{ chrome: "push", variant: "primary", className: "border-b-[color:var(--brand-90)]" },
|
|
1151
1152
|
{ chrome: "push", variant: "secondary", className: "border-b-[color:color-mix(in oklab, var(--border), transparent 50%)]" },
|
|
1152
1153
|
{ chrome: "push", variant: "outline", className: "border-b-[color:color-mix(in oklab, var(--border), transparent 50%)]" },
|
|
@@ -1164,34 +1165,34 @@ var buttonVariants = cva(buttonBase, {
|
|
|
1164
1165
|
{ chrome: "soft", variant: "info", className: cn("bg-[color:color-mix(in_oklab,var(--info),transparent_70%)]", "border-[color:color-mix(in_oklab,var(--info),transparent_55%)]", "shadow-[0_1px_0_rgba(255,255,255,0.5)_inset,0_3px_8px_color-mix(in_oklab,var(--info),transparent_70%)]") },
|
|
1165
1166
|
{ chrome: "soft", variant: "warning", className: cn("bg-[color:color-mix(in_oklab,var(--warning),transparent_70%)]", "border-[color:color-mix(in_oklab,var(--warning),transparent_55%)]", "shadow-[0_1px_0_rgba(255,255,255,0.5)_inset,0_3px_8px_color-mix(in_oklab,var(--warning),transparent_70%)]") },
|
|
1166
1167
|
{ chrome: "soft", variant: "danger", className: cn("bg-[color:color-mix(in_oklab,var(--danger),transparent_70%)]", "border-[color:color-mix(in_oklab,var(--danger),transparent_55%)]", "shadow-[0_1px_0_rgba(255,255,255,0.5)_inset,0_3px_8px_color-mix(in_oklab,var(--danger),transparent_70%)]") },
|
|
1167
|
-
{ chrome: "soft", variant: "link", className: cn("text-[var(--link)]", "shadow-[0_3px_8px_color-mix(in_oklab,var(--link),transparent_75%)]") },
|
|
1168
|
-
{ chrome: "glass", variant: "primary", className: cn("bg-[color:color-mix(in_oklab,var(--brand),transparent_65%)]", "border-[var(--brand)]") },
|
|
1168
|
+
{ chrome: "soft", variant: "link", className: cn("text-[color:var(--link)]", "shadow-[0_3px_8px_color-mix(in_oklab,var(--link),transparent_75%)]") },
|
|
1169
|
+
{ chrome: "glass", variant: "primary", className: cn("bg-[color:color-mix(in_oklab,var(--brand),transparent_65%)]", "border-[color:var(--brand)]") },
|
|
1169
1170
|
{ chrome: "glass", variant: "secondary", className: cn("bg-[color:color-mix(in_oklab,var(--surface-2),transparent_35%)]", "border-[color:color-mix(in_oklab,var(--border),transparent_70%)]") },
|
|
1170
1171
|
{ chrome: "glass", variant: "outline", className: "" },
|
|
1171
1172
|
{ chrome: "glass", variant: "ghost", className: "" },
|
|
1172
|
-
{ chrome: "glass", variant: "success", className: cn("bg-[color:color-mix(in_oklab,var(--success),transparent_65%)]", "border-[var(--success)]") },
|
|
1173
|
-
{ chrome: "glass", variant: "info", className: cn("bg-[color:color-mix(in_oklab,var(--info),transparent_65%)]", "border-[var(--info)]") },
|
|
1174
|
-
{ chrome: "glass", variant: "warning", className: cn("bg-[color:color-mix(in_oklab,var(--warning),transparent_65%)]", "border-[var(--warning)]") },
|
|
1175
|
-
{ chrome: "glass", variant: "danger", className: cn("bg-[color:color-mix(in_oklab,var(--danger),transparent_65%)]", "border-[var(--danger)]") },
|
|
1176
|
-
{ chrome: "glass", variant: "link", className: "text-[var(--link)]" },
|
|
1177
|
-
{ chrome: "glow", variant: "primary", className: cn("border-[var(--brand)]", "shadow-[0_0_0_1px_color-mix(in_oklab,var(--brand),transparent_20%),0_10px_26px_color-mix(in_oklab,var(--brand),transparent_55%)]", "hover:shadow-[0_0_0_1px_color-mix(in_oklab,var(--brand),transparent_10%),0_14px_34px_color-mix(in_oklab,var(--brand),transparent_40%)]", "dark:shadow-[0_0_0_1px_color-mix(in_oklab,var(--brand),transparent_30%),0_8px_22px_color-mix(in_oklab,var(--brand),transparent_70%)]", "dark:hover:shadow-[0_0_0_1px_color-mix(in_oklab,var(--brand),transparent_15%),0_12px_30px_color-mix(in_oklab,var(--brand),transparent_55%)]") },
|
|
1173
|
+
{ chrome: "glass", variant: "success", className: cn("bg-[color:color-mix(in_oklab,var(--success),transparent_65%)]", "border-[color:var(--success)]") },
|
|
1174
|
+
{ chrome: "glass", variant: "info", className: cn("bg-[color:color-mix(in_oklab,var(--info),transparent_65%)]", "border-[color:var(--info)]") },
|
|
1175
|
+
{ chrome: "glass", variant: "warning", className: cn("bg-[color:color-mix(in_oklab,var(--warning),transparent_65%)]", "border-[color:var(--warning)]") },
|
|
1176
|
+
{ chrome: "glass", variant: "danger", className: cn("bg-[color:color-mix(in_oklab,var(--danger),transparent_65%)]", "border-[color:var(--danger)]") },
|
|
1177
|
+
{ chrome: "glass", variant: "link", className: "text-[color:var(--link)]" },
|
|
1178
|
+
{ chrome: "glow", variant: "primary", className: cn("border-[color:var(--brand)]", "shadow-[0_0_0_1px_color-mix(in_oklab,var(--brand),transparent_20%),0_10px_26px_color-mix(in_oklab,var(--brand),transparent_55%)]", "hover:shadow-[0_0_0_1px_color-mix(in_oklab,var(--brand),transparent_10%),0_14px_34px_color-mix(in_oklab,var(--brand),transparent_40%)]", "dark:shadow-[0_0_0_1px_color-mix(in_oklab,var(--brand),transparent_30%),0_8px_22px_color-mix(in_oklab,var(--brand),transparent_70%)]", "dark:hover:shadow-[0_0_0_1px_color-mix(in_oklab,var(--brand),transparent_15%),0_12px_30px_color-mix(in_oklab,var(--brand),transparent_55%)]") },
|
|
1178
1179
|
{ chrome: "glow", variant: "secondary", className: cn("border-[color:color-mix(in_oklab,var(--border),transparent_20%)]", "shadow-[0_0_0_1px_color-mix(in_oklab,var(--border),transparent_20%),0_10px_26px_color-mix(in_oklab,var(--border),transparent_60%)]", "hover:shadow-[0_0_0_1px_color-mix(in_oklab,var(--border),transparent_15%),0_14px_34px_color-mix(in_oklab,var(--border),transparent_45%)]", "dark:shadow-[0_0_0_1px_color-mix(in_oklab,var(--border),transparent_30%),0_8px_22px_color-mix(in_oklab,var(--border),transparent_75%)]", "dark:hover:shadow-[0_0_0_1px_color-mix(in_oklab,var(--border),transparent_20%),0_12px_30px_color-mix(in_oklab,var(--border),transparent_60%)]") },
|
|
1179
1180
|
{ chrome: "glow", variant: "outline", className: cn("border-[color:color-mix(in_oklab,var(--border),transparent_20%)]", "shadow-[0_0_0_1px_color-mix(in_oklab,var(--border),transparent_20%),0_10px_26px_color-mix(in_oklab,var(--border),transparent_60%)]", "hover:shadow-[0_0_0_1px_color-mix(in_oklab,var(--border),transparent_15%),0_14px_34px_color-mix(in_oklab,var(--border),transparent_45%)]", "dark:shadow-[0_0_0_1px_color-mix(in_oklab,var(--border),transparent_30%),0_8px_22px_color-mix(in_oklab,var(--border),transparent_75%)]", "dark:hover:shadow-[0_0_0_1px_color-mix(in_oklab,var(--border),transparent_20%),0_12px_30px_color-mix(in_oklab,var(--border),transparent_60%)]") },
|
|
1180
1181
|
{ chrome: "glow", variant: "ghost", className: "shadow-none border-transparent" },
|
|
1181
|
-
{ chrome: "glow", variant: "success", className: cn("border-[var(--success)]", "shadow-[0_0_0_1px_color-mix(in_oklab,var(--success),transparent_20%),0_10px_26px_color-mix(in_oklab,var(--success),transparent_55%)]", "hover:shadow-[0_0_0_1px_color-mix(in_oklab,var(--success),transparent_10%),0_14px_34px_color-mix(in_oklab,var(--success),transparent_40%)]", "dark:shadow-[0_0_0_1px_color-mix(in_oklab,var(--success),transparent_30%),0_8px_22px_color-mix(in_oklab,var(--success),transparent_70%)]", "dark:hover:shadow-[0_0_0_1px_color-mix(in_oklab,var(--success),transparent_15%),0_12px_30px_color-mix(in_oklab,var(--success),transparent_55%)]") },
|
|
1182
|
-
{ chrome: "glow", variant: "info", className: cn("border-[var(--info)]", "shadow-[0_0_0_1px_color-mix(in_oklab,var(--info),transparent_20%),0_10px_26px_color-mix(in_oklab,var(--info),transparent_55%)]", "hover:shadow-[0_0_0_1px_color-mix(in_oklab,var(--info),transparent_10%),0_14px_34px_color-mix(in_oklab,var(--info),transparent_40%)]", "dark:shadow-[0_0_0_1px_color-mix(in_oklab,var(--info),transparent_30%),0_8px_22px_color-mix(in_oklab,var(--info),transparent_70%)]", "dark:hover:shadow-[0_0_0_1px_color-mix(in_oklab,var(--info),transparent_15%),0_12px_30px_color-mix(in_oklab,var(--info),transparent_55%)]") },
|
|
1183
|
-
{ chrome: "glow", variant: "warning", className: cn("border-[var(--warning)]", "shadow-[0_0_0_1px_color-mix(in_oklab,var(--warning),transparent_20%),0_10px_26px_color-mix(in_oklab,var(--warning),transparent_55%)]", "hover:shadow-[0_0_0_1px_color-mix(in_oklab,var(--warning),transparent_10%),0_14px_34px_color-mix(in_oklab,var(--warning),transparent_40%)]", "dark:shadow-[0_0_0_1px_color-mix(in_oklab,var(--warning),transparent_30%),0_8px_22px_color-mix(in_oklab,var(--warning),transparent_70%)]", "dark:hover:shadow-[0_0_0_1px_color-mix(in_oklab,var(--warning),transparent_15%),0_12px_30px_color-mix(in_oklab,var(--warning),transparent_55%)]") },
|
|
1184
|
-
{ chrome: "glow", variant: "danger", className: cn("border-[var(--danger)]", "shadow-[0_0_0_1px_color-mix(in_oklab,var(--danger),transparent_20%),0_10px_26px_color-mix(in_oklab,var(--danger),transparent_55%)]", "hover:shadow-[0_0_0_1px_color-mix(in_oklab,var(--danger),transparent_10%),0_14px_34px_color-mix(in_oklab,var(--danger),transparent_40%)]", "dark:shadow-[0_0_0_1px_color-mix(in_oklab,var(--danger),transparent_30%),0_8px_22px_color-mix(in_oklab,var(--danger),transparent_70%)]", "dark:hover:shadow-[0_0_0_1px_color-mix(in_oklab,var(--danger),transparent_15%),0_12px_30px_color-mix(in_oklab,var(--danger),transparent_55%)]") },
|
|
1185
|
-
{ chrome: "glow", variant: "link", className: "text-[var(--link)] shadow-none border-transparent" },
|
|
1186
|
-
{ chrome: "hairline", variant: "primary", className: "border-[color:color-mix(in_oklab,var(--brand),transparent_20%)] text-[var(--brand)]" },
|
|
1187
|
-
{ chrome: "hairline", variant: "secondary", className: "border-[color:color-mix(in_oklab,var(--border),transparent_20%)] text-[var(--text-1)]" },
|
|
1188
|
-
{ chrome: "hairline", variant: "outline", className: "border-[color:color-mix(in_oklab,var(--border),transparent_20%)] text-[var(--text-1)]" },
|
|
1189
|
-
{ chrome: "hairline", variant: "ghost", className: "border-transparent text-[var(--text-1)]" },
|
|
1190
|
-
{ chrome: "hairline", variant: "success", className: "border-[color:color-mix(in_oklab,var(--success),transparent_20%)] text-[var(--success)]" },
|
|
1191
|
-
{ chrome: "hairline", variant: "info", className: "border-[color:color-mix(in_oklab,var(--info),transparent_20%)] text-[var(--info)]" },
|
|
1192
|
-
{ chrome: "hairline", variant: "warning", className: "border-[color:color-mix(in_oklab,var(--warning),transparent_20%)] text-[var(--warning)]" },
|
|
1193
|
-
{ chrome: "hairline", variant: "danger", className: "border-[color:color-mix(in_oklab,var(--danger),transparent_20%)] text-[var(--danger)]" },
|
|
1194
|
-
{ chrome: "hairline", variant: "link", className: "text-[var(--link)] border-transparent" }
|
|
1182
|
+
{ chrome: "glow", variant: "success", className: cn("border-[color:var(--success)]", "shadow-[0_0_0_1px_color-mix(in_oklab,var(--success),transparent_20%),0_10px_26px_color-mix(in_oklab,var(--success),transparent_55%)]", "hover:shadow-[0_0_0_1px_color-mix(in_oklab,var(--success),transparent_10%),0_14px_34px_color-mix(in_oklab,var(--success),transparent_40%)]", "dark:shadow-[0_0_0_1px_color-mix(in_oklab,var(--success),transparent_30%),0_8px_22px_color-mix(in_oklab,var(--success),transparent_70%)]", "dark:hover:shadow-[0_0_0_1px_color-mix(in_oklab,var(--success),transparent_15%),0_12px_30px_color-mix(in_oklab,var(--success),transparent_55%)]") },
|
|
1183
|
+
{ chrome: "glow", variant: "info", className: cn("border-[color:var(--info)]", "shadow-[0_0_0_1px_color-mix(in_oklab,var(--info),transparent_20%),0_10px_26px_color-mix(in_oklab,var(--info),transparent_55%)]", "hover:shadow-[0_0_0_1px_color-mix(in_oklab,var(--info),transparent_10%),0_14px_34px_color-mix(in_oklab,var(--info),transparent_40%)]", "dark:shadow-[0_0_0_1px_color-mix(in_oklab,var(--info),transparent_30%),0_8px_22px_color-mix(in_oklab,var(--info),transparent_70%)]", "dark:hover:shadow-[0_0_0_1px_color-mix(in_oklab,var(--info),transparent_15%),0_12px_30px_color-mix(in_oklab,var(--info),transparent_55%)]") },
|
|
1184
|
+
{ chrome: "glow", variant: "warning", className: cn("border-[color:var(--warning)]", "shadow-[0_0_0_1px_color-mix(in_oklab,var(--warning),transparent_20%),0_10px_26px_color-mix(in_oklab,var(--warning),transparent_55%)]", "hover:shadow-[0_0_0_1px_color-mix(in_oklab,var(--warning),transparent_10%),0_14px_34px_color-mix(in_oklab,var(--warning),transparent_40%)]", "dark:shadow-[0_0_0_1px_color-mix(in_oklab,var(--warning),transparent_30%),0_8px_22px_color-mix(in_oklab,var(--warning),transparent_70%)]", "dark:hover:shadow-[0_0_0_1px_color-mix(in_oklab,var(--warning),transparent_15%),0_12px_30px_color-mix(in_oklab,var(--warning),transparent_55%)]") },
|
|
1185
|
+
{ chrome: "glow", variant: "danger", className: cn("border-[color:var(--danger)]", "shadow-[0_0_0_1px_color-mix(in_oklab,var(--danger),transparent_20%),0_10px_26px_color-mix(in_oklab,var(--danger),transparent_55%)]", "hover:shadow-[0_0_0_1px_color-mix(in_oklab,var(--danger),transparent_10%),0_14px_34px_color-mix(in_oklab,var(--danger),transparent_40%)]", "dark:shadow-[0_0_0_1px_color-mix(in_oklab,var(--danger),transparent_30%),0_8px_22px_color-mix(in_oklab,var(--danger),transparent_70%)]", "dark:hover:shadow-[0_0_0_1px_color-mix(in_oklab,var(--danger),transparent_15%),0_12px_30px_color-mix(in_oklab,var(--danger),transparent_55%)]") },
|
|
1186
|
+
{ chrome: "glow", variant: "link", className: "text-[color:var(--link)] shadow-none border-transparent" },
|
|
1187
|
+
{ chrome: "hairline", variant: "primary", className: "border-[color:color-mix(in_oklab,var(--brand),transparent_20%)] text-[color:var(--brand)]" },
|
|
1188
|
+
{ chrome: "hairline", variant: "secondary", className: "border-[color:color-mix(in_oklab,var(--border),transparent_20%)] text-[color:var(--text-1)]" },
|
|
1189
|
+
{ chrome: "hairline", variant: "outline", className: "border-[color:color-mix(in_oklab,var(--border),transparent_20%)] text-[color:var(--text-1)]" },
|
|
1190
|
+
{ chrome: "hairline", variant: "ghost", className: "border-transparent text-[color:var(--text-1)]" },
|
|
1191
|
+
{ chrome: "hairline", variant: "success", className: "border-[color:color-mix(in_oklab,var(--success),transparent_20%)] text-[color:var(--success)]" },
|
|
1192
|
+
{ chrome: "hairline", variant: "info", className: "border-[color:color-mix(in_oklab,var(--info),transparent_20%)] text-[color:var(--info)]" },
|
|
1193
|
+
{ chrome: "hairline", variant: "warning", className: "border-[color:color-mix(in_oklab,var(--warning),transparent_20%)] text-[color:var(--warning)]" },
|
|
1194
|
+
{ chrome: "hairline", variant: "danger", className: "border-[color:color-mix(in_oklab,var(--danger),transparent_20%)] text-[color:var(--danger)]" },
|
|
1195
|
+
{ chrome: "hairline", variant: "link", className: "text-[color:var(--link)] border-transparent" }
|
|
1195
1196
|
],
|
|
1196
1197
|
defaultVariants: { variant: "primary", size: "md", chrome: "flat", fullWidth: false }
|
|
1197
1198
|
});
|