torch-glare 2.4.0 → 2.4.1

package/docs/reference/theme.md

@@ -0,0 +1,85 @@
+---
+title: Theme Reference
+description: TORCH Glare theming — data-theme, theme modes, ThemeProvider, and useTheme.
+group: reference
+keywords: [theme, dark mode, data-theme, ThemeProvider, useTheme, tokens]
+---
+
+# Theme Reference
+
+TORCH Glare is themed through two `data-*` attributes on the document root and a small
+React context. Every component also accepts a `theme` prop that sets `data-theme` locally.
+
+## Attributes
+
+| Attribute | Values | Meaning |
+| --- | --- | --- |
+| `data-theme` | `"light" \| "dark" \| "default"` | The active color theme. |
+| `data-theme-mode` | `"CSS" \| "TORCH"` | Token resolution mode (`TORCH` is the default). |
+
+Per-component override:
+
+```tsx
+import { Button } from "@/components/Button";
+
+<Button theme="dark" variant="PrimeStyle">Dark button</Button>;
+```
+
+## ThemeProvider
+
+Add the provider once (`npx torch-glare@latest provider ThemeProvider`) and wrap your app.
+It syncs `data-theme` / `data-theme-mode` to `document.documentElement` and persists the
+choice to `localStorage`.
+
+```tsx
+import { ThemeProvider } from "@/providers/ThemeProvider";
+
+export function App({ children }: { children: React.ReactNode }) {
+  return (
+    <ThemeProvider defaultTheme="default" defaultThemeMode="TORCH">
+      {children}
+    </ThemeProvider>
+  );
+}
+```
+
+### Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `defaultTheme` | `"light" \| "dark" \| "default"` | `"default"` | Initial theme (unless a stored/`data-theme` value exists). |
+| `defaultThemeMode` | `"CSS" \| "TORCH"` | `"TORCH"` | Initial token mode. |
+
+## useTheme
+
+Read and update the theme from anywhere inside `ThemeProvider`:
+
+```tsx
+import { useTheme } from "@/providers/ThemeProvider";
+
+export function ThemeToggle() {
+  const { theme, updateTheme, themeMode, updateMode } = useTheme();
+
+  return (
+    <button onClick={() => updateTheme(theme === "dark" ? "light" : "dark")}>
+      {theme} / {themeMode}
+    </button>
+  );
+}
+```
+
+### Returned value
+
+| Field | Type | Description |
+| --- | --- | --- |
+| `theme` | `"light" \| "dark" \| "default"` | Current theme. |
+| `themeMode` | `"CSS" \| "TORCH"` | Current token mode. |
+| `updateTheme` | `(theme) => void` | Set the theme (updates DOM + `localStorage`). |
+| `updateMode` | `(mode) => void` | Set the token mode. |
+
+`useTheme` throws if used outside `ThemeProvider`.
+
+## See also
+
+- [Providers reference](./providers.md)
+- [CLI reference](./cli.md)

package/docs/reference/types.md

@@ -37,7 +37,7 @@ export type Themes = "dark" | "light" | "default";
 
 **Usage:**
 ```typescript
-import type { Themes } from '@torch-ai/torch-glare';
+import type { Themes } from "@/utils/types";
 
 interface MyComponentProps {
   theme?: Themes;
@@ -60,12 +60,12 @@ interface MyComponentProps {
 ```typescript
 export type ButtonVariant =
   | "PrimeStyle"      // Primary action
-  | "BlueSecStyle"    // Blue secondary
+  | "BluSecStyle"    // Blue secondary
   | "YelSecStyle"     // Yellow secondary
   | "RedSecStyle"     // Red secondary
   | "BorderStyle"     // Outlined
   | "PrimeContStyle"  // Primary contrast
-  | "BlueContStyle"   // Blue contrast
+  | "BluContStyle"   // Blue contrast
   | "RedContStyle";   // Red contrast
 ```
 
@@ -878,7 +878,7 @@ Button.displayName = 'Button';
 ### Extending Button Props
 
 ```typescript
-import type { ButtonProps } from '@torch-ai/torch-glare';
+import type { ButtonProps } from "@/components/LoginButton";
 
 interface CustomButtonProps extends ButtonProps {
   isLoading?: boolean;

package/docs/reference/utilities.md

@@ -29,7 +29,7 @@ Utility function to merge and deduplicate Tailwind CSS classes.
 
 **Import:**
 ```typescript
-import { cn } from '@torch-ai/torch-glare/utils';
+import { cn } from "@/utils/cn";
 ```
 
 **Signature:**
@@ -48,7 +48,7 @@ function cn(...inputs: ClassValue[]): string
 #### Basic Usage
 
 ```typescript
-import { cn } from '@torch-ai/torch-glare/utils';
+import { cn } from "@/utils/cn";
 
 // Merge multiple classes
 cn('px-4 py-2', 'bg-blue-500', 'text-white')
@@ -110,11 +110,11 @@ cn('hover:text-blue-500', 'hover:text-red-500')
 ```typescript
 interface ButtonProps {
   variant?: 'primary' | 'secondary';
-  size?: 'sm' | 'md' | 'lg';
+  size?: 'S' | 'M' | 'L';
   className?: string;
 }
 
-function Button({ variant = 'primary', size = 'md', className }: ButtonProps) {
+function Button({ variant = 'primary', size = 'M', className }: ButtonProps) {
   return (
     <button
       className={cn(
@@ -129,9 +129,9 @@ function Button({ variant = 'primary', size = 'md', className }: ButtonProps) {
 
         // Size classes
         {
-          'px-2 py-1 text-sm': size === 'sm',
-          'px-4 py-2 text-base': size === 'md',
-          'px-6 py-3 text-lg': size === 'lg',
+          'px-2 py-1 text-sm': size === 'S',
+          'px-4 py-2 text-base': size === 'M',
+          'px-6 py-3 text-lg': size === 'L',
         },
 
         // Custom classes (overrides defaults)
@@ -166,7 +166,7 @@ Applies time from a picker to a date object.
 
 **Import:**
 ```typescript
-import { applyTimeToDate } from '@torch-ai/torch-glare/utils';
+import { applyTimeToDate } from "@/utils/dateFormat";
 ```
 
 **Signature:**
@@ -206,7 +206,7 @@ Validates if a value is a valid Date object.
 
 **Import:**
 ```typescript
-import { isValidDateObject } from '@torch-ai/torch-glare/utils';
+import { isValidDateObject } from "@/utils/dateFormat";
 ```
 
 **Signature:**
@@ -223,7 +223,7 @@ function isValidDateObject(date: Date): boolean
 **Examples:**
 
 ```typescript
-import { isValidDateObject } from '@torch-ai/torch-glare/utils';
+import { isValidDateObject } from "@/utils/dateFormat";
 
 isValidDateObject(new Date())
 // Returns: true
@@ -246,7 +246,7 @@ Applies time to various date value types (single, array, or range).
 
 **Import:**
 ```typescript
-import { applyTimeToDateValue } from '@torch-ai/torch-glare/utils';
+import { applyTimeToDateValue } from "@/utils/dateFormat";
 ```
 
 **Signature:**
@@ -310,7 +310,7 @@ Formats date values to strings with time applied.
 
 **Import:**
 ```typescript
-import { formatDateValueToString } from '@torch-ai/torch-glare/utils';
+import { formatDateValueToString } from "@/utils/dateFormat";
 ```
 
 **Signature:**
@@ -398,7 +398,7 @@ Calculates new width based on mouse position with RTL support.
 
 **Import:**
 ```typescript
-import { calculateNewWidthFromMouse } from '@torch-ai/torch-glare/utils';
+import { calculateNewWidthFromMouse } from "@/utils/resize";
 ```
 
 **Signature:**
@@ -422,7 +422,7 @@ function calculateNewWidthFromMouse(
 
 ```typescript
 import { useRef, useState } from 'react';
-import { calculateNewWidthFromMouse } from '@torch-ai/torch-glare/utils';
+import { calculateNewWidthFromMouse } from "@/utils/resize";
 
 function ResizablePanel() {
   const panelRef = useRef<HTMLDivElement>(null);
@@ -456,7 +456,7 @@ Calculates new width based on touch position with RTL support.
 
 **Import:**
 ```typescript
-import { calculateNewWidthFromTouch } from '@torch-ai/torch-glare/utils';
+import { calculateNewWidthFromTouch } from "@/utils/resize";
 ```
 
 **Signature:**
@@ -480,7 +480,7 @@ function calculateNewWidthFromTouch(
 
 ```typescript
 import { useRef, useState } from 'react';
-import { calculateNewWidthFromTouch } from '@torch-ai/torch-glare/utils';
+import { calculateNewWidthFromTouch } from "@/utils/resize";
 
 function TouchResizablePanel() {
   const panelRef = useRef<HTMLDivElement>(null);
@@ -541,11 +541,7 @@ const time: TimePickerValue = {
 #### Date Formatting with Time
 
 ```typescript
-import {
-  applyTimeToDate,
-  formatDateValueToString,
-  isValidDateObject
-} from '@torch-ai/torch-glare/utils';
+import { applyTimeToDate, formatDateValueToString, isValidDateObject } from "@/utils/dateFormat";
 
 function formatUserSelectedDate(
   date: Date,
@@ -569,7 +565,7 @@ const formatted = formatUserSelectedDate(date, time, 'MM/dd/yyyy hh:mm a');
 #### Class Name Merging with Variants
 
 ```typescript
-import { cn } from '@torch-ai/torch-glare/utils';
+import { cn } from "@/utils/cn";
 import { cva, type VariantProps } from 'class-variance-authority';
 
 const buttonVariants = cva(
@@ -609,10 +605,7 @@ function Button({ variant, size, className }: ButtonProps) {
 #### Resize with Constraints
 
 ```typescript
-import {
-  calculateNewWidthFromMouse,
-  calculateNewWidthFromTouch
-} from '@torch-ai/torch-glare/utils';
+import { calculateNewWidthFromMouse, calculateNewWidthFromTouch } from "@/utils/resize";
 
 function ConstrainedResize() {
   const MIN_WIDTH = 200;

package/docs/tutorials/building-first-form.md

@@ -43,7 +43,7 @@ Let's start with a basic form structure:
 'use client';
 
 import { useState } from 'react';
-import { Button } from '@torch-ai/torch-glare';
+import { Button } from "@/components/Button";
 
 export default function RegistrationForm() {
   const [formData, setFormData] = useState({
@@ -84,7 +84,8 @@ export default function RegistrationForm() {
 
 ```tsx
 import { useState } from 'react';
-import { LabelField, Button } from '@torch-ai/torch-glare';
+import { Button } from "@/components/Button";
+import { LabelField } from "@/components/LabelField";
 
 export default function RegistrationForm() {
   const [formData, setFormData] = useState({
@@ -164,7 +165,9 @@ Let's add comprehensive validation:
 'use client';
 
 import { useState, FormEvent } from 'react';
-import { LabelField, Button, FieldHint } from '@torch-ai/torch-glare';
+import { Button } from "@/components/Button";
+import { FieldHint } from "@/components/FieldHint";
+import { LabelField } from "@/components/LabelField";
 
 interface FormErrors {
   fullName?: string;
@@ -360,7 +363,9 @@ export default function RegistrationForm() {
 Use the `PasswordLevel` component to show password strength:
 
 ```tsx
-import { LabelField, PasswordLevel, Button } from '@torch-ai/torch-glare';
+import { Button } from "@/components/Button";
+import { LabelField } from "@/components/LabelField";
+import { PasswordLevel } from "@/components/PasswordLevel";
 
 // Inside your form component, add this after the password field:
 
@@ -393,7 +398,9 @@ import { LabelField, PasswordLevel, Button } from '@torch-ai/torch-glare';
 Use `FieldHint` to provide helpful guidance:
 
 ```tsx
-import { LabelField, FieldHint, Button } from '@torch-ai/torch-glare';
+import { Button } from "@/components/Button";
+import { FieldHint } from "@/components/FieldHint";
+import { LabelField } from "@/components/LabelField";
 
 <div>
   <LabelField
@@ -468,7 +475,9 @@ const handleSubmit = async (e: FormEvent) => {
 Use the `toast` function for success notifications:
 
 ```tsx
-import { LabelField, Button, toast } from '@torch-ai/torch-glare';
+import { Button } from "@/components/Button";
+import { LabelField } from "@/components/LabelField";
+import { toast } from "@/components/Toast";
 
 const handleSubmit = async (e: FormEvent) => {
   e.preventDefault();
@@ -513,13 +522,11 @@ Here's the complete, production-ready form:
 'use client';
 
 import { useState, FormEvent } from 'react';
-import {
-  LabelField,
-  Button,
-  PasswordLevel,
-  FieldHint,
-  toast,
-} from '@torch-ai/torch-glare';
+import { Button } from "@/components/Button";
+import { FieldHint } from "@/components/FieldHint";
+import { LabelField } from "@/components/LabelField";
+import { PasswordLevel } from "@/components/PasswordLevel";
+import { toast } from "@/components/Toast";
 
 interface FormErrors {
   fullName?: string;

package/docs/tutorials/component-composition.md

@@ -60,13 +60,11 @@ Composition is combining simple components to create more complex ones. Think of
 ```tsx
 'use client';
 
-import {
-  LabelField,
-  TextArea,
-  Button,
-  FieldHint,
-  toast,
-} from '@torch-ai/torch-glare';
+import { Button } from "@/components/Button";
+import { FieldHint } from "@/components/FieldHint";
+import { LabelField } from "@/components/LabelField";
+import { TextArea } from "@/components/TextArea";
+import { toast } from "@/components/Toast";
 import { useState } from 'react';
 
 export default function ContactForm() {
@@ -136,7 +134,8 @@ export default function ContactForm() {
 ### Feature Card Component
 
 ```tsx
-import { Button, Badge } from '@torch-ai/torch-glare';
+import { Badge } from "@/components/Badge";
+import { Button } from "@/components/Button";
 
 interface FeatureCardProps {
   title: string;
@@ -167,7 +166,7 @@ export default function FeatureCard({
           {title}
         </h3>
         {badge && (
-          <Badge theme="light" variant="SecondStyle">
+          <Badge theme="light" color="gray">
             {badge}
           </Badge>
         )}
@@ -227,14 +226,10 @@ export default function FeatureCard({
 ```tsx
 'use client';
 
-import {
-  Avatar,
-  Button,
-  Badge,
-  Popover,
-  PopoverTrigger,
-  PopoverContent,
-} from '@torch-ai/torch-glare';
+import { Avatar } from "@/components/Avatar";
+import { Badge } from "@/components/Badge";
+import { Button } from "@/components/Button";
+import { Popover, PopoverTrigger, PopoverContent } from "@/components/Popover";
 
 interface User {
   id: string;
@@ -337,7 +332,7 @@ export default function UserList({ users, onEdit, onDelete }: UserListProps) {
                 <PopoverTrigger asChild>
                   <Button
                     theme="light"
-                    variant="ContStyle"
+                    variant="PrimeContStyle"
                     buttonType="icon"
                     size="S"
                   >
@@ -393,20 +388,13 @@ export default function UserList({ users, onEdit, onDelete }: UserListProps) {
 'use client';
 
 import { useState } from 'react';
-import {
-  Dialog,
-  DialogTrigger,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogDescription,
-  LabelField,
-  TextArea,
-  Select,
-  SimpleOption,
-  Button,
-  toast,
-} from '@torch-ai/torch-glare';
+import { Button } from "@/components/Button";
+import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/Dialog";
+import { LabelField } from "@/components/LabelField";
+import { Select } from "@/components/Select";
+import { SimpleOption } from "@/components/SimpleOption";
+import { TextArea } from "@/components/TextArea";
+import { toast } from "@/components/Toast";
 
 export default function CreateProjectModal() {
   const [open, setOpen] = useState(false);
@@ -509,14 +497,12 @@ export default function CreateProjectModal() {
 'use client';
 
 import { useState } from 'react';
-import {
-  Table,
-  InputField,
-  Select,
-  SimpleOption,
-  Badge,
-  Button,
-} from '@torch-ai/torch-glare';
+import { Badge } from "@/components/Badge";
+import { Button } from "@/components/Button";
+import { InputField } from "@/components/InputField";
+import { Select } from "@/components/Select";
+import { SimpleOption } from "@/components/SimpleOption";
+import { Table } from "@/components/Table";
 
 interface TableRow {
   id: string;
@@ -630,7 +616,7 @@ export default function DataTableWithFilters() {
                   ${row.revenue.toLocaleString()}
                 </td>
                 <td className="px-4 py-3 text-right">
-                  <Button theme="light" variant="ContStyle" size="S">
+                  <Button theme="light" variant="PrimeContStyle" size="S">
                     View
                   </Button>
                 </td>
@@ -661,12 +647,10 @@ export default function DataTableWithFilters() {
 ```tsx
 'use client';
 
-import {
-  Button,
-  Avatar,
-  Badge,
-  useTheme,
-} from '@torch-ai/torch-glare';
+import { Avatar } from "@/components/Avatar";
+import { Badge } from "@/components/Badge";
+import { Button } from "@/components/Button";
+import { useTheme } from "@/providers/ThemeProvider";
 import { useState } from 'react';
 
 export default function Dashboard() {
@@ -726,7 +710,7 @@ export default function Dashboard() {
             <div className="flex items-center gap-4">
               <Button
                 theme={theme as any}
-                variant="ContStyle"
+                variant="PrimeContStyle"
                 buttonType="icon"
                 onClick={() => setSidebarOpen(!sidebarOpen)}
               >
@@ -740,7 +724,7 @@ export default function Dashboard() {
             <div className="flex items-center gap-4">
               <Button
                 theme={theme as any}
-                variant="ContStyle"
+                variant="PrimeContStyle"
                 buttonType="icon"
                 onClick={() => updateTheme(theme === 'light' ? 'dark' : 'light')}
               >
@@ -780,7 +764,7 @@ export default function Dashboard() {
                 <p className="typography-display-small-bold text-content-presentation-global-primary mb-2">
                   {stat.value}
                 </p>
-                <Badge theme={theme as any} variant="SecondStyle">
+                <Badge theme={theme as any} color="green">
                   {stat.change}
                 </Badge>
               </div>

package/docs/tutorials/getting-started.md

@@ -202,8 +202,8 @@ export default function ButtonShowcase() {
   return (
     <div className="flex gap-2 flex-wrap">
       <Button variant="PrimeStyle">Primary</Button>
-      <Button variant="ContStyle">Contrast</Button>
-      <Button variant="SecondStyle">Secondary</Button>
+      <Button variant="PrimeContStyle">Contrast</Button>
+      <Button variant="BluSecStyle">Secondary</Button>
       <Button variant="BorderStyle">Outline</Button>
     </div>
   );

package/docs/tutorials/theming-basics.md

@@ -56,7 +56,7 @@ First, ensure `ThemeProvider` wraps your application:
 
 ```tsx
 // app/layout.tsx
-import { ThemeProvider } from '@torch-ai/torch-glare';
+import { ThemeProvider } from "@/providers/ThemeProvider";
 
 export default function RootLayout({
   children,
@@ -95,7 +95,8 @@ Let users switch between light and dark modes:
 // components/ThemeToggle.tsx
 'use client';
 
-import { useTheme, Button } from '@torch-ai/torch-glare';
+import { Button } from "@/components/Button";
+import { useTheme } from "@/providers/ThemeProvider";
 
 export default function ThemeToggle() {
   const { theme, updateTheme } = useTheme();
@@ -103,7 +104,7 @@ export default function ThemeToggle() {
   return (
     <Button
       theme={theme as any}
-      variant="ContStyle"
+      variant="PrimeContStyle"
       buttonType="icon"
       onClick={() => updateTheme(theme === 'light' ? 'dark' : 'light')}
       aria-label="Toggle theme"
@@ -119,7 +120,7 @@ export default function ThemeToggle() {
 ```tsx
 'use client';
 
-import { useTheme } from '@torch-ai/torch-glare';
+import { useTheme } from "@/providers/ThemeProvider";
 
 export default function ThemeSelector() {
   const { theme, updateTheme } = useTheme();
@@ -219,7 +220,7 @@ export default function ThemedCard({
 ### Theme-Aware Button
 
 ```tsx
-import { useTheme } from '@torch-ai/torch-glare';
+import { useTheme } from "@/providers/ThemeProvider";
 
 export default function CustomButton({
   children,
@@ -406,7 +407,9 @@ Here's a complete example combining everything:
 ```tsx
 'use client';
 
-import { useTheme, Button, Badge } from '@torch-ai/torch-glare';
+import { Badge } from "@/components/Badge";
+import { Button } from "@/components/Button";
+import { useTheme } from "@/providers/ThemeProvider";
 
 export default function ThemedDashboard() {
   const { theme } = useTheme();
@@ -423,7 +426,7 @@ export default function ThemedDashboard() {
           <h1 className="typography-display-medium-bold text-content-presentation-global-primary">
             Dashboard
           </h1>
-          <Badge theme={theme as any} variant="SecondStyle">
+          <Badge theme={theme as any} color="gray">
             {theme} mode
           </Badge>
         </div>
@@ -503,7 +506,7 @@ export default function ThemedDashboard() {
         <Button theme={theme as any} variant="PrimeStyle">
           Create Project
         </Button>
-        <Button theme={theme as any} variant="ContStyle">
+        <Button theme={theme as any} variant="PrimeContStyle">
           View Reports
         </Button>
         <Button theme={theme as any} variant="BorderStyle">
@@ -686,7 +689,7 @@ Ensure theme toggle is keyboard accessible:
 ### Conditional Styling Based on Theme
 
 ```tsx
-import { useTheme } from '@torch-ai/torch-glare';
+import { useTheme } from "@/providers/ThemeProvider";
 
 function ThemedComponent() {
   const { theme } = useTheme();
@@ -707,7 +710,7 @@ function ThemedComponent() {
 ### Theme-Specific Images
 
 ```tsx
-import { useTheme } from '@torch-ai/torch-glare';
+import { useTheme } from "@/providers/ThemeProvider";
 
 function Logo() {
   const { theme } = useTheme();

package/package.json

@@ -1,8 +1,26 @@
 {
   "name": "torch-glare",
-  "version": "2.4.0",
+  "version": "2.4.1",
   "type": "module",
   "license": "MIT",
+  "description": "A copy-in React component library (TypeScript + Radix UI + Tailwind CSS). Its CLI copies component source directly into your project — you own the code.",
+  "homepage": "https://glare.torchcorp.com",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/torch-corp/torch-glare"
+  },
+  "keywords": [
+    "react",
+    "components",
+    "ui",
+    "component-library",
+    "design-system",
+    "tailwindcss",
+    "radix-ui",
+    "typescript",
+    "copy-in",
+    "cli"
+  ],
   "files": [
     "dist",
     "apps/lib",
@@ -18,7 +36,17 @@
   },
   "scripts": {
     "build": "tsc -b",
-    "deploy": "npx tsc --build --force && npm publish --access public"
+    "registry": "node scripts/bin/generateRegistry/index.js",
+    "docs:fix": "node scripts/bin/fixDocs/index.js",
+    "check:ai-docs": "node scripts/bin/checkAiDocs/index.js",
+    "typecheck": "pnpm -C apps run typecheck",
+    "lint": "pnpm -C apps run lint:lib",
+    "format": "pnpm -C apps run format",
+    "format:check": "pnpm -C apps run format:check",
+    "test": "pnpm -C apps run test",
+    "mcp:build": "pnpm -C mcp install && pnpm -C mcp run build",
+    "prepare": "pnpm -C mcp install && pnpm -C mcp run build",
+    "deploy": "pnpm run registry && npx tsc --build --force && npm publish --access public"
   },
   "dependencies": {
     "commander": "^13.1.0",
@@ -29,4 +57,4 @@
     "@types/node": "^22.14.0",
     "typescript": "^5.0.0"
   }
-}
+}

package/dist/src/commands/block.d.ts

@@ -1,5 +0,0 @@
-/**
- * Main function to add a block and its dependencies.
- */
-export declare function addBlock(block?: string, replace?: boolean): Promise<void>;
-//# sourceMappingURL=block.d.ts.map