@mhmo91/schmancy 0.4.46 → 0.4.48

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 (57) hide show
  1. package/ai/dialog.md +160 -124
  2. package/dist/ai/dialog.md +160 -124
  3. package/dist/{avatar-By_6fdSR.cjs → avatar-CagKP9HD.cjs} +2 -2
  4. package/dist/{avatar-By_6fdSR.cjs.map → avatar-CagKP9HD.cjs.map} +1 -1
  5. package/dist/{avatar-DZ45SZ_3.js → avatar-DBcrNPzz.js} +7 -7
  6. package/dist/{avatar-DZ45SZ_3.js.map → avatar-DBcrNPzz.js.map} +1 -1
  7. package/dist/badge.cjs +1 -1
  8. package/dist/badge.js +1 -1
  9. package/dist/button.cjs +1 -1
  10. package/dist/button.js +1 -1
  11. package/dist/content-drawer.cjs +1 -1
  12. package/dist/content-drawer.js +1 -1
  13. package/dist/{date-range-CVkBXQxc.cjs → date-range-Cf9ldt-N.cjs} +2 -2
  14. package/dist/{date-range-CVkBXQxc.cjs.map → date-range-Cf9ldt-N.cjs.map} +1 -1
  15. package/dist/{date-range-Cnrrl6_Q.js → date-range-DPZXGoEA.js} +2 -2
  16. package/dist/{date-range-Cnrrl6_Q.js.map → date-range-DPZXGoEA.js.map} +1 -1
  17. package/dist/date-range.cjs +1 -1
  18. package/dist/date-range.js +1 -1
  19. package/dist/{dialog-content-MhUhElif.js → dialog-content-CT6Y3ZLb.js} +2 -2
  20. package/dist/{dialog-content-MhUhElif.js.map → dialog-content-CT6Y3ZLb.js.map} +1 -1
  21. package/dist/{dialog-content-Dm9ywkp4.cjs → dialog-content-tiwbeegi.cjs} +2 -2
  22. package/dist/{dialog-content-Dm9ywkp4.cjs.map → dialog-content-tiwbeegi.cjs.map} +1 -1
  23. package/dist/{dialog-service-iRGqMSDe.cjs → dialog-service-DUDhcx9X.cjs} +2 -2
  24. package/dist/{dialog-service-iRGqMSDe.cjs.map → dialog-service-DUDhcx9X.cjs.map} +1 -1
  25. package/dist/{dialog-service-LvOr2E3k.js → dialog-service-Dm7HJGjx.js} +2 -2
  26. package/dist/{dialog-service-LvOr2E3k.js.map → dialog-service-Dm7HJGjx.js.map} +1 -1
  27. package/dist/dialog.cjs +1 -1
  28. package/dist/dialog.js +2 -2
  29. package/dist/{icon-button-BW5ofOL5.js → icon-button-BGvSPuE-.js} +1 -2
  30. package/dist/icon-button-BGvSPuE-.js.map +1 -0
  31. package/dist/{icon-button-9V68mzcL.cjs → icon-button-DbvjV5zJ.cjs} +1 -2
  32. package/dist/icon-button-DbvjV5zJ.cjs.map +1 -0
  33. package/dist/index.cjs +1 -1
  34. package/dist/index.js +7 -7
  35. package/dist/nav-drawer.cjs +1 -1
  36. package/dist/nav-drawer.js +1 -1
  37. package/dist/{sheet-DMP3Pfe5.js → sheet-Cw2qLdzN.js} +4 -4
  38. package/dist/sheet-Cw2qLdzN.js.map +1 -0
  39. package/dist/sheet-eCDoMdHF.cjs +52 -0
  40. package/dist/sheet-eCDoMdHF.cjs.map +1 -0
  41. package/dist/sheet.cjs +1 -1
  42. package/dist/sheet.js +1 -1
  43. package/dist/teleport.cjs +1 -1
  44. package/dist/teleport.js +1 -1
  45. package/dist/theme.cjs +1 -1
  46. package/dist/{theme.component-Bl4uy-_0.js → theme.component-ColRTbY5.js} +122 -122
  47. package/dist/{theme.component-Bl4uy-_0.js.map → theme.component-ColRTbY5.js.map} +1 -1
  48. package/dist/theme.component-RtV3l-Ns.cjs +3 -0
  49. package/dist/{theme.component-Dnf9PdX8.cjs.map → theme.component-RtV3l-Ns.cjs.map} +1 -1
  50. package/dist/theme.js +1 -1
  51. package/package.json +1 -1
  52. package/dist/icon-button-9V68mzcL.cjs.map +0 -1
  53. package/dist/icon-button-BW5ofOL5.js.map +0 -1
  54. package/dist/sheet-DMP3Pfe5.js.map +0 -1
  55. package/dist/sheet-Dsx7bpof.cjs +0 -52
  56. package/dist/sheet-Dsx7bpof.cjs.map +0 -1
  57. package/dist/theme.component-Dnf9PdX8.cjs +0 -3
package/ai/dialog.md CHANGED
@@ -1,138 +1,174 @@
1
1
  # Schmancy Dialog - AI Reference
2
2
 
3
+ ## Quick Start
4
+
5
+ ### Service API (Recommended)
3
6
  ```js
4
- // Basic Dialog Component
5
- <schmancy-dialog
6
- uid?="string"> // Unique identifier for dialog instance
7
- <!-- Dialog content goes here -->
8
- <div>Dialog content</div>
9
- </schmancy-dialog>
10
-
11
- // Dialog Component Methods
12
- dialog.show(position?) -> Promise<boolean> // Show dialog, optionally at a specific position
13
- dialog.hide(result?) -> void // Hide dialog with optional result (true/false)
14
-
15
- // Position can be:
16
- // - Undefined: Centers dialog in viewport
17
- // - Coordinates: { x: number, y: number }
18
- // - MouseEvent: Uses click coordinates
19
- // - TouchEvent: Uses touch coordinates
20
-
21
- // Dialog Events
22
- @close // Fires when dialog is closed
23
-
24
- // CSS Variables
25
- --dialog-width: 360px // Controls dialog width
26
-
27
- // Confirm Dialog Component (used internally by service)
28
- <confirm-dialog
29
- title?="string" // Dialog title
30
- subtitle?="string" // Dialog subtitle
31
- message?="string" // Dialog message
32
- confirm-text?="string" // Confirm button text (default: "Confirm")
33
- cancel-text?="string" // Cancel button text (default: "Cancel")
34
- variant?="default|danger" // Dialog variant (default: "default")
35
- confirm-color?="primary|error|warning|success"> // Confirm button color
36
- <div slot="content">Custom content</div>
37
- </confirm-dialog>
38
-
39
- // Service API (higher-level abstraction)
40
- $dialog.confirm({
41
- title?,
42
- subtitle?,
43
- message?,
44
- confirmText?,
45
- cancelText?,
46
- variant?: "default"|"danger",
47
- confirmColor?: "primary"|"error"|"warning"|"success", // Button color for confirm action
48
- position?: {x,y}|MouseEvent|TouchEvent,
49
- width?: string,
50
- content?: TemplateResult|HTMLElement|Function,
51
- onConfirm?: Function,
52
- onCancel?: Function,
53
- targetContainer?: HTMLElement // Container to append dialog to (uses theme discovery pattern)
54
- }) -> Promise<boolean>
55
-
56
- $dialog.ask(message, event?) -> Promise<boolean>
57
- $dialog.danger({...options}) -> Promise<boolean>
58
- $dialog.component(content, options?) -> Promise<boolean>
59
- $dialog.dismiss() -> boolean // Dismiss most recently opened dialog
60
-
61
- // Examples
62
- // Basic dialog usage
63
- const dialog = document.querySelector('schmancy-dialog');
64
- // Show dialog centered
65
- const result = await dialog.show();
66
- // Show dialog at specific coordinates
67
- const result = await dialog.show({ x: 100, y: 200 });
68
- // Show dialog at click position
69
- button.addEventListener('click', async (e) => {
70
- const result = await dialog.show(e);
71
- console.log('Dialog result:', result);
72
- });
73
-
74
- // Manually hiding dialog
75
- dialog.hide(true); // Hide with positive result
76
- dialog.hide(false); // Hide with negative result
77
-
78
- // Dialog with confirm/cancel buttons
79
- <schmancy-dialog id="confirmDialog">
80
- <div style="padding: 16px;">
81
- <h3>Confirm Action</h3>
82
- <p>Are you sure you want to proceed?</p>
83
- <div style="display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px;">
84
- <schmancy-button variant="text" @click=${() => dialog.hide(false)}>
85
- Cancel
86
- </schmancy-button>
87
- <schmancy-button variant="filled" @click=${() => dialog.hide(true)}>
88
- Confirm
89
- </schmancy-button>
90
- </div>
91
- </div>
92
- </schmancy-dialog>
7
+ import { $dialog } from '@mhmo91/schmancy'
93
8
 
94
- // Using the dialog service
95
9
  // Simple confirmation
96
- const confirmed = await $dialog.ask("Save changes?", event);
10
+ const confirmed = await $dialog.ask("Save changes?")
97
11
 
98
- // Confirmation with custom options
12
+ // Confirmation with options
99
13
  const confirmed = await $dialog.confirm({
100
- title: "Confirm Deletion",
101
- message: "Are you sure you want to delete this item? This action cannot be undone.",
14
+ title: "Delete Item",
15
+ message: "This action cannot be undone.",
102
16
  confirmText: "Delete",
103
- cancelText: "Cancel",
104
- variant: "danger",
105
- position: event
106
- });
17
+ confirmColor: "error" // Makes button red
18
+ })
19
+
20
+ // Custom component dialog
21
+ const result = await $dialog.component(html`
22
+ <div class="p-4">
23
+ <schmancy-input label="Name"></schmancy-input>
24
+ </div>
25
+ `)
26
+
27
+ // Dismiss active dialog
28
+ $dialog.dismiss()
29
+ ```
30
+
31
+ ### Component API (Low-level)
32
+ ```js
33
+ // In Lit component template
34
+ html`<schmancy-dialog id="myDialog">
35
+ <div class="p-4">Content here</div>
36
+ </schmancy-dialog>`
37
+
38
+ // In Lit component class
39
+ @query('#myDialog') dialog!: SchmancyDialog
40
+
41
+ // Show dialog (returns promise)
42
+ const result = await this.dialog.show() // Centered
43
+ const result = await this.dialog.show(event) // At click position
44
+ const result = await this.dialog.show({x, y}) // At coordinates
45
+
46
+ // Hide dialog
47
+ this.dialog.hide(true) // Resolve with true
48
+ this.dialog.hide(false) // Resolve with false
49
+ ```
50
+
51
+ ## Service Methods
52
+
53
+ ### $dialog.confirm(options)
54
+ Shows a confirmation dialog with title, message, and buttons.
55
+
56
+ ```js
57
+ options = {
58
+ title?: string, // Dialog title
59
+ subtitle?: string, // Subtitle below title
60
+ message?: string, // Main message
61
+ confirmText?: string, // Confirm button text (default: "Confirm")
62
+ cancelText?: string, // Cancel button text (default: "Cancel")
63
+ variant?: "default"|"danger",// Style variant
64
+ confirmColor?: "primary"|"error"|"warning"|"success", // Button color
65
+ position?: {x,y}|Event, // Position (default: centered)
66
+ width?: string, // Dialog width (default: "360px")
67
+ content?: TemplateResult, // Custom content (replaces message)
68
+ onConfirm?: Function, // Confirm callback
69
+ onCancel?: Function, // Cancel callback
70
+ targetContainer?: HTMLElement // Where to append dialog
71
+ }
72
+ ```
73
+
74
+ ### $dialog.ask(message, event?)
75
+ Simple confirmation with just a message.
76
+
77
+ ### $dialog.danger(options)
78
+ Confirmation dialog with danger styling (same options as confirm, variant forced to "danger").
79
+
80
+ ### $dialog.component(content, options?)
81
+ Shows dialog with custom content, no built-in buttons or title.
107
82
 
108
- // Confirmation with colored button
83
+ ```js
84
+ content = TemplateResult | HTMLElement | (() => TemplateResult|HTMLElement)
85
+ options = {
86
+ position?: {x,y}|Event,
87
+ width?: string,
88
+ targetContainer?: HTMLElement
89
+ }
90
+ ```
91
+
92
+ ### $dialog.dismiss()
93
+ Dismisses the most recently opened dialog. Returns true if a dialog was dismissed.
94
+
95
+ ## Component Structure
96
+
97
+ ### schmancy-dialog
98
+ Basic dialog container without built-in UI.
99
+ - Shows overlay and positioned container
100
+ - Handles positioning (centered or at coordinates)
101
+ - Emits `close` event
102
+ - CSS variable: `--dialog-width`
103
+
104
+ ### confirm-dialog
105
+ Extended dialog with title, message, and action buttons.
106
+ - All features of schmancy-dialog
107
+ - Built-in form with confirm/cancel buttons
108
+ - Supports custom content via slot
109
+ - Button colors based on `confirmColor` property
110
+
111
+ ## Positioning
112
+
113
+ Dialogs can be positioned:
114
+ 1. **Centered** (default) - Centers in viewport with slight upward shift
115
+ 2. **At event** - Opens at click/touch position
116
+ 3. **At coordinates** - Opens at specific {x, y}
117
+
118
+ Positioning automatically adjusts to stay within viewport using Floating UI.
119
+
120
+ ## Examples
121
+
122
+ ### Delete confirmation with red button
123
+ ```js
109
124
  const confirmed = await $dialog.confirm({
110
125
  title: "Delete Transaction",
111
- message: `Are you sure you want to delete this transaction of ${amount} units?`,
126
+ message: "Are you sure you want to delete this transaction?",
112
127
  confirmText: "Delete",
113
- cancelText: "Cancel",
114
- confirmColor: "error", // Makes confirm button red
115
- });
128
+ confirmColor: "error"
129
+ })
130
+ ```
116
131
 
117
- // Dialog with custom content
132
+ ### Form in dialog
133
+ ```js
118
134
  const result = await $dialog.component(html`
119
- <div>
120
- <schmancy-input id="nameInput" label="Your Name"></schmancy-input>
121
- </div>
122
- `, {
123
- title: "Enter Name",
124
- confirmText: "Submit",
125
- onConfirm: () => {
126
- const value = document.getElementById("nameInput").value;
127
- return value ? true : false;
128
- }
129
- });
130
-
131
- // Dialog for dangerous actions
132
- const confirmed = await $dialog.danger({
133
- title: "Warning",
134
- message: "You are about to delete your account. This action is permanent.",
135
- confirmText: "Delete Account",
136
- position: event
137
- });
138
- ```
135
+ <schmancy-form class="p-4">
136
+ <schmancy-input label="Email" type="email" required></schmancy-input>
137
+ <schmancy-input label="Password" type="password" required></schmancy-input>
138
+ <div class="flex gap-2 mt-4">
139
+ <schmancy-button @click=${() => $dialog.dismiss()}>Cancel</schmancy-button>
140
+ <schmancy-button type="submit">Login</schmancy-button>
141
+ </div>
142
+ </schmancy-form>
143
+ `)
144
+ ```
145
+
146
+ ### Context menu at click position
147
+ ```js
148
+ // In Lit component
149
+ async handleContextMenu(e: MouseEvent) {
150
+ const action = await $dialog.component(html`
151
+ <schmancy-list>
152
+ <schmancy-list-item @click=${() => $dialog.dismiss()}>Edit</schmancy-list-item>
153
+ <schmancy-list-item @click=${() => $dialog.dismiss()}>Delete</schmancy-list-item>
154
+ </schmancy-list>
155
+ `, { position: e, width: '200px' })
156
+
157
+ console.log('Selected:', action)
158
+ }
159
+
160
+ render() {
161
+ return html`
162
+ <schmancy-button @click=${this.handleContextMenu}>Options</schmancy-button>
163
+ `
164
+ }
165
+ ```
166
+
167
+ ## Important Notes
168
+
169
+ 1. **Service is singleton** - All dialogs managed centrally
170
+ 2. **Auto-cleanup** - Dialogs removed from DOM after closing
171
+ 3. **Theme-aware** - Dialogs attach to nearest `<schmancy-theme>` element
172
+ 4. **Stacking** - Multiple dialogs stack with proper z-index
173
+ 5. **Responsive** - Dialogs resize and reposition on viewport changes
174
+ 6. **Keyboard** - ESC key triggers cancel (via overlay click)
package/dist/ai/dialog.md CHANGED
@@ -1,138 +1,174 @@
1
1
  # Schmancy Dialog - AI Reference
2
2
 
3
+ ## Quick Start
4
+
5
+ ### Service API (Recommended)
3
6
  ```js
4
- // Basic Dialog Component
5
- <schmancy-dialog
6
- uid?="string"> // Unique identifier for dialog instance
7
- <!-- Dialog content goes here -->
8
- <div>Dialog content</div>
9
- </schmancy-dialog>
10
-
11
- // Dialog Component Methods
12
- dialog.show(position?) -> Promise<boolean> // Show dialog, optionally at a specific position
13
- dialog.hide(result?) -> void // Hide dialog with optional result (true/false)
14
-
15
- // Position can be:
16
- // - Undefined: Centers dialog in viewport
17
- // - Coordinates: { x: number, y: number }
18
- // - MouseEvent: Uses click coordinates
19
- // - TouchEvent: Uses touch coordinates
20
-
21
- // Dialog Events
22
- @close // Fires when dialog is closed
23
-
24
- // CSS Variables
25
- --dialog-width: 360px // Controls dialog width
26
-
27
- // Confirm Dialog Component (used internally by service)
28
- <confirm-dialog
29
- title?="string" // Dialog title
30
- subtitle?="string" // Dialog subtitle
31
- message?="string" // Dialog message
32
- confirm-text?="string" // Confirm button text (default: "Confirm")
33
- cancel-text?="string" // Cancel button text (default: "Cancel")
34
- variant?="default|danger" // Dialog variant (default: "default")
35
- confirm-color?="primary|error|warning|success"> // Confirm button color
36
- <div slot="content">Custom content</div>
37
- </confirm-dialog>
38
-
39
- // Service API (higher-level abstraction)
40
- $dialog.confirm({
41
- title?,
42
- subtitle?,
43
- message?,
44
- confirmText?,
45
- cancelText?,
46
- variant?: "default"|"danger",
47
- confirmColor?: "primary"|"error"|"warning"|"success", // Button color for confirm action
48
- position?: {x,y}|MouseEvent|TouchEvent,
49
- width?: string,
50
- content?: TemplateResult|HTMLElement|Function,
51
- onConfirm?: Function,
52
- onCancel?: Function,
53
- targetContainer?: HTMLElement // Container to append dialog to (uses theme discovery pattern)
54
- }) -> Promise<boolean>
55
-
56
- $dialog.ask(message, event?) -> Promise<boolean>
57
- $dialog.danger({...options}) -> Promise<boolean>
58
- $dialog.component(content, options?) -> Promise<boolean>
59
- $dialog.dismiss() -> boolean // Dismiss most recently opened dialog
60
-
61
- // Examples
62
- // Basic dialog usage
63
- const dialog = document.querySelector('schmancy-dialog');
64
- // Show dialog centered
65
- const result = await dialog.show();
66
- // Show dialog at specific coordinates
67
- const result = await dialog.show({ x: 100, y: 200 });
68
- // Show dialog at click position
69
- button.addEventListener('click', async (e) => {
70
- const result = await dialog.show(e);
71
- console.log('Dialog result:', result);
72
- });
73
-
74
- // Manually hiding dialog
75
- dialog.hide(true); // Hide with positive result
76
- dialog.hide(false); // Hide with negative result
77
-
78
- // Dialog with confirm/cancel buttons
79
- <schmancy-dialog id="confirmDialog">
80
- <div style="padding: 16px;">
81
- <h3>Confirm Action</h3>
82
- <p>Are you sure you want to proceed?</p>
83
- <div style="display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px;">
84
- <schmancy-button variant="text" @click=${() => dialog.hide(false)}>
85
- Cancel
86
- </schmancy-button>
87
- <schmancy-button variant="filled" @click=${() => dialog.hide(true)}>
88
- Confirm
89
- </schmancy-button>
90
- </div>
91
- </div>
92
- </schmancy-dialog>
7
+ import { $dialog } from '@mhmo91/schmancy'
93
8
 
94
- // Using the dialog service
95
9
  // Simple confirmation
96
- const confirmed = await $dialog.ask("Save changes?", event);
10
+ const confirmed = await $dialog.ask("Save changes?")
97
11
 
98
- // Confirmation with custom options
12
+ // Confirmation with options
99
13
  const confirmed = await $dialog.confirm({
100
- title: "Confirm Deletion",
101
- message: "Are you sure you want to delete this item? This action cannot be undone.",
14
+ title: "Delete Item",
15
+ message: "This action cannot be undone.",
102
16
  confirmText: "Delete",
103
- cancelText: "Cancel",
104
- variant: "danger",
105
- position: event
106
- });
17
+ confirmColor: "error" // Makes button red
18
+ })
19
+
20
+ // Custom component dialog
21
+ const result = await $dialog.component(html`
22
+ <div class="p-4">
23
+ <schmancy-input label="Name"></schmancy-input>
24
+ </div>
25
+ `)
26
+
27
+ // Dismiss active dialog
28
+ $dialog.dismiss()
29
+ ```
30
+
31
+ ### Component API (Low-level)
32
+ ```js
33
+ // In Lit component template
34
+ html`<schmancy-dialog id="myDialog">
35
+ <div class="p-4">Content here</div>
36
+ </schmancy-dialog>`
37
+
38
+ // In Lit component class
39
+ @query('#myDialog') dialog!: SchmancyDialog
40
+
41
+ // Show dialog (returns promise)
42
+ const result = await this.dialog.show() // Centered
43
+ const result = await this.dialog.show(event) // At click position
44
+ const result = await this.dialog.show({x, y}) // At coordinates
45
+
46
+ // Hide dialog
47
+ this.dialog.hide(true) // Resolve with true
48
+ this.dialog.hide(false) // Resolve with false
49
+ ```
50
+
51
+ ## Service Methods
52
+
53
+ ### $dialog.confirm(options)
54
+ Shows a confirmation dialog with title, message, and buttons.
55
+
56
+ ```js
57
+ options = {
58
+ title?: string, // Dialog title
59
+ subtitle?: string, // Subtitle below title
60
+ message?: string, // Main message
61
+ confirmText?: string, // Confirm button text (default: "Confirm")
62
+ cancelText?: string, // Cancel button text (default: "Cancel")
63
+ variant?: "default"|"danger",// Style variant
64
+ confirmColor?: "primary"|"error"|"warning"|"success", // Button color
65
+ position?: {x,y}|Event, // Position (default: centered)
66
+ width?: string, // Dialog width (default: "360px")
67
+ content?: TemplateResult, // Custom content (replaces message)
68
+ onConfirm?: Function, // Confirm callback
69
+ onCancel?: Function, // Cancel callback
70
+ targetContainer?: HTMLElement // Where to append dialog
71
+ }
72
+ ```
73
+
74
+ ### $dialog.ask(message, event?)
75
+ Simple confirmation with just a message.
76
+
77
+ ### $dialog.danger(options)
78
+ Confirmation dialog with danger styling (same options as confirm, variant forced to "danger").
79
+
80
+ ### $dialog.component(content, options?)
81
+ Shows dialog with custom content, no built-in buttons or title.
107
82
 
108
- // Confirmation with colored button
83
+ ```js
84
+ content = TemplateResult | HTMLElement | (() => TemplateResult|HTMLElement)
85
+ options = {
86
+ position?: {x,y}|Event,
87
+ width?: string,
88
+ targetContainer?: HTMLElement
89
+ }
90
+ ```
91
+
92
+ ### $dialog.dismiss()
93
+ Dismisses the most recently opened dialog. Returns true if a dialog was dismissed.
94
+
95
+ ## Component Structure
96
+
97
+ ### schmancy-dialog
98
+ Basic dialog container without built-in UI.
99
+ - Shows overlay and positioned container
100
+ - Handles positioning (centered or at coordinates)
101
+ - Emits `close` event
102
+ - CSS variable: `--dialog-width`
103
+
104
+ ### confirm-dialog
105
+ Extended dialog with title, message, and action buttons.
106
+ - All features of schmancy-dialog
107
+ - Built-in form with confirm/cancel buttons
108
+ - Supports custom content via slot
109
+ - Button colors based on `confirmColor` property
110
+
111
+ ## Positioning
112
+
113
+ Dialogs can be positioned:
114
+ 1. **Centered** (default) - Centers in viewport with slight upward shift
115
+ 2. **At event** - Opens at click/touch position
116
+ 3. **At coordinates** - Opens at specific {x, y}
117
+
118
+ Positioning automatically adjusts to stay within viewport using Floating UI.
119
+
120
+ ## Examples
121
+
122
+ ### Delete confirmation with red button
123
+ ```js
109
124
  const confirmed = await $dialog.confirm({
110
125
  title: "Delete Transaction",
111
- message: `Are you sure you want to delete this transaction of ${amount} units?`,
126
+ message: "Are you sure you want to delete this transaction?",
112
127
  confirmText: "Delete",
113
- cancelText: "Cancel",
114
- confirmColor: "error", // Makes confirm button red
115
- });
128
+ confirmColor: "error"
129
+ })
130
+ ```
116
131
 
117
- // Dialog with custom content
132
+ ### Form in dialog
133
+ ```js
118
134
  const result = await $dialog.component(html`
119
- <div>
120
- <schmancy-input id="nameInput" label="Your Name"></schmancy-input>
121
- </div>
122
- `, {
123
- title: "Enter Name",
124
- confirmText: "Submit",
125
- onConfirm: () => {
126
- const value = document.getElementById("nameInput").value;
127
- return value ? true : false;
128
- }
129
- });
130
-
131
- // Dialog for dangerous actions
132
- const confirmed = await $dialog.danger({
133
- title: "Warning",
134
- message: "You are about to delete your account. This action is permanent.",
135
- confirmText: "Delete Account",
136
- position: event
137
- });
138
- ```
135
+ <schmancy-form class="p-4">
136
+ <schmancy-input label="Email" type="email" required></schmancy-input>
137
+ <schmancy-input label="Password" type="password" required></schmancy-input>
138
+ <div class="flex gap-2 mt-4">
139
+ <schmancy-button @click=${() => $dialog.dismiss()}>Cancel</schmancy-button>
140
+ <schmancy-button type="submit">Login</schmancy-button>
141
+ </div>
142
+ </schmancy-form>
143
+ `)
144
+ ```
145
+
146
+ ### Context menu at click position
147
+ ```js
148
+ // In Lit component
149
+ async handleContextMenu(e: MouseEvent) {
150
+ const action = await $dialog.component(html`
151
+ <schmancy-list>
152
+ <schmancy-list-item @click=${() => $dialog.dismiss()}>Edit</schmancy-list-item>
153
+ <schmancy-list-item @click=${() => $dialog.dismiss()}>Delete</schmancy-list-item>
154
+ </schmancy-list>
155
+ `, { position: e, width: '200px' })
156
+
157
+ console.log('Selected:', action)
158
+ }
159
+
160
+ render() {
161
+ return html`
162
+ <schmancy-button @click=${this.handleContextMenu}>Options</schmancy-button>
163
+ `
164
+ }
165
+ ```
166
+
167
+ ## Important Notes
168
+
169
+ 1. **Service is singleton** - All dialogs managed centrally
170
+ 2. **Auto-cleanup** - Dialogs removed from DOM after closing
171
+ 3. **Theme-aware** - Dialogs attach to nearest `<schmancy-theme>` element
172
+ 4. **Stacking** - Multiple dialogs stack with proper z-index
173
+ 5. **Responsive** - Dialogs resize and reposition on viewport changes
174
+ 6. **Keyboard** - ESC key triggers cancel (via overlay click)
@@ -1,4 +1,4 @@
1
- "use strict";const l=require("lit"),o=require("lit/decorators.js"),s=require("rxjs");require("./animated-text-CtXY3MHV.cjs");const $=require("./area.component-DQ_erV9e.cjs");require("./autocomplete-PHnzqAII.cjs"),require("lit/directives/class-map.js"),require("lit/directives/style-map.js");const _=require("./tailwind.mixin-DVKI3qb9.cjs"),D=require("./ripple-C2BHbhcS.cjs");require("./boat-B_xZilsk.cjs"),require("./spinner-CV62BBoF.cjs"),require("./icon-button-9V68mzcL.cjs"),require("./media-CIuTybvD.cjs"),require("./checkbox-BAuVXvYL.cjs"),require("./chips-Dg2otqDI.cjs"),require("./circular-progress-DZUJU-z3.cjs"),require("./code-preview-CYHNaPek.cjs"),require("./payment-card-form-ccF9dfGC.cjs");const p=require("./types.cjs"),d=require("./provide-BxZ2kn_p.cjs"),b=require("./litElement.mixin-B01R2oT7.cjs"),m=require("./consume-edta5ng5.cjs");require("./date-range-CVkBXQxc.cjs"),require("./date-range-inline-Czq1wHs1.cjs"),require("./delay-FgtrEHdo.cjs"),require("./dialog-content-Dm9ywkp4.cjs"),require("./dialog-service-iRGqMSDe.cjs"),require("./divider-2yg9r1tF.cjs"),require("./dropdown-content-DJ4CA3ug.cjs"),require("./timezone-UBBApQoU.cjs"),require("./form-Dpokur4M.cjs"),require("./icon-mhchC8Qw.cjs"),require("./input-DzNoI9qU.cjs"),require("./flex-DWnX0ZPR.cjs"),require("./list-DRbkWHho.cjs"),require("./menu-DEbZxoXr.cjs");const W=require("lit/directives/when.js");require("./notification-service-B6nHqzq5.cjs"),require("./option-BPmOG_Hw.cjs"),require("./progress-BqZ7yHQe.cjs"),require("./radio-button-WmbuT_YW.cjs"),require("./index-DyJ0oDpR.cjs"),require("./select-CPnSionr.cjs");const A=require("./sheet-Dsx7bpof.cjs");require("./slider-DBNoXRWS.cjs"),require("./schmancy-steps-container-CjAsrjKf.cjs"),require("./context-object-K_1gDFu-.cjs");const N=require("rxjs/operators");require("./surface-ClfeUI6q.cjs"),require("./table-Rqnb4AJl.cjs"),require("./tabs-compatibility-B1bE7hSG.cjs"),require("./textarea-Dlnyyrbq.cjs"),require("./theme.component-Dnf9PdX8.cjs"),require("./theme-button-Cao8AH8r.cjs"),require("./tooltip-WpE4e-fO.cjs"),require("./tree-Dn0t7MUR.cjs"),require("./typewriter-DwLZUKKQ.cjs"),require("./typography-BhCrqK_b.cjs");const i=require("./theme.interface-Xg5Zi46a.cjs");var X=Object.defineProperty,H=Object.getOwnPropertyDescriptor,g=(e,t,n,a)=>{for(var c,r=a>1?void 0:a?H(t,n):t,h=e.length-1;h>=0;h--)(c=e[h])&&(r=(a?c(t,n,r):c(r))||r);return a&&r&&X(t,n,r),r};exports.SchmancyBadgeV2=class extends _.TailwindElement(l.css`
1
+ "use strict";const l=require("lit"),o=require("lit/decorators.js"),s=require("rxjs");require("./animated-text-CtXY3MHV.cjs");const $=require("./area.component-DQ_erV9e.cjs");require("./autocomplete-PHnzqAII.cjs"),require("lit/directives/class-map.js"),require("lit/directives/style-map.js");const _=require("./tailwind.mixin-DVKI3qb9.cjs"),D=require("./ripple-C2BHbhcS.cjs");require("./boat-B_xZilsk.cjs"),require("./spinner-CV62BBoF.cjs"),require("./icon-button-DbvjV5zJ.cjs"),require("./media-CIuTybvD.cjs"),require("./checkbox-BAuVXvYL.cjs"),require("./chips-Dg2otqDI.cjs"),require("./circular-progress-DZUJU-z3.cjs"),require("./code-preview-CYHNaPek.cjs"),require("./payment-card-form-ccF9dfGC.cjs");const p=require("./types.cjs"),d=require("./provide-BxZ2kn_p.cjs"),b=require("./litElement.mixin-B01R2oT7.cjs"),m=require("./consume-edta5ng5.cjs");require("./date-range-Cf9ldt-N.cjs"),require("./date-range-inline-Czq1wHs1.cjs"),require("./delay-FgtrEHdo.cjs"),require("./dialog-content-tiwbeegi.cjs"),require("./dialog-service-DUDhcx9X.cjs"),require("./divider-2yg9r1tF.cjs"),require("./dropdown-content-DJ4CA3ug.cjs"),require("./timezone-UBBApQoU.cjs"),require("./form-Dpokur4M.cjs"),require("./icon-mhchC8Qw.cjs"),require("./input-DzNoI9qU.cjs"),require("./flex-DWnX0ZPR.cjs"),require("./list-DRbkWHho.cjs"),require("./menu-DEbZxoXr.cjs");const W=require("lit/directives/when.js");require("./notification-service-B6nHqzq5.cjs"),require("./option-BPmOG_Hw.cjs"),require("./progress-BqZ7yHQe.cjs"),require("./radio-button-WmbuT_YW.cjs"),require("./index-DyJ0oDpR.cjs"),require("./select-CPnSionr.cjs");const A=require("./sheet-eCDoMdHF.cjs");require("./slider-DBNoXRWS.cjs"),require("./schmancy-steps-container-CjAsrjKf.cjs"),require("./context-object-K_1gDFu-.cjs");const N=require("rxjs/operators");require("./surface-ClfeUI6q.cjs"),require("./table-Rqnb4AJl.cjs"),require("./tabs-compatibility-B1bE7hSG.cjs"),require("./textarea-Dlnyyrbq.cjs"),require("./theme.component-RtV3l-Ns.cjs"),require("./theme-button-Cao8AH8r.cjs"),require("./tooltip-WpE4e-fO.cjs"),require("./tree-Dn0t7MUR.cjs"),require("./typewriter-DwLZUKKQ.cjs"),require("./typography-BhCrqK_b.cjs");const i=require("./theme.interface-Xg5Zi46a.cjs");var X=Object.defineProperty,H=Object.getOwnPropertyDescriptor,g=(e,t,n,a)=>{for(var c,r=a>1?void 0:a?H(t,n):t,h=e.length-1;h>=0;h--)(c=e[h])&&(r=(a?c(t,n,r):c(r))||r);return a&&r&&X(t,n,r),r};exports.SchmancyBadgeV2=class extends _.TailwindElement(l.css`
2
2
  :host {
3
3
  display: inline-flex;
4
4
  }
@@ -202,4 +202,4 @@
202
202
  `}getColorAttributes(){const e={primary:{bgColor:i.SchmancyTheme.sys.color.primary.container,color:i.SchmancyTheme.sys.color.primary.onContainer},secondary:{bgColor:i.SchmancyTheme.sys.color.secondary.container,color:i.SchmancyTheme.sys.color.secondary.onContainer},tertiary:{bgColor:i.SchmancyTheme.sys.color.tertiary.container,color:i.SchmancyTheme.sys.color.tertiary.onContainer},success:{bgColor:i.SchmancyTheme.sys.color.success.container,color:i.SchmancyTheme.sys.color.success.onContainer},error:{bgColor:i.SchmancyTheme.sys.color.error.container,color:i.SchmancyTheme.sys.color.error.onContainer},neutral:{bgColor:i.SchmancyTheme.sys.color.surface.container,color:i.SchmancyTheme.sys.color.surface.on}};return D.color(e[this.color])}renderStatusIndicator(){const e={online:i.SchmancyTheme.sys.color.success.default,offline:i.SchmancyTheme.sys.color.surface.onVariant,busy:i.SchmancyTheme.sys.color.error.default,away:i.SchmancyTheme.sys.color.tertiary.default},t={"absolute bottom-0 right-0 rounded-full border-2 border-surface-default":!0,[{xs:"w-1.5 h-1.5",sm:"w-2 h-2",md:"w-2.5 h-2.5",lg:"w-3 h-3",xl:"w-4 h-4"}[this.size]]:!0};return l.html`
203
203
  <div class="${this.classMap(t)}" style="background-color: ${e[this.status]};"></div>
204
204
  `}},u([o.property({type:String})],exports.SchmancyAvatar.prototype,"initials",2),u([o.property({type:String})],exports.SchmancyAvatar.prototype,"src",2),u([o.property({type:String})],exports.SchmancyAvatar.prototype,"icon",2),u([o.property({type:String})],exports.SchmancyAvatar.prototype,"size",2),u([o.property({type:String})],exports.SchmancyAvatar.prototype,"color",2),u([o.property({type:String})],exports.SchmancyAvatar.prototype,"shape",2),u([o.property({type:Boolean})],exports.SchmancyAvatar.prototype,"bordered",2),u([o.property({type:String})],exports.SchmancyAvatar.prototype,"status",2),exports.SchmancyAvatar=u([o.customElement("schmancy-avatar")],exports.SchmancyAvatar),exports.$drawer=Q,exports.HereMorty=B,exports.SchmancyContentDrawerID=I,exports.SchmancyContentDrawerMaxHeight=k,exports.SchmancyContentDrawerMinWidth=M,exports.SchmancyContentDrawerSheetMode=q,exports.SchmancyContentDrawerSheetState=j,exports.SchmancyDrawerNavbarMode=O,exports.SchmancyDrawerNavbarState=z,exports.WhereAreYouRicky=P,exports.schmancyContentDrawer=V,exports.schmancyNavDrawer=R,exports.teleport=x;
205
- //# sourceMappingURL=avatar-By_6fdSR.cjs.map
205
+ //# sourceMappingURL=avatar-CagKP9HD.cjs.map