@ziyarago/ui 0.0.0-stage → 0.1.0

package/src/styles/sizes/layout.css

@@ -0,0 +1,15 @@
+/* size overrides for the layout group. Only [data-size] selectors, see the size scale at the end of tokens.css */
+.zg-div[data-size="xs"]{font-size:10px;gap:8px}.zg-div[data-size="sm"]{font-size:11px;gap:10px}.zg-div[data-size="lg"]{font-size:13px;gap:14px}.zg-div[data-size="xl"]{font-size:15px;gap:16px}
+.zg-setsec[data-size="xs"]{padding:10px 0;gap:12px}.zg-setsec[data-size="sm"]{padding:14px 0;gap:16px}.zg-setsec[data-size="lg"]{padding:26px 0;gap:32px}.zg-setsec[data-size="xl"]{padding:34px 0;gap:40px}
+.zg-setsec[data-size="xs"] b{font-size:13px!important}.zg-setsec[data-size="sm"] b{font-size:14px!important}.zg-setsec[data-size="lg"] b{font-size:18px!important}.zg-setsec[data-size="xl"] b{font-size:21px!important}
+.zg-setsec[data-size="xs"] .zg-hint{font-size:11px!important}.zg-setsec[data-size="sm"] .zg-hint{font-size:12px!important}.zg-setsec[data-size="lg"] .zg-hint{font-size:14px!important}.zg-setsec[data-size="xl"] .zg-hint{font-size:15px!important}
+.zg-setsec[data-size="xs"]>.zg-field{gap:8px!important}.zg-setsec[data-size="sm"]>.zg-field{gap:10px!important}.zg-setsec[data-size="lg"]>.zg-field{gap:18px!important}.zg-setsec[data-size="xl"]>.zg-field{gap:22px!important}
+.zg-page-head[data-size="xs"] h1{font-size:20px}.zg-page-head[data-size="sm"] h1{font-size:24px}.zg-page-head[data-size="lg"] h1{font-size:clamp(32px,3.6vw,48px)}.zg-page-head[data-size="xl"] h1{font-size:clamp(38px,4.4vw,58px)}
+.zg-page-head[data-size="xs"] p{font-size:12px}.zg-page-head[data-size="sm"] p{font-size:13px}.zg-page-head[data-size="lg"] p{font-size:17px}.zg-page-head[data-size="xl"] p{font-size:19px}
+.zg-page-head[data-size="xs"]{gap:8px}.zg-page-head[data-size="sm"]{gap:12px}.zg-page-head[data-size="lg"]{gap:20px}.zg-page-head[data-size="xl"]{gap:24px}
+.zg-liquid[data-size="xs"]{padding:8px}.zg-liquid[data-size="sm"]{padding:12px}.zg-liquid[data-size="lg"]{padding:28px}.zg-liquid[data-size="xl"]{padding:36px}
+.zg-foot[data-size="xs"]{padding:8px 4px;gap:8px}.zg-foot[data-size="sm"]{padding:12px 4px;gap:12px}.zg-foot[data-size="lg"]{padding:24px 4px;gap:20px}.zg-foot[data-size="xl"]{padding:32px 4px;gap:24px}
+.zg-foot[data-size="xs"] span,.zg-foot[data-size="xs"] a{font-size:11px!important}.zg-foot[data-size="sm"] span,.zg-foot[data-size="sm"] a{font-size:12px!important}.zg-foot[data-size="lg"] span,.zg-foot[data-size="lg"] a{font-size:15px!important}.zg-foot[data-size="xl"] span,.zg-foot[data-size="xl"] a{font-size:17px!important}
+.zg-sort[data-size="xs"]{gap:4px;font-size:.8em}.zg-sort[data-size="sm"]{gap:5px;font-size:.9em}.zg-sort[data-size="lg"]{gap:8px;font-size:1.1em}.zg-sort[data-size="xl"]{gap:10px;font-size:1.25em}
+.zg-sort[data-size="xs"] .zg-sort__i{padding:3px 4px 3px 8px;gap:6px;border-radius:10px}.zg-sort[data-size="sm"] .zg-sort__i{padding:5px 6px 5px 10px;gap:8px;border-radius:13px}
+.zg-sort[data-size="lg"] .zg-sort__i{padding:11px 11px 11px 15px;gap:12px}.zg-sort[data-size="xl"] .zg-sort__i{padding:14px 14px 14px 18px;gap:14px}

package/src/styles/sizes/media.css

@@ -0,0 +1,28 @@
+/* size overrides for the media group. Only [data-size] selectors, see the size scale at the end of tokens.css */
+/* Gallery: thumbnails */
+.zg-gal[data-size="xs"] .zg-gal__t{gap:4px}
+.zg-gal[data-size="sm"] .zg-gal__t{gap:6px}
+.zg-gal[data-size="md"] .zg-gal__t{gap:8px}
+.zg-gal[data-size="lg"] .zg-gal__t{gap:10px}
+.zg-gal[data-size="xl"] .zg-gal__t{gap:12px}
+.zg-gal[data-size="xs"] .zg-gal__t button{width:48px;border-radius:8px}
+.zg-gal[data-size="sm"] .zg-gal__t button{width:64px;border-radius:10px}
+.zg-gal[data-size="md"] .zg-gal__t button{width:84px;border-radius:16px}
+.zg-gal[data-size="lg"] .zg-gal__t button{width:112px;border-radius:18px}
+.zg-gal[data-size="xl"] .zg-gal__t button{width:144px;border-radius:20px}
+/* Carousel: slide height and caption */
+.zg-car[data-size="xs"]{aspect-ratio:16/6}
+.zg-car[data-size="sm"]{aspect-ratio:16/7}
+.zg-car[data-size="md"]{aspect-ratio:16/8}
+.zg-car[data-size="lg"]{aspect-ratio:16/9}
+.zg-car[data-size="xl"]{aspect-ratio:16/10}
+.zg-car[data-size="xs"] .zg-car__c{padding:28px 12px 14px;font-size:11px}
+.zg-car[data-size="sm"] .zg-car__c{padding:36px 16px 16px;font-size:12px}
+.zg-car[data-size="md"] .zg-car__c{padding:44px 20px 18px;font-size:14px}
+.zg-car[data-size="lg"] .zg-car__c{padding:52px 24px 22px;font-size:16px}
+.zg-car[data-size="xl"] .zg-car__c{padding:60px 28px 26px;font-size:18px}
+/* bug fix: .zg-ibtn{position:relative} overrides the absolute arrows */
+.zg-car>.zg-car__p,.zg-car>.zg-car__n{position:absolute}
+.zg-car[data-size]{width:100%}
+.zg-car[data-size] .zg-car__s{aspect-ratio:auto;height:100%}
+.zg-gal[data-size]{flex:none;width:100%}

package/src/styles/sizes/navigation.css

@@ -0,0 +1,146 @@
+/* size overrides for the navigation group. Only [data-size] selectors, see the size scale at the end of tokens.css */
+.zg-topnav[data-size="xs"]{padding-block:6px;gap:8px}
+.zg-topnav[data-size="sm"]{padding-block:8px;gap:10px}
+.zg-topnav[data-size="md"]{padding-block:10px;gap:12px}
+.zg-topnav[data-size="lg"]{padding-block:14px;gap:14px}
+.zg-topnav[data-size="xl"]{padding-block:18px;gap:16px}
+.zg-topnav[data-size="xs"] .zg-topnav__brand{font-size:13px}
+.zg-topnav[data-size="sm"] .zg-topnav__brand{font-size:15px}
+.zg-topnav[data-size="md"] .zg-topnav__brand{font-size:18px}
+.zg-topnav[data-size="lg"] .zg-topnav__brand{font-size:21px}
+.zg-topnav[data-size="xl"] .zg-topnav__brand{font-size:24px}
+.zg-topnav[data-size="xs"] .zg-navitem{height:28px;font-size:12px;padding-inline:8px}
+.zg-topnav[data-size="sm"] .zg-navitem{height:32px;font-size:13px;padding-inline:10px}
+.zg-topnav[data-size="md"] .zg-navitem{height:40px;font-size:14px;padding-inline:12px}
+.zg-topnav[data-size="lg"] .zg-navitem{height:48px;font-size:15px;padding-inline:16px}
+.zg-topnav[data-size="xl"] .zg-navitem{height:56px;font-size:16px;padding-inline:20px}
+.zg-topnav[data-size="xs"] .zg-icon{width:14px!important;height:14px!important}
+.zg-topnav[data-size="sm"] .zg-icon{width:16px!important;height:16px!important}
+.zg-topnav[data-size="md"] .zg-icon{width:18px!important;height:18px!important}
+.zg-topnav[data-size="lg"] .zg-icon{width:20px!important;height:20px!important}
+.zg-topnav[data-size="xl"] .zg-icon{width:22px!important;height:22px!important}
+.zg-sidenav[data-size="xs"]{--w:216px;padding:10px 10px}
+.zg-sidenav[data-size="sm"]{--w:240px;padding:12px 10px}
+.zg-sidenav[data-size="md"]{--w:272px;padding:16px 12px}
+.zg-sidenav[data-size="lg"]{--w:304px;padding:18px 14px}
+.zg-sidenav[data-size="xl"]{--w:336px;padding:20px 16px}
+.zg-sidenav[data-size="xs"].zg-sidenav--collapsed{--w:56px}
+.zg-sidenav[data-size="sm"].zg-sidenav--collapsed{--w:64px}
+.zg-sidenav[data-size="md"].zg-sidenav--collapsed{--w:76px}
+.zg-sidenav[data-size="lg"].zg-sidenav--collapsed{--w:88px}
+.zg-sidenav[data-size="xl"].zg-sidenav--collapsed{--w:100px}
+.zg-sidenav[data-size="xs"] .zg-navitem{height:34px;font-size:12px;padding-inline:10px}
+.zg-sidenav[data-size="sm"] .zg-navitem{height:40px;font-size:13px;padding-inline:12px}
+.zg-sidenav[data-size="md"] .zg-navitem{height:46px;font-size:14px;padding-inline:14px}
+.zg-sidenav[data-size="lg"] .zg-navitem{height:54px;font-size:15px;padding-inline:16px}
+.zg-sidenav[data-size="xl"] .zg-navitem{height:62px;font-size:16px;padding-inline:18px}
+.zg-sidenav[data-size="xs"] .zg-sidenav--collapsed .zg-navitem,.zg-sidenav[data-size="xs"].zg-sidenav--collapsed .zg-navitem{padding:0}
+.zg-sidenav[data-size="sm"] .zg-sidenav--collapsed .zg-navitem,.zg-sidenav[data-size="sm"].zg-sidenav--collapsed .zg-navitem{padding:0}
+.zg-sidenav[data-size="md"] .zg-sidenav--collapsed .zg-navitem,.zg-sidenav[data-size="md"].zg-sidenav--collapsed .zg-navitem{padding:0}
+.zg-sidenav[data-size="lg"] .zg-sidenav--collapsed .zg-navitem,.zg-sidenav[data-size="lg"].zg-sidenav--collapsed .zg-navitem{padding:0}
+.zg-sidenav[data-size="xl"] .zg-sidenav--collapsed .zg-navitem,.zg-sidenav[data-size="xl"].zg-sidenav--collapsed .zg-navitem{padding:0}
+.zg-sidenav[data-size="xs"] .zg-icon{width:14px!important;height:14px!important}
+.zg-sidenav[data-size="sm"] .zg-icon{width:16px!important;height:16px!important}
+.zg-sidenav[data-size="md"] .zg-icon{width:18px!important;height:18px!important}
+.zg-sidenav[data-size="lg"] .zg-icon{width:20px!important;height:20px!important}
+.zg-sidenav[data-size="xl"] .zg-icon{width:22px!important;height:22px!important}
+.zg-sidenav[data-size="xs"] .zg-sidenav__brand{font-size:13px}
+.zg-sidenav[data-size="sm"] .zg-sidenav__brand{font-size:15px}
+.zg-sidenav[data-size="md"] .zg-sidenav__brand{font-size:18px}
+.zg-sidenav[data-size="lg"] .zg-sidenav__brand{font-size:21px}
+.zg-sidenav[data-size="xl"] .zg-sidenav__brand{font-size:24px}
+.zg-sidenav[data-size="xs"] .zg-sidenav__group{font-size:9px}
+.zg-sidenav[data-size="sm"] .zg-sidenav__group{font-size:10px}
+.zg-sidenav[data-size="md"] .zg-sidenav__group{font-size:11px}
+.zg-sidenav[data-size="lg"] .zg-sidenav__group{font-size:12px}
+.zg-sidenav[data-size="xl"] .zg-sidenav__group{font-size:13px}
+.zg-subnav[data-size="xs"]{min-width:180px;gap:1px}
+.zg-subnav[data-size="sm"]{min-width:200px;gap:2px}
+.zg-subnav[data-size="md"]{min-width:220px;gap:2px}
+.zg-subnav[data-size="lg"]{min-width:250px;gap:3px}
+.zg-subnav[data-size="xl"]{min-width:280px;gap:4px}
+.zg-subnav[data-size="xs"] .zg-navitem{height:32px;font-size:12px;padding-inline:10px;border-radius:11px}
+.zg-subnav[data-size="sm"] .zg-navitem{height:36px;font-size:13px;padding-inline:12px;border-radius:12px}
+.zg-subnav[data-size="md"] .zg-navitem{height:42px;font-size:14px;padding-inline:14px;border-radius:14px}
+.zg-subnav[data-size="lg"] .zg-navitem{height:50px;font-size:15px;padding-inline:16px;border-radius:17px}
+.zg-subnav[data-size="xl"] .zg-navitem{height:58px;font-size:16px;padding-inline:18px;border-radius:19px}
+.zg-subnav[data-size="xs"] .zg-icon{width:14px!important;height:14px!important}
+.zg-subnav[data-size="sm"] .zg-icon{width:16px!important;height:16px!important}
+.zg-subnav[data-size="md"] .zg-icon{width:16px!important;height:16px!important}
+.zg-subnav[data-size="lg"] .zg-icon{width:18px!important;height:18px!important}
+.zg-subnav[data-size="xl"] .zg-icon{width:20px!important;height:20px!important}
+.zg-subnav[data-size="xs"] .zg-sidenav__group{font-size:9px}
+.zg-subnav[data-size="sm"] .zg-sidenav__group{font-size:10px}
+.zg-subnav[data-size="md"] .zg-sidenav__group{font-size:11px}
+.zg-subnav[data-size="lg"] .zg-sidenav__group{font-size:12px}
+.zg-subnav[data-size="xl"] .zg-sidenav__group{font-size:13px}
+.zg-tabs[data-size="xs"]{gap:2px}
+.zg-tabs[data-size="sm"]{gap:3px}
+.zg-tabs[data-size="md"]{gap:4px}
+.zg-tabs[data-size="lg"]{gap:6px}
+.zg-tabs[data-size="xl"]{gap:8px}
+.zg-tabs[data-size="xs"] button{height:32px;font-size:12px;padding:0 10px}
+.zg-tabs[data-size="sm"] button{height:38px;font-size:13px;padding:0 12px}
+.zg-tabs[data-size="md"] button{height:44px;font-size:14px;padding:0 16px}
+.zg-tabs[data-size="lg"] button{height:52px;font-size:15px;padding:0 20px}
+.zg-tabs[data-size="xl"] button{height:60px;font-size:16px;padding:0 24px}
+.zg-tabs[data-size="xs"] button[aria-selected="true"]::after{inset-inline:8px;height:2px}
+.zg-tabs[data-size="sm"] button[aria-selected="true"]::after{inset-inline:10px;height:2px}
+.zg-tabs[data-size="md"] button[aria-selected="true"]::after{inset-inline:12px;height:3px}
+.zg-tabs[data-size="lg"] button[aria-selected="true"]::after{inset-inline:14px;height:3px}
+.zg-tabs[data-size="xl"] button[aria-selected="true"]::after{inset-inline:16px;height:4px}
+.zg-pt[data-size="xs"]{gap:3px}
+.zg-pt[data-size="sm"]{gap:4px}
+.zg-pt[data-size="md"]{gap:6px}
+.zg-pt[data-size="lg"]{gap:8px}
+.zg-pt[data-size="xl"]{gap:10px}
+.zg-pt[data-size="xs"] button{height:28px;font-size:12px;padding:0 10px;gap:6px}
+.zg-pt[data-size="sm"] button{height:32px;font-size:13px;padding:0 12px;gap:6px}
+.zg-pt[data-size="md"] button{height:38px;font-size:15px;padding:0 18px;gap:8px}
+.zg-pt[data-size="lg"] button{height:46px;font-size:16px;padding:0 22px;gap:10px}
+.zg-pt[data-size="xl"] button{height:54px;font-size:18px;padding:0 26px;gap:12px}
+.zg-pt[data-size="xs"] .zg-icon{width:14px!important;height:14px!important}
+.zg-pt[data-size="sm"] .zg-icon{width:16px!important;height:16px!important}
+.zg-pt[data-size="md"] .zg-icon{width:16px!important;height:16px!important}
+.zg-pt[data-size="lg"] .zg-icon{width:18px!important;height:18px!important}
+.zg-pt[data-size="xl"] .zg-icon{width:20px!important;height:20px!important}
+.zg-crumbs[data-size="xs"]{font-size:11px;gap:4px}
+.zg-crumbs[data-size="sm"]{font-size:12px;gap:6px}
+.zg-crumbs[data-size="md"]{font-size:13px;gap:8px}
+.zg-crumbs[data-size="lg"]{font-size:15px;gap:10px}
+.zg-crumbs[data-size="xl"]{font-size:17px;gap:12px}
+.zg-crumbs[data-size="xs"] .zg-icon{width:10px!important;height:10px!important}
+.zg-crumbs[data-size="sm"] .zg-icon{width:12px!important;height:12px!important}
+.zg-crumbs[data-size="md"] .zg-icon{width:14px!important;height:14px!important}
+.zg-crumbs[data-size="lg"] .zg-icon{width:16px!important;height:16px!important}
+.zg-crumbs[data-size="xl"] .zg-icon{width:18px!important;height:18px!important}
+.zg-pager[data-size="xs"]{gap:2px}
+.zg-pager[data-size="sm"]{gap:3px}
+.zg-pager[data-size="md"]{gap:4px}
+.zg-pager[data-size="lg"]{gap:6px}
+.zg-pager[data-size="xl"]{gap:8px}
+.zg-pager[data-size="xs"] button{min-width:26px;height:26px;font-size:11px}
+.zg-pager[data-size="sm"] button{min-width:30px;height:30px;font-size:12px}
+.zg-pager[data-size="md"] button{min-width:36px;height:36px;font-size:13px}
+.zg-pager[data-size="lg"] button{min-width:44px;height:44px;font-size:15px}
+.zg-pager[data-size="xl"] button{min-width:52px;height:52px;font-size:17px}
+.zg-acc[data-size="xs"]{padding:4px;border-radius:16px}
+.zg-acc[data-size="sm"]{padding:5px;border-radius:20px}
+.zg-acc[data-size="md"]{padding:6px;border-radius:24px}
+.zg-acc[data-size="lg"]{padding:8px;border-radius:28px}
+.zg-acc[data-size="xl"]{padding:10px;border-radius:32px}
+.zg-acc[data-size="xs"] .zg-acc__h{min-height:36px;font-size:12px;padding:0 12px}
+.zg-acc[data-size="sm"] .zg-acc__h{min-height:44px;font-size:13px;padding:0 14px}
+.zg-acc[data-size="md"] .zg-acc__h{min-height:52px;font-size:15px;padding:0 16px}
+.zg-acc[data-size="lg"] .zg-acc__h{min-height:60px;font-size:16px;padding:0 20px}
+.zg-acc[data-size="xl"] .zg-acc__h{min-height:68px;font-size:18px;padding:0 24px}
+.zg-acc[data-size="xs"] .zg-acc__b{font-size:12px;padding:0 12px 12px}
+.zg-acc[data-size="sm"] .zg-acc__b{font-size:13px;padding:0 14px 12px}
+.zg-acc[data-size="md"] .zg-acc__b{font-size:14px;padding:0 16px 16px}
+.zg-acc[data-size="lg"] .zg-acc__b{font-size:15px;padding:0 20px 18px}
+.zg-acc[data-size="xl"] .zg-acc__b{font-size:16px;padding:0 24px 20px}
+.zg-acc[data-size="xs"] .zg-icon{width:12px!important;height:12px!important}
+.zg-acc[data-size="sm"] .zg-icon{width:14px!important;height:14px!important}
+.zg-acc[data-size="md"] .zg-icon{width:16px!important;height:16px!important}
+.zg-acc[data-size="lg"] .zg-icon{width:18px!important;height:18px!important}
+.zg-acc[data-size="xl"] .zg-icon{width:20px!important;height:20px!important}

package/src/styles/sizes/overlay.css

@@ -0,0 +1,79 @@
+/* size overrides for the overlay group. Only [data-size] selectors, see the size scale at the end of tokens.css */
+
+/* Modal / ConfirmDialog: data-size lands on the scrim */
+.zg-modal-scrim[data-size="xs"]{--m-w:320px;--m-hp:14px 16px 12px;--m-bp:16px;--m-fp:10px 16px 14px;--m-t:15px;--m-f:13px;--m-g:12px}
+.zg-modal-scrim[data-size="sm"]{--m-w:420px;--m-hp:16px 18px 14px;--m-bp:18px;--m-fp:12px 18px 16px;--m-t:17px;--m-f:14px;--m-g:14px}
+.zg-modal-scrim[data-size="md"]{--m-w:520px;--m-hp:20px 20px 16px;--m-bp:20px;--m-fp:14px 20px 18px;--m-t:18px;--m-f:14px;--m-g:16px}
+.zg-modal-scrim[data-size="lg"]{--m-w:640px;--m-hp:24px 26px 18px;--m-bp:26px;--m-fp:16px 26px 22px;--m-t:20px;--m-f:15px;--m-g:18px}
+.zg-modal-scrim[data-size="xl"]{--m-w:720px;--m-hp:28px 32px 20px;--m-bp:32px;--m-fp:18px 32px 26px;--m-t:22px;--m-f:16px;--m-g:20px}
+.zg-modal-scrim[data-size]:not(.zg-drawer-scrim):not(.zg-sheet-scrim) .zg-modal:not(.zg-stepdlg){max-width:var(--m-w)}
+.zg-modal-scrim[data-size] .zg-modal__head{padding:var(--m-hp)}
+.zg-modal-scrim[data-size] .zg-modal__head h3{font-size:var(--m-t)}
+.zg-modal-scrim[data-size] .zg-modal__body{padding:var(--m-bp);gap:var(--m-g);font-size:var(--m-f)}
+.zg-modal-scrim[data-size] .zg-modal__foot{padding:var(--m-fp)}
+
+/* StepDialog */
+.zg-modal-scrim[data-size="xs"] .zg-stepdlg{max-width:640px;min-height:320px}
+.zg-modal-scrim[data-size="sm"] .zg-stepdlg{max-width:740px;min-height:380px}
+.zg-modal-scrim[data-size="md"] .zg-stepdlg{max-width:860px;min-height:420px}
+.zg-modal-scrim[data-size="lg"] .zg-stepdlg{max-width:980px;min-height:480px}
+.zg-modal-scrim[data-size="xl"] .zg-stepdlg{max-width:1100px;min-height:540px}
+
+/* Drawer */
+.zg-drawer-scrim[data-size="xs"] .zg-drawer{width:min(280px,100%)}
+.zg-drawer-scrim[data-size="sm"] .zg-drawer{width:min(340px,100%)}
+.zg-drawer-scrim[data-size="md"] .zg-drawer{width:min(420px,100%)}
+.zg-drawer-scrim[data-size="lg"] .zg-drawer{width:min(520px,100%)}
+.zg-drawer-scrim[data-size="xl"] .zg-drawer{width:min(640px,100%)}
+
+/* BottomSheet / Actionsheet */
+.zg-sheet-scrim[data-size="xs"] .zg-sheet{width:min(360px,100%);padding:8px 14px 14px;gap:8px}
+.zg-sheet-scrim[data-size="sm"] .zg-sheet{width:min(460px,100%);padding:9px 16px 16px;gap:10px}
+.zg-sheet-scrim[data-size="lg"] .zg-sheet{width:min(680px,100%);padding:12px 24px 24px;gap:14px}
+.zg-sheet-scrim[data-size="xl"] .zg-sheet{width:min(800px,100%);padding:14px 28px 28px;gap:16px}
+.zg-sheet-scrim[data-size="xs"] .zg-sheet__t{font-size:15px}
+.zg-sheet-scrim[data-size="sm"] .zg-sheet__t{font-size:16px}
+.zg-sheet-scrim[data-size="lg"] .zg-sheet__t{font-size:20px}
+.zg-sheet-scrim[data-size="xl"] .zg-sheet__t{font-size:22px}
+
+/* CommandPalette: width is an inline style, so !important is required */
+.zg-modal-scrim[data-size="xs"] .zg-modal[aria-label="Command palette"]{max-width:400px!important}
+.zg-modal-scrim[data-size="sm"] .zg-modal[aria-label="Command palette"]{max-width:480px!important}
+.zg-modal-scrim[data-size="lg"] .zg-modal[aria-label="Command palette"]{max-width:640px!important}
+.zg-modal-scrim[data-size="xl"] .zg-modal[aria-label="Command palette"]{max-width:720px!important}
+
+/* Menu / Dropdown / ContextMenu / Popover / Popconfirm: data-size on the wrapper (.zg-dd, .zg-ctx) or on the static .zg-menu */
+:is(.zg-dd,.zg-ctx,.zg-menu)[data-size="xs"]{--u-h:28px;--u-px:8px;--u-g:6px;--u-f:12px;--u-r:10px;--u-mw:160px;--u-pp:10px;--u-pg:8px;--u-pw:200px;--u-pf:12px}
+:is(.zg-dd,.zg-ctx,.zg-menu)[data-size="sm"]{--u-h:32px;--u-px:10px;--u-g:8px;--u-f:13px;--u-r:12px;--u-mw:190px;--u-pp:12px;--u-pg:10px;--u-pw:220px;--u-pf:13px}
+:is(.zg-dd,.zg-ctx,.zg-menu)[data-size="md"]{--u-h:40px;--u-px:12px;--u-g:10px;--u-f:14px;--u-r:14px;--u-mw:220px;--u-pp:14px;--u-pg:12px;--u-pw:240px;--u-pf:14px}
+:is(.zg-dd,.zg-ctx,.zg-menu)[data-size="lg"]{--u-h:48px;--u-px:16px;--u-g:12px;--u-f:15px;--u-r:16px;--u-mw:260px;--u-pp:18px;--u-pg:14px;--u-pw:280px;--u-pf:15px}
+:is(.zg-dd,.zg-ctx,.zg-menu)[data-size="xl"]{--u-h:56px;--u-px:20px;--u-g:14px;--u-f:16px;--u-r:18px;--u-mw:300px;--u-pp:22px;--u-pg:16px;--u-pw:320px;--u-pf:16px}
+:is(.zg-dd,.zg-ctx,.zg-menu)[data-size] .zg-menu__i{min-height:var(--u-h);padding:0 var(--u-px);gap:var(--u-g);font-size:var(--u-f);border-radius:var(--u-r)}
+:is(.zg-dd,.zg-ctx)[data-size] .zg-menu{min-width:var(--u-mw)}
+.zg-menu[data-size]{min-width:var(--u-mw)}
+:is(.zg-dd,.zg-ctx)[data-size] .zg-menu__i svg{width:calc(var(--u-f) + 2px);height:calc(var(--u-f) + 2px)}
+.zg-dd[data-size] .zg-pop{min-width:var(--u-pw);padding:var(--u-pp);gap:var(--u-pg);font-size:var(--u-pf)}
+.zg-dd[data-size] .zg-pop b{font-size:var(--u-pf)!important}
+.zg-dd[data-size]>.zg-btn{height:var(--zg-sz-h);font-size:var(--zg-sz-fs);padding-inline:var(--zg-sz-px)}
+
+/* Tooltip */
+.zg-tip[data-size="xs"]::after{padding:3px 7px;font-size:10px;border-radius:7px}
+.zg-tip[data-size="sm"]::after{padding:4px 9px;font-size:11px;border-radius:8px}
+.zg-tip[data-size="lg"]::after{padding:8px 13px;font-size:13px;border-radius:12px}
+.zg-tip[data-size="xl"]::after{padding:10px 16px;font-size:14px;border-radius:14px}
+
+/* HoverCard */
+.zg-hc[data-size="xs"] .zg-hc__c{width:200px;padding:10px;font-size:12px;border-radius:14px}
+.zg-hc[data-size="sm"] .zg-hc__c{width:240px;padding:12px;font-size:13px;border-radius:16px}
+.zg-hc[data-size="lg"] .zg-hc__c{width:340px;padding:18px;font-size:15px;border-radius:22px}
+.zg-hc[data-size="xl"] .zg-hc__c{width:400px;padding:22px;font-size:16px;border-radius:24px}
+
+/* CommandBar: md matches the current 32px buttons */
+.zg-cb[data-size="xs"]{--cb-h:24px;--cb-p:3px;--cb-s:16px}
+.zg-cb[data-size="sm"]{--cb-h:28px;--cb-p:3px;--cb-s:18px}
+.zg-cb[data-size="md"]{--cb-h:32px;--cb-p:4px;--cb-s:20px}
+.zg-cb[data-size="lg"]{--cb-h:40px;--cb-p:5px;--cb-s:24px}
+.zg-cb[data-size="xl"]{--cb-h:48px;--cb-p:6px;--cb-s:28px}
+.zg-cb[data-size]{padding:var(--cb-p)}
+.zg-cb[data-size] .zg-ibtn{--h:var(--cb-h)}
+.zg-cb[data-size] .zg-cb__s{height:var(--cb-s)}

package/src/styles/sizes/typography.css

@@ -0,0 +1,12 @@
+/* size overrides for the typography group. Only [data-size] selectors, see the size scale at the end of tokens.css */
+.zg-text--xl{font-size:20px}
+.zg-code-b[data-size="xs"] pre{font-size:11px;padding:10px}.zg-code-b[data-size="xs"] .zg-code-b__h{font-size:11px;padding:4px 4px 4px 10px}
+.zg-code-b[data-size="sm"] pre{font-size:12px;padding:12px}.zg-code-b[data-size="sm"] .zg-code-b__h{font-size:11px;padding:6px 6px 6px 12px}
+.zg-code-b[data-size="lg"] pre{font-size:14px;padding:20px}.zg-code-b[data-size="lg"] .zg-code-b__h{font-size:13px;padding:10px 10px 10px 20px}
+.zg-code-b[data-size="xl"] pre{font-size:16px;padding:24px}.zg-code-b[data-size="xl"] .zg-code-b__h{font-size:14px;padding:12px 12px 12px 24px}
+.zg-kbd[data-size="xs"]{min-width:18px;height:18px;padding:0 4px;font-size:10px;border-radius:5px}
+.zg-kbd[data-size="sm"]{min-width:20px;height:20px;padding:0 5px;font-size:10.5px;border-radius:6px}
+.zg-kbd[data-size="lg"]{min-width:26px;height:26px;padding:0 8px;font-size:12px;border-radius:8px}
+.zg-kbd[data-size="xl"]{min-width:30px;height:30px;padding:0 10px;font-size:14px;border-radius:9px}
+.zg-link[data-size="xs"]{font-size:.8em}.zg-link[data-size="sm"]{font-size:.9em}.zg-link[data-size="lg"]{font-size:1.1em}.zg-link[data-size="xl"]{font-size:1.25em}
+.zg-link[data-size="xs"],.zg-link[data-size="sm"]{gap:3px}.zg-link[data-size="lg"],.zg-link[data-size="xl"]{gap:6px}

package/src/styles/tokens.css

@@ -0,0 +1,47 @@
+/* @ziyarago/ui · tokens (OKLCH). Theme: [data-theme=dark|light] · Palette: [data-palette=gold|tamam] · Direction: dir=rtl */
+:root,[data-palette="gold"]{--zg-brand:oklch(0.676 0.084 67.4);--zg-brand-hover:oklch(0.73 0.09 67.4);--zg-sky:oklch(0.703 0.09 229.6)}
+[data-palette="tamam"]{--zg-brand:oklch(0.77 0.23 142);--zg-brand-hover:oklch(0.82 0.23 142);--zg-sky:oklch(0.72 0.1 200)}
+:root,[data-theme="dark"]{--zg-pop:oklch(0.262 0.004 17.4);
+  --zg-on-brand:oklch(0.2 0.02 60);
+  --zg-brand-soft:color-mix(in oklch,var(--zg-brand) 22%,transparent);
+  --zg-brand-glow:color-mix(in oklch,var(--zg-brand) 40%,transparent);
+  --zg-brand-text:color-mix(in oklch,var(--zg-brand) 70%,white);
+  --zg-sky-text:oklch(0.8 0.08 226);
+  --zg-bg:oklch(0.216 0.003 17.4);
+  --zg-s1:oklch(1 0 0 / .055);--zg-s2:oklch(1 0 0 / .085);--zg-s3:oklch(1 0 0 / .13);
+  --zg-glass:oklch(0.235 0.006 40 / .92);
+  --zg-stroke:oklch(1 0 0 / .08);
+  --zg-text-1:oklch(0.97 0.004 70);--zg-text-2:oklch(0.82 0.008 70);--zg-text-3:oklch(0.66 0.01 70);
+  --zg-inv-bg:oklch(0.96 0.004 70);--zg-inv-fg:oklch(0.2 0.01 60);
+  --zg-green:oklch(0.76 0.15 150);--zg-amber:oklch(0.8 0.14 80);--zg-red:oklch(0.7 0.18 25);
+  --zg-rim:inset 0 1px 0 oklch(1 0 0 / .16),inset 0 0 0 1px oklch(1 0 0 / .07),inset 0 -1px 0 oklch(0 0 0 / .25);
+  --zg-shadow-1:0 8px 24px oklch(0 0 0 / .28);--zg-shadow-2:0 24px 64px oklch(0 0 0 / .5);
+}
+[data-theme="light"]{--zg-pop:oklch(0.985 0.003 70);
+  --zg-on-brand:oklch(0.2 0.02 60);
+  --zg-brand-text:oklch(0.45 0.07 65);
+  --zg-sky-text:oklch(0.48 0.08 230);
+  --zg-bg:oklch(0.919 0.007 67.6);
+  --zg-s1:oklch(1 0 0 / .62);--zg-s2:oklch(1 0 0 / .74);--zg-s3:oklch(1 0 0 / .88);
+  --zg-glass:oklch(0.975 0.004 70 / .94);
+  --zg-stroke:oklch(0.3 0.02 60 / .15);
+  --zg-text-1:oklch(0.2 0.01 60);--zg-text-2:oklch(0.36 0.012 60);--zg-text-3:oklch(0.47 0.012 60);
+  --zg-inv-bg:oklch(0.22 0.01 60);--zg-inv-fg:oklch(0.97 0.004 70);
+  --zg-green:oklch(0.5 0.14 150);--zg-amber:oklch(0.55 0.13 70);--zg-red:oklch(0.52 0.19 25);
+  --zg-rim:inset 0 1px 0 oklch(1 0 0 / .95),inset 0 0 0 1px oklch(1 0 0 / .45),0 0 0 1px oklch(0.3 0.02 60 / .13);
+  --zg-shadow-1:0 8px 24px oklch(0.4 0.03 60 / .17);--zg-shadow-2:0 24px 64px oklch(0.4 0.03 60 / .22);
+}
+:root{--zg-z-bar:50;--zg-z-pop:60;--zg-z-modal:200;
+  --zg-font:'Manrope','Thmanyah Sans',system-ui,sans-serif;--zg-font-ar:'Thmanyah Sans',system-ui,sans-serif;--zg-font-ar-display:'Thmanyah Serif Display','Thmanyah Sans',serif;--zg-font-ar-text:'Thmanyah Serif Text','Thmanyah Sans',serif;--zg-font-mono:'JetBrains Mono',ui-monospace,monospace;
+  --zg-h-xs:28px;--zg-h-sm:32px;--zg-h-md:40px;--zg-h-lg:48px;--zg-h-xl:56px;
+  --zg-r-card:32px;--zg-r-tile:20px;--zg-ease:cubic-bezier(.2,.8,.2,1);
+}
+[dir="rtl"]{--zg-font:var(--zg-font-ar)}
+
+/* Size scale. Adapters put data-size="xs|sm|md|lg|xl" on a component root when it has a size prop.
+   Component CSS must read these only inside its own [data-size] selector, never in default rules, so sizes do not leak into children. */
+[data-size="xs"]{--zg-sz-h:28px;--zg-sz-fs:12px;--zg-sz-px:10px;--zg-sz-gap:6px;--zg-sz-icon:14px;--zg-sz-pad:10px}
+[data-size="sm"]{--zg-sz-h:32px;--zg-sz-fs:13px;--zg-sz-px:12px;--zg-sz-gap:8px;--zg-sz-icon:16px;--zg-sz-pad:12px}
+[data-size="md"]{--zg-sz-h:40px;--zg-sz-fs:14px;--zg-sz-px:16px;--zg-sz-gap:10px;--zg-sz-icon:18px;--zg-sz-pad:16px}
+[data-size="lg"]{--zg-sz-h:48px;--zg-sz-fs:15px;--zg-sz-px:20px;--zg-sz-gap:12px;--zg-sz-icon:20px;--zg-sz-pad:20px}
+[data-size="xl"]{--zg-sz-h:56px;--zg-sz-fs:16px;--zg-sz-px:24px;--zg-sz-gap:14px;--zg-sz-icon:22px;--zg-sz-pad:24px}

package/src/theme.js

@@ -0,0 +1,52 @@
+// Framework-free theme controller: palette, theme, direction, motion, effects, background → attributes on <html>. Persists to localStorage.
+const KEY = 'zg-ui';
+export const PALETTES = ['gold', 'tamam'];
+export const BACKGROUNDS = ['none', 'aurora', 'sunset', 'ocean', 'emerald', 'rose', 'mesh'];
+const DEFAULTS = { theme: 'dark', palette: 'gold', dir: 'ltr', motion: 'auto', effects: 'auto', bg: 'none' };
+const read = () => { try { return JSON.parse(localStorage.getItem(KEY) || '{}'); } catch { return {}; } };
+let cur = typeof localStorage === 'undefined' ? { ...DEFAULTS } : { ...DEFAULTS, ...read() };
+const subs = new Set();
+
+export const capable = () => {
+  if (typeof CSS === 'undefined' || !CSS.supports) return true;
+  const mem = typeof navigator !== 'undefined' ? navigator.deviceMemory : undefined;
+  const cores = typeof navigator !== 'undefined' ? navigator.hardwareConcurrency : undefined;
+  return CSS.supports('backdrop-filter', 'blur(1px)') && CSS.supports('color', 'oklch(0.5 0.1 100)') && (mem == null || mem >= 4) && (cores == null || cores >= 4);
+};
+const reduced = () => typeof matchMedia !== 'undefined' && matchMedia('(prefers-reduced-motion: reduce)').matches;
+export const resolve = (s = cur) => ({
+  motion: s.motion === 'auto' ? (reduced() ? 'off' : 'on') : s.motion,
+  effects: s.effects === 'auto' ? (capable() ? 'full' : 'lite') : s.effects,
+});
+
+const apply = () => {
+  if (typeof document === 'undefined') return;
+  const r = document.documentElement, v = resolve();
+  r.dataset.theme = cur.theme; r.dataset.palette = cur.palette; r.dir = cur.dir;
+  r.dataset.motion = v.motion; r.dataset.fx = v.effects; r.dataset.bg = cur.bg;
+  try { localStorage.setItem(KEY, JSON.stringify(cur)); } catch {}
+  subs.forEach(f => f({ ...cur }));
+};
+
+/** Inline script for <head>: applies the saved settings before first paint (no flash). */
+export const themeInitScript = `try{var s=JSON.parse(localStorage.getItem('${KEY}')||'{}'),r=document.documentElement,d=r.dataset;if(s.theme)d.theme=s.theme;if(s.palette)d.palette=s.palette;if(s.dir)r.dir=s.dir;if(s.bg)d.bg=s.bg;var m=s.motion||'auto',f=s.effects||'auto';d.motion=m==='auto'?(matchMedia('(prefers-reduced-motion: reduce)').matches?'off':'on'):m;d.fx=f==='auto'?((CSS.supports('backdrop-filter','blur(1px)')&&(navigator.deviceMemory||8)>=4&&(navigator.hardwareConcurrency||8)>=4)?'full':'lite'):f}catch(e){}`;
+
+export function useUiTheme() {
+  if (typeof document !== 'undefined') apply();
+  const set = o => { cur = { ...cur, ...o }; apply(); };
+  return {
+    get theme() { return cur.theme; }, get palette() { return cur.palette; }, get dir() { return cur.dir; },
+    get motion() { return cur.motion; }, get effects() { return cur.effects; }, get bg() { return cur.bg; },
+    get resolved() { return resolve(); },
+    palettes: PALETTES, backgrounds: BACKGROUNDS,
+    setTheme: t => set({ theme: t }), toggleTheme: () => set({ theme: cur.theme === 'dark' ? 'light' : 'dark' }),
+    setPalette: p => set({ palette: p }), setDir: d => set({ dir: d }), setLocale: l => set({ dir: l === 'ar' ? 'rtl' : 'ltr' }),
+    /** 'auto' follows prefers-reduced-motion, 'on' enables animations, 'off' disables them */
+    setMotion: m => set({ motion: m }),
+    /** 'auto' picks by browser capability, 'full' = blur, glow and animated backgrounds, 'lite' = flat and fast */
+    setEffects: e => set({ effects: e }),
+    setBackground: b => set({ bg: b }),
+    subscribe: f => { subs.add(f); return () => subs.delete(f); },
+    snapshot: () => ({ ...cur }),
+  };
+}

package/src/vue/index.js

@@ -0,0 +1,29 @@
+// Vue 3 adapter. Usage: import { UiButton, UiAppShell } from '@ziyarago/ui/vue'
+import { h, ref, reactive, defineComponent, Teleport, cloneVNode, isVNode } from 'vue';
+import { components } from '../core/index.js';
+
+const C = {};
+const vh = (t, p, ...k) => { const kids = k.flat(); if (p && typeof t === 'string') for (const key of Object.keys(p)) if (/^on[A-Z]/.test(key) && !key.startsWith('onVnode')) { const nk = 'on' + key[2] + key.slice(3).toLowerCase(); if (nk !== key) { p[nk] = p[key]; delete p[key]; } } return typeof t === 'string' || !kids.length ? h(t, p, kids.length ? kids : undefined) : h(t, p, { default: () => kids }); };
+const wrap = (name, def) => defineComponent({
+  name: 'Ui' + name, inheritAttrs: false, emits: ['update:modelValue', 'change'],
+  setup(_, { attrs, slots, emit }) {
+    const state = reactive({ ...(def.state || {}) });
+    const set = o => Object.assign(state, o);
+    return () => {
+      const props = { ...attrs, onChange: v => { emit('update:modelValue', v); emit('change', v); } };
+      if (attrs.modelValue === undefined) delete props.modelValue;
+      const named = {}; for (const k of Object.keys(slots)) if (k !== 'default') named[k] = slots[k]();
+      const children = slots.default ? slots.default() : [];
+      const out = def.render({ C, h: vh, props, children, slots: named, state, set, portal: (kids, to) => h(Teleport, { to: to || 'body' }, kids) });
+      const sz = attrs.size;
+      return sz && isVNode(out) && typeof out.type === 'string' ? cloneVNode(out, { 'data-size': sz }) : out;
+    };
+  },
+});
+for (const [name, def] of Object.entries(components)) C[name] = wrap(name, def);
+
+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, Stepper: UiStepper, Card: UiCard, Modal: UiModal, Drawer: UiDrawer, Toast: UiToast, Breadcrumbs: UiBreadcrumbs, Pagination: UiPagination, Progress: UiProgress, Ring: UiRing, KpiTile: UiKpiTile, DataTable: UiDataTable, KanbanColumn: UiKanbanColumn, KanbanCard: UiKanbanCard, Timeline: UiTimeline, TopNav: UiTopNav, SideNav: UiSideNav, AppShell: UiAppShell, PageHeader: UiPageHeader, AuthLayout: UiAuthLayout, LeadCard: UiLeadCard, HotelCard: UiHotelCard, TourCard: UiTourCard, PrayerTimes: UiPrayerTimes, RamadanTracker: UiRamadanTracker, CallRow: UiCallRow, Alert: UiAlert, Banner: UiBanner, Accordion: UiAccordion, Skeleton: UiSkeleton, Spinner: UiSpinner, Divider: UiDivider, EmptyState: UiEmptyState, ErrorPage: UiErrorPage, DataState: UiDataState, LoadingOverlay: UiLoadingOverlay, ConfirmDialog: UiConfirmDialog, Popconfirm: UiPopconfirm, Carousel: UiCarousel, Gallery: UiGallery, Code: UiCode, PricingCard: UiPricingCard, IntegrationCard: UiIntegrationCard, IncomingCall: UiIncomingCall, CallCard: UiCallCard, Dropdown: UiDropdown, Menu: UiMenu, Tooltip: UiTooltip, HoverCard: UiHoverCard, Popover: UiPopover, CopyButton: UiCopyButton, CommandBar: UiCommandBar, CommandPalette: UiCommandPalette, NotificationBell: UiNotificationBell, ToggleGroup: UiToggleGroup, Fab: UiFab, Textarea: UiTextarea, NumberInput: UiNumberInput, PasswordInput: UiPasswordInput, SearchInput: UiSearchInput, RadioGroup: UiRadioGroup, Slider: UiSlider, Rating: UiRating, ChipInput: UiChipInput, InlineEdit: UiInlineEdit, ColorPicker: UiColorPicker, FileUpload: UiFileUpload, Combobox: UiCombobox, MultiSelect: UiMultiSelect, GroupedSelect: UiGroupedSelect, PhoneInput: UiPhoneInput, Calendar: UiCalendar, DatePicker: UiDatePicker, TimePicker: UiTimePicker, FormField: UiFormField, LoginForm: UiLoginForm, StepForm: UiStepForm, Tag: UiTag, Kbd: UiKbd, StatsCard: UiStatsCard, KpiInline: UiKpiInline, MiniChart: UiMiniChart, Descriptions: UiDescriptions, LazyImage: UiLazyImage, SystemStatus: UiSystemStatus, TreeView: UiTreeView, CalendarView: UiCalendarView, SubNav: UiSubNav, ActionRail: UiActionRail, SplitLayout: UiSplitLayout, SettingsSection: UiSettingsSection, ScrollArea: UiScrollArea, DealCard: UiDealCard, PipelineBoard: UiPipelineBoard, ContactPanel: UiContactPanel, SalesFunnel: UiSalesFunnel, BookingCard: UiBookingCard, GuestCard: UiGuestCard, RoomGrid: UiRoomGrid, RoomCalendar: UiRoomCalendar, OccupancyChart: UiOccupancyChart, Chip: UiChip, IconTile: UiIconTile, StatusIcon: UiStatusIcon, UserCell: UiUserCell, StatRow: UiStatRow, CountryRow: UiCountryRow, StatLine: UiStatLine, StatStrip: UiStatStrip, VersusBar: UiVersusBar, SegBar: UiSegBar, HeroBanner: UiHeroBanner, TabTiles: UiTabTiles, PillTabs: UiPillTabs, PillSelect: UiPillSelect, ChartCard: UiChartCard, ActionCard: UiActionCard, Snackbar: UiSnackbar, TourPopover: UiTourPopover, ProfileHeader: UiProfileHeader, AuthSplit: UiAuthSplit, StatusPage: UiStatusPage, ValidatedField: UiValidatedField, Footer: UiFooter, DataGroup: UiDataGroup, OptionCard: UiOptionCard, OptionCards: UiOptionCards, RichEditor: UiRichEditor, RangeSlider: UiRangeSlider, RangeCalendar: UiRangeCalendar, StepDialog: UiStepDialog, FullscreenDialog: UiFullscreenDialog, PageDashboard: UiPageDashboard, PagePatterns: UiPagePatterns, PageCrm: UiPageCrm, PageBookings: UiPageBookings, PageCatalog: UiPageCatalog, PageDetail: UiPageDetail, PageSettings: UiPageSettings, PageUserList: UiPageUserList, PageProfile: UiPageProfile, PageForm: UiPageForm, PageOrder: UiPageOrder, PageAccount: UiPageAccount, PagePricing: UiPagePricing, PageFaq: UiPageFaq, PageAuth: UiPageAuth, PageStatus: UiPageStatus, TreeSelect: UiTreeSelect, ContextMenu: UiContextMenu, Sortable: UiSortable, Map: UiMap, ImageUpload: UiImageUpload, Screensaver: UiScreensaver, Tour: UiTour, Heading: UiHeading, Text: UiText, Box: UiBox, Center: UiCenter, HStack: UiHStack, VStack: UiVStack, Grid: UiGrid, Link: UiLink, Pressable: UiPressable, Icon: UiIcon, Portal: UiPortal, LiquidGlass: UiLiquidGlass, BottomSheet: UiBottomSheet, Actionsheet: UiActionsheet, ImageViewer: UiImageViewer, ChatAi: UiChatAi } = C;
+export const install = app => { for (const [n, c] of Object.entries(C)) app.component('Ui' + n, c); };
+export { fmt, setIconBase, rules } from '../core/index.js';
+export { useUiTheme } from '../theme.js';
+export default { install };

package/tokens/tokens.json

@@ -0,0 +1,9 @@
+{
+  "$description": "Design tokens for Flutter / native. Colors are sRGB hex approximations of the OKLCH source in src/styles/tokens.css.",
+  "palettes": { "gold": { "brand": "#BC926A", "sky": "#5FAACC" }, "tamam": { "brand": "#3FD13F", "sky": "#4FB5C4" } },
+  "dark": { "bg": "#1B1919", "text1": "#F1EDE8", "text2": "#D0CAC3", "text3": "#A19A93", "onBrand": "#1F1812", "green": "#6ED08F", "amber": "#E8B964", "red": "#E26E5F", "surface1": "#FFFFFF0E", "surface2": "#FFFFFF16", "surface3": "#FFFFFF21", "stroke": "#FFFFFF14" },
+  "light": { "bg": "#E7E3DF", "text1": "#241E18", "text2": "#4E4640", "text3": "#6C645D", "onBrand": "#1F1812", "green": "#2F7D4D", "amber": "#8A5F12", "red": "#B33A2C", "surface1": "#FFFFFF66", "surface2": "#FFFFFF8C", "surface3": "#FFFFFFBF", "stroke": "#4A3B2A1A" },
+  "radius": { "tile": 20, "card": 32, "pill": 999 },
+  "control": { "xs": 28, "sm": 32, "md": 40, "lg": 48, "xl": 56 },
+  "font": { "latin": "Manrope", "arabic": "Thmanyah Sans", "mono": "JetBrains Mono" }
+}

package/types/core.d.ts

@@ -0,0 +1,4 @@
+// Core (framework-neutral) entry. Most apps import from '@ziyarago/ui/vue' or '@ziyarago/ui/react' instead.
+export { rules, setIconBase, fmt } from './shared';
+export type * from './shared';
+export const components: Record<string, { state?: Record<string, unknown>; slots?: string[]; render: (ctx: any) => unknown }>;

package/types/nuxt.d.ts

@@ -0,0 +1,11 @@
+export interface ModuleOptions {
+  css?: boolean;
+  prefix?: string;
+  theme?: false | { theme?: 'dark' | 'light'; palette?: 'gold' | 'tamam'; dir?: 'ltr' | 'rtl' };
+}
+declare const _default: import('@nuxt/schema').NuxtModule<ModuleOptions>;
+export default _default;
+declare module '@nuxt/schema' {
+  interface NuxtConfig { ziyarago?: ModuleOptions }
+  interface NuxtOptions { ziyarago?: ModuleOptions }
+}