Toggle

import { useState } from "react";
import { Toggle } from '@peppermint-design/devreadykit';

export default function App() {
  const [enabled, setEnabled] = useState(false);

  return (
    <Toggle
      checked={enabled}
      onChange={setEnabled}
      label="Enable notifications"
    />
  );
}

import { Toggle } from '@peppermint-design/devreadykit';

export default function WithLabels() {
  return (
    <>
      <Toggle checked label="Enable dark mode" />
      <Toggle checked={false} label="Auto-save documents" />
    </>
  );
}

import { Toggle } from '@peppermint-design/devreadykit';

export default function DefaultIcons() {
  return (
    <>
      <Toggle checked label="Enable notifications" icons />
      <Toggle checked={false} label="Silent mode" icons />
    </>
  );
}

import { Toggle } from '@peppermint-design/devreadykit';
import { Check } from '@/assets/icons/check';
import { Close } from '@/assets/icons/close';

export default function CustomIcons() {
  return (
    <>
      <Toggle 
        checked
        label="Custom on icon"
        iconChecked={<Check />}
      />

      <Toggle 
        checked={false}
        label="Custom off icon"
        iconUnchecked={<Close />}
      />
    </>
  );
}

import { Toggle } from '@peppermint-design/devreadykit';

export default function DisabledToggles() {
  return (
    <>
      <Toggle checked label="Disabled on" disabled />
      <Toggle checked={false} label="Disabled off" disabled />
    </>
  );
}

import { Toggle } from '@peppermint-design/devreadykit';

export default function ReadOnlyToggles() {
  return (
    <>
      <Toggle checked label="Read only on" readOnly />
      <Toggle checked={false} label="Read only off" readOnly />
    </>
  );
}

import { useState } from "react";
import { Toggle } from '@peppermint-design/devreadykit';

export default function SettingsPanel() {
  const [settings, setSettings] = useState({
    darkMode: false,
    notifications: true,
    autoSave: false,
    analytics: true
  });

  const updateSetting = (key: string) => (checked: boolean) => {
    setSettings(prev => ({ ...prev, [key]: checked }));
  };

  return (
    <div className="space-y-4">
      <div className="space-y-3">
        <h3 className="font-medium">Preferences</h3>
        
        <Toggle
          checked={settings.darkMode}
          onChange={updateSetting('darkMode')}
          label="Dark mode"
          icons
        />
        
        <Toggle
          checked={settings.notifications}
          onChange={updateSetting('notifications')}
          label="Push notifications"
        />
        
        <Toggle
          checked={settings.autoSave}
          onChange={updateSetting('autoSave')}
          label="Auto-save documents"
        />
        
        <Toggle
          checked={settings.analytics}
          onChange={updateSetting('analytics')}
          label="Usage analytics"
        />
      </div>
    </div>
  );
}

import { useState } from "react";
import Toggle from "@/ui/toggle";

type Feature = {
    id: string;
    name: string;
    description: string;
    enabled: boolean;
};

const initialFeatures: Feature[] = [
    {
        id: "beta-chat",
        name: "Beta Chat",
        description: "Enable the new AI-powered chat experience for selected users.",
        enabled: true,
    },
    {
        id: "advanced-analytics",
        name: "Advanced Analytics",
        description: "Unlock detailed analytics dashboards for product managers.",
        enabled: false,
    },
];

export default function ToggleFeatureToggleExample() {
    const [features, setFeatures] = useState(initialFeatures);

    const toggleFeature = (id: string) => (checked: boolean) => {
        setFeatures((prev) =>
            prev.map((feature) =>
                feature.id === id ? { ...feature, enabled: checked } : feature,
            ),
        );
    };

    return (
        <div className="w-full max-w-2xl space-y-4">
            {features.map((feature) => (
                <div
                    key={feature.id}
                    className="flex items-center justify-between gap-4 rounded-md border border-gray-400 bg-white p-4"
                >
                    <div>
                        <h4 className="font-semibold text-black">{feature.name}</h4>
                        <p className="text-sm text-gray-600">{feature.description}</p>
                    </div>
                    <Toggle checked={feature.enabled} onChange={toggleFeature(feature.id)} icons />
                </div>
            ))}
        </div>
    );
}

import { useState, type FormEvent } from "react";
import { Toggle } from '@peppermint-design/devreadykit';

export default function NotificationForm() {
  const [formData, setFormData] = useState({
    email: '',
    sms: false,
    push: true,
    marketing: false
  });

  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    console.log('Notification preferences:', formData);
  };

  return (
    <form onSubmit={handleSubmit} className="space-y-4">
      <div>
        <label className="block text-sm font-medium mb-2" htmlFor="email">
          Email
        </label>
        <input
          id="email"
          type="email"
          value={formData.email}
          onChange={(e) => setFormData(prev => ({ ...prev, email: e.target.value }))}
          className="w-full px-3 py-2 border rounded"
          required
        />
      </div>
      
      <Toggle
        checked={formData.sms}
        onChange={(checked) => setFormData(prev => ({ ...prev, sms: checked }))}
        label="SMS notifications"
      />
      
      <Toggle
        checked={formData.push}
        onChange={(checked) => setFormData(prev => ({ ...prev, push: checked }))}
        label="Push notifications"
      />
      
      <Toggle
        checked={formData.marketing}
        onChange={(checked) => setFormData(prev => ({ ...prev, marketing: checked }))}
        label="Marketing emails"
      />
      
      <button type="submit" className="px-4 py-2 bg-blue-500 text-white rounded">
        Save Preferences
      </button>
    </form>
  );
}