@axis-ds/ui-react 1.6.3 → 1.7.0

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 (15) hide show
  1. package/dist/button/index.js +5 -5
  2. package/dist/button/index.mjs +5 -5
  3. package/dist/card/index.js +1 -1
  4. package/dist/card/index.mjs +1 -1
  5. package/dist/dialog/index.js +1 -1
  6. package/dist/dialog/index.mjs +1 -1
  7. package/dist/input/index.js +1 -1
  8. package/dist/input/index.mjs +1 -1
  9. package/dist/select/index.js +1 -1
  10. package/dist/select/index.mjs +1 -1
  11. package/dist/table/index.js +2 -2
  12. package/dist/table/index.mjs +2 -2
  13. package/dist/toggle/index.js +4 -4
  14. package/dist/toggle/index.mjs +4 -4
  15. package/package.json +2 -2
package/dist/button/index.js CHANGED
@@ -38,7 +38,7 @@ var import_react_slot = require("@radix-ui/react-slot");
38
38
  var import_class_variance_authority = require("class-variance-authority");
39
39
  var import_utils = require("../utils.js");
40
40
  const buttonVariants = (0, import_class_variance_authority.cva)(
41
- "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
41
+ "inline-flex items-center justify-center whitespace-nowrap rounded-[var(--axis-radius-control,0.375rem)] text-[length:var(--axis-control-font-size-md,0.875rem)] leading-5 font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
42
42
  {
43
43
  variants: {
44
44
  variant: {
@@ -50,10 +50,10 @@ const buttonVariants = (0, import_class_variance_authority.cva)(
50
50
  link: "text-[var(--axis-text-brand)] underline-offset-4 hover:underline"
51
51
  },
52
52
  size: {
53
- sm: "h-8 px-3 text-xs",
54
- default: "h-10 px-4 py-2",
55
- lg: "h-12 px-6 text-base",
56
- icon: "h-10 w-10"
53
+ sm: "h-[var(--axis-control-h-sm,2rem)] px-3 text-[length:var(--axis-control-font-size-sm,0.75rem)] leading-4",
54
+ default: "h-[var(--axis-control-h-md,2.5rem)] px-4 py-2",
55
+ lg: "h-[var(--axis-control-h-lg,3rem)] px-6 text-[length:var(--axis-control-font-size-lg,1rem)] leading-6",
56
+ icon: "h-[var(--axis-control-h-md,2.5rem)] w-[var(--axis-control-h-md,2.5rem)]"
57
57
  }
58
58
  },
59
59
  defaultVariants: {
package/dist/button/index.mjs CHANGED
@@ -4,7 +4,7 @@ import { Slot } from "@radix-ui/react-slot";
4
4
  import { cva } from "class-variance-authority";
5
5
  import { cn } from "../utils.mjs";
6
6
  const buttonVariants = cva(
7
- "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
7
+ "inline-flex items-center justify-center whitespace-nowrap rounded-[var(--axis-radius-control,0.375rem)] text-[length:var(--axis-control-font-size-md,0.875rem)] leading-5 font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
8
8
  {
9
9
  variants: {
10
10
  variant: {
@@ -16,10 +16,10 @@ const buttonVariants = cva(
16
16
  link: "text-[var(--axis-text-brand)] underline-offset-4 hover:underline"
17
17
  },
18
18
  size: {
19
- sm: "h-8 px-3 text-xs",
20
- default: "h-10 px-4 py-2",
21
- lg: "h-12 px-6 text-base",
22
- icon: "h-10 w-10"
19
+ sm: "h-[var(--axis-control-h-sm,2rem)] px-3 text-[length:var(--axis-control-font-size-sm,0.75rem)] leading-4",
20
+ default: "h-[var(--axis-control-h-md,2.5rem)] px-4 py-2",
21
+ lg: "h-[var(--axis-control-h-lg,3rem)] px-6 text-[length:var(--axis-control-font-size-lg,1rem)] leading-6",
22
+ icon: "h-[var(--axis-control-h-md,2.5rem)] w-[var(--axis-control-h-md,2.5rem)]"
23
23
  }
24
24
  },
25
25
  defaultVariants: {
package/dist/card/index.js CHANGED
@@ -45,7 +45,7 @@ const Card = React.forwardRef(
45
45
  {
46
46
  ref,
47
47
  className: (0, import_utils.cn)(
48
- "rounded-lg border bg-[var(--axis-card-bg-default)] border-[var(--axis-card-border-default)] shadow-[shadow:var(--axis-card-shadow)]",
48
+ "rounded-[var(--axis-radius-surface,0.5rem)] border bg-[var(--axis-card-bg-default)] border-[var(--axis-card-border-default)] shadow-[shadow:var(--axis-card-shadow)]",
49
49
  className
50
50
  ),
51
51
  ...props
package/dist/card/index.mjs CHANGED
@@ -7,7 +7,7 @@ const Card = React.forwardRef(
7
7
  {
8
8
  ref,
9
9
  className: cn(
10
- "rounded-lg border bg-[var(--axis-card-bg-default)] border-[var(--axis-card-border-default)] shadow-[shadow:var(--axis-card-shadow)]",
10
+ "rounded-[var(--axis-radius-surface,0.5rem)] border bg-[var(--axis-card-bg-default)] border-[var(--axis-card-border-default)] shadow-[shadow:var(--axis-card-shadow)]",
11
11
  className
12
12
  ),
13
13
  ...props
package/dist/dialog/index.js CHANGED
@@ -70,7 +70,7 @@ const DialogContent = React.forwardRef(({ className, children, ...props }, ref)
70
70
  "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-[shadow:var(--axis-shadow-lg)] duration-200",
71
71
  "bg-[var(--axis-dialog-content-bg)] border-[var(--axis-dialog-content-border)]",
72
72
  "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] motion-reduce:!animate-none",
73
- "sm:rounded-lg",
73
+ "sm:rounded-[var(--axis-radius-surface,0.5rem)]",
74
74
  className
75
75
  ),
76
76
  ...props,
package/dist/dialog/index.mjs CHANGED
@@ -28,7 +28,7 @@ const DialogContent = React.forwardRef(({ className, children, ...props }, ref)
28
28
  "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-[shadow:var(--axis-shadow-lg)] duration-200",
29
29
  "bg-[var(--axis-dialog-content-bg)] border-[var(--axis-dialog-content-border)]",
30
30
  "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] motion-reduce:!animate-none",
31
- "sm:rounded-lg",
31
+ "sm:rounded-[var(--axis-radius-surface,0.5rem)]",
32
32
  className
33
33
  ),
34
34
  ...props,
package/dist/input/index.js CHANGED
@@ -41,7 +41,7 @@ const Input = React.forwardRef(
41
41
  {
42
42
  type,
43
43
  className: (0, import_utils.cn)(
44
- "flex h-10 w-full rounded-md border px-3 py-2 text-sm transition-colors",
44
+ "flex h-[var(--axis-field-h,2.5rem)] w-full rounded-[var(--axis-radius-field,0.375rem)] border px-3 py-2 text-[length:var(--axis-control-font-size-md,0.875rem)] leading-5 transition-colors",
45
45
  "bg-[var(--axis-input-bg-default)] text-[var(--axis-input-text-default)]",
46
46
  "border-[var(--axis-input-border-default)]",
47
47
  "placeholder:text-[var(--axis-input-text-placeholder)]",
package/dist/input/index.mjs CHANGED
@@ -8,7 +8,7 @@ const Input = React.forwardRef(
8
8
  {
9
9
  type,
10
10
  className: cn(
11
- "flex h-10 w-full rounded-md border px-3 py-2 text-sm transition-colors",
11
+ "flex h-[var(--axis-field-h,2.5rem)] w-full rounded-[var(--axis-radius-field,0.375rem)] border px-3 py-2 text-[length:var(--axis-control-font-size-md,0.875rem)] leading-5 transition-colors",
12
12
  "bg-[var(--axis-input-bg-default)] text-[var(--axis-input-text-default)]",
13
13
  "border-[var(--axis-input-border-default)]",
14
14
  "placeholder:text-[var(--axis-input-text-placeholder)]",
package/dist/select/index.js CHANGED
@@ -50,7 +50,7 @@ const SelectTrigger = React.forwardRef(({ className, children, ...props }, ref)
50
50
  {
51
51
  ref,
52
52
  className: (0, import_utils.cn)(
53
- "flex h-10 w-full items-center justify-between rounded-md border px-3 py-2 text-sm",
53
+ "flex h-[var(--axis-field-h,2.5rem)] w-full items-center justify-between rounded-[var(--axis-radius-field,0.375rem)] border px-3 py-2 text-sm",
54
54
  "bg-[var(--axis-input-bg-default)] border-[var(--axis-input-border-default)]",
55
55
  "placeholder:text-[var(--axis-input-text-placeholder)]",
56
56
  "hover:border-[var(--axis-input-border-hover)]",
package/dist/select/index.mjs CHANGED
@@ -10,7 +10,7 @@ const SelectTrigger = React.forwardRef(({ className, children, ...props }, ref)
10
10
  {
11
11
  ref,
12
12
  className: cn(
13
- "flex h-10 w-full items-center justify-between rounded-md border px-3 py-2 text-sm",
13
+ "flex h-[var(--axis-field-h,2.5rem)] w-full items-center justify-between rounded-[var(--axis-radius-field,0.375rem)] border px-3 py-2 text-sm",
14
14
  "bg-[var(--axis-input-bg-default)] border-[var(--axis-input-border-default)]",
15
15
  "placeholder:text-[var(--axis-input-text-placeholder)]",
16
16
  "hover:border-[var(--axis-input-border-hover)]",
package/dist/table/index.js CHANGED
@@ -46,7 +46,7 @@ const Table = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
46
46
  {
47
47
  ref,
48
48
  className: (0, import_utils.cn)(
49
- "w-full caption-bottom text-sm text-[var(--axis-text-primary)]",
49
+ "w-full caption-bottom text-[length:var(--axis-table-font-size,0.875rem)] leading-5 text-[var(--axis-text-primary)]",
50
50
  className
51
51
  ),
52
52
  ...props
@@ -102,7 +102,7 @@ const TableHead = React.forwardRef(({ className, ...props }, ref) => /* @__PURE_
102
102
  {
103
103
  ref,
104
104
  className: (0, import_utils.cn)(
105
- "h-12 px-4 text-left align-middle font-medium text-[var(--axis-text-secondary)]",
105
+ "h-12 px-4 text-left align-middle text-[length:var(--axis-table-head-font-size,0.875rem)] font-medium text-[var(--axis-text-secondary)]",
106
106
  "[&:has([role=checkbox])]:pr-0",
107
107
  className
108
108
  ),
package/dist/table/index.mjs CHANGED
@@ -6,7 +6,7 @@ const Table = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
6
6
  {
7
7
  ref,
8
8
  className: cn(
9
- "w-full caption-bottom text-sm text-[var(--axis-text-primary)]",
9
+ "w-full caption-bottom text-[length:var(--axis-table-font-size,0.875rem)] leading-5 text-[var(--axis-text-primary)]",
10
10
  className
11
11
  ),
12
12
  ...props
@@ -62,7 +62,7 @@ const TableHead = React.forwardRef(({ className, ...props }, ref) => /* @__PURE_
62
62
  {
63
63
  ref,
64
64
  className: cn(
65
- "h-12 px-4 text-left align-middle font-medium text-[var(--axis-text-secondary)]",
65
+ "h-12 px-4 text-left align-middle text-[length:var(--axis-table-head-font-size,0.875rem)] font-medium text-[var(--axis-text-secondary)]",
66
66
  "[&:has([role=checkbox])]:pr-0",
67
67
  className
68
68
  ),
package/dist/toggle/index.js CHANGED
@@ -38,7 +38,7 @@ var TogglePrimitive = __toESM(require("@radix-ui/react-toggle"));
38
38
  var import_class_variance_authority = require("class-variance-authority");
39
39
  var import_utils = require("../utils.js");
40
40
  const toggleVariants = (0, import_class_variance_authority.cva)(
41
- "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium ring-offset-[var(--axis-surface-default)] transition-colors hover:bg-[var(--axis-surface-secondary)] hover:text-[var(--axis-text-secondary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--axis-border-focus)] focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-[var(--axis-surface-secondary)] data-[state=on]:text-[var(--axis-text-primary)] [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
41
+ "inline-flex items-center justify-center gap-2 rounded-[var(--axis-radius-control,0.375rem)] text-sm font-medium ring-offset-[var(--axis-surface-default)] transition-colors hover:bg-[var(--axis-surface-secondary)] hover:text-[var(--axis-text-secondary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--axis-border-focus)] focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-[var(--axis-surface-secondary)] data-[state=on]:text-[var(--axis-text-primary)] [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
42
42
  {
43
43
  variants: {
44
44
  variant: {
@@ -46,9 +46,9 @@ const toggleVariants = (0, import_class_variance_authority.cva)(
46
46
  outline: "border border-[var(--axis-border-default)] bg-transparent hover:bg-[var(--axis-surface-secondary)] hover:text-[var(--axis-text-primary)]"
47
47
  },
48
48
  size: {
49
- default: "h-10 px-3 min-w-10",
50
- sm: "h-9 px-2.5 min-w-9",
51
- lg: "h-11 px-5 min-w-11"
49
+ default: "h-[var(--axis-toggle-h-md,2.5rem)] px-3 min-w-[var(--axis-toggle-h-md,2.5rem)]",
50
+ sm: "h-[var(--axis-toggle-h-sm,2.25rem)] px-2.5 min-w-[var(--axis-toggle-h-sm,2.25rem)]",
51
+ lg: "h-[var(--axis-toggle-h-lg,2.75rem)] px-5 min-w-[var(--axis-toggle-h-lg,2.75rem)]"
52
52
  }
53
53
  },
54
54
  defaultVariants: {
package/dist/toggle/index.mjs CHANGED
@@ -4,7 +4,7 @@ import * as TogglePrimitive from "@radix-ui/react-toggle";
4
4
  import { cva } from "class-variance-authority";
5
5
  import { cn } from "../utils.mjs";
6
6
  const toggleVariants = cva(
7
- "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium ring-offset-[var(--axis-surface-default)] transition-colors hover:bg-[var(--axis-surface-secondary)] hover:text-[var(--axis-text-secondary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--axis-border-focus)] focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-[var(--axis-surface-secondary)] data-[state=on]:text-[var(--axis-text-primary)] [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
7
+ "inline-flex items-center justify-center gap-2 rounded-[var(--axis-radius-control,0.375rem)] text-sm font-medium ring-offset-[var(--axis-surface-default)] transition-colors hover:bg-[var(--axis-surface-secondary)] hover:text-[var(--axis-text-secondary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--axis-border-focus)] focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-[var(--axis-surface-secondary)] data-[state=on]:text-[var(--axis-text-primary)] [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
8
8
  {
9
9
  variants: {
10
10
  variant: {
@@ -12,9 +12,9 @@ const toggleVariants = cva(
12
12
  outline: "border border-[var(--axis-border-default)] bg-transparent hover:bg-[var(--axis-surface-secondary)] hover:text-[var(--axis-text-primary)]"
13
13
  },
14
14
  size: {
15
- default: "h-10 px-3 min-w-10",
16
- sm: "h-9 px-2.5 min-w-9",
17
- lg: "h-11 px-5 min-w-11"
15
+ default: "h-[var(--axis-toggle-h-md,2.5rem)] px-3 min-w-[var(--axis-toggle-h-md,2.5rem)]",
16
+ sm: "h-[var(--axis-toggle-h-sm,2.25rem)] px-2.5 min-w-[var(--axis-toggle-h-sm,2.25rem)]",
17
+ lg: "h-[var(--axis-toggle-h-lg,2.75rem)] px-5 min-w-[var(--axis-toggle-h-lg,2.75rem)]"
18
18
  }
19
19
  },
20
20
  defaultVariants: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@axis-ds/ui-react",
3
- "version": "1.6.3",
3
+ "version": "1.7.0",
4
4
  "description": "AXIS Design System - Core React UI Components",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",
@@ -302,7 +302,7 @@
302
302
  "clsx": "^2.1.0",
303
303
  "cmdk": "^1.1.1",
304
304
  "tailwind-merge": "^2.5.0",
305
- "@axis-ds/tokens": "1.6.2"
305
+ "@axis-ds/tokens": "1.7.0"
306
306
  },
307
307
  "devDependencies": {
308
308
  "@testing-library/jest-dom": "^6.9.1",