@epicbagel/saas-kit 0.0.0-stage → 1.0.0

package/src/styles/components/attachment.css

@@ -0,0 +1,61 @@
+/* Attachment — shadcn's cn-attachment classes (registry/styles/style-sera.css),
+ * as @apply rules over the kit's semantic tokens so they follow the active
+ * palette. Part of utilities.css. */
+@layer components {
+  /* MARK: Attachment */
+  .cn-attachment {
+    @apply rounded-none w-fit focus-within:ring-1 focus-within:ring-ring/30;
+  }
+
+  .cn-attachment-orientation-horizontal {
+    @apply min-w-40;
+  }
+
+  .cn-attachment-orientation-vertical {
+    @apply w-24 has-data-[slot=attachment-content]:w-30;
+  }
+
+  .cn-attachment-size-default {
+    @apply gap-2 has-data-[slot=attachment-content]:px-3 has-data-[slot=attachment-content]:py-2.5 has-data-[slot=attachment-media]:p-2.5 text-sm;
+  }
+
+  .cn-attachment-size-sm {
+    @apply gap-2.5 has-data-[slot=attachment-content]:px-2.5 has-data-[slot=attachment-content]:py-2 has-data-[slot=attachment-media]:p-2 text-xs;
+  }
+
+  .cn-attachment-size-xs {
+    @apply gap-1.5 has-data-[slot=attachment-content]:px-2 has-data-[slot=attachment-content]:py-1.5 has-data-[slot=attachment-media]:p-1.5 text-xs rounded-none;
+  }
+
+  .cn-attachment-media {
+    @apply bg-muted text-foreground w-10 rounded-none group-data-[size=sm]/attachment:w-8 group-data-[size=xs]/attachment:w-7 group-data-[size=xs]/attachment:rounded-none [&_svg:not([class*='size-'])]:size-4 group-data-[size=xs]/attachment:[&_svg:not([class*='size-'])]:size-3.5 group-data-[orientation=vertical]/attachment:w-full group-data-[orientation=vertical]/attachment:[&_svg:not([class*='size-'])]:size-6 group-data-[orientation=vertical]/attachment:*:data-[slot=spinner]:size-6!;
+  }
+
+  .cn-attachment-media-variant-image {
+    @apply opacity-60 group-data-[state=idle]/attachment:opacity-100 group-data-[state=done]/attachment:opacity-100;
+  }
+
+  .cn-attachment-content {
+    @apply leading-tight group-data-[orientation=vertical]/attachment:px-1;
+  }
+
+  .cn-attachment-title {
+    @apply font-medium;
+  }
+
+  .cn-attachment-description {
+    @apply mt-0.5 text-xs;
+  }
+
+  .cn-attachment-actions {
+    @apply group-data-[orientation=vertical]/attachment:absolute group-data-[orientation=vertical]/attachment:top-3 group-data-[orientation=vertical]/attachment:right-3 relative z-20 group-data-[orientation=vertical]/attachment:gap-1;
+  }
+
+  .cn-attachment-group {
+    @apply gap-3 scroll-px-1 py-1;
+  }
+
+  .cn-attachment-trigger {
+    @apply absolute inset-0 z-10 outline-none;
+  }
+}

package/src/styles/components/message.css

@@ -0,0 +1,29 @@
+/* Message — shadcn's cn-message classes (registry/styles/style-sera.css),
+ * as @apply rules over the kit's semantic tokens so they follow the active
+ * palette. Part of utilities.css. */
+@layer components {
+  /* MARK: Message */
+  .cn-message {
+    @apply text-sm gap-2;
+  }
+
+  .cn-message-avatar {
+    @apply min-w-8 group-has-data-[slot=message-footer]/message:-translate-y-8;
+  }
+
+  .cn-message-content {
+    @apply gap-2.5 group-data-[align=end]/message:*:data-slot:self-end;
+  }
+
+  .cn-message-header {
+    @apply text-xs font-medium text-muted-foreground px-4 group-has-data-[variant=ghost]/message:px-0 uppercase tracking-wide;
+  }
+
+  .cn-message-footer {
+    @apply text-xs font-medium text-muted-foreground px-4 group-has-data-[variant=ghost]/message:px-0 uppercase tracking-wide;
+  }
+
+  .cn-message-group {
+    @apply gap-2;
+  }
+}

package/src/styles/components.css

@@ -0,0 +1,3 @@
+/* Public component classes, one file per item. Part of utilities.css. */
+@import "./components/attachment.css";
+@import "./components/message.css";

package/src/styles/globals.css

@@ -0,0 +1,10 @@
+/* The complete kit stylesheet, for an app with no Tailwind entry of its own.
+ *
+ * An app that already imports Tailwind imports the three entry points
+ * below instead (see tokens.css). Importing this file AND Tailwind again
+ * would emit the preflight twice. */
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "./tokens.css";
+@import "./utilities.css";
+@import "./source.css";

package/src/styles/keyframes.css

@@ -0,0 +1,26 @@
+/* The kit's animations: accordion open/close plus three small motion
+ * tokens (soft-rise, soft-pop, pulse-once). Part of utilities.css. The
+ * accordion keyframes these tokens name are defined in shadcn.css. */
+@theme {
+  --animate-accordion-down: accordion-down 0.2s ease-out;
+  --animate-accordion-up: accordion-up 0.2s ease-out;
+  --animate-soft-rise: soft-rise 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
+  --animate-soft-pop: soft-pop 0.24s cubic-bezier(0.22, 1, 0.36, 1) both;
+  --animate-pulse-once: pulse-once 0.9s cubic-bezier(0.22, 1, 0.36, 1) 1;
+}
+
+/* Signature reveal — fade + 6px rise. */
+@keyframes soft-rise {
+  from { opacity: 0; transform: translateY(6px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+/* Micro-celebration — slight scale 0.97 → 1. */
+@keyframes soft-pop {
+  from { opacity: 0; transform: scale(0.97); }
+  to { opacity: 1; transform: scale(1); }
+}
+/* Single attention pulse — emit a soft ring once. */
+@keyframes pulse-once {
+  0% { box-shadow: 0 0 0 0 hsl(var(--foreground) / 0.18); }
+  100% { box-shadow: 0 0 0 12px hsl(var(--foreground) / 0); }
+}

package/src/styles/palette.gen.css

@@ -0,0 +1,150 @@
+/* GENERATED FILE — do not edit.
+ * Source: src/lib/neutral-theme.ts · Regenerate: pnpm gen:themes
+ *
+ * The neutral palette: light on :root, dark when the root carries the
+ * `.dark` class. It sits in `@layer base`, so any unlayered palette rule
+ * or a host's own :root overrides wins on layer order alone. Imported by
+ * tokens.css; every --color-* alias and the radius scale are re-declared
+ * alongside the tokens they read.
+ */
+@layer base {
+  :root {
+    --radius: 0rem;
+    --background: 0 0% 100%;
+    --foreground: 0 0% 0%;
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 0%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 0%;
+    --primary: 0 0% 0%;
+    --primary-foreground: 0 0% 100%;
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 0%;
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 40%;
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 0%;
+    --destructive: 357.5 79.2% 47.1%;
+    --destructive-foreground: 0 0% 100%;
+    --border: 0 0% 89.8%;
+    --input: 0 0% 89.8%;
+    --ring: 0 0% 0%;
+    --chart-1: 0 0% 20%;
+    --chart-2: 0 0% 30.2%;
+    --chart-3: 0 0% 40%;
+    --chart-4: 0 0% 50.2%;
+    --chart-5: 0 0% 60%;
+    --sidebar-background: 0 0% 98%;
+    --sidebar-foreground: 0 0% 0%;
+    --sidebar-primary: 0 0% 0%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 0 0% 96.1%;
+    --sidebar-accent-foreground: 0 0% 0%;
+    --sidebar-border: 0 0% 89.8%;
+    --sidebar-ring: 0 0% 89.8%;
+    --sidebar: 0 0% 98%;
+    /* Tailwind-facing aliases — see neutral-theme.ts */
+    --color-background: hsl(var(--background));
+    --color-foreground: hsl(var(--foreground));
+    --color-card: hsl(var(--card));
+    --color-card-foreground: hsl(var(--card-foreground));
+    --color-popover: hsl(var(--popover));
+    --color-popover-foreground: hsl(var(--popover-foreground));
+    --color-primary: hsl(var(--primary));
+    --color-primary-foreground: hsl(var(--primary-foreground));
+    --color-secondary: hsl(var(--secondary));
+    --color-secondary-foreground: hsl(var(--secondary-foreground));
+    --color-muted: hsl(var(--muted));
+    --color-muted-foreground: hsl(var(--muted-foreground));
+    --color-accent: hsl(var(--accent));
+    --color-accent-foreground: hsl(var(--accent-foreground));
+    --color-destructive: hsl(var(--destructive));
+    --color-destructive-foreground: hsl(var(--destructive-foreground));
+    --color-border: hsl(var(--border));
+    --color-input: hsl(var(--input));
+    --color-ring: hsl(var(--ring));
+    --color-sidebar: hsl(var(--sidebar-background));
+    --color-sidebar-foreground: hsl(var(--sidebar-foreground));
+    --color-sidebar-primary: hsl(var(--sidebar-primary));
+    --color-sidebar-primary-foreground: hsl(var(--sidebar-primary-foreground));
+    --color-sidebar-accent: hsl(var(--sidebar-accent));
+    --color-sidebar-accent-foreground: hsl(var(--sidebar-accent-foreground));
+    --color-sidebar-border: hsl(var(--sidebar-border));
+    --color-sidebar-ring: hsl(var(--sidebar-ring));
+    --radius-sm: calc(var(--radius) - 4px);
+    --radius-md: calc(var(--radius) - 2px);
+    --radius-lg: var(--radius);
+    --radius-xl: calc(var(--radius) + 4px);
+    --radius-2xl: calc(var(--radius) + 8px);
+  }
+
+  :root:where(.dark) {
+    --radius: 0rem;
+    --background: 0 0% 0%;
+    --foreground: 0 0% 100%;
+    --card: 0 0% 0%;
+    --card-foreground: 0 0% 100%;
+    --popover: 0 0% 0%;
+    --popover-foreground: 0 0% 100%;
+    --primary: 0 0% 100%;
+    --primary-foreground: 0 0% 0%;
+    --secondary: 0 0% 10.2%;
+    --secondary-foreground: 0 0% 100%;
+    --muted: 0 0% 10.2%;
+    --muted-foreground: 0 0% 60%;
+    --accent: 0 0% 10.2%;
+    --accent-foreground: 0 0% 100%;
+    --destructive: 357.5 79.2% 47.1%;
+    --destructive-foreground: 0 0% 100%;
+    --border: 0 0% 20%;
+    --input: 0 0% 20%;
+    --ring: 0 0% 100%;
+    --chart-1: 0 0% 80%;
+    --chart-2: 0 0% 70.2%;
+    --chart-3: 0 0% 60%;
+    --chart-4: 0 0% 50.2%;
+    --chart-5: 0 0% 40%;
+    --sidebar-background: 0 0% 5.1%;
+    --sidebar-foreground: 0 0% 100%;
+    --sidebar-primary: 0 0% 100%;
+    --sidebar-primary-foreground: 0 0% 0%;
+    --sidebar-accent: 0 0% 10.2%;
+    --sidebar-accent-foreground: 0 0% 100%;
+    --sidebar-border: 0 0% 20%;
+    --sidebar-ring: 0 0% 20%;
+    --sidebar: 0 0% 5.1%;
+    /* Tailwind-facing aliases — see neutral-theme.ts */
+    --color-background: hsl(var(--background));
+    --color-foreground: hsl(var(--foreground));
+    --color-card: hsl(var(--card));
+    --color-card-foreground: hsl(var(--card-foreground));
+    --color-popover: hsl(var(--popover));
+    --color-popover-foreground: hsl(var(--popover-foreground));
+    --color-primary: hsl(var(--primary));
+    --color-primary-foreground: hsl(var(--primary-foreground));
+    --color-secondary: hsl(var(--secondary));
+    --color-secondary-foreground: hsl(var(--secondary-foreground));
+    --color-muted: hsl(var(--muted));
+    --color-muted-foreground: hsl(var(--muted-foreground));
+    --color-accent: hsl(var(--accent));
+    --color-accent-foreground: hsl(var(--accent-foreground));
+    --color-destructive: hsl(var(--destructive));
+    --color-destructive-foreground: hsl(var(--destructive-foreground));
+    --color-border: hsl(var(--border));
+    --color-input: hsl(var(--input));
+    --color-ring: hsl(var(--ring));
+    --color-sidebar: hsl(var(--sidebar-background));
+    --color-sidebar-foreground: hsl(var(--sidebar-foreground));
+    --color-sidebar-primary: hsl(var(--sidebar-primary));
+    --color-sidebar-primary-foreground: hsl(var(--sidebar-primary-foreground));
+    --color-sidebar-accent: hsl(var(--sidebar-accent));
+    --color-sidebar-accent-foreground: hsl(var(--sidebar-accent-foreground));
+    --color-sidebar-border: hsl(var(--sidebar-border));
+    --color-sidebar-ring: hsl(var(--sidebar-ring));
+    --radius-sm: calc(var(--radius) - 4px);
+    --radius-md: calc(var(--radius) - 2px);
+    --radius-lg: var(--radius);
+    --radius-xl: calc(var(--radius) + 4px);
+    --radius-2xl: calc(var(--radius) + 8px);
+  }
+}