@gunjo/ui 0.0.1-alpha.0 → 0.0.1-alpha.2

package/src/components/patterns/DocsTemplate.tsx

@@ -0,0 +1,41 @@
+import * as React from "react"
+
+import { cn } from "../../lib/utils"
+
+export interface DocsTemplateProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Left navigation sidebar content. */
+    sidebar: React.ReactNode
+    /** Right "On this page" TOC content. Optional. */
+    toc?: React.ReactNode
+    /** Top header. Optional (e.g. site Header organism). */
+    header?: React.ReactNode
+}
+
+const DocsTemplate = React.forwardRef<HTMLDivElement, DocsTemplateProps>(
+    ({ className, sidebar, toc, header, children, ...props }, ref) => (
+        <div
+            ref={ref}
+            className={cn(
+                "flex min-h-screen w-full flex-col bg-background text-foreground",
+                className
+            )}
+            {...props}
+        >
+            {header}
+            <div className="grid flex-1 grid-cols-[200px_minmax(0,1fr)] md:grid-cols-[220px_minmax(0,1fr)_180px]">
+                <aside className="border-r border-border bg-muted/40 p-4 overflow-y-auto">
+                    {sidebar}
+                </aside>
+                <main className="p-6 md:p-10 overflow-x-auto">{children}</main>
+                {toc ? (
+                    <aside className="hidden md:block border-l border-border p-4 overflow-y-auto text-sm">
+                        {toc}
+                    </aside>
+                ) : null}
+            </div>
+        </div>
+    )
+)
+DocsTemplate.displayName = "DocsTemplate"
+
+export { DocsTemplate }

package/src/components/{templates → patterns}/MediaLibraryTemplate.tsx

@@ -31,7 +31,7 @@ export function MediaLibraryTemplate({
             <div className="flex flex-1 overflow-hidden relative">
                 {/* Left Sidebar (Folders/Collections) */}
                 {sidebar && (
-                    <aside className="group flex-shrink-0 w-64 border-r bg-muted/10 hidden md:block overflow-y-auto">
+                    <aside className="group hidden w-64 flex-shrink-0 overflow-hidden border-r bg-muted/10 md:block">
                         {sidebar}
                     </aside>
                 )}

package/src/components/patterns/OnboardingTemplate.tsx

@@ -0,0 +1,32 @@
+import * as React from "react"
+
+import { cn } from "../../lib/utils"
+
+export interface OnboardingTemplateProps
+    extends React.HTMLAttributes<HTMLDivElement> {
+    /** Hero side panel content (welcome / branding / illustration). */
+    hero: React.ReactNode
+}
+
+const OnboardingTemplate = React.forwardRef<HTMLDivElement, OnboardingTemplateProps>(
+    ({ className, hero, children, ...props }, ref) => (
+        <div
+            ref={ref}
+            className={cn(
+                "grid min-h-screen w-full grid-cols-1 bg-background text-foreground md:grid-cols-[minmax(0,2fr)_minmax(0,3fr)]",
+                className
+            )}
+            {...props}
+        >
+            <aside className="flex flex-col justify-center gap-6 bg-foreground p-12 text-background md:min-h-screen">
+                {hero}
+            </aside>
+            <main className="flex items-center justify-center p-6 md:p-12">
+                <div className="w-full max-w-lg">{children}</div>
+            </main>
+        </div>
+    )
+)
+OnboardingTemplate.displayName = "OnboardingTemplate"
+
+export { OnboardingTemplate }

package/src/components/patterns/PricingTemplate.tsx

@@ -0,0 +1,106 @@
+import * as React from "react"
+import { IconCheck as Check } from "@tabler/icons-react";
+
+import { cn } from "../../lib/utils"
+
+export interface PricingPlan {
+    id: string
+    name: React.ReactNode
+    price: React.ReactNode
+    period?: React.ReactNode
+    description?: React.ReactNode
+    features: React.ReactNode[]
+    cta: React.ReactNode
+    /** Highlight this plan as featured. */
+    featured?: boolean
+}
+
+export interface PricingTemplateProps
+    extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+    title?: React.ReactNode
+    subtitle?: React.ReactNode
+    plans: PricingPlan[]
+}
+
+const PricingTemplate = React.forwardRef<HTMLDivElement, PricingTemplateProps>(
+    (
+        {
+            className,
+            title = "Pricing",
+            subtitle = "Choose a plan that fits your team",
+            plans,
+            ...props
+        },
+        ref
+    ) => (
+        <section
+            ref={ref}
+            className={cn("flex w-full flex-col items-center gap-8 p-8", className)}
+            {...props}
+        >
+            <div className="flex flex-col items-center gap-2 text-center">
+                <h1 className="text-3xl font-bold tracking-tight">{title}</h1>
+                {subtitle ? (
+                    <p className="text-muted-foreground">{subtitle}</p>
+                ) : null}
+            </div>
+            <div className="grid w-full max-w-4xl gap-4 md:grid-cols-3">
+                {plans.map((plan) => (
+                    <div
+                        key={plan.id}
+                        className={cn(
+                            "flex flex-col gap-3 rounded-lg border p-6",
+                            plan.featured
+                                ? "border-foreground bg-foreground text-background shadow-lg"
+                                : "border-border bg-card text-card-foreground"
+                        )}
+                    >
+                        <p className="text-sm font-semibold uppercase tracking-wide">
+                            {plan.name}
+                        </p>
+                        <div className="flex items-baseline gap-1">
+                            <span className="text-3xl font-bold tracking-tight">
+                                {plan.price}
+                            </span>
+                            {plan.period ? (
+                                <span
+                                    className={cn(
+                                        "text-sm",
+                                        plan.featured ? "text-background/70" : "text-muted-foreground"
+                                    )}
+                                >
+                                    {plan.period}
+                                </span>
+                            ) : null}
+                        </div>
+                        {plan.description ? (
+                            <p
+                                className={cn(
+                                    "text-sm",
+                                    plan.featured ? "text-background/70" : "text-muted-foreground"
+                                )}
+                            >
+                                {plan.description}
+                            </p>
+                        ) : null}
+                        <ul className="flex flex-col gap-2 pt-2">
+                            {plan.features.map((f, i) => (
+                                <li
+                                    key={i}
+                                    className="flex items-start gap-2 text-sm"
+                                >
+                                    <Check className="mt-0.5 h-3.5 w-3.5 shrink-0" aria-hidden />
+                                    <span>{f}</span>
+                                </li>
+                            ))}
+                        </ul>
+                        <div className="mt-auto pt-4">{plan.cta}</div>
+                    </div>
+                ))}
+            </div>
+        </section>
+    )
+)
+PricingTemplate.displayName = "PricingTemplate"
+
+export { PricingTemplate }

package/src/globals.css

@@ -1,8 +1,45 @@
 @layer base {
     :root {
-        --warning: 45 93% 47%;
-        --success: 142 71% 45%;
+        --primary-subtle: 232 55% 96%;
+        --primary-subtle-foreground: 232 43% 28%;
+        --primary: 232 39% 49%;
+        --primary-foreground: 210 40% 98%;
+        --primary-strong: 232 47% 38%;
+        --primary-strong-foreground: 210 40% 98%;
+        --primary-border: 232 46% 82%;
+
+        --info-subtle: 214 100% 97%;
+        --info-subtle-foreground: 217 91% 28%;
         --info: 217 91% 60%;
+        --info-foreground: 222 47% 11%;
+        --info-strong: 224 76% 48%;
+        --info-strong-foreground: 210 40% 98%;
+        --info-border: 214 95% 86%;
+
+        --success-subtle: 138 76% 97%;
+        --success-subtle-foreground: 143 64% 24%;
+        --success: 142 71% 45%;
+        --success-foreground: 144 61% 10%;
+        --success-strong: 142 72% 29%;
+        --success-strong-foreground: 210 40% 98%;
+        --success-border: 141 84% 85%;
+
+        --warning-subtle: 48 96% 89%;
+        --warning-subtle-foreground: 32 95% 20%;
+        --warning: 45 93% 47%;
+        --warning-foreground: 24 10% 10%;
+        --warning-strong: 32 95% 35%;
+        --warning-strong-foreground: 210 40% 98%;
+        --warning-border: 45 96% 75%;
+
+        --destructive-subtle: 0 86% 97%;
+        --destructive-subtle-foreground: 0 63% 31%;
+        --destructive: 0 72% 51%;
+        --destructive-foreground: 210 40% 98%;
+        --destructive-strong: 0 72% 43%;
+        --destructive-strong-foreground: 210 40% 98%;
+        --destructive-border: 0 93% 84%;
+
         --overlay: 0 0% 0%;
         --background: 0 0% 100%;
         --foreground: 240 20% 6%;
@@ -13,24 +50,18 @@
         --popover: 0 0% 100%;
         --popover-foreground: 240 20% 6%;
 
-        --primary: 217 91% 60%;
-        --primary-foreground: 210 40% 98%;
-
         --secondary: 210 40% 96%;
         --secondary-foreground: 240 6% 10%;
 
         --muted: 210 40% 96%;
-        --muted-foreground: 215 16% 47%;
-
-        --accent: 210 40% 96%;
-        --accent-foreground: 240 6% 10%;
+        --muted-foreground: 215 20% 40%;
 
-        --destructive: 0 84% 60%;
-        --destructive-foreground: 210 40% 98%;
+        --accent: 29 31% 87%;
+        --accent-foreground: 14 22% 19%;
 
         --border: 214 32% 91%;
         --input: 214 32% 91%;
-        --ring: 217 91% 60%;
+        --ring: 232 39% 49%;
 
         --radius: 0.5rem;
 
@@ -55,9 +86,77 @@
         --ease-in: cubic-bezier(0.4, 0, 1, 1);
         --ease-out: cubic-bezier(0, 0, 0.2, 1);
         --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+
+        /* Gunjō brand atmosphere — used by hero and color-story art only.
+           Theme-independent (do not flip with .dark) so the hero keeps its
+           identity across modes. */
+        --gunjo-deep: 232 50% 32%;
+        --gunjo-deeper: 233 55% 18%;
+        --gunjo-deepest: 234 60% 8%;
+        --gunjo-light: 232 50% 55%;
+        --gunjo-mid: 232 39% 49%;
+        --gunjo-bright: 232 50% 60%;
+        --gunjo-dark: 233 50% 25%;
+        --gunjo-swatch-hue: 232;
+        --kobicha-warm: 14 35% 35%;
+        --kobicha-mid: 15 28% 34%;
+        --kobicha-bright: 20 35% 55%;
+        --kobicha-deepest: 15 28% 22%;
+        --palette-red: 0 84% 60%;
+        --palette-green: 142 71% 45%;
+        --palette-blue: 221 83% 53%;
+        --palette-yellow: 48 96% 53%;
+        --palette-cyan: 188 86% 53%;
+        --palette-magenta: 292 84% 61%;
+        --palette-gray: 220 9% 46%;
+        --palette-white: 0 0% 100%;
+        --palette-black: 0 0% 0%;
+        --pure-white: 0 0% 100%;
+        --pure-black: 234 60% 4%;
     }
 
     .dark {
+        --primary-subtle: 232 42% 18%;
+        --primary-subtle-foreground: 232 90% 88%;
+        --primary: 232 47% 65%;
+        --primary-foreground: 234 60% 8%;
+        --primary-strong: 232 55% 72%;
+        --primary-strong-foreground: 234 60% 8%;
+        --primary-border: 232 40% 38%;
+
+        --info-subtle: 220 47% 16%;
+        --info-subtle-foreground: 213 94% 88%;
+        --info: 213 94% 68%;
+        --info-foreground: 222 47% 11%;
+        --info-strong: 213 94% 68%;
+        --info-strong-foreground: 222 47% 11%;
+        --info-border: 217 55% 35%;
+
+        --success-subtle: 150 50% 14%;
+        --success-subtle-foreground: 142 76% 85%;
+        --success: 142 69% 58%;
+        --success-foreground: 144 61% 9%;
+        --success-strong: 142 69% 58%;
+        --success-strong-foreground: 144 61% 9%;
+        --success-border: 145 52% 32%;
+
+        --warning-subtle: 38 60% 15%;
+        --warning-subtle-foreground: 48 96% 82%;
+        --warning: 43 96% 56%;
+        --warning-foreground: 26 83% 14%;
+        --warning-strong: 43 96% 56%;
+        --warning-strong-foreground: 26 83% 14%;
+        --warning-border: 40 64% 34%;
+
+        --destructive-subtle: 0 50% 16%;
+        --destructive-subtle-foreground: 0 93% 88%;
+        --destructive: 0 72% 51%;
+        --destructive-foreground: 210 40% 98%;
+        --destructive-strong: 0 72% 43%;
+        --destructive-strong-foreground: 210 40% 98%;
+        --destructive-border: 0 55% 36%;
+
+        --overlay: 0 0% 0%;
         --background: 222.2 84% 4.9%;
         --foreground: 210 40% 98%;
 
@@ -67,24 +166,28 @@
         --popover: 222.2 84% 4.9%;
         --popover-foreground: 210 40% 98%;
 
-        --primary: 217.2 91.2% 59.8%;
-        --primary-foreground: 222.2 47.4% 11.2%;
-
         --secondary: 217.2 32.6% 17.5%;
         --secondary-foreground: 210 40% 98%;
 
         --muted: 217.2 32.6% 17.5%;
         --muted-foreground: 215 20.2% 65.1%;
 
-        --accent: 217.2 32.6% 17.5%;
-        --accent-foreground: 210 40% 98%;
-
-        --destructive: 0 62.8% 30.6%;
-        --destructive-foreground: 210 40% 98%;
+        --accent: 14 22% 19%;
+        --accent-foreground: 29 31% 87%;
 
         --border: 217.2 32.6% 17.5%;
         --input: 217.2 32.6% 17.5%;
-        --ring: 224.3 76.3% 48%;
+        --ring: 232 47% 65%;
+
+        --palette-red: 0 84% 60%;
+        --palette-green: 142 71% 45%;
+        --palette-blue: 221 83% 53%;
+        --palette-yellow: 48 96% 53%;
+        --palette-cyan: 188 86% 53%;
+        --palette-magenta: 292 84% 61%;
+        --palette-gray: 220 9% 46%;
+        --palette-white: 0 0% 100%;
+        --palette-black: 0 0% 0%;
 
         --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.2);
         --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.2), 0 1px 2px -1px rgb(0 0 0 / 0.2);
@@ -105,4 +208,52 @@
     body {
         @apply bg-background text-foreground;
     }
-}
+
+}
+
+@layer components {
+    [data-tree-view-row] {
+        padding-left: var(--tree-view-indent, 0.5rem);
+    }
+
+    [data-sidebar-item-button] {
+        padding-left: var(--sidebar-item-indent, 0.5rem);
+    }
+
+    .gunjo-timeline-marker-active {
+        animation: gunjo-timeline-marker-pulse 1.8s ease-in-out infinite;
+        box-shadow:
+            0 0 0 4px hsl(var(--primary) / 0.16),
+            0 0 18px hsl(var(--primary) / 0.35);
+    }
+
+    @keyframes gunjo-timeline-marker-pulse {
+        0%,
+        100% {
+            box-shadow:
+                0 0 0 4px hsl(var(--primary) / 0.12),
+                0 0 12px hsl(var(--primary) / 0.24);
+        }
+
+        50% {
+            box-shadow:
+                0 0 0 6px hsl(var(--primary) / 0.18),
+                0 0 22px hsl(var(--primary) / 0.42);
+        }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        .gunjo-timeline-marker-active {
+            animation: none;
+        }
+    }
+
+}
+
+@media (max-width: 767px) {
+    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
+    textarea:not([data-mobile-focus-zoom]),
+    select:not([data-mobile-focus-zoom]) {
+        font-size: 16px;
+    }
+}