Checkbox Group

import { CheckboxGroup, CheckboxGroupItem } from "@codefast/ui/checkbox-group";
import { Label } from "@codefast/ui/label";
import { useState } from "react";

const PERMISSIONS = [
  { value: "read", label: "Read" },
  { value: "write", label: "Write" },
  { value: "delete", label: "Delete" },
  { value: "admin", label: "Admin", disabled: true },
];

export function CheckboxGroupPermissions() {
  const [selected, setSelected] = useState<Array<string>>(["read", "write"]);

  return (
    <div className="space-y-3">
      <CheckboxGroup className="gap-3" value={selected} onValueChange={(value) => setSelected(value ?? [])}>
        {PERMISSIONS.map(({ value, label, disabled }) => (
          <div key={value} className="flex items-center gap-2">
            <CheckboxGroupItem id={`perm-${value}`} value={value} {...(disabled ? { disabled } : {})} />
            <Label htmlFor={`perm-${value}`} className={disabled ? "opacity-50" : ""}>
              {label}
            </Label>
          </div>
        ))}
      </CheckboxGroup>
      <p className="text-xs text-ui-muted">
        Granted: <span className="font-medium text-ui-fg">{selected.join(", ") || "none"}</span>
      </p>
    </div>
  );
}

import { CheckboxGroup, CheckboxGroupItem } from "@codefast/ui/checkbox-group";
import { Label } from "@codefast/ui/label";
import { useState } from "react";

const DAYS = ["Mon", "Tue", "Wed", "Thu", "Fri"];

export function CheckboxGroupHorizontal() {
  const [days, setDays] = useState<Array<string>>(["Mon", "Wed", "Fri"]);

  return (
    <div className="space-y-3">
      <CheckboxGroup className="flex flex-wrap gap-4" value={days} onValueChange={(value) => setDays(value ?? [])}>
        {DAYS.map((day) => (
          <div key={day} className="flex items-center gap-2">
            <CheckboxGroupItem id={`day-${day}`} value={day} />
            <Label htmlFor={`day-${day}`}>{day}</Label>
          </div>
        ))}
      </CheckboxGroup>
      <p className="text-xs text-ui-muted">
        Working days: <span className="font-medium text-ui-fg">{days.join(", ") || "none"}</span>
      </p>
    </div>
  );
}

import { CheckboxGroup, CheckboxGroupItem } from "@codefast/ui/checkbox-group";
import { Label } from "@codefast/ui/label";
import { useState } from "react";

const NOTIFICATIONS = [
  { value: "comments", label: "Comments", hint: "When someone replies to your thread." },
  { value: "mentions", label: "Mentions", hint: "When you’re @-mentioned anywhere." },
  { value: "digest", label: "Weekly digest", hint: "A Monday summary of activity." },
];

export function CheckboxGroupWithDescriptions() {
  const [value, setValue] = useState<Array<string>>(["mentions"]);

  return (
    <CheckboxGroup className="w-full max-w-xs gap-4" value={value} onValueChange={(next) => setValue(next ?? [])}>
      {NOTIFICATIONS.map((item) => (
        <div key={item.value} className="flex items-start gap-3">
          <CheckboxGroupItem id={`notify-${item.value}`} value={item.value} className="mt-0.5" />
          <div className="grid gap-0.5">
            <Label htmlFor={`notify-${item.value}`}>{item.label}</Label>
            <p className="text-xs text-ui-muted">{item.hint}</p>
          </div>
        </div>
      ))}
    </CheckboxGroup>
  );
}