shadcn-glass-ui 1.0.10 → 2.0.0

package/docs/api/interfaces/BadgeGlassProps.md

@@ -0,0 +1,118 @@
+[**shadcn-glass-ui API Reference v1.0.7**](../README.md)
+
+***
+
+[shadcn-glass-ui API Reference](../globals.md) / BadgeGlassProps
+
+# Interface: BadgeGlassProps
+
+Defined in: [src/components/glass/ui/badge-glass.tsx:141](https://github.com/Yhooi2/shadcn-glass-ui-library/blob/926c43a35b985ce0dee6d96ce88a1fc3d72f4d67/src/components/glass/ui/badge-glass.tsx#L141)
+
+Props for the BadgeGlass component
+
+A glass-themed badge with semantic variants and optional animated status dot.
+Features shadcn/ui compatible variants plus extended Glass UI variants.
+
+## Accessibility
+
+- **Keyboard Navigation:** Badges are non-interactive by default (display-only)
+- **Focus Management:** N/A - badges do not receive focus unless wrapped in interactive elements
+- **Screen Readers:** Semantic `<span>` element, content announced naturally
+- **Status Indicators:** Use `aria-label` to provide context for status badges (e.g., "Status: Active")
+- **Animated Dot:** Pulse animation respects `prefers-reduced-motion` settings
+- **Touch Targets:** N/A for display badges, ensure 44x44px if wrapping in button/link (WCAG 2.5.5)
+- **Color Contrast:** All variant text meets WCAG AA contrast ratio 4.5:1 against badge background
+- **Motion:** Dot pulse animation can be disabled for users with motion sensitivity
+
+## Example
+
+```tsx
+// Basic badge with variant
+<BadgeGlass variant="default">New</BadgeGlass>
+
+// Status badge with aria-label for screen readers
+<BadgeGlass variant="success" aria-label="Status: Active">
+  Active
+</BadgeGlass>
+
+// Different variants (shadcn/ui compatible)
+<BadgeGlass variant="default">Default</BadgeGlass>
+<BadgeGlass variant="secondary">Secondary</BadgeGlass>
+<BadgeGlass variant="destructive">Error</BadgeGlass>
+<BadgeGlass variant="outline">Outline</BadgeGlass>
+
+// Extended Glass UI variants
+<BadgeGlass variant="success">Success</BadgeGlass>
+<BadgeGlass variant="warning">Warning</BadgeGlass>
+<BadgeGlass variant="info">Info</BadgeGlass>
+
+// With animated status dot
+<BadgeGlass variant="success" dot aria-label="Status: Online">
+  Online
+</BadgeGlass>
+<BadgeGlass variant="destructive" dot aria-label="Status: Offline">
+  Offline
+</BadgeGlass>
+
+// Size variants
+<BadgeGlass size="sm">Small</BadgeGlass>
+<BadgeGlass size="md">Medium</BadgeGlass>
+<BadgeGlass size="lg">Large</BadgeGlass>
+
+// Inside interactive elements (ensure accessible labels)
+<button aria-label="Filter by active status">
+  Filter: <BadgeGlass variant="success">Active</BadgeGlass>
+</button>
+
+// Count badge with semantic meaning
+<div>
+  <span>Notifications</span>
+  <BadgeGlass variant="destructive" aria-label="3 unread notifications">
+    3
+  </BadgeGlass>
+</div>
+```
+
+## Extends
+
+- `Omit`\<`React.HTMLAttributes`\<`HTMLSpanElement`\>, `"style"`\>.`VariantProps`\<*typeof* [`badgeVariants`](../variables/badgeVariants.md)\>
+
+## Properties
+
+### children
+
+> `readonly` **children**: `ReactNode`
+
+Defined in: [src/components/glass/ui/badge-glass.tsx:144](https://github.com/Yhooi2/shadcn-glass-ui-library/blob/926c43a35b985ce0dee6d96ce88a1fc3d72f4d67/src/components/glass/ui/badge-glass.tsx#L144)
+
+#### Overrides
+
+`Omit.children`
+
+***
+
+### variant?
+
+> `readonly` `optional` **variant**: [`BadgeVariant`](../type-aliases/BadgeVariant.md)
+
+Defined in: [src/components/glass/ui/badge-glass.tsx:145](https://github.com/Yhooi2/shadcn-glass-ui-library/blob/926c43a35b985ce0dee6d96ce88a1fc3d72f4d67/src/components/glass/ui/badge-glass.tsx#L145)
+
+***
+
+### dot?
+
+> `readonly` `optional` **dot**: `boolean`
+
+Defined in: [src/components/glass/ui/badge-glass.tsx:146](https://github.com/Yhooi2/shadcn-glass-ui-library/blob/926c43a35b985ce0dee6d96ce88a1fc3d72f4d67/src/components/glass/ui/badge-glass.tsx#L146)
+
+***
+
+### size?
+
+> `optional` **size**: `"sm"` \| `"md"` \| `"lg"` \| `null`
+
+Defined in: [src/lib/variants/badge-glass-variants.ts:24](https://github.com/Yhooi2/shadcn-glass-ui-library/blob/926c43a35b985ce0dee6d96ce88a1fc3d72f4d67/src/lib/variants/badge-glass-variants.ts#L24)
+
+#### Inherited from
+
+`VariantProps.size`

package/docs/api/interfaces/ButtonGlassProps.md

@@ -0,0 +1,179 @@
+[**shadcn-glass-ui API Reference v1.0.7**](../README.md)
+
+***
+
+[shadcn-glass-ui API Reference](../globals.md) / ButtonGlassProps
+
+# Interface: ButtonGlassProps
+
+Defined in: [src/components/glass/ui/button-glass.tsx:157](https://github.com/Yhooi2/shadcn-glass-ui-library/blob/926c43a35b985ce0dee6d96ce88a1fc3d72f4d67/src/components/glass/ui/button-glass.tsx#L157)
+
+Props for the ButtonGlass component
+
+A glass-themed button with ripple effects, loading states, and icon support.
+Features theme-aware styling and hover animations.
+
+## Accessibility
+
+- **Keyboard Navigation:** Fully keyboard accessible with native `<button>` element
+- **Focus Management:** Visible focus ring using `--focus-glow` CSS variable (WCAG 2.4.7)
+- **Screen Readers:** Semantic `<button>` element, disabled state announced automatically
+- **Loading State:** When loading=true, button is disabled and loading spinner is visible
+- **Touch Targets:** Minimum 44x44px touch target (WCAG 2.5.5) via size variants
+- **Color Contrast:** All variants meet WCAG AA contrast ratio 4.5:1 minimum
+- **Motion:** Respects `prefers-reduced-motion` for ripple/shine animations
+
+## Example
+
+```tsx
+// Basic button
+<ButtonGlass variant="primary">Click me</ButtonGlass>
+
+// With icon and aria-label for icon-only buttons
+<ButtonGlass icon={Check} iconPosition="left">Save</ButtonGlass>
+<ButtonGlass icon={X} size="icon" aria-label="Close dialog" />
+
+// Loading state (automatically disables and shows spinner)
+<ButtonGlass loading aria-live="polite">Processing...</ButtonGlass>
+
+// Different variants
+<ButtonGlass variant="ghost">Cancel</ButtonGlass>
+<ButtonGlass variant="success">Confirm</ButtonGlass>
+<ButtonGlass variant="destructive">Delete</ButtonGlass>
+
+// As a link (asChild pattern) - maintains semantic HTML
+<ButtonGlass asChild variant="primary">
+  <a href="/dashboard">Go to Dashboard</a>
+</ButtonGlass>
+
+// With Next.js Link
+<ButtonGlass asChild variant="ghost">
+  <Link href="/settings">Settings</Link>
+</ButtonGlass>
+
+// Form submit button
+<ButtonGlass type="submit" variant="primary">
+  Submit Form
+</ButtonGlass>
+```
+
+## Extends
+
+- `Omit`\<`React.ButtonHTMLAttributes`\<`HTMLButtonElement`\>, `"style"`\>.`VariantProps`\<*typeof* [`buttonGlassVariants`](../variables/buttonGlassVariants.md)\>
+
+## Properties
+
+### asChild?
+
+> `readonly` `optional` **asChild**: `boolean`
+
+Defined in: [src/components/glass/ui/button-glass.tsx:176](https://github.com/Yhooi2/shadcn-glass-ui-library/blob/926c43a35b985ce0dee6d96ce88a1fc3d72f4d67/src/components/glass/ui/button-glass.tsx#L176)
+
+Render as child element instead of button (polymorphic rendering).
+Useful for rendering buttons as links or other interactive elements.
+
+**Note:** When using `asChild`, decorative effects (ripple, shine, glow)
+are disabled to maintain compatibility with Radix UI Slot.
+Only styles and event handlers are passed to the child element.
+
+#### Default
+
+```ts
+false
+```
+
+#### Example
+
+```tsx
+<ButtonGlass asChild>
+  <a href="/about">About Us</a>
+</ButtonGlass>
+```
+
+***
+
+### variant?
+
+> `readonly` `optional` **variant**: [`ButtonGlassVariant`](../type-aliases/ButtonGlassVariant.md)
+
+Defined in: [src/components/glass/ui/button-glass.tsx:182](https://github.com/Yhooi2/shadcn-glass-ui-library/blob/926c43a35b985ce0dee6d96ce88a1fc3d72f4d67/src/components/glass/ui/button-glass.tsx#L182)
+
+Visual style variant of the button
+
+#### Default
+
+```ts
+"primary"
+```
+
+#### Overrides
+
+`VariantProps.variant`
+
+***
+
+### loading?
+
+> `readonly` `optional` **loading**: `boolean`
+
+Defined in: [src/components/glass/ui/button-glass.tsx:188](https://github.com/Yhooi2/shadcn-glass-ui-library/blob/926c43a35b985ce0dee6d96ce88a1fc3d72f4d67/src/components/glass/ui/button-glass.tsx#L188)
+
+Show loading spinner and disable interactions
+
+#### Default
+
+```ts
+false
+```
+
+***
+
+### icon?
+
+> `readonly` `optional` **icon**: `LucideIcon`
+
+Defined in: [src/components/glass/ui/button-glass.tsx:194](https://github.com/Yhooi2/shadcn-glass-ui-library/blob/926c43a35b985ce0dee6d96ce88a1fc3d72f4d67/src/components/glass/ui/button-glass.tsx#L194)
+
+Icon component from lucide-react to display
+
+#### Example
+
+```ts
+icon={Check}
+```
+
+***
+
+### iconPosition?
+
+> `readonly` `optional` **iconPosition**: `"left"` \| `"right"`
+
+Defined in: [src/components/glass/ui/button-glass.tsx:200](https://github.com/Yhooi2/shadcn-glass-ui-library/blob/926c43a35b985ce0dee6d96ce88a1fc3d72f4d67/src/components/glass/ui/button-glass.tsx#L200)
+
+Position of the icon relative to button text
+
+#### Default
+
+```ts
+"left"
+```
+
+***
+
+### size?
+
+> `readonly` `optional` **size**: `"sm"` \| `"md"` \| `"lg"` \| `"icon"`
+
+Defined in: [src/components/glass/ui/button-glass.tsx:206](https://github.com/Yhooi2/shadcn-glass-ui-library/blob/926c43a35b985ce0dee6d96ce88a1fc3d72f4d67/src/components/glass/ui/button-glass.tsx#L206)
+
+Size variant of the button
+
+#### Default
+
+```ts
+"md"
+```
+
+#### Overrides
+
+`VariantProps.size`

package/docs/api/interfaces/CheckboxGlassProps.md

@@ -0,0 +1,125 @@
+[**shadcn-glass-ui API Reference v1.0.7**](../README.md)
+
+***
+
+[shadcn-glass-ui API Reference](../globals.md) / CheckboxGlassProps
+
+# Interface: CheckboxGlassProps
+
+Defined in: [src/components/glass/ui/checkbox-glass.tsx:94](https://github.com/Yhooi2/shadcn-glass-ui-library/blob/926c43a35b985ce0dee6d96ce88a1fc3d72f4d67/src/components/glass/ui/checkbox-glass.tsx#L94)
+
+Props for the CheckboxGlass component
+
+A glass-themed checkbox with accessible keyboard navigation, focus management,
+and touch-friendly targets. Features glow effects and theme-aware styling.
+
+## Accessibility
+
+- **Keyboard Navigation:** Full keyboard support with Enter/Space to toggle, Tab to focus (WCAG 2.1.1)
+- **Focus Management:** Visible focus ring using `--focus-glow` CSS variable (WCAG 2.4.7)
+- **Screen Readers:** Dual implementation with native `<input type="checkbox">` (hidden) + visual `<div role="checkbox">`
+- **ARIA Attributes:** Uses `role="checkbox"` and `aria-checked` for proper state announcement
+- **Label Association:** Visual label automatically associated with checkbox via `<label>` wrapper
+- **Touch Targets:** 44x44px minimum touch area per Apple HIG (WCAG 2.5.5 compliance)
+- **Color Contrast:** Check mark and backgrounds meet WCAG AA contrast ratio 4.5:1
+- **Motion:** Transitions respect `prefers-reduced-motion` settings
+
+## Example
+
+```tsx
+// Basic checkbox with label
+<CheckboxGlass checked={agreed} onChange={setAgreed} label="I agree to terms" />
+
+// Checkbox with accessible name (no visual label)
+<CheckboxGlass
+  checked={checked}
+  onChange={setChecked}
+  aria-label="Select all items"
+/>
+
+// Form integration with validation
+<form onSubmit={handleSubmit}>
+  <CheckboxGlass
+    checked={newsletter}
+    onChange={setNewsletter}
+    label="Subscribe to newsletter"
+    aria-describedby="newsletter-help"
+  />
+  <p id="newsletter-help">Receive weekly updates</p>
+  <CheckboxGlass
+    checked={terms}
+    onChange={setTerms}
+    label="Accept terms and conditions"
+    required
+    aria-invalid={submitted && !terms}
+  />
+  {submitted && !terms && (
+    <span role="alert">You must accept the terms</span>
+  )}
+</form>
+
+// Disabled checkbox (state announced to screen readers)
+<CheckboxGlass
+  checked={true}
+  onChange={() => {}}
+  label="This option is locked"
+  disabled
+/>
+
+// Checkbox group with fieldset
+<fieldset>
+  <legend>Select your interests</legend>
+  <CheckboxGlass
+    checked={interests.tech}
+    onChange={(checked) => setInterests({ ...interests, tech: checked })}
+    label="Technology"
+  />
+  <CheckboxGlass
+    checked={interests.design}
+    onChange={(checked) => setInterests({ ...interests, design: checked })}
+    label="Design"
+  />
+</fieldset>
+```
+
+## Extends
+
+- `Omit`\<`React.InputHTMLAttributes`\<`HTMLInputElement`\>, `"onChange"`\>
+
+## Properties
+
+### checked
+
+> `readonly` **checked**: `boolean`
+
+Defined in: [src/components/glass/ui/checkbox-glass.tsx:96](https://github.com/Yhooi2/shadcn-glass-ui-library/blob/926c43a35b985ce0dee6d96ce88a1fc3d72f4d67/src/components/glass/ui/checkbox-glass.tsx#L96)
+
+#### Overrides
+
+`Omit.checked`
+
+***
+
+### onChange()?
+
+> `readonly` `optional` **onChange**: (`checked`) => `void`
+
+Defined in: [src/components/glass/ui/checkbox-glass.tsx:97](https://github.com/Yhooi2/shadcn-glass-ui-library/blob/926c43a35b985ce0dee6d96ce88a1fc3d72f4d67/src/components/glass/ui/checkbox-glass.tsx#L97)
+
+#### Parameters
+
+##### checked
+
+`boolean`
+
+#### Returns
+
+`void`
+
+***
+
+### label?
+
+> `readonly` `optional` **label**: `string`
+
+Defined in: [src/components/glass/ui/checkbox-glass.tsx:98](https://github.com/Yhooi2/shadcn-glass-ui-library/blob/926c43a35b985ce0dee6d96ce88a1fc3d72f4d67/src/components/glass/ui/checkbox-glass.tsx#L98)

package/docs/api/interfaces/DropdownGlassProps.md

@@ -0,0 +1,123 @@
+[**shadcn-glass-ui API Reference v1.0.7**](../README.md)
+
+***
+
+[shadcn-glass-ui API Reference](../globals.md) / DropdownGlassProps
+
+# Interface: DropdownGlassProps
+
+Defined in: [src/components/glass/ui/dropdown-glass.tsx:208](https://github.com/Yhooi2/shadcn-glass-ui-library/blob/926c43a35b985ce0dee6d96ce88a1fc3d72f4d67/src/components/glass/ui/dropdown-glass.tsx#L208)
+
+Props for the DropdownGlass component
+
+A glass-themed dropdown menu with accessible keyboard navigation, based on Radix UI primitives.
+Features theme-aware styling, smooth animations, and WCAG-compliant interactions.
+
+## Accessibility
+
+- **Keyboard Navigation:** Arrow keys navigate menu items, Enter/Space activates, Escape closes (WCAG 2.1.1)
+- **Focus Management:** Focus trapped within menu when open, returned to trigger on close (WCAG 2.4.3)
+- **Screen Readers:** Uses `role="menu"` and `role="menuitem"` for proper menu semantics (WCAG 4.1.3)
+- **ARIA Attributes:** Items marked with `data-highlighted` state for screen reader announcement
+- **Trigger Association:** Menu automatically associated with trigger button via Radix UI primitives
+- **Touch Targets:** All menu items meet minimum 44x44px touch target (WCAG 2.5.5)
+- **Color Contrast:** Menu text and backgrounds meet WCAG AA contrast ratio 4.5:1
+- **Motion:** Open/close animations respect `prefers-reduced-motion` settings
+
+## Example
+
+```tsx
+// Basic dropdown with icon items
+<DropdownGlass
+  trigger={
+    <button aria-label="Open menu">
+      <MoreVertical className="w-5 h-5" />
+    </button>
+  }
+  items={[
+    { label: 'Edit', icon: Edit, onClick: handleEdit },
+    { label: 'Delete', icon: Trash, onClick: handleDelete, danger: true }
+  ]}
+/>
+
+// Dropdown with dividers and alignment
+<DropdownGlass
+  trigger={<ButtonGlass>Actions</ButtonGlass>}
+  align="right"
+  items={[
+    { label: 'View', icon: Eye, onClick: () => navigate('/view') },
+    { label: 'Edit', icon: Edit, onClick: () => setEditMode(true) },
+    { divider: true },
+    { label: 'Archive', icon: Archive, onClick: handleArchive },
+    { divider: true },
+    { label: 'Delete', icon: Trash, onClick: handleDelete, danger: true }
+  ]}
+/>
+
+// Dropdown in table row (ensure trigger has accessible label)
+<DropdownGlass
+  trigger={
+    <button aria-label={`Actions for ${user.name}`}>
+      <MoreHorizontal />
+    </button>
+  }
+  items={[
+    { label: 'View Profile', onClick: () => viewProfile(user.id) },
+    { label: 'Send Message', onClick: () => sendMessage(user.id) }
+  ]}
+/>
+
+// Dropdown with keyboard-friendly trigger
+<DropdownGlass
+  trigger={
+    <ButtonGlass
+      icon={Settings}
+      variant="ghost"
+      aria-haspopup="menu"
+      aria-label="Settings menu"
+    >
+      Settings
+    </ButtonGlass>
+  }
+  items={[
+    { label: 'Preferences', icon: Sliders, onClick: () => navigate('/settings/preferences') },
+    { label: 'Security', icon: Lock, onClick: () => navigate('/settings/security') },
+    { divider: true },
+    { label: 'Log Out', icon: LogOut, onClick: handleLogout }
+  ]}
+/>
+
+// Advanced: Using Radix primitives directly (see component JSDoc for examples)
+```
+
+## Properties
+
+### trigger
+
+> `readonly` **trigger**: `ReactNode`
+
+Defined in: [src/components/glass/ui/dropdown-glass.tsx:209](https://github.com/Yhooi2/shadcn-glass-ui-library/blob/926c43a35b985ce0dee6d96ce88a1fc3d72f4d67/src/components/glass/ui/dropdown-glass.tsx#L209)
+
+***
+
+### items
+
+> `readonly` **items**: readonly [`DropdownItem`](DropdownItem.md)[]
+
+Defined in: [src/components/glass/ui/dropdown-glass.tsx:210](https://github.com/Yhooi2/shadcn-glass-ui-library/blob/926c43a35b985ce0dee6d96ce88a1fc3d72f4d67/src/components/glass/ui/dropdown-glass.tsx#L210)
+
+***
+
+### align?
+
+> `readonly` `optional` **align**: `"left"` \| `"right"`
+
+Defined in: [src/components/glass/ui/dropdown-glass.tsx:211](https://github.com/Yhooi2/shadcn-glass-ui-library/blob/926c43a35b985ce0dee6d96ce88a1fc3d72f4d67/src/components/glass/ui/dropdown-glass.tsx#L211)
+
+***
+
+### className?
+
+> `readonly` `optional` **className**: `string`
+
+Defined in: [src/components/glass/ui/dropdown-glass.tsx:212](https://github.com/Yhooi2/shadcn-glass-ui-library/blob/926c43a35b985ce0dee6d96ce88a1fc3d72f4d67/src/components/glass/ui/dropdown-glass.tsx#L212)

package/docs/api/interfaces/DropdownItem.md

@@ -0,0 +1,53 @@
+[**shadcn-glass-ui API Reference v1.0.7**](../README.md)
+
+***
+
+[shadcn-glass-ui API Reference](../globals.md) / DropdownItem
+
+# Interface: DropdownItem
+
+Defined in: [src/components/glass/ui/dropdown-glass.tsx:115](https://github.com/Yhooi2/shadcn-glass-ui-library/blob/926c43a35b985ce0dee6d96ce88a1fc3d72f4d67/src/components/glass/ui/dropdown-glass.tsx#L115)
+
+## Properties
+
+### label?
+
+> `readonly` `optional` **label**: `string`
+
+Defined in: [src/components/glass/ui/dropdown-glass.tsx:116](https://github.com/Yhooi2/shadcn-glass-ui-library/blob/926c43a35b985ce0dee6d96ce88a1fc3d72f4d67/src/components/glass/ui/dropdown-glass.tsx#L116)
+
+***
+
+### icon?
+
+> `readonly` `optional` **icon**: `LucideIcon`
+
+Defined in: [src/components/glass/ui/dropdown-glass.tsx:117](https://github.com/Yhooi2/shadcn-glass-ui-library/blob/926c43a35b985ce0dee6d96ce88a1fc3d72f4d67/src/components/glass/ui/dropdown-glass.tsx#L117)
+
+***
+
+### onClick()?
+
+> `readonly` `optional` **onClick**: () => `void`
+
+Defined in: [src/components/glass/ui/dropdown-glass.tsx:118](https://github.com/Yhooi2/shadcn-glass-ui-library/blob/926c43a35b985ce0dee6d96ce88a1fc3d72f4d67/src/components/glass/ui/dropdown-glass.tsx#L118)
+
+#### Returns
+
+`void`
+
+***
+
+### danger?
+
+> `readonly` `optional` **danger**: `boolean`
+
+Defined in: [src/components/glass/ui/dropdown-glass.tsx:119](https://github.com/Yhooi2/shadcn-glass-ui-library/blob/926c43a35b985ce0dee6d96ce88a1fc3d72f4d67/src/components/glass/ui/dropdown-glass.tsx#L119)
+
+***
+
+### divider?
+
+> `readonly` `optional` **divider**: `boolean`
+
+Defined in: [src/components/glass/ui/dropdown-glass.tsx:120](https://github.com/Yhooi2/shadcn-glass-ui-library/blob/926c43a35b985ce0dee6d96ce88a1fc3d72f4d67/src/components/glass/ui/dropdown-glass.tsx#L120)