@pandait.tech/payment-nuvei 0.2.1 → 0.3.0

package/README.md

@@ -141,9 +141,44 @@ A production-validated implementation of both (`threeDSCallback` + `nuveiProxy`,
 
 ## UI components — usage
 
-All `/ui` exports are client components (`"use client"`) and expect a Tailwind setup. The components consume CSS variables for theming so the same components work for every white-label client with their own branding.
+All `/ui` exports are client components (`"use client"`). They consume CSS variables for theming so the same components work for every white-label client with their own branding.
 
-### 1. Define CSS variables in your global stylesheet
+### 1. Load the styles
+
+You have two options. **Option A is recommended** — it works without Tailwind, on any Tailwind version, and doesn't require configuring your build to scan this package.
+
+**Option A — import the prebuilt stylesheet (recommended, standalone):**
+
+```ts
+// once, e.g. in app/layout.tsx or your global entry
+import "@pandait.tech/payment-nuvei/ui/styles.css";
+```
+
+This ships the exact utility classes the components use (no Tailwind Preflight/reset — it won't touch your page's base styles). You still define the brand tokens (step 2) for theming.
+
+**Option B — let your own Tailwind build the classes (Tailwind v4 users):**
+
+Skip the CSS import and instead point Tailwind at the package so it generates the classes itself. Tailwind **v4** (`@source` in your CSS):
+
+```css
+@import "tailwindcss";
+@source "../node_modules/@pandait.tech/payment-nuvei/dist/**/*.{js,cjs}";
+```
+
+Tailwind **v3** (`content` in `tailwind.config`):
+
+```js
+export default {
+  content: [
+    "./app/**/*.{ts,tsx}",
+    "./node_modules/@pandait.tech/payment-nuvei/dist/**/*.{js,cjs}",
+  ],
+};
+```
+
+> If components render unstyled, you forgot Option A's import or Option B's `@source`/`content` entry. Option A removes that failure mode entirely.
+
+### 2. Define CSS variables in your global stylesheet
 
 Add this to your `app/globals.css` (Next.js) or equivalent, in `:root`:
 
@@ -177,22 +212,6 @@ Add this to your `app/globals.css` (Next.js) or equivalent, in `:root`:
 }
 ```
 
-### 2. Add the package to Tailwind's content config
-
-Tailwind needs to detect the arbitrary-value utility classes (e.g. `bg-[var(--color-primary)]`) inside the package's compiled output:
-
-```js
-// tailwind.config.ts
-export default {
-  content: [
-    "./app/**/*.{ts,tsx}",
-    "./src/**/*.{ts,tsx}",
-    "./node_modules/@pandait.tech/payment-nuvei/dist/**/*.{js,cjs}",
-  ],
-  // ...
-};
-```
-
 ### 3. Use the components
 
 ```tsx

package/dist/ui/styles.css

@@ -0,0 +1,2 @@
+/*! tailwindcss v4.3.0 | 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-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-space-y-reverse:0;--tw-space-x-reverse:0;--tw-border-style:solid;--tw-gradient-position:initial;--tw-gradient-from:#0000;--tw-gradient-via:#0000;--tw-gradient-to:#0000;--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking: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-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-duration:initial}}}@layer theme{:root,:host{--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-yellow-200:oklch(94.5% .129 101.54);--color-yellow-600:oklch(68.1% .162 75.834);--color-yellow-700:oklch(55.4% .135 66.442);--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-sm:24rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--tracking-wider:.05em;--leading-relaxed:1.625;--radius-sm:.25rem;--radius-md:.375rem;--radius-lg:.5rem;--radius-xl:.75rem;--radius-2xl:1rem;--animate-spin:spin 1s linear infinite;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1)}}@layer utilities{.pointer-events-none{pointer-events:none}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:calc(var(--spacing) * 0)}.top-1\.5{top:calc(var(--spacing) * 1.5)}.top-1\/2{top:50%}.top-2{top:calc(var(--spacing) * 2)}.right-2{right:calc(var(--spacing) * 2)}.bottom-1\.5{bottom:calc(var(--spacing) * 1.5)}.left-2{left:calc(var(--spacing) * 2)}.left-3{left:calc(var(--spacing) * 3)}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.mt-0\.5{margin-top:calc(var(--spacing) * .5)}.mt-3{margin-top:calc(var(--spacing) * 3)}.mt-4{margin-top:calc(var(--spacing) * 4)}.mt-6{margin-top:calc(var(--spacing) * 6)}.flex{display:flex}.inline{display:inline}.inline-flex{display:inline-flex}.aspect-\[1\.586\/1\]{aspect-ratio:1.586}.h-2\.5{height:calc(var(--spacing) * 2.5)}.h-3{height:calc(var(--spacing) * 3)}.h-3\.5{height:calc(var(--spacing) * 3.5)}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-7{height:calc(var(--spacing) * 7)}.h-12{height:calc(var(--spacing) * 12)}.h-14{height:calc(var(--spacing) * 14)}.min-h-16{min-height:calc(var(--spacing) * 16)}.w-2\.5{width:calc(var(--spacing) * 2.5)}.w-3{width:calc(var(--spacing) * 3)}.w-3\.5{width:calc(var(--spacing) * 3.5)}.w-4{width:calc(var(--spacing) * 4)}.w-5{width:calc(var(--spacing) * 5)}.w-9{width:calc(var(--spacing) * 9)}.w-12{width:calc(var(--spacing) * 12)}.w-16{width:calc(var(--spacing) * 16)}.w-22{width:calc(var(--spacing) * 22)}.w-full{width:100%}.max-w-sm{max-width:var(--container-sm)}.min-w-0{min-width:calc(var(--spacing) * 0)}.flex-1{flex:1}.shrink-0{flex-shrink:0}.grow{flex-grow:1}.-translate-y-1\/2{--tw-translate-y:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.animate-spin{animation:var(--animate-spin)}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-1{gap:calc(var(--spacing) * 1)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-2\.5{gap:calc(var(--spacing) * 2.5)}.gap-3{gap:calc(var(--spacing) * 3)}:where(.space-y-1>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 1) * 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) * 2) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 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) * 3) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 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) * 4) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 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) * -2) * var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--spacing) * -2) * calc(1 - var(--tw-space-x-reverse)))}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-hidden{overflow:hidden}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-sm{border-radius:var(--radius-sm)}.rounded-xl{border-radius:var(--radius-xl)}.border{border-style:var(--tw-border-style);border-width:1px}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-\[var\(--color-border-default\)\]{border-color:var(--color-border-default)}.border-\[var\(--color-border-subtle\)\]{border-color:var(--color-border-subtle)}.border-\[var\(--color-error\)\]\/20{border-color:var(--color-error)}@supports (color:color-mix(in lab, red, red)){.border-\[var\(--color-error\)\]\/20{border-color:color-mix(in oklab, var(--color-error) 20%, transparent)}}.border-\[var\(--color-primary\)\],.border-\[var\(--color-primary\)\]\/15{border-color:var(--color-primary)}@supports (color:color-mix(in lab, red, red)){.border-\[var\(--color-primary\)\]\/15{border-color:color-mix(in oklab, var(--color-primary) 15%, transparent)}}.border-\[var\(--color-primary\)\]\/20{border-color:var(--color-primary)}@supports (color:color-mix(in lab, red, red)){.border-\[var\(--color-primary\)\]\/20{border-color:color-mix(in oklab, var(--color-primary) 20%, transparent)}}.border-\[var\(--color-text-main\)\]\/20{border-color:var(--color-text-main)}@supports (color:color-mix(in lab, red, red)){.border-\[var\(--color-text-main\)\]\/20{border-color:color-mix(in oklab, var(--color-text-main) 20%, transparent)}}.border-\[var\(--color-warning\)\]\/20{border-color:var(--color-warning)}@supports (color:color-mix(in lab, red, red)){.border-\[var\(--color-warning\)\]\/20{border-color:color-mix(in oklab, var(--color-warning) 20%, transparent)}}.border-\[var\(--color-warning\)\]\/30{border-color:var(--color-warning)}@supports (color:color-mix(in lab, red, red)){.border-\[var\(--color-warning\)\]\/30{border-color:color-mix(in oklab, var(--color-warning) 30%, transparent)}}.border-white{border-color:var(--color-white)}.border-yellow-700\/40{border-color:#a3610066}@supports (color:color-mix(in lab, red, red)){.border-yellow-700\/40{border-color:color-mix(in oklab, var(--color-yellow-700) 40%, transparent)}}.border-t-\[var\(--color-primary\)\]{border-top-color:var(--color-primary)}.border-b-transparent{border-bottom-color:#0000}.bg-\[\#eb001b\]{background-color:#eb001b}.bg-\[\#f79e1b\]\/90{background-color:oklab(77.1382% .059902 .151648/.9)}.bg-\[var\(--color-background\)\]{background-color:var(--color-background)}.bg-\[var\(--color-error\)\]\/5{background-color:var(--color-error)}@supports (color:color-mix(in lab, red, red)){.bg-\[var\(--color-error\)\]\/5{background-color:color-mix(in oklab, var(--color-error) 5%, transparent)}}.bg-\[var\(--color-primary\)\],.bg-\[var\(--color-primary\)\]\/5{background-color:var(--color-primary)}@supports (color:color-mix(in lab, red, red)){.bg-\[var\(--color-primary\)\]\/5{background-color:color-mix(in oklab, var(--color-primary) 5%, transparent)}}.bg-\[var\(--color-surface-elevated\)\]{background-color:var(--color-surface-elevated)}.bg-\[var\(--color-warning\)\]\/5{background-color:var(--color-warning)}@supports (color:color-mix(in lab, red, red)){.bg-\[var\(--color-warning\)\]\/5{background-color:color-mix(in oklab, var(--color-warning) 5%, transparent)}}.bg-\[var\(--color-warning\)\]\/15{background-color:var(--color-warning)}@supports (color:color-mix(in lab, red, red)){.bg-\[var\(--color-warning\)\]\/15{background-color:color-mix(in oklab, var(--color-warning) 15%, transparent)}}.bg-linear-to-br{--tw-gradient-position:to bottom right}@supports (background-image:linear-gradient(in lab, red, red)){.bg-linear-to-br{--tw-gradient-position:to bottom right in oklab}}.bg-linear-to-br{background-image:linear-gradient(var(--tw-gradient-stops))}.from-white\/10{--tw-gradient-from:#ffffff1a}@supports (color:color-mix(in lab, red, red)){.from-white\/10{--tw-gradient-from:color-mix(in oklab, var(--color-white) 10%, transparent)}}.from-white\/10{--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.from-yellow-200{--tw-gradient-from:var(--color-yellow-200);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.from-yellow-200\/80{--tw-gradient-from:#fff085cc}@supports (color:color-mix(in lab, red, red)){.from-yellow-200\/80{--tw-gradient-from:color-mix(in oklab, var(--color-yellow-200) 80%, transparent)}}.from-yellow-200\/80{--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.via-transparent{--tw-gradient-via:transparent;--tw-gradient-via-stops:var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-via-stops)}.to-black\/20{--tw-gradient-to:#0003}@supports (color:color-mix(in lab, red, red)){.to-black\/20{--tw-gradient-to:color-mix(in oklab, var(--color-black) 20%, transparent)}}.to-black\/20{--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.to-black\/30{--tw-gradient-to:#0000004d}@supports (color:color-mix(in lab, red, red)){.to-black\/30{--tw-gradient-to:color-mix(in oklab, var(--color-black) 30%, transparent)}}.to-black\/30{--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.to-yellow-600{--tw-gradient-to:var(--color-yellow-600);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.to-yellow-600\/80{--tw-gradient-to:#cd8900cc}@supports (color:color-mix(in lab, red, red)){.to-yellow-600\/80{--tw-gradient-to:color-mix(in oklab, var(--color-yellow-600) 80%, transparent)}}.to-yellow-600\/80{--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.p-1{padding:calc(var(--spacing) * 1)}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.p-5{padding:calc(var(--spacing) * 5)}.px-1\.5{padding-inline:calc(var(--spacing) * 1.5)}.px-4{padding-inline:calc(var(--spacing) * 4)}.py-0\.5{padding-block:calc(var(--spacing) * .5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-6{padding-block:calc(var(--spacing) * 6)}.pt-0{padding-top:calc(var(--spacing) * 0)}.pt-3{padding-top:calc(var(--spacing) * 3)}.pr-3{padding-right:calc(var(--spacing) * 3)}.pb-4{padding-bottom:calc(var(--spacing) * 4)}.pl-7{padding-left:calc(var(--spacing) * 7)}.text-center{text-align:center}.text-right{text-align:right}.font-mono{font-family:var(--font-mono)}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\[8px\]{font-size:8px}.text-\[9px\]{font-size:9px}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.leading-relaxed{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-\[0\.2em\]{--tw-tracking:.2em;letter-spacing:.2em}.tracking-\[0\.05em\]{--tw-tracking:.05em;letter-spacing:.05em}.tracking-\[0\.25em\]{--tw-tracking:.25em;letter-spacing:.25em}.tracking-wider{--tw-tracking:var(--tracking-wider);letter-spacing:var(--tracking-wider)}.text-\[var\(--color-error\)\]{color:var(--color-error)}.text-\[var\(--color-primary\)\]{color:var(--color-primary)}.text-\[var\(--color-text-main\)\],.text-\[var\(--color-text-main\)\]\/30{color:var(--color-text-main)}@supports (color:color-mix(in lab, red, red)){.text-\[var\(--color-text-main\)\]\/30{color:color-mix(in oklab, var(--color-text-main) 30%, transparent)}}.text-\[var\(--color-text-main\)\]\/40{color:var(--color-text-main)}@supports (color:color-mix(in lab, red, red)){.text-\[var\(--color-text-main\)\]\/40{color:color-mix(in oklab, var(--color-text-main) 40%, transparent)}}.text-\[var\(--color-text-main\)\]\/50{color:var(--color-text-main)}@supports (color:color-mix(in lab, red, red)){.text-\[var\(--color-text-main\)\]\/50{color:color-mix(in oklab, var(--color-text-main) 50%, transparent)}}.text-\[var\(--color-text-main\)\]\/60{color:var(--color-text-main)}@supports (color:color-mix(in lab, red, red)){.text-\[var\(--color-text-main\)\]\/60{color:color-mix(in oklab, var(--color-text-main) 60%, transparent)}}.text-\[var\(--color-warning\)\]{color:var(--color-warning)}.text-white{color:var(--color-white)}.text-white\/50{color:#ffffff80}@supports (color:color-mix(in lab, red, red)){.text-white\/50{color:color-mix(in oklab, var(--color-white) 50%, transparent)}}.text-white\/75{color:#ffffffbf}@supports (color:color-mix(in lab, red, red)){.text-white\/75{color:color-mix(in oklab, var(--color-white) 75%, transparent)}}.text-white\/85{color:#ffffffd9}@supports (color:color-mix(in lab, red, red)){.text-white\/85{color:color-mix(in oklab, var(--color-white) 85%, transparent)}}.text-white\/95{color:#fffffff2}@supports (color:color-mix(in lab, red, red)){.text-white\/95{color:color-mix(in oklab, var(--color-white) 95%, transparent)}}.uppercase{text-transform:uppercase}.italic{font-style:italic}.underline{text-decoration-line:underline}.underline-offset-2{text-underline-offset:2px}.accent-\[var\(--color-primary\)\]{accent-color:var(--color-primary)}.mix-blend-screen{mix-blend-mode:screen}.shadow-inner{--tw-shadow:inset 0 2px 4px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a), 0 2px 4px -2px 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-xl{--tw-shadow:0 20px 25px -5px var(--tw-shadow-color,#0000001a), 0 8px 10px -6px 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-\[var\(--color-primary\)\]{--tw-ring-color:var(--color-primary)}.drop-shadow{--tw-drop-shadow-size:drop-shadow(0 1px 2px var(--tw-drop-shadow-color,#0000001a)) drop-shadow(0 1px 1px var(--tw-drop-shadow-color,#0000000f));--tw-drop-shadow:drop-shadow(0 1px 2px #0000001a) drop-shadow(0 1px 1px #0000000f);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,)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.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));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-200{--tw-duration:.2s;transition-duration:.2s}.select-none{-webkit-user-select:none;user-select:none}.placeholder\:text-\[var\(--color-text-main\)\]\/20::placeholder{color:var(--color-text-main)}@supports (color:color-mix(in lab, red, red)){.placeholder\:text-\[var\(--color-text-main\)\]\/20::placeholder{color:color-mix(in oklab, var(--color-text-main) 20%, transparent)}}.placeholder\:text-\[var\(--color-text-main\)\]\/30::placeholder{color:var(--color-text-main)}@supports (color:color-mix(in lab, red, red)){.placeholder\:text-\[var\(--color-text-main\)\]\/30::placeholder{color:color-mix(in oklab, var(--color-text-main) 30%, transparent)}}@media (hover:hover){.hover\:border-\[var\(--color-border-strong\)\]:hover{border-color:var(--color-border-strong)}.hover\:border-\[var\(--color-primary\)\]:hover{border-color:var(--color-primary)}.hover\:bg-\[var\(--color-primary-hover\)\]:hover{background-color:var(--color-primary-hover)}.hover\:text-\[var\(--color-error\)\]:hover{color:var(--color-error)}.hover\:text-\[var\(--color-primary\)\]:hover{color:var(--color-primary)}.hover\:text-\[var\(--color-primary-hover\)\]:hover{color:var(--color-primary-hover)}.hover\:text-\[var\(--color-text-main\)\]\/60:hover{color:var(--color-text-main)}@supports (color:color-mix(in lab, red, red)){.hover\:text-\[var\(--color-text-main\)\]\/60:hover{color:color-mix(in oklab, var(--color-text-main) 60%, transparent)}}}.focus\:border-\[var\(--color-primary\)\]:focus{border-color:var(--color-primary)}.focus\:ring-2:focus{--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\:ring-\[var\(--color-primary\)\]\/30:focus{--tw-ring-color:var(--color-primary)}@supports (color:color-mix(in lab, red, red)){.focus\:ring-\[var\(--color-primary\)\]\/30:focus{--tw-ring-color:color-mix(in oklab, var(--color-primary) 30%, transparent)}}.focus\:ring-\[var\(--color-primary\)\]\/50:focus{--tw-ring-color:var(--color-primary)}@supports (color:color-mix(in lab, red, red)){.focus\:ring-\[var\(--color-primary\)\]\/50:focus{--tw-ring-color:color-mix(in oklab, var(--color-primary) 50%, transparent)}}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}.active\:scale-\[0\.97\]:active{scale:.97}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:bg-\[var\(--color-surface-elevated\)\]:disabled{background-color:var(--color-surface-elevated)}.disabled\:text-\[var\(--color-text-main\)\]\/30:disabled{color:var(--color-text-main)}@supports (color:color-mix(in lab, red, red)){.disabled\:text-\[var\(--color-text-main\)\]\/30:disabled{color:color-mix(in oklab, var(--color-text-main) 30%, transparent)}}.disabled\:opacity-50:disabled{opacity:.5}}@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}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-space-x-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-gradient-position{syntax:"*";inherits:false}@property --tw-gradient-from{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-via{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-to{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-stops{syntax:"*";inherits:false}@property --tw-gradient-via-stops{syntax:"*";inherits:false}@property --tw-gradient-from-position{syntax:"<length-percentage>";inherits:false;initial-value:0%}@property --tw-gradient-via-position{syntax:"<length-percentage>";inherits:false;initial-value:50%}@property --tw-gradient-to-position{syntax:"<length-percentage>";inherits:false;initial-value:100%}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{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-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-duration{syntax:"*";inherits:false}@keyframes spin{to{transform:rotate(360deg)}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pandait.tech/payment-nuvei",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "Nuvei Ecuador payment gateway adapter for Next.js: charge handler, webhook, 3DS flow, refunds, tokenized cards, and payment links. Part of panda-commerce-kit.",
   "license": "MIT",
   "private": false,
@@ -47,6 +47,7 @@
       "import": "./dist/ui/index.js",
       "require": "./dist/ui/index.cjs"
     },
+    "./ui/styles.css": "./dist/ui/styles.css",
     "./payment-links": {
       "types": "./dist/payment-links/index.d.ts",
       "import": "./dist/payment-links/index.js",
@@ -58,7 +59,8 @@
     "README.md"
   ],
   "scripts": {
-    "build": "tsup",
+    "build": "tsup && pnpm build:css",
+    "build:css": "tailwindcss -i src/ui/styles.css -o dist/ui/styles.css --minify",
     "dev": "tsup --watch",
     "type-check": "tsc --noEmit",
     "lint": "eslint src",
@@ -84,6 +86,7 @@
     }
   },
   "devDependencies": {
+    "@tailwindcss/cli": "^4",
     "@types/node": "^22.7.5",
     "@types/react": "^18.3.12",
     "firebase": "^11.0.0",
@@ -91,6 +94,7 @@
     "next": "^14.2.15",
     "react": "^18.3.1",
     "react-icons": "^5.3.0",
+    "tailwindcss": "^4",
     "tsup": "^8.3.0",
     "typescript": "^5.6.3",
     "zod": "^3.23.8"