@hexdspace/react 0.1.6 → 0.1.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/README.md +15 -3
  2. package/dist/css/primitive.css +11 -10
  3. package/dist/css/semantic.css +1 -1
  4. package/dist/index.d.ts +1 -1
  5. package/dist/index.js +21 -13
  6. package/package.json +1 -1
package/README.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # @hexdspace/react
2
2
 
3
- React basic features, UI components plus a Tailwind v4-compatible theme CSS.
3
+ React basic features, UI components, plus a Tailwind v4-compatible theme CSS.
4
4
 
5
5
  ## Install
6
6
 
@@ -17,9 +17,21 @@ pnpm add react react-dom react-router-dom radix-ui lucide-react react-toastify @
17
17
  Tailwind requirements (for the theme + utilities):
18
18
 
19
19
  ```sh
20
- pnpm add -D tailwindcss @tailwindcss/postcss tailwind-scrollbar
20
+ pnpm add -D tailwindcss tailwind-scrollbar
21
21
  ```
22
22
 
23
+ if you're on Vite:
24
+ ```sh
25
+ pnpm add -D @tailwindcss/vite
26
+ ```
27
+
28
+ if using postcss instead:
29
+ ```shell
30
+ pnpm add @tailwindcss/postcss
31
+ ```
32
+
33
+ and configure your postcss pipeline to include tailwind.
34
+
23
35
  ## Usage
24
36
 
25
37
  Import the theme into your Tailwind entry stylesheet and specify tailwind config:
@@ -27,7 +39,7 @@ Import the theme into your Tailwind entry stylesheet and specify tailwind config
27
39
  ```css
28
40
  /* src/index.css */
29
41
  @import "@hexdspace/react/css";
30
- @config "../tailwind.config.ts"; /* adjust path if needed */
42
+ @config "../tailwind.config.ts"; /* adjust path */
31
43
 
32
44
  /* Your app styles */
33
45
  ```
package/dist/css/primitive.css CHANGED
@@ -32,16 +32,17 @@
32
32
  --ink-100: oklch(0.16 0.025 258);
33
33
 
34
34
  /* Accent */
35
- --accent-10: oklch(0.900 0.020 120);
36
- --accent-20: oklch(0.870 0.025 120);
37
- --accent-30: oklch(0.855 0.028 120);
38
- --accent-40: oklch(0.845 0.030 120);
39
- --accent-50: oklch(0.8428 0.030 120);
40
- --accent-60: oklch(0.780 0.045 120);
41
- --accent-70: oklch(0.680 0.060 120);
42
- --accent-80: oklch(0.580 0.070 120);
43
- --accent-90: oklch(0.500 0.065 120);
44
- --accent-100: oklch(0.430 0.055 120);
35
+ /* Accent (cool mint green) */
36
+ --accent-10: oklch(0.93 0.028 160);
37
+ --accent-20: oklch(0.90 0.038 160);
38
+ --accent-30: oklch(0.87 0.052 160);
39
+ --accent-40: oklch(0.84 0.068 160);
40
+ --accent-50: oklch(0.80 0.085 160);
41
+ --accent-60: oklch(0.74 0.105 160);
42
+ --accent-70: oklch(0.66 0.125 160);
43
+ --accent-80: oklch(0.58 0.135 160);
44
+ --accent-90: oklch(0.50 0.125 160);
45
+ --accent-100: oklch(0.42 0.105 160);
45
46
 
46
47
  /* Brand ramp */
47
48
  --brand-10: oklch(0.97 0.020 250);
package/dist/css/semantic.css CHANGED
@@ -4,7 +4,7 @@
4
4
  :root {
5
5
  /* Surfaces */
6
6
  --bg: var(--ink-10);
7
- --surface-1: color-mix(in oklab, var(--ink-10), black 8%);
7
+ --surface-1: color-mix(in oklab, var(--ink-10), black 10%);
8
8
  --surface-2: color-mix(in oklab, var(--ink-10), black 6%);
9
9
  --surface-3: color-mix(in oklab, var(--ink-10), black 4%);
10
10
 
package/dist/index.d.ts CHANGED
@@ -400,7 +400,7 @@ declare class MockAuthHttpClient extends MockHttpClient {
400
400
  }
401
401
 
402
402
  declare const buttonVariants: (props?: ({
403
- variant?: "success" | "warning" | "info" | "link" | "primary" | "secondary" | "outline" | "ghost" | "danger" | null | undefined;
403
+ variant?: "success" | "warning" | "info" | "link" | "primary" | "accent" | "secondary" | "outline" | "ghost" | "danger" | null | undefined;
404
404
  size?: "icon" | "sm" | "md" | "lg" | null | undefined;
405
405
  chrome?: "push" | "flat" | "inset" | "soft" | "glass" | "glow" | "hairline" | null | undefined;
406
406
  fullWidth?: boolean | null | undefined;
package/dist/index.js CHANGED
@@ -1068,16 +1068,17 @@ 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)]",
1072
1071
  "transition-[background-color,color,box-shadow,transform] duration-150 ease",
1072
+ "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--focus)]",
1073
1073
  "[--state-hover:color-mix(in_oklab,currentColor,transparent_92%)]",
1074
1074
  "[--state-active:color-mix(in_oklab,currentColor,transparent_86%)]",
1075
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
1076
  "hover:after:opacity-100 active:after:bg-[color:var(--state-active)] active:after:opacity-100",
1077
1077
  "disabled:opacity-50 disabled:pointer-events-none disabled:cursor-not-allowed"
1078
1078
  );
1079
+ var flatChrome = cn();
1079
1080
  var pushChrome = cn(
1080
- "border-b-[4px]",
1081
+ "border-b-[3px]",
1081
1082
  "transition-all",
1082
1083
  "duration-100",
1083
1084
  "ease-out",
@@ -1087,9 +1088,10 @@ var pushChrome = cn(
1087
1088
  "active:translate-y-[1px]"
1088
1089
  );
1089
1090
  var softChrome = cn(
1091
+ "font-thin",
1090
1092
  "border",
1091
- "border-[color:color-mix(in_oklab,var(--border),transparent_20%)]",
1092
- "shadow-[0_1px_0_rgba(255,255,255,0.65)_inset,0_3px_8px_rgba(0,0,0,0.14)]"
1093
+ "border-[color:color-mix(in_oklab,var(--border),transparent_80%)]",
1094
+ "shadow-[0_0_8px_2px_rgba(255,255,255,0.35)_inset,0_3px_8px_rgba(0,0,0,0.14)]"
1093
1095
  );
1094
1096
  var insetChrome = cn(
1095
1097
  "border",
@@ -1117,6 +1119,7 @@ var buttonVariants = cva(buttonBase, {
1117
1119
  variants: {
1118
1120
  variant: {
1119
1121
  primary: "bg-[color:var(--brand)] text-[color:var(--text-inverted)]",
1122
+ accent: "bg-[color:var(--accent)] text-[color:var(--text-inverted)]",
1120
1123
  secondary: "border border-[color:var(--border)] bg-[color:var(--surface-2)]",
1121
1124
  outline: "bg-transparent border border-[color:var(--border)] shadow-none",
1122
1125
  ghost: "bg-transparent shadow-none",
@@ -1133,7 +1136,7 @@ var buttonVariants = cva(buttonBase, {
1133
1136
  icon: "h-10 w-10 p-0"
1134
1137
  },
1135
1138
  chrome: {
1136
- flat: "",
1139
+ flat: flatChrome,
1137
1140
  push: pushChrome,
1138
1141
  soft: softChrome,
1139
1142
  inset: insetChrome,
@@ -1148,7 +1151,8 @@ var buttonVariants = cva(buttonBase, {
1148
1151
  { variant: "link", className: "border-0" },
1149
1152
  { chrome: "soft", className: "text-[color:var(--text-1)]" },
1150
1153
  { chrome: "glass", className: "text-[color:var(--text-1)]" },
1151
- { chrome: "push", variant: "primary", className: "border-b-[color:var(--brand-80)]" },
1154
+ { chrome: "push", variant: "primary", className: "border-b-[color:var(--brand-90)]" },
1155
+ { chrome: "push", variant: "accent", className: "border-b-[color:var(--accent-90)]" },
1152
1156
  { chrome: "push", variant: "secondary", className: "border-b-[color:color-mix(in oklab, var(--border), transparent 50%)]" },
1153
1157
  { chrome: "push", variant: "outline", className: "border-b-[color:color-mix(in oklab, var(--border), transparent 50%)]" },
1154
1158
  { chrome: "push", variant: "ghost", className: "border-b-transparent shadow-none" },
@@ -1157,16 +1161,18 @@ var buttonVariants = cva(buttonBase, {
1157
1161
  { chrome: "push", variant: "warning", className: "border-b-[color:var(--warning-80)]" },
1158
1162
  { chrome: "push", variant: "danger", className: "border-b-[color:var(--danger-80)]" },
1159
1163
  { chrome: "push", variant: "link", className: "border-b-0 shadow-none" },
1160
- { chrome: "soft", variant: "primary", className: cn("bg-[color:color-mix(in_oklab,var(--brand),transparent_70%)]", "border-[color:color-mix(in_oklab,var(--brand),transparent_55%)]", "shadow-[0_1px_0_rgba(255,255,255,0.5)_inset,0_3px_8px_color-mix(in_oklab,var(--brand),transparent_70%)]") },
1161
- { chrome: "soft", variant: "secondary", className: cn("bg-[color:color-mix(in_oklab,var(--surface-2),transparent_25%)]", "border-[color:color-mix(in_oklab,var(--border),transparent_15%)]", "shadow-[0_1px_0_rgba(255,255,255,0.5)_inset,0_3px_8px_color-mix(in_oklab,var(--border),transparent_70%)]") },
1162
- { chrome: "soft", variant: "outline", className: cn("border-[color:color-mix(in_oklab,var(--border),transparent_15%)]", "shadow-[0_1px_0_rgba(255,255,255,0.5)_inset,0_3px_8px_color-mix(in_oklab,var(--border),transparent_70%)]") },
1164
+ { chrome: "soft", variant: "primary", className: cn("bg-[color:color-mix(in_oklab,var(--brand),transparent_70%)]", "border-[color:color-mix(in_oklab,var(--brand),transparent_85%)]", "shadow-[0_0_8px_2px_rgba(255,255,255,0.2)_inset,0_3px_8px_color-mix(in_oklab,var(--brand),transparent_70%)]") },
1165
+ { chrome: "soft", variant: "accent", className: cn("bg-[color:color-mix(in_oklab,var(--accent),transparent_70%)]", "border-[color:color-mix(in_oklab,var(--accent),transparent_85%)]", "shadow-[0_0_8px_2px_rgba(255,255,255,0.2)_inset,0_3px_8px_color-mix(in_oklab,var(--accent),transparent_70%)]") },
1166
+ { chrome: "soft", variant: "secondary", className: cn("bg-[color:color-mix(in_oklab,var(--surface-2),transparent_25%)]", "border-[color:color-mix(in_oklab,var(--border),transparent_45%)]", "shadow-[0_0_8px_2px_rgba(255,255,255,0.1)_inset,0_3px_8px_color-mix(in_oklab,var(--border),transparent_70%)]") },
1167
+ { chrome: "soft", variant: "outline", className: cn("border-[color:color-mix(in_oklab,var(--border),transparent_45%)]", "shadow-[0_0_8px_2px_rgba(255,255,255,0.1)_inset,0_3px_8px_color-mix(in_oklab,var(--border),transparent_70%)]") },
1163
1168
  { chrome: "soft", variant: "ghost", className: "shadow-[0_3px_8px_color-mix(in_oklab,var(--border),transparent_75%)]" },
1164
- { chrome: "soft", variant: "success", className: cn("bg-[color:color-mix(in_oklab,var(--success),transparent_70%)]", "border-[color:color-mix(in_oklab,var(--success),transparent_55%)]", "shadow-[0_1px_0_rgba(255,255,255,0.5)_inset,0_3px_8px_color-mix(in_oklab,var(--success),transparent_70%)]") },
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%)]") },
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%)]") },
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%)]") },
1169
+ { chrome: "soft", variant: "success", className: cn("bg-[color:color-mix(in_oklab,var(--success),transparent_70%)]", "border-[color:color-mix(in_oklab,var(--success),transparent_75%)]", "shadow-[0_0_8px_2px_rgba(255,255,255,0.2)_inset,0_3px_8px_color-mix(in_oklab,var(--success),transparent_70%)]") },
1170
+ { 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_75%)]", "shadow-[0_0_8px_2px_rgba(255,255,255,0.2)_inset,0_3px_8px_color-mix(in_oklab,var(--info),transparent_70%)]") },
1171
+ { 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_75%)]", "shadow-[0_0_8px_2px_rgba(255,255,255,0.2)_inset,0_3px_8px_color-mix(in_oklab,var(--warning),transparent_70%)]") },
1172
+ { 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_75%)]", "shadow-[0_0_8px_2px_rgba(255,255,255,0.2)_inset,0_3px_8px_color-mix(in_oklab,var(--danger),transparent_70%)]") },
1168
1173
  { chrome: "soft", variant: "link", className: cn("text-[color:var(--link)]", "shadow-[0_3px_8px_color-mix(in_oklab,var(--link),transparent_75%)]") },
1169
1174
  { chrome: "glass", variant: "primary", className: cn("bg-[color:color-mix(in_oklab,var(--brand),transparent_65%)]", "border-[color:var(--brand)]") },
1175
+ { chrome: "glass", variant: "accent", className: cn("bg-[color:color-mix(in_oklab,var(--accent),transparent_65%)]", "border-[color:var(--accent)]") },
1170
1176
  { 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%)]") },
1171
1177
  { chrome: "glass", variant: "outline", className: "" },
1172
1178
  { chrome: "glass", variant: "ghost", className: "" },
@@ -1176,6 +1182,7 @@ var buttonVariants = cva(buttonBase, {
1176
1182
  { chrome: "glass", variant: "danger", className: cn("bg-[color:color-mix(in_oklab,var(--danger),transparent_65%)]", "border-[color:var(--danger)]") },
1177
1183
  { chrome: "glass", variant: "link", className: "text-[color:var(--link)]" },
1178
1184
  { 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%)]") },
1185
+ { chrome: "glow", variant: "accent", className: cn("border-[color:var(--accent)]", "shadow-[0_0_0_1px_color-mix(in_oklab,var(--accent),transparent_20%),0_10px_26px_color-mix(in_oklab,var(--accent),transparent_55%)]", "hover:shadow-[0_0_0_1px_color-mix(in_oklab,var(--accent),transparent_10%),0_14px_34px_color-mix(in_oklab,var(--accent),transparent_40%)]", "dark:shadow-[0_0_0_1px_color-mix(in_oklab,var(--accent),transparent_30%),0_8px_22px_color-mix(in_oklab,var(--accent),transparent_70%)]", "dark:hover:shadow-[0_0_0_1px_color-mix(in_oklab,var(--accent),transparent_15%),0_12px_30px_color-mix(in_oklab,var(--accent),transparent_55%)]") },
1179
1186
  { 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%)]") },
1180
1187
  { 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%)]") },
1181
1188
  { chrome: "glow", variant: "ghost", className: "shadow-none border-transparent" },
@@ -1185,6 +1192,7 @@ var buttonVariants = cva(buttonBase, {
1185
1192
  { 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
1193
  { chrome: "glow", variant: "link", className: "text-[color:var(--link)] shadow-none border-transparent" },
1187
1194
  { chrome: "hairline", variant: "primary", className: "border-[color:color-mix(in_oklab,var(--brand),transparent_20%)] text-[color:var(--brand)]" },
1195
+ { chrome: "hairline", variant: "accent", className: "border-[color:color-mix(in_oklab,var(--accent),transparent_20%)] text-[color:var(--accent)]" },
1188
1196
  { chrome: "hairline", variant: "secondary", className: "border-[color:color-mix(in_oklab,var(--border),transparent_20%)] text-[color:var(--text-1)]" },
1189
1197
  { chrome: "hairline", variant: "outline", className: "border-[color:color-mix(in_oklab,var(--border),transparent_20%)] text-[color:var(--text-1)]" },
1190
1198
  { chrome: "hairline", variant: "ghost", className: "border-transparent text-[color:var(--text-1)]" },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hexdspace/react",
3
- "version": "0.1.6",
3
+ "version": "0.1.7",
4
4
  "type": "module",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",