@ziyarago/ui 0.15.0 → 0.15.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.
- package/CHANGELOG.md +6 -0
- package/dist/llms-full.txt +6 -2
- package/dist/llms.txt +1 -1
- package/dist/manifest.json +28 -3
- package/dist/style.css +13 -13
- package/docs/INTEGRATION.md +9 -0
- package/package.json +3 -1
- package/src/core/components.js +11 -4
- package/src/core/components2.js +1 -1
- package/src/core/index.js +2 -2
- package/src/icons/builtin.js +99 -0
- package/src/meta/forms.js +5 -1
- package/src/react/index.js +1 -1
- package/src/styles/components.css +8 -8
- package/src/styles/components2.css +2 -2
- package/src/styles/components7.css +1 -1
- package/src/styles/components8.css +1 -1
- package/src/styles/extras.css +1 -1
- package/src/vue/index.js +1 -1
- package/types/core.d.ts +1 -1
- package/types/react.d.ts +23 -3
- package/types/shared.d.ts +2 -0
- package/types/vue.d.ts +23 -3
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,9 @@
|
|
|
1
|
+
## [0.15.1](https://github.com/ziyarago/ui/compare/v0.15.0...v0.15.1) (2026-10-21)
|
|
2
|
+
|
|
3
|
+
### Bug Fixes
|
|
4
|
+
|
|
5
|
+
* backdrop-filter order for lightningcss, LoginForm autocomplete and name, built-in icon set (no CDN for component icons), registerIcons ([18dd228](https://github.com/ziyarago/ui/commit/18dd2286c71ac2ff64a126bb1ead76d412b6a92d))
|
|
6
|
+
|
|
1
7
|
## [0.15.0](https://github.com/ziyarago/ui/compare/v0.14.0...v0.15.0) (2026-10-21)
|
|
2
8
|
|
|
3
9
|
### Features
|
package/dist/llms-full.txt
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
> ZiyaraGo UI — glass design system for Umrah and Hajj products. OKLCH tokens, two palettes, dark and light, RTL, Thmanyah. One framework-neutral core with Vue 3, Nuxt and React adapters, 102 free components and 6 page templates (more in @ziyarago/ui-pro).
|
|
4
4
|
|
|
5
|
-
Version 0.15.
|
|
5
|
+
Version 0.15.1. Docs: https://ziyara.vip . Manifest (machine readable): https://ziyara.vip/manifest.json
|
|
6
6
|
|
|
7
7
|
## Setup
|
|
8
8
|
- import { UiButton } from '@ziyarago/ui/vue'
|
|
@@ -964,9 +964,13 @@ Props:
|
|
|
964
964
|
- `error`: string. Failure message shown in a danger alert above the fields.
|
|
965
965
|
- `loading`: boolean = false. Disables the submit button and shows a spinner.
|
|
966
966
|
- `showForgot`: boolean = true. Show the "Forgot password?" link.
|
|
967
|
+
- `emailType`: 'text' | 'email' | 'tel' = "text". Type of the login field: use "email" or "tel" to get the matching mobile keyboard and browser validation.
|
|
968
|
+
- `emailName`: string = "email". Native name of the login field; the password field uses passwordName (default "password"). Both fields get autocomplete "username" and "current-password" so password managers fill them.
|
|
969
|
+
- `passwordName`: string = "password". Native name of the password field.
|
|
970
|
+
- `required`: boolean = false. Marks both fields required (native validation).
|
|
967
971
|
- `showRemember`: boolean = true. Show the "Remember device" checkbox. Hide it when your backend has no such option; the submit payload then keeps remember: true.
|
|
968
972
|
- `submitLabel`: string = "Sign in". Submit button text. Wins over labels.submit.
|
|
969
|
-
- `labels`: { email?: string; password?: string; remember?: string; forgot?: string; submit?: string } = "{ email: 'Email or phone', password: 'Password', remember: 'Remember device', forgot: 'Forgot password?', submit: 'Sign in' }". Texts of the form; any missing key keeps its English default.
|
|
973
|
+
- `labels`: { email?: string; password?: string; emailPlaceholder?: string; passwordPlaceholder?: string; remember?: string; forgot?: string; submit?: string } = "{ email: 'Email or phone', password: 'Password', remember: 'Remember device', forgot: 'Forgot password?', submit: 'Sign in' }". Texts of the form; any missing key keeps its English default (the two placeholders default to none).
|
|
970
974
|
- `size`: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = "md". Control height, font and padding scale.
|
|
971
975
|
Events:
|
|
972
976
|
- submit: Called with { email, password, remember } when the form is submitted.
|
package/dist/llms.txt
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
> ZiyaraGo UI — glass design system for Umrah and Hajj products. OKLCH tokens, two palettes, dark and light, RTL, Thmanyah. One framework-neutral core with Vue 3, Nuxt and React adapters, 102 free components and 6 page templates (more in @ziyarago/ui-pro).
|
|
4
4
|
|
|
5
|
-
Version 0.15.
|
|
5
|
+
Version 0.15.1. Docs: https://ziyara.vip . Manifest (machine readable): https://ziyara.vip/manifest.json
|
|
6
6
|
|
|
7
7
|
## Setup
|
|
8
8
|
- import { UiButton } from '@ziyarago/ui/vue'
|
package/dist/manifest.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ziyarago/ui",
|
|
3
|
-
"version": "0.15.
|
|
3
|
+
"version": "0.15.1",
|
|
4
4
|
"homepage": "https://ziyara.vip",
|
|
5
5
|
"imports": {
|
|
6
6
|
"vue": "import { UiButton } from '@ziyarago/ui/vue'",
|
|
@@ -8969,6 +8969,31 @@
|
|
|
8969
8969
|
"default": true,
|
|
8970
8970
|
"description": "Show the \"Forgot password?\" link."
|
|
8971
8971
|
},
|
|
8972
|
+
"emailType": {
|
|
8973
|
+
"type": "'text' | 'email' | 'tel'",
|
|
8974
|
+
"values": [
|
|
8975
|
+
"text",
|
|
8976
|
+
"email",
|
|
8977
|
+
"tel"
|
|
8978
|
+
],
|
|
8979
|
+
"default": "text",
|
|
8980
|
+
"description": "Type of the login field: use \"email\" or \"tel\" to get the matching mobile keyboard and browser validation."
|
|
8981
|
+
},
|
|
8982
|
+
"emailName": {
|
|
8983
|
+
"type": "string",
|
|
8984
|
+
"default": "email",
|
|
8985
|
+
"description": "Native name of the login field; the password field uses passwordName (default \"password\"). Both fields get autocomplete \"username\" and \"current-password\" so password managers fill them."
|
|
8986
|
+
},
|
|
8987
|
+
"passwordName": {
|
|
8988
|
+
"type": "string",
|
|
8989
|
+
"default": "password",
|
|
8990
|
+
"description": "Native name of the password field."
|
|
8991
|
+
},
|
|
8992
|
+
"required": {
|
|
8993
|
+
"type": "boolean",
|
|
8994
|
+
"default": false,
|
|
8995
|
+
"description": "Marks both fields required (native validation)."
|
|
8996
|
+
},
|
|
8972
8997
|
"showRemember": {
|
|
8973
8998
|
"type": "boolean",
|
|
8974
8999
|
"default": true,
|
|
@@ -8980,9 +9005,9 @@
|
|
|
8980
9005
|
"description": "Submit button text. Wins over labels.submit."
|
|
8981
9006
|
},
|
|
8982
9007
|
"labels": {
|
|
8983
|
-
"type": "{ email?: string; password?: string; remember?: string; forgot?: string; submit?: string }",
|
|
9008
|
+
"type": "{ email?: string; password?: string; emailPlaceholder?: string; passwordPlaceholder?: string; remember?: string; forgot?: string; submit?: string }",
|
|
8984
9009
|
"default": "{ email: 'Email or phone', password: 'Password', remember: 'Remember device', forgot: 'Forgot password?', submit: 'Sign in' }",
|
|
8985
|
-
"description": "Texts of the form; any missing key keeps its English default."
|
|
9010
|
+
"description": "Texts of the form; any missing key keeps its English default (the two placeholders default to none)."
|
|
8986
9011
|
},
|
|
8987
9012
|
"size": {
|
|
8988
9013
|
"type": "'xs' | 'sm' | 'md' | 'lg' | 'xl'",
|
package/dist/style.css
CHANGED
|
@@ -90,7 +90,7 @@
|
|
|
90
90
|
:where(.zg-root,[class*="zg-"]) :where(button,input,select,textarea),:where(button,input,select,textarea):where([class*="zg-"]){font:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0;background-color:transparent}
|
|
91
91
|
:where(.zg-root,[class*="zg-"]) a:where(:not([class])){text-decoration:underline}
|
|
92
92
|
:where(.zg-root,[class*="zg-"]) svg,svg:where([class*="zg-"]){vertical-align:middle}
|
|
93
|
-
.zg-glass{background:var(--zg-s1)
|
|
93
|
+
.zg-glass{background:var(--zg-s1);-webkit-backdrop-filter:blur(24px) saturate(1.5);backdrop-filter:blur(24px) saturate(1.5);box-shadow:var(--zg-rim),var(--zg-shadow-1)}
|
|
94
94
|
.zg-icon:not([style*="--zg-icon"]){visibility:hidden}
|
|
95
95
|
.zg-icon{display:inline-block;flex:none;width:1em;height:1em;background:currentColor;-webkit-mask:var(--zg-icon) center/contain no-repeat;mask:var(--zg-icon) center/contain no-repeat}
|
|
96
96
|
.zg-mono{font-family:var(--zg-font-mono);font-variant-numeric:tabular-nums}
|
|
@@ -153,7 +153,7 @@
|
|
|
153
153
|
.zg-hint{font-size:12px;color:var(--zg-text-3)}.zg-hint--error{color:var(--zg-red)}
|
|
154
154
|
.zg-select{position:relative}
|
|
155
155
|
.zg-select__trigger{width:100%;justify-content:space-between;text-align:start}
|
|
156
|
-
.zg-select__list{position:absolute;z-index:40;inset-inline:0;top:calc(100% + 6px);padding:6px;border-radius:20px;background:var(--zg-glass)
|
|
156
|
+
.zg-select__list{position:absolute;z-index:40;inset-inline:0;top:calc(100% + 6px);padding:6px;border-radius:20px;background:var(--zg-glass);-webkit-backdrop-filter:blur(40px);backdrop-filter:blur(40px);box-shadow:var(--zg-rim),var(--zg-shadow-2);max-height:280px;overflow:auto}
|
|
157
157
|
.zg-select__opt{display:flex;align-items:center;justify-content:space-between;width:100%;height:40px;padding:0 14px;border:0;border-radius:14px;cursor:pointer;background:none;color:var(--zg-text-1);font:500 14px var(--zg-font);text-align:start}
|
|
158
158
|
.zg-select__opt:hover{background:var(--zg-s2)}.zg-select__opt[aria-selected="true"]{color:var(--zg-brand-text);font-weight:700}
|
|
159
159
|
.zg-code{position:relative;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:8px;direction:ltr}
|
|
@@ -171,8 +171,8 @@
|
|
|
171
171
|
.zg-card{border-radius:var(--zg-r-card);padding:20px;display:flex;flex-direction:column;gap:14px;min-width:0}
|
|
172
172
|
.zg-card--inverse{background:linear-gradient(150deg,oklch(0.285 0.022 239.4),oklch(0.2 0.012 240));color:oklch(0.97 0.004 70)}
|
|
173
173
|
.zg-card__head{display:flex;align-items:flex-start;gap:12px}.zg-card__title{font:600 18px var(--zg-font);margin:0}.zg-card__sub{font-size:13px;color:var(--zg-text-3)}
|
|
174
|
-
.zg-modal-scrim{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:16px;background:oklch(0.12 0.005 40 / .5)
|
|
175
|
-
.zg-modal{width:100%;max-width:520px;max-height:92vh;display:flex;flex-direction:column;border-radius:32px;overflow:hidden;background:var(--zg-glass)
|
|
174
|
+
.zg-modal-scrim{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:16px;background:oklch(0.12 0.005 40 / .5);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
|
|
175
|
+
.zg-modal{width:100%;max-width:520px;max-height:92vh;display:flex;flex-direction:column;border-radius:32px;overflow:hidden;background:var(--zg-glass);-webkit-backdrop-filter:blur(40px) saturate(1.6);backdrop-filter:blur(40px) saturate(1.6);box-shadow:var(--zg-rim),var(--zg-shadow-2);color:var(--zg-text-1)}
|
|
176
176
|
.zg-modal__head{display:flex;align-items:center;gap:12px;padding:20px 20px 16px;box-shadow:0 1px 0 var(--zg-stroke)}.zg-modal__head h3{flex:1;margin:0;font:600 18px var(--zg-font)}
|
|
177
177
|
.zg-modal__body{padding:20px;overflow:auto;display:flex;flex-direction:column;gap:16px}
|
|
178
178
|
.zg-modal__foot{display:flex;justify-content:flex-end;gap:8px;padding:14px 20px 18px;box-shadow:0 -1px 0 var(--zg-stroke)}
|
|
@@ -212,14 +212,14 @@
|
|
|
212
212
|
/* Navigation */
|
|
213
213
|
.zg-crumbs{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--zg-text-3)}.zg-crumbs a{color:var(--zg-text-2);text-decoration:none}.zg-crumbs a:hover{color:var(--zg-text-1)}.zg-crumbs b{color:var(--zg-text-1)}
|
|
214
214
|
.zg-pager{display:inline-flex;gap:4px}.zg-pager button{min-width:36px;height:36px;border:0;border-radius:999px;cursor:pointer;font:600 13px var(--zg-font);background:transparent;color:var(--zg-text-2)}.zg-pager button[aria-current="page"]{background:var(--zg-inv-bg);color:var(--zg-inv-fg)}
|
|
215
|
-
.zg-topnav{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:12px;padding:10px clamp(10px,2vw,20px);background:color-mix(in oklch,var(--zg-bg) 62%,transparent)
|
|
215
|
+
.zg-topnav{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:12px;padding:10px clamp(10px,2vw,20px);background:color-mix(in oklch,var(--zg-bg) 62%,transparent);-webkit-backdrop-filter:blur(28px) saturate(1.6);backdrop-filter:blur(28px) saturate(1.6);box-shadow:0 1px 0 var(--zg-stroke)}
|
|
216
216
|
.zg-topnav__brand{display:flex;align-items:center;gap:10px;font:700 18px var(--zg-font);flex:none}
|
|
217
217
|
.zg-topnav__items{margin-inline-start:auto;display:flex;gap:2px;padding:4px;border-radius:999px;background:var(--zg-s2);box-shadow:var(--zg-rim);overflow-x:auto;scrollbar-width:none;min-width:0}
|
|
218
218
|
.zg-topnav__actions{display:flex;align-items:center;gap:8px;flex:none}
|
|
219
219
|
.zg-navitem{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border:0;border-radius:999px;cursor:pointer;font:600 14px var(--zg-font);white-space:nowrap;background:transparent;color:var(--zg-text-2);transition:background .2s}
|
|
220
220
|
.zg-navitem:hover{background:var(--zg-s2)}.zg-navitem[aria-current="page"]{background:var(--zg-inv-bg);color:var(--zg-inv-fg)}
|
|
221
221
|
.zg-navitem__count{height:20px;min-width:20px;padding:0 6px;border-radius:999px;display:grid;place-items:center;font:700 11px var(--zg-font);background:var(--zg-brand);color:var(--zg-on-brand)}
|
|
222
|
-
.zg-sidenav{--w:272px;position:sticky;top:0;height:100vh;width:var(--w);flex:none;display:flex;flex-direction:column;gap:6px;padding:16px 12px;background:color-mix(in oklch,var(--zg-bg) 62%,transparent)
|
|
222
|
+
.zg-sidenav{--w:272px;position:sticky;top:0;height:100vh;width:var(--w);flex:none;display:flex;flex-direction:column;gap:6px;padding:16px 12px;background:color-mix(in oklch,var(--zg-bg) 62%,transparent);-webkit-backdrop-filter:blur(40px) saturate(1.6);backdrop-filter:blur(40px) saturate(1.6);box-shadow:inset -1px 0 0 var(--zg-stroke);transition:width .3s var(--zg-ease);overflow:hidden}
|
|
223
223
|
[dir="rtl"] .zg-sidenav{box-shadow:inset 1px 0 0 var(--zg-stroke)}
|
|
224
224
|
.zg-sidenav--collapsed{--w:76px}
|
|
225
225
|
.zg-sidenav .zg-navitem{width:100%;height:46px;border-radius:16px;justify-content:flex-start;padding:0 14px}
|
|
@@ -229,10 +229,10 @@
|
|
|
229
229
|
.zg-sidenav__sp{flex:1}.zg-sidenav__group{padding:14px 14px 4px;font:700 11px var(--zg-font);letter-spacing:.1em;text-transform:uppercase;color:var(--zg-text-3)}
|
|
230
230
|
.zg-shell{min-height:100vh;display:flex}.zg-shell--top{flex-direction:column}
|
|
231
231
|
.zg-shell__main{flex:1;min-width:0;max-width:1440px;width:100%;margin:0 auto;padding:clamp(16px,2.4vw,32px);display:flex;flex-direction:column;gap:20px}
|
|
232
|
-
.zg-shell__bar{display:none;position:sticky;top:0;z-index:50;align-items:center;gap:12px;padding:10px 16px;background:color-mix(in oklch,var(--zg-bg) 62%,transparent)
|
|
232
|
+
.zg-shell__bar{display:none;position:sticky;top:0;z-index:50;align-items:center;gap:12px;padding:10px 16px;background:color-mix(in oklch,var(--zg-bg) 62%,transparent);-webkit-backdrop-filter:blur(28px);backdrop-filter:blur(28px)}
|
|
233
233
|
@media(max-width:820px){.zg-shell:not(.zg-shell--top){flex-direction:column}.zg-shell:not(.zg-shell--top) .zg-sidenav{display:none}.zg-shell__bar{display:flex}}
|
|
234
234
|
.zg-page-head{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap}.zg-page-head h1{margin:0;font:300 clamp(28px,3vw,40px) var(--zg-font);letter-spacing:-.03em}.zg-page-head p{margin:4px 0 0;color:var(--zg-text-3);font-size:15px}
|
|
235
|
-
.zg-auth{min-height:100vh;display:grid;place-items:center;padding:24px}.zg-auth__card{width:100%;max-width:440px;padding:clamp(24px,3vw,36px);border-radius:36px;display:flex;flex-direction:column;gap:22px;background:color-mix(in oklch,var(--zg-bg) 55%,transparent)
|
|
235
|
+
.zg-auth{min-height:100vh;display:grid;place-items:center;padding:24px}.zg-auth__card{width:100%;max-width:440px;padding:clamp(24px,3vw,36px);border-radius:36px;display:flex;flex-direction:column;gap:22px;background:color-mix(in oklch,var(--zg-bg) 55%,transparent);-webkit-backdrop-filter:blur(28px) saturate(1.6);backdrop-filter:blur(28px) saturate(1.6);box-shadow:var(--zg-rim),var(--zg-shadow-1)}
|
|
236
236
|
|
|
237
237
|
.zg-shell--frame{min-height:0;height:100%;overflow:auto}.zg-shell--frame .zg-sidenav{height:100%;position:relative}.zg-shell--frame .zg-topnav{position:sticky}
|
|
238
238
|
|
|
@@ -268,7 +268,7 @@
|
|
|
268
268
|
.zg-es{display:flex;flex-direction:column;align-items:center;gap:8px;padding:32px 16px;text-align:center;color:var(--zg-text-2)}.zg-es b{color:var(--zg-text-1);font-size:17px}
|
|
269
269
|
.zg-es__ico{width:64px;height:64px;border-radius:22px;display:grid;place-items:center;background:var(--zg-brand-soft);color:var(--zg-brand-text);box-shadow:var(--zg-rim)}.zg-es__img{width:112px;height:112px;background:center/contain no-repeat}
|
|
270
270
|
.zg-es__a{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:8px}.zg-es--page{min-height:60vh;justify-content:center}
|
|
271
|
-
.zg-lo{position:relative}.zg-lo__o{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;border-radius:inherit;background:color-mix(in oklch,var(--zg-bg) 55%,transparent)
|
|
271
|
+
.zg-lo{position:relative}.zg-lo__o{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;border-radius:inherit;background:color-mix(in oklch,var(--zg-bg) 55%,transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
|
|
272
272
|
.zg-car{position:relative;border-radius:28px;overflow:hidden;box-shadow:var(--zg-rim),var(--zg-shadow-1)}.zg-car__s{aspect-ratio:16/8;background:var(--zg-s3) center/cover;display:flex;align-items:flex-end}
|
|
273
273
|
.zg-car__c{width:100%;padding:44px 20px 18px;color:#fff;display:flex;flex-direction:column;gap:2px;background:linear-gradient(transparent,oklch(0.1 0 0 / .7))}
|
|
274
274
|
.zg-car__p,.zg-car__n{position:absolute;top:50%;margin-top:-16px}.zg-car__p{inset-inline-start:12px}.zg-car__n{inset-inline-end:12px}
|
|
@@ -280,7 +280,7 @@
|
|
|
280
280
|
.zg-code-b pre{margin:0;padding:16px;overflow:auto;font-size:13px;line-height:1.6;direction:ltr;text-align:left}
|
|
281
281
|
.zg-price--on{box-shadow:var(--zg-rim),0 0 0 2px var(--zg-brand),var(--zg-shadow-1)}.zg-feat{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px;font-size:14px}.zg-feat li{display:flex;gap:10px;align-items:center;color:var(--zg-text-2)}.zg-feat .zg-icon{color:var(--zg-green)}
|
|
282
282
|
.zg-inc{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:28px;max-width:440px}.zg-inc__ok{background:var(--zg-green);color:#fff;box-shadow:0 8px 24px color-mix(in oklch,var(--zg-green) 45%,transparent)}
|
|
283
|
-
.zg-dd{position:relative;display:inline-block}.zg-menu{position:absolute;z-index:40;inset-inline-start:0;top:calc(100% + 6px);min-width:220px;padding:6px;border-radius:20px;background:var(--zg-glass)
|
|
283
|
+
.zg-dd{position:relative;display:inline-block}.zg-menu{position:absolute;z-index:40;inset-inline-start:0;top:calc(100% + 6px);min-width:220px;padding:6px;border-radius:20px;background:var(--zg-glass);-webkit-backdrop-filter:blur(40px);backdrop-filter:blur(40px);box-shadow:var(--zg-rim),var(--zg-shadow-2);display:flex;flex-direction:column}
|
|
284
284
|
.zg-menu--static{position:static;display:inline-flex}.zg-menu__i{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:10px;min-height:40px;padding:0 12px;border-radius:14px;cursor:pointer;font:500 14px var(--zg-font);color:var(--zg-text-1)}
|
|
285
285
|
.zg-menu__i:hover{background:var(--zg-s2)}.zg-menu__i--danger{color:var(--zg-red)}.zg-menu__i .zg-kbd{margin-inline-start:auto}.zg-menu__sep{height:1px;margin:4px 8px;background:var(--zg-stroke)}
|
|
286
286
|
.zg-kbd{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:7px;font:600 11px var(--zg-font-mono);color:var(--zg-text-2);background:var(--zg-s2);box-shadow:var(--zg-rim),0 1px 0 var(--zg-stroke)}
|
|
@@ -424,7 +424,7 @@
|
|
|
424
424
|
.zg-link:hover{text-decoration-color:currentColor}.zg-link:focus-visible{outline:2px solid var(--zg-brand);outline-offset:2px}.zg-link--plain{text-decoration:none}
|
|
425
425
|
.zg-press{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:8px;border-radius:12px;-webkit-tap-highlight-color:transparent}
|
|
426
426
|
.zg-press:active{opacity:.7}.zg-press:focus-visible{outline:2px solid var(--zg-brand);outline-offset:2px}.zg-press[disabled]{opacity:.45;cursor:not-allowed}
|
|
427
|
-
.zg-liquid{position:relative;border-radius:var(--zg-liquid-r,24px);padding:20px;background:linear-gradient(135deg,color-mix(in oklch,var(--zg-text-1) 14%,transparent),color-mix(in oklch,var(--zg-text-1) 4%,transparent))
|
|
427
|
+
.zg-liquid{position:relative;border-radius:var(--zg-liquid-r,24px);padding:20px;background:linear-gradient(135deg,color-mix(in oklch,var(--zg-text-1) 14%,transparent),color-mix(in oklch,var(--zg-text-1) 4%,transparent));-webkit-backdrop-filter:blur(var(--zg-liquid-b,18px)) saturate(1.8);backdrop-filter:blur(var(--zg-liquid-b,18px)) saturate(1.8);box-shadow:inset 0 1px 0 color-mix(in oklch,var(--zg-text-1) 30%,transparent),inset 0 -1px 0 color-mix(in oklch,var(--zg-text-1) 8%,transparent),0 12px 32px oklch(0 0 0/.25);border:1px solid var(--zg-stroke);overflow:hidden}
|
|
428
428
|
.zg-sheet-scrim{align-items:flex-end;justify-content:center;padding:0}
|
|
429
429
|
.zg-sheet{width:min(560px,100%);display:flex;flex-direction:column;gap:12px;padding:10px 20px 20px;border-radius:28px 28px 0 0;background:var(--zg-s1);box-shadow:var(--zg-rim),var(--zg-shadow-1);overflow:auto;animation:zg-sheet-in .22s ease-out}
|
|
430
430
|
.zg-sheet__grab{align-self:center;width:40px;height:4px;border-radius:2px;background:var(--zg-stroke);flex:none;margin-block:2px 4px}
|
|
@@ -536,7 +536,7 @@
|
|
|
536
536
|
.zg-ash__proofT{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;margin-inline-start:10px}.zg-ash__proofT span{color:var(--zg-text-3);font-size:13px}
|
|
537
537
|
.zg-ash--light .zg-ash__grid>.zg-ash__media,.zg-ash--tint .zg-ash__grid>.zg-ash__media{border-radius:var(--ash-r);min-height:520px;display:flex;flex-direction:column;justify-content:flex-end;box-shadow:var(--zg-rim)}
|
|
538
538
|
.zg-ash__mh{position:absolute;inset-inline:0;top:0;margin:0;padding:clamp(20px,3vw,36px);font:400 clamp(24px,2.8vw,34px)/1.2 var(--zg-font);color:#fff;text-shadow:0 1px 16px rgb(0 0 0/.25)}
|
|
539
|
-
.zg-ash__glass{position:relative;margin:12px;padding:18px;border-radius:calc(var(--ash-r) - 8px);display:flex;flex-direction:column;gap:12px;background:color-mix(in oklch,var(--zg-bg) 38%,transparent)
|
|
539
|
+
.zg-ash__glass{position:relative;margin:12px;padding:18px;border-radius:calc(var(--ash-r) - 8px);display:flex;flex-direction:column;gap:12px;background:color-mix(in oklch,var(--zg-bg) 38%,transparent);-webkit-backdrop-filter:blur(22px) saturate(1.4);backdrop-filter:blur(22px) saturate(1.4);box-shadow:var(--zg-rim);color:var(--zg-text-1)}
|
|
540
540
|
.zg-ash__glass p{margin:0;color:var(--zg-text-2)}
|
|
541
541
|
.zg-ash__chips{display:flex;gap:10px;flex-wrap:wrap}
|
|
542
542
|
.zg-ash__chip{flex:1;text-align:center;padding:14px 18px;border-radius:999px;box-shadow:inset 0 0 0 1px color-mix(in oklch,var(--zg-text-1) 40%,transparent)}
|
|
@@ -1413,7 +1413,7 @@
|
|
|
1413
1413
|
.zg-avatar__st{position:absolute;inset-inline-end:0;bottom:0;width:max(8px,calc(var(--s)*.26));height:max(8px,calc(var(--s)*.26));border-radius:50%;background:var(--zg-text-3);box-shadow:0 0 0 2px var(--zg-bg)}
|
|
1414
1414
|
.zg-avatar__st--online{background:var(--zg-green)}.zg-avatar__st--away{background:var(--zg-amber)}.zg-avatar__st--busy{background:var(--zg-red)}
|
|
1415
1415
|
.zg-avatar--sky{background:var(--zg-sky);color:var(--zg-bg)}.zg-avatar--success{background:var(--zg-green);color:var(--zg-bg)}.zg-avatar--warning{background:var(--zg-amber);color:var(--zg-bg)}.zg-avatar--danger{background:var(--zg-red);color:var(--zg-bg)}.zg-avatar--neutral{background:var(--zg-s3);color:var(--zg-text-1)}
|
|
1416
|
-
.zg-card.zg-card--outline{background:transparent
|
|
1416
|
+
.zg-card.zg-card--outline{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:inset 0 0 0 1px var(--zg-stroke)}
|
|
1417
1417
|
.zg-card.zg-card--flush{padding:0}
|
|
1418
1418
|
.zg-card--click{cursor:pointer;transition:transform .2s var(--zg-ease)}.zg-card--click:hover{transform:translateY(-2px)}.zg-card--click:focus-visible{outline:2px solid var(--zg-brand);outline-offset:2px}
|
|
1419
1419
|
.zg-card__foot{display:flex;align-items:center;gap:8px;padding-top:14px;box-shadow:0 -1px 0 var(--zg-stroke)}
|
package/docs/INTEGRATION.md
CHANGED
|
@@ -165,3 +165,12 @@ Plugin CSS must only use the public design tokens (`--zg-*`, see `@ziyarago/ui/t
|
|
|
165
165
|
|
|
166
166
|
## Migrating from local copies of glass-ui-kit
|
|
167
167
|
The migration tooling (compat layer with the old component names, resolver and Vite plugin, step by step guide) is part of `@ziyarago/ui-pro`.
|
|
168
|
+
|
|
169
|
+
## 9. Icons and CSP
|
|
170
|
+
The icons the components use themselves (about 100: chevrons, close, search, eye, calendar ...) are built into the package and load without a network request, so they work under `connect-src 'self'`. Icons you pass by name that are not in that set (`<UiButton icon="rocket">`) are fetched once from `https://unpkg.com/lucide-static@0.460.0/icons/`. Under a strict CSP either self-host them or register them:
|
|
171
|
+
|
|
172
|
+
```js
|
|
173
|
+
import { setIconBase, registerIcons } from '@ziyarago/ui/vue';
|
|
174
|
+
setIconBase('/icons/'); // copy node_modules/lucide-static/icons to public/icons
|
|
175
|
+
registerIcons({ 'my-logo': '<svg viewBox="0 0 24 24" ...>...</svg>' }); // or inline SVG strings, no request at all
|
|
176
|
+
```
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ziyarago/ui",
|
|
3
|
-
"version": "0.15.
|
|
3
|
+
"version": "0.15.1",
|
|
4
4
|
"description": "ZiyaraGo UI — glass design system for Umrah and Hajj products. OKLCH tokens, two palettes, dark and light, RTL, Thmanyah. One framework-neutral core with Vue 3, Nuxt and React adapters, 102 free components and 6 page templates (more in @ziyarago/ui-pro).",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"ui",
|
|
@@ -98,6 +98,7 @@
|
|
|
98
98
|
],
|
|
99
99
|
"scripts": {
|
|
100
100
|
"types": "node scripts/types.mjs",
|
|
101
|
+
"icons": "node scripts/icons.mjs",
|
|
101
102
|
"build": "node scripts/i18n-index.mjs && node scripts/build.mjs && node scripts/types.mjs && node scripts/manifest.mjs",
|
|
102
103
|
"check": "node scripts/check.mjs && node scripts/check-meta.mjs && node scripts/i18n-index.mjs",
|
|
103
104
|
"test": "npm run test:unit && npm run test:ssr && npm run test:browser",
|
|
@@ -147,6 +148,7 @@
|
|
|
147
148
|
"axe-core": "^4.14.0",
|
|
148
149
|
"conventional-changelog-conventionalcommits": "^9.3.1",
|
|
149
150
|
"esbuild": "^0.28.2",
|
|
151
|
+
"lucide-static": "^0.460.0",
|
|
150
152
|
"puppeteer-core": "^23.11.1",
|
|
151
153
|
"react": "^19.3.1",
|
|
152
154
|
"react-dom": "^19.3.1",
|
package/src/core/components.js
CHANGED
|
@@ -6,7 +6,9 @@ import { t } from '../i18n/index.js';
|
|
|
6
6
|
import { rove, tabIdx, listKeys, openKeys, focusIn, toTrigger, trigger } from './keys.js';
|
|
7
7
|
export const cx = (...a) => a.filter(Boolean).join(' ');
|
|
8
8
|
// Copies the listed props that are set; used to forward native attributes and listeners to the real <input>/<textarea>.
|
|
9
|
-
|
|
9
|
+
const DOM_NAMES = { autocomplete: 'autoComplete', maxlength: 'maxLength', minlength: 'minLength', inputmode: 'inputMode', autocapitalize: 'autoCapitalize', spellcheck: 'spellCheck', autofocus: 'autoFocus' };
|
|
10
|
+
// DOM property spelling (autoComplete, maxLength ...) so React does not warn; Vue accepts it too.
|
|
11
|
+
export const pick = (p, keys) => { const o = {}; for (const k of keys) if (p[k] !== undefined) o[DOM_NAMES[k] || k] = p[k]; return o; };
|
|
10
12
|
export const INPUT_ATTRS = ['name', 'autocomplete', 'required', 'min', 'max', 'step', 'maxlength', 'minlength', 'inputmode', 'pattern', 'spellcheck', 'autofocus', 'autocapitalize', 'onBlur', 'onFocus', 'onKeydown', 'onKeyDown', 'onKeyup', 'onKeyUp', 'onPaste'];
|
|
11
13
|
export const DZ = { xs: .82, sm: .91, md: 1, lg: 1.12, xl: 1.25 };
|
|
12
14
|
// Shared outside-click / Escape close for popups. Put `ref: ddRef(close)` on the popup element; its parent is the component root
|
|
@@ -34,14 +36,19 @@ export const ddRef = (close, o = {}) => el => {
|
|
|
34
36
|
export const dzp = (p, b) => Math.round(b * (DZ[p.size] || 1));
|
|
35
37
|
export const dzf = n => `calc(${n}px*var(--dz,1))`;
|
|
36
38
|
export const dzb = p => ({ xs: 'xs', sm: 'xs', md: 'sm', lg: 'md', xl: 'lg' }[p.size] || 'sm');
|
|
37
|
-
// Icons: Lucide SVGs
|
|
39
|
+
// Icons: Lucide SVGs inlined as data-URI masks. The ~100 icons the components use come from a lazily imported built-in set (no network, CSP-safe);
|
|
40
|
+
// any other name is fetched once from ZG_ICON_BASE (unpkg by default; override with setIconBase to self-host) or taken from registerIcons().
|
|
38
41
|
export let ZG_ICON_BASE = 'https://unpkg.com/lucide-static@0.460.0/icons/';
|
|
39
42
|
export const setIconBase = b => { ZG_ICON_BASE = b.endsWith('/') ? b : b + '/'; };
|
|
40
|
-
const iconCache = {}, iconPending = {};
|
|
43
|
+
const iconCache = {}, iconPending = {}, iconExtra = {};
|
|
44
|
+
let iconBuiltin;
|
|
45
|
+
const getBuiltin = () => iconBuiltin || (iconBuiltin = import('../icons/builtin.js').then(m => m.default).catch(() => ({})));
|
|
46
|
+
/** Add or replace icons by name with inline SVG strings: registerIcons({ 'my-logo': '<svg ...>...</svg>' }). They win over the built-in set and the CDN. */
|
|
47
|
+
export const registerIcons = map => { Object.assign(iconExtra, map); for (const k of Object.keys(map)) { delete iconCache[k]; delete iconPending[k]; } };
|
|
41
48
|
const iconUri = svg => 'url("data:image/svg+xml,' + encodeURIComponent(svg.replace(/stroke="currentColor"/g, 'stroke="black"').replace(/currentColor/g, 'black')) + '")';
|
|
42
49
|
const loadIcon = name => {
|
|
43
50
|
if (iconCache[name] || iconPending[name] || typeof document === 'undefined') return;
|
|
44
|
-
iconPending[name] = fetch(ZG_ICON_BASE + name + '.svg').then(r => r.text()).then(svg => {
|
|
51
|
+
iconPending[name] = (iconExtra[name] ? Promise.resolve(iconExtra[name]) : getBuiltin().then(b => b[name])).then(svg => svg || fetch(ZG_ICON_BASE + name + '.svg').then(r => r.text())).then(svg => {
|
|
45
52
|
iconCache[name] = iconUri(svg);
|
|
46
53
|
document.querySelectorAll('[data-zg-icon="' + name + '"]').forEach(el => el.style.setProperty('--zg-icon', iconCache[name]));
|
|
47
54
|
}).catch(() => {});
|
package/src/core/components2.js
CHANGED
|
@@ -81,7 +81,7 @@ export const more = {
|
|
|
81
81
|
return h('div', { class: 'zg-field' }, p.label ? h('span', { class: 'zg-label' }, p.label) : null, h('div', { style: { display: 'flex', gap: '8px', alignItems: 'center' } }, h('div', { style: { flex: 1 } }, h(C.Select, { options: hs, disabled: p.disabled, modelValue: H, onChange: v => p.onChange && p.onChange(v + ':' + M) })), h('b', null, ':'), h('div', { style: { flex: 1 } }, h(C.Select, { options: ms, disabled: p.disabled, modelValue: M, onChange: v => p.onChange && p.onChange(H + ':' + v) })))); } },
|
|
82
82
|
FormField: { render: ({ h, props: p, children }) => h('div', { class: 'zg-field' }, p.label ? h('span', { class: 'zg-label' }, p.label, p.required ? h('span', { style: { color: 'var(--zg-red)' } }, ' *') : null) : null, ...children, p.error ? h('span', { class: 'zg-hint zg-hint--error' }, p.error) : p.hint ? h('span', { class: 'zg-hint' }, p.hint) : null) },
|
|
83
83
|
LoginForm: { state: { e: '', pw: '', rm: true }, render: ({ C, h, props: p, state, set }) => { const L = { email: t('LoginForm', 'email'), password: t('LoginForm', 'password'), remember: t('LoginForm', 'remember'), forgot: t('LoginForm', 'forgot'), submit: t('LoginForm', 'submit'), ...(p.labels || {}) }; return h('form', { class: 'zg-field', style: { gap: '14px' }, onSubmit: ev => { ev.preventDefault(); p.onSubmit && p.onSubmit({ email: state.e, password: state.pw, remember: state.rm }); } },
|
|
84
|
-
p.error ? h(C.Alert, { tone: 'danger' }, p.error) : null, h(C.TextField, { label: L.email, icon: 'user-round', modelValue: state.e, onChange: v => set({ e: v }) }), h(C.PasswordInput, { label: L.password, modelValue: state.pw, onChange: v => set({ pw: v }) }),
|
|
84
|
+
p.error ? h(C.Alert, { tone: 'danger' }, p.error) : null, h(C.TextField, { label: L.email, icon: 'user-round', name: p.emailName || 'email', type: p.emailType || 'text', autocomplete: 'username', inputmode: p.emailType === 'tel' ? 'tel' : p.emailType === 'email' ? 'email' : undefined, placeholder: L.emailPlaceholder, required: p.required, modelValue: state.e, onChange: v => set({ e: v }) }), h(C.PasswordInput, { label: L.password, name: p.passwordName || 'password', placeholder: L.passwordPlaceholder, required: p.required, modelValue: state.pw, onChange: v => set({ pw: v }) }),
|
|
85
85
|
h('div', { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' } }, p.showRemember !== false ? h(C.Checkbox, { label: L.remember, modelValue: state.rm, onChange: v => set({ rm: v }) }) : h('span', null), p.showForgot !== false ? h('a', { href: '#', onClick: e => { e.preventDefault(); p.onForgot && p.onForgot(); }, style: { color: 'var(--zg-brand-text)', fontWeight: 600, fontSize: '14px' } }, L.forgot) : null),
|
|
86
86
|
h('button', { type: 'submit', class: 'zg-btn zg-btn--primary zg-btn--lg zg-btn--block', disabled: p.loading }, p.loading ? h('span', { class: 'zg-spin' }) : null, p.submitLabel || L.submit)); } },
|
|
87
87
|
/* ── Data ── */
|
package/src/core/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { components as base, fmt, setIconBase } from './components.js';
|
|
1
|
+
import { components as base, fmt, setIconBase, registerIcons } from './components.js';
|
|
2
2
|
import { more } from './components2.js';
|
|
3
3
|
import { more3 } from './components3.js';
|
|
4
4
|
import { more4, rules } from './components4.js';
|
|
@@ -6,7 +6,7 @@ import { pages } from './pages.js';
|
|
|
6
6
|
import { more6 } from './components6.js';
|
|
7
7
|
import { more7 } from './components7.js';
|
|
8
8
|
export const components = { ...base, ...more, ...more3, ...more4, ...more6, ...more7, ...pages };
|
|
9
|
-
export { fmt, setIconBase, rules };
|
|
9
|
+
export { fmt, setIconBase, registerIcons, rules };
|
|
10
10
|
/** Extension API: adds definitions to the shared registry (used by add-on packages such as @ziyarago/ui-pro). Registering the very same definition twice is a no-op (Vue and React adapters can both load one plugin). */
|
|
11
11
|
export function registerComponents(defs, { override = false } = {}) {
|
|
12
12
|
for (const name of Object.keys(defs)) if (!override && name in components && components[name] !== defs[name]) throw new Error(`@ziyarago/ui: component "${name}" is already registered (pass { override: true } to replace it)`);
|
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
// generated by scripts/icons.mjs from lucide-static (ISC): do not edit
|
|
2
|
+
export default {
|
|
3
|
+
"activity": "<svg class=\"lucide lucide-activity\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" ><path d=\"M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2\" /></svg>",
|
|
4
|
+
"align-center": "<svg class=\"lucide lucide-align-center\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" ><path d=\"M17 12H7\" /><path d=\"M19 18H5\" /><path d=\"M21 6H3\" /></svg>",
|
|
5
|
+
"align-justify": "<svg class=\"lucide lucide-align-justify\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" ><path d=\"M3 12h18\" /><path d=\"M3 18h18\" /><path d=\"M3 6h18\" /></svg>",
|
|
6
|
+
"align-left": "<svg class=\"lucide lucide-align-left\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" ><path d=\"M15 12H3\" /><path d=\"M17 18H3\" /><path d=\"M21 6H3\" /></svg>",
|
|
7
|
+
"align-right": "<svg class=\"lucide lucide-align-right\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" ><path d=\"M21 12H9\" /><path d=\"M21 18H7\" /><path d=\"M21 6H3\" /></svg>",
|
|
8
|
+
"apple": "<svg class=\"lucide lucide-apple\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" ><path d=\"M12 20.94c1.5 0 2.75 1.06 4 1.06 3 0 6-8 6-12.22A4.91 4.91 0 0 0 17 5c-2.22 0-4 1.44-5 2-1-.56-2.78-2-5-2a4.9 4.9 0 0 0-5 4.78C2 14 5 22 8 22c1.25 0 2.5-1.06 4-1.06Z\" /><path d=\"M10 2c1 .5 2 2 2 5\" /></svg>",
|
|
9
|
+
"arrow-down": "<svg class=\"lucide lucide-arrow-down\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" ><path d=\"M12 5v14\" /><path d=\"m19 12-7 7-7-7\" /></svg>",
|
|
10
|
+
"arrow-up": "<svg class=\"lucide lucide-arrow-up\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" ><path d=\"m5 12 7-7 7 7\" /><path d=\"M12 19V5\" /></svg>",
|
|
11
|
+
"arrow-up-right": "<svg class=\"lucide lucide-arrow-up-right\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" ><path d=\"M7 7h10v10\" /><path d=\"M7 17 17 7\" /></svg>",
|
|
12
|
+
"baseline": "<svg class=\"lucide lucide-baseline\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" ><path d=\"M4 20h16\" /><path d=\"m6 16 6-12 6 12\" /><path d=\"M8 12h8\" /></svg>",
|
|
13
|
+
"bell": "<svg class=\"lucide lucide-bell\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" ><path d=\"M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9\" /><path d=\"M10.3 21a1.94 1.94 0 0 0 3.4 0\" /></svg>",
|
|
14
|
+
"bold": "<svg class=\"lucide lucide-bold\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" ><path d=\"M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8\" /></svg>",
|
|
15
|
+
"calendar": "<svg class=\"lucide lucide-calendar\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" ><path d=\"M8 2v4\" /><path d=\"M16 2v4\" /><rect width=\"18\" height=\"18\" x=\"3\" y=\"4\" rx=\"2\" /><path d=\"M3 10h18\" /></svg>",
|
|
16
|
+
"camera": "<svg class=\"lucide lucide-camera\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" ><path d=\"M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z\" /><circle cx=\"12\" cy=\"13\" r=\"3\" /></svg>",
|
|
17
|
+
"check": "<svg class=\"lucide lucide-check\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" ><path d=\"M20 6 9 17l-5-5\" /></svg>",
|
|
18
|
+
"chevron-down": "<svg class=\"lucide lucide-chevron-down\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" ><path d=\"m6 9 6 6 6-6\" /></svg>",
|
|
19
|
+
"chevron-left": "<svg class=\"lucide lucide-chevron-left\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" ><path d=\"m15 18-6-6 6-6\" /></svg>",
|
|
20
|
+
"chevron-right": "<svg class=\"lucide lucide-chevron-right\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" ><path d=\"m9 18 6-6-6-6\" /></svg>",
|
|
21
|
+
"chevron-up": "<svg class=\"lucide lucide-chevron-up\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" ><path d=\"m18 15-6-6-6 6\" /></svg>",
|
|
22
|
+
"circle": "<svg class=\"lucide lucide-circle\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" ><circle cx=\"12\" cy=\"12\" r=\"10\" /></svg>",
|
|
23
|
+
"circle-alert": "<svg class=\"lucide lucide-circle-alert\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" ><circle cx=\"12\" cy=\"12\" r=\"10\" /><line x1=\"12\" x2=\"12\" y1=\"8\" y2=\"12\" /><line x1=\"12\" x2=\"12.01\" y1=\"16\" y2=\"16\" /></svg>",
|
|
24
|
+
"circle-help": "<svg class=\"lucide lucide-circle-help\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" ><circle cx=\"12\" cy=\"12\" r=\"10\" /><path d=\"M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3\" /><path d=\"M12 17h.01\" /></svg>",
|
|
25
|
+
"clock": "<svg class=\"lucide lucide-clock\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" ><circle cx=\"12\" cy=\"12\" r=\"10\" /><polyline points=\"12 6 12 12 16 14\" /></svg>",
|
|
26
|
+
"code": "<svg class=\"lucide lucide-code\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" ><polyline points=\"16 18 22 12 16 6\" /><polyline points=\"8 6 2 12 8 18\" /></svg>",
|
|
27
|
+
"component": "<svg class=\"lucide lucide-component\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" ><path d=\"M15.536 11.293a1 1 0 0 0 0 1.414l2.376 2.377a1 1 0 0 0 1.414 0l2.377-2.377a1 1 0 0 0 0-1.414l-2.377-2.377a1 1 0 0 0-1.414 0z\" /><path d=\"M2.297 11.293a1 1 0 0 0 0 1.414l2.377 2.377a1 1 0 0 0 1.414 0l2.377-2.377a1 1 0 0 0 0-1.414L6.088 8.916a1 1 0 0 0-1.414 0z\" /><path d=\"M8.916 17.912a1 1 0 0 0 0 1.415l2.377 2.376a1 1 0 0 0 1.414 0l2.377-2.376a1 1 0 0 0 0-1.415l-2.377-2.376a1 1 0 0 0-1.414 0z\" /><path d=\"M8.916 4.674a1 1 0 0 0 0 1.414l2.377 2.376a1 1 0 0 0 1.414 0l2.377-2.376a1 1 0 0 0 0-1.414l-2.377-2.377a1 1 0 0 0-1.414 0z\" /></svg>",
|
|
28
|
+
"contact": "<svg class=\"lucide lucide-contact\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" ><path d=\"M16 2v2\" /><path d=\"M7 22v-2a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v2\" /><path d=\"M8 2v2\" /><circle cx=\"12\" cy=\"11\" r=\"3\" /><rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\" /></svg>",
|
|
29
|
+
"copy": "<svg class=\"lucide lucide-copy\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" ><rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\" /><path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\" /></svg>",
|
|
30
|
+
"dot": "<svg class=\"lucide lucide-dot\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" ><circle cx=\"12.1\" cy=\"12.1\" r=\"1\" /></svg>",
|
|
31
|
+
"ellipsis-vertical": "<svg class=\"lucide lucide-ellipsis-vertical\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" ><circle cx=\"12\" cy=\"12\" r=\"1\" /><circle cx=\"12\" cy=\"5\" r=\"1\" /><circle cx=\"12\" cy=\"19\" r=\"1\" /></svg>",
|
|
32
|
+
"expand": "<svg class=\"lucide lucide-expand\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" ><path d=\"m21 21-6-6m6 6v-4.8m0 4.8h-4.8\" /><path d=\"M3 16.2V21m0 0h4.8M3 21l6-6\" /><path d=\"M21 7.8V3m0 0h-4.8M21 3l-6 6\" /><path d=\"M3 7.8V3m0 0h4.8M3 3l6 6\" /></svg>",
|
|
33
|
+
"external-link": "<svg class=\"lucide lucide-external-link\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" ><path d=\"M15 3h6v6\" /><path d=\"M10 14 21 3\" /><path d=\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\" /></svg>",
|
|
34
|
+
"eye": "<svg class=\"lucide lucide-eye\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" ><path d=\"M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0\" /><circle cx=\"12\" cy=\"12\" r=\"3\" /></svg>",
|
|
35
|
+
"eye-off": "<svg class=\"lucide lucide-eye-off\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" ><path d=\"M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49\" /><path d=\"M14.084 14.158a3 3 0 0 1-4.242-4.242\" /><path d=\"M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143\" /><path d=\"m2 2 20 20\" /></svg>",
|
|
36
|
+
"file": "<svg class=\"lucide lucide-file\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" ><path d=\"M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z\" /><path d=\"M14 2v4a2 2 0 0 0 2 2h4\" /></svg>",
|
|
37
|
+
"file-check-2": "<svg class=\"lucide lucide-file-check-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" ><path d=\"M4 22h14a2 2 0 0 0 2-2V7l-5-5H6a2 2 0 0 0-2 2v4\" /><path d=\"M14 2v4a2 2 0 0 0 2 2h4\" /><path d=\"m3 15 2 2 4-4\" /></svg>",
|
|
38
|
+
"file-code-2": "<svg class=\"lucide lucide-file-code-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" ><path d=\"M4 22h14a2 2 0 0 0 2-2V7l-5-5H6a2 2 0 0 0-2 2v4\" /><path d=\"M14 2v4a2 2 0 0 0 2 2h4\" /><path d=\"m5 12-3 3 3 3\" /><path d=\"m9 18 3-3-3-3\" /></svg>",
|
|
39
|
+
"filter": "<svg class=\"lucide lucide-filter\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" ><polygon points=\"22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3\" /></svg>",
|
|
40
|
+
"frame": "<svg class=\"lucide lucide-frame\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" ><line x1=\"22\" x2=\"2\" y1=\"6\" y2=\"6\" /><line x1=\"22\" x2=\"2\" y1=\"18\" y2=\"18\" /><line x1=\"6\" x2=\"6\" y1=\"2\" y2=\"22\" /><line x1=\"18\" x2=\"18\" y1=\"2\" y2=\"22\" /></svg>",
|
|
41
|
+
"ghost": "<svg class=\"lucide lucide-ghost\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" ><path d=\"M9 10h.01\" /><path d=\"M15 10h.01\" /><path d=\"M12 2a8 8 0 0 0-8 8v12l3-3 2.5 2.5L12 19l2.5 2.5L17 19l3 3V10a8 8 0 0 0-8-8z\" /></svg>",
|
|
42
|
+
"grip-vertical": "<svg class=\"lucide lucide-grip-vertical\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" ><circle cx=\"9\" cy=\"12\" r=\"1\" /><circle cx=\"9\" cy=\"5\" r=\"1\" /><circle cx=\"9\" cy=\"19\" r=\"1\" /><circle cx=\"15\" cy=\"12\" r=\"1\" /><circle cx=\"15\" cy=\"5\" r=\"1\" /><circle cx=\"15\" cy=\"19\" r=\"1\" /></svg>",
|
|
43
|
+
"group": "<svg class=\"lucide lucide-group\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" ><path d=\"M3 7V5c0-1.1.9-2 2-2h2\" /><path d=\"M17 3h2c1.1 0 2 .9 2 2v2\" /><path d=\"M21 17v2c0 1.1-.9 2-2 2h-2\" /><path d=\"M7 21H5c-1.1 0-2-.9-2-2v-2\" /><rect width=\"7\" height=\"5\" x=\"7\" y=\"7\" rx=\"1\" /><rect width=\"7\" height=\"5\" x=\"10\" y=\"12\" rx=\"1\" /></svg>",
|
|
44
|
+
"history": "<svg class=\"lucide lucide-history\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" ><path d=\"M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8\" /><path d=\"M3 3v5h5\" /><path d=\"M12 7v5l4 2\" /></svg>",
|
|
45
|
+
"hotel": "<svg class=\"lucide lucide-hotel\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" ><path d=\"M10 22v-6.57\" /><path d=\"M12 11h.01\" /><path d=\"M12 7h.01\" /><path d=\"M14 15.43V22\" /><path d=\"M15 16a5 5 0 0 0-6 0\" /><path d=\"M16 11h.01\" /><path d=\"M16 7h.01\" /><path d=\"M8 11h.01\" /><path d=\"M8 7h.01\" /><rect x=\"4\" y=\"2\" width=\"16\" height=\"20\" rx=\"2\" /></svg>",
|
|
46
|
+
"image-up": "<svg class=\"lucide lucide-image-up\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" ><path d=\"M10.3 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v10l-3.1-3.1a2 2 0 0 0-2.814.014L6 21\" /><path d=\"m14 19.5 3-3 3 3\" /><path d=\"M17 22v-5.5\" /><circle cx=\"9\" cy=\"9\" r=\"2\" /></svg>",
|
|
47
|
+
"inbox": "<svg class=\"lucide lucide-inbox\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" ><polyline points=\"22 12 16 12 14 15 10 15 8 12 2 12\" /><path d=\"M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z\" /></svg>",
|
|
48
|
+
"info": "<svg class=\"lucide lucide-info\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" ><circle cx=\"12\" cy=\"12\" r=\"10\" /><path d=\"M12 16v-4\" /><path d=\"M12 8h.01\" /></svg>",
|
|
49
|
+
"italic": "<svg class=\"lucide lucide-italic\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" ><line x1=\"19\" x2=\"10\" y1=\"4\" y2=\"4\" /><line x1=\"14\" x2=\"5\" y1=\"20\" y2=\"20\" /><line x1=\"15\" x2=\"9\" y1=\"4\" y2=\"20\" /></svg>",
|
|
50
|
+
"link": "<svg class=\"lucide lucide-link\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" ><path d=\"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71\" /><path d=\"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71\" /></svg>",
|
|
51
|
+
"list": "<svg class=\"lucide lucide-list\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" ><path d=\"M3 12h.01\" /><path d=\"M3 18h.01\" /><path d=\"M3 6h.01\" /><path d=\"M8 12h13\" /><path d=\"M8 18h13\" /><path d=\"M8 6h13\" /></svg>",
|
|
52
|
+
"list-ordered": "<svg class=\"lucide lucide-list-ordered\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" ><path d=\"M10 12h11\" /><path d=\"M10 18h11\" /><path d=\"M10 6h11\" /><path d=\"M4 10h2\" /><path d=\"M4 6h1v4\" /><path d=\"M6 18H4c0-1 2-2 2-3s-1-1.5-2-1\" /></svg>",
|
|
53
|
+
"lock-keyhole": "<svg class=\"lucide lucide-lock-keyhole\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" ><circle cx=\"12\" cy=\"16\" r=\"1\" /><rect x=\"3\" y=\"10\" width=\"18\" height=\"12\" rx=\"2\" /><path d=\"M7 10V7a5 5 0 0 1 10 0v3\" /></svg>",
|
|
54
|
+
"mail": "<svg class=\"lucide lucide-mail\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" ><rect width=\"20\" height=\"16\" x=\"2\" y=\"4\" rx=\"2\" /><path d=\"m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7\" /></svg>",
|
|
55
|
+
"map": "<svg class=\"lucide lucide-map\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" ><path d=\"M14.106 5.553a2 2 0 0 0 1.788 0l3.659-1.83A1 1 0 0 1 21 4.619v12.764a1 1 0 0 1-.553.894l-4.553 2.277a2 2 0 0 1-1.788 0l-4.212-2.106a2 2 0 0 0-1.788 0l-3.659 1.83A1 1 0 0 1 3 19.381V6.618a1 1 0 0 1 .553-.894l4.553-2.277a2 2 0 0 1 1.788 0z\" /><path d=\"M15 5.764v15\" /><path d=\"M9 3.236v15\" /></svg>",
|
|
56
|
+
"map-pin": "<svg class=\"lucide lucide-map-pin\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" ><path d=\"M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0\" /><circle cx=\"12\" cy=\"10\" r=\"3\" /></svg>",
|
|
57
|
+
"menu": "<svg class=\"lucide lucide-menu\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" ><line x1=\"4\" x2=\"20\" y1=\"12\" y2=\"12\" /><line x1=\"4\" x2=\"20\" y1=\"6\" y2=\"6\" /><line x1=\"4\" x2=\"20\" y1=\"18\" y2=\"18\" /></svg>",
|
|
58
|
+
"message-circle-question": "<svg class=\"lucide lucide-message-circle-question\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" ><path d=\"M7.9 20A9 9 0 1 0 4 16.1L2 22Z\" /><path d=\"M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3\" /><path d=\"M12 17h.01\" /></svg>",
|
|
59
|
+
"minus": "<svg class=\"lucide lucide-minus\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" ><path d=\"M5 12h14\" /></svg>",
|
|
60
|
+
"move": "<svg class=\"lucide lucide-move\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" ><path d=\"M12 2v20\" /><path d=\"m15 19-3 3-3-3\" /><path d=\"m19 9 3 3-3 3\" /><path d=\"M2 12h20\" /><path d=\"m5 9-3 3 3 3\" /><path d=\"m9 5 3-3 3 3\" /></svg>",
|
|
61
|
+
"option": "<svg class=\"lucide lucide-option\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" ><path d=\"M3 3h6l6 18h6\" /><path d=\"M14 3h7\" /></svg>",
|
|
62
|
+
"panel-left-close": "<svg class=\"lucide lucide-panel-left-close\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" ><rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\" /><path d=\"M9 3v18\" /><path d=\"m16 15-3-3 3-3\" /></svg>",
|
|
63
|
+
"panel-left-open": "<svg class=\"lucide lucide-panel-left-open\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" ><rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\" /><path d=\"M9 3v18\" /><path d=\"m14 9 3 3-3 3\" /></svg>",
|
|
64
|
+
"pencil": "<svg class=\"lucide lucide-pencil\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" ><path d=\"M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z\" /><path d=\"m15 5 4 4\" /></svg>",
|
|
65
|
+
"phone": "<svg class=\"lucide lucide-phone\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" ><path d=\"M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z\" /></svg>",
|
|
66
|
+
"phone-off": "<svg class=\"lucide lucide-phone-off\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" ><path d=\"M10.68 13.31a16 16 0 0 0 3.41 2.6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7 2 2 0 0 1 1.72 2v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.42 19.42 0 0 1-3.33-2.67m-2.67-3.34a19.79 19.79 0 0 1-3.07-8.63A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91\" /><line x1=\"22\" x2=\"2\" y1=\"2\" y2=\"22\" /></svg>",
|
|
67
|
+
"pill": "<svg class=\"lucide lucide-pill\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" ><path d=\"m10.5 20.5 10-10a4.95 4.95 0 1 0-7-7l-10 10a4.95 4.95 0 1 0 7 7Z\" /><path d=\"m8.5 8.5 7 7\" /></svg>",
|
|
68
|
+
"play": "<svg class=\"lucide lucide-play\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" ><polygon points=\"6 3 20 12 6 21 6 3\" /></svg>",
|
|
69
|
+
"plus": "<svg class=\"lucide lucide-plus\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" ><path d=\"M5 12h14\" /><path d=\"M12 5v14\" /></svg>",
|
|
70
|
+
"pointer": "<svg class=\"lucide lucide-pointer\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" ><path d=\"M22 14a8 8 0 0 1-8 8\" /><path d=\"M18 11v-1a2 2 0 0 0-2-2a2 2 0 0 0-2 2\" /><path d=\"M14 10V9a2 2 0 0 0-2-2a2 2 0 0 0-2 2v1\" /><path d=\"M10 9.5V4a2 2 0 0 0-2-2a2 2 0 0 0-2 2v10\" /><path d=\"M18 11a2 2 0 1 1 4 0v3a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15\" /></svg>",
|
|
71
|
+
"quote": "<svg class=\"lucide lucide-quote\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" ><path d=\"M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z\" /><path d=\"M5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z\" /></svg>",
|
|
72
|
+
"radio": "<svg class=\"lucide lucide-radio\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" ><path d=\"M4.9 19.1C1 15.2 1 8.8 4.9 4.9\" /><path d=\"M7.8 16.2c-2.3-2.3-2.3-6.1 0-8.5\" /><circle cx=\"12\" cy=\"12\" r=\"2\" /><path d=\"M16.2 7.8c2.3 2.3 2.3 6.1 0 8.5\" /><path d=\"M19.1 4.9C23 8.8 23 15.1 19.1 19\" /></svg>",
|
|
73
|
+
"refresh-cw": "<svg class=\"lucide lucide-refresh-cw\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" ><path d=\"M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8\" /><path d=\"M21 3v5h-5\" /><path d=\"M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16\" /><path d=\"M8 16H3v5\" /></svg>",
|
|
74
|
+
"rocket": "<svg class=\"lucide lucide-rocket\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" ><path d=\"M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z\" /><path d=\"m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z\" /><path d=\"M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0\" /><path d=\"M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5\" /></svg>",
|
|
75
|
+
"save": "<svg class=\"lucide lucide-save\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" ><path d=\"M15.2 3a2 2 0 0 1 1.4.6l3.8 3.8a2 2 0 0 1 .6 1.4V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z\" /><path d=\"M17 21v-7a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v7\" /><path d=\"M7 3v4a1 1 0 0 0 1 1h7\" /></svg>",
|
|
76
|
+
"scroll": "<svg class=\"lucide lucide-scroll\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" ><path d=\"M19 17V5a2 2 0 0 0-2-2H4\" /><path d=\"M8 21h12a2 2 0 0 0 2-2v-1a1 1 0 0 0-1-1H11a1 1 0 0 0-1 1v1a2 2 0 1 1-4 0V5a2 2 0 1 0-4 0v2a1 1 0 0 0 1 1h3\" /></svg>",
|
|
77
|
+
"search": "<svg class=\"lucide lucide-search\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" ><circle cx=\"11\" cy=\"11\" r=\"8\" /><path d=\"m21 21-4.3-4.3\" /></svg>",
|
|
78
|
+
"section": "<svg class=\"lucide lucide-section\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" ><path d=\"M16 5a4 3 0 0 0-8 0c0 4 8 3 8 7a4 3 0 0 1-8 0\" /><path d=\"M8 19a4 3 0 0 0 8 0c0-4-8-3-8-7a4 3 0 0 1 8 0\" /></svg>",
|
|
79
|
+
"send": "<svg class=\"lucide lucide-send\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" ><path d=\"M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z\" /><path d=\"m21.854 2.147-10.94 10.939\" /></svg>",
|
|
80
|
+
"share": "<svg class=\"lucide lucide-share\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" ><path d=\"M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8\" /><polyline points=\"16 6 12 2 8 6\" /><line x1=\"12\" x2=\"12\" y1=\"2\" y2=\"15\" /></svg>",
|
|
81
|
+
"slash": "<svg class=\"lucide lucide-slash\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" ><path d=\"M22 2 2 22\" /></svg>",
|
|
82
|
+
"split": "<svg class=\"lucide lucide-split\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" ><path d=\"M16 3h5v5\" /><path d=\"M8 3H3v5\" /><path d=\"M12 22v-8.3a4 4 0 0 0-1.172-2.872L3 3\" /><path d=\"m15 9 6-6\" /></svg>",
|
|
83
|
+
"square": "<svg class=\"lucide lucide-square\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" ><rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\" /></svg>",
|
|
84
|
+
"squircle": "<svg class=\"lucide lucide-squircle\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" ><path d=\"M12 3c7.2 0 9 1.8 9 9s-1.8 9-9 9-9-1.8-9-9 1.8-9 9-9\" /></svg>",
|
|
85
|
+
"star": "<svg class=\"lucide lucide-star\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" ><path d=\"M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z\" /></svg>",
|
|
86
|
+
"strikethrough": "<svg class=\"lucide lucide-strikethrough\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" ><path d=\"M16 4H9a3 3 0 0 0-2.83 4\" /><path d=\"M14 12a4 4 0 0 1 0 8H6\" /><line x1=\"4\" x2=\"20\" y1=\"12\" y2=\"12\" /></svg>",
|
|
87
|
+
"table": "<svg class=\"lucide lucide-table\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" ><path d=\"M12 3v18\" /><rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\" /><path d=\"M3 9h18\" /><path d=\"M3 15h18\" /></svg>",
|
|
88
|
+
"target": "<svg class=\"lucide lucide-target\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" ><circle cx=\"12\" cy=\"12\" r=\"10\" /><circle cx=\"12\" cy=\"12\" r=\"6\" /><circle cx=\"12\" cy=\"12\" r=\"2\" /></svg>",
|
|
89
|
+
"text": "<svg class=\"lucide lucide-text\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" ><path d=\"M17 6.1H3\" /><path d=\"M21 12.1H3\" /><path d=\"M15.1 18H3\" /></svg>",
|
|
90
|
+
"triangle-alert": "<svg class=\"lucide lucide-triangle-alert\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" ><path d=\"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3\" /><path d=\"M12 9v4\" /><path d=\"M12 17h.01\" /></svg>",
|
|
91
|
+
"type": "<svg class=\"lucide lucide-type\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" ><polyline points=\"4 7 4 4 20 4 20 7\" /><line x1=\"9\" x2=\"15\" y1=\"20\" y2=\"20\" /><line x1=\"12\" x2=\"12\" y1=\"4\" y2=\"20\" /></svg>",
|
|
92
|
+
"underline": "<svg class=\"lucide lucide-underline\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" ><path d=\"M6 4v6a6 6 0 0 0 12 0V4\" /><line x1=\"4\" x2=\"20\" y1=\"20\" y2=\"20\" /></svg>",
|
|
93
|
+
"upload": "<svg class=\"lucide lucide-upload\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" ><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\" /><polyline points=\"17 8 12 3 7 8\" /><line x1=\"12\" x2=\"12\" y1=\"3\" y2=\"15\" /></svg>",
|
|
94
|
+
"user": "<svg class=\"lucide lucide-user\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" ><path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\" /><circle cx=\"12\" cy=\"7\" r=\"4\" /></svg>",
|
|
95
|
+
"user-round": "<svg class=\"lucide lucide-user-round\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" ><circle cx=\"12\" cy=\"8\" r=\"5\" /><path d=\"M20 21a8 8 0 0 0-16 0\" /></svg>",
|
|
96
|
+
"wifi-off": "<svg class=\"lucide lucide-wifi-off\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" ><path d=\"M12 20h.01\" /><path d=\"M8.5 16.429a5 5 0 0 1 7 0\" /><path d=\"M5 12.859a10 10 0 0 1 5.17-2.69\" /><path d=\"M19 12.859a10 10 0 0 0-2.007-1.523\" /><path d=\"M2 8.82a15 15 0 0 1 4.177-2.643\" /><path d=\"M22 8.82a15 15 0 0 0-11.288-3.764\" /><path d=\"m2 2 20 20\" /></svg>",
|
|
97
|
+
"wrench": "<svg class=\"lucide lucide-wrench\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" ><path d=\"M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z\" /></svg>",
|
|
98
|
+
"x": "<svg class=\"lucide lucide-x\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" ><path d=\"M18 6 6 18\" /><path d=\"m6 6 12 12\" /></svg>",
|
|
99
|
+
};
|
package/src/meta/forms.js
CHANGED
|
@@ -468,9 +468,13 @@ export default {
|
|
|
468
468
|
error: { type: 'string', description: 'Failure message shown in a danger alert above the fields.' },
|
|
469
469
|
loading: { type: 'boolean', default: false, description: 'Disables the submit button and shows a spinner.' },
|
|
470
470
|
showForgot: { type: 'boolean', default: true, description: 'Show the "Forgot password?" link.' },
|
|
471
|
+
emailType: { type: "'text' | 'email' | 'tel'", values: ['text', 'email', 'tel'], default: 'text', description: 'Type of the login field: use "email" or "tel" to get the matching mobile keyboard and browser validation.' },
|
|
472
|
+
emailName: { type: 'string', default: 'email', description: 'Native name of the login field; the password field uses passwordName (default "password"). Both fields get autocomplete "username" and "current-password" so password managers fill them.' },
|
|
473
|
+
passwordName: { type: 'string', default: 'password', description: 'Native name of the password field.' },
|
|
474
|
+
required: { type: 'boolean', default: false, description: 'Marks both fields required (native validation).' },
|
|
471
475
|
showRemember: { type: 'boolean', default: true, description: 'Show the "Remember device" checkbox. Hide it when your backend has no such option; the submit payload then keeps remember: true.' },
|
|
472
476
|
submitLabel: { type: 'string', default: 'Sign in', description: 'Submit button text. Wins over labels.submit.' },
|
|
473
|
-
labels: { type: '{ email?: string; password?: string; remember?: string; forgot?: string; submit?: string }', default: "{ email: 'Email or phone', password: 'Password', remember: 'Remember device', forgot: 'Forgot password?', submit: 'Sign in' }", description: 'Texts of the form; any missing key keeps its English default.' },
|
|
477
|
+
labels: { type: '{ email?: string; password?: string; emailPlaceholder?: string; passwordPlaceholder?: string; remember?: string; forgot?: string; submit?: string }', default: "{ email: 'Email or phone', password: 'Password', remember: 'Remember device', forgot: 'Forgot password?', submit: 'Sign in' }", description: 'Texts of the form; any missing key keeps its English default (the two placeholders default to none).' },
|
|
474
478
|
size: size(),
|
|
475
479
|
},
|
|
476
480
|
events: { submit: 'Called with { email, password, remember } when the form is submitted.', forgot: 'Called when "Forgot password?" is clicked.' },
|
package/src/react/index.js
CHANGED
|
@@ -148,5 +148,5 @@ export const UiPressable = C.Pressable;
|
|
|
148
148
|
export const UiIcon = C.Icon;
|
|
149
149
|
export const UiPortal = C.Portal;
|
|
150
150
|
export const UiBottomSheet = C.BottomSheet;
|
|
151
|
-
export { fmt, setIconBase, rules, LOCALES, setUiLocale, getUiLocale, setUiMessages, isRtlLocale } from '../core/index.js';
|
|
151
|
+
export { fmt, setIconBase, registerIcons, rules, LOCALES, setUiLocale, getUiLocale, setUiMessages, isRtlLocale } from '../core/index.js';
|
|
152
152
|
export { useUiTheme } from '../theme.js';
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
:where(.zg-root,[class*="zg-"]) :where(button,input,select,textarea),:where(button,input,select,textarea):where([class*="zg-"]){font:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0;background-color:transparent}
|
|
9
9
|
:where(.zg-root,[class*="zg-"]) a:where(:not([class])){text-decoration:underline}
|
|
10
10
|
:where(.zg-root,[class*="zg-"]) svg,svg:where([class*="zg-"]){vertical-align:middle}
|
|
11
|
-
.zg-glass{background:var(--zg-s1)
|
|
11
|
+
.zg-glass{background:var(--zg-s1);-webkit-backdrop-filter:blur(24px) saturate(1.5);backdrop-filter:blur(24px) saturate(1.5);box-shadow:var(--zg-rim),var(--zg-shadow-1)}
|
|
12
12
|
.zg-icon:not([style*="--zg-icon"]){visibility:hidden}
|
|
13
13
|
.zg-icon{display:inline-block;flex:none;width:1em;height:1em;background:currentColor;-webkit-mask:var(--zg-icon) center/contain no-repeat;mask:var(--zg-icon) center/contain no-repeat}
|
|
14
14
|
.zg-mono{font-family:var(--zg-font-mono);font-variant-numeric:tabular-nums}
|
|
@@ -71,7 +71,7 @@
|
|
|
71
71
|
.zg-hint{font-size:12px;color:var(--zg-text-3)}.zg-hint--error{color:var(--zg-red)}
|
|
72
72
|
.zg-select{position:relative}
|
|
73
73
|
.zg-select__trigger{width:100%;justify-content:space-between;text-align:start}
|
|
74
|
-
.zg-select__list{position:absolute;z-index:40;inset-inline:0;top:calc(100% + 6px);padding:6px;border-radius:20px;background:var(--zg-glass)
|
|
74
|
+
.zg-select__list{position:absolute;z-index:40;inset-inline:0;top:calc(100% + 6px);padding:6px;border-radius:20px;background:var(--zg-glass);-webkit-backdrop-filter:blur(40px);backdrop-filter:blur(40px);box-shadow:var(--zg-rim),var(--zg-shadow-2);max-height:280px;overflow:auto}
|
|
75
75
|
.zg-select__opt{display:flex;align-items:center;justify-content:space-between;width:100%;height:40px;padding:0 14px;border:0;border-radius:14px;cursor:pointer;background:none;color:var(--zg-text-1);font:500 14px var(--zg-font);text-align:start}
|
|
76
76
|
.zg-select__opt:hover{background:var(--zg-s2)}.zg-select__opt[aria-selected="true"]{color:var(--zg-brand-text);font-weight:700}
|
|
77
77
|
.zg-code{position:relative;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:8px;direction:ltr}
|
|
@@ -89,8 +89,8 @@
|
|
|
89
89
|
.zg-card{border-radius:var(--zg-r-card);padding:20px;display:flex;flex-direction:column;gap:14px;min-width:0}
|
|
90
90
|
.zg-card--inverse{background:linear-gradient(150deg,oklch(0.285 0.022 239.4),oklch(0.2 0.012 240));color:oklch(0.97 0.004 70)}
|
|
91
91
|
.zg-card__head{display:flex;align-items:flex-start;gap:12px}.zg-card__title{font:600 18px var(--zg-font);margin:0}.zg-card__sub{font-size:13px;color:var(--zg-text-3)}
|
|
92
|
-
.zg-modal-scrim{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:16px;background:oklch(0.12 0.005 40 / .5)
|
|
93
|
-
.zg-modal{width:100%;max-width:520px;max-height:92vh;display:flex;flex-direction:column;border-radius:32px;overflow:hidden;background:var(--zg-glass)
|
|
92
|
+
.zg-modal-scrim{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:16px;background:oklch(0.12 0.005 40 / .5);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
|
|
93
|
+
.zg-modal{width:100%;max-width:520px;max-height:92vh;display:flex;flex-direction:column;border-radius:32px;overflow:hidden;background:var(--zg-glass);-webkit-backdrop-filter:blur(40px) saturate(1.6);backdrop-filter:blur(40px) saturate(1.6);box-shadow:var(--zg-rim),var(--zg-shadow-2);color:var(--zg-text-1)}
|
|
94
94
|
.zg-modal__head{display:flex;align-items:center;gap:12px;padding:20px 20px 16px;box-shadow:0 1px 0 var(--zg-stroke)}.zg-modal__head h3{flex:1;margin:0;font:600 18px var(--zg-font)}
|
|
95
95
|
.zg-modal__body{padding:20px;overflow:auto;display:flex;flex-direction:column;gap:16px}
|
|
96
96
|
.zg-modal__foot{display:flex;justify-content:flex-end;gap:8px;padding:14px 20px 18px;box-shadow:0 -1px 0 var(--zg-stroke)}
|
|
@@ -130,14 +130,14 @@
|
|
|
130
130
|
/* Navigation */
|
|
131
131
|
.zg-crumbs{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--zg-text-3)}.zg-crumbs a{color:var(--zg-text-2);text-decoration:none}.zg-crumbs a:hover{color:var(--zg-text-1)}.zg-crumbs b{color:var(--zg-text-1)}
|
|
132
132
|
.zg-pager{display:inline-flex;gap:4px}.zg-pager button{min-width:36px;height:36px;border:0;border-radius:999px;cursor:pointer;font:600 13px var(--zg-font);background:transparent;color:var(--zg-text-2)}.zg-pager button[aria-current="page"]{background:var(--zg-inv-bg);color:var(--zg-inv-fg)}
|
|
133
|
-
.zg-topnav{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:12px;padding:10px clamp(10px,2vw,20px);background:color-mix(in oklch,var(--zg-bg) 62%,transparent)
|
|
133
|
+
.zg-topnav{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:12px;padding:10px clamp(10px,2vw,20px);background:color-mix(in oklch,var(--zg-bg) 62%,transparent);-webkit-backdrop-filter:blur(28px) saturate(1.6);backdrop-filter:blur(28px) saturate(1.6);box-shadow:0 1px 0 var(--zg-stroke)}
|
|
134
134
|
.zg-topnav__brand{display:flex;align-items:center;gap:10px;font:700 18px var(--zg-font);flex:none}
|
|
135
135
|
.zg-topnav__items{margin-inline-start:auto;display:flex;gap:2px;padding:4px;border-radius:999px;background:var(--zg-s2);box-shadow:var(--zg-rim);overflow-x:auto;scrollbar-width:none;min-width:0}
|
|
136
136
|
.zg-topnav__actions{display:flex;align-items:center;gap:8px;flex:none}
|
|
137
137
|
.zg-navitem{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border:0;border-radius:999px;cursor:pointer;font:600 14px var(--zg-font);white-space:nowrap;background:transparent;color:var(--zg-text-2);transition:background .2s}
|
|
138
138
|
.zg-navitem:hover{background:var(--zg-s2)}.zg-navitem[aria-current="page"]{background:var(--zg-inv-bg);color:var(--zg-inv-fg)}
|
|
139
139
|
.zg-navitem__count{height:20px;min-width:20px;padding:0 6px;border-radius:999px;display:grid;place-items:center;font:700 11px var(--zg-font);background:var(--zg-brand);color:var(--zg-on-brand)}
|
|
140
|
-
.zg-sidenav{--w:272px;position:sticky;top:0;height:100vh;width:var(--w);flex:none;display:flex;flex-direction:column;gap:6px;padding:16px 12px;background:color-mix(in oklch,var(--zg-bg) 62%,transparent)
|
|
140
|
+
.zg-sidenav{--w:272px;position:sticky;top:0;height:100vh;width:var(--w);flex:none;display:flex;flex-direction:column;gap:6px;padding:16px 12px;background:color-mix(in oklch,var(--zg-bg) 62%,transparent);-webkit-backdrop-filter:blur(40px) saturate(1.6);backdrop-filter:blur(40px) saturate(1.6);box-shadow:inset -1px 0 0 var(--zg-stroke);transition:width .3s var(--zg-ease);overflow:hidden}
|
|
141
141
|
[dir="rtl"] .zg-sidenav{box-shadow:inset 1px 0 0 var(--zg-stroke)}
|
|
142
142
|
.zg-sidenav--collapsed{--w:76px}
|
|
143
143
|
.zg-sidenav .zg-navitem{width:100%;height:46px;border-radius:16px;justify-content:flex-start;padding:0 14px}
|
|
@@ -147,10 +147,10 @@
|
|
|
147
147
|
.zg-sidenav__sp{flex:1}.zg-sidenav__group{padding:14px 14px 4px;font:700 11px var(--zg-font);letter-spacing:.1em;text-transform:uppercase;color:var(--zg-text-3)}
|
|
148
148
|
.zg-shell{min-height:100vh;display:flex}.zg-shell--top{flex-direction:column}
|
|
149
149
|
.zg-shell__main{flex:1;min-width:0;max-width:1440px;width:100%;margin:0 auto;padding:clamp(16px,2.4vw,32px);display:flex;flex-direction:column;gap:20px}
|
|
150
|
-
.zg-shell__bar{display:none;position:sticky;top:0;z-index:50;align-items:center;gap:12px;padding:10px 16px;background:color-mix(in oklch,var(--zg-bg) 62%,transparent)
|
|
150
|
+
.zg-shell__bar{display:none;position:sticky;top:0;z-index:50;align-items:center;gap:12px;padding:10px 16px;background:color-mix(in oklch,var(--zg-bg) 62%,transparent);-webkit-backdrop-filter:blur(28px);backdrop-filter:blur(28px)}
|
|
151
151
|
@media(max-width:820px){.zg-shell:not(.zg-shell--top){flex-direction:column}.zg-shell:not(.zg-shell--top) .zg-sidenav{display:none}.zg-shell__bar{display:flex}}
|
|
152
152
|
.zg-page-head{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap}.zg-page-head h1{margin:0;font:300 clamp(28px,3vw,40px) var(--zg-font);letter-spacing:-.03em}.zg-page-head p{margin:4px 0 0;color:var(--zg-text-3);font-size:15px}
|
|
153
|
-
.zg-auth{min-height:100vh;display:grid;place-items:center;padding:24px}.zg-auth__card{width:100%;max-width:440px;padding:clamp(24px,3vw,36px);border-radius:36px;display:flex;flex-direction:column;gap:22px;background:color-mix(in oklch,var(--zg-bg) 55%,transparent)
|
|
153
|
+
.zg-auth{min-height:100vh;display:grid;place-items:center;padding:24px}.zg-auth__card{width:100%;max-width:440px;padding:clamp(24px,3vw,36px);border-radius:36px;display:flex;flex-direction:column;gap:22px;background:color-mix(in oklch,var(--zg-bg) 55%,transparent);-webkit-backdrop-filter:blur(28px) saturate(1.6);backdrop-filter:blur(28px) saturate(1.6);box-shadow:var(--zg-rim),var(--zg-shadow-1)}
|
|
154
154
|
|
|
155
155
|
.zg-shell--frame{min-height:0;height:100%;overflow:auto}.zg-shell--frame .zg-sidenav{height:100%;position:relative}.zg-shell--frame .zg-topnav{position:sticky}
|
|
156
156
|
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
.zg-es{display:flex;flex-direction:column;align-items:center;gap:8px;padding:32px 16px;text-align:center;color:var(--zg-text-2)}.zg-es b{color:var(--zg-text-1);font-size:17px}
|
|
15
15
|
.zg-es__ico{width:64px;height:64px;border-radius:22px;display:grid;place-items:center;background:var(--zg-brand-soft);color:var(--zg-brand-text);box-shadow:var(--zg-rim)}.zg-es__img{width:112px;height:112px;background:center/contain no-repeat}
|
|
16
16
|
.zg-es__a{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:8px}.zg-es--page{min-height:60vh;justify-content:center}
|
|
17
|
-
.zg-lo{position:relative}.zg-lo__o{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;border-radius:inherit;background:color-mix(in oklch,var(--zg-bg) 55%,transparent)
|
|
17
|
+
.zg-lo{position:relative}.zg-lo__o{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;border-radius:inherit;background:color-mix(in oklch,var(--zg-bg) 55%,transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
|
|
18
18
|
.zg-car{position:relative;border-radius:28px;overflow:hidden;box-shadow:var(--zg-rim),var(--zg-shadow-1)}.zg-car__s{aspect-ratio:16/8;background:var(--zg-s3) center/cover;display:flex;align-items:flex-end}
|
|
19
19
|
.zg-car__c{width:100%;padding:44px 20px 18px;color:#fff;display:flex;flex-direction:column;gap:2px;background:linear-gradient(transparent,oklch(0.1 0 0 / .7))}
|
|
20
20
|
.zg-car__p,.zg-car__n{position:absolute;top:50%;margin-top:-16px}.zg-car__p{inset-inline-start:12px}.zg-car__n{inset-inline-end:12px}
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
.zg-code-b pre{margin:0;padding:16px;overflow:auto;font-size:13px;line-height:1.6;direction:ltr;text-align:left}
|
|
27
27
|
.zg-price--on{box-shadow:var(--zg-rim),0 0 0 2px var(--zg-brand),var(--zg-shadow-1)}.zg-feat{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px;font-size:14px}.zg-feat li{display:flex;gap:10px;align-items:center;color:var(--zg-text-2)}.zg-feat .zg-icon{color:var(--zg-green)}
|
|
28
28
|
.zg-inc{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:28px;max-width:440px}.zg-inc__ok{background:var(--zg-green);color:#fff;box-shadow:0 8px 24px color-mix(in oklch,var(--zg-green) 45%,transparent)}
|
|
29
|
-
.zg-dd{position:relative;display:inline-block}.zg-menu{position:absolute;z-index:40;inset-inline-start:0;top:calc(100% + 6px);min-width:220px;padding:6px;border-radius:20px;background:var(--zg-glass)
|
|
29
|
+
.zg-dd{position:relative;display:inline-block}.zg-menu{position:absolute;z-index:40;inset-inline-start:0;top:calc(100% + 6px);min-width:220px;padding:6px;border-radius:20px;background:var(--zg-glass);-webkit-backdrop-filter:blur(40px);backdrop-filter:blur(40px);box-shadow:var(--zg-rim),var(--zg-shadow-2);display:flex;flex-direction:column}
|
|
30
30
|
.zg-menu--static{position:static;display:inline-flex}.zg-menu__i{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:10px;min-height:40px;padding:0 12px;border-radius:14px;cursor:pointer;font:500 14px var(--zg-font);color:var(--zg-text-1)}
|
|
31
31
|
.zg-menu__i:hover{background:var(--zg-s2)}.zg-menu__i--danger{color:var(--zg-red)}.zg-menu__i .zg-kbd{margin-inline-start:auto}.zg-menu__sep{height:1px;margin:4px 8px;background:var(--zg-stroke)}
|
|
32
32
|
.zg-kbd{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:7px;font:600 11px var(--zg-font-mono);color:var(--zg-text-2);background:var(--zg-s2);box-shadow:var(--zg-rim),0 1px 0 var(--zg-stroke)}
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
.zg-link:hover{text-decoration-color:currentColor}.zg-link:focus-visible{outline:2px solid var(--zg-brand);outline-offset:2px}.zg-link--plain{text-decoration:none}
|
|
15
15
|
.zg-press{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:8px;border-radius:12px;-webkit-tap-highlight-color:transparent}
|
|
16
16
|
.zg-press:active{opacity:.7}.zg-press:focus-visible{outline:2px solid var(--zg-brand);outline-offset:2px}.zg-press[disabled]{opacity:.45;cursor:not-allowed}
|
|
17
|
-
.zg-liquid{position:relative;border-radius:var(--zg-liquid-r,24px);padding:20px;background:linear-gradient(135deg,color-mix(in oklch,var(--zg-text-1) 14%,transparent),color-mix(in oklch,var(--zg-text-1) 4%,transparent))
|
|
17
|
+
.zg-liquid{position:relative;border-radius:var(--zg-liquid-r,24px);padding:20px;background:linear-gradient(135deg,color-mix(in oklch,var(--zg-text-1) 14%,transparent),color-mix(in oklch,var(--zg-text-1) 4%,transparent));-webkit-backdrop-filter:blur(var(--zg-liquid-b,18px)) saturate(1.8);backdrop-filter:blur(var(--zg-liquid-b,18px)) saturate(1.8);box-shadow:inset 0 1px 0 color-mix(in oklch,var(--zg-text-1) 30%,transparent),inset 0 -1px 0 color-mix(in oklch,var(--zg-text-1) 8%,transparent),0 12px 32px oklch(0 0 0/.25);border:1px solid var(--zg-stroke);overflow:hidden}
|
|
18
18
|
.zg-sheet-scrim{align-items:flex-end;justify-content:center;padding:0}
|
|
19
19
|
.zg-sheet{width:min(560px,100%);display:flex;flex-direction:column;gap:12px;padding:10px 20px 20px;border-radius:28px 28px 0 0;background:var(--zg-s1);box-shadow:var(--zg-rim),var(--zg-shadow-1);overflow:auto;animation:zg-sheet-in .22s ease-out}
|
|
20
20
|
.zg-sheet__grab{align-self:center;width:40px;height:4px;border-radius:2px;background:var(--zg-stroke);flex:none;margin-block:2px 4px}
|
|
@@ -79,7 +79,7 @@
|
|
|
79
79
|
.zg-ash__proofT{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;margin-inline-start:10px}.zg-ash__proofT span{color:var(--zg-text-3);font-size:13px}
|
|
80
80
|
.zg-ash--light .zg-ash__grid>.zg-ash__media,.zg-ash--tint .zg-ash__grid>.zg-ash__media{border-radius:var(--ash-r);min-height:520px;display:flex;flex-direction:column;justify-content:flex-end;box-shadow:var(--zg-rim)}
|
|
81
81
|
.zg-ash__mh{position:absolute;inset-inline:0;top:0;margin:0;padding:clamp(20px,3vw,36px);font:400 clamp(24px,2.8vw,34px)/1.2 var(--zg-font);color:#fff;text-shadow:0 1px 16px rgb(0 0 0/.25)}
|
|
82
|
-
.zg-ash__glass{position:relative;margin:12px;padding:18px;border-radius:calc(var(--ash-r) - 8px);display:flex;flex-direction:column;gap:12px;background:color-mix(in oklch,var(--zg-bg) 38%,transparent)
|
|
82
|
+
.zg-ash__glass{position:relative;margin:12px;padding:18px;border-radius:calc(var(--ash-r) - 8px);display:flex;flex-direction:column;gap:12px;background:color-mix(in oklch,var(--zg-bg) 38%,transparent);-webkit-backdrop-filter:blur(22px) saturate(1.4);backdrop-filter:blur(22px) saturate(1.4);box-shadow:var(--zg-rim);color:var(--zg-text-1)}
|
|
83
83
|
.zg-ash__glass p{margin:0;color:var(--zg-text-2)}
|
|
84
84
|
.zg-ash__chips{display:flex;gap:10px;flex-wrap:wrap}
|
|
85
85
|
.zg-ash__chip{flex:1;text-align:center;padding:14px 18px;border-radius:999px;box-shadow:inset 0 0 0 1px color-mix(in oklch,var(--zg-text-1) 40%,transparent)}
|
package/src/styles/extras.css
CHANGED
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
.zg-avatar__st{position:absolute;inset-inline-end:0;bottom:0;width:max(8px,calc(var(--s)*.26));height:max(8px,calc(var(--s)*.26));border-radius:50%;background:var(--zg-text-3);box-shadow:0 0 0 2px var(--zg-bg)}
|
|
16
16
|
.zg-avatar__st--online{background:var(--zg-green)}.zg-avatar__st--away{background:var(--zg-amber)}.zg-avatar__st--busy{background:var(--zg-red)}
|
|
17
17
|
.zg-avatar--sky{background:var(--zg-sky);color:var(--zg-bg)}.zg-avatar--success{background:var(--zg-green);color:var(--zg-bg)}.zg-avatar--warning{background:var(--zg-amber);color:var(--zg-bg)}.zg-avatar--danger{background:var(--zg-red);color:var(--zg-bg)}.zg-avatar--neutral{background:var(--zg-s3);color:var(--zg-text-1)}
|
|
18
|
-
.zg-card.zg-card--outline{background:transparent
|
|
18
|
+
.zg-card.zg-card--outline{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:inset 0 0 0 1px var(--zg-stroke)}
|
|
19
19
|
.zg-card.zg-card--flush{padding:0}
|
|
20
20
|
.zg-card--click{cursor:pointer;transition:transform .2s var(--zg-ease)}.zg-card--click:hover{transform:translateY(-2px)}.zg-card--click:focus-visible{outline:2px solid var(--zg-brand);outline-offset:2px}
|
|
21
21
|
.zg-card__foot{display:flex;align-items:center;gap:8px;padding-top:14px;box-shadow:0 -1px 0 var(--zg-stroke)}
|
package/src/vue/index.js
CHANGED
|
@@ -38,7 +38,7 @@ export function defineUiComponents(defs, { override = false } = {}) {
|
|
|
38
38
|
|
|
39
39
|
export const { Button: UiButton, IconButton: UiIconButton, Badge: UiBadge, Avatar: UiAvatar, Switch: UiSwitch, Checkbox: UiCheckbox, SegmentedControl: UiSegmentedControl, Tabs: UiTabs, FilterChips: UiFilterChips, TextField: UiTextField, Select: UiSelect, CodeInput: UiCodeInput, Card: UiCard, Modal: UiModal, Drawer: UiDrawer, Toast: UiToast, Breadcrumbs: UiBreadcrumbs, Pagination: UiPagination, Progress: UiProgress, Ring: UiRing, KpiTile: UiKpiTile, DataTable: UiDataTable, Timeline: UiTimeline, TopNav: UiTopNav, SideNav: UiSideNav, AppShell: UiAppShell, PageHeader: UiPageHeader, AuthLayout: UiAuthLayout, Alert: UiAlert, Banner: UiBanner, Accordion: UiAccordion, Skeleton: UiSkeleton, Spinner: UiSpinner, Divider: UiDivider, EmptyState: UiEmptyState, ErrorPage: UiErrorPage, DataState: UiDataState, LoadingOverlay: UiLoadingOverlay, ConfirmDialog: UiConfirmDialog, Popconfirm: UiPopconfirm, Code: UiCode, Dropdown: UiDropdown, Menu: UiMenu, Tooltip: UiTooltip, Popover: UiPopover, CopyButton: UiCopyButton, CommandPalette: UiCommandPalette, ToggleGroup: UiToggleGroup, Textarea: UiTextarea, NumberInput: UiNumberInput, PasswordInput: UiPasswordInput, SearchInput: UiSearchInput, RadioGroup: UiRadioGroup, Slider: UiSlider, Rating: UiRating, FileUpload: UiFileUpload, Combobox: UiCombobox, MultiSelect: UiMultiSelect, PhoneInput: UiPhoneInput, Calendar: UiCalendar, DatePicker: UiDatePicker, TimePicker: UiTimePicker, FormField: UiFormField, LoginForm: UiLoginForm, Tag: UiTag, Kbd: UiKbd, StatsCard: UiStatsCard, MiniChart: UiMiniChart, Descriptions: UiDescriptions, LazyImage: UiLazyImage, SubNav: UiSubNav, SplitLayout: UiSplitLayout, SettingsSection: UiSettingsSection, ScrollArea: UiScrollArea, Chip: UiChip, IconTile: UiIconTile, StatusIcon: UiStatusIcon, PillTabs: UiPillTabs, Snackbar: UiSnackbar, AuthSplit: UiAuthSplit, SocialAuth: UiSocialAuth, StatusPage: UiStatusPage, Footer: UiFooter, PageDashboard: UiPageDashboard, PageSettings: UiPageSettings, PageUserList: UiPageUserList, PagePricing: UiPagePricing, PageAuth: UiPageAuth, PageStatus: UiPageStatus, ContextMenu: UiContextMenu, Heading: UiHeading, Text: UiText, Box: UiBox, Center: UiCenter, HStack: UiHStack, VStack: UiVStack, Grid: UiGrid, Link: UiLink, Pressable: UiPressable, Icon: UiIcon, Portal: UiPortal, BottomSheet: UiBottomSheet } = C;
|
|
40
40
|
export const install = app => { for (const [n, c] of Object.entries(C)) app.component('Ui' + n, c); };
|
|
41
|
-
export { fmt, setIconBase, rules } from '../core/index.js';
|
|
41
|
+
export { fmt, setIconBase, registerIcons, rules } from '../core/index.js';
|
|
42
42
|
export { useUiTheme } from '../theme.js';
|
|
43
43
|
export default { install };
|
|
44
44
|
export { LOCALES, setUiLocale, getUiLocale, setUiMessages, isRtlLocale } from '../core/index.js';
|
package/types/core.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
// Core (framework-neutral) entry. Most apps import from '@ziyarago/ui/vue' or '@ziyarago/ui/react' instead.
|
|
2
|
-
export { rules, setIconBase, fmt } from './shared';
|
|
2
|
+
export { rules, setIconBase, registerIcons, fmt } from './shared';
|
|
3
3
|
export type * from './shared';
|
|
4
4
|
export interface ComponentDefinition { state?: Record<string, unknown>; slots?: string[]; render: (ctx: any) => unknown }
|
|
5
5
|
/** Extension API for add-on packages: adds definitions to the shared registry. Throws on a name clash with a different definition unless { override: true }. */
|
package/types/react.d.ts
CHANGED
|
@@ -1571,6 +1571,26 @@ export interface UiLoginFormProps {
|
|
|
1571
1571
|
* @default true
|
|
1572
1572
|
*/
|
|
1573
1573
|
showForgot?: boolean;
|
|
1574
|
+
/**
|
|
1575
|
+
* Type of the login field: use "email" or "tel" to get the matching mobile keyboard and browser validation.
|
|
1576
|
+
* @default 'text'
|
|
1577
|
+
*/
|
|
1578
|
+
emailType?: 'text' | 'email' | 'tel';
|
|
1579
|
+
/**
|
|
1580
|
+
* Native name of the login field; the password field uses passwordName (default "password"). Both fields get autocomplete "username" and "current-password" so password managers fill them.
|
|
1581
|
+
* @default 'email'
|
|
1582
|
+
*/
|
|
1583
|
+
emailName?: string;
|
|
1584
|
+
/**
|
|
1585
|
+
* Native name of the password field.
|
|
1586
|
+
* @default 'password'
|
|
1587
|
+
*/
|
|
1588
|
+
passwordName?: string;
|
|
1589
|
+
/**
|
|
1590
|
+
* Marks both fields required (native validation).
|
|
1591
|
+
* @default false
|
|
1592
|
+
*/
|
|
1593
|
+
required?: boolean;
|
|
1574
1594
|
/**
|
|
1575
1595
|
* Show the "Remember device" checkbox. Hide it when your backend has no such option; the submit payload then keeps remember: true.
|
|
1576
1596
|
* @default true
|
|
@@ -1582,10 +1602,10 @@ export interface UiLoginFormProps {
|
|
|
1582
1602
|
*/
|
|
1583
1603
|
submitLabel?: string;
|
|
1584
1604
|
/**
|
|
1585
|
-
* Texts of the form; any missing key keeps its English default.
|
|
1605
|
+
* Texts of the form; any missing key keeps its English default (the two placeholders default to none).
|
|
1586
1606
|
* @default { email: 'Email or phone', password: 'Password', remember: 'Remember device', forgot: 'Forgot password?', submit: 'Sign in' }
|
|
1587
1607
|
*/
|
|
1588
|
-
labels?: { email?: string; password?: string; remember?: string; forgot?: string; submit?: string };
|
|
1608
|
+
labels?: { email?: string; password?: string; emailPlaceholder?: string; passwordPlaceholder?: string; remember?: string; forgot?: string; submit?: string };
|
|
1589
1609
|
/**
|
|
1590
1610
|
* Control height, font and padding scale.
|
|
1591
1611
|
* @default 'md'
|
|
@@ -3731,6 +3751,6 @@ export const UiVStack: ComponentType<UiVStackProps>;
|
|
|
3731
3751
|
|
|
3732
3752
|
export const rules: typeof import('./shared').rules;
|
|
3733
3753
|
export { useUiTheme } from './theme';
|
|
3734
|
-
export { fmt, setIconBase } from './shared';
|
|
3754
|
+
export { fmt, setIconBase, registerIcons } from './shared';
|
|
3735
3755
|
/** Extension API: wraps plugin component definitions like the built-in ones, registers them (C.Name cross references work) and returns { UiName: Component }. */
|
|
3736
3756
|
export function defineUiComponents(defs: Record<string, import('./core').ComponentDefinition>, options?: { override?: boolean }): Record<string, ComponentType<any>>;
|
package/types/shared.d.ts
CHANGED
|
@@ -15,4 +15,6 @@ export interface SelectProps { label?: string; options: { value: string | number
|
|
|
15
15
|
export type Rule = (value: any) => true | string;
|
|
16
16
|
export const rules: { required(): Rule; email(): Rule; url(): Rule; digits(n: number): Rule; alpha(): Rule; alphaDash(): Rule; minLength(n: number): Rule; maxLength(n: number): Rule; range(a: number, b: number): Rule; regex(re: RegExp, msg?: string): Rule; confirmed(get: () => unknown): Rule; password(): Rule };
|
|
17
17
|
export function setIconBase(base: string): void;
|
|
18
|
+
/** Add or replace icons by name with inline SVG strings. They win over the built-in set and the CDN. */
|
|
19
|
+
export function registerIcons(icons: Record<string, string>): void;
|
|
18
20
|
export const fmt: { sar(n: number): string; num(n: number): string; dur(seconds: number): string };
|
package/types/vue.d.ts
CHANGED
|
@@ -1642,6 +1642,26 @@ export interface UiLoginFormProps {
|
|
|
1642
1642
|
* @default true
|
|
1643
1643
|
*/
|
|
1644
1644
|
showForgot?: boolean;
|
|
1645
|
+
/**
|
|
1646
|
+
* Type of the login field: use "email" or "tel" to get the matching mobile keyboard and browser validation.
|
|
1647
|
+
* @default 'text'
|
|
1648
|
+
*/
|
|
1649
|
+
emailType?: 'text' | 'email' | 'tel';
|
|
1650
|
+
/**
|
|
1651
|
+
* Native name of the login field; the password field uses passwordName (default "password"). Both fields get autocomplete "username" and "current-password" so password managers fill them.
|
|
1652
|
+
* @default 'email'
|
|
1653
|
+
*/
|
|
1654
|
+
emailName?: string;
|
|
1655
|
+
/**
|
|
1656
|
+
* Native name of the password field.
|
|
1657
|
+
* @default 'password'
|
|
1658
|
+
*/
|
|
1659
|
+
passwordName?: string;
|
|
1660
|
+
/**
|
|
1661
|
+
* Marks both fields required (native validation).
|
|
1662
|
+
* @default false
|
|
1663
|
+
*/
|
|
1664
|
+
required?: boolean;
|
|
1645
1665
|
/**
|
|
1646
1666
|
* Show the "Remember device" checkbox. Hide it when your backend has no such option; the submit payload then keeps remember: true.
|
|
1647
1667
|
* @default true
|
|
@@ -1653,10 +1673,10 @@ export interface UiLoginFormProps {
|
|
|
1653
1673
|
*/
|
|
1654
1674
|
submitLabel?: string;
|
|
1655
1675
|
/**
|
|
1656
|
-
* Texts of the form; any missing key keeps its English default.
|
|
1676
|
+
* Texts of the form; any missing key keeps its English default (the two placeholders default to none).
|
|
1657
1677
|
* @default { email: 'Email or phone', password: 'Password', remember: 'Remember device', forgot: 'Forgot password?', submit: 'Sign in' }
|
|
1658
1678
|
*/
|
|
1659
|
-
labels?: { email?: string; password?: string; remember?: string; forgot?: string; submit?: string };
|
|
1679
|
+
labels?: { email?: string; password?: string; emailPlaceholder?: string; passwordPlaceholder?: string; remember?: string; forgot?: string; submit?: string };
|
|
1660
1680
|
/**
|
|
1661
1681
|
* Control height, font and padding scale.
|
|
1662
1682
|
* @default 'md'
|
|
@@ -3769,4 +3789,4 @@ export function defineUiComponents(defs: Record<string, import('./core').Compone
|
|
|
3769
3789
|
declare const _default: { install: typeof install };
|
|
3770
3790
|
export default _default;
|
|
3771
3791
|
export { useUiTheme } from './theme';
|
|
3772
|
-
export { fmt, setIconBase } from './shared';
|
|
3792
|
+
export { fmt, setIconBase, registerIcons } from './shared';
|