@ponti-studios/ui 1.7.0 → 2.0.0

package/README.md

@@ -1,6 +1,6 @@
 # @ponti-studios/ui
 
-The canonical Ponti Studios UI package. It is published from this repository to GitHub Packages.
+The canonical Ponti Studios UI package. It is published from this repository to npm.
 
 ## Design
 
@@ -11,6 +11,17 @@ The design system is documented in `docs/`:
 - [Patterns](./docs/patterns.md) — screen composition rules
 - [Review gates](./docs/review-gates.md) — pass/fail review criteria
 
+## React Native
+
+Import native components and the shared token theme from `@ponti-studios/ui/native`.
+This entry point requires `react-native` as a peer and uses the same light/dark
+color, spacing, radius, type-size, and font-weight tokens as the web components.
+The base package remains usable by web consumers that do not install React Native.
+
+```tsx
+import { NativeButton, NativeThemeProvider } from "@ponti-studios/ui/native";
+```
+
 ## Development
 
 Common development workflows are available through the `Makefile`:
@@ -24,12 +35,35 @@ make storybook  # build tokens and start Storybook
 
 The `pnpm run` scripts (`check`, `build`, `test`, `storybook`, `format`) delegate to these targets for compatibility.
 
+## Start a new web project
+
+The package also ships a React + Vite starter wired to the current Ponti UI
+release. It includes the shared theme and component styles, strict TypeScript
+settings, and a first screen using the shared Button. The starter does not need
+Tailwind installed.
+
+Create a project and install its dependencies:
+
+```bash
+pnpm dlx --package @ponti-studios/ui create-ponti-project my-new-project
+cd my-new-project
+pnpm dev
+```
+
+The command refuses to write into a non-empty directory. Pass `--no-install`
+to create the files without running `pnpm install`. From a local checkout, use
+`pnpm run create:project <directory>`.
+
+This starter is intentionally focused on web apps. Native apps use the same
+token sources through the package's `/native` entry point and should keep their
+platform-specific app setup in their own starter.
+
 ## Release
 
 Releases are owned by [release-please](https://github.com/googleapis/release-please), not by hand-edited version numbers or manually pushed tags. The `.github/workflows/publish.yml` workflow runs after a successful `validate` push to `main`:
 
 1. **`release-please`** — maintains a root-package release PR, updating `package.json`, `.release-please-manifest.json`, and `CHANGELOG.md` from Conventional Commit history.
-2. **`publish`** — when that release PR is merged, checks out the exact release tag and publishes it to GitHub Packages. `workflow_dispatch` is the break-glass recovery path for a previously created release tag.
+2. **`publish`** — when that release PR is merged, checks out the exact release tag and publishes it to npm. `workflow_dispatch` is the break-glass recovery path for a previously created release tag.
 
 **So the actual release flow is:**
 
@@ -37,7 +71,7 @@ Releases are owned by [release-please](https://github.com/googleapis/release-ple
 2. Once on `main`, find or wait for the `chore(main): release ui X.Y.Z` PR that Release Please opens or updates.
 3. Review and merge it. That merge creates the `ui-v<version>` tag; after validation succeeds, the release workflow publishes that exact tag automatically.
 
-`prepack` (`make check`) runs as part of `pnpm install`/publish tooling and is the last gate before anything reaches npm — see "Generated files" below for the failure mode that most commonly trips it.
+`prepack` (`pnpm run check`) runs before packing or publishing and is the last gate before anything reaches npm — see "Generated files" below for the failure mode that most commonly trips it.
 
 ### Generated files must never be hand-edited
 
@@ -45,28 +79,28 @@ Releases are owned by [release-please](https://github.com/googleapis/release-ple
 
 ## Consumers
 
-Configure the npm registry in the consumer repository:
-
-```ini
-@ponti-studios:registry=https://npm.pkg.github.com
-```
-
-Consumers that need authentication should configure a token outside the committed project `.npmrc`:
+The package is public on npm, so consumers can install it without an
+organization token:
 
 ```bash
-pnpm config set --location=user //npm.pkg.github.com/:_authToken "$NODE_AUTH_TOKEN"
+pnpm add @ponti-studios/ui
 ```
 
-CI consumers should use a secret-backed npm token with read access.
+### Use the shared web styles
 
-### Ships TypeScript source, not a bundle
+Import the package once from your web app entry point to load the precompiled
+theme and component styles:
 
-This package has no build output — every `exports` entry resolves to a file under `src/`. Consumers are expected to transpile the package themselves (Vite, Metro, Next, etc. all do this for workspace/npm packages by default). Tailwind v4 class detection for consumers of `./styles.css` requires an `@source` directive pointing at the installed package's `src/`, e.g.
-
-```css
-@import "tailwindcss";
-@import "@ponti-studios/ui/styles.css";
-@source "../../../node_modules/@ponti-studios/ui/src";
+```tsx
+import "@ponti-studios/ui";
 ```
 
-**Important:** `./styles.css` uses `@reference "tailwindcss"` (it does not import Tailwind itself). Your project owns the `@import "tailwindcss"` — place it before the UI stylesheet. Omitting it will cause missing CSS variables (e.g. `--tw-shadow-color`) and unresolved utilities.
+Components remain available through their named entry points, such as
+`@ponti-studios/ui/primitives`. Consumers do not need Tailwind to use the
+components' built-in styles. Tailwind is only needed if the app itself wants to
+write Tailwind utility classes. The `/native` entry remains platform-specific
+and does not load the web stylesheet.
+
+The TypeScript entry points remain source exports for consumer bundlers to
+transpile. The package additionally publishes a precompiled web stylesheet at
+`@ponti-studios/ui/styles.css` for apps that prefer an explicit CSS import.

package/dist/styles.css

@@ -0,0 +1,3 @@
+/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
+@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-scroll-snap-strictness:proximity;--tw-space-y-reverse:0;--tw-space-x-reverse:0;--tw-divide-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial;--tw-ease:initial;--tw-content:"";--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0}}}@layer theme{:root,:host{--color-nokia-screen:#c8d6a6;--color-nokia-screen-deep:#b0c188;--color-nokia-ink:#26331b;--color-nokia-bezel:#1a1a1a;--font-nokia:ui-monospace, "SF Mono", "Courier New", monospace;--animate-accordion-down:accordion-down .2s ease-out;--animate-in:fade-in .15s ease-out, zoom-in .15s ease-out;--animate-out:fade-out .12s ease-in, zoom-out .12s ease-in;--animate-fade-in:fade-in .15s ease-out;--animate-fade-out:fade-out .12s ease-in;--animate-progress-shimmer:progress-shimmer 1.1s linear infinite;--color-background:var(--background);--color-foreground:var(--text-primary);--color-primary:var(--primary);--color-border:var(--border-default);--color-ring:var(--focus-ring)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,var(--font-sans,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"));font-feature-settings:var(--default-font-feature-settings,initial);font-variation-settings:var(--default-font-variation-settings,initial);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,var(--font-mono,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace));font-feature-settings:var(--default-mono-font-feature-settings,initial);font-variation-settings:var(--default-mono-font-variation-settings,initial);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring:where(:not(iframe)){outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}}:root.dark{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}html,body{background-color:var(--color-background);color:var(--color-foreground);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{border-color:var(--color-border,currentColor)}:focus{outline:none}:focus-visible{outline:2px solid var(--color-ring);outline-offset:2px;border-radius:inherit}button{cursor:pointer;font-family:inherit}label{color:var(--color-foreground);font-size:var(--text-sm);font-weight:var(--font-weight-medium);line-height:1}:where(.peer:disabled)~label{cursor:not-allowed;opacity:.7}h1,h2,h3,h4,h5,h6{font-family:var(--font-sans);letter-spacing:var(--tracking-tight);font-weight:600}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}}@layer components;@layer utilities{.pointer-events-none{pointer-events:none}.invisible{visibility:hidden}.visible{visibility:visible}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0}.inset-x-0{inset-inline:0}.inset-x-2{inset-inline:calc(var(--spacing,.25rem) * 2)}.inset-x-4{inset-inline:calc(var(--spacing,.25rem) * 4)}.top-0{top:0}.top-3{top:calc(var(--spacing,.25rem) * 3)}.right-0{right:0}.right-2{right:calc(var(--spacing,.25rem) * 2)}.right-3{right:calc(var(--spacing,.25rem) * 3)}.bottom-0{bottom:0}.bottom-4{bottom:calc(var(--spacing,.25rem) * 4)}.bottom-\[max\(0\.5rem\,env\(safe-area-inset-bottom\)\)\]{bottom:max(.5rem, env(safe-area-inset-bottom))}.left-2{left:calc(var(--spacing,.25rem) * 2)}.z-10{z-index:10}.z-50{z-index:50}.col-span-2{grid-column:span 2/span 2}.col-span-3{grid-column:span 3/span 3}.col-start-2{grid-column-start:2}.container{width:100%}@media (width>=40rem){.container{max-width:40rem}}@media (width>=48rem){.container{max-width:48rem}}@media (width>=64rem){.container{max-width:64rem}}@media (width>=80rem){.container{max-width:80rem}}@media (width>=96rem){.container{max-width:96rem}}.-m-1{margin:calc(var(--spacing,.25rem) * -1)}.-mx-1{margin-inline:calc(var(--spacing,.25rem) * -1)}.my-1{margin-block:var(--spacing,.25rem)}.my-2{margin-block:calc(var(--spacing,.25rem) * 2)}.mt-1{margin-top:var(--spacing,.25rem)}.mt-1\.5{margin-top:calc(var(--spacing,.25rem) * 1.5)}.mt-2{margin-top:calc(var(--spacing,.25rem) * 2)}.mt-3{margin-top:calc(var(--spacing,.25rem) * 3)}.mt-4{margin-top:calc(var(--spacing,.25rem) * 4)}.mt-8{margin-top:calc(var(--spacing,.25rem) * 8)}.mt-auto{margin-top:auto}.mr-0\.5{margin-right:calc(var(--spacing,.25rem) * .5)}.mr-1{margin-right:var(--spacing,.25rem)}.mr-2{margin-right:calc(var(--spacing,.25rem) * 2)}.mb-2{margin-bottom:calc(var(--spacing,.25rem) * 2)}.mb-3{margin-bottom:calc(var(--spacing,.25rem) * 3)}.ml-2{margin-left:calc(var(--spacing,.25rem) * 2)}.ml-auto{margin-left:auto}.scrollbar-hide{scrollbar-width:none;-ms-overflow-style:none}.scrollbar-hide::-webkit-scrollbar{display:none}.line-clamp-1{-webkit-line-clamp:1;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.\!grid{display:grid!important}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-flex{display:inline-flex}.table{display:table}.field-sizing-content{field-sizing:content}.aspect-square{aspect-ratio:1}.aspect-video{aspect-ratio:var(--aspect-video,16 / 9)}.size-2{width:calc(var(--spacing,.25rem) * 2);height:calc(var(--spacing,.25rem) * 2)}.size-2\.5{width:calc(var(--spacing,.25rem) * 2.5);height:calc(var(--spacing,.25rem) * 2.5)}.size-3{width:calc(var(--spacing,.25rem) * 3);height:calc(var(--spacing,.25rem) * 3)}.size-3\.5{width:calc(var(--spacing,.25rem) * 3.5);height:calc(var(--spacing,.25rem) * 3.5)}.size-4{width:calc(var(--spacing,.25rem) * 4);height:calc(var(--spacing,.25rem) * 4)}.size-4\.5{width:calc(var(--spacing,.25rem) * 4.5);height:calc(var(--spacing,.25rem) * 4.5)}.size-5{width:calc(var(--spacing,.25rem) * 5);height:calc(var(--spacing,.25rem) * 5)}.size-6{width:calc(var(--spacing,.25rem) * 6);height:calc(var(--spacing,.25rem) * 6)}.size-8{width:calc(var(--spacing,.25rem) * 8);height:calc(var(--spacing,.25rem) * 8)}.size-9{width:calc(var(--spacing,.25rem) * 9);height:calc(var(--spacing,.25rem) * 9)}.size-10{width:calc(var(--spacing,.25rem) * 10);height:calc(var(--spacing,.25rem) * 10)}.size-11{width:calc(var(--spacing,.25rem) * 11);height:calc(var(--spacing,.25rem) * 11)}.size-12{width:calc(var(--spacing,.25rem) * 12);height:calc(var(--spacing,.25rem) * 12)}.size-40{width:calc(var(--spacing,.25rem) * 40);height:calc(var(--spacing,.25rem) * 40)}.size-48{width:calc(var(--spacing,.25rem) * 48);height:calc(var(--spacing,.25rem) * 48)}.size-full{width:100%;height:100%}.\!h-auto{height:auto!important}.h-1{height:var(--spacing,.25rem)}.h-1\.5{height:calc(var(--spacing,.25rem) * 1.5)}.h-2{height:calc(var(--spacing,.25rem) * 2)}.h-3\.5{height:calc(var(--spacing,.25rem) * 3.5)}.h-4{height:calc(var(--spacing,.25rem) * 4)}.h-6{height:calc(var(--spacing,.25rem) * 6)}.h-8{height:calc(var(--spacing,.25rem) * 8)}.h-9{height:calc(var(--spacing,.25rem) * 9)}.h-10{height:calc(var(--spacing,.25rem) * 10)}.h-24{height:calc(var(--spacing,.25rem) * 24)}.h-32{height:calc(var(--spacing,.25rem) * 32)}.h-80{height:calc(var(--spacing,.25rem) * 80)}.h-105{height:calc(var(--spacing,.25rem) * 105)}.h-\[1\.15rem\]{height:1.15rem}.h-auto{height:auto}.h-full{height:100%}.h-px{height:1px}.\!max-h-none{max-height:none!important}.max-h-\(--available-height\){max-height:var(--available-height)}.max-h-9{max-height:calc(var(--spacing,.25rem) * 9)}.max-h-10{max-height:calc(var(--spacing,.25rem) * 10)}.max-h-64{max-height:calc(var(--spacing,.25rem) * 64)}.max-h-75{max-height:calc(var(--spacing,.25rem) * 75)}.max-h-\[70\%\]{max-height:70%}.max-h-\[90dvh\]{max-height:90dvh}.max-h-\[250px\]{max-height:250px}.max-h-\[calc\(100dvh-2rem\)\]{max-height:calc(100dvh - 2rem)}.min-h-0{min-height:0}.min-h-4{min-height:calc(var(--spacing,.25rem) * 4)}.min-h-8{min-height:calc(var(--spacing,.25rem) * 8)}.min-h-9{min-height:calc(var(--spacing,.25rem) * 9)}.min-h-10{min-height:calc(var(--spacing,.25rem) * 10)}.min-h-14{min-height:calc(var(--spacing,.25rem) * 14)}.min-h-16{min-height:calc(var(--spacing,.25rem) * 16)}.min-h-44{min-height:calc(var(--spacing,.25rem) * 44)}.min-h-64{min-height:calc(var(--spacing,.25rem) * 64)}.min-h-80{min-height:calc(var(--spacing,.25rem) * 80)}.min-h-\[30dvh\]{min-height:30dvh}.w-1\/2{width:50%}.w-2\/3{width:66.6667%}.w-3\/4{width:75%}.w-5\/6{width:83.3333%}.w-6{width:calc(var(--spacing,.25rem) * 6)}.w-8{width:calc(var(--spacing,.25rem) * 8)}.w-9{width:calc(var(--spacing,.25rem) * 9)}.w-40{width:calc(var(--spacing,.25rem) * 40)}.w-48{width:calc(var(--spacing,.25rem) * 48)}.w-56{width:calc(var(--spacing,.25rem) * 56)}.w-64{width:calc(var(--spacing,.25rem) * 64)}.w-72{width:calc(var(--spacing,.25rem) * 72)}.w-80{width:calc(var(--spacing,.25rem) * 80)}.w-96{width:calc(var(--spacing,.25rem) * 96)}.w-120{width:calc(var(--spacing,.25rem) * 120)}.w-\[100px\]{width:100px}.w-\[160px\]{width:160px}.w-\[180px\]{width:180px}.w-\[200px\]{width:200px}.w-\[400px\]{width:400px}.w-\[450px\]{width:450px}.w-\[520px\]{width:520px}.w-\[600px\]{width:600px}.w-\[640px\]{width:640px}.w-\[calc\(100vw-2rem\)\]{width:calc(100vw - 2rem)}.w-fit{width:fit-content}.w-full{width:100%}.w-px{width:1px}.max-w-2xl{max-width:var(--container-2xl,42rem)}.max-w-7xl{max-width:var(--container-7xl,80rem)}.max-w-\[34ch\]{max-width:34ch}.max-w-full{max-width:100%}.max-w-lg{max-width:var(--container-lg,32rem)}.max-w-md{max-width:var(--container-md,28rem)}.max-w-prose{max-width:65ch}.max-w-sm{max-width:var(--container-sm,24rem)}.max-w-xs{max-width:var(--container-xs,20rem)}.min-w-\(--anchor-width\){min-width:var(--anchor-width)}.min-w-0{min-width:0}.min-w-20{min-width:calc(var(--spacing,.25rem) * 20)}.min-w-36{min-width:calc(var(--spacing,.25rem) * 36)}.min-w-\[3ch\]{min-width:3ch}.min-w-\[8rem\]{min-width:8rem}.flex-1{flex:1}.shrink-0{flex-shrink:0}.grow{flex-grow:1}.caption-bottom{caption-side:bottom}.origin-\(--transform-origin\){transform-origin:var(--transform-origin)}.scale-100{--tw-scale-x:100%;--tw-scale-y:100%;--tw-scale-z:100%;scale:var(--tw-scale-x) var(--tw-scale-y)}.scale-\[1\.01\]{scale:1.01}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.animate-accordion-down{animation:var(--animate-accordion-down)}.animate-progress-shimmer{animation:var(--animate-progress-shimmer)}.animate-pulse{animation:var(--animate-pulse,pulse 2s cubic-bezier(.4, 0, .6, 1) infinite)}.cursor-default{cursor:default}.cursor-grab{cursor:grab}.cursor-pointer{cursor:pointer}.touch-none{touch-action:none}.snap-x{scroll-snap-type:x var(--tw-scroll-snap-strictness)}.snap-y{scroll-snap-type:y var(--tw-scroll-snap-strictness)}.snap-mandatory{--tw-scroll-snap-strictness:mandatory}.snap-center{scroll-snap-align:center}.snap-start{scroll-snap-align:start}.scroll-py-1{scroll-padding-block:var(--spacing,.25rem)}.appearance-none{appearance:none}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-\[0_1fr\]{grid-template-columns:0 1fr}.flex-col{flex-direction:column}.flex-col-reverse{flex-direction:column-reverse}.flex-row{flex-direction:row}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-start{align-items:flex-start}.items-stretch{align-items:stretch}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.justify-items-start{justify-items:start}.gap-0{gap:0}.gap-0\.5{gap:calc(var(--spacing,.25rem) * .5)}.gap-1{gap:var(--spacing,.25rem)}.gap-1\.5{gap:calc(var(--spacing,.25rem) * 1.5)}.gap-2{gap:calc(var(--spacing,.25rem) * 2)}.gap-3{gap:calc(var(--spacing,.25rem) * 3)}.gap-4{gap:calc(var(--spacing,.25rem) * 4)}.gap-6{gap:calc(var(--spacing,.25rem) * 6)}:where(.space-y-1>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(var(--spacing,.25rem) * var(--tw-space-y-reverse));margin-block-end:calc(var(--spacing,.25rem) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing,.25rem) * 2) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing,.25rem) * 2) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-3>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing,.25rem) * 3) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing,.25rem) * 3) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-4>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing,.25rem) * 4) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing,.25rem) * 4) * calc(1 - var(--tw-space-y-reverse)))}:where(.-space-x-2>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing,.25rem) * -2) * var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--spacing,.25rem) * -2) * calc(1 - var(--tw-space-x-reverse)))}:where(.space-x-2>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing,.25rem) * 2) * var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--spacing,.25rem) * 2) * calc(1 - var(--tw-space-x-reverse)))}.gap-y-0\.5{row-gap:calc(var(--spacing,.25rem) * .5)}:where(.divide-y>:not(:last-child)){--tw-divide-y-reverse:0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px * var(--tw-divide-y-reverse));border-bottom-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)))}:where(.divide-border>:not(:last-child)){border-color:var(--border-default)}.self-start{align-self:flex-start}.self-stretch{align-self:stretch}.justify-self-end{justify-self:flex-end}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-x-hidden{overflow-x:hidden}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:var(--radius-2xl,1rem)}.rounded-3xl{border-radius:var(--radius-3xl,1.5rem)}.rounded-\[4px\]{border-radius:4px}.rounded-full{border-radius:2147483647px}.rounded-lg{border-radius:var(--radius-lg,.5rem)}.rounded-md{border-radius:var(--radius-md,.375rem)}.rounded-none{border-radius:0}.rounded-sm{border-radius:var(--radius-sm,.25rem)}.rounded-xl{border-radius:var(--radius-xl,.75rem)}.rounded-t-xl{border-top-left-radius:var(--radius-xl,.75rem);border-top-right-radius:var(--radius-xl,.75rem)}.rounded-l-lg{border-top-left-radius:var(--radius-lg,.5rem);border-bottom-left-radius:var(--radius-lg,.5rem)}.rounded-l-none{border-top-left-radius:0;border-bottom-left-radius:0}.rounded-l-xl{border-top-left-radius:var(--radius-xl,.75rem);border-bottom-left-radius:var(--radius-xl,.75rem)}.rounded-r-lg{border-top-right-radius:var(--radius-lg,.5rem);border-bottom-right-radius:var(--radius-lg,.5rem)}.rounded-r-xl{border-top-right-radius:var(--radius-xl,.75rem);border-bottom-right-radius:var(--radius-xl,.75rem)}.border{border-style:var(--tw-border-style);border-width:1px}.border-0{border-style:var(--tw-border-style);border-width:0}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-\[6px\]{border-style:var(--tw-border-style);border-width:6px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-r{border-right-style:var(--tw-border-style);border-right-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.border-l-0{border-left-style:var(--tw-border-style);border-left-width:0}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-border{border-color:var(--border-default)}.border-destructive{border-color:var(--destructive)}.border-input{border-color:var(--border-default)}.border-muted-foreground{border-color:var(--text-secondary)}.border-nokia-bezel{border-color:var(--color-nokia-bezel)}.border-nokia-ink{border-color:var(--color-nokia-ink)}.border-nokia-ink\/40{border-color:#26331b66}@supports (color:color-mix(in lab, red, red)){.border-nokia-ink\/40{border-color:color-mix(in oklab, var(--color-nokia-ink) 40%, transparent)}}.border-ring{border-color:var(--focus-ring)}.border-transparent{border-color:#0000}.border-t-primary{border-top-color:var(--primary)}.bg-background,.bg-background\/95{background-color:var(--background)}@supports (color:color-mix(in lab, red, red)){.bg-background\/95{background-color:color-mix(in oklab, var(--background) 95%, transparent)}}.bg-black\/80{background-color:#000c}@supports (color:color-mix(in lab, red, red)){.bg-black\/80{background-color:color-mix(in oklab, var(--color-black,#000) 80%, transparent)}}.bg-border{background-color:var(--border-default)}.bg-card{background-color:var(--card)}.bg-destructive,.bg-destructive\/5{background-color:var(--destructive)}@supports (color:color-mix(in lab, red, red)){.bg-destructive\/5{background-color:color-mix(in oklab, var(--destructive) 5%, transparent)}}.bg-foreground,.bg-foreground\/40{background-color:var(--text-primary)}@supports (color:color-mix(in lab, red, red)){.bg-foreground\/40{background-color:color-mix(in oklab, var(--text-primary) 40%, transparent)}}.bg-muted,.bg-muted\/30{background-color:var(--muted)}@supports (color:color-mix(in lab, red, red)){.bg-muted\/30{background-color:color-mix(in oklab, var(--muted) 30%, transparent)}}.bg-nokia-screen{background-color:var(--color-nokia-screen)}.bg-popover{background-color:var(--popover)}.bg-primary,.bg-primary\/5{background-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.bg-primary\/5{background-color:color-mix(in oklab, var(--primary) 5%, transparent)}}.bg-secondary{background-color:var(--secondary)}.bg-transparent{background-color:#0000}.bg-\[linear-gradient\(90deg\,transparent_35\%\,rgba\(255\,255\,255\,0\.75\)_50\%\,transparent_65\%\)\]{background-image:linear-gradient(90deg,#0000 35%,#ffffffbf 50%,#0000 65%)}.scroll-fade-x{-webkit-mask-image:var(--scroll-fade-mask,linear-gradient(to right, transparent, black var(--scroll-fade-size,16px), black calc(100% - var(--scroll-fade-size,16px)), transparent));-webkit-mask-image:var(--scroll-fade-mask,linear-gradient(to right, transparent, black var(--scroll-fade-size,16px), black calc(100% - var(--scroll-fade-size,16px)), transparent));-webkit-mask-image:var(--scroll-fade-mask,linear-gradient(to right, transparent, black var(--scroll-fade-size,16px), black calc(100% - var(--scroll-fade-size,16px)), transparent));mask-image:var(--scroll-fade-mask,linear-gradient(to right, transparent, black var(--scroll-fade-size,16px), black calc(100% - var(--scroll-fade-size,16px)), transparent))}.fill-current{fill:currentColor}.fill-ring{fill:var(--focus-ring)}.object-cover{object-fit:cover}.p-0{padding:0}.p-0\.5{padding:calc(var(--spacing,.25rem) * .5)}.p-1{padding:var(--spacing,.25rem)}.p-2{padding:calc(var(--spacing,.25rem) * 2)}.p-4{padding:calc(var(--spacing,.25rem) * 4)}.p-5{padding:calc(var(--spacing,.25rem) * 5)}.p-6{padding:calc(var(--spacing,.25rem) * 6)}.p-8{padding:calc(var(--spacing,.25rem) * 8)}.p-px{padding:1px}.px-0{padding-inline:0}.px-1{padding-inline:var(--spacing,.25rem)}.px-1\.5{padding-inline:calc(var(--spacing,.25rem) * 1.5)}.px-2{padding-inline:calc(var(--spacing,.25rem) * 2)}.px-2\.5{padding-inline:calc(var(--spacing,.25rem) * 2.5)}.px-3{padding-inline:calc(var(--spacing,.25rem) * 3)}.px-4{padding-inline:calc(var(--spacing,.25rem) * 4)}.px-5{padding-inline:calc(var(--spacing,.25rem) * 5)}.px-6{padding-inline:calc(var(--spacing,.25rem) * 6)}.py-0{padding-block:0}.py-1{padding-block:var(--spacing,.25rem)}.py-1\.5{padding-block:calc(var(--spacing,.25rem) * 1.5)}.py-2{padding-block:calc(var(--spacing,.25rem) * 2)}.py-2\.5{padding-block:calc(var(--spacing,.25rem) * 2.5)}.py-3{padding-block:calc(var(--spacing,.25rem) * 3)}.py-3\.5{padding-block:calc(var(--spacing,.25rem) * 3.5)}.py-4{padding-block:calc(var(--spacing,.25rem) * 4)}.py-6{padding-block:calc(var(--spacing,.25rem) * 6)}.py-8{padding-block:calc(var(--spacing,.25rem) * 8)}.py-10{padding-block:calc(var(--spacing,.25rem) * 10)}.py-12{padding-block:calc(var(--spacing,.25rem) * 12)}.py-px{padding-block:1px}.pt-2{padding-top:calc(var(--spacing,.25rem) * 2)}.pt-4{padding-top:calc(var(--spacing,.25rem) * 4)}.pr-0{padding-right:0}.pr-2{padding-right:calc(var(--spacing,.25rem) * 2)}.pr-8{padding-right:calc(var(--spacing,.25rem) * 8)}.pb-3{padding-bottom:calc(var(--spacing,.25rem) * 3)}.pl-2{padding-left:calc(var(--spacing,.25rem) * 2)}.pl-4{padding-left:calc(var(--spacing,.25rem) * 4)}.pl-8{padding-left:calc(var(--spacing,.25rem) * 8)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.align-middle{vertical-align:middle}.ref-tag{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--tertiary);letter-spacing:var(--tracking-wide)}.font-nokia{font-family:var(--font-nokia)}.text-2xl{font-size:var(--text-2xl,1.5rem);line-height:var(--tw-leading,var(--text-2xl--line-height,calc(2 / 1.5)))}.text-base{font-size:var(--text-base,1rem);line-height:var(--tw-leading,var(--text-base--line-height,calc(1.5 / 1)))}.text-lg{font-size:var(--text-lg,1.125rem);line-height:var(--tw-leading,var(--text-lg--line-height,calc(1.75 / 1.125)))}.text-sm{font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)))}.text-xl{font-size:var(--text-xl,1.25rem);line-height:var(--tw-leading,var(--text-xl--line-height,calc(1.75 / 1.25)))}.text-xs{font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)))}.text-\[11px\]{font-size:11px}.leading-none{--tw-leading:1;line-height:1}.font-medium{--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}.font-normal{--tw-font-weight:var(--font-weight-normal,400);font-weight:var(--font-weight-normal,400)}.font-semibold{--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600)}.tracking-\[0\.18em\]{--tw-tracking:.18em;letter-spacing:.18em}.tracking-tight{--tw-tracking:var(--tracking-tight,-.025em);letter-spacing:var(--tracking-tight,-.025em)}.tracking-wider{--tw-tracking:var(--tracking-wider,.05em);letter-spacing:var(--tracking-wider,.05em)}.tracking-widest{--tw-tracking:var(--tracking-widest,.1em);letter-spacing:var(--tracking-widest,.1em)}.text-balance{text-wrap:balance}.whitespace-nowrap{white-space:nowrap}.text-accent-text{color:var(--text-accent)}.text-background{color:var(--background)}.text-card-foreground{color:var(--text-primary)}.text-current{color:currentColor}.text-destructive-foreground{color:var(--destructive-foreground)}.text-destructive-text{color:var(--text-destructive)}.text-foreground{color:var(--text-primary)}.text-muted-foreground{color:var(--text-secondary)}.text-nokia-ink{color:var(--color-nokia-ink)}.text-popover-foreground{color:var(--text-primary)}.text-primary-foreground{color:var(--primary-foreground)}.text-secondary-foreground{color:var(--text-primary)}.uppercase{text-transform:uppercase}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.underline-offset-4{text-underline-offset:4px}.opacity-0{opacity:0}.opacity-50{opacity:.5}.opacity-60{opacity:.6}.opacity-80{opacity:.8}.opacity-100{opacity:1}.shadow-\[0_0_0_3px_var\(--color-nokia-screen-deep\)\,0_10px_30px_-6px_rgba\(0\,0\,0\,0\.65\)\]{--tw-shadow:0 0 0 3px var(--tw-shadow-color,var(--color-nokia-screen-deep)), 0 10px 30px -6px var(--tw-shadow-color,#000000a6);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a), 0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-none{--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-1{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-2{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-background{--tw-ring-color:var(--background)}.ring-border\/5{--tw-ring-color:var(--border-default)}@supports (color:color-mix(in lab, red, red)){.ring-border\/5{--tw-ring-color:color-mix(in oklab, var(--border-default) 5%, transparent)}}.outline-hidden{--tw-outline-style:none;outline-style:none}@media (forced-colors:active){.outline-hidden{outline-offset:2px;outline:2px solid #0000}}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.backdrop-blur{--tw-backdrop-blur:blur(8px);-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s))}.transition-\[color\,box-shadow\]{transition-property:color,box-shadow;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s))}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s))}.transition-none{transition-property:none}.duration-150{--tw-duration:.15s;transition-duration:.15s}.duration-200{--tw-duration:.2s;transition-duration:.2s}.duration-300{--tw-duration:.3s;transition-duration:.3s}.ease-out{--tw-ease:var(--ease-out,cubic-bezier(0, 0, .2, 1));transition-timing-function:var(--ease-out,cubic-bezier(0, 0, .2, 1))}.outline-none{--tw-outline-style:none;outline-style:none}.select-none{-webkit-user-select:none;user-select:none}.state-settle{transition:transform .12s ease-out,opacity .12s ease-out}.group-has-disabled\:cursor-not-allowed:is(:where(.group):has(:disabled) *){cursor:not-allowed}.group-has-disabled\:opacity-50:is(:where(.group):has(:disabled) *){opacity:.5}.peer-disabled\:cursor-not-allowed:is(:where(.peer):disabled~*){cursor:not-allowed}.peer-disabled\:opacity-50:is(:where(.peer):disabled~*){opacity:.5}.selection\:bg-primary ::selection{background-color:var(--primary)}.selection\:bg-primary::selection{background-color:var(--primary)}.selection\:text-primary-foreground ::selection{color:var(--primary-foreground)}.selection\:text-primary-foreground::selection{color:var(--primary-foreground)}.file\:inline-flex::file-selector-button{display:inline-flex}.file\:h-7::file-selector-button{height:calc(var(--spacing,.25rem) * 7)}.file\:border-0::file-selector-button{border-style:var(--tw-border-style);border-width:0}.file\:bg-transparent::file-selector-button{background-color:#0000}.file\:text-sm::file-selector-button{font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)))}.file\:font-medium::file-selector-button{--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}.file\:text-foreground::file-selector-button{color:var(--text-primary)}.placeholder\:text-muted-foreground::placeholder{color:var(--text-secondary)}.after\:ml-0\.5:after{content:var(--tw-content);margin-left:calc(var(--spacing,.25rem) * .5)}.after\:text-destructive-text:after{content:var(--tw-content);color:var(--text-destructive)}.after\:content-\[\'\*\'\]:after{--tw-content:"*";content:var(--tw-content)}.last\:mb-0:last-child{margin-bottom:0}@media (hover:hover){.hover\:bg-accent:hover{background-color:var(--accent)}.hover\:bg-destructive\/90:hover{background-color:var(--destructive)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-destructive\/90:hover{background-color:color-mix(in oklab, var(--destructive) 90%, transparent)}}.hover\:bg-foreground\/60:hover{background-color:var(--text-primary)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-foreground\/60:hover{background-color:color-mix(in oklab, var(--text-primary) 60%, transparent)}}.hover\:bg-muted:hover{background-color:var(--muted)}.hover\:bg-nokia-ink:hover{background-color:var(--color-nokia-ink)}.hover\:bg-primary\/90:hover{background-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-primary\/90:hover{background-color:color-mix(in oklab, var(--primary) 90%, transparent)}}.hover\:bg-secondary\/80:hover{background-color:var(--secondary)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-secondary\/80:hover{background-color:color-mix(in oklab, var(--secondary) 80%, transparent)}}.hover\:bg-transparent:hover{background-color:#0000}.hover\:text-accent-foreground:hover{color:var(--accent-foreground)}.hover\:text-destructive:hover{color:var(--destructive)}.hover\:text-destructive-text:hover{color:var(--text-destructive)}.hover\:text-foreground:hover{color:var(--text-primary)}.hover\:text-muted-foreground:hover{color:var(--text-secondary)}.hover\:text-nokia-screen:hover{color:var(--color-nokia-screen)}.hover\:underline:hover{text-decoration-line:underline}}.focus-visible\:border:focus-visible{border-style:var(--tw-border-style);border-width:1px}.focus-visible\:border-ring:focus-visible{border-color:var(--focus-ring)}.focus-visible\:bg-muted\/10:focus-visible{background-color:var(--muted)}@supports (color:color-mix(in lab, red, red)){.focus-visible\:bg-muted\/10:focus-visible{background-color:color-mix(in oklab, var(--muted) 10%, transparent)}}.focus-visible\:bg-muted\/25:focus-visible{background-color:var(--muted)}@supports (color:color-mix(in lab, red, red)){.focus-visible\:bg-muted\/25:focus-visible{background-color:color-mix(in oklab, var(--muted) 25%, transparent)}}.focus-visible\:bg-primary:focus-visible{background-color:var(--primary)}.focus-visible\:ring-1:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus-visible\:ring-2:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus-visible\:ring-\[3px\]:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus-visible\:ring-ring:focus-visible,.focus-visible\:ring-ring\/50:focus-visible{--tw-ring-color:var(--focus-ring)}@supports (color:color-mix(in lab, red, red)){.focus-visible\:ring-ring\/50:focus-visible{--tw-ring-color:color-mix(in oklab, var(--focus-ring) 50%, transparent)}}.focus-visible\:ring-offset-2:focus-visible{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.focus-visible\:outline-2:focus-visible{outline-style:var(--tw-outline-style);outline-width:2px}.focus-visible\:outline-offset-2:focus-visible{outline-offset:2px}.focus-visible\:outline-ring:focus-visible{outline-color:var(--focus-ring)}.focus-visible\:outline-none:focus-visible{--tw-outline-style:none;outline-style:none}.focus-visible\:ring-inset:focus-visible{--tw-ring-inset:inset}.active\:cursor-grabbing:active{cursor:grabbing}.active\:bg-nokia-ink:active{background-color:var(--color-nokia-ink)}.active\:text-nokia-screen:active{color:var(--color-nokia-screen)}.disabled\:pointer-events-none:disabled{pointer-events:none}.disabled\:cursor-default:disabled{cursor:default}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-50:disabled{opacity:.5}.has-data-\[slot\=card-action\]\:grid:has([data-slot=card-action]){display:grid}.has-data-\[slot\=card-action\]\:grid-cols-\[1fr_auto\]:has([data-slot=card-action]){grid-template-columns:1fr auto}.has-\[\>svg\]\:grid-cols-\[calc\(var\(--spacing\)\*4\)_1fr\]:has(>svg){grid-template-columns:calc(var(--spacing) * 4) 1fr}.has-\[\>svg\]\:gap-x-3:has(>svg){column-gap:calc(var(--spacing,.25rem) * 3)}.aria-checked\:border-primary[aria-checked=true]{border-color:var(--primary)}.aria-checked\:bg-primary[aria-checked=true]{background-color:var(--primary)}.aria-checked\:text-primary-foreground[aria-checked=true]{color:var(--primary-foreground)}.aria-invalid\:border-destructive[aria-invalid=true]{border-color:var(--destructive)}.aria-invalid\:ring-destructive\/20[aria-invalid=true]{--tw-ring-color:var(--destructive)}@supports (color:color-mix(in lab, red, red)){.aria-invalid\:ring-destructive\/20[aria-invalid=true]{--tw-ring-color:color-mix(in oklab, var(--destructive) 20%, transparent)}}.aria-\[checked\=mixed\]\:border-primary[aria-checked=mixed]{border-color:var(--primary)}.aria-\[checked\=mixed\]\:bg-primary[aria-checked=mixed]{background-color:var(--primary)}.aria-\[checked\=mixed\]\:text-primary-foreground[aria-checked=mixed]{color:var(--primary-foreground)}.data-active\:bg-background[data-active]{background-color:var(--background)}.data-active\:text-foreground[data-active]{color:var(--text-primary)}.data-active\:ring-1[data-active]{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.data-active\:ring-border[data-active]{--tw-ring-color:var(--border-default)}.data-active\:ring-inset[data-active]{--tw-ring-inset:inset}.data-checked\:justify-end[data-checked]{justify-content:flex-end}.data-checked\:bg-primary[data-checked]{background-color:var(--primary)}.data-checked\:opacity-100[data-checked]{opacity:1}.data-closed\:animate-out[data-closed]{animation:var(--animate-out)}.data-closed\:fade-out-0[data-closed]{animation-name:fade-out}.data-closed\:zoom-out-95[data-closed]{animation-name:zoom-out}.data-disabled\:pointer-events-none[data-disabled]{pointer-events:none}.data-disabled\:opacity-50[data-disabled]{opacity:.5}.data-ending-style\:animate-fade-out[data-ending-style]{animation:var(--animate-fade-out)}.data-highlighted\:bg-muted[data-highlighted]{background-color:var(--muted)}.data-highlighted\:text-muted-foreground[data-highlighted]{color:var(--text-secondary)}.data-open\:animate-in[data-open]{animation:var(--animate-in)}.data-open\:bg-muted[data-open]{background-color:var(--muted)}.data-open\:text-muted-foreground[data-open]{color:var(--text-secondary)}.data-open\:fade-in-0[data-open]{animation-name:fade-in}.data-open\:zoom-in-95[data-open]{animation-name:zoom-in}.data-placeholder\:text-muted-foreground[data-placeholder]{color:var(--text-secondary)}.data-pressed\:bg-foreground[data-pressed]{background-color:var(--text-primary)}.data-pressed\:text-background[data-pressed]{color:var(--background)}.data-starting-style\:animate-fade-in[data-starting-style]{animation:var(--animate-fade-in)}.data-unchecked\:justify-start[data-unchecked]{justify-content:flex-start}.data-unchecked\:bg-input[data-unchecked]{background-color:var(--border-default)}.data-unchecked\:opacity-0[data-unchecked]{opacity:0}.data-\[active\]\:border-nokia-ink[data-active]{border-color:var(--color-nokia-ink)}.data-\[active\]\:bg-nokia-ink[data-active]{background-color:var(--color-nokia-ink)}.data-\[active\]\:font-semibold[data-active]{--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600)}.data-\[active\]\:text-foreground[data-active]{color:var(--text-primary)}.data-\[active\]\:text-nokia-screen[data-active]{color:var(--color-nokia-screen)}.data-\[hovering\]\:opacity-100[data-hovering]{opacity:1}.data-\[inset\]\:pl-8[data-inset]{padding-left:calc(var(--spacing,.25rem) * 8)}.data-\[orientation\=horizontal\]\:h-2\.5[data-orientation=horizontal]{height:calc(var(--spacing,.25rem) * 2.5)}.data-\[orientation\=horizontal\]\:flex-col[data-orientation=horizontal]{flex-direction:column}.data-\[orientation\=vertical\]\:w-2\.5[data-orientation=vertical]{width:calc(var(--spacing,.25rem) * 2.5)}.data-\[scrolling\]\:opacity-100[data-scrolling]{opacity:1}.data-\[side\=bottom\]\:top-\[-8px\][data-side=bottom]{top:-8px}.data-\[side\=left\]\:right-\[-13px\][data-side=left]{right:-13px}.data-\[side\=left\]\:rotate-90[data-side=left]{rotate:90deg}.data-\[side\=right\]\:left-\[-13px\][data-side=right]{left:-13px}.data-\[side\=right\]\:-rotate-90[data-side=right]{rotate:-90deg}.data-\[side\=top\]\:bottom-\[-8px\][data-side=top]{bottom:-8px}.data-\[size\=default\]\:h-9[data-size=default]{height:calc(var(--spacing,.25rem) * 9)}.data-\[size\=sm\]\:h-8[data-size=sm]{height:calc(var(--spacing,.25rem) * 8)}:is(.\*\:data-\[slot\=alert-description\]\:text-destructive-text>*)[data-slot=alert-description]{color:var(--text-destructive)}:is(.\*\:data-\[slot\=avatar\]\:ring-2>*)[data-slot=avatar]{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}:is(.\*\:data-\[slot\=avatar\]\:ring-background>*)[data-slot=avatar]{--tw-ring-color:var(--background)}:is(.\*\:data-\[slot\=select-value\]\:line-clamp-1>*)[data-slot=select-value]{-webkit-line-clamp:1;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}:is(.\*\:data-\[slot\=select-value\]\:flex>*)[data-slot=select-value]{display:flex}:is(.\*\:data-\[slot\=select-value\]\:items-center>*)[data-slot=select-value]{align-items:center}:is(.\*\:data-\[slot\=select-value\]\:gap-2>*)[data-slot=select-value]{gap:calc(var(--spacing,.25rem) * 2)}.data-\[state\=selected\]\:bg-muted[data-state=selected]{background-color:var(--muted)}.data-\[variant\=destructive\]\:text-destructive-text[data-variant=destructive]{color:var(--text-destructive)}.data-\[variant\=destructive\]\:data-highlighted\:bg-destructive\/10[data-variant=destructive][data-highlighted]{background-color:var(--destructive)}@supports (color:color-mix(in lab, red, red)){.data-\[variant\=destructive\]\:data-highlighted\:bg-destructive\/10[data-variant=destructive][data-highlighted]{background-color:color-mix(in oklab, var(--destructive) 10%, transparent)}}@supports ((-webkit-backdrop-filter:var(--tw)) or (backdrop-filter:var(--tw))){.supports-backdrop-filter\:bg-background\/60{background-color:var(--background)}@supports (color:color-mix(in lab, red, red)){.supports-backdrop-filter\:bg-background\/60{background-color:color-mix(in oklab, var(--background) 60%, transparent)}}}@media (prefers-reduced-motion:no-preference){.motion-safe\:-translate-y-0\.5{--tw-translate-y:calc(var(--spacing,.25rem) * -.5);translate:var(--tw-translate-x) var(--tw-translate-y)}.motion-safe\:animate-pulse{animation:var(--animate-pulse,pulse 2s cubic-bezier(.4, 0, .6, 1) infinite)}.motion-safe\:animate-spin{animation:var(--animate-spin,spin 1s linear infinite)}.motion-safe\:transition-\[transform\,opacity\]{transition-property:transform,opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s))}.motion-safe\:duration-200{--tw-duration:.2s;transition-duration:.2s}.motion-safe\:ease-in-out{--tw-ease:var(--ease-in-out,cubic-bezier(.4, 0, .2, 1));transition-timing-function:var(--ease-in-out,cubic-bezier(.4, 0, .2, 1))}}@media (prefers-reduced-motion:reduce){.motion-reduce\:translate-y-0{--tw-translate-y:0px;translate:var(--tw-translate-x) var(--tw-translate-y)}.motion-reduce\:scale-100{--tw-scale-x:100%;--tw-scale-y:100%;--tw-scale-z:100%;scale:var(--tw-scale-x) var(--tw-scale-y)}.motion-reduce\:transition-none{transition-property:none}}@media (width>=40rem){.sm\:top-4{top:calc(var(--spacing,.25rem) * 4)}.sm\:top-\[50\%\]{top:50%}.sm\:right-4{right:calc(var(--spacing,.25rem) * 4)}.sm\:bottom-auto{bottom:auto}.sm\:left-\[50\%\]{left:50%}.sm\:flex{display:flex}.sm\:hidden{display:none}.sm\:w-\[calc\(100\%-2rem\)\]{width:calc(100% - 2rem)}.sm\:max-w-\[30rem\]{max-width:30rem}.sm\:-translate-x-1\/2{--tw-translate-x:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.sm\:-translate-y-1\/2{--tw-translate-y:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:flex-row{flex-direction:row}.sm\:justify-end{justify-content:flex-end}.sm\:rounded-xl{border-radius:var(--radius-xl,.75rem)}.sm\:p-6{padding:calc(var(--spacing,.25rem) * 6)}}@media (width>=48rem){.md\:inset-y-2{inset-block:calc(var(--spacing,.25rem) * 2)}.md\:top-4{top:calc(var(--spacing,.25rem) * 4)}.md\:right-2{right:calc(var(--spacing,.25rem) * 2)}.md\:right-4{right:calc(var(--spacing,.25rem) * 4)}.md\:bottom-auto{bottom:auto}.md\:left-auto{left:auto}.md\:min-h-0{min-height:0}.md\:w-3\/4{width:75%}.md\:max-w-sm{max-width:var(--container-sm,24rem)}.md\:text-sm{font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)))}}.\[\&_p\]\:leading-relaxed p{--tw-leading:var(--leading-relaxed,1.625);line-height:var(--leading-relaxed,1.625)}.\[\&_svg\]\:pointer-events-none svg{pointer-events:none}.\[\&_svg\]\:size-4 svg{width:calc(var(--spacing,.25rem) * 4);height:calc(var(--spacing,.25rem) * 4)}.\[\&_svg\]\:size-4\.5 svg{width:calc(var(--spacing,.25rem) * 4.5);height:calc(var(--spacing,.25rem) * 4.5)}.\[\&_svg\]\:shrink-0 svg{flex-shrink:0}.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 svg:not([class*=size-]){width:calc(var(--spacing,.25rem) * 4);height:calc(var(--spacing,.25rem) * 4)}.\[\&_svg\:not\(\[class\*\=\'text-\'\]\)\]\:text-muted-foreground svg:not([class*=text-]){color:var(--text-secondary)}.\[\&_tr\]\:border-b tr{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.\[\&_tr\:last-child\]\:border-0 tr:last-child{border-style:var(--tw-border-style);border-width:0}.\[\&\:\:-webkit-calendar-picker-indicator\]\:appearance-none::-webkit-calendar-picker-indicator{appearance:none}.\[\&\:\:-webkit-calendar-picker-indicator\]\:opacity-0::-webkit-calendar-picker-indicator{opacity:0}.\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0:has([role=checkbox]){padding-right:0}.\[\&\>svg\]\:pointer-events-none>svg{pointer-events:none}.\[\&\>svg\]\:size-3>svg{width:calc(var(--spacing,.25rem) * 3);height:calc(var(--spacing,.25rem) * 3)}.\[\&\>svg\]\:size-4>svg{width:calc(var(--spacing,.25rem) * 4);height:calc(var(--spacing,.25rem) * 4)}.\[\&\>svg\]\:size-5>svg{width:calc(var(--spacing,.25rem) * 5);height:calc(var(--spacing,.25rem) * 5)}.\[\&\>svg\]\:translate-y-0\.5>svg{--tw-translate-y:calc(var(--spacing,.25rem) * .5);translate:var(--tw-translate-x) var(--tw-translate-y)}.\[\&\>svg\]\:text-current>svg{color:currentColor}.\[\&\[data-state\=open\]\>svg\]\:rotate-180[data-state=open]>svg{rotate:180deg}@media (hover:hover){a.\[a\&\]\:hover\:bg-destructive\/90:hover{background-color:var(--destructive)}@supports (color:color-mix(in lab, red, red)){a.\[a\&\]\:hover\:bg-destructive\/90:hover{background-color:color-mix(in oklab, var(--destructive) 90%, transparent)}}a.\[a\&\]\:hover\:bg-muted:hover{background-color:var(--muted)}a.\[a\&\]\:hover\:bg-primary\/90:hover{background-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){a.\[a\&\]\:hover\:bg-primary\/90:hover{background-color:color-mix(in oklab, var(--primary) 90%, transparent)}}a.\[a\&\]\:hover\:bg-secondary\/80:hover{background-color:var(--secondary)}@supports (color:color-mix(in lab, red, red)){a.\[a\&\]\:hover\:bg-secondary\/80:hover{background-color:color-mix(in oklab, var(--secondary) 80%, transparent)}}a.\[a\&\]\:hover\:underline:hover{text-decoration-line:underline}}}:root{--spacing:.25rem;--spacing-scale-0:0rem;--spacing-scale-1:.25rem;--spacing-scale-2:.5rem;--spacing-scale-3:.75rem;--spacing-scale-4:1rem;--spacing-scale-5:1.25rem;--spacing-scale-6:1.5rem;--spacing-scale-7:1.75rem;--spacing-scale-8:2rem;--spacing-scale-9:2.25rem;--spacing-scale-10:2.5rem;--spacing-scale-11:2.75rem;--spacing-scale-12:3rem;--spacing-scale-14:3.5rem;--spacing-scale-16:4rem;--spacing-scale-20:5rem;--spacing-scale-24:6rem;--spacing-scale-28:7rem;--spacing-scale-32:8rem;--spacing-scale-36:9rem;--spacing-scale-40:10rem;--spacing-scale-44:11rem;--spacing-scale-48:12rem;--spacing-scale-52:13rem;--spacing-scale-56:14rem;--spacing-scale-60:15rem;--spacing-scale-64:16rem;--spacing-scale-72:18rem;--spacing-scale-80:20rem;--spacing-scale-96:24rem;--spacing-scale-px:1px;--spacing-scale-0-5:.125rem;--spacing-scale-1-5:.375rem;--spacing-scale-2-5:.625rem;--spacing-scale-3-5:.875rem;--font-sans:Geist, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-serif:system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:"Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--text-xs:.75rem;--text-sm:.875rem;--text-base:1rem;--text-lg:1.125rem;--text-xl:1.25rem;--text-2xl:1.5rem;--text-3xl:1.875rem;--text-4xl:2.25rem;--text-5xl:3rem;--text-6xl:3.75rem;--text-7xl:4.5rem;--text-8xl:6rem;--text-9xl:8rem;--text-line-height-xs:1.33333;--text-line-height-sm:1.42857;--text-line-height-base:1.5;--text-line-height-lg:1.55556;--text-line-height-xl:1.4;--text-line-height-2xl:1.33333;--text-line-height-3xl:1.2;--text-line-height-4xl:1.11111;--text-line-height-5xl:1;--text-line-height-6xl:1;--text-line-height-7xl:1;--text-line-height-8xl:1;--text-line-height-9xl:1;--font-weight-thin:100;--font-weight-extralight:200;--font-weight-light:300;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--font-weight-extrabold:800;--font-weight-black:900;--tracking-tighter:-.05em;--tracking-tight:-.025em;--tracking-normal:0em;--tracking-wide:.025em;--tracking-wider:.05em;--tracking-widest:.1em;--leading-tight:1.25;--leading-snug:1.375;--leading-normal:1.5;--leading-relaxed:1.625;--leading-loose:2;--radius-xs:.125rem;--radius-sm:.25rem;--radius-md:.375rem;--radius-lg:.5rem;--radius-xl:.75rem;--radius-2xl:1rem;--radius-3xl:1.5rem;--radius-4xl:2rem;--radius-full:9999px;--shadow-2xs:0px 1px 0px 0px #0000000d;--shadow-xs:0px 1px 2px 0px #0000000d;--shadow-sm:0px 1px 3px 0px #0000001a, 0px 1px 2px -1px #0000001a;--shadow-md:0px 4px 6px -1px #0000001a, 0px 2px 4px -2px #0000001a;--shadow-lg:0px 10px 15px -3px #0000001a, 0px 4px 6px -4px #0000001a;--shadow-xl:0px 20px 25px -5px #0000001a, 0px 8px 10px -6px #0000001a;--shadow-2xl:0px 25px 50px -12px #00000040;--shadow-none:0px 0px 0px 0px transparent;--breakpoint-sm:40rem;--breakpoint-md:48rem;--breakpoint-lg:64rem;--breakpoint-xl:80rem;--breakpoint-2xl:96rem;--container-3xs:16rem;--container-2xs:18rem;--container-xs:20rem;--container-sm:24rem;--container-md:28rem;--container-lg:32rem;--container-xl:36rem;--container-2xl:42rem;--container-3xl:48rem;--container-4xl:56rem;--container-5xl:64rem;--container-6xl:72rem;--container-7xl:80rem;--z-index-0:0;--z-index-10:10;--z-index-20:20;--z-index-30:30;--z-index-40:40;--z-index-50:50;--z-index-auto:auto;--ease-in:cubic-bezier(.4, 0, 1, 1);--ease-out:cubic-bezier(0, 0, .2, 1);--ease-in-out:cubic-bezier(.4, 0, .2, 1);--ease-drawer:cubic-bezier(.32, .72, 0, 1);--duration-75:75ms;--duration-100:.1s;--duration-150:.15s;--duration-200:.2s;--duration-300:.3s;--duration-500:.5s;--duration-700:.7s;--duration-1000:1s;--animate-spin:spin 1s linear infinite;--animate-ping:ping 1s cubic-bezier(0, 0, .2, 1) infinite;--animate-pulse:pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;--animate-bounce:bounce 1s infinite;--background:#fff;--card:#fff;--secondary:#f5f5f5;--popover:#fff;--muted:#fafafa;--text-primary:#111;--text-secondary:#6b6b6b;--tertiary:#6b6b6b;--primary:#171717;--accent:#eff6ff;--destructive:#dc2626;--success:#16a34a;--warning:#d97706;--text-success:#15803d;--text-warning:#92400e;--success-foreground:#0a0a0a;--warning-foreground:#0a0a0a;--primary-foreground:#fff;--accent-foreground:#1d4ed8;--destructive-foreground:#fff;--text-destructive:#b91c1c;--text-accent:#2563eb;--border-default:#e5e5e5;--focus-ring:#2563eb;--chart-1:#2563eb;--chart-2:#111;--chart-3:#737373;--chart-4:#93c5fd;--chart-5:#d4d4d8;--chart-positive:#15803d;--chart-negative:#dc2626;--chart-neutral:#737373;--overlay-scrim:#000}@media (prefers-color-scheme:dark){:root{--background:#0a0a0a;--card:#111;--secondary:#1a1a1a;--popover:#111;--muted:#141414;--text-primary:#fafafa;--text-secondary:#a3a3a3;--tertiary:#a3a3a3;--primary:#ededed;--accent:#1e293b;--destructive:#dc2626;--success:#22c55e;--warning:#f59e0b;--text-success:#4ade80;--text-warning:#fcd34d;--success-foreground:#0a0a0a;--warning-foreground:#0a0a0a;--primary-foreground:#0a0a0a;--accent-foreground:#93c5fd;--destructive-foreground:#fff;--text-destructive:#fca5a5;--text-accent:#60a5fa;--border-default:#262626;--focus-ring:#3b82f6;--chart-1:#3b82f6;--chart-2:#ededed;--chart-3:#737373;--chart-4:#93c5fd;--chart-5:#3f3f46;--chart-positive:#22c55e;--chart-negative:#ef4444;--chart-neutral:#a3a3a3;--overlay-scrim:#000}}:root.dark{--background:#0a0a0a;--card:#111;--secondary:#1a1a1a;--popover:#111;--muted:#141414;--text-primary:#fafafa;--text-secondary:#a3a3a3;--tertiary:#a3a3a3;--primary:#ededed;--accent:#1e293b;--destructive:#dc2626;--success:#22c55e;--warning:#f59e0b;--text-success:#4ade80;--text-warning:#fcd34d;--success-foreground:#0a0a0a;--warning-foreground:#0a0a0a;--primary-foreground:#0a0a0a;--accent-foreground:#93c5fd;--destructive-foreground:#fff;--text-destructive:#fca5a5;--text-accent:#60a5fa;--border-default:#262626;--focus-ring:#3b82f6;--chart-1:#3b82f6;--chart-2:#ededed;--chart-3:#737373;--chart-4:#93c5fd;--chart-5:#3f3f46;--chart-positive:#22c55e;--chart-negative:#ef4444;--chart-neutral:#a3a3a3;--overlay-scrim:#000}@keyframes accordion-down{0%{height:0}to{height:var(--accordion-content-height)}}@keyframes accordion-up{0%{height:var(--accordion-content-height)}to{height:0}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes fade-out{0%{opacity:1}to{opacity:0}}@keyframes zoom-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes zoom-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}@keyframes sheet-slide-in-bottom{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}@keyframes sheet-slide-out-bottom{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(100%)}}@keyframes sheet-slide-in-right{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}@keyframes sheet-slide-out-right{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(100%)}}@keyframes progress-shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.data-open\:animate-in[data-open],.data-open\:animate-in[data-state=open]{animation:.15s ease-out fade-in,.15s ease-out zoom-in}.data-closed\:animate-out[data-closed],.data-closed\:animate-out[data-state=closed]{animation:.12s ease-in fade-out,.12s ease-in zoom-out}[data-slot=sheet-overlay][data-open],[data-slot=sheet-overlay][data-state=open]{animation:fade-in .4s var(--ease-out)}[data-slot=sheet-overlay][data-closed],[data-slot=sheet-overlay][data-state=closed]{animation:fade-out .2s var(--ease-in)}[data-slot=sheet-content][data-open],[data-slot=sheet-content][data-state=open]{animation:sheet-slide-in-bottom .3s var(--ease-drawer)}[data-slot=sheet-content][data-closed],[data-slot=sheet-content][data-state=closed]{animation:sheet-slide-out-bottom .2s var(--ease-drawer)}[data-slot=dialog-overlay][data-open],[data-slot=dialog-overlay][data-state=open]{animation:fade-in .2s var(--ease-out)}[data-slot=dialog-overlay][data-closed],[data-slot=dialog-overlay][data-state=closed]{animation:fade-out .2s var(--ease-in)}[data-slot=dialog-content][data-open],[data-slot=dialog-content][data-state=open]{animation:sheet-slide-in-bottom .3s var(--ease-drawer)}[data-slot=dialog-content][data-closed],[data-slot=dialog-content][data-state=closed]{animation:sheet-slide-out-bottom .2s var(--ease-drawer)}@media (width>=640px){[data-slot=dialog-content][data-open],[data-slot=dialog-content][data-state=open]{animation:fade-in .15s var(--ease-out), zoom-in .15s var(--ease-out)}[data-slot=dialog-content][data-closed],[data-slot=dialog-content][data-state=closed]{animation:fade-out .2s var(--ease-in), zoom-out .2s var(--ease-in)}}@media (width>=768px){[data-slot=sheet-content][data-open],[data-slot=sheet-content][data-state=open]{animation:sheet-slide-in-right .3s var(--ease-drawer)}[data-slot=sheet-content][data-closed],[data-slot=sheet-content][data-state=closed]{animation:sheet-slide-out-right .2s var(--ease-drawer)}}@media (prefers-reduced-motion:reduce){.animate-in,.animate-out,[data-open],[data-closed]{animation:none!important}[data-slot=sheet-overlay][data-open],[data-slot=sheet-overlay][data-state=open]{animation:fade-in .12s var(--ease-out)!important}[data-slot=sheet-overlay][data-closed],[data-slot=sheet-overlay][data-state=closed]{animation:fade-out .12s var(--ease-in)!important}[data-slot=sheet-content][data-open],[data-slot=sheet-content][data-state=open]{animation:fade-in var(--duration-150) var(--ease-out)!important}[data-slot=sheet-content][data-closed],[data-slot=sheet-content][data-state=closed]{animation:fade-out .12s var(--ease-in)!important}[data-slot=dialog-overlay][data-open],[data-slot=dialog-overlay][data-state=open]{animation:fade-in .12s var(--ease-out)!important}[data-slot=dialog-overlay][data-closed],[data-slot=dialog-overlay][data-state=closed]{animation:fade-out .12s var(--ease-in)!important}[data-slot=dialog-content][data-open],[data-slot=dialog-content][data-state=open]{animation:fade-in var(--duration-150) var(--ease-out)!important}[data-slot=dialog-content][data-closed],[data-slot=dialog-content][data-state=closed]{animation:fade-out .12s var(--ease-in)!important}}.nokia-screen{background-image:repeating-linear-gradient(#0000000d 0 1px,#0000 1px 3px)}.nokia-screen:before{content:"";pointer-events:none;position:absolute;inset:0;box-shadow:inset 0 0 12px 2px #00000040}.ui-mobile-sheet-backdrop{display:none}.ui-mobile-sheet-positioner{z-index:var(--z-index-50)}.ui-mobile-sheet-close{display:none}@media (width<=767px){.ui-mobile-sheet-backdrop{z-index:var(--z-index-50);background:var(--overlay-scrim);display:block;position:fixed}@supports (color:color-mix(in lab, red, red)){.ui-mobile-sheet-backdrop{background:color-mix(in srgb, var(--overlay-scrim) 50%, transparent)}}.ui-mobile-sheet-backdrop{inset:0}.ui-mobile-sheet-positioner{display:block;z-index:calc(var(--z-index-50) + 1)!important;width:100%!important;height:auto!important;max-height:none!important;position:fixed!important;inset:auto 0 0!important;transform:none!important}.ui-mobile-sheet-popup{overscroll-behavior:contain;width:100%!important;min-width:0!important;max-width:none!important;max-height:min(75dvh, var(--available-height,75dvh))!important;padding-bottom:max(var(--spacing-scale-4), env(safe-area-inset-bottom))!important;border-start-start-radius:var(--radius-2xl)!important;border-start-end-radius:var(--radius-2xl)!important;border-end-end-radius:0!important;border-end-start-radius:0!important}.ui-mobile-popover-popup{padding-block-start:calc(var(--spacing-scale-12) + var(--spacing-scale-2))!important}.ui-mobile-sheet-close{z-index:var(--z-index-10);top:var(--spacing-scale-2);right:var(--spacing-scale-3);width:var(--spacing-scale-12);height:var(--spacing-scale-12);border:1px solid var(--border-default);border-radius:var(--radius-full);color:var(--text-secondary);background:var(--background);cursor:pointer;place-items:center;display:grid;position:absolute}.ui-mobile-sheet-close svg{width:var(--spacing-scale-5);height:var(--spacing-scale-5)}[data-slot=dropdown-menu-content] [data-slot^=dropdown-menu-item],[data-slot=select-content] [data-slot=select-item]{min-height:var(--spacing-scale-12)}[data-slot=dropdown-menu-content][data-open],[data-slot=select-content][data-open],[data-slot=popover-content][data-open]{animation:sheet-slide-in-bottom .3s var(--ease-drawer)}[data-slot=dropdown-menu-content][data-closed],[data-slot=select-content][data-closed],[data-slot=popover-content][data-closed]{animation:sheet-slide-out-bottom .2s var(--ease-drawer)}}.page-shell{gap:calc(var(--spacing,.25rem) * 12);width:100%;padding-inline:calc(var(--spacing,.25rem) * 4);padding-block:calc(var(--spacing,.25rem) * 16);flex-direction:column;margin-inline:auto;display:flex;position:relative}@media (width>=48rem){.page-shell{gap:calc(var(--spacing,.25rem) * 16);padding-inline:calc(var(--spacing,.25rem) * 6);padding-block:calc(var(--spacing,.25rem) * 20)}}.page-shell-detail{gap:calc(var(--spacing,.25rem) * 10);width:100%;padding-inline:calc(var(--spacing,.25rem) * 4);padding-block:calc(var(--spacing,.25rem) * 16);flex-direction:column;margin-inline:auto;display:flex;position:relative}@media (width>=48rem){.page-shell-detail{gap:calc(var(--spacing,.25rem) * 12);padding-inline:calc(var(--spacing,.25rem) * 6);padding-block:calc(var(--spacing,.25rem) * 20)}}.page-bleed{flex-direction:column;width:100%;display:flex}.layout-stack{gap:calc(var(--spacing,.25rem) * 4);flex-direction:column;display:flex}.list-row{gap:calc(var(--spacing,.25rem) * 4);padding-inline:0;padding-block:calc(var(--spacing,.25rem) * 6);display:flex}@media (width>=48rem){.list-row{gap:calc(var(--spacing,.25rem) * 6);padding-block:calc(var(--spacing,.25rem) * 8)}}.list-media{isolation:isolate;border-radius:var(--radius-md,.375rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--border-default);background-color:var(--card);padding:calc(var(--spacing,.25rem) * 2);--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);flex-shrink:0;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.list-media-wide{height:calc(var(--spacing,.25rem) * 14);width:calc(var(--spacing,.25rem) * 32)}.list-media-square{width:calc(var(--spacing,.25rem) * 10);height:calc(var(--spacing,.25rem) * 10)}@media (width>=40rem){.list-media-square{width:calc(var(--spacing,.25rem) * 12);height:calc(var(--spacing,.25rem) * 12)}}.list-media-placeholder{pointer-events:none;justify-content:center;align-items:center;gap:calc(var(--spacing,.25rem) * 1.5);transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));--tw-duration:.15s;transition-duration:.15s;display:flex;position:absolute;inset:0}.section{gap:calc(var(--spacing,.25rem) * 4);border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--border-default);padding-inline:calc(var(--spacing,.25rem) * 4);padding-block:calc(var(--spacing,.25rem) * 12);flex-direction:column;display:flex}@media (width>=48rem){.section{padding-inline:calc(var(--spacing,.25rem) * 6);padding-block:calc(var(--spacing,.25rem) * 16)}}.section-hero{gap:calc(var(--spacing,.25rem) * 6);padding-block:calc(var(--spacing,.25rem) * 16)}@media (width>=48rem){.section-hero{padding-block:calc(var(--spacing,.25rem) * 20)}}.detail-hero{gap:calc(var(--spacing,.25rem) * 4);padding-block:calc(var(--spacing,.25rem) * 10)}@media (width>=48rem){.detail-hero{gap:calc(var(--spacing,.25rem) * 6);padding-block:calc(var(--spacing,.25rem) * 16)}}.section-compact{gap:calc(var(--spacing,.25rem) * 4);padding-block:calc(var(--spacing,.25rem) * 8)}@media (width>=48rem){.section-compact{padding-block:calc(var(--spacing,.25rem) * 12)}}.detail-navigation{gap:calc(var(--spacing,.25rem) * 6);flex-direction:column;display:flex}@media (width>=40rem){.detail-navigation{flex-direction:row;justify-content:space-between}}.detail-navigation-link{min-height:calc(var(--spacing,.25rem) * 9);justify-content:center;gap:var(--spacing,.25rem);flex-direction:column;display:flex}.ui-flat-card{border-radius:var(--radius-md,.375rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--border-default);background-color:var(--card);padding:calc(var(--spacing,.25rem) * 3)}.ui-data-label{font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);--tw-tracking:var(--tracking-wider,.05em);letter-spacing:var(--tracking-wider,.05em);color:var(--text-secondary);text-transform:uppercase}.ui-data-value{font-size:var(--text-base,1rem);line-height:var(--tw-leading,var(--text-base--line-height,calc(1.5 / 1)));--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600);color:var(--text-primary);--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.ui-eyebrow{font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);--tw-tracking:var(--tracking-widest,.1em);letter-spacing:var(--tracking-widest,.1em);color:var(--text-secondary);text-transform:uppercase}[data-slot=command-item] [data-slot=command-shortcut]{opacity:0;transition:opacity .12s ease-out}[data-slot=command-item][data-highlighted] [data-slot=command-shortcut]{opacity:1}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-scroll-snap-strictness{syntax:"*";inherits:false;initial-value:proximity}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-space-x-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-divide-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-ordinal{syntax:"*";inherits:false}@property --tw-slashed-zero{syntax:"*";inherits:false}@property --tw-numeric-figure{syntax:"*";inherits:false}@property --tw-numeric-spacing{syntax:"*";inherits:false}@property --tw-numeric-fraction{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@property --tw-content{syntax:"*";inherits:false;initial-value:""}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{50%{opacity:.5}}
+/*$vite$:1*/

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ponti-studios/ui",
-  "version": "1.7.0",
+  "version": "2.0.0",
   "private": false,
   "description": "Shared UI component library for Ponti Studios",
   "license": "MIT",
@@ -8,13 +8,19 @@
     "type": "git",
     "url": "git+https://github.com/ponti-studios/ui.git"
   },
+  "bin": {
+    "create-ponti-project": "./scripts/create-project.mjs"
+  },
   "files": [
     "src",
+    "dist/styles.css",
+    "scripts/create-project.mjs",
+    "templates/web-vite",
     "THIRD_PARTY_NOTICES.md"
   ],
   "type": "module",
   "sideEffects": [
-    "./src/styles/index.css",
+    "./dist/styles.css",
     "./src/styles/animations.css"
   ],
   "exports": {
@@ -66,11 +72,16 @@
       "types": "./src/styles/tokens/css-vars.ts",
       "import": "./src/styles/tokens/css-vars.ts"
     },
+    "./native": {
+      "types": "./src/native/index.ts",
+      "react-native": "./src/native/index.ts",
+      "import": "./src/native/index.ts"
+    },
     "./hooks": {
       "types": "./src/hooks/index.ts",
       "import": "./src/hooks/index.ts"
     },
-    "./styles.css": "./src/styles/index.css",
+    "./styles.css": "./dist/styles.css",
     "./animations.css": "./src/styles/animations.css"
   },
   "publishConfig": {
@@ -83,9 +94,12 @@
     "test": "make test",
     "storybook": "make storybook",
     "format": "make format",
-    "prepack": "make check"
+    "create:project": "node ./scripts/create-project.mjs",
+    "build:styles": "vite build --config vite.styles.config.ts",
+    "prepack": "pnpm run check"
   },
   "dependencies": {
+    "@babel/runtime": "^7.29.7",
     "@base-ui/react": "^1.6.0",
     "@radix-ui/colors": "^3.0.0",
     "class-variance-authority": "^0.7.1",
@@ -106,27 +120,32 @@
     "@types/node": "^26.1.1",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
-    "@vitest/browser": "4.1.10",
-    "@vitest/browser-playwright": "4.1.10",
+    "@vitest/browser": "4.1.11",
+    "@vitest/browser-playwright": "4.1.11",
     "oxfmt": "0.64.0",
     "oxlint": "^1.74.0",
     "playwright": "^1.61.1",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
+    "react-native": "0.87.1",
     "storybook": "10.5.6",
     "style-dictionary": "5.5.0",
     "tailwindcss": "^4.3.3",
-    "typescript": "6.0.3",
+    "typescript": "7.0.2",
     "vite": "^8.1.5",
-    "vitest": "^4.1.10"
+    "vitest": "4.1.11"
   },
   "peerDependencies": {
     "react": "^18.2.0 || ^19.0.0",
-    "react-dom": "^18.2.0 || ^19.0.0"
+    "react-dom": "^18.2.0 || ^19.0.0",
+    "react-native": ">=0.80"
   },
   "peerDependenciesMeta": {
     "react-dom": {
       "optional": true
+    },
+    "react-native": {
+      "optional": true
     }
   },
   "packageManager": "pnpm@11.10.0"

package/scripts/create-project.mjs

@@ -0,0 +1,82 @@
+#!/usr/bin/env node
+
+import { cp, mkdir, readdir, readFile, writeFile } from "node:fs/promises";
+import { basename, dirname, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+import { spawnSync } from "node:child_process";
+
+const templateDirectory = fileURLToPath(new URL("../templates/web-vite/", import.meta.url));
+const arguments_ = process.argv.slice(2);
+const noInstall = arguments_.includes("--no-install");
+const targetArgument = arguments_.find((argument) => !argument.startsWith("-"));
+
+if (arguments_.includes("--help") || arguments_.includes("-h")) {
+  printUsage();
+  process.exit(0);
+}
+
+if (!targetArgument) {
+  printUsage();
+  process.exit(1);
+}
+
+const targetDirectory = resolve(targetArgument);
+const projectName = normalizeProjectName(basename(targetDirectory));
+const parentDirectory = dirname(targetDirectory);
+
+if (!projectName) {
+  console.error("Choose a project directory with a name that can become a package name.");
+  process.exit(1);
+}
+
+await mkdir(parentDirectory, { recursive: true });
+try {
+  const contents = await readdir(targetDirectory);
+  if (contents.length > 0) {
+    console.error(`Refusing to write into a non-empty directory: ${targetDirectory}`);
+    process.exit(1);
+  }
+} catch (error) {
+  if (!isMissingPath(error)) throw error;
+}
+
+await mkdir(targetDirectory, { recursive: true });
+await cp(templateDirectory, targetDirectory, { recursive: true });
+
+const packageJsonPath = resolve(targetDirectory, "package.json");
+const packageJson = JSON.parse(await readFile(packageJsonPath, "utf8"));
+packageJson.name = projectName;
+await writeFile(packageJsonPath, `${JSON.stringify(packageJson, null, 2)}\n`);
+
+console.log(`Created ${projectName} at ${targetDirectory}`);
+
+if (!noInstall) {
+  console.log("Installing dependencies with pnpm…");
+  const install = spawnSync("pnpm", ["install"], { cwd: targetDirectory, stdio: "inherit" });
+  if (install.error || install.status !== 0) {
+    console.error("The project files are ready, but dependency installation failed.");
+    console.error("Run `pnpm install` in the new project directory to retry.");
+    process.exit(install.status ?? 1);
+  }
+}
+
+console.log(`\nNext: cd ${targetArgument} && pnpm dev`);
+
+function printUsage() {
+  console.log(`Usage: create-ponti-project <directory> [--no-install]
+
+Creates a React + Vite web project wired to @ponti-studios/ui.
+Dependencies are installed with pnpm unless --no-install is supplied.`);
+}
+
+function normalizeProjectName(name) {
+  return name
+    .toLowerCase()
+    .replace(/[^a-z0-9._-]+/g, "-")
+    .replace(/^[^a-z0-9]+/, "")
+    .replace(/-+$/, "");
+}
+
+function isMissingPath(error) {
+  return error && typeof error === "object" && "code" in error && error.code === "ENOENT";
+}

package/src/components/forms/checkbox.stories.tsx

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { Checkbox } from "./checkbox";
+import { Label } from "./label";
+
+const meta = {
+  title: "Forms/Checkbox",
+  component: Checkbox,
+  tags: ["autodocs"],
+} satisfies Meta<typeof Checkbox>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: { "aria-label": "Accept terms" },
+  render: (args) => (
+    <div className="flex items-center gap-2">
+      <Checkbox {...args} id="terms" />
+      <Label htmlFor="terms">Accept terms</Label>
+    </div>
+  ),
+};
+
+export const Checked: Story = {
+  args: { "aria-label": "Checked", defaultChecked: true },
+};
+
+export const Indeterminate: Story = {
+  args: { "aria-label": "Partially selected", indeterminate: true },
+};
+
+export const Disabled: Story = {
+  args: { "aria-label": "Disabled", disabled: true },
+};

package/src/components/forms/checkbox.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox";
+import { CheckIcon, MinusIcon } from "lucide-react";
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+
+function Checkbox({ className, ...props }: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        "border-input bg-background aria-checked:bg-primary aria-checked:text-primary-foreground aria-checked:border-primary focus-visible:outline-ring size-4 shrink-0 rounded-[4px] border transition-colors focus-visible:outline-2 focus-visible:outline-offset-2",
+        "aria-[checked=mixed]:bg-primary aria-[checked=mixed]:text-primary-foreground aria-[checked=mixed]:border-primary",
+        "data-disabled:pointer-events-none data-disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="flex items-center justify-center text-current transition-none"
+        render={(props, state) => (
+          <span {...props}>
+            {state.indeterminate ? (
+              <MinusIcon className="size-3" />
+            ) : (
+              <CheckIcon className="size-3" />
+            )}
+          </span>
+        )}
+      />
+    </CheckboxPrimitive.Root>
+  );
+}
+
+export { Checkbox };

package/src/components/forms/index.ts

@@ -1,5 +1,6 @@
 export { FilterSelect } from "../filters/filter-select";
 export type { FilterSelectOption, FilterSelectProps } from "../filters/filter-select";
+export { Checkbox } from "./checkbox";
 export { DatePicker } from "./date-picker";
 export type { DatePickerProps, DateRangeValue } from "./date-picker";
 export { formatDateInput, parseDateInput, todayDateInput } from "./date-utils";
@@ -8,6 +9,7 @@ export type { DateMonthSelectProps } from "./date-month-select";
 export { DropZone } from "./drop-zone";
 export type { DropZoneProps } from "./drop-zone";
 export { Input } from "./input";
+export { Label } from "./label";
 export { PasskeyManagement } from "./passkey-management";
 export type { PasskeyManagementProps, PasskeyRecord } from "./passkey-management";
 export { RadioGroup, RadioGroupItem } from "./radio-group";

package/src/components/forms/label.stories.tsx

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { Label } from "./label";
+
+const meta = {
+  title: "Forms/Label",
+  component: Label,
+  tags: ["autodocs"],
+} satisfies Meta<typeof Label>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: { children: "Email address", htmlFor: "email" },
+};

package/src/components/forms/label.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+
+function Label({ className, ...props }: React.ComponentProps<"label">) {
+  return (
+    // Association happens at usage (htmlFor or wrapping); the wrapper
+    // itself cannot know its control.
+    // oxlint-disable-next-line jsx-a11y/label-has-associated-control
+    <label
+      data-slot="label"
+      className={cn(
+        "text-sm leading-none font-medium select-none",
+        "peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        "group-has-disabled:cursor-not-allowed group-has-disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Label };

package/src/components/forms/select.tsx

@@ -71,14 +71,16 @@ function SelectContent({
 }) {
   return (
     <SelectPrimitive.Portal>
+      <SelectPrimitive.Backdrop className="ui-mobile-sheet-backdrop" />
       <SelectPrimitive.Positioner
+        className="ui-mobile-sheet-positioner"
         alignItemWithTrigger={_position === "item-aligned"}
         sideOffset={4}
       >
         <SelectPrimitive.Popup
           data-slot="select-content"
           className={cn(
-            "bg-background text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:zoom-out-95 data-open:zoom-in-95 relative z-50 max-h-(--available-height) min-w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 outline-none",
+            "bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:zoom-out-95 data-open:zoom-in-95 relative z-50 max-h-(--available-height) min-w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 outline-none ui-mobile-sheet-popup",
             className,
           )}
           {...props}