@smurfox/proxy-ui 0.4.0 → 0.4.1

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 (7) hide show
  1. package/README.md +6 -2
  2. package/dist/module.json +1 -1
  3. package/dist/runtime/components/Avatar.vue +1 -1
  4. package/dist/runtime/components/Button.vue +10 -10
  5. package/dist/runtime/components/Card.vue +3 -3
  6. package/dist/runtime/components/Chip.vue +8 -8
  7. package/package.json +1 -1
package/README.md CHANGED
@@ -34,12 +34,15 @@ export default defineNuxtConfig({
34
34
  });
35
35
  ```
36
36
 
37
- Add Tailwind to your CSS entry file:
37
+ Add Tailwind to your CSS entry file and register the library as a source so Tailwind picks up the component classes:
38
38
 
39
39
  ```css
40
40
  @import "tailwindcss";
41
+ @source "../node_modules/@smurfox/proxy-ui/dist";
41
42
  ```
42
43
 
44
+ > The `@source` path is relative to the CSS file. If your CSS lives deeper (e.g. `app/assets/css/main.css`), adjust the number of `../` segments so it resolves to your project root's `node_modules`. Without this directive, Tailwind v4 will not scan the library files and variants like `flat`/`outline` will render unstyled.
45
+
43
46
  That's it. All `PU` components are auto-imported and ready to use.
44
47
 
45
48
  ---
@@ -50,6 +53,7 @@ ProxyUI uses CSS variables for colors. Add them to your CSS file to customize:
50
53
 
51
54
  ```css
52
55
  @import "tailwindcss";
56
+ @source "../node_modules/@smurfox/proxy-ui/dist";
53
57
 
54
58
  @theme {
55
59
  --color-primary: #376fff;
@@ -420,7 +424,7 @@ A flexible card component with customizable styling and borders.
420
424
  | ------------- | ---------------------------- | ----------- | --------------------------------- |
421
425
  | `variant` | `'default' \| 'liquidGlass'` | `'default'` | Visual style of the card. |
422
426
  | `customClass` | `string` | — | Custom Tailwind classes to apply. |
423
- | `isBordered` | `boolean` | `false` | Adds a border to the card. |
427
+ | `isBordered` | `boolean` | `true` | Adds a border to the card. |
424
428
 
425
429
  **Examples**
426
430
 
package/dist/module.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "proxy-ui",
3
3
  "configKey": "proxyUI",
4
- "version": "0.4.0",
4
+ "version": "0.4.1",
5
5
  "builder": {
6
6
  "@nuxt/module-builder": "1.0.2",
7
7
  "unbuild": "3.6.1"
package/dist/runtime/components/Avatar.vue CHANGED
@@ -1,6 +1,6 @@
1
1
  <template>
2
2
  <div
3
- class="flex items-center justify-center bg-gray-200 dark:bg-white/10"
3
+ class="flex items-center justify-center bg-gray-200 dark:bg-[#242830]"
4
4
  :class="[
5
5
  !hasText ? 'text-black dark:text-white' : '',
6
6
  sizes[props.size],
package/dist/runtime/components/Button.vue CHANGED
@@ -99,7 +99,7 @@ const props = defineProps({
99
99
  customClass: { type: String, required: false }
100
100
  });
101
101
  const defaultColorClasses = {
102
- default: "bg-gray-200/80 dark:bg-white/10 text-black dark:text-white hover:bg-gray-300/80 dark:hover:bg-white/20",
102
+ default: "bg-gray-200/80 dark:bg-[#242830] text-black dark:text-white hover:bg-gray-300/80 dark:hover:bg-[#2D323B]",
103
103
  ios: "bg-blue-500 text-white hover:brightness-110",
104
104
  primary: "bg-primary text-white hover:brightness-110",
105
105
  danger: "bg-danger text-black hover:brightness-110",
@@ -107,15 +107,15 @@ const defaultColorClasses = {
107
107
  warning: "bg-warning text-black hover:brightness-110"
108
108
  };
109
109
  const secondaryColorClasses = {
110
- default: "bg-gray-100 dark:bg-white/5 text-black dark:text-white hover:bg-gray-200/80 dark:hover:bg-white/10",
111
- ios: "bg-gray-200/60 dark:bg-white/7 text-blue-500 hover:bg-gray-200 dark:hover:bg-white/10",
112
- primary: "bg-gray-200/60 dark:bg-white/7 text-primary hover:bg-gray-200 dark:hover:bg-white/10",
113
- danger: "bg-gray-200/60 dark:bg-white/7 text-danger hover:bg-gray-200 dark:hover:bg-white/10",
114
- success: "bg-gray-200/60 dark:bg-white/7 text-success hover:bg-gray-200 dark:hover:bg-white/10",
115
- warning: "bg-gray-200/60 dark:bg-white/7 text-warning hover:bg-gray-200 dark:hover:bg-white/10"
110
+ default: "bg-gray-100 dark:bg-[#1A1D23] text-black dark:text-white hover:bg-gray-200/80 dark:hover:bg-[#22262E]",
111
+ ios: "bg-gray-200/60 dark:bg-[#242830] text-blue-500 hover:bg-gray-200 dark:hover:bg-white/10",
112
+ primary: "bg-gray-200/60 dark:bg-[#242830] text-primary hover:bg-gray-200 dark:hover:bg-white/10",
113
+ danger: "bg-gray-200/60 dark:bg-[#242830] text-danger hover:bg-gray-200 dark:hover:bg-white/10",
114
+ success: "bg-gray-200/60 dark:bg-[#242830] text-success hover:bg-gray-200 dark:hover:bg-white/10",
115
+ warning: "bg-gray-200/60 dark:bg-[#242830] text-warning hover:bg-gray-200 dark:hover:bg-white/10"
116
116
  };
117
117
  const outlineColorClasses = {
118
- default: "border border-gray-300 text-black dark:border-white/15 dark:text-white hover:bg-gray-100/80 dark:hover:bg-white/10",
118
+ default: "border border-gray-300 text-black dark:border-[#2D323B] dark:text-white hover:bg-gray-100/80 dark:hover:bg-[#1A1D23]",
119
119
  ios: "border border-blue-500 text-blue-500 hover:bg-blue-500/15 dark:hover:bg-blue-500/25",
120
120
  primary: "border border-primary text-primary hover:bg-primary/15 dark:hover:bg-primary/25",
121
121
  danger: "border border-danger text-danger hover:bg-danger/15 dark:hover:bg-danger/25",
@@ -123,7 +123,7 @@ const outlineColorClasses = {
123
123
  warning: "border border-warning text-warning hover:bg-warning/15 dark:hover:bg-warning/25"
124
124
  };
125
125
  const ghostColorClasses = {
126
- default: "text-black dark:text-white hover:bg-gray-200/60 dark:hover:bg-white/10",
126
+ default: "text-black dark:text-white hover:bg-gray-200/60 dark:hover:bg-[#1F232B]",
127
127
  ios: "text-blue-500 hover:bg-blue-100 dark:hover:bg-blue-500/20",
128
128
  primary: "text-primary hover:bg-primary/20 dark:hover:bg-primary/30",
129
129
  danger: "text-danger hover:bg-danger/20 dark:hover:bg-danger/30",
@@ -131,7 +131,7 @@ const ghostColorClasses = {
131
131
  warning: "text-warning hover:bg-warning/20 dark:hover:bg-warning/30"
132
132
  };
133
133
  const flatColorClasses = {
134
- default: "bg-gray-100 dark:bg-white/5 text-black dark:text-white hover:bg-gray-200/80 dark:hover:bg-white/10",
134
+ default: "bg-gray-100 dark:bg-[#1C1F26] text-black dark:text-white hover:bg-gray-200/80 dark:hover:bg-[#242830]",
135
135
  ios: "bg-blue-500/15 text-blue-500 hover:bg-blue-500/25",
136
136
  primary: "bg-primary/15 text-primary hover:bg-primary/25 dark:hover:bg-primary/30",
137
137
  danger: "bg-danger/15 text-danger hover:bg-danger/25 dark:hover:bg-danger/30",
package/dist/runtime/components/Card.vue CHANGED
@@ -1,12 +1,12 @@
1
1
  <template>
2
2
  <div
3
3
  :class="[
4
- !hasBg ? 'bg-white dark:bg-white/5' : '',
4
+ !hasBg ? 'bg-white dark:bg-[#14171C]' : '',
5
5
  !hasPadding ? 'p-4' : '',
6
6
  !hasShadow ? 'pu-shadow-ios' : '',
7
7
  !hasRounded ? 'rounded-2xl' : '',
8
8
  customClass,
9
- isBordered ? 'border border-gray-200 dark:border-white/5' : ''
9
+ isBordered ? 'border border-gray-200 dark:border-[#23272F]' : ''
10
10
  ]"
11
11
  >
12
12
  <slot />
@@ -18,7 +18,7 @@ import { computed } from "vue";
18
18
  const props = defineProps({
19
19
  variant: { type: String, required: false },
20
20
  customClass: { type: String, required: false },
21
- isBordered: { type: Boolean, required: false, default: false }
21
+ isBordered: { type: Boolean, required: false, default: true }
22
22
  });
23
23
  const hasBg = computed(
24
24
  () => props.customClass?.split(" ").some((c) => c.startsWith("bg-"))
package/dist/runtime/components/Chip.vue CHANGED
@@ -62,7 +62,7 @@ const props = defineProps({
62
62
  iconSize: { type: String, required: false }
63
63
  });
64
64
  const defaultColorClasses = {
65
- default: "bg-gray-200/80 dark:bg-white/10 text-black dark:text-white",
65
+ default: "bg-gray-200/80 dark:bg-[#242830] text-black dark:text-white",
66
66
  ios: "bg-blue-500 text-white",
67
67
  primary: "bg-primary text-white",
68
68
  danger: "bg-danger text-black",
@@ -70,12 +70,12 @@ const defaultColorClasses = {
70
70
  warning: "bg-warning text-black"
71
71
  };
72
72
  const secondaryColorClasses = {
73
- default: "bg-gray-100 dark:bg-white/5 text-black dark:text-white",
74
- ios: "bg-gray-200/60 dark:bg-white/7 text-blue-500",
75
- primary: "bg-gray-200/60 dark:bg-white/7 text-primary",
76
- danger: "bg-gray-200/60 dark:bg-white/7 text-danger",
77
- success: "bg-gray-200/60 dark:bg-white/7 text-success",
78
- warning: "bg-gray-200/60 dark:bg-white/7 text-warning"
73
+ default: "bg-gray-100 dark:bg-[#242830] text-black dark:text-white",
74
+ ios: "bg-gray-200/60 dark:bg-[#242830] text-blue-500",
75
+ primary: "bg-gray-200/60 dark:bg-[#242830] text-primary",
76
+ danger: "bg-gray-200/60 dark:bg-[#242830] text-danger",
77
+ success: "bg-gray-200/60 dark:bg-[#242830] text-success",
78
+ warning: "bg-gray-200/60 dark:bg-[#242830] text-warning"
79
79
  };
80
80
  const outlineColorClasses = {
81
81
  default: "border border-gray-300 text-black dark:border-white/15 dark:text-white",
@@ -86,7 +86,7 @@ const outlineColorClasses = {
86
86
  warning: "border border-warning text-warning"
87
87
  };
88
88
  const flatColorClasses = {
89
- default: "bg-gray-100 dark:bg-white/5 text-black dark:text-white",
89
+ default: "bg-gray-100 dark:bg-[#242830] text-black dark:text-white",
90
90
  ios: "bg-blue-500/15 text-blue-500",
91
91
  primary: "bg-primary/15 text-primary",
92
92
  danger: "bg-danger/15 text-danger",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@smurfox/proxy-ui",
3
- "version": "0.4.0",
3
+ "version": "0.4.1",
4
4
  "description": "A UI component library built for Nuxt 4",
5
5
  "repository": {
6
6
  "type": "git",