torch-glare 2.3.0 → 2.4.1

package/docs/components/skeleton.md

@@ -11,12 +11,22 @@ keywords: [skeleton, loading, placeholder, shimmer, pulse, loader, content-loade
 
 ## Installation
 
-No additional dependencies required.
+TORCH Glare is a copy-in library: the CLI copies this component's source into your project
+(you do **not** install it from the npm package). Run `init` once, then `add`:
+
+```bash
+npx torch-glare@latest init
+npx torch-glare@latest add Skeleton
+```
+
+`add` also copies any components, hooks, and utilities that `Skeleton` depends on.
 
 ## Import
 
-```typescript
-import { Skeleton } from '@torch-ui/components'
+Import from your project's local path — the alias configured in `glare.json` (e.g. `@/*`):
+
+```tsx
+import { Skeleton } from "@/components/Skeleton";
 ```
 
 ## Quick Examples
@@ -24,7 +34,7 @@ import { Skeleton } from '@torch-ui/components'
 ### Basic Usage
 
 ```typescript
-import { Skeleton } from '@torch-ui/components'
+import { Skeleton } from "@/components/Skeleton";
 
 function Example() {
   return <Skeleton className="h-4 w-[250px]" />
@@ -34,7 +44,7 @@ function Example() {
 ### Text Lines
 
 ```typescript
-import { Skeleton } from '@torch-ui/components'
+import { Skeleton } from "@/components/Skeleton";
 
 function TextSkeleton() {
   return (
@@ -50,7 +60,7 @@ function TextSkeleton() {
 ### Card Skeleton
 
 ```typescript
-import { Skeleton } from '@torch-ui/components'
+import { Skeleton } from "@/components/Skeleton";
 
 function CardSkeleton() {
   return (
@@ -67,7 +77,7 @@ function CardSkeleton() {
 ### Profile Skeleton
 
 ```typescript
-import { Skeleton } from '@torch-ui/components'
+import { Skeleton } from "@/components/Skeleton";
 
 function ProfileSkeleton() {
   return (
@@ -88,7 +98,7 @@ function ProfileSkeleton() {
 ### Table Skeleton
 
 ```typescript
-import { Skeleton } from '@torch-ui/components'
+import { Skeleton } from "@/components/Skeleton";
 
 function TableSkeleton() {
   return (
@@ -118,7 +128,7 @@ function TableSkeleton() {
 ### Button Skeleton
 
 ```typescript
-import { Skeleton } from '@torch-ui/components'
+import { Skeleton } from "@/components/Skeleton";
 
 function ButtonSkeleton() {
   return <Skeleton className="h-10 w-32 rounded-md" />
@@ -128,7 +138,7 @@ function ButtonSkeleton() {
 ### Image Skeleton
 
 ```typescript
-import { Skeleton } from '@torch-ui/components'
+import { Skeleton } from "@/components/Skeleton";
 
 function ImageSkeleton() {
   return (
@@ -146,7 +156,7 @@ function ImageSkeleton() {
 ### List Skeleton
 
 ```typescript
-import { Skeleton } from '@torch-ui/components'
+import { Skeleton } from "@/components/Skeleton";
 
 function ListSkeleton() {
   return (
@@ -168,7 +178,7 @@ function ListSkeleton() {
 ### Dashboard Skeleton
 
 ```typescript
-import { Skeleton } from '@torch-ui/components'
+import { Skeleton } from "@/components/Skeleton";
 
 function DashboardSkeleton() {
   return (
@@ -194,7 +204,7 @@ function DashboardSkeleton() {
 ### Conditional Loading
 
 ```typescript
-import { Skeleton } from '@torch-ui/components'
+import { Skeleton } from "@/components/Skeleton";
 import { useState, useEffect } from 'react'
 
 interface User {
@@ -241,7 +251,7 @@ function UserProfile() {
 ### Grid Skeleton
 
 ```typescript
-import { Skeleton } from '@torch-ui/components'
+import { Skeleton } from "@/components/Skeleton";
 
 function GridSkeleton() {
   return (
@@ -289,7 +299,7 @@ export const Skeleton: React.FC<SkeletonProps>
 ### Usage with TypeScript
 
 ```typescript
-import { Skeleton } from '@torch-ui/components'
+import { Skeleton } from "@/components/Skeleton";
 
 function TypedSkeleton() {
   const skeletonProps: React.ComponentProps<typeof Skeleton> = {
@@ -306,14 +316,14 @@ function TypedSkeleton() {
 ### Reusable Skeleton Components
 
 ```typescript
-import { Skeleton } from '@torch-ui/components'
+import { Skeleton } from "@/components/Skeleton";
 
 // Avatar skeleton
-export function AvatarSkeleton({ size = 'md' }: { size?: 'sm' | 'md' | 'lg' }) {
+export function AvatarSkeleton({ size = 'M' }: { size?: 'S' | 'M' | 'L' }) {
   const sizeClasses = {
-    sm: 'h-8 w-8',
-    md: 'h-12 w-12',
-    lg: 'h-16 w-16',
+    S: 'h-8 w-8',
+    M: 'h-12 w-12',
+    L: 'h-16 w-16',
   }
 
   return <Skeleton className={`${sizeClasses[size]} rounded-full`} />
@@ -334,14 +344,14 @@ export function TextSkeleton({ lines = 3 }: { lines?: number }) {
 }
 
 // Usage
-<AvatarSkeleton size="lg" />
+<AvatarSkeleton size="L" />
 <TextSkeleton lines={4} />
 ```
 
 ### With Suspense
 
 ```typescript
-import { Skeleton } from '@torch-ui/components'
+import { Skeleton } from "@/components/Skeleton";
 import { Suspense } from 'react'
 
 function ProfileSkeleton() {
@@ -368,7 +378,7 @@ function App() {
 ### Loading States Hook
 
 ```typescript
-import { Skeleton } from '@torch-ui/components'
+import { Skeleton } from "@/components/Skeleton";
 import { useState, useEffect } from 'react'
 
 function useLoading<T>(fetchFn: () => Promise<T>) {
@@ -399,7 +409,7 @@ function DataDisplay() {
 ### Delayed Skeleton
 
 ```typescript
-import { Skeleton } from '@torch-ui/components'
+import { Skeleton } from "@/components/Skeleton";
 import { useState, useEffect } from 'react'
 
 function DelayedSkeleton({ delay = 300, children }) {
@@ -477,7 +487,7 @@ function FastLoading() {
 
 ```typescript
 import { render, screen } from '@testing-library/react'
-import { Skeleton } from '@torch-ui/components'
+import { Skeleton } from "@/components/Skeleton";
 
 describe('Skeleton', () => {
   it('renders skeleton with correct classes', () => {
@@ -500,7 +510,7 @@ describe('Skeleton', () => {
 
 ```typescript
 import { render, screen, waitFor } from '@testing-library/react'
-import { Skeleton } from '@torch-ui/components'
+import { Skeleton } from "@/components/Skeleton";
 
 function ComponentWithLoading() {
   const [loading, setLoading] = useState(true)
@@ -553,7 +563,7 @@ test('shows skeleton then content', async () => {
 ### Enhanced Accessibility
 
 ```typescript
-import { Skeleton } from '@torch-ui/components'
+import { Skeleton } from "@/components/Skeleton";
 
 function AccessibleSkeleton() {
   return (
@@ -600,7 +610,7 @@ function AccessibleSkeleton() {
 
 ```diff
 - import Skeleton from 'react-loading-skeleton'
-+ import { Skeleton } from '@torch-ui/components'
++ import { Skeleton } from "@/components/Skeleton";
 
 - <Skeleton count={3} />
 + {[...Array(3)].map((_, i) => (
@@ -612,12 +622,12 @@ function AccessibleSkeleton() {
 
 ```diff
 - import { Skeleton } from '@mui/material'
-+ import { Skeleton } from '@torch-ui/components'
++ import { Skeleton } from "@/components/Skeleton";
 
-- <Skeleton variant="text" width={210} height={60} />
+- <Skeleton width={210} height={60} />          {/* MUI text variant */}
 + <Skeleton className="h-[60px] w-[210px]" />
 
-- <Skeleton variant="circular" width={40} height={40} />
+- <Skeleton width={40} height={40} />            {/* MUI circular variant */}
 + <Skeleton className="h-10 w-10 rounded-full" />
 ```
 
@@ -625,12 +635,12 @@ function AccessibleSkeleton() {
 
 ```diff
 - import { Skeleton } from 'antd'
-+ import { Skeleton } from '@torch-ui/components'
++ import { Skeleton } from "@/components/Skeleton";
 
 - <Skeleton active />
 + <Skeleton className="h-4 w-full" />
 
-- <Skeleton.Avatar active size="large" />
+- <Skeleton.Avatar active />                     {/* Ant large avatar */}
 + <Skeleton className="h-16 w-16 rounded-full" />
 ```
 

package/docs/components/slide-date-picker.md

@@ -11,15 +11,22 @@ keywords: [slide-picker, date, wheel, mobile, picker, scroll]
 
 ## Installation
 
+TORCH Glare is a copy-in library: the CLI copies this component's source into your project
+(you do **not** install it from the npm package). Run `init` once, then `add`:
+
 ```bash
-npm install torch-react-mobile-picker date-fns
+npx torch-glare@latest init
+npx torch-glare@latest add SlideDatePicker
 ```
 
+`add` also copies any components, hooks, and utilities that `SlideDatePicker` depends on.
+
 ## Import
 
-```typescript
-import { SlideDatePicker } from '@torch-ui/components'
-import type { SlideDatePickerProps } from '@torch-ui/components'
+Import from your project's local path — the alias configured in `glare.json` (e.g. `@/*`):
+
+```tsx
+import { SlideDatePicker } from "@/components/SlideDatePicker";
 ```
 
 ## Quick Examples
@@ -27,7 +34,7 @@ import type { SlideDatePickerProps } from '@torch-ui/components'
 ### Basic Usage
 
 ```typescript
-import { SlideDatePicker } from '@torch-ui/components'
+import { SlideDatePicker } from "@/components/SlideDatePicker";
 import { useState } from 'react'
 
 function Example() {
@@ -45,7 +52,7 @@ function Example() {
 ### Custom Date Format
 
 ```typescript
-import { SlideDatePicker } from '@torch-ui/components'
+import { SlideDatePicker } from "@/components/SlideDatePicker";
 import { useState } from 'react'
 
 function CustomFormat() {
@@ -64,8 +71,8 @@ function CustomFormat() {
 ### With Custom Trigger
 
 ```typescript
-import { SlideDatePicker } from '@torch-ui/components'
-import { Button } from '@torch-ui/components'
+import { SlideDatePicker } from "@/components/SlideDatePicker";
+import { Button } from "@/components/Button";
 import { useState } from 'react'
 
 function CustomTrigger() {
@@ -76,7 +83,7 @@ function CustomTrigger() {
       value={date}
       onChange={(e) => setDate(e.target.value)}
     >
-      <Button variant="SecondaryStyle">
+      <Button variant="BluSecStyle">
         <i className="ri-calendar-2-line" />
         {date.toLocaleDateString()}
       </Button>
@@ -88,7 +95,7 @@ function CustomTrigger() {
 ### Dark/Light Theme
 
 ```typescript
-import { SlideDatePicker } from '@torch-ui/components'
+import { SlideDatePicker } from "@/components/SlideDatePicker";
 
 function ThemedPicker() {
   const [date, setDate] = useState<Date>(new Date())
@@ -114,8 +121,8 @@ function ThemedPicker() {
 ### Birthday Picker
 
 ```typescript
-import { SlideDatePicker } from '@torch-ui/components'
-import { InputField } from '@torch-ui/components'
+import { SlideDatePicker } from "@/components/SlideDatePicker";
+import { InputField } from "@/components/InputField";
 import { useState } from 'react'
 
 function BirthdayPicker() {
@@ -139,8 +146,8 @@ function BirthdayPicker() {
 ### Appointment Scheduler
 
 ```typescript
-import { SlideDatePicker } from '@torch-ui/components'
-import { InputField } from '@torch-ui/components'
+import { SlideDatePicker } from "@/components/SlideDatePicker";
+import { InputField } from "@/components/InputField";
 import { useState } from 'react'
 
 function AppointmentScheduler() {
@@ -179,7 +186,7 @@ function AppointmentScheduler() {
 ### With Initial Date
 
 ```typescript
-import { SlideDatePicker } from '@torch-ui/components'
+import { SlideDatePicker } from "@/components/SlideDatePicker";
 import { useState } from 'react'
 
 function WithInitialDate() {
@@ -201,8 +208,8 @@ function WithInitialDate() {
 ### Multiple Date Pickers
 
 ```typescript
-import { SlideDatePicker } from '@torch-ui/components'
-import { InputField } from '@torch-ui/components'
+import { SlideDatePicker } from "@/components/SlideDatePicker";
+import { InputField } from "@/components/InputField";
 import { useState } from 'react'
 
 function DateRangePicker() {
@@ -248,8 +255,9 @@ function DateRangePicker() {
 ### Form Integration
 
 ```typescript
-import { SlideDatePicker } from '@torch-ui/components'
-import { InputField, Button } from '@torch-ui/components'
+import { SlideDatePicker } from "@/components/SlideDatePicker";
+import { Button } from "@/components/Button";
+import { InputField } from "@/components/InputField";
 import { useState } from 'react'
 
 function RegistrationForm() {
@@ -292,7 +300,7 @@ function RegistrationForm() {
 ### Localized Date Format
 
 ```typescript
-import { SlideDatePicker } from '@torch-ui/components'
+import { SlideDatePicker } from "@/components/SlideDatePicker";
 import { useState } from 'react'
 
 function LocalizedPicker() {
@@ -359,7 +367,7 @@ type SlideValues = {
 
 ```typescript
 import { ComponentProps, ReactElement } from 'react'
-import { InputField } from '@torch-ui/components'
+import { InputField } from "@/components/InputField";
 
 interface SlideDatePickerProps extends Omit<ComponentProps<typeof InputField>, 'onChange'> {
   onChange?: (e: { target: { value: Date } }) => void
@@ -377,7 +385,7 @@ export const SlideDatePicker: React.ForwardRefExoticComponent<
 ### Usage with Types
 
 ```typescript
-import { SlideDatePicker } from '@torch-ui/components'
+import { SlideDatePicker } from "@/components/SlideDatePicker";
 import { useRef, useState } from 'react'
 
 function TypedExample() {
@@ -405,8 +413,8 @@ function TypedExample() {
 ### Age Verification
 
 ```typescript
-import { SlideDatePicker } from '@torch-ui/components'
-import { InputField } from '@torch-ui/components'
+import { SlideDatePicker } from "@/components/SlideDatePicker";
+import { InputField } from "@/components/InputField";
 import { useState } from 'react'
 
 function AgeVerification() {
@@ -457,8 +465,8 @@ function AgeVerification() {
 ### Expiration Date Picker
 
 ```typescript
-import { SlideDatePicker } from '@torch-ui/components'
-import { InputField } from '@torch-ui/components'
+import { SlideDatePicker } from "@/components/SlideDatePicker";
+import { InputField } from "@/components/InputField";
 import { useState } from 'react'
 
 function ExpirationPicker() {
@@ -490,7 +498,7 @@ function ExpirationPicker() {
 ### Historical Date Picker
 
 ```typescript
-import { SlideDatePicker } from '@torch-ui/components'
+import { SlideDatePicker } from "@/components/SlideDatePicker";
 import { useState } from 'react'
 
 function HistoricalDatePicker() {
@@ -522,7 +530,7 @@ function HistoricalDatePicker() {
 
 ```typescript
 import { render, screen, fireEvent, waitFor } from '@testing-library/react'
-import { SlideDatePicker } from '@torch-ui/components'
+import { SlideDatePicker } from "@/components/SlideDatePicker";
 import userEvent from '@testing-library/user-event'
 
 describe('SlideDatePicker', () => {
@@ -647,7 +655,7 @@ describe('SlideDatePicker', () => {
 ```typescript
 import { render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import { SlideDatePicker } from '@torch-ui/components'
+import { SlideDatePicker } from "@/components/SlideDatePicker";
 
 describe('SlideDatePicker Integration', () => {
   it('updates form value on date selection', async () => {

package/docs/components/spin-loading.md

@@ -11,13 +11,22 @@ keywords: [loading, spinner, loader, animation, spin, progress]
 
 ## Installation
 
-No external dependencies required.
+TORCH Glare is a copy-in library: the CLI copies this component's source into your project
+(you do **not** install it from the npm package). Run `init` once, then `add`:
+
+```bash
+npx torch-glare@latest init
+npx torch-glare@latest add SpinLoading
+```
+
+`add` also copies any components, hooks, and utilities that `SpinLoading` depends on.
 
 ## Import
 
-```typescript
-import { SpinLoading } from '@torch-ui/components'
-import type { SpinLoadingProps } from '@torch-ui/components'
+Import from your project's local path — the alias configured in `glare.json` (e.g. `@/*`):
+
+```tsx
+import { SpinLoading } from "@/components/SpinLoading";
 ```
 
 ## Quick Examples
@@ -25,7 +34,7 @@ import type { SpinLoadingProps } from '@torch-ui/components'
 ### Basic Usage
 
 ```typescript
-import { SpinLoading } from '@torch-ui/components'
+import { SpinLoading } from "@/components/SpinLoading";
 
 function Example() {
   return <SpinLoading />
@@ -35,7 +44,7 @@ function Example() {
 ### With Different Sizes
 
 ```typescript
-import { SpinLoading } from '@torch-ui/components'
+import { SpinLoading } from "@/components/SpinLoading";
 
 function SizesExample() {
   return (
@@ -51,7 +60,7 @@ function SizesExample() {
 ### Dark Theme
 
 ```typescript
-import { SpinLoading } from '@torch-ui/components'
+import { SpinLoading } from "@/components/SpinLoading";
 
 function DarkTheme() {
   return (
@@ -65,7 +74,7 @@ function DarkTheme() {
 ### Light Theme
 
 ```typescript
-import { SpinLoading } from '@torch-ui/components'
+import { SpinLoading } from "@/components/SpinLoading";
 
 function LightTheme() {
   return (
@@ -79,7 +88,7 @@ function LightTheme() {
 ### With Center Content
 
 ```typescript
-import { SpinLoading } from '@torch-ui/components'
+import { SpinLoading } from "@/components/SpinLoading";
 
 function WithContent() {
   return (
@@ -96,7 +105,7 @@ function WithContent() {
 ### With Percentage
 
 ```typescript
-import { SpinLoading } from '@torch-ui/components'
+import { SpinLoading } from "@/components/SpinLoading";
 import { useState, useEffect } from 'react'
 
 function PercentageLoader() {
@@ -123,7 +132,7 @@ function PercentageLoader() {
 ### Loading Overlay
 
 ```typescript
-import { SpinLoading } from '@torch-ui/components'
+import { SpinLoading } from "@/components/SpinLoading";
 
 function LoadingOverlay({ loading, children }: { loading: boolean; children: React.ReactNode }) {
   return (
@@ -159,7 +168,7 @@ function App() {
 ### Full Page Loading
 
 ```typescript
-import { SpinLoading } from '@torch-ui/components'
+import { SpinLoading } from "@/components/SpinLoading";
 
 function FullPageLoading() {
   return (
@@ -177,7 +186,7 @@ function FullPageLoading() {
 ### Data Loading State
 
 ```typescript
-import { SpinLoading } from '@torch-ui/components'
+import { SpinLoading } from "@/components/SpinLoading";
 import { useEffect, useState } from 'react'
 
 function DataLoader() {
@@ -207,8 +216,8 @@ function DataLoader() {
 ### Card Loading
 
 ```typescript
-import { SpinLoading } from '@torch-ui/components'
-import { Card } from '@torch-ui/components'
+import { SpinLoading } from "@/components/SpinLoading";
+import { Card } from "@/components/Card";
 
 function CardWithLoading({ loading }: { loading: boolean }) {
   return (
@@ -233,8 +242,8 @@ function CardWithLoading({ loading }: { loading: boolean }) {
 ### Button Loading State
 
 ```typescript
-import { SpinLoading } from '@torch-ui/components'
-import { Button } from '@torch-ui/components'
+import { SpinLoading } from "@/components/SpinLoading";
+import { Button } from "@/components/Button";
 import { useState } from 'react'
 
 function LoadingButton() {
@@ -306,7 +315,7 @@ export const SpinLoading: React.FC<SpinLoadingProps>
 ### Usage with Types
 
 ```typescript
-import { SpinLoading } from '@torch-ui/components'
+import { SpinLoading } from "@/components/SpinLoading";
 import { useState } from 'react'
 
 function TypedExample() {
@@ -338,7 +347,7 @@ function TypedExample() {
 ### Async Operation Wrapper
 
 ```typescript
-import { SpinLoading } from '@torch-ui/components'
+import { SpinLoading } from "@/components/SpinLoading";
 import { ReactNode, useState } from 'react'
 
 function AsyncWrapper({
@@ -377,7 +386,7 @@ function AsyncWrapper({
 ### Suspense-Like Fallback
 
 ```typescript
-import { SpinLoading } from '@torch-ui/components'
+import { SpinLoading } from "@/components/SpinLoading";
 import { Suspense } from 'react'
 
 function SuspenseWithLoading({ children }: { children: React.ReactNode }) {
@@ -400,7 +409,7 @@ function SuspenseWithLoading({ children }: { children: React.ReactNode }) {
 ### Loading State Manager
 
 ```typescript
-import { SpinLoading } from '@torch-ui/components'
+import { SpinLoading } from "@/components/SpinLoading";
 import { createContext, useContext, useState, ReactNode } from 'react'
 
 const LoadingContext = createContext({
@@ -448,7 +457,7 @@ function MyComponent() {
 
 ```typescript
 import { render, screen } from '@testing-library/react'
-import { SpinLoading } from '@torch-ui/components'
+import { SpinLoading } from "@/components/SpinLoading";
 
 describe('SpinLoading', () => {
   it('renders spinner', () => {
@@ -513,7 +522,7 @@ describe('SpinLoading', () => {
 
 ```typescript
 import { render, screen, waitFor } from '@testing-library/react'
-import { SpinLoading } from '@torch-ui/components'
+import { SpinLoading } from "@/components/SpinLoading";
 
 describe('SpinLoading Integration', () => {
   it('shows loading state during async operation', async () => {

package/docs/components/stepper.md

@@ -14,10 +14,16 @@ The component is composed of `Stepper`, `Step`, `StepIndicator`, `StepConnector`
 
 ## Installation
 
+TORCH Glare is a copy-in library: the CLI copies this component's source into your project
+(you do **not** install it from the npm package). Run `init` once, then `add`:
+
 ```bash
+npx torch-glare@latest init
 npx torch-glare@latest add Stepper
 ```
 
+`add` also copies any components, hooks, and utilities that `Stepper` depends on.
+
 ## Imports
 
 ```typescript