mirrors/raycast-linux
1
0
Fork 0
mirror of https://github.com/ByteAtATime/raycast-linux.git synced 2025-08-31 03:07:23 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

fix(switch): update switch

Browse source
This commit is contained in:
ByteAtATime 2025-07-06 09:37:28 -07:00
parent 828be15da3
commit 018ee79280
No known key found for this signature in database
4 changed files with 6 additions and 62 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/lib/components/ui/switch/index.ts
View file

@ -1,7 +1,7 @@
import Root from './switch.svelte';
import Root from "./switch.svelte";
export {
Root,
//
Root as Switch
Root as Switch,
};

39
src/lib/components/ui/switch/root.svelte
View file

@ -1,39 +0,0 @@
<script lang="ts">
import { createToggleGroup, type CreateToggleGroupProps } from '@melt-ui/svelte';
import { get, writable } from 'svelte/store';
type $$Props = CreateToggleGroupProps & {
checked?: boolean;
onCheckedChange?: (checked: boolean) => void;
};
let { checked, onCheckedChange, ...rest }: $$Props = $props();
const value = writable(checked ? 'on' : 'off');
$effect(() => {
if (checked !== undefined && get(value) !== (checked ? 'on' : 'off')) {
value.set(checked ? 'on' : 'off');
}
});
const { elements } = createToggleGroup({
...rest,
value,
onValueChange: (val) => {
onCheckedChange?.(val === 'on');
}
});
const { root } = elements;
</script>
<div
use:root
{...$$restProps}
role="switch"
aria-checked={checked}
data-state={checked ? 'checked' : 'unchecked'}
>
<slot />
</div>

8
src/lib/components/ui/switch/switch.svelte
View file

@ -1,6 +1,6 @@
<script lang="ts">
import { Switch as SwitchPrimitive } from 'bits-ui';
import { cn, type WithoutChildrenOrChild } from '$lib/utils.js';
import { Switch as SwitchPrimitive } from "bits-ui";
import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
let {
ref = $bindable(null),
@ -15,7 +15,7 @@
bind:checked
data-slot="switch"
class={cn(
'data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 peer inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
"data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 shadow-xs peer inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent outline-none transition-all focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
className
)}
{...restProps}
@ -23,7 +23,7 @@
<SwitchPrimitive.Thumb
data-slot="switch-thumb"
class={cn(
'bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0'
"bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
)}
/>
</SwitchPrimitive.Root>

17
src/lib/components/ui/switch/thumb.svelte
View file

@ -1,17 +0,0 @@
<script lang="ts">
import { tv } from 'tailwind-variants';
const switchThumbVariants = tv({
base: 'pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0',
variants: {},
defaultVariants: {}
});
type $$Props = {
class?: string;
};
let { class: className }: $$Props = $props();
</script>
<span class={switchThumbVariants({ class: className })} {...$$restProps} />