@nexxtmove/ui 0.0.12 → 0.0.14

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 (5) hide show
  1. package/dist/index.d.ts +12 -17
  2. package/dist/index.js +32 -30
  3. package/package.json +9 -8
  4. package/tailwind/nexxtmove.tailwind.components.css +22 -4
  5. package/tailwind/nexxtmove.tailwind.theme.css +8 -0
package/dist/index.d.ts CHANGED
@@ -4,19 +4,7 @@ import { DefineComponent } from 'vue';
4
4
  import { IconName } from '@awesome.me/kit-37b149f3ef/icons';
5
5
  import { PublicProps } from 'vue';
6
6
 
7
- declare const __VLS_component: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
8
- variant: "primary" | "secondary";
9
- buttonType: "button" | "submit" | "reset";
10
- }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLButtonElement>;
11
-
12
- declare type __VLS_Props = {
13
- variant?: 'primary' | 'secondary';
14
- icon?: InstanceType<typeof NexxtIcon>['name'];
15
- iconRight?: boolean;
16
- disabled?: boolean;
17
- loading?: boolean;
18
- buttonType?: 'button' | 'submit' | 'reset';
19
- };
7
+ declare const __VLS_component: DefineComponent<NexxtButtonProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<NexxtButtonProps> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLButtonElement>;
20
8
 
21
9
  declare function __VLS_template(): {
22
10
  attrs: Partial<{}>;
@@ -39,11 +27,18 @@ declare type IconType = 'regular' | 'solid' | 'light' | 'duotone' | 'brands';
39
27
 
40
28
  export declare const NexxtButton: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
41
29
 
42
- export declare const NexxtIcon: DefineComponent<Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<Props> & Readonly<{}>, {
43
- type: IconType;
44
- }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLElement>;
30
+ declare interface NexxtButtonProps {
31
+ variant?: 'primary' | 'secondary' | 'link';
32
+ icon?: InstanceType<typeof NexxtIcon>['name'];
33
+ iconRight?: boolean;
34
+ disabled?: boolean;
35
+ loading?: boolean;
36
+ buttonType?: 'button' | 'submit' | 'reset';
37
+ }
38
+
39
+ export declare const NexxtIcon: DefineComponent<NexxtIconProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<NexxtIconProps> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLElement>;
45
40
 
46
- declare interface Props {
41
+ declare interface NexxtIconProps {
47
42
  name: IconName;
48
43
  type?: IconType;
49
44
  }
package/dist/index.js CHANGED
@@ -1,5 +1,5 @@
1
- import { defineComponent as c, createElementBlock as o, openBlock as t, normalizeClass as a, createBlock as d, createCommentVNode as l, renderSlot as u, createVNode as s, Transition as m, withCtx as y } from "vue";
2
- const r = /* @__PURE__ */ c({
1
+ import { defineComponent as c, createElementBlock as i, openBlock as n, normalizeClass as t, createBlock as d, createCommentVNode as o, createElementVNode as u, createVNode as l, renderSlot as f, Transition as m, withCtx as y } from "vue";
2
+ const s = /* @__PURE__ */ c({
3
3
  name: "NexxtIcon",
4
4
  __name: "Icon",
5
5
  props: {
@@ -7,11 +7,14 @@ const r = /* @__PURE__ */ c({
7
7
  type: { default: "light" }
8
8
  },
9
9
  setup(e) {
10
- return (i, n) => (t(), o("i", {
11
- class: a([`fa-${e.type}`, `fa-${e.name}`, "items-center", "justify-center"])
10
+ return (a, r) => (n(), i("i", {
11
+ class: t([`fa-${e.type}`, `fa-${e.name}`, "items-center", "justify-center"])
12
12
  }, null, 2));
13
13
  }
14
- }), f = ["type", "disabled", "data-variant"], x = /* @__PURE__ */ c({
14
+ }), v = ["type", "disabled", "data-variant"], b = {
15
+ key: 0,
16
+ class: /* @__PURE__ */ t(["absolute inset-0 flex items-center justify-center rounded-lg"])
17
+ }, x = /* @__PURE__ */ c({
15
18
  name: "NexxtButton",
16
19
  __name: "Button",
17
20
  props: {
@@ -19,32 +22,37 @@ const r = /* @__PURE__ */ c({
19
22
  icon: {},
20
23
  iconRight: { type: Boolean },
21
24
  disabled: { type: Boolean },
22
- loading: { type: Boolean },
25
+ loading: { type: Boolean, default: !1 },
23
26
  buttonType: { default: "button" }
24
27
  },
25
28
  setup(e) {
26
- const i = {
27
- primary: "bg-cornflower-blue-500",
28
- secondary: "bg-white"
29
- };
30
- return (n, b) => (t(), o("button", {
29
+ return (a, r) => (n(), i("button", {
31
30
  type: e.buttonType,
32
31
  disabled: e.disabled,
33
- class: a([
34
- "button relative flex h-10 cursor-pointer items-center justify-center overflow-hidden rounded-lg transition-colors focus-visible:outline-3 disabled:cursor-not-allowed",
32
+ class: t([
33
+ "button relative flex h-10 cursor-pointer items-center justify-center overflow-hidden rounded-lg transition-colors duration-200 focus-visible:outline-3 disabled:cursor-not-allowed",
35
34
  `button-${e.variant}`,
36
- n.$slots.default ?? "w-10",
35
+ a.$slots.default ?? "w-10",
37
36
  e.loading ? "pointer-events-none" : ""
38
37
  ]),
39
38
  "data-variant": e.variant
40
39
  }, [
41
- e.icon ? (t(), d(r, {
40
+ e.icon ? (n(), d(s, {
42
41
  key: 0,
43
42
  name: e.icon,
44
- class: a({ "order-last": e.iconRight })
45
- }, null, 8, ["name", "class"])) : l("", !0),
46
- u(n.$slots, "default"),
47
- s(m, {
43
+ class: t({ "order-last": e.iconRight, "opacity-0": e.loading })
44
+ }, null, 8, ["name", "class"])) : o("", !0),
45
+ u("span", {
46
+ class: t([
47
+ "inline-block transition-all duration-200",
48
+ { "opacity-0": e.loading },
49
+ e.variant === "link" ? "underline underline-offset-1" : "",
50
+ e.variant === "link" && !e.loading && !e.disabled ? "hover:underline-offset-2" : ""
51
+ ])
52
+ }, [
53
+ f(a.$slots, "default")
54
+ ], 2),
55
+ l(m, {
48
56
  "enter-active-class": "transition-opacity duration-200",
49
57
  "enter-from-class": "opacity-0",
50
58
  "enter-to-class": "opacity-100",
@@ -53,26 +61,20 @@ const r = /* @__PURE__ */ c({
53
61
  "leave-to-class": "opacity-0"
54
62
  }, {
55
63
  default: y(() => [
56
- e.loading ? (t(), o("div", {
57
- key: 0,
58
- class: a([
59
- "absolute inset-0 flex items-center justify-center rounded-lg",
60
- i[e.variant]
61
- ])
62
- }, [
63
- s(r, {
64
+ e.loading ? (n(), i("div", b, [
65
+ l(s, {
64
66
  name: "spinner-third",
65
67
  type: "light",
66
68
  class: "fa-spin absolute text-sm"
67
69
  })
68
- ], 2)) : l("", !0)
70
+ ])) : o("", !0)
69
71
  ]),
70
72
  _: 1
71
73
  })
72
- ], 10, f));
74
+ ], 10, v));
73
75
  }
74
76
  });
75
77
  export {
76
78
  x as NexxtButton,
77
- r as NexxtIcon
79
+ s as NexxtIcon
78
80
  };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@nexxtmove/ui",
3
3
  "type": "module",
4
- "version": "0.0.12",
4
+ "version": "0.0.14",
5
5
  "exports": {
6
6
  ".": {
7
7
  "types": "./dist/index.d.ts",
@@ -23,11 +23,11 @@
23
23
  "devDependencies": {
24
24
  "@awesome.me/kit-37b149f3ef": "^1.0.4",
25
25
  "@eslint/js": "^9.39.2",
26
- "@storybook/addon-a11y": "^10.1.11",
27
- "@storybook/addon-docs": "^10.1.11",
28
- "@storybook/addon-vitest": "^10.1.11",
29
- "@storybook/builder-vite": "^10.1.11",
30
- "@storybook/vue3-vite": "^10.1.11",
26
+ "@storybook/addon-a11y": "^10.2.0",
27
+ "@storybook/addon-docs": "^10.2.0",
28
+ "@storybook/addon-vitest": "^10.2.0",
29
+ "@storybook/builder-vite": "^10.2.0",
30
+ "@storybook/vue3-vite": "^10.2.0",
31
31
  "@tailwindcss/vite": "^4.1.18",
32
32
  "@types/node": "^25.0.3",
33
33
  "@types/react": "^19.2.8",
@@ -49,11 +49,12 @@
49
49
  "react": "^19.2.3",
50
50
  "react-dom": "^19.2.3",
51
51
  "remark-frontmatter": "^5.0.0",
52
- "storybook": "^10.1.11",
52
+ "storybook": "^10.2.0",
53
53
  "typescript-eslint": "^8.52.0",
54
54
  "vite": "^7.3.0",
55
55
  "vite-plugin-dts": "^4.5.4",
56
- "vitest": "^4.0.16"
56
+ "vitest": "^4.0.16",
57
+ "eslint-plugin-storybook": "10.2.0"
57
58
  },
58
59
  "engines": {
59
60
  "node": ">=22.18.0"
package/tailwind/nexxtmove.tailwind.components.css CHANGED
@@ -3,6 +3,28 @@
3
3
  */
4
4
 
5
5
  @layer components {
6
+ .button {
7
+ @apply px-(--button-padding-x) py-(--button-padding-y) gap-(--button-gap);
8
+ }
9
+
10
+ .button-link {
11
+ @apply text-button-color-text-link-default px-(--button-padding-link-x) py-(--button-padding-link-y);
12
+ &:hover {
13
+ @media (hover: hover) {
14
+ @apply text-button-color-text-link-hover;
15
+ }
16
+ }
17
+ &:focus-visible {
18
+ @apply text-button-color-text-link-focussed outline-button-color-border-link-focussed outline outline-solid;
19
+ }
20
+ &:active {
21
+ @apply text-button-color-text-link-selected;
22
+ }
23
+ &:disabled {
24
+ @apply text-button-color-text-link-disabled;
25
+ }
26
+ }
27
+
6
28
  .button-primary {
7
29
  @apply bg-button-color-bg-primary-default text-button-color-text-primary-default;
8
30
  &:hover {
@@ -39,8 +61,4 @@
39
61
  }
40
62
  }
41
63
 
42
- .button {
43
- @apply px-(--button-padding-x) py-(--button-padding-y) gap-(--button-gap);
44
- }
45
-
46
64
  }
package/tailwind/nexxtmove.tailwind.theme.css CHANGED
@@ -108,12 +108,18 @@
108
108
  --color-button-color-text-primary-disabled: var(--color-gray-600);
109
109
  --color-button-color-text-secondary-default: var(--color-gray-950);
110
110
  --color-button-color-text-secondary-disabled: var(--color-gray-400);
111
+ --color-button-color-text-link-default: var(--color-cornflower-blue-600);
112
+ --color-button-color-text-link-hover: var(--color-cornflower-blue-700);
113
+ --color-button-color-text-link-focussed: var(--color-cornflower-blue-600);
114
+ --color-button-color-text-link-selected: var(--color-cornflower-blue-800);
115
+ --color-button-color-text-link-disabled: var(--color-gray-400);
111
116
  --color-button-color-border-primary-focussed: var(--color-cornflower-blue-100);
112
117
  --color-button-color-border-secondary-focussed: var(--color-cornflower-blue-100);
113
118
  --color-button-color-border-secondary-hover: var(--color-cornflower-blue-700);
114
119
  --color-button-color-border-secondary-selected: var(--color-cornflower-blue-500);
115
120
  --color-button-color-border-secondary-disabled: var(--color-gray-400);
116
121
  --color-button-color-border-secondary-default: var(--color-gray-950);
122
+ --color-button-color-border-link-focussed: var(--color-cornflower-blue-100);
117
123
  --text-xs: 0.75rem;
118
124
  --text-base: 1rem;
119
125
  --text-lg: 1.125rem;
@@ -173,6 +179,8 @@
173
179
  --radius-none: 0rem;
174
180
  --button-padding-x: var(--spacing-4);
175
181
  --button-padding-y: var(--spacing-2);
182
+ --button-padding-link-x: var(--spacing-0\.5);
183
+ --button-padding-link-y: var(--spacing-0\.5);
176
184
  --button-gap: var(--spacing-1);
177
185
  --button-border-radius: var(--radius-lg);
178
186
  --font-sans: 'Poppins', ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";