Sheet

import { Sheet, Button, Input } from "@grassroot/ui-react";
 
const [open, setOpen] = React.useState(false);
 
<Button variant="secondary" onClick={() => setOpen(true)}>Edit service</Button>
<Sheet open={open} onOpenChange={setOpen} eyebrow="Service" title="ledger-api">
  <Input label="Replicas" mono defaultValue="6" />
</Sheet>

<script setup lang="ts">
import { ref } from "vue";
import { Button, Input, Sheet } from "@grassroot/ui-vue";
 
const open = ref(false);
</script>
 
<template>
  <Button variant="secondary" @click="open = true">Edit service</Button>
  <Sheet
    v-model:open="open"
    eyebrow="Service"
    title="ledger-api"
  >
    <Input label="Replicas" mono default-value="6" />
  </Sheet>
</template>

import { Component, signal } from "@angular/core";
import { GrassrootButton, GrassrootInput, GrassrootSheet } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-example",
  standalone: true,
  imports: [GrassrootButton, GrassrootInput, GrassrootSheet],
  template: `
    <grassroot-button
      variant="secondary"
      (click)="open.set(true)"
    >Edit service</grassroot-button>
    <grassroot-sheet
      [open]="open()"
      (openChange)="open.set($event)"
      eyebrow="Service"
      title="ledger-api"
    >
      <grassroot-input label="Replicas" [mono]="true" defaultValue="6" />
    </grassroot-sheet>
  `,
})
export class ExampleComponent {
  readonly open = signal(false);
}

<script lang="ts">
  import { Button, Input, Sheet } from "@grassroot/ui-svelte";
 
  let open = $state(false);
</script>
 
<Button variant="secondary" onClick={() => open = true}>Edit service</Button>
<Sheet
  open={open}
  onOpenChange={(next) => (open = next)}
  eyebrow="Service"
>{#snippet title()}ledger-api{/snippet}
 
  <Input label="Replicas" mono defaultValue="6" />
</Sheet>

import { createSignal } from "solid-js";
import { Button, Input, Sheet } from "@grassroot/ui-solid";
 
export function Example() {
  const [open, setOpen] = createSignal(false);
 
  return (
    <>
      <Button variant="secondary" onClick={() => setOpen(true)}>Edit service</Button>
      <Sheet
        open={open()}
        onOpenChange={setOpen}
        eyebrow="Service"
        title="ledger-api"
      >
        <Input label="Replicas" mono defaultValue="6" />
      </Sheet>
    </>
  );
}