mirror of
https://github.com/Studio-Saelix/sencho.git
synced 2026-08-11 19:26:56 +00:00
SaelixCode
22e646286e
- fix(editor): Monaco compose↔.env tab switching no longer accumulates height
each switch — root cause was Monaco's position:static internal child creating
a circular CSS dependency with the CSS grid; broken by calling layout({0,0})
to force reflow before re-measuring. Added overflow-hidden to Monaco container.
- fix(ui): sliding tab indicator on compose/env tabs via motion.div layoutId
- fix(ui): sliding tab indicator on Notification tabs (Discord/Slack/Webhook)
- fix(ui): switch thumb now animates position (Radix data-attribute CSS translation)
- fix(ui): 'Always Local' tooltip no longer crashes — replaced animate-ui tooltip
(getStrictContext throws outside provider) with pure Radix primitives + CSS animation
- feat(settings): Auto theme option added (light/dark/auto with matchMedia listener)
- fix(ui): NodeManager dialog buttons no longer stuck together (DialogFooter gap)
- fix(ui): AlertDialog spring animation + Quick Clean button text wraps correctly
- fix(ui): Resources/App Store/Logs buttons toggle off on second click
34 lines
1.2 KiB
TypeScript
34 lines
1.2 KiB
TypeScript
'use client';
|
|
|
|
import * as React from 'react';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
import {
|
|
Switch as AnimateSwitch,
|
|
SwitchThumb,
|
|
type SwitchProps as AnimateSwitchProps,
|
|
} from '@/components/animate-ui/primitives/radix/switch';
|
|
|
|
type SwitchProps = Omit<AnimateSwitchProps, 'children'>;
|
|
|
|
const Switch = React.forwardRef<HTMLButtonElement, SwitchProps>(
|
|
({ className, ...props }, ref) => (
|
|
<AnimateSwitch
|
|
ref={ref}
|
|
className={cn(
|
|
'peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
|
|
className
|
|
)}
|
|
{...props}
|
|
>
|
|
<SwitchThumb
|
|
className="pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
|
|
pressedAnimation={{ scale: 1.15 }}
|
|
/>
|
|
</AnimateSwitch>
|
|
)
|
|
);
|
|
Switch.displayName = 'Switch';
|
|
|
|
export { Switch };
|