@codelitdev/design-system 0.1.0-alpha.2 → 0.1.0-alpha.4

package/README.md

@@ -64,6 +64,14 @@ module.exports = {
 
 6. Logos: `@codelitdev/design-system/assets/logo-<product>.svg`.
 
+7. Loaders — a drawn-from-the-logo spinner, not a static asset:
+```tsx
+import { Loader } from "@codelitdev/design-system";
+<Loader product="sendlit" size={32} />
+```
+Renders in `currentColor`, same as an icon component — wrap it (or an ancestor) in
+whatever sets the color you want, e.g. `className="text-primary"` for the product accent.
+
 ## Components (shadcn registry)
 
 The design system ships its components as a **shadcn registry** so every product
@@ -111,6 +119,7 @@ npx shadcn@latest add https://raw.githubusercontent.com/codelitdev/design-system
 | `select` | Trigger matches `input`; token-styled popover |
 | `tabs` | Segmented; active trigger lifts onto a card surface |
 | `dialog` | Warm scrim, 16px radius; full Radix parts |
+| `dropdown-menu` | Matches `select`'s popover treatment; full Radix parts incl. checkbox/radio items and submenus |
 | `tooltip` | Dark chip; `TooltipProvider` included |
 | `toast` | Presentational card (`default`/`success`/`destructive`) — drive with your own queue |
 
@@ -119,7 +128,8 @@ Install everything at once:
 ```sh
 npx shadcn@latest add @codelit/button @codelit/icon-button @codelit/badge @codelit/card \
   @codelit/input @codelit/textarea @codelit/label @codelit/checkbox @codelit/radio-group \
-  @codelit/switch @codelit/select @codelit/tabs @codelit/dialog @codelit/tooltip @codelit/toast
+  @codelit/switch @codelit/select @codelit/tabs @codelit/dialog @codelit/dropdown-menu \
+  @codelit/tooltip @codelit/toast
 ```
 
 **Maintainers:** component sources live in `registry/codelit/ui/`. After changing

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codelitdev/design-system",
-  "version": "0.1.0-alpha.2",
+  "version": "0.1.0-alpha.4",
   "description": "Shared CodeLit design tokens, Tailwind preset, and React primitives for CourseLit, MediaLit, SendLit, and FrontLit.",
   "license": "Apache-2.0",
   "author": "CodeLit",

package/src/assets/logo-codelit.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><rect width="64" height="64" rx="18" fill="oklch(0.66 0.14 60)"></rect><circle cx="30" cy="37" r="10.5" fill="white"></circle><circle cx="42" cy="20" r="5" fill="white"></circle></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><g fill="none" stroke="oklch(0.62 0.16 60)" stroke-width="2.6"><path d="M32,23 C27.8,19 27,12.4 32,9 C37,12.4 36.2,19 32,23 Z" transform="translate(0,4.5)"></path><path d="M32,23 C27.8,19 27,12.4 32,9 C37,12.4 36.2,19 32,23 Z" transform="translate(0,4.5) rotate(120 32 32)"></path><path d="M32,23 C27.8,19 27,12.4 32,9 C37,12.4 36.2,19 32,23 Z" transform="translate(0,4.5) rotate(240 32 32)"></path></g></svg>

package/src/assets/logo-courselit.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><rect width="64" height="64" rx="18" fill="oklch(0.6 0.14 30)"></rect><circle cx="30" cy="37" r="10.5" fill="white"></circle><circle cx="42" cy="20" r="5" fill="white"></circle></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><g fill="oklch(0.62 0.16 30 / 0.18)" stroke="oklch(0.62 0.16 30)" stroke-width="2.6" stroke-linejoin="round"><path d="M32,10 L38,28 L32,34 L26,28 Z"></path><path d="M32,10 L38,28 L32,34 L26,28 Z" transform="rotate(90 32 32)"></path><path d="M32,10 L38,28 L32,34 L26,28 Z" transform="rotate(180 32 32)"></path><path d="M32,10 L38,28 L32,34 L26,28 Z" transform="rotate(270 32 32)"></path></g></svg>

package/src/assets/logo-frontlit.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><rect width="64" height="64" rx="18" fill="oklch(0.6 0.14 230)"></rect><circle cx="30" cy="37" r="10.5" fill="white"></circle><circle cx="42" cy="20" r="5" fill="white"></circle></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><g fill="oklch(0.62 0.16 230 / 0.15)" stroke="oklch(0.62 0.16 230)" stroke-width="2.4" stroke-linejoin="round"><path d="M0,-11 C5.5,-5.5 5.5,5.5 0,11 C-5.5,5.5 -5.5,-5.5 0,-11 Z" transform="translate(41.19,22.81) rotate(45)"></path><path d="M0,-11 C5.5,-5.5 5.5,5.5 0,11 C-5.5,5.5 -5.5,-5.5 0,-11 Z" transform="translate(41.19,41.19) rotate(135)"></path><path d="M0,-11 C5.5,-5.5 5.5,5.5 0,11 C-5.5,5.5 -5.5,-5.5 0,-11 Z" transform="translate(22.81,41.19) rotate(225)"></path><path d="M0,-11 C5.5,-5.5 5.5,5.5 0,11 C-5.5,5.5 -5.5,-5.5 0,-11 Z" transform="translate(22.81,22.81) rotate(315)"></path></g></svg>

package/src/assets/logo-medialit.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><rect width="64" height="64" rx="18" fill="oklch(0.6 0.14 300)"></rect><circle cx="30" cy="37" r="10.5" fill="white"></circle><circle cx="42" cy="20" r="5" fill="white"></circle></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><g fill="oklch(0.62 0.16 300 / 0.15)" stroke="oklch(0.62 0.16 300)" stroke-width="2.6" stroke-linejoin="round"><path d="M32,24 C28.8,19 28.8,13.5 32,10 C35.2,13.5 35.2,19 32,24 Z"></path><path d="M32,24 C28.8,19 28.8,13.5 32,10 C35.2,13.5 35.2,19 32,24 Z" transform="rotate(90 32 32)"></path><path d="M32,24 C28.8,19 28.8,13.5 32,10 C35.2,13.5 35.2,19 32,24 Z" transform="rotate(180 32 32)"></path><path d="M32,24 C28.8,19 28.8,13.5 32,10 C35.2,13.5 35.2,19 32,24 Z" transform="rotate(270 32 32)"></path></g></svg>

package/src/assets/logo-sendlit.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><rect width="64" height="64" rx="18" fill="oklch(0.6 0.14 150)"></rect><circle cx="30" cy="37" r="10.5" fill="white"></circle><circle cx="42" cy="20" r="5" fill="white"></circle></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><g fill="none" stroke="oklch(0.62 0.16 150)" stroke-width="2.6" stroke-linecap="round" transform="translate(-2,0)"><path d="M32,32 C23,29.5 18.5,20.5 23,12.5 C26.5,17 26.5,24 31,26.5"></path><path d="M32,32 C23,29.5 18.5,20.5 23,12.5 C26.5,17 26.5,24 31,26.5" transform="rotate(120 32 32)"></path><path d="M32,32 C23,29.5 18.5,20.5 23,12.5 C26.5,17 26.5,24 31,26.5" transform="rotate(240 32 32)"></path></g></svg>

package/src/components/feedback/Loader.prompt.md

@@ -0,0 +1,5 @@
+Loading spinner, drawn from the product's own logo mark rather than a generic spinner. Petals draw in and out together, in sync.
+
+```jsx
+<Loader product="sendlit" size={32} />
+```

package/src/components/feedback/Loader.tsx

@@ -0,0 +1,81 @@
+import React from "react";
+
+export interface LoaderProps {
+  /** Which product mark to draw. Omit for the CodeLit house mark (amber). */
+  product?: "codelit" | "courselit" | "medialit" | "sendlit" | "frontlit";
+  /** Pixel size, square. Default 40. */
+  size?: number;
+  style?: React.CSSProperties;
+}
+
+const PATHS: Record<string, { d: string; transform?: string }[]> = {
+  codelit: [
+    { d: "M32,23 C27.8,19 27,12.4 32,9 C37,12.4 36.2,19 32,23 Z", transform: "translate(0,4.5)" },
+    { d: "M32,23 C27.8,19 27,12.4 32,9 C37,12.4 36.2,19 32,23 Z", transform: "translate(0,4.5) rotate(120 32 32)" },
+    { d: "M32,23 C27.8,19 27,12.4 32,9 C37,12.4 36.2,19 32,23 Z", transform: "translate(0,4.5) rotate(240 32 32)" },
+  ],
+  courselit: [
+    { d: "M32,10 L38,28 L32,34 L26,28 Z" },
+    { d: "M32,10 L38,28 L32,34 L26,28 Z", transform: "rotate(90 32 32)" },
+    { d: "M32,10 L38,28 L32,34 L26,28 Z", transform: "rotate(180 32 32)" },
+    { d: "M32,10 L38,28 L32,34 L26,28 Z", transform: "rotate(270 32 32)" },
+  ],
+  medialit: [
+    { d: "M32,24 C28.8,19 28.8,13.5 32,10 C35.2,13.5 35.2,19 32,24 Z" },
+    { d: "M32,24 C28.8,19 28.8,13.5 32,10 C35.2,13.5 35.2,19 32,24 Z", transform: "rotate(90 32 32)" },
+    { d: "M32,24 C28.8,19 28.8,13.5 32,10 C35.2,13.5 35.2,19 32,24 Z", transform: "rotate(180 32 32)" },
+    { d: "M32,24 C28.8,19 28.8,13.5 32,10 C35.2,13.5 35.2,19 32,24 Z", transform: "rotate(270 32 32)" },
+  ],
+  sendlit: [
+    { d: "M32,32 C23,29.5 18.5,20.5 23,12.5 C26.5,17 26.5,24 31,26.5" },
+    { d: "M32,32 C23,29.5 18.5,20.5 23,12.5 C26.5,17 26.5,24 31,26.5", transform: "rotate(120 32 32)" },
+    { d: "M32,32 C23,29.5 18.5,20.5 23,12.5 C26.5,17 26.5,24 31,26.5", transform: "rotate(240 32 32)" },
+  ],
+  frontlit: [
+    { d: "M0,-11 C5.5,-5.5 5.5,5.5 0,11 C-5.5,5.5 -5.5,-5.5 0,-11 Z", transform: "translate(41.19,22.81) rotate(45)" },
+    { d: "M0,-11 C5.5,-5.5 5.5,5.5 0,11 C-5.5,5.5 -5.5,-5.5 0,-11 Z", transform: "translate(41.19,41.19) rotate(135)" },
+    { d: "M0,-11 C5.5,-5.5 5.5,5.5 0,11 C-5.5,5.5 -5.5,-5.5 0,-11 Z", transform: "translate(22.81,41.19) rotate(225)" },
+    { d: "M0,-11 C5.5,-5.5 5.5,5.5 0,11 C-5.5,5.5 -5.5,-5.5 0,-11 Z", transform: "translate(22.81,22.81) rotate(315)" },
+  ],
+};
+
+const JOINED = new Set(["courselit", "medialit", "frontlit"]);
+const SEND_STROKE_WIDTH = 2.6;
+
+/**
+ * Loading spinner built from the product's own logo mark — petals draw in and
+ * out together, in sync, rather than one static SVG. Ships as a component
+ * (not `assets/loader-*.svg`) on purpose: the draw animation needs a real
+ * `@keyframes cl-draw` rule, and that can't be guaranteed to reach a
+ * standalone SVG asset through every consumption path (`<img src>` sandboxes
+ * out page CSS). `@keyframes cl-draw` lives in `components.css`; this
+ * component only sets the per-path `stroke-dasharray`/`animation`.
+ */
+export function Loader({ product = "codelit", size = 40, style }: LoaderProps) {
+  const paths = PATHS[product] ?? PATHS.codelit;
+  const joined = JOINED.has(product);
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 64 64"
+      role="status"
+      aria-label="Loading"
+      className={`cl-loader cl-loader--${product}`}
+      style={style}
+    >
+      <g
+        fill="none"
+        stroke="currentColor"
+        strokeWidth={product === "frontlit" ? 2.4 : SEND_STROKE_WIDTH}
+        strokeLinejoin={joined ? "round" : undefined}
+        strokeLinecap={joined ? undefined : "round"}
+        transform={product === "sendlit" ? "translate(-2,0)" : undefined}
+      >
+        {paths.map((p, i) => (
+          <path key={i} d={p.d} transform={p.transform} strokeDasharray={200} className="cl-loader__path" />
+        ))}
+      </g>
+    </svg>
+  );
+}

package/src/components.css

@@ -180,3 +180,15 @@ textarea.cl-input { height: auto; min-height: 80px; padding: 10px 12px; line-hei
   font: 500 0.75rem/1.3 var(--font-sans); padding: 6px 10px; border-radius: var(--radius-sm);
   white-space: nowrap; pointer-events: none; z-index: 60;
 }
+
+/* ---------- Loader ---------- */
+/* CodeLit — cl-loader: draw-in animation for <Loader> (src/components/feedback/Loader.tsx).
+   Each path sets stroke-dasharray:200 (safely larger than any real path length,
+   so it never falls back to a repeating dash pattern) and animation:cl-draw. */
+@keyframes cl-draw {
+  0%, 100% { stroke-dashoffset: 200; }
+  50% { stroke-dashoffset: 0; }
+}
+.cl-loader__path {
+  animation: cl-draw 1.8s ease-in-out infinite;
+}

package/src/index.ts

@@ -4,6 +4,8 @@ export { Badge } from "./components/display/Badge";
 export { Card } from "./components/display/Card";
 export { Tabs } from "./components/display/Tabs";
 export { Dialog } from "./components/feedback/Dialog";
+export { Loader } from "./components/feedback/Loader";
+export type { LoaderProps } from "./components/feedback/Loader";
 export { Toast } from "./components/feedback/Toast";
 export { Tooltip } from "./components/feedback/Tooltip";
 export { Checkbox } from "./components/forms/Checkbox";