open-index/open-npm huggingface dataset:
npm package: @qedrohenrique/create-collapsible-drawer
Description: ```bash npx @qedrohenrique/create-collapsible-drawer@latest ```
Latest version: 1.0.0

# create-collapsible-drawer

## Download

```bash
npx @qedrohenrique/create-collapsible-drawer@latest
```

## Example

```tsx
"use client";

import { Button } from "@/components/ui/button";
import CollapsibleDrawer from "@/components/custom/collapsible-drawer";

export default function MyPageComponent() {
  return (
    <CollapsibleDrawer side="right" size="md">
      <CollapsibleDrawer.Trigger asChild>
        <Button>Open Drawer</Button>
      </CollapsibleDrawer.Trigger>
      <CollapsibleDrawer.Content>
        <CollapsibleDrawer.Header>
          <CollapsibleDrawer.Title>Título da Drawer</CollapsibleDrawer.Title>
        </CollapsibleDrawer.Header>
        <CollapsibleDrawer.Body>
          <p>Conteúdo da drawer aqui...</p>
        </CollapsibleDrawer.Body>
        <CollapsibleDrawer.Footer>
          <Button>Salvar</Button>
        </CollapsibleDrawer.Footer>
      </CollapsibleDrawer.Content>
    </CollapsibleDrawer>
  );
}
```

## Props

### CollapsibleDrawer (Root)

- `side?: "right" | "left" | "top" | "bottom"` - Posição da drawer (padrão: "right")
- `size?: "sm" | "md" | "lg"` - Tamanho da drawer (padrão: "md")
- `defaultOpen?: boolean` - Estado inicial aberto/fechado
- `open?: boolean` - Controle externo do estado aberto/fechado
- `onOpenChange?: (open: boolean) => void` - Callback quando o estado muda
npm package: @qedrohenrique/create-expandable-timeline
Description: ```bash npx @qedrohenrique/create-expandable-timeline ```
Latest version: 1.0.0

# Create Expandable Timeline

## Download

```bash
npx @qedrohenrique/create-expandable-timeline
```

## Example

```typescript
const items = [
  {
    id: 1,
    date: "15 minutes ago",
    title: "Forked Repository",
    description:
      "Forked the repository to create a new branch for development.",
    icon: GitFork,
    defaultOpen: true,
  },
  {
    id: 2,
    date: "10 minutes ago",
    title: "Pull Request Submitted",
    description:
      "Submitted PR #342 with new feature implementation. Waiting for code review from team leads.",
    icon: GitPullRequest,
    defaultOpen: false,
  },
  {
    id: 3,
    date: "5 minutes ago",
    title: "Comparing Branches",
    description:
      "Received comments on PR. Minor adjustments needed in error handling and documentation.",
    icon: GitCompare,
    defaultOpen: false,
  },
  {
    id: 4,
    title: "Merged Branch",
    description:
      "Merged the feature branch into the main branch. Ready for deployment.",
    icon: GitMerge,
    defaultOpen: false,
  },
];

  const TimelineDemo = () => {
    return (
      <Timeline defaultValue={3}>
        {items.map((item) => (
          <TimelineItem
            key={item.id}
            step={item.id}
            className="group-data-[orientation=vertical]/timeline:ms-10 max-w-xs"
            defaultOpen={item.defaultOpen}
          >
            <TimelineHeader>
              <TimelineSeparator className="group-data-[orientation=vertical]/timeline:-left-7 group-data-[orientation=vertical]/timeline:h-[calc(100%-1.5rem-0.25rem)] group-data-[orientation=vertical]/timeline:translate-y-6.5" />
              <TimelineTitle className="mt-0.5">
                {item.title}
                <TimelineDate className="text-xs">{item.date}</TimelineDate>
              </TimelineTitle>
              <TimelineIndicator className="bg-primary/10 group-data-completed/timeline-item:bg-primary group-data-completed/timeline-item:text-primary-foreground flex size-6 items-center justify-center border-none group-data-[orientation=vertical]/timeline:-left-7">
                <item.icon size={14} />
              </TimelineIndicator>
            </TimelineHeader>
            <TimelineContent>
              {item.description}
            </TimelineContent>
          </TimelineItem>
        ))}
      </Timeline>
    );
  };
```


Isso copiará os arquivos de template e instalará as dependências necessárias.
npm package: @qedrohenrique/create-multi-select-animated
Description: ```bash npx @qedrohenrique/create-multi-select-animated@latest ```
Latest version: 1.0.7

# multi-select-animated

## Download

```bash
npx @qedrohenrique/create-multi-select-animated@latest
```

## Example

```tsx
"use client";

import MultiSelectAnimated, {
  ContentItem,
} from "@/components/multi-select-animated";

const OPTIONS: ContentItem[] = [
  { id: 1, content: "React" },
  { id: 2, content: "Vue" },
  { id: 3, content: "Svelte" },
  { id: 4, content: "Angular" },
  { id: 5, content: "Qwik" },
  { id: 6, content: "Solid" },
];

export default function MyPage() {
  const initialFrameworks = [OPTIONS[0], OPTIONS[2]];

  return (
    <div className="p-8 w-full max-w-xs mx-auto">
      <MultiSelectAnimated
        options={OPTIONS}
        initialSelectedItems={initialFrameworks}
        placeholder="Select frameworks"
        onSelect={(item) => console.log("selected:", item.content)}
        onDeselect={(item) => console.log("deselected:", item.content)}
      />
    </div>
  );
}
```
npm package: @qedrohenrique/create-statefull-button
Description: ```bash npx @qedrohenrique/create-statefull-button@latest ```
Latest version: 2.0.7

# create-statefull-button

## Download

```bash
npx @qedrohenrique/create-statefull-button@latest
```

## Example

```tsx
"use client";

import { useState } from "react";
import { StatefullButton } from "@/components/custom/statefull-button";

export default function MyPageComponent() {
  const [buttonState, setButtonState] =
    useState<React.ComponentProps<typeof StatefullButton>["phase"]>("idle");

  const handleClick = () => {
    setButtonState("loading");
    setTimeout(() => {
      setButtonState("success");
    }, 1000);
    setTimeout(() => {
      setButtonState("idle");
    }, 2000);
  };

  return (
    <StatefullButton phase={buttonState} onClick={handleClick}>
      Click me
    </StatefullButton>
  );
}
```