@ship-ui/core 0.22.5 → 0.22.8

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.
package/README.md CHANGED
@@ -20,7 +20,7 @@ npm i -S @ship-ui/core
20
20
  ### Add styles inside your src/styles.scss
21
21
 
22
22
  ```scss
23
- @use 'ship-ui/core/styles';
23
+ @use '@ship-ui/core/styles';
24
24
  ```
25
25
 
26
26
  ### Inside your angular.json file
@@ -32,7 +32,7 @@ you need to add the ship assets to your assets array this is to add the ship def
32
32
  "src/assets",
33
33
  {
34
34
  "glob": "**/*",
35
- "input": "./node_modules/ship-ui/core/assets",
35
+ "input": "./node_modules/@ship-ui/core/assets",
36
36
  "output": "./ship-ui-assets/"
37
37
  }
38
38
  ]
@@ -73,6 +73,51 @@ You now wanna add when to build the font and when to watch so it works well toge
73
73
  }
74
74
  ```
75
75
 
76
+ ## AI & Developer Experience
77
+
78
+ ShipUI comes with built-in tools to enhance your development workflow through AI and IDE integrations.
79
+
80
+ ### Model Context Protocol (MCP)
81
+
82
+ ShipUI includes an MCP server that allows AI agents (like Cursor, Claude Desktop, or custom tools) to understand and correctly use ShipUI components.
83
+
84
+ #### Setup in Editors
85
+
86
+ To use ShipUI with your favorite AI-powered editor, add the following configuration:
87
+
88
+ **Command:** `npx @ship-ui/core ship-mcp`
89
+
90
+ - **Cursor**:
91
+ 1. Go to **Settings** > **Models** > **MCP**.
92
+ 2. Click **+ Add new MCP server**.
93
+ 3. Name: `ShipUI`, Type: `command`, Command: `npx @ship-ui/core ship-mcp`.
94
+ - **Antigravity**:
95
+ 1. Open your workspace or global configuration.
96
+ 2. Add `@ship-ui/core` to your `mcpServers` list or run with `npx @ship-ui/core ship-mcp`.
97
+ - **Claude Desktop**:
98
+ Add to your `claude_desktop_config.json`:
99
+ ```json
100
+ "mcpServers": {
101
+ "ship-ui": {
102
+ "command": "npx",
103
+ "args": ["-y", "@ship-ui/core", "ship-mcp"]
104
+ }
105
+ }
106
+ ```
107
+
108
+ To manually verify the server is working:
109
+
110
+ ```sh
111
+ npx @ship-ui/core ship-mcp
112
+ ```
113
+
114
+ ### VS Code Snippets
115
+
116
+ The library includes high-quality TextMate snippets for all components, including "full" versions with choices for colors, variants, and sizes.
117
+
118
+ To use them in VS Code, you can add a link to the snippets file in your `.vscode/settings.json` or copy the content to your project's snippets. The file is located at:
119
+ `./node_modules/@ship-ui/core/snippets/ship-ui.code-snippets`
120
+
76
121
  ## Follow our progress
77
122
 
78
123
  We have a [todos](documents/todos.md) file where we try keep track of features/bugs/blockers currently in pipeline etc
@@ -81,7 +126,6 @@ We have a [todos](documents/todos.md) file where we try keep track of features/b
81
126
 
82
127
  - <strike>There was raised thoughts on separating out the icon utility the decision are for now not to since this package are depended on those icons for now, we can open up a new debate about it if some comes with a solid argument for it</strike>
83
128
  - <strike>For safari `<18` the selects does not support using options so you must use `<sh-option>` instead of `<option>` (this is fixed in the next select version currently suffixed with `-new`)</strike> (We circumvent this by using a templates instead of options)
84
- - Known issues for selects when having two selects editing the same value and it is a multi select and searchable they clear out when opened also when selecting a new item they clear the rest of the list - not a very likely scenario but it is something to keep in mind (Your UI probably should not allow this scenario write an issue if you think it should be possible with a good explanation and example)
85
129
 
86
130
  ## Contributors
87
131
 
@@ -1,37 +1,12 @@
1
1
  [
2
2
  {
3
- "name": "ChildComponent",
4
- "selector": "app-child",
5
- "path": "core/projects/ship-ui/src/lib/utilities/create-input-example.component.ts",
3
+ "name": "ShipPreventWheel",
4
+ "selector": "[shPreventWheel]",
5
+ "path": "core/projects/ship-ui/src/lib/directives/ship-prevent-wheel.directive.ts",
6
6
  "description": "",
7
7
  "keywords": [],
8
8
  "inputs": [],
9
9
  "outputs": [],
10
- "methods": [
11
- {
12
- "name": "toggleTextInput",
13
- "parameters": "",
14
- "returnType": "any",
15
- "description": ""
16
- }
17
- ],
18
- "cssVariables": [],
19
- "examples": []
20
- },
21
- {
22
- "name": "ShipFileDragDrop",
23
- "selector": "[shDragDrop]",
24
- "path": "core/projects/ship-ui/src/lib/directives/ship-file-drag-drop.directive.ts",
25
- "description": "",
26
- "keywords": [],
27
- "inputs": [],
28
- "outputs": [
29
- {
30
- "name": "filesDropped",
31
- "type": "FileList",
32
- "description": ""
33
- }
34
- ],
35
10
  "methods": [],
36
11
  "cssVariables": [],
37
12
  "examples": []
@@ -68,6 +43,24 @@
68
43
  "cssVariables": [],
69
44
  "examples": []
70
45
  },
46
+ {
47
+ "name": "ShipFileDragDrop",
48
+ "selector": "[shDragDrop]",
49
+ "path": "core/projects/ship-ui/src/lib/directives/ship-file-drag-drop.directive.ts",
50
+ "description": "",
51
+ "keywords": [],
52
+ "inputs": [],
53
+ "outputs": [
54
+ {
55
+ "name": "filesDropped",
56
+ "type": "FileList",
57
+ "description": ""
58
+ }
59
+ ],
60
+ "methods": [],
61
+ "cssVariables": [],
62
+ "examples": []
63
+ },
71
64
  {
72
65
  "name": "ShipTooltipWrapper",
73
66
  "selector": "ship-tooltip-wrapper",
@@ -136,14 +129,21 @@
136
129
  "examples": []
137
130
  },
138
131
  {
139
- "name": "ShipPreventWheel",
140
- "selector": "[shPreventWheel]",
141
- "path": "core/projects/ship-ui/src/lib/directives/ship-prevent-wheel.directive.ts",
132
+ "name": "ChildComponent",
133
+ "selector": "app-child",
134
+ "path": "core/projects/ship-ui/src/lib/utilities/create-input-example.component.ts",
142
135
  "description": "",
143
136
  "keywords": [],
144
137
  "inputs": [],
145
138
  "outputs": [],
146
- "methods": [],
139
+ "methods": [
140
+ {
141
+ "name": "toggleTextInput",
142
+ "parameters": "",
143
+ "returnType": "any",
144
+ "description": ""
145
+ }
146
+ ],
147
147
  "cssVariables": [],
148
148
  "examples": []
149
149
  },
Binary file
@@ -1,6 +1,6 @@
1
1
  import { isPlatformServer } from '@angular/common';
2
2
  import * as i0 from '@angular/core';
3
- import { InjectionToken, inject, DOCUMENT, PLATFORM_ID, signal, effect, Injectable, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
3
+ import { InjectionToken, inject, DOCUMENT, PLATFORM_ID, signal, effect, Injectable, input, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
4
4
  import { ShipButton } from '@ship-ui/core/ship-button';
5
5
  import { ShipIcon } from '@ship-ui/core/ship-icon';
6
6
 
@@ -72,6 +72,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
72
72
  class ShipThemeToggle {
73
73
  constructor() {
74
74
  this.#themeState = inject(ShipThemeState);
75
+ this.color = input(null, /* @ts-ignore */
76
+ ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
77
+ this.variant = input(null, /* @ts-ignore */
78
+ ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
79
+ this.size = input('small', /* @ts-ignore */
80
+ ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
75
81
  this.theme = this.#themeState.theme;
76
82
  }
77
83
  #themeState;
@@ -82,8 +88,14 @@ class ShipThemeToggle {
82
88
  this.#themeState.setTheme(theme);
83
89
  }
84
90
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ShipThemeToggle, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
85
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ShipThemeToggle, isStandalone: true, selector: "ship-theme-toggle", ngImport: i0, template: `
86
- <button shButton size="small" (click)="toggleTheme()">
91
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ShipThemeToggle, isStandalone: true, selector: "ship-theme-toggle", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
92
+ <button
93
+ shButton
94
+ [color]="color()"
95
+ [variant]="variant()"
96
+ [size]="size()"
97
+ (click)="toggleTheme()"
98
+ >
87
99
  @if (theme() === 'dark') {
88
100
  <sh-icon>moon-bold</sh-icon>
89
101
  } @else if (theme() === 'light') {
@@ -98,7 +110,13 @@ class ShipThemeToggle {
98
110
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ShipThemeToggle, decorators: [{
99
111
  type: Component,
100
112
  args: [{ selector: 'ship-theme-toggle', encapsulation: ViewEncapsulation.None, imports: [ShipIcon, ShipButton], template: `
101
- <button shButton size="small" (click)="toggleTheme()">
113
+ <button
114
+ shButton
115
+ [color]="color()"
116
+ [variant]="variant()"
117
+ [size]="size()"
118
+ (click)="toggleTheme()"
119
+ >
102
120
  @if (theme() === 'dark') {
103
121
  <sh-icon>moon-bold</sh-icon>
104
122
  } @else if (theme() === 'light') {
@@ -109,7 +127,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
109
127
  }
110
128
  </button>
111
129
  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["ship-theme-toggle{display:flex;align-items:center;justify-content:center;position:relative}ship-theme-toggle [shButton].small sh-icon.small-icon{font-size:.625rem}ship-theme-toggle:has(sh-icon.small-icon) [shButton].small{gap:0}ship-theme-toggle:has(sh-icon.small-icon) sh-icon:first-child{transform:translate(-.0625rem,-.25rem)}ship-theme-toggle:has(sh-icon.small-icon) sh-icon:last-child{transform:translate(.0625rem,.25rem)}ship-theme-toggle:has(sh-icon.small-icon):after{content:\"\";height:1rem;width:1px;background:var(--base-12);position:absolute;inset:0;margin:auto;transform:rotate(30deg)}\n"] }]
112
- }] });
130
+ }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
113
131
 
114
132
  /**
115
133
  * Generated bundle index. Do not edit.
@@ -1 +1 @@
1
- {"version":3,"file":"ship-ui-core-ship-theme-toggle.mjs","sources":["../../../projects/ship-ui/ship-theme-toggle/ship-theme-state.ts","../../../projects/ship-ui/ship-theme-toggle/ship-theme-toggle.ts","../../../projects/ship-ui/ship-theme-toggle/ship-ui-core-ship-theme-toggle.ts"],"sourcesContent":["import { isPlatformServer } from '@angular/common';\nimport { DOCUMENT, effect, inject, Injectable, PLATFORM_ID, signal } from '@angular/core';\n\nexport type ShipThemeOption = 'light' | 'dark' | null;\nexport const THEME_ORDER: ShipThemeOption[] = ['light', 'dark', null];\n\nimport { InjectionToken } from '@angular/core';\n\nexport const WINDOW = new InjectionToken<Window>('WindowToken', {\n providedIn: 'root',\n factory: () => (typeof window !== 'undefined' ? window : ({} as Window)),\n});\n\n@Injectable({\n providedIn: 'root',\n})\nexport class ShipThemeState {\n #document = inject(DOCUMENT);\n #window = inject(WINDOW);\n #platformId = inject(PLATFORM_ID);\n #storedDarkMode = this.localStorage()?.getItem('shipTheme') as ShipThemeOption;\n #theme = signal<ShipThemeOption>(this.#storedDarkMode);\n\n theme = this.#theme.asReadonly();\n\n darkModeEffect = effect(() => {\n const theme = this.#theme();\n\n if (theme === null) {\n this.#document.documentElement.classList.remove('dark');\n this.#document.documentElement.classList.remove('light');\n return;\n }\n\n if (theme === 'dark') {\n this.#document.documentElement.classList.add('dark');\n this.#document.documentElement.classList.remove('light');\n } else {\n this.#document.documentElement.classList.add('light');\n this.#document.documentElement.classList.remove('dark');\n }\n });\n\n localStorage() {\n if (isPlatformServer(this.#platformId)) return null;\n\n return this.#window.localStorage;\n }\n\n toggleTheme() {\n const nextTheme = this.#theme() === null ? THEME_ORDER[0] : THEME_ORDER[THEME_ORDER.indexOf(this.#theme()) + 1];\n\n this.setTheme(nextTheme);\n }\n\n setTheme(theme: ShipThemeOption) {\n if (theme === null) {\n this.localStorage()?.removeItem('shipTheme');\n this.#theme.set(null);\n return;\n }\n\n this.localStorage()?.setItem('shipTheme', theme);\n this.#theme.set(theme);\n }\n}\n","import { ChangeDetectionStrategy, Component, inject, ViewEncapsulation } from '@angular/core';\nimport { ShipButton } from '@ship-ui/core/ship-button';\nimport { ShipIcon } from '@ship-ui/core/ship-icon';\nimport { ShipThemeOption, ShipThemeState } from './ship-theme-state';\n\n@Component({\n selector: 'ship-theme-toggle',\n styleUrl: './ship-theme-toggle.scss',\n encapsulation: ViewEncapsulation.None,\n imports: [ShipIcon, ShipButton],\n template: `\n <button shButton size=\"small\" (click)=\"toggleTheme()\">\n @if (theme() === 'dark') {\n <sh-icon>moon-bold</sh-icon>\n } @else if (theme() === 'light') {\n <sh-icon>sun-bold</sh-icon>\n } @else if (theme() === null) {\n <sh-icon class=\"small-icon\">sun-bold</sh-icon>\n <sh-icon class=\"small-icon\">moon-bold</sh-icon>\n }\n </button>\n `,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ShipThemeToggle {\n #themeState = inject(ShipThemeState);\n\n theme = this.#themeState.theme;\n\n toggleTheme() {\n this.#themeState.toggleTheme();\n }\n\n setTheme(theme: ShipThemeOption) {\n this.#themeState.setTheme(theme);\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"ship-ui-core-ship-theme-toggle.mjs","sources":["../../../projects/ship-ui/ship-theme-toggle/ship-theme-state.ts","../../../projects/ship-ui/ship-theme-toggle/ship-theme-toggle.ts","../../../projects/ship-ui/ship-theme-toggle/ship-ui-core-ship-theme-toggle.ts"],"sourcesContent":["import { isPlatformServer } from '@angular/common';\nimport { DOCUMENT, effect, inject, Injectable, PLATFORM_ID, signal } from '@angular/core';\n\nexport type ShipThemeOption = 'light' | 'dark' | null;\nexport const THEME_ORDER: ShipThemeOption[] = ['light', 'dark', null];\n\nimport { InjectionToken } from '@angular/core';\n\nexport const WINDOW = new InjectionToken<Window>('WindowToken', {\n providedIn: 'root',\n factory: () => (typeof window !== 'undefined' ? window : ({} as Window)),\n});\n\n@Injectable({\n providedIn: 'root',\n})\nexport class ShipThemeState {\n #document = inject(DOCUMENT);\n #window = inject(WINDOW);\n #platformId = inject(PLATFORM_ID);\n #storedDarkMode = this.localStorage()?.getItem('shipTheme') as ShipThemeOption;\n #theme = signal<ShipThemeOption>(this.#storedDarkMode);\n\n theme = this.#theme.asReadonly();\n\n darkModeEffect = effect(() => {\n const theme = this.#theme();\n\n if (theme === null) {\n this.#document.documentElement.classList.remove('dark');\n this.#document.documentElement.classList.remove('light');\n return;\n }\n\n if (theme === 'dark') {\n this.#document.documentElement.classList.add('dark');\n this.#document.documentElement.classList.remove('light');\n } else {\n this.#document.documentElement.classList.add('light');\n this.#document.documentElement.classList.remove('dark');\n }\n });\n\n localStorage() {\n if (isPlatformServer(this.#platformId)) return null;\n\n return this.#window.localStorage;\n }\n\n toggleTheme() {\n const nextTheme = this.#theme() === null ? THEME_ORDER[0] : THEME_ORDER[THEME_ORDER.indexOf(this.#theme()) + 1];\n\n this.setTheme(nextTheme);\n }\n\n setTheme(theme: ShipThemeOption) {\n if (theme === null) {\n this.localStorage()?.removeItem('shipTheme');\n this.#theme.set(null);\n return;\n }\n\n this.localStorage()?.setItem('shipTheme', theme);\n this.#theme.set(theme);\n }\n}\n","import { ChangeDetectionStrategy, Component, inject, input, ViewEncapsulation } from '@angular/core';\nimport { ShipButton } from '@ship-ui/core/ship-button';\nimport { ShipIcon } from '@ship-ui/core/ship-icon';\nimport { ShipButtonSize, ShipColor, ShipSheetVariant } from '@ship-ui/core';\nimport { ShipThemeOption, ShipThemeState } from './ship-theme-state';\n\n@Component({\n selector: 'ship-theme-toggle',\n styleUrl: './ship-theme-toggle.scss',\n encapsulation: ViewEncapsulation.None,\n imports: [ShipIcon, ShipButton],\n template: `\n <button\n shButton\n [color]=\"color()\"\n [variant]=\"variant()\"\n [size]=\"size()\"\n (click)=\"toggleTheme()\"\n >\n @if (theme() === 'dark') {\n <sh-icon>moon-bold</sh-icon>\n } @else if (theme() === 'light') {\n <sh-icon>sun-bold</sh-icon>\n } @else if (theme() === null) {\n <sh-icon class=\"small-icon\">sun-bold</sh-icon>\n <sh-icon class=\"small-icon\">moon-bold</sh-icon>\n }\n </button>\n `,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ShipThemeToggle {\n #themeState = inject(ShipThemeState);\n\n color = input<ShipColor | null>(null);\n variant = input<ShipSheetVariant | null>(null);\n size = input<ShipButtonSize | null>('small');\n\n theme = this.#themeState.theme;\n\n toggleTheme() {\n this.#themeState.toggleTheme();\n }\n\n setTheme(theme: ShipThemeOption) {\n this.#themeState.setTheme(theme);\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@ship-ui/core",
3
3
  "license": "MIT",
4
- "version": "0.22.5",
4
+ "version": "0.22.8",
5
5
  "peerDependencies": {
6
6
  "@angular/common": ">=20",
7
7
  "@angular/core": ">=20",
@@ -1,4 +1,4 @@
1
- import * as i0 from '@angular/core';
1
+ import * as _angular_core from '@angular/core';
2
2
  import { InjectionToken } from '@angular/core';
3
3
 
4
4
  type ShipThemeOption = 'light' | 'dark' | null;
@@ -6,22 +6,25 @@ declare const THEME_ORDER: ShipThemeOption[];
6
6
  declare const WINDOW: InjectionToken<Window>;
7
7
  declare class ShipThemeState {
8
8
  #private;
9
- theme: i0.Signal<ShipThemeOption>;
10
- darkModeEffect: i0.EffectRef;
9
+ theme: _angular_core.Signal<ShipThemeOption>;
10
+ darkModeEffect: _angular_core.EffectRef;
11
11
  localStorage(): Storage | null;
12
12
  toggleTheme(): void;
13
13
  setTheme(theme: ShipThemeOption): void;
14
- static ɵfac: i0.ɵɵFactoryDeclaration<ShipThemeState, never>;
15
- static ɵprov: i0.ɵɵInjectableDeclaration<ShipThemeState>;
14
+ static ɵfac: _angular_core.ɵɵFactoryDeclaration<ShipThemeState, never>;
15
+ static ɵprov: _angular_core.ɵɵInjectableDeclaration<ShipThemeState>;
16
16
  }
17
17
 
18
18
  declare class ShipThemeToggle {
19
19
  #private;
20
- theme: i0.Signal<ShipThemeOption>;
20
+ color: _angular_core.InputSignal<"" | "primary" | "accent" | "warn" | "error" | "success" | null>;
21
+ variant: _angular_core.InputSignal<"" | "simple" | "outlined" | "flat" | "raised" | null>;
22
+ size: _angular_core.InputSignal<"" | "small" | "xsmall" | null>;
23
+ theme: _angular_core.Signal<ShipThemeOption>;
21
24
  toggleTheme(): void;
22
25
  setTheme(theme: ShipThemeOption): void;
23
- static ɵfac: i0.ɵɵFactoryDeclaration<ShipThemeToggle, never>;
24
- static ɵcmp: i0.ɵɵComponentDeclaration<ShipThemeToggle, "ship-theme-toggle", never, {}, {}, never, never, true, never>;
26
+ static ɵfac: _angular_core.ɵɵFactoryDeclaration<ShipThemeToggle, never>;
27
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<ShipThemeToggle, "ship-theme-toggle", never, { "color": { "alias": "color"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
25
28
  }
26
29
 
27
30
  export { ShipThemeState, ShipThemeToggle, THEME_ORDER, WINDOW };