New UI Components

packages/ui/components/switch.wrn

@@ -1,15 +1 @@
-// Toggle switch (an accessible checkbox styled as a switch).
-component Switch {
-  props {
-    name = ""
-    label = ""
-    class = ""
-  }
-  view {
-    <label class="wire-switch {class}">
-      <input type="checkbox" name="{name}" class="wire-switch__input" role="switch">
-      <span class="wire-switch__track"><span class="wire-switch__thumb"></span></span>
-      <span class="wire-switch__label"><slot>{label}</slot></span>
-    </label>
-  }
-}
+component Switch { props { id = "" name = "" label = "Switch" description = "" checked = false disabled = false } state on = checked view { <button id="{id}" type="button" role="switch" aria-checked="{on}" disabled="{disabled}" @click="on = !on" class="flex w-full items-center justify-between gap-4 rounded-xl p-2 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-500 disabled:opacity-50"><span><span class="block text-sm font-semibold">{label}</span><span data-show="description" class="text-sm text-slate-500">{description}</span></span><span class="relative inline-flex h-6 w-11 shrink-0 rounded-full transition {on ? 'bg-violet-600' : 'bg-slate-300 dark:bg-slate-700'}"><span class="absolute top-0.5 size-5 rounded-full bg-white shadow transition-transform {on ? 'translate-x-5' : 'translate-x-0.5'}"></span></span><input type="hidden" name="{name}" value="{on ? 'true' : 'false'}" /></button> } }