@gunjo/ui 0.0.1-alpha.0

package/src/components/templates/MediaLibraryTemplate.tsx

@@ -0,0 +1,55 @@
+import * as React from "react"
+import { cn } from "../../lib/utils"
+
+interface MediaLibraryTemplateProps extends React.HTMLAttributes<HTMLDivElement> {
+    header?: React.ReactNode
+    sidebar?: React.ReactNode
+    details?: React.ReactNode
+    children: React.ReactNode
+}
+
+export function MediaLibraryTemplate({
+    children,
+    header,
+    sidebar,
+    details,
+    className,
+    ...props
+}: MediaLibraryTemplateProps) {
+    return (
+        <div className={cn("flex flex-col w-[1280px] h-[720px] h-screen w-full overflow-hidden bg-background", className)} {...props}>
+            {/* Header */}
+            {header && (
+                <div className="flex-shrink-0 z-20 border-b bg-background">
+                    <div className="flex h-14 items-center px-4">
+                        {header}
+                    </div>
+                </div>
+            )}
+
+            {/* Main Content Area */}
+            <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">
+                        {sidebar}
+                    </aside>
+                )}
+
+                {/* Asset Grid / Center Area */}
+                <main className="flex-1 relative overflow-hidden flex flex-col bg-background">
+                    <div className="w-full h-full overflow-auto">
+                        {children}
+                    </div>
+                </main>
+
+                {/* Right Details Panel (Asset Metadata) */}
+                {details && (
+                    <aside className="flex-shrink-0 w-80 border-l bg-background hidden lg:block overflow-y-auto">
+                        {details}
+                    </aside>
+                )}
+            </div>
+        </div>
+    )
+}

package/src/components/templates/SettingsTemplate.tsx

@@ -0,0 +1,48 @@
+import * as React from "react"
+import { cn } from "../../lib/utils"
+
+interface SettingsTemplateProps extends React.HTMLAttributes<HTMLDivElement> {
+    title?: string
+    description?: string
+    navigation?: React.ReactNode
+    children: React.ReactNode
+}
+
+export function SettingsTemplate({
+    children,
+    navigation,
+    title = "Settings",
+    description = "Manage your account settings and preferences.",
+    className,
+    ...props
+}: SettingsTemplateProps) {
+    return (
+        <>
+            <div className={cn("md:hidden flex flex-col items-center w-[1280px] h-[720px] gap-4 w-full h-auto", className)} {...props}>
+                {/* Mobile View Placeholder or simple stack */}
+                <div className="p-4 space-y-4">
+                    <h1 className="text-2xl font-bold">{title}</h1>
+                    {navigation}
+                    {children}
+                </div>
+            </div>
+            <div className={cn("hidden flex flex-col items-center w-[1280px] h-[720px] gap-4 space-y-6 p-10 pb-16 md:block", className)} {...props}>
+                <div className="space-y-0.5">
+                    <h2 className="text-2xl font-bold tracking-tight">{title}</h2>
+                    <p className="text-muted-foreground">
+                        {description}
+                    </p>
+                </div>
+                <div data-orientation="horizontal" role="none" className="shrink-0 bg-border h-[1px] w-full my-6"></div>
+                <div className="flex flex-col space-y-8 lg:flex-row lg:space-x-12 lg:space-y-0">
+                    <aside className="-mx-4 lg:w-1/5">
+                        {navigation}
+                    </aside>
+                    <div className="flex-1 lg:max-w-2xl">
+                        {children}
+                    </div>
+                </div>
+            </div>
+        </>
+    )
+}

package/src/globals.css

@@ -0,0 +1,108 @@
+@layer base {
+    :root {
+        --warning: 45 93% 47%;
+        --success: 142 71% 45%;
+        --info: 217 91% 60%;
+        --overlay: 0 0% 0%;
+        --background: 0 0% 100%;
+        --foreground: 240 20% 6%;
+
+        --card: 0 0% 100%;
+        --card-foreground: 240 20% 6%;
+
+        --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%;
+
+        --destructive: 0 84% 60%;
+        --destructive-foreground: 210 40% 98%;
+
+        --border: 214 32% 91%;
+        --input: 214 32% 91%;
+        --ring: 217 91% 60%;
+
+        --radius: 0.5rem;
+
+        --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+        --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+        --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+        --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+        --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+        --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+        --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
+        --shadow-none: none;
+
+        --duration-75: 75ms;
+        --duration-100: 100ms;
+        --duration-150: 150ms;
+        --duration-200: 200ms;
+        --duration-300: 300ms;
+        --duration-500: 500ms;
+        --duration-700: 700ms;
+        --duration-1000: 1000ms;
+        --ease-linear: linear;
+        --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);
+    }
+
+    .dark {
+        --background: 222.2 84% 4.9%;
+        --foreground: 210 40% 98%;
+
+        --card: 222.2 84% 4.9%;
+        --card-foreground: 210 40% 98%;
+
+        --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%;
+
+        --border: 217.2 32.6% 17.5%;
+        --input: 217.2 32.6% 17.5%;
+        --ring: 224.3 76.3% 48%;
+
+        --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);
+        --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.2), 0 2px 4px -2px rgb(0 0 0 / 0.2);
+        --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.2), 0 4px 6px -4px rgb(0 0 0 / 0.2);
+        --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.2), 0 8px 10px -6px rgb(0 0 0 / 0.2);
+        --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.4);
+        --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.1);
+        --shadow-none: none;
+    }
+}
+
+@layer base {
+    * {
+        @apply border-border;
+    }
+
+    body {
+        @apply bg-background text-foreground;
+    }
+}

package/src/index.ts

@@ -0,0 +1,89 @@
+/**
+ * @gunjo/ui – Design system component library.
+ * Generated by `npm run design:sync:components`. Do not edit manually.
+ */
+
+/** Atoms */
+export * from './components/atoms/Alert';
+export * from './components/atoms/Avatar';
+export * from './components/atoms/Badge';
+export * from './components/atoms/Button';
+export * from './components/atoms/Checkbox';
+export * from './components/atoms/Img';
+export * from './components/atoms/Input';
+export * from './components/atoms/Kbd';
+export * from './components/atoms/Label';
+export * from './components/atoms/Progress';
+export * from './components/atoms/RadioGroup';
+export * from './components/atoms/Select';
+export * from './components/atoms/Separator';
+export * from './components/atoms/Skeleton';
+export * from './components/atoms/Slider';
+export * from './components/atoms/Spinner';
+export * from './components/atoms/Switch';
+export * from './components/atoms/Textarea';
+export * from './components/atoms/ToggleGroup';
+export * from './components/atoms/ToolPill';
+export * from './components/atoms/ButtonVariants';
+
+/** Molecules */
+export * from './components/molecules/Accordion';
+export * from './components/molecules/AIChatInput';
+export * from './components/molecules/AIChatMessage';
+export * from './components/molecules/Breadcrumb';
+export * from './components/molecules/Calendar';
+export * from './components/molecules/Card';
+export * from './components/molecules/Carousel';
+export * from './components/molecules/Command';
+export * from './components/molecules/ContextMenu';
+export * from './components/molecules/Dialog';
+export * from './components/molecules/DropdownMenu';
+export * from './components/molecules/FilterButton';
+export * from './components/molecules/Form';
+export * from './components/molecules/HoverCard';
+export * from './components/molecules/List';
+export * from './components/molecules/Menubar';
+export * from './components/molecules/Modal';
+export * from './components/molecules/NotificationCenter';
+export * from './components/molecules/Pagination';
+export * from './components/molecules/Popover';
+export * from './components/molecules/ProgressWidget';
+export * from './components/molecules/Resizable';
+export * from './components/molecules/ScrollArea';
+export * from './components/molecules/Sheet';
+export * from './components/molecules/SidebarItem';
+export * from './components/molecules/SortButton';
+export * from './components/molecules/StatusBar';
+export * from './components/molecules/Stepper';
+export * from './components/molecules/Table';
+export * from './components/molecules/Tabs';
+export * from './components/molecules/Toast';
+export * from './components/molecules/Tooltip';
+
+/** Organisms */
+export * from './components/organisms/AppRail';
+export * from './components/organisms/CommandPalette';
+export * from './components/organisms/FileUploader';
+export * from './components/organisms/FloatingPanel';
+export * from './components/organisms/InspectorPanel';
+export * from './components/organisms/RightRail';
+export * from './components/organisms/ShareModal';
+export * from './components/organisms/SpatialCanvas';
+export * from './components/organisms/ToastProvider';
+
+/** Templates */
+export * from './components/templates/AuthTemplate';
+export * from './components/templates/BannalyzeTemplate';
+export * from './components/templates/ChatTemplate';
+export * from './components/templates/DashboardTemplate';
+export * from './components/templates/EditorTemplate';
+export * from './components/templates/KanbanTemplate';
+export * from './components/templates/LandingTemplate';
+export * from './components/templates/MediaLibraryTemplate';
+export * from './components/templates/SettingsTemplate';
+
+/** Utility */
+export { cn } from './lib/utils';
+export { componentManifest } from './components/generated/component-manifest';
+export { componentStyleHints } from './components/generated/component-style-hints';
+

package/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+    return twMerge(clsx(inputs));
+}

package/tailwind-preset.js

@@ -0,0 +1,11 @@
+const themeExtend = require("./tailwind-theme-extend.cjs");
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+    theme: {
+        extend: themeExtend
+    },
+    plugins: [
+        require("tailwindcss-animate")
+    ],
+};

package/tailwind-theme-extend.cjs

@@ -0,0 +1,86 @@
+module.exports = {
+    colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        overlay: "hsl(var(--overlay))",
+        info: "hsl(var(--info))",
+        success: "hsl(var(--success))",
+        warning: "hsl(var(--warning))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+            DEFAULT: "hsl(var(--primary))",
+            foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+            DEFAULT: "hsl(var(--secondary))",
+            foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+            DEFAULT: "hsl(var(--destructive))",
+            foreground: "hsl(var(--destructive-foreground))",
+        },
+        muted: {
+            DEFAULT: "hsl(var(--muted))",
+            foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+            DEFAULT: "hsl(var(--accent))",
+            foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+            DEFAULT: "hsl(var(--popover))",
+            foreground: "hsl(var(--popover-foreground))",
+        },
+        card: {
+            DEFAULT: "hsl(var(--card))",
+            foreground: "hsl(var(--card-foreground))",
+        },
+    },
+    borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+    },
+    boxShadow: {
+        sm: "var(--shadow-sm)",
+        DEFAULT: "var(--shadow)",
+        md: "var(--shadow-md)",
+        lg: "var(--shadow-lg)",
+        xl: "var(--shadow-xl)",
+        "2xl": "var(--shadow-2xl)",
+        inner: "var(--shadow-inner)",
+        none: "var(--shadow-none)",
+    },
+    transitionDuration: {
+        75: "var(--duration-75)",
+        100: "var(--duration-100)",
+        150: "var(--duration-150)",
+        200: "var(--duration-200)",
+        300: "var(--duration-300)",
+        500: "var(--duration-500)",
+        700: "var(--duration-700)",
+        1000: "var(--duration-1000)",
+    },
+    transitionTimingFunction: {
+        linear: "var(--ease-linear)",
+        in: "var(--ease-in)",
+        out: "var(--ease-out)",
+        "in-out": "var(--ease-in-out)",
+    },
+    keyframes: {
+        "accordion-down": {
+            from: { height: "0" },
+            to: { height: "var(--radix-accordion-content-height)" },
+        },
+        "accordion-up": {
+            from: { height: "var(--radix-accordion-content-height)" },
+            to: { height: "0" },
+        },
+    },
+    animation: {
+        "accordion-down": "accordion-down var(--duration-200) var(--ease-out)",
+        "accordion-up": "accordion-up var(--duration-200) var(--ease-out)",
+    },
+};