@devalok/shilp-sutra 0.2.0 → 0.3.0

package/README.md

@@ -0,0 +1,239 @@
+# @devalok/shilp-sutra
+
+Devalok Design System -- tokens, components, and patterns for React & Next.js.
+
+[![npm](https://img.shields.io/npm/v/@devalok/shilp-sutra)](https://www.npmjs.com/package/@devalok/shilp-sutra)
+[![Storybook](https://img.shields.io/badge/Storybook-ff4785?logo=storybook&logoColor=white)](https://devalok-design.github.io/shilp-sutra/)
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
+
+---
+
+## Quick Setup
+
+### 1. Install
+
+```bash
+pnpm add @devalok/shilp-sutra
+```
+
+### 2. Add Tailwind Preset
+
+```ts
+// tailwind.config.ts
+import shilpSutra from '@devalok/shilp-sutra/tailwind'
+
+export default {
+  presets: [shilpSutra],
+  content: [
+    './app/**/*.{ts,tsx}',
+    './node_modules/@devalok/shilp-sutra/dist/**/*.js',
+  ],
+}
+```
+
+### 3. Import Tokens
+
+```tsx
+// app/layout.tsx (Next.js) or main entry point
+import '@devalok/shilp-sutra/tokens'
+import './globals.css'
+```
+
+Done. Start using components.
+
+---
+
+## Import Patterns
+
+### Per-component import (recommended)
+
+Best for tree-shaking, Server Components, and fast builds:
+
+```tsx
+import { Button } from '@devalok/shilp-sutra/ui/button'
+import { Dialog } from '@devalok/shilp-sutra/ui/dialog'
+import { DatePicker } from '@devalok/shilp-sutra/composed/date-picker'
+import { TopBar } from '@devalok/shilp-sutra/shell/top-bar'
+```
+
+### Barrel import
+
+Convenient for client components that use many primitives:
+
+```tsx
+import { Button, Dialog, Input, Badge } from '@devalok/shilp-sutra/ui'
+import { PageHeader, DatePicker } from '@devalok/shilp-sutra/composed'
+import { AppSidebar, TopBar } from '@devalok/shilp-sutra/shell'
+```
+
+### Root import
+
+Shorthand for UI components only:
+
+```tsx
+import { Button, Input } from '@devalok/shilp-sutra'
+```
+
+---
+
+## Mental Model
+
+The design system is organized into three tiers:
+
+| Layer | Import | What it contains |
+|-------|--------|------------------|
+| **ui** | `@devalok/shilp-sutra/ui` | 60+ atomic primitives -- buttons, inputs, dialogs, cards, tables, badges, charts, navigation menus |
+| **composed** | `@devalok/shilp-sutra/composed` | 14 multi-component patterns -- date picker, rich text editor, command palette, page header, skeletons |
+| **shell** | `@devalok/shilp-sutra/shell` | 7 app-level layout components -- sidebar, top bar, bottom navbar, notification center, command palette |
+
+Additional exports:
+
+| Import | Contents |
+|--------|----------|
+| `@devalok/shilp-sutra/tokens` | CSS custom properties (primitives, semantic, typography) |
+| `@devalok/shilp-sutra/tailwind` | Tailwind CSS preset with all design tokens |
+| `@devalok/shilp-sutra/hooks` | `useToast`, `useColorMode`, `useIsMobile` |
+| `@devalok/shilp-sutra/fonts/*` | Inter and Ranade variable fonts (WOFF2) |
+
+---
+
+## Peer Dependencies
+
+### Required
+
+| Package | Version |
+|---------|---------|
+| `react` | `^18 \|\| ^19` |
+| `react-dom` | `^18 \|\| ^19` |
+
+### Optional
+
+Install only what you use:
+
+| Feature | Packages |
+|---------|----------|
+| Charts (`./ui/charts`) | `d3-array`, `d3-axis`, `d3-format`, `d3-interpolate`, `d3-scale`, `d3-selection`, `d3-shape`, `d3-time-format`, `d3-transition` |
+| Rich Text Editor (`./composed/rich-text-editor`) | `@tiptap/react`, `@tiptap/starter-kit`, `@tiptap/extension-placeholder` |
+| DataTable (`./ui/data-table`) | `@tanstack/react-table`, `@tanstack/react-virtual` |
+| Icons (various components) | `@tabler/icons-react` |
+| Date components (`./composed/date-picker`) | `date-fns` |
+| OTP Input (`./ui/input-otp`) | `input-otp` |
+| Markdown rendering | `react-markdown` |
+
+Example -- install only charts deps:
+
+```bash
+pnpm add d3-array d3-axis d3-format d3-interpolate d3-scale d3-selection d3-shape d3-time-format d3-transition
+```
+
+---
+
+## Server-Safe Components
+
+These components work in React Server Components when imported via their per-component path. They do **not** include `"use client"` directives:
+
+### ui
+
+| Component | Import |
+|-----------|--------|
+| Text | `@devalok/shilp-sutra/ui/text` |
+| Skeleton | `@devalok/shilp-sutra/ui/skeleton` |
+| Spinner | `@devalok/shilp-sutra/ui/spinner` |
+| Stack | `@devalok/shilp-sutra/ui/stack` |
+| Container | `@devalok/shilp-sutra/ui/container` |
+| Table | `@devalok/shilp-sutra/ui/table` |
+| Code | `@devalok/shilp-sutra/ui/code` |
+| VisuallyHidden | `@devalok/shilp-sutra/ui/visually-hidden` |
+
+### composed
+
+| Component | Import |
+|-----------|--------|
+| ContentCard | `@devalok/shilp-sutra/composed/content-card` |
+| EmptyState | `@devalok/shilp-sutra/composed/empty-state` |
+| PageHeader | `@devalok/shilp-sutra/composed/page-header` |
+| LoadingSkeleton | `@devalok/shilp-sutra/composed/loading-skeleton` |
+| PageSkeletons | `@devalok/shilp-sutra/composed/page-skeletons` |
+| PriorityIndicator | `@devalok/shilp-sutra/composed/priority-indicator` |
+| StatusBadge | `@devalok/shilp-sutra/composed/status-badge` |
+
+All other components require client-side React and include `"use client"`.
+
+---
+
+## Dark Mode
+
+The design system uses CSS custom properties with a `.dark` class toggle. All semantic tokens have dark mode overrides built in.
+
+### Setup
+
+Add the `.dark` class to your `<html>` or a parent element:
+
+```html
+<html class="dark">
+```
+
+### Next.js with next-themes
+
+```tsx
+// app/layout.tsx
+import { ThemeProvider } from 'next-themes'
+
+export default function RootLayout({ children }) {
+  return (
+    <html suppressHydrationWarning>
+      <body>
+        <ThemeProvider attribute="class" defaultTheme="system">
+          {children}
+        </ThemeProvider>
+      </body>
+    </html>
+  )
+}
+```
+
+### Programmatic toggle
+
+```tsx
+import { useColorMode } from '@devalok/shilp-sutra/hooks'
+
+function ThemeToggle() {
+  const { mode, toggle } = useColorMode()
+  return <button onClick={toggle}>{mode === 'dark' ? 'Light' : 'Dark'}</button>
+}
+```
+
+---
+
+## TypeScript
+
+Full TypeScript support works out of the box. No special `tsconfig.json` settings required.
+
+All component props are exported as named types:
+
+```tsx
+import { type ButtonProps } from '@devalok/shilp-sutra/ui/button'
+import { type DatePickerProps } from '@devalok/shilp-sutra/composed/date-picker'
+```
+
+---
+
+## Token Architecture
+
+Three-tier CSS custom property system:
+
+1. **Primitives** (`primitives.css`) -- Raw palette values (50-950 scales). Never used directly in components.
+2. **Semantic** (`semantic.css`) -- Intent-based tokens (`--color-interactive`, `--color-text-primary`). Includes dark mode via `.dark` class.
+3. **Typography** (`typography.css`) -- Font-face declarations, type scale (T1-T7, B1-B8, L1-L6, P1-P7).
+
+---
+
+## Links
+
+- [Storybook](https://devalok-design.github.io/shilp-sutra/) -- interactive component docs
+- [GitHub](https://github.com/devalok-design/shilp-sutra)
+- [Changelog](https://github.com/devalok-design/shilp-sutra/blob/main/CHANGELOG.md)
+
+## License
+
+MIT -- Copyright 2026 Devalok Design & Strategy Studios

package/dist/composed/content-card.d.ts

@@ -1,8 +1,8 @@
 import { VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 declare const contentCardVariants: (props?: ({
-    variant?: "ghost" | "default" | "outline" | null | undefined;
-    padding?: "none" | "default" | "compact" | "spacious" | null | undefined;
+    variant?: "outline" | "ghost" | "default" | null | undefined;
+    padding?: "default" | "none" | "compact" | "spacious" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export interface ContentCardProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof contentCardVariants> {
     header?: React.ReactNode;

package/dist/composed/error-boundary.js

@@ -94,7 +94,7 @@ const C = g.forwardRef(
           o && /* @__PURE__ */ s("div", { className: "flex items-center gap-ds-04", children: /* @__PURE__ */ s(
             b,
             {
-              variant: "secondary",
+              variant: "outline",
               size: "md",
               onClick: o,
               children: "Try Again"

package/dist/shell/notification-preferences.js

@@ -1,8 +1,8 @@
 "use client";
 import { jsxs as t, Fragment as B, jsx as e } from "react/jsx-runtime";
-import { useState as c } from "react";
+import { useState as i } from "react";
 import { Button as b } from "../ui/button.js";
-import { Select as d, SelectTrigger as o, SelectValue as m, SelectContent as h, SelectItem as i } from "../ui/select.js";
+import { Select as d, SelectTrigger as o, SelectValue as m, SelectContent as h, SelectItem as c } from "../ui/select.js";
 import { Dialog as D, DialogContent as z, DialogHeader as q, DialogTitle as J, DialogDescription as K } from "../ui/dialog.js";
 import { Switch as k } from "../ui/switch.js";
 import { Card as Q, CardHeader as W, CardTitle as X, CardContent as Y } from "../ui/card.js";
@@ -21,12 +21,12 @@ function te({
   projects: v = [],
   isLoading: L = !1,
   onSave: C,
-  onToggleMute: x,
-  onUpdateTier: u,
+  onToggleMute: u,
+  onUpdateTier: x,
   onDelete: p,
   className: T
 }) {
-  const [E, s] = c(!1), [N, g] = c("global"), [I, w] = c("IN_APP"), [y, A] = c("INFO"), [P, j] = c(!1), [S, O] = c(!1), R = async () => {
+  const [E, s] = i(!1), [N, g] = i("global"), [I, w] = i("IN_APP"), [y, A] = i("INFO"), [P, j] = i(!1), [S, O] = i(!1), R = async () => {
     if (C) {
       O(!0);
       try {
@@ -57,7 +57,7 @@ function te({
           b,
           {
             size: "sm",
-            variant: "secondary",
+            variant: "outline",
             onClick: () => s(!0),
             children: [
               /* @__PURE__ */ e(Z, { className: "mr-ds-02b h-ico-sm w-ico-sm" }),
@@ -85,10 +85,10 @@ function te({
                 d,
                 {
                   value: l.minTier,
-                  onValueChange: (r) => u == null ? void 0 : u(l, r),
+                  onValueChange: (r) => x == null ? void 0 : x(l, r),
                   children: [
                     /* @__PURE__ */ e(o, { className: "h-ds-xs-plus w-[130px] text-ds-sm", children: /* @__PURE__ */ e(m, {}) }),
-                    /* @__PURE__ */ e(h, { children: Object.entries(G).map(([r, V]) => /* @__PURE__ */ e(i, { value: r, children: V }, r)) })
+                    /* @__PURE__ */ e(h, { children: Object.entries(G).map(([r, V]) => /* @__PURE__ */ e(c, { value: r, children: V }, r)) })
                   ]
                 }
               ),
@@ -98,7 +98,7 @@ function te({
                   k,
                   {
                     checked: !l.muted,
-                    onCheckedChange: () => x == null ? void 0 : x(l)
+                    onCheckedChange: () => u == null ? void 0 : u(l)
                   }
                 )
               ] }),
@@ -128,8 +128,8 @@ function te({
           /* @__PURE__ */ t(d, { value: N, onValueChange: g, children: [
             /* @__PURE__ */ e(o, { id: "pref-scope", children: /* @__PURE__ */ e(m, { placeholder: "Select scope" }) }),
             /* @__PURE__ */ t(h, { children: [
-              /* @__PURE__ */ e(i, { value: "global", children: "Global (all projects)" }),
-              v.map((l) => /* @__PURE__ */ e(i, { value: l.id, children: l.title }, l.id))
+              /* @__PURE__ */ e(c, { value: "global", children: "Global (all projects)" }),
+              v.map((l) => /* @__PURE__ */ e(c, { value: l.id, children: l.title }, l.id))
             ] })
           ] })
         ] }),
@@ -138,8 +138,8 @@ function te({
           /* @__PURE__ */ t(d, { value: I, onValueChange: w, children: [
             /* @__PURE__ */ e(o, { id: "pref-channel", children: /* @__PURE__ */ e(m, {}) }),
             /* @__PURE__ */ t(h, { children: [
-              /* @__PURE__ */ e(i, { value: "IN_APP", children: "In-App" }),
-              /* @__PURE__ */ e(i, { value: "GOOGLE_CHAT", children: "Google Chat" })
+              /* @__PURE__ */ e(c, { value: "IN_APP", children: "In-App" }),
+              /* @__PURE__ */ e(c, { value: "GOOGLE_CHAT", children: "Google Chat" })
             ] })
           ] })
         ] }),
@@ -147,7 +147,7 @@ function te({
           /* @__PURE__ */ e("label", { htmlFor: "pref-min-tier", className: "text-ds-sm font-medium text-text-secondary", children: "Minimum Tier" }),
           /* @__PURE__ */ t(d, { value: y, onValueChange: A, children: [
             /* @__PURE__ */ e(o, { id: "pref-min-tier", children: /* @__PURE__ */ e(m, {}) }),
-            /* @__PURE__ */ e(h, { children: Object.entries(G).map(([l, n]) => /* @__PURE__ */ e(i, { value: l, children: n }, l)) })
+            /* @__PURE__ */ e(h, { children: Object.entries(G).map(([l, n]) => /* @__PURE__ */ e(c, { value: l, children: n }, l)) })
           ] })
         ] }),
         /* @__PURE__ */ t("div", { className: "flex items-center justify-between", children: [