compote-ui 0.68.1 → 0.69.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 (8) hide show
  1. package/dist/components/badge/badge.variants.d.ts +29 -29
  2. package/dist/components/button/button.variants.d.ts +35 -35
  3. package/dist/components/data-table-v9/column-helper.js +8 -1
  4. package/dist/components/data-table-v9/data-table.svelte +1 -1
  5. package/dist/components/data-table-v9/types.d.ts +1 -1
  6. package/dist/components/data-table-v9/virtual/data-table-virtual-rows.svelte +1 -1
  7. package/dist/components/toggle/toggle.variants.d.ts +20 -20
  8. package/package.json +8 -12
package/dist/components/badge/badge.variants.d.ts CHANGED
@@ -1,46 +1,46 @@
1
1
  import { type VariantProps } from 'tailwind-variants';
2
2
  export declare const badge: import("tailwind-variants").TVReturnType<{
3
3
  variant: {
4
- solid: string;
5
- subtle: string;
6
- outline: string;
4
+ solid: "";
5
+ subtle: "";
6
+ outline: "border bg-transparent";
7
7
  };
8
8
  color: {
9
- neutral: string;
10
- primary: string;
11
- danger: string;
12
- warning: string;
13
- success: string;
14
- info: string;
9
+ neutral: "";
10
+ primary: "";
11
+ danger: "";
12
+ warning: "";
13
+ success: "";
14
+ info: "";
15
15
  };
16
16
  }, undefined, "inline-flex w-fit items-center gap-1 rounded px-2 py-0.5 text-xs font-medium [&_svg]:size-3 [&_svg]:shrink-0", {
17
17
  variant: {
18
- solid: string;
19
- subtle: string;
20
- outline: string;
18
+ solid: "";
19
+ subtle: "";
20
+ outline: "border bg-transparent";
21
21
  };
22
22
  color: {
23
- neutral: string;
24
- primary: string;
25
- danger: string;
26
- warning: string;
27
- success: string;
28
- info: string;
23
+ neutral: "";
24
+ primary: "";
25
+ danger: "";
26
+ warning: "";
27
+ success: "";
28
+ info: "";
29
29
  };
30
- }, undefined, import("tailwind-variants").TVReturnType<{
30
+ }, undefined, import("tailwind-variants").TVReturnTypeLike<{
31
31
  variant: {
32
- solid: string;
33
- subtle: string;
34
- outline: string;
32
+ solid: "";
33
+ subtle: "";
34
+ outline: "border bg-transparent";
35
35
  };
36
36
  color: {
37
- neutral: string;
38
- primary: string;
39
- danger: string;
40
- warning: string;
41
- success: string;
42
- info: string;
37
+ neutral: "";
38
+ primary: "";
39
+ danger: "";
40
+ warning: "";
41
+ success: "";
42
+ info: "";
43
43
  };
44
- }, undefined, "inline-flex w-fit items-center gap-1 rounded px-2 py-0.5 text-xs font-medium [&_svg]:size-3 [&_svg]:shrink-0", unknown, unknown, undefined>>;
44
+ }, undefined>>;
45
45
  export type BadgeVariant = NonNullable<VariantProps<typeof badge>['variant']>;
46
46
  export type BadgeColor = NonNullable<VariantProps<typeof badge>['color']>;
package/dist/components/button/button.variants.d.ts CHANGED
@@ -1,52 +1,52 @@
1
1
  import { type VariantProps } from 'tailwind-variants';
2
2
  export declare const button: import("tailwind-variants").TVReturnType<{
3
3
  variant: {
4
- default: string;
5
- outline: string;
6
- ghost: string;
7
- destructive: string;
4
+ default: "bg-primary text-ink-inverse hover:bg-primary/90 active:bg-primary/80";
5
+ outline: "border text-ink hover:bg-surface-2";
6
+ ghost: "text-ink hover:bg-surface-2";
7
+ destructive: "bg-danger text-ink-inverse hover:bg-danger/90 active:bg-danger/80";
8
8
  };
9
9
  size: {
10
- sm: string;
11
- default: string;
12
- lg: string;
13
- icon: string;
14
- 'icon-xs': string;
15
- 'icon-sm': string;
16
- 'icon-lg': string;
10
+ sm: "h-8 gap-1.5 px-2";
11
+ default: "h-9 gap-2 px-3";
12
+ lg: "h-10 gap-2.5 px-4";
13
+ icon: "size-8";
14
+ 'icon-xs': "size-6";
15
+ 'icon-sm': "size-7";
16
+ 'icon-lg': "size-9";
17
17
  };
18
18
  }, undefined, "inline-flex cursor-pointer items-center justify-center rounded bg-transparent text-sm font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50", {
19
19
  variant: {
20
- default: string;
21
- outline: string;
22
- ghost: string;
23
- destructive: string;
20
+ default: "bg-primary text-ink-inverse hover:bg-primary/90 active:bg-primary/80";
21
+ outline: "border text-ink hover:bg-surface-2";
22
+ ghost: "text-ink hover:bg-surface-2";
23
+ destructive: "bg-danger text-ink-inverse hover:bg-danger/90 active:bg-danger/80";
24
24
  };
25
25
  size: {
26
- sm: string;
27
- default: string;
28
- lg: string;
29
- icon: string;
30
- 'icon-xs': string;
31
- 'icon-sm': string;
32
- 'icon-lg': string;
26
+ sm: "h-8 gap-1.5 px-2";
27
+ default: "h-9 gap-2 px-3";
28
+ lg: "h-10 gap-2.5 px-4";
29
+ icon: "size-8";
30
+ 'icon-xs': "size-6";
31
+ 'icon-sm': "size-7";
32
+ 'icon-lg': "size-9";
33
33
  };
34
- }, undefined, import("tailwind-variants").TVReturnType<{
34
+ }, undefined, import("tailwind-variants").TVReturnTypeLike<{
35
35
  variant: {
36
- default: string;
37
- outline: string;
38
- ghost: string;
39
- destructive: string;
36
+ default: "bg-primary text-ink-inverse hover:bg-primary/90 active:bg-primary/80";
37
+ outline: "border text-ink hover:bg-surface-2";
38
+ ghost: "text-ink hover:bg-surface-2";
39
+ destructive: "bg-danger text-ink-inverse hover:bg-danger/90 active:bg-danger/80";
40
40
  };
41
41
  size: {
42
- sm: string;
43
- default: string;
44
- lg: string;
45
- icon: string;
46
- 'icon-xs': string;
47
- 'icon-sm': string;
48
- 'icon-lg': string;
42
+ sm: "h-8 gap-1.5 px-2";
43
+ default: "h-9 gap-2 px-3";
44
+ lg: "h-10 gap-2.5 px-4";
45
+ icon: "size-8";
46
+ 'icon-xs': "size-6";
47
+ 'icon-sm': "size-7";
48
+ 'icon-lg': "size-9";
49
49
  };
50
- }, undefined, "inline-flex cursor-pointer items-center justify-center rounded bg-transparent text-sm font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50", unknown, unknown, undefined>>;
50
+ }, undefined>>;
51
51
  export type ButtonVariant = VariantProps<typeof button>['variant'];
52
52
  export type ButtonSize = VariantProps<typeof button>['size'];
package/dist/components/data-table-v9/column-helper.js CHANGED
@@ -7,7 +7,14 @@ const TYPE_DEFAULTS = {
7
7
  'date-time': { align: 'center', size: 160 },
8
8
  boolean: { align: 'center', size: 90 },
9
9
  url: { align: 'center', size: 60, enableSorting: false },
10
- phone: { align: 'left', size: 160 }
10
+ phone: { align: 'left', size: 160 },
11
+ action: {
12
+ align: 'center',
13
+ size: 60,
14
+ enableSorting: false,
15
+ enableHiding: false,
16
+ enableColumnFilter: false
17
+ }
11
18
  };
12
19
  function applyTypeDefaults(options) {
13
20
  const defaults = options.type ? TYPE_DEFAULTS[options.type] : undefined;
package/dist/components/data-table-v9/data-table.svelte CHANGED
@@ -113,7 +113,7 @@
113
113
  {@const meta = getColumnMeta(cell.column.columnDef)}
114
114
  <td
115
115
  class={cn(
116
- 'truncate border-b border-b-surface-2 px-3 py-2 group-last/row:border-b-0',
116
+ 'h-9 truncate border-b border-b-surface-2 px-3 py-0 align-middle group-last/row:border-b-0',
117
117
  alignClass(meta?.align),
118
118
  cell.column.getIsPinned() && 'bg-(--row-bg)'
119
119
  )}
package/dist/components/data-table-v9/types.d.ts CHANGED
@@ -2,7 +2,7 @@ import type { FilterFnOption, RowData } from '@tanstack/svelte-table';
2
2
  import type { Component, Snippet } from 'svelte';
3
3
  import type { DataTableFeatures } from './features';
4
4
  export type DataTableAlign = 'left' | 'center' | 'right';
5
- export type DataTableColumnType = 'text' | 'number' | 'currency' | 'percent' | 'boolean' | 'select' | 'url' | 'phone' | 'date' | 'time' | 'date-time';
5
+ export type DataTableColumnType = 'text' | 'number' | 'currency' | 'percent' | 'boolean' | 'select' | 'url' | 'phone' | 'date' | 'time' | 'date-time' | 'action';
6
6
  export type DataTableCellRenderer<T extends RowData> = (value: unknown, row: T) => string | number | boolean | null | undefined;
7
7
  export type DataTableCellRenderProps<T extends RowData> = {
8
8
  value: unknown;
package/dist/components/data-table-v9/virtual/data-table-virtual-rows.svelte CHANGED
@@ -109,7 +109,7 @@
109
109
  {@const meta = getColumnMeta(cell.column.columnDef)}
110
110
  <td
111
111
  class={cn(
112
- 'items-center truncate px-3 py-2',
112
+ 'h-9 items-center truncate px-3 py-0',
113
113
  alignClass(meta?.align),
114
114
  justifyClass(meta?.align),
115
115
  cell.column.getIsPinned() && 'bg-(--row-bg)'
package/dist/components/toggle/toggle.variants.d.ts CHANGED
@@ -1,43 +1,43 @@
1
1
  import { type VariantProps } from 'tailwind-variants';
2
2
  export declare const toggle: import("tailwind-variants").TVReturnType<{
3
3
  variant: {
4
- ghost: string;
5
- outline: string;
4
+ ghost: "hover:bg-surface-2 hover:text-ink data-pressed:bg-surface-2 data-pressed:text-ink data-pressed:shadow-sm data-[state=on]:bg-surface-2 data-[state=on]:text-ink data-[state=on]:shadow-sm";
5
+ outline: "border border-border hover:bg-surface-2 hover:text-ink data-pressed:bg-surface-2 data-pressed:text-ink data-pressed:shadow-sm data-[state=on]:bg-surface-2 data-[state=on]:text-ink data-[state=on]:shadow-sm";
6
6
  };
7
7
  size: {
8
- sm: string;
9
- md: string;
10
- lg: string;
8
+ sm: "h-8 min-w-8 gap-1 px-1.5 text-xs [&_svg]:size-3.5";
9
+ md: "h-9 min-w-9 gap-1.5 px-2 text-sm [&_svg]:size-4";
10
+ lg: "h-10 min-w-10 gap-2 px-2.5 text-sm [&_svg]:size-5";
11
11
  };
12
12
  icon: {
13
- true: string;
13
+ true: "";
14
14
  };
15
15
  }, undefined, "inline-flex cursor-pointer items-center justify-center rounded-md font-medium text-ink-dim transition-colors select-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none data-disabled:cursor-not-allowed data-disabled:opacity-50 [&_svg]:shrink-0", {
16
16
  variant: {
17
- ghost: string;
18
- outline: string;
17
+ ghost: "hover:bg-surface-2 hover:text-ink data-pressed:bg-surface-2 data-pressed:text-ink data-pressed:shadow-sm data-[state=on]:bg-surface-2 data-[state=on]:text-ink data-[state=on]:shadow-sm";
18
+ outline: "border border-border hover:bg-surface-2 hover:text-ink data-pressed:bg-surface-2 data-pressed:text-ink data-pressed:shadow-sm data-[state=on]:bg-surface-2 data-[state=on]:text-ink data-[state=on]:shadow-sm";
19
19
  };
20
20
  size: {
21
- sm: string;
22
- md: string;
23
- lg: string;
21
+ sm: "h-8 min-w-8 gap-1 px-1.5 text-xs [&_svg]:size-3.5";
22
+ md: "h-9 min-w-9 gap-1.5 px-2 text-sm [&_svg]:size-4";
23
+ lg: "h-10 min-w-10 gap-2 px-2.5 text-sm [&_svg]:size-5";
24
24
  };
25
25
  icon: {
26
- true: string;
26
+ true: "";
27
27
  };
28
- }, undefined, import("tailwind-variants").TVReturnType<{
28
+ }, undefined, import("tailwind-variants").TVReturnTypeLike<{
29
29
  variant: {
30
- ghost: string;
31
- outline: string;
30
+ ghost: "hover:bg-surface-2 hover:text-ink data-pressed:bg-surface-2 data-pressed:text-ink data-pressed:shadow-sm data-[state=on]:bg-surface-2 data-[state=on]:text-ink data-[state=on]:shadow-sm";
31
+ outline: "border border-border hover:bg-surface-2 hover:text-ink data-pressed:bg-surface-2 data-pressed:text-ink data-pressed:shadow-sm data-[state=on]:bg-surface-2 data-[state=on]:text-ink data-[state=on]:shadow-sm";
32
32
  };
33
33
  size: {
34
- sm: string;
35
- md: string;
36
- lg: string;
34
+ sm: "h-8 min-w-8 gap-1 px-1.5 text-xs [&_svg]:size-3.5";
35
+ md: "h-9 min-w-9 gap-1.5 px-2 text-sm [&_svg]:size-4";
36
+ lg: "h-10 min-w-10 gap-2 px-2.5 text-sm [&_svg]:size-5";
37
37
  };
38
38
  icon: {
39
- true: string;
39
+ true: "";
40
40
  };
41
- }, undefined, "inline-flex cursor-pointer items-center justify-center rounded-md font-medium text-ink-dim transition-colors select-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none data-disabled:cursor-not-allowed data-disabled:opacity-50 [&_svg]:shrink-0", unknown, unknown, undefined>>;
41
+ }, undefined>>;
42
42
  export type ToggleSize = NonNullable<VariantProps<typeof toggle>['size']>;
43
43
  export type ToggleVariant = NonNullable<VariantProps<typeof toggle>['variant']>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "compote-ui",
3
- "version": "0.68.1",
3
+ "version": "0.69.0",
4
4
  "license": "MIT",
5
5
  "scripts": {
6
6
  "dev": "vite dev --open",
@@ -46,15 +46,11 @@
46
46
  },
47
47
  "peerDependencies": {
48
48
  "@tanstack/svelte-table": ">=9.0.0-beta.38 <10",
49
- "@tanstack/svelte-virtual": ">=3.0.0",
50
49
  "svelte": "^5.0.0"
51
50
  },
52
51
  "peerDependenciesMeta": {
53
52
  "@tanstack/svelte-table": {
54
53
  "optional": true
55
- },
56
- "@tanstack/svelte-virtual": {
57
- "optional": true
58
54
  }
59
55
  },
60
56
  "devDependencies": {
@@ -69,18 +65,17 @@
69
65
  "@tailwindcss/vite": "^4.3.3",
70
66
  "@tanstack/intent": "^0.3.6",
71
67
  "@tanstack/svelte-table": "9.0.0-beta.47",
72
- "@tanstack/svelte-virtual": "^3.13.33",
73
68
  "@types/node": "^22.20.0",
74
- "eslint": "^10.7.0",
69
+ "eslint": "^10.8.0",
75
70
  "eslint-config-prettier": "^10.1.8",
76
71
  "eslint-plugin-svelte": "^3.22.0",
77
- "globals": "^17.5.0",
72
+ "globals": "^17.8.0",
78
73
  "prettier": "^3.9.6",
79
74
  "prettier-plugin-svelte": "^4.1.1",
80
75
  "prettier-plugin-tailwindcss": "^0.8.1",
81
- "publint": "^0.3.21",
82
- "svelte": "^5.56.7",
83
- "svelte-check": "^4.7.3",
76
+ "publint": "^0.3.22",
77
+ "svelte": "^5.56.8",
78
+ "svelte-check": "^4.7.4",
84
79
  "tailwindcss": "^4.3.3",
85
80
  "tw-animate-css": "^1.4.0",
86
81
  "typescript": "^6.0.3",
@@ -96,10 +91,11 @@
96
91
  "@ark-ui/svelte": "^5.22.1",
97
92
  "@fontsource-variable/nunito-sans": "^5.2.7",
98
93
  "@internationalized/date": "^3.12.2",
94
+ "@tanstack/svelte-virtual": "^3.13.34",
99
95
  "runed": "^0.37.1",
100
96
  "svelte-tel-input": "^4.3.2",
101
97
  "tailwind-merge": "^3.6.0",
102
- "tailwind-variants": "^3.2.2"
98
+ "tailwind-variants": "^3.3.0"
103
99
  },
104
100
  "intent": {
105
101
  "skills": [