Button

import { Button } from "moduix";export function ButtonDemo() {  return <Button>Save Changes</Button>;}

import { Button } from "moduix";export function ButtonVariantsDemo() {  return (    <div>      <Button>Default</Button>      <Button variant="outline">Outline</Button>      <Button variant="secondary">Secondary</Button>      <Button variant="destructive">Destructive</Button>      <Button variant="destructive-outline">Destructive Outline</Button>      <Button variant="ghost">Ghost</Button>      <Button variant="link">Link</Button>    </div>  );}

import { Button, StarIcon } from "moduix";export function ButtonSizesDemo() {  return (    <div>      <Button size="xs">Extra-small</Button>      <Button size="sm">Small</Button>      <Button size="md">Medium</Button>      <Button size="lg">Large</Button>      <Button size="xl">Extra-large</Button>      <Button size="icon-sm" variant="outline" aria-label="Small favorite">        <StarIcon />      </Button>      <Button size="icon-md" variant="outline" aria-label="Favorite">        <StarIcon />      </Button>      <Button size="icon-lg" variant="outline" aria-label="Large favorite">        <StarIcon />      </Button>    </div>  );}

import { Button, PlusIcon, StarIcon, ArrowUpRightIcon } from "moduix";export function ButtonIconsDemo() {  return (    <div>      <Button>        <PlusIcon />        Create Item      </Button>      <Button size="icon-md" variant="outline" aria-label="Favorites">        <StarIcon />      </Button>      <Button variant="link">        Open Docs        <ArrowUpRightIcon />      </Button>    </div>  );}

import { Button } from "moduix";export function ButtonDisabledDemo() {  return (    <div>      <Button disabled>Disabled</Button>      <Button disabled focusableWhenDisabled variant="outline">        Focusable Disabled      </Button>    </div>  );}

import { Button } from "moduix";import { useState } from "react";export function LoadingButton() {  const [loading, setLoading] = useState(false);  return (    <Button      loading={loading}      loadingText="Saving"      onClick={() => {        setLoading(true);        setTimeout(() => setLoading(false), 1800);      }}    >      Save Changes    </Button>  );}

import { Button, StarIcon } from "moduix";export function CustomLoadingIndicatorDemo() {  return (    <Button      loading      loadingText="Syncing"      variant="outline"      loadingIndicator={<StarIcon className={styles.customLoadingIndicator} />}    >      Sync    </Button>  );}

.customLoadingIndicator {  width: 0.875rem;  height: 0.875rem;  animation: var(--animation-spin);}

import { Button } from "moduix";export function CustomStylesButtonDemo() {  return (    <Button      className={styles.customButton}      classNames={{        content: styles.customButtonContent,        loadingIndicator: styles.customLoadingIndicatorColor,        spinner: styles.customSpinner,      }}      loading      loadingText="Publishing"    >      Publish    </Button>  );}

.customButton {  border-color: var(--color-primary);  background-color: var(--color-primary);  color: var(--color-primary-foreground);  box-shadow: 0 1px 2px rgb(0 0 0 / 0.08);}.customButtonContent {  letter-spacing: 0.025em;}.customLoadingIndicatorColor {  color: var(--color-primary-foreground);}.customSpinner {  border-width: var(--border-width-md);}