organify-ui 0.1.0 → 0.2.0

package/dist/index.js

@@ -175,14 +175,14 @@ function OrgLoaderInline({ className, ...props }) {
   );
 }
 var buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium tracking-wide uppercase transition-all duration-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-light/50 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium tracking-wide uppercase transition-all duration-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-light disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {
     variants: {
       variant: {
         default: "bg-primary text-white hover:bg-primary-light shadow-glow-primary clip-geo",
         secondary: "bg-transparent border border-white/20 text-white hover:text-white hover:border-primary-light hover:bg-white/5 clip-geo-inv",
         ghost: "bg-transparent text-white/70 hover:bg-white/5 hover:text-white",
-        destructive: "bg-semantic-error text-white hover:bg-semantic-error/90 shadow-glow-error clip-geo",
+        destructive: "bg-error text-white hover:bg-error/90 shadow-glow-error clip-geo",
         outline: "bg-transparent border border-white/20 text-white hover:bg-white/5 hover:border-white/40",
         link: "text-primary-light underline-offset-4 hover:underline",
         // ─── Cream Light theme buttons ─────────────
@@ -228,10 +228,10 @@ var inputVariants = cva(
   {
     variants: {
       variant: {
-        default: "clip-geo-br focus:ring-1 focus:ring-primary-light/50 focus:border-primary-light/50",
-        flat: "rounded-none focus:ring-1 focus:ring-primary-light/50 focus:border-primary-light/50",
-        rounded: "rounded-lg focus:ring-1 focus:ring-primary-light/50 focus:border-primary-light/50",
-        error: "border-semantic-error/30 bg-semantic-error/5 text-red-100 placeholder:text-red-500/30 focus:border-semantic-error focus:ring-1 focus:ring-semantic-error/20 clip-geo-br",
+        default: "clip-geo-br focus:ring-1 focus:ring-primary-light focus:border-primary-light/50",
+        flat: "rounded-none focus:ring-1 focus:ring-primary-light focus:border-primary-light/50",
+        rounded: "rounded-lg focus:ring-1 focus:ring-primary-light focus:border-primary-light/50",
+        error: "border-error/30 bg-error/5 text-red-100 placeholder:text-red-500/30 focus:border-error focus:ring-1 focus:ring-error/20 clip-geo-br",
         // ─── Cream Light theme ─────────────────────
         cream: "bg-white/40 border-black/5 text-neutral-900 placeholder:text-neutral-400 rounded-lg focus:border-primary focus:bg-white/80 focus:shadow-[0_0_0_1px_rgba(36,25,121,0.05)] backdrop-blur-sm"
       }
@@ -252,9 +252,9 @@ var Input = React3.forwardRef(
           htmlFor: id,
           className: cn(
             "absolute -top-3 z-10 px-2 text-label uppercase tracking-widest",
-            effectiveVariant === "cream" ? "bg-cream-base" : "bg-card-surface",
+            effectiveVariant === "cream" ? "bg-cream-base" : "bg-surface",
             labelPosition === "left" ? "left-0 ml-2" : "right-0 mr-2",
-            error ? "text-semantic-error" : "text-primary-light"
+            error ? "text-error" : "text-primary-light"
           ),
           children: label
         }
@@ -272,7 +272,7 @@ var Input = React3.forwardRef(
         }
       ),
       effectiveVariant !== "cream" && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute bottom-0 right-0 h-4 w-4 border-b border-r border-white/20" }),
-      error && /* @__PURE__ */ jsx("div", { id: `${id}-error`, className: "mt-2 flex items-center justify-end gap-2", children: /* @__PURE__ */ jsx("span", { className: "text-mono-xs text-semantic-error", children: error }) })
+      error && /* @__PURE__ */ jsx("div", { id: `${id}-error`, className: "mt-2 flex items-center justify-end gap-2", children: /* @__PURE__ */ jsx("span", { className: "text-mono-xs text-error", children: error }) })
     ] });
   }
 );
@@ -401,7 +401,7 @@ var Toggle = React3.forwardRef(({ className, label, description, ...props }, ref
             {
               id,
               ref,
-              className: "peer inline-flex h-5 w-10 shrink-0 cursor-pointer items-center rounded-none border border-white/10 bg-black/40 transition-colors data-[state=checked]:border-primary-light data-[state=checked]:bg-primary/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-light/50",
+              className: "peer inline-flex h-5 w-10 shrink-0 cursor-pointer items-center rounded-none border border-white/10 bg-black/40 transition-colors data-[state=checked]:border-primary-light data-[state=checked]:bg-primary/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-light",
               ...props,
               children: /* @__PURE__ */ jsx(SwitchPrimitive.Thumb, { className: "pointer-events-none block h-4 w-4 border border-white/10 bg-white/20 transition-transform data-[state=checked]:translate-x-5 data-[state=checked]:border-white data-[state=checked]:bg-white data-[state=unchecked]:translate-x-0" })
             }
@@ -415,7 +415,7 @@ var Toggle = React3.forwardRef(({ className, label, description, ...props }, ref
     {
       ref,
       className: cn(
-        "peer inline-flex h-5 w-10 shrink-0 cursor-pointer items-center rounded-none border border-white/10 bg-black/40 transition-colors data-[state=checked]:border-primary-light data-[state=checked]:bg-primary/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-light/50",
+        "peer inline-flex h-5 w-10 shrink-0 cursor-pointer items-center rounded-none border border-white/10 bg-black/40 transition-colors data-[state=checked]:border-primary-light data-[state=checked]:bg-primary/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-light",
         className
       ),
       ...props,
@@ -431,10 +431,10 @@ var badgeVariants = cva(
       variant: {
         default: "rounded-md border border-white/10 bg-white/5 px-3 py-1.5 text-white/80",
         primary: "rounded-md border border-primary-light/30 bg-primary/20 px-3 py-1.5 text-primary-light",
-        success: "rounded-md border border-semantic-success/30 bg-semantic-success/10 px-3 py-1.5 text-emerald-200",
-        warning: "rounded-md border border-semantic-warning/30 bg-semantic-warning/10 px-3 py-1.5 text-amber-200",
-        error: "rounded-md border border-semantic-error/30 bg-semantic-error/10 px-3 py-1.5 text-rose-200",
-        info: "rounded-md border border-semantic-info/30 bg-semantic-info/10 px-3 py-1.5 text-blue-200",
+        success: "rounded-md border border-success/30 bg-success/10 px-3 py-1.5 text-success-light",
+        warning: "rounded-md border border-warning/30 bg-warning/10 px-3 py-1.5 text-warning-light",
+        error: "rounded-md border border-error/30 bg-error/10 px-3 py-1.5 text-error-light",
+        info: "rounded-md border border-info/30 bg-info/10 px-3 py-1.5 text-info-light",
         // ─── Flow status (from Brand Assets HTML) ──
         "in-flow": "rounded-md border border-indigo-500/30 bg-indigo-500/20 px-3 py-1.5 text-indigo-200 shadow-[0_0_15px_rgba(99,102,241,0.15)]",
         "deep-work": "rounded-md border border-fuchsia-500/20 bg-fuchsia-500/10 px-3 py-1.5 text-fuchsia-200",
@@ -506,7 +506,7 @@ var Avatar = React3.forwardRef(({ className, shape, size, status, statusColor, g
     "span",
     {
       className: cn(
-        "absolute -bottom-0.5 -right-0.5 rounded-full border-2 border-card-surface",
+        "absolute -bottom-0.5 -right-0.5 rounded-full border-2 border-surface",
         size === "sm" && "h-2.5 w-2.5",
         size === "default" && "h-3 w-3",
         (size === "lg" || size === "xl") && "h-3.5 w-3.5",
@@ -624,7 +624,7 @@ var Progress = React3.forwardRef(({ className, value, showLabel, label, variant
 ] }));
 Progress.displayName = "Progress";
 var alertVariants = cva(
-  "group relative overflow-visible rounded-r-2xl rounded-l-md border-l-4 border-y border-r border-white/10 bg-card-surface/80 py-5 pl-12 pr-6 shadow-lg backdrop-blur-xl",
+  "group relative overflow-visible rounded-r-2xl rounded-l-md border-l-4 border-y border-r border-white/10 bg-surface/80 py-5 pl-12 pr-6 shadow-lg backdrop-blur-xl",
   {
     variants: {
       variant: {
@@ -724,7 +724,7 @@ function Toast({
         )
       }
     ),
-    /* @__PURE__ */ jsxs("div", { className: "relative z-10 flex min-w-[320px] items-center gap-4 rounded-2xl border border-white/10 bg-card-surface px-5 py-4 shadow-2xl backdrop-blur-2xl", children: [
+    /* @__PURE__ */ jsxs("div", { className: "relative z-10 flex min-w-[320px] items-center gap-4 rounded-2xl border border-white/10 bg-surface px-5 py-4 shadow-2xl backdrop-blur-2xl", children: [
       children,
       onClose && /* @__PURE__ */ jsx(
         "button",
@@ -779,7 +779,7 @@ function EmptyState({
           /* @__PURE__ */ jsx("div", { className: "absolute inset-0 animate-[spin_10s_linear_infinite] rounded-full border border-white/5" }),
           /* @__PURE__ */ jsx("div", { className: "absolute inset-4 rounded-full bg-gradient-to-tr from-primary/30 to-purple-500/10 blur-xl transition-all duration-700 group-hover:blur-2xl" }),
           /* @__PURE__ */ jsxs("div", { className: "relative flex h-full w-full items-center justify-center", children: [
-            /* @__PURE__ */ jsx("div", { className: "z-10 flex h-20 w-20 items-center justify-center rounded-full border border-white/10 bg-card-surface shadow-2xl", children: icon || /* @__PURE__ */ jsx("span", { className: "text-4xl text-slate-200", children: "\u{1F9D8}" }) }),
+            /* @__PURE__ */ jsx("div", { className: "z-10 flex h-20 w-20 items-center justify-center rounded-full border border-white/10 bg-surface shadow-2xl", children: icon || /* @__PURE__ */ jsx("span", { className: "text-4xl text-slate-200", children: "\u{1F9D8}" }) }),
             /* @__PURE__ */ jsx("div", { className: "absolute right-4 top-0 h-3 w-3 rounded-full bg-emerald-400 blur-[1px]" }),
             /* @__PURE__ */ jsx("div", { className: "absolute bottom-2 left-6 h-2 w-2 rounded-full bg-purple-400 blur-[1px]" })
           ] })
@@ -809,7 +809,7 @@ var glassPanelVariants = cva("relative transition-all duration-300", {
       highlight: "glass-panel-highlight",
       alt: "glass-panel-alt",
       cream: "glass-panel-cream",
-      flat: "rounded-2xl border border-white/10 bg-card-surface/80 shadow-glass-lg backdrop-blur-2xl"
+      flat: "rounded-2xl border border-white/10 bg-surface/80 shadow-glass-lg backdrop-blur-2xl"
     },
     corners: {
       none: "",
@@ -1069,7 +1069,7 @@ var metricCardVariants = cva(
     variants: {
       variant: {
         default: [
-          "border-white/10 bg-card-surface/80 backdrop-blur-2xl",
+          "border-white/10 bg-surface/80 backdrop-blur-2xl",
           "shadow-glass-lg hover:shadow-glass-xl"
         ],
         highlight: [
@@ -1129,7 +1129,7 @@ function MetricCard({
         {
           className: cn(
             "rounded-full px-2 py-0.5 text-xs font-semibold",
-            trend.positive ? "bg-success/15 text-success" : "bg-error/15 text-error"
+            trend.positive ? "bg-success/15 text-success-light" : "bg-error/15 text-error-light"
           ),
           children: [
             trend.positive ? "\u2191" : "\u2193",
@@ -1318,7 +1318,7 @@ function StepCircle({
           variant !== "cream" && "shadow-[0_0_20px_rgba(79,57,246,0.4)]"
         ],
         status === "pending" && [
-          variant === "cream" ? "border-2 border-cream-border bg-cream-card text-cream-muted" : "border-2 border-white/10 bg-card-surface text-neutral-500"
+          variant === "cream" ? "border-2 border-cream-border bg-cream-card text-cream-muted" : "border-2 border-white/10 bg-surface text-neutral-500"
         ]
       ),
       children: [