@luanthnh/cntt-ui 0.1.5

package/components/ui/VStack/index.tsx

@@ -0,0 +1,69 @@
+'use client';
+
+import React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { motion, type HTMLMotionProps } from 'motion/react';
+
+import { cn } from '@/lib/utils';
+
+/* ---------- VStack ---------- */
+const vStackVariants = cva('flex flex-col', {
+  variants: {
+    justify: {
+      top: 'justify-start',
+      bottom: 'justify-end',
+      center: 'justify-center',
+      apart: 'justify-between',
+      around: 'justify-around',
+      evenly: 'justify-evenly',
+    },
+    align: {
+      default: 'items-stretch',
+      center: 'items-center',
+      start: 'items-start',
+      end: 'items-end',
+      baseline: 'items-baseline',
+    },
+    spacing: {
+      0: 'gap-0',
+      2: 'gap-0.5',
+      4: 'gap-1',
+      6: 'gap-1.5',
+      8: 'gap-2',
+      12: 'gap-3',
+      16: 'gap-4',
+      20: 'gap-5',
+      24: 'gap-6',
+      32: 'gap-8',
+      40: 'gap-10',
+      48: 'gap-12',
+      64: 'gap-16',
+      none: 'gap-0',
+    },
+    noWrap: {
+      true: 'flex-nowrap',
+    },
+  },
+  defaultVariants: {
+    spacing: 16,
+    justify: 'top',
+    align: 'default',
+  },
+});
+
+export interface VStackProps extends VariantProps<typeof vStackVariants>, HTMLMotionProps<'div'> {}
+
+const VStack = React.forwardRef<HTMLDivElement, VStackProps>(
+  ({ className, noWrap, justify, align, spacing, children, ...motionProps }, ref) => (
+    <motion.div
+      ref={ref}
+      className={cn(vStackVariants({ spacing, align, justify, noWrap }), className)}
+      {...motionProps}
+    >
+      {children}
+    </motion.div>
+  ),
+);
+VStack.displayName = 'VStack';
+
+export { VStack, vStackVariants };

package/components/ui/colors.stories.tsx

@@ -0,0 +1,148 @@
+import type { Meta } from '@storybook/react';
+
+/**
+ * Display existing color palettes from `globals.css`.
+ * Colors are defined as CSS variables with Dark Mode support.
+ */
+const meta: Meta = {
+  title: 'Theme/Colors',
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+
+const ColorGroup = ({ title, colors }: { title: string; colors: Record<string, string> }) => (
+  <div className="mb-10">
+    <h3 className="text-foreground mb-4 text-lg font-bold">{title}</h3>
+    <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6">
+      {Object.entries(colors).map(([name, variable]) => (
+        <div key={name} className="flex flex-col gap-2">
+          <div
+            className="border-border h-20 w-full rounded-lg border shadow-sm transition-transform hover:scale-105"
+            style={{ backgroundColor: variable }}
+          />
+          <div className="flex flex-col">
+            <span className="text-foreground text-sm font-medium">{name}</span>
+            <span className="text-muted-foreground text-xs uppercase">
+              {variable.replace('var(', '').replace(')', '')}
+            </span>
+          </div>
+        </div>
+      ))}
+    </div>
+  </div>
+);
+
+export const Palettes = {
+  render: () => (
+    <div className="bg-background min-h-screen p-8">
+      <div className="border-border mb-8 border-b pb-4">
+        <h1 className="text-foreground text-3xl font-bold">Color Palette</h1>
+        <p className="text-muted-foreground mt-2">
+          The color system used in the application, defined in <code>globals.css</code>.
+        </p>
+      </div>
+
+      <ColorGroup
+        title="Primary (Blue)"
+        colors={{
+          'Primary 50': 'var(--primary-50)',
+          'Primary 100': 'var(--primary-100)',
+          'Primary 200': 'var(--primary-200)',
+          'Primary 300': 'var(--primary-300)',
+          'Primary 400': 'var(--primary-400)',
+          'Primary 500': 'var(--primary-500)',
+          'Primary 600': 'var(--primary-600)',
+          'Primary 700': 'var(--primary-700)',
+          'Primary 800': 'var(--primary-800)',
+          'Primary 900': 'var(--primary-900)',
+          'Primary 950': 'var(--primary-950)',
+          Default: 'var(--primary)',
+        }}
+      />
+
+      <ColorGroup
+        title="Secondary & Muted"
+        colors={{
+          'Secondary 50': 'var(--secondary-50)',
+          'Secondary 100': 'var(--secondary-100)',
+          'Secondary 200': 'var(--secondary-200)',
+          Secondary: 'var(--secondary)',
+          Muted: 'var(--muted)',
+          'Muted Foreground': 'var(--muted-foreground)',
+        }}
+      />
+
+      <ColorGroup
+        title="Accent & Status"
+        colors={{
+          Accent: 'var(--accent)',
+          'Accent Foreground': 'var(--accent-foreground)',
+          Success: 'var(--success)',
+          Warning: 'var(--warning)',
+          Destructive: 'var(--destructive)',
+        }}
+      />
+
+      <ColorGroup
+        title="Base UI Colors"
+        colors={{
+          Background: 'var(--background)',
+          Foreground: 'var(--foreground)',
+          Card: 'var(--card)',
+          Popover: 'var(--popover)',
+          Border: 'var(--border)',
+          Input: 'var(--input)',
+          Ring: 'var(--ring)',
+        }}
+      />
+
+      <ColorGroup
+        title="Chart Colors"
+        colors={{
+          'Chart 1': 'var(--chart-1)',
+          'Chart 2': 'var(--chart-2)',
+          'Chart 3': 'var(--chart-3)',
+          'Chart 4': 'var(--chart-4)',
+          'Chart 5': 'var(--chart-5)',
+        }}
+      />
+
+      <ColorGroup
+        title="Sidebar Colors"
+        colors={{
+          'Sidebar BG': 'var(--sidebar)',
+          'Sidebar FG': 'var(--sidebar-foreground)',
+          'Sidebar Primary': 'var(--sidebar-primary)',
+          'Sidebar Accent': 'var(--sidebar-accent)',
+          'Sidebar Border': 'var(--sidebar-border)',
+          'Sidebar Ring': 'var(--sidebar-ring)',
+        }}
+      />
+
+      <ColorGroup
+        title="Solid Colors"
+        colors={{
+          'Primary Solid': 'var(--color-primary-solid)',
+          'Secondary Solid': 'var(--color-secondary-solid)',
+          'Success Solid': 'var(--color-success-solid)',
+          'Warning Solid': 'var(--color-warning-solid)',
+          'Danger Solid': 'var(--color-danger-solid)',
+          'Surface Solid': 'var(--color-surface-solid)',
+        }}
+      />
+
+      <ColorGroup
+        title="Glass & Shadows"
+        colors={{
+          'Glass BG': 'var(--glass-bg)',
+          'Glass Border': 'var(--glass-border)',
+          'Shadow Glow': 'var(--shadow-glow)',
+          'Shadow Glow LG': 'var(--shadow-glow-lg)',
+        }}
+      />
+    </div>
+  ),
+};

package/dist/arrow-left-46B4CAEY.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m14 7l-5 5l5 5"/></svg>

package/dist/file-4IXBJF4J.svg

@@ -0,0 +1 @@
+<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>

package/dist/globe-KVAXBN2U.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>