@umituz/web-dashboard 6.1.0 → 6.2.1

package/src/domains/onboarding/components/shared/OptionCard.tsx

@@ -1,73 +0,0 @@
-import { motion } from 'framer-motion';
-import { cn } from '../../theme/cn';
-import { renderBundledIcon } from './renderBundledIcon';
-import { doesIconNameResolve } from '../../predicates/icon-name-resolves';
-import type { OnboardingOption } from '../../types/screens';
-
-export interface OptionCardProps {
-  option: OnboardingOption;
-  selected: boolean;
-  onToggle: (id: string) => void;
-  multiSelect?: boolean;
-  className?: string;
-}
-
-/**
- * Selectable option card with optional icon.
- * Single responsibility: render one option and emit toggle events.
- */
-export function OptionCard({ option, selected, onToggle, multiSelect = false, className }: OptionCardProps) {
-  return (
-    <motion.button
-      type="button"
-      role={multiSelect ? 'checkbox' : 'radio'}
-      aria-checked={selected}
-      onClick={() => onToggle(option.id)}
-      whileTap={{ scale: 0.98 }}
-      className={cn(
-        'flex w-full items-center gap-3 rounded-xl border p-4 text-left transition-colors',
-        'focus:outline-none focus:ring-2 focus:ring-[rgb(var(--uob-primary-500))] focus:ring-offset-2',
-        selected
-          ? 'border-[rgb(var(--uob-primary-500))] bg-[rgb(var(--uob-primary-50))]'
-          : 'border-[rgb(var(--uob-border))] bg-[rgb(var(--uob-surface))] hover:border-[rgb(var(--uob-primary-100))]',
-        className,
-      )}
-    >
-      {doesIconNameResolve(option.iconName) && (
-        <span
-          className={cn(
-            'flex h-10 w-10 shrink-0 items-center justify-center rounded-lg',
-            selected
-              ? 'bg-[rgb(var(--uob-primary-500))] text-white'
-              : 'bg-[rgb(var(--uob-surface-muted))] text-[rgb(var(--uob-text-muted))]',
-          )}
-        >
-          {renderBundledIcon(option.iconName, 'h-5 w-5')}
-        </span>
-      )}
-      <span className="flex flex-1 flex-col">
-        <span className="text-base font-medium text-[rgb(var(--uob-text-primary))]">
-          {option.label}
-        </span>
-        {option.description && (
-          <span className="text-sm text-[rgb(var(--uob-text-muted))]">{option.description}</span>
-        )}
-      </span>
-      <span
-        className={cn(
-          'flex h-5 w-5 shrink-0 items-center justify-center rounded-full border-2',
-          selected
-            ? 'border-[rgb(var(--uob-primary-500))] bg-[rgb(var(--uob-primary-500))] text-white'
-            : 'border-[rgb(var(--uob-border))]',
-        )}
-        aria-hidden="true"
-      >
-        {selected && (
-          <svg viewBox="0 0 12 12" className="h-3 w-3" fill="none" stroke="currentColor" strokeWidth="2">
-            <path d="M2 6 L5 9 L10 3" />
-          </svg>
-        )}
-      </span>
-    </motion.button>
-  );
-}

package/src/domains/onboarding/components/shared/PrimaryButton.tsx

@@ -1,58 +0,0 @@
-import type { ButtonHTMLAttributes, ReactNode } from 'react';
-import { motion, type HTMLMotionProps } from 'framer-motion';
-import { cn } from '../../theme/cn';
-import { useOnboardingIntl } from '../OnboardingIntl';
-
-export interface PrimaryButtonProps
-  extends Omit<HTMLMotionProps<'button'>, 'children'> {
-  children: ReactNode;
-  loading?: boolean;
-  fullWidth?: boolean;
-}
-
-/**
- * Primary CTA button used across the onboarding flow.
- * Single responsibility: render a tappable, accessible, animated button.
- */
-export function PrimaryButton({
-  children,
-  loading = false,
-  fullWidth = true,
-  className,
-  disabled,
-  type,
-  ...rest
-}: PrimaryButtonProps) {
-  const { labels } = useOnboardingIntl();
-  return (
-    <motion.button
-      {...rest}
-      type={type ?? 'button'}
-      disabled={disabled || loading}
-      whileTap={{ scale: disabled || loading ? 1 : 0.98 }}
-      className={cn(
-        'inline-flex items-center justify-center rounded-xl px-5 py-3 text-base font-semibold',
-        'bg-[rgb(var(--uob-primary-500))] text-white shadow-sm transition-colors',
-        'hover:bg-[rgb(var(--uob-primary-600))] focus:outline-none focus:ring-2 focus:ring-[rgb(var(--uob-primary-500))] focus:ring-offset-2',
-        'disabled:cursor-not-allowed disabled:opacity-60',
-        fullWidth ? 'w-full' : '',
-        className,
-      )}
-    >
-      {loading ? (
-        <span className="flex items-center gap-2">
-          <span
-            className="h-4 w-4 animate-spin rounded-full border-2 border-white border-t-transparent"
-            aria-hidden="true"
-          />
-          <span>{labels.loading}</span>
-        </span>
-      ) : (
-        children
-      )}
-    </motion.button>
-  );
-}
-
-// Re-export the HTML button type for consumers that need to wrap a non-motion button.
-export type { ButtonHTMLAttributes };

package/src/domains/onboarding/components/shared/ProgressBar.tsx

@@ -1,51 +0,0 @@
-import * as Progress from '@radix-ui/react-progress';
-import { motion } from 'framer-motion';
-import { cn } from '../../theme/cn';
-import { computeProgressPercentage } from '../../calc/progress-percentage';
-import { formatLabel, useOnboardingIntl } from '../OnboardingIntl';
-
-export interface ProgressBarProps {
-  current: number;
-  total: number;
-  className?: string;
-  showLabel?: boolean;
-}
-
-/**
- * Accessible progress bar built on Radix UI primitive.
- * Progress math lives in `calc/progress-percentage`.
- */
-export function ProgressBar({ current, total, className, showLabel = false }: ProgressBarProps) {
-  const { labels } = useOnboardingIntl();
-  const safeTotal = Math.max(1, total);
-  const safeCurrent = Math.max(0, Math.min(current, safeTotal));
-  const percentage = computeProgressPercentage(safeCurrent, safeTotal);
-
-  return (
-    <div className={cn('flex w-full flex-col gap-2', className)}>
-      {showLabel && (
-        <div className="flex items-center justify-between text-sm text-[rgb(var(--uob-text-muted))]">
-          <span aria-live="polite">
-            {formatLabel(labels.stepOfPattern, { current: safeCurrent, total: safeTotal })}
-          </span>
-          <span aria-hidden="true">{Math.round(percentage)}%</span>
-        </div>
-      )}
-      <Progress.Root
-        value={percentage}
-        aria-label={`Onboarding progress: ${Math.round(percentage)} percent`}
-        aria-valuemin={0}
-        aria-valuemax={100}
-        aria-valuenow={Math.round(percentage)}
-        className="relative h-2 w-full overflow-hidden rounded-full bg-[rgb(var(--uob-border))]"
-      >
-        <motion.div
-          initial={{ width: 0 }}
-          animate={{ width: `${percentage}%` }}
-          transition={{ duration: 0.4, ease: 'easeOut' }}
-          className="h-full rounded-full bg-[rgb(var(--uob-primary-500))]"
-        />
-      </Progress.Root>
-    </div>
-  );
-}

package/src/domains/onboarding/components/shared/QuestionWrapper.tsx

@@ -1,36 +0,0 @@
-import type { ReactNode } from 'react';
-import { motion } from 'framer-motion';
-import { cn } from '../../theme/cn';
-
-export interface QuestionWrapperProps {
-  title: string;
-  subtitle?: string;
-  children: ReactNode;
-  className?: string;
-}
-
-/**
- * Consistent framing for question-style screens.
- * Single responsibility: layout the question header + content area.
- */
-export function QuestionWrapper({ title, subtitle, children, className }: QuestionWrapperProps) {
-  return (
-    <motion.div
-      initial={{ opacity: 0, y: 8 }}
-      animate={{ opacity: 1, y: 0 }}
-      exit={{ opacity: 0, y: -8 }}
-      transition={{ duration: 0.25, ease: 'easeOut' }}
-      className={cn('flex w-full flex-col gap-6', className)}
-    >
-      <header className="flex flex-col gap-2">
-        <h2 className="text-2xl font-semibold text-[rgb(var(--uob-text-primary))] sm:text-3xl">
-          {title}
-        </h2>
-        {subtitle && (
-          <p className="text-base text-[rgb(var(--uob-text-muted))]">{subtitle}</p>
-        )}
-      </header>
-      <div className="flex flex-col gap-3">{children}</div>
-    </motion.div>
-  );
-}

package/src/domains/onboarding/components/shared/ScreenContainer.tsx

@@ -1,29 +0,0 @@
-import type { ReactNode } from 'react';
-import { cn } from '../../theme/cn';
-
-export interface ScreenContainerProps {
-  children: ReactNode;
-  header?: ReactNode;
-  footer?: ReactNode;
-  className?: string;
-}
-
-/**
- * Standard layout for an onboarding screen.
- * Owns safe-area, padding, header/footer slots. Per project rules this is the SOLE
- * layout for authenticated onboarding screens — no per-page layout duplication.
- */
-export function ScreenContainer({ children, header, footer, className }: ScreenContainerProps) {
-  return (
-    <div
-      className={cn(
-        'mx-auto flex min-h-screen w-full max-w-2xl flex-col gap-6 px-4 pb-8 pt-6 sm:px-6',
-        className,
-      )}
-    >
-      {header && <div className="flex flex-col gap-3">{header}</div>}
-      <main className="flex flex-1 flex-col gap-6">{children}</main>
-      {footer && <div className="flex flex-col gap-3">{footer}</div>}
-    </div>
-  );
-}

package/src/domains/onboarding/components/shared/index.ts

@@ -1,16 +0,0 @@
-export { ProgressBar } from './ProgressBar';
-export type { ProgressBarProps } from './ProgressBar';
-export { QuestionWrapper } from './QuestionWrapper';
-export type { QuestionWrapperProps } from './QuestionWrapper';
-export { OptionCard } from './OptionCard';
-export type { OptionCardProps } from './OptionCard';
-export { SwipeCard } from './SwipeCard';
-export type { SwipeCardProps } from './SwipeCard';
-export { AnimationWrapper } from './AnimationWrapper';
-export type { AnimationWrapperProps, ScreenTransition } from './AnimationWrapper';
-export { ScreenContainer } from './ScreenContainer';
-export type { ScreenContainerProps } from './ScreenContainer';
-export { PrimaryButton } from './PrimaryButton';
-export type { PrimaryButtonProps } from './PrimaryButton';
-export { OnboardingErrorBoundary } from './OnboardingErrorBoundary';
-export type { OnboardingErrorBoundaryProps } from './OnboardingErrorBoundary';

package/src/domains/onboarding/components/shared/renderBundledIcon.tsx

@@ -1,20 +0,0 @@
-import { resolveIconByName } from '../../predicates/icon-name-resolves';
-
-/**
- * Render a bundled icon by registry name.
- *
- * Returns null when the name is not in the registry — callers combine it with
- * `doesIconNameResolve` when the surrounding markup must disappear with the icon.
- *
- * Why a helper instead of `const Icon = resolveIconByName(name)` inside the
- * component body? The registry lookup always yields a stable module-level
- * component (nothing is created per render), but assigning it to a variable
- * during render trips eslint-plugin-react-hooks' `static-components` rule at
- * the JSX usage site. A module-scope function returning the element keeps the
- * lint signal meaningful without suppression comments.
- */
-export function renderBundledIcon(name: string | undefined, className?: string) {
-  const Icon = resolveIconByName(name);
-  if (!Icon) return null;
-  return <Icon className={className} aria-hidden="true" />;
-}

package/src/domains/onboarding/onboarding.css

@@ -1 +0,0 @@
-.uob-flow{--uob-font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--uob-primary-50: 238 242 255;--uob-primary-100: 224 231 255;--uob-primary-500: 99 102 241;--uob-primary-600: 79 70 229;--uob-primary-700: 67 56 202;--uob-surface: 255 255 255;--uob-surface-muted: 249 250 251;--uob-text-primary: 17 24 39;--uob-text-muted: 107 114 128;--uob-border: 229 231 235;--uob-success: 16 185 129;--uob-warning: 245 158 11;--uob-error: 239 68 68}@media (prefers-color-scheme: dark){.uob-flow{--uob-surface: 17 24 39;--uob-surface-muted: 31 41 55;--uob-text-primary: 243 244 246;--uob-text-muted: 156 163 175;--uob-border: 55 65 81}}.uob-flow,.uob-flow *,.uob-flow *:before,.uob-flow *:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:rgb(var(--uob-border))}.uob-flow h1,.uob-flow h2,.uob-flow h3,.uob-flow h4,.uob-flow h5,.uob-flow h6,.uob-flow p,.uob-flow figure,.uob-flow blockquote,.uob-flow pre{margin:0}.uob-flow ol,.uob-flow ul{list-style:none;margin:0;padding:0}.uob-flow button,.uob-flow input,.uob-flow optgroup,.uob-flow select,.uob-flow textarea{font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}.uob-flow button,.uob-flow [type=button],.uob-flow [type=reset],.uob-flow [type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none}.uob-flow progress{-webkit-appearance:none;-moz-appearance:none;appearance:none}.uob-flow img,.uob-flow svg,.uob-flow video,.uob-flow canvas{display:block;vertical-align:middle}.uob-flow img,.uob-flow video{max-width:100%;height:auto}.pointer-events-none{pointer-events:none}.\!visible{visibility:visible!important}.visible{visibility:visible}.static{position:static}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.left-4{left:1rem}.right-4{right:1rem}.top-4{top:1rem}.mx-auto{margin-left:auto;margin-right:auto}.mb-4{margin-bottom:1rem}.ml-auto{margin-left:auto}.mt-0\.5{margin-top:.125rem}.mt-1{margin-top:.25rem}.mt-3{margin-top:.75rem}.mt-6{margin-top:1.5rem}.block{display:block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.hidden{display:none}.h-10{height:2.5rem}.h-12{height:3rem}.h-16{height:4rem}.h-2{height:.5rem}.h-20{height:5rem}.h-24{height:6rem}.h-3{height:.75rem}.h-3\.5{height:.875rem}.h-32{height:8rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-72{height:18rem}.h-8{height:2rem}.h-full{height:100%}.min-h-screen{min-height:100vh}.w-10{width:2.5rem}.w-11{width:2.75rem}.w-12{width:3rem}.w-16{width:4rem}.w-2{width:.5rem}.w-20{width:5rem}.w-24{width:6rem}.w-3{width:.75rem}.w-3\.5{width:.875rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-8{width:2rem}.w-full{width:100%}.max-w-2xl{max-width:42rem}.max-w-md{max-width:28rem}.max-w-xl{max-width:36rem}.flex-1{flex:1 1 0%}.shrink-0{flex-shrink:0}.translate-x-0{--tw-translate-x: 0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-x-5{--tw-translate-x: 1.25rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes pulse{50%{opacity:.5}}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}@keyframes spin{to{transform:rotate(360deg)}}.animate-spin{animation:spin 1s linear infinite}.cursor-grab{cursor:grab}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-1\.5{gap:.375rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.whitespace-pre-wrap{white-space:pre-wrap}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:1rem}.rounded-3xl{border-radius:1.5rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-xl{border-radius:.75rem}.border{border-width:1px}.border-2{border-width:2px}.border-\[rgb\(var\(--uob-border\)\)\]{border-color:rgb(var(--uob-border))}.border-\[rgb\(var\(--uob-error\)\)\]{border-color:rgb(var(--uob-error))}.border-\[rgb\(var\(--uob-primary-500\)\)\]{border-color:rgb(var(--uob-primary-500))}.border-\[rgb\(var\(--uob-success\)\)\]{border-color:rgb(var(--uob-success))}.border-transparent{border-color:transparent}.border-white{--tw-border-opacity: 1;border-color:rgb(255 255 255 / var(--tw-border-opacity, 1))}.border-t-transparent{border-top-color:transparent}.bg-\[rgb\(var\(--uob-border\)\)\]{background-color:rgb(var(--uob-border))}.bg-\[rgb\(var\(--uob-error\)\)\]\/10{background-color:rgb(var(--uob-error) / .1)}.bg-\[rgb\(var\(--uob-primary-50\)\)\]{background-color:rgb(var(--uob-primary-50))}.bg-\[rgb\(var\(--uob-primary-500\)\)\]{background-color:rgb(var(--uob-primary-500))}.bg-\[rgb\(var\(--uob-success\)\)\]{background-color:rgb(var(--uob-success))}.bg-\[rgb\(var\(--uob-success\)\)\]\/10{background-color:rgb(var(--uob-success) / .1)}.bg-\[rgb\(var\(--uob-surface\)\)\]{background-color:rgb(var(--uob-surface))}.bg-\[rgb\(var\(--uob-surface-muted\)\)\]{background-color:rgb(var(--uob-surface-muted))}.bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.fill-current{fill:currentColor}.object-cover{-o-object-fit:cover;object-fit:cover}.p-0\.5{padding:.125rem}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.pb-8{padding-bottom:2rem}.pt-6{padding-top:1.5rem}.text-left{text-align:left}.text-center{text-align:center}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.not-italic{font-style:normal}.tracking-wide{letter-spacing:.025em}.text-\[rgb\(var\(--uob-border\)\)\]{color:rgb(var(--uob-border))}.text-\[rgb\(var\(--uob-error\)\)\]{color:rgb(var(--uob-error))}.text-\[rgb\(var\(--uob-primary-500\)\)\]{color:rgb(var(--uob-primary-500))}.text-\[rgb\(var\(--uob-primary-700\)\)\]{color:rgb(var(--uob-primary-700))}.text-\[rgb\(var\(--uob-success\)\)\]{color:rgb(var(--uob-success))}.text-\[rgb\(var\(--uob-text-muted\)\)\]{color:rgb(var(--uob-text-muted))}.text-\[rgb\(var\(--uob-text-primary\)\)\]{color:rgb(var(--uob-text-primary))}.text-\[rgb\(var\(--uob-warning\)\)\]{color:rgb(var(--uob-warning))}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.underline-offset-4{text-underline-offset:4px}.shadow-lg{--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.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)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.hover\:border-\[rgb\(var\(--uob-border\)\)\]:hover{border-color:rgb(var(--uob-border))}.hover\:border-\[rgb\(var\(--uob-primary-100\)\)\]:hover{border-color:rgb(var(--uob-primary-100))}.hover\:border-\[rgb\(var\(--uob-primary-500\)\)\]:hover{border-color:rgb(var(--uob-primary-500))}.hover\:bg-\[rgb\(var\(--uob-error\)\)\]:hover{background-color:rgb(var(--uob-error))}.hover\:bg-\[rgb\(var\(--uob-primary-600\)\)\]:hover{background-color:rgb(var(--uob-primary-600))}.hover\:bg-\[rgb\(var\(--uob-success\)\)\]:hover{background-color:rgb(var(--uob-success))}.hover\:bg-\[rgb\(var\(--uob-surface-muted\)\)\]:hover{background-color:rgb(var(--uob-surface-muted))}.hover\:text-white:hover{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.hover\:underline:hover{text-decoration-line:underline}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-2:focus{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.focus\:ring-\[rgb\(var\(--uob-primary-500\)\)\]:focus{--tw-ring-color: rgb(var(--uob-primary-500))}.focus\:ring-offset-2:focus{--tw-ring-offset-width: 2px}.active\:cursor-grabbing:active{cursor:grabbing}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-50:disabled{opacity:.5}.disabled\:opacity-60:disabled{opacity:.6}@media (min-width: 640px){.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}.sm\:text-3xl{font-size:1.875rem;line-height:2.25rem}.sm\:text-4xl{font-size:2.25rem;line-height:2.5rem}.sm\:text-5xl{font-size:3rem;line-height:1}}

package/src/domains/onboarding/theme/cn.ts

@@ -1,10 +0,0 @@
-import { clsx, type ClassValue } from 'clsx';
-import { twMerge } from 'tailwind-merge';
-
-/**
- * Class name composer — merges Tailwind utility classes safely.
- * Single responsibility: build a className string without conflicts.
- */
-export function cn(...inputs: ClassValue[]): string {
-  return twMerge(clsx(inputs));
-}

package/src/domains/onboarding/theme/index.css

@@ -1,131 +0,0 @@
-/*
- * web-onboarding styles.
- *
- * Isolation contract (see README "Styling"):
- *  - NO Tailwind preflight. Host applications keep their own global reset;
- *    this stylesheet must never change styles outside `.uob-flow`.
- *  - A scoped reset restores the preflight invariants the library's utility
- *    classes rely on (box-sizing, border-style, form font inheritance)
- *    inside `.uob-flow` only.
- *  - All design tokens are namespaced `--uob-*`. Rebrand by overriding them:
- *      .uob-flow { --uob-primary-500: 34 197 94; }
- *    RGB triplets (e.g. "99 102 241"), not hex — they compose with
- *    `rgb(var(--uob-primary-500) / <alpha>)` and Tailwind `<alpha-value>`.
- *  - OnboardingFlow renders the `.uob-flow` wrapper automatically.
- */
-
-/* ------------------------------------------------------------------ */
-/* Design tokens (light defaults)                                      */
-/* ------------------------------------------------------------------ */
-
-.uob-flow {
-  --uob-font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
-    'Segoe UI', Roboto, sans-serif;
-
-  --uob-primary-50: 238 242 255;
-  --uob-primary-100: 224 231 255;
-  --uob-primary-500: 99 102 241;
-  --uob-primary-600: 79 70 229;
-  --uob-primary-700: 67 56 202;
-
-  --uob-surface: 255 255 255;
-  --uob-surface-muted: 249 250 251;
-  --uob-text-primary: 17 24 39;
-  --uob-text-muted: 107 114 128;
-  --uob-border: 229 231 235;
-
-  --uob-success: 16 185 129;
-  --uob-warning: 245 158 11;
-  --uob-error: 239 68 68;
-}
-
-@media (prefers-color-scheme: dark) {
-  .uob-flow {
-    --uob-surface: 17 24 39;
-    --uob-surface-muted: 31 41 55;
-    --uob-text-primary: 243 244 246;
-    --uob-text-muted: 156 163 175;
-    --uob-border: 55 65 81;
-  }
-}
-
-/* ------------------------------------------------------------------ */
-/* Scoped reset — restores preflight invariants inside `.uob-flow`     */
-/* only. Deliberately emitted BEFORE the utilities layer so utility    */
-/* classes always win on equal specificity.                            */
-/* ------------------------------------------------------------------ */
-
-.uob-flow,
-.uob-flow *,
-.uob-flow *::before,
-.uob-flow *::after {
-  box-sizing: border-box;
-  border-width: 0;
-  border-style: solid;
-  border-color: rgb(var(--uob-border));
-}
-
-.uob-flow h1,
-.uob-flow h2,
-.uob-flow h3,
-.uob-flow h4,
-.uob-flow h5,
-.uob-flow h6,
-.uob-flow p,
-.uob-flow figure,
-.uob-flow blockquote,
-.uob-flow pre {
-  margin: 0;
-}
-
-.uob-flow ol,
-.uob-flow ul {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-.uob-flow button,
-.uob-flow input,
-.uob-flow optgroup,
-.uob-flow select,
-.uob-flow textarea {
-  font-family: inherit;
-  font-size: 100%;
-  font-weight: inherit;
-  line-height: inherit;
-  color: inherit;
-  margin: 0;
-  padding: 0;
-}
-
-.uob-flow button,
-.uob-flow [type='button'],
-.uob-flow [type='reset'],
-.uob-flow [type='submit'] {
-  -webkit-appearance: button;
-  background-color: transparent;
-  background-image: none;
-}
-
-.uob-flow progress {
-  -webkit-appearance: none;
-  appearance: none;
-}
-
-.uob-flow img,
-.uob-flow svg,
-.uob-flow video,
-.uob-flow canvas {
-  display: block;
-  vertical-align: middle;
-}
-
-.uob-flow img,
-.uob-flow video {
-  max-width: 100%;
-  height: auto;
-}
-
-/* Utilities LAST — emitted in place, after the scoped reset. */
-@tailwind utilities;

package/src/domains/onboarding/theme/index.ts

@@ -1,12 +0,0 @@
-export {
-  spacing,
-  radius,
-  typography,
-  zIndex,
-  motion,
-  breakpoint,
-  colorCssVar,
-} from './tokens';
-export { cn } from './cn';
-
-export type { SpacingToken, RadiusToken, FontSizeToken } from './tokens';

package/src/domains/onboarding/theme/tokens.ts

@@ -1,122 +0,0 @@
-/**
- * Design Tokens - Single Source of Truth
- * All visual values MUST be sourced from here.
- * Per project rules: no hardcoded colors, spacing, or font sizes anywhere else.
- */
-
-export const spacing = {
-  px: '1px',
-  0: '0',
-  0.5: '0.125rem',
-  1: '0.25rem',
-  1.5: '0.375rem',
-  2: '0.5rem',
-  2.5: '0.625rem',
-  3: '0.75rem',
-  3.5: '0.875rem',
-  4: '1rem',
-  5: '1.25rem',
-  6: '1.5rem',
-  7: '1.75rem',
-  8: '2rem',
-  10: '2.5rem',
-  12: '3rem',
-  16: '4rem',
-  20: '5rem',
-  24: '6rem',
-  32: '8rem',
-} as const;
-
-export const radius = {
-  none: '0',
-  sm: '0.25rem',
-  md: '0.5rem',
-  lg: '0.75rem',
-  xl: '1rem',
-  '2xl': '1.5rem',
-  '3xl': '2rem',
-  full: '9999px',
-} as const;
-
-export const typography = {
-  fontFamily: {
-    sans: 'var(--uob-font-sans, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif)',
-  },
-  fontSize: {
-    xs: ['0.75rem', { lineHeight: '1rem' }],
-    sm: ['0.875rem', { lineHeight: '1.25rem' }],
-    base: ['1rem', { lineHeight: '1.5rem' }],
-    lg: ['1.125rem', { lineHeight: '1.75rem' }],
-    xl: ['1.25rem', { lineHeight: '1.75rem' }],
-    '2xl': ['1.5rem', { lineHeight: '2rem' }],
-    '3xl': ['1.875rem', { lineHeight: '2.25rem' }],
-    '4xl': ['2.25rem', { lineHeight: '2.5rem' }],
-    '5xl': ['3rem', { lineHeight: '1.15' }],
-    '6xl': ['3.75rem', { lineHeight: '1.1' }],
-  },
-  fontWeight: {
-    normal: '400',
-    medium: '500',
-    semibold: '600',
-    bold: '700',
-  },
-} as const;
-
-export const zIndex = {
-  hide: -1,
-  base: 0,
-  raised: 10,
-  sticky: 20,
-  overlay: 30,
-  modal: 40,
-  toast: 50,
-} as const;
-
-export const motion = {
-  duration: {
-    fast: '150ms',
-    normal: '250ms',
-    slow: '400ms',
-    slower: '600ms',
-  },
-  easing: {
-    linear: 'linear',
-    in: 'cubic-bezier(0.4, 0, 1, 1)',
-    out: 'cubic-bezier(0, 0, 0.2, 1)',
-    inOut: 'cubic-bezier(0.4, 0, 0.2, 1)',
-  },
-} as const;
-
-export const breakpoint = {
-  sm: '640px',
-  md: '768px',
-  lg: '1024px',
-  xl: '1280px',
-  '2xl': '1536px',
-} as const;
-
-/**
- * Semantic color tokens — referenced via CSS custom properties.
- * Consumers override --uob-primary-500 etc. on `.uob-flow` to rebrand
- * without code changes. Values are space-separated RGB triplets so they
- * compose with `rgb(var(--x) / <alpha>)`.
- */
-export const colorCssVar = {
-  primary50: 'var(--uob-primary-50, 238 242 255)',
-  primary100: 'var(--uob-primary-100, 224 231 255)',
-  primary500: 'var(--uob-primary-500, 99 102 241)',
-  primary600: 'var(--uob-primary-600, 79 70 229)',
-  primary700: 'var(--uob-primary-700, 67 56 202)',
-  surface: 'var(--uob-surface, 255 255 255)',
-  surfaceMuted: 'var(--uob-surface-muted, 249 250 251)',
-  textPrimary: 'var(--uob-text-primary, 17 24 39)',
-  textMuted: 'var(--uob-text-muted, 107 114 128)',
-  border: 'var(--uob-border, 229 231 235)',
-  success: 'var(--uob-success, 16 185 129)',
-  warning: 'var(--uob-warning, 245 158 11)',
-  error: 'var(--uob-error, 239 68 68)',
-} as const;
-
-export type SpacingToken = keyof typeof spacing;
-export type RadiusToken = keyof typeof radius;
-export type FontSizeToken = keyof typeof typography.fontSize;