### Install Classy packages

Source: https://context7.com/djgrant/classy/llms.txt

Commands to install the necessary Classy packages for React or Solid.js projects using npm.

```bash
# For React projects
npm install @djgrant/classy-react

# For Solid.js projects
npm install @djgrant/classy-solid
```

--------------------------------

### Install Classy Packages

Source: https://github.com/djgrant/classy/blob/main/packages/core/README.md

Installation commands for the framework-specific vendor packages. Use npm to add the required dependency for your project.

```bash
npm install @djgrant/classy-react
```

```bash
npm install @djgrant/classy-solid
```

--------------------------------

### Create Styled Button Component with Classy React

Source: https://github.com/djgrant/classy/blob/main/packages/react/README.md

Demonstrates how to create a styled button component using the `classy` and `switchCase` utilities from `@djgrant/classy-react`. This example shows conditional styling based on a size prop.

```tsx
import { classy, switchCase } from "@djgrant/classy-react";

const Button = classy.button<{ $size: "sm" | "lg" }>((props) => [
  "font-semibold",
  switchCase(props.$size, {
    sm: "text-sm",
    lg: "text-lg",
  }),
]);
```

--------------------------------

### Manage Workspace Dependencies and Build

Source: https://github.com/djgrant/classy/blob/main/README.md

Commands used to initialize the monorepo, compile the packages, and execute the test suite. These commands are intended to be run from the root of the workspace using pnpm.

```sh
pnpm install
pnpm build
pnpm test
```

--------------------------------

### Create styled intrinsic elements with classy

Source: https://context7.com/djgrant/classy/llms.txt

Demonstrates how to use the classy factory to create styled HTML elements. It shows both static class application and dynamic styling using mapper functions, switchCase, and ifElse helpers with transient props.

```tsx
import { classy, switchCase, ifElse } from "@djgrant/classy-react";

// Static class names
const Container = classy.div("m-auto max-w-72 p-4");

// Dynamic class names with mapper function and typed transient props
const Button = classy.button<{ $variant: "primary" | "secondary"; $disabled?: boolean }>(
  (props) => [
    "px-4 py-2 rounded font-semibold transition-colors",
    switchCase(props.$variant, {
      primary: "bg-blue-500 text-white hover:bg-blue-600",
      secondary: "bg-gray-200 text-gray-800 hover:bg-gray-300",
      default: "bg-gray-100 text-gray-600",
    }),
    ifElse(props.$disabled, "opacity-50 cursor-not-allowed", "cursor-pointer"),
  ]
);
```

--------------------------------

### Wrap existing components with classy

Source: https://context7.com/djgrant/classy/llms.txt

Shows how to wrap existing components to add styling capabilities while preserving original props, static properties, and refs. The wrapper automatically handles the injection of computed class names.

```tsx
import { classy, ifElse } from "@djgrant/classy-react";

const BaseCard = (props: { className?: string; title: string; children: React.ReactNode }) => (
  <div className={props.className}>
    <h2 className="font-bold">{props.title}</h2>
    {props.children}
  </div>
);

const Card = classy(BaseCard)<{ $elevated?: boolean; $theme?: "light" | "dark" }>(
  (props) => [
    "p-6 rounded-lg border",
    ifElse(props.$elevated, "shadow-xl", "shadow-sm"),
    ifElse(props.$theme === "dark", "bg-gray-800 text-white", "bg-white text-gray-900"),
  ]
);
```

--------------------------------

### Polymorphic Component Rendering with `as` Prop in React

Source: https://context7.com/djgrant/classy/llms.txt

Demonstrates how to use the `as` prop with Classy React to change the underlying HTML element or React component rendered by a styled component. This allows for flexible component composition and prop validation against the new element type.

```tsx
import { classy, switchCase } from "@djgrant/classy-react";

const Button = classy.button<{ $size?: "sm" | "lg" }>((props) => [
  "font-semibold rounded transition-colors",
  switchCase(props.$size, {
    sm: "px-2 py-1 text-sm",
    lg: "px-6 py-3 text-lg",
    default: "px-4 py-2 text-base",
  }),
]);

function Navigation() {
  return (
    <nav className="flex gap-4">
      {/* Renders as <button> - standard button */}
      <Button $size="sm" onClick={() => console.log("clicked")}>
        Click Me
      </Button>

      {/* Renders as <a> - anchor element with href prop */}
      <Button as="a" $size="lg" href="/docs">
        Documentation
      </Button>

      {/* Renders as <Link> - Next.js Link component */}
      <Button as={Link} $size="sm" href="/about">
        About Us
      </Button>
    </nav>
  );
}
// Button renders as: <button class="font-semibold rounded transition-colors px-2 py-1 text-sm">Click Me</button>
// Link renders as:   <a class="font-semibold rounded transition-colors px-6 py-3 text-lg" href="/docs">Documentation</a>
```

--------------------------------

### Use Conditional Class Utilities

Source: https://github.com/djgrant/classy/blob/main/packages/core/README.md

Demonstrates the usage of ifElse and switchCase utilities from the core package. These functions help manage dynamic class name generation based on component state or props.

```typescript
import { ifElse, switchCase } from "@djgrant/classy-core";

switchCase("lg", {
  sm: "text-sm",
  lg: "text-lg",
  default: "text-base",
});

ifElse(true, "font-bold", "font-normal");
```

--------------------------------

### Create Styled Components in Solid.js

Source: https://context7.com/djgrant/classy/llms.txt

The Solid.js implementation of Classy allows for the creation of styled components using transient props and helper functions like switchCase and ifElse. It uses the 'class' attribute instead of 'className'.

```tsx
import { classy, switchCase, ifElse } from "@djgrant/classy-solid";

const Button = classy.button<{ $variant: "primary" | "ghost"; $size?: "sm" | "lg" }>(
  (props) => [
    "font-semibold rounded focus:outline-none focus:ring-2",
    switchCase(props.$variant, {
      primary: "bg-indigo-600 text-white hover:bg-indigo-700 focus:ring-indigo-500",
      ghost: "bg-transparent text-indigo-600 hover:bg-indigo-50 focus:ring-indigo-300",
    }),
    switchCase(props.$size, {
      sm: "px-3 py-1.5 text-sm",
      lg: "px-6 py-3 text-lg",
      default: "px-4 py-2 text-base",
    }),
  ]
);

const Card = classy.div<{ $interactive?: boolean }>((props) => [
  "bg-white rounded-lg shadow-md p-6",
  ifElse(props.$interactive, "cursor-pointer hover:shadow-lg transition-shadow"),
]);
```

--------------------------------

### Create Styled Button Component with Classy Solid

Source: https://github.com/djgrant/classy/blob/main/packages/solid/README.md

Defines a styled button component using classy-solid and switchCase for dynamic styling based on the '$size' prop. It imports necessary functions from '@djgrant/classy-solid'. The component accepts a '$size' prop which can be 'sm' or 'lg', and applies corresponding text size classes.

```tsx
import { classy, switchCase } from "@djgrant/classy-solid";

const Button = classy.button<{ $size: "sm" | "lg" }>((props) => [
  "font-semibold",
  switchCase(props.$size, {
    sm: "text-sm",
    lg: "text-lg",
  }),
]);
```

--------------------------------

### Generate Class Strings with classy.string

Source: https://context7.com/djgrant/classy/llms.txt

The classy.string utility generates a class name string directly, which is ideal for inline styling or applying styles to third-party components that do not support complex composition natively.

```tsx
import { classy } from "@djgrant/classy-react";
import { Dialog } from "@headlessui/react";

function Modal({ isOpen, onClose }) {
  return (
    <Dialog
      open={isOpen}
      onClose={onClose}
      className={classy.string("fixed inset-0 z-50", "flex items-center justify-center")}
    >
      <Dialog.Panel className={classy.string("bg-white rounded-xl p-6", "shadow-2xl max-w-md w-full")}>
        <Dialog.Title className={classy.string("text-lg font-bold", "text-gray-900")}>
          Confirm Action
        </Dialog.Title>
      </Dialog.Panel>
    </Dialog>
  );
}
```

--------------------------------

### Conditional Class Selection with `switchCase` in React

Source: https://context7.com/djgrant/classy/llms.txt

Explains the `switchCase` helper from Classy React, which simplifies applying different class names based on a given value. It supports a default fallback case for unmatched values, making it ideal for managing variant styles.

```tsx
import { classy, switchCase } from "@djgrant/classy-react";

const Badge = classy.span<{ $status: "success" | "warning" | "error" | "info" }>(
  (props) => [
    "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium",
    switchCase(props.$status, {
      success: "bg-green-100 text-green-800",
      warning: "bg-yellow-100 text-yellow-800",
      error: "bg-red-100 text-red-800",
      info: "bg-blue-100 text-blue-800",
      default: "bg-gray-100 text-gray-800", // Fallback for unknown values
    }),
  ]
);

const Heading = classy.h1<{ $size: "xs" | "sm" | "md" | "lg" | "xl" }>((props) => [
  "font-bold tracking-tight",
  switchCase(props.$size, {
    xs: "text-xs",
    sm: "text-sm",
    md: "text-base",
    lg: "text-lg",
    xl: "text-xl",
    default: "text-md",
  }),
]);

function StatusPanel() {
  return (
    <div className="space-y-2">
      <Heading $size="lg">System Status</Heading>
      <Badge $status="success">Operational</Badge>
      <Badge $status="warning">Degraded</Badge>
      <Badge $status="error">Outage</Badge>
    </div>
  );
}
```

--------------------------------

### Conditional Class Application with `ifElse` in React

Source: https://context7.com/djgrant/classy/llms.txt

Introduces the `ifElse` helper from Classy React for applying CSS classes conditionally based on a boolean expression. It returns the second argument (truthy case) or the third argument (falsy case), allowing for dynamic styling based on component state or props.

```tsx
import { classy, ifElse } from "@djgrant/classy-react";

const Input = classy.input<{ $hasError?: boolean; $isDisabled?: boolean }>(
  (props) => [
    "w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2",
    ifElse(props.$hasError, "border-red-500 focus:ring-red-500", "border-gray-300 focus:ring-blue-500"),
    ifElse(props.$isDisabled, "bg-gray-100 cursor-not-allowed opacity-60"),
  ]
);

const MenuItem = classy.li<{ $isActive?: boolean; $isHighlighted?: boolean }>(
  (props) => [
    "px-4 py-2 cursor-pointer",
    ifElse(props.$isActive, "bg-blue-500 text-white", "text-gray-700"),
    ifElse(props.$isHighlighted, "ring-2 ring-blue-300"),
  ]
);

function Form() {
  const [error, setError] = useState<string | null>(null);

  return (
    <form className="space-y-4">
      <Input
        type="email"
        placeholder="Enter email"
        $hasError={!!error}
        onChange={(e) => setError(validateEmail(e.target.value))}
      />
      <Input type="password" placeholder="Enter password" $isDisabled />
      {error && <p className="text-red-500 text-sm">{error}</p>}
    </form>
  );
}
```

--------------------------------

### Compose Class Names with cn

Source: https://context7.com/djgrant/classy/llms.txt

The cn function merges multiple class name inputs, including strings, arrays, and objects, into a single string. It automatically handles falsy values and is useful for dynamic class composition in React components.

```tsx
import { cn } from "@djgrant/classy-react";

// Basic string concatenation
cn("px-4", "py-2", "rounded");

// Conditional with objects
cn("btn", { "btn-primary": true, "btn-disabled": false, "btn-loading": true });

// Complex composition example
function Button({ variant, size, disabled, className, children }) {
  return (
    <button
      className={cn(
        "font-semibold rounded transition-colors",
        {
          "bg-blue-500 text-white": variant === "primary",
          "bg-gray-200 text-gray-800": variant === "secondary",
          "opacity-50 cursor-not-allowed": disabled,
        },
        size === "sm" && "px-2 py-1 text-sm",
        size === "lg" && "px-6 py-3 text-lg",
        className
      )}
      disabled={disabled}
    >
      {children}
    </button>
  );
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.