@trackany-device/components 1.0.0

package/src/components/ui/skeleton.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+
+import { cn } from '../../lib/utils';
+
+function Skeleton({ className, ...props }: React.ComponentProps<'div'>) {
+    return (
+        <div
+            data-slot="skeleton"
+            className={cn('bg-primary/10 animate-pulse rounded-md', className)}
+            {...props}
+        />
+    );
+}
+
+export { Skeleton };

package/src/components/ui/slider.tsx

@@ -0,0 +1,35 @@
+'use client';
+
+import * as React from 'react';
+import * as SliderPrimitive from '@radix-ui/react-slider';
+import { cn } from '../../lib/utils';
+
+function Slider({ className, children, ...props }: React.ComponentProps<typeof SliderPrimitive.Root>) {
+    return (
+        <SliderPrimitive.Root
+            data-slot="slider"
+            className={cn('relative flex h-4 w-full touch-none select-none items-center', className)}
+            {...props}
+        >
+            <SliderPrimitive.Track className="relative h-1.5 w-full overflow-hidden rounded-full bg-accent">
+                <SliderPrimitive.Range className="absolute h-full bg-primary" />
+            </SliderPrimitive.Track>
+            {children}
+        </SliderPrimitive.Root>
+    );
+}
+
+function SliderThumb({ className, ...props }: React.ComponentProps<typeof SliderPrimitive.Thumb>) {
+    return (
+        <SliderPrimitive.Thumb
+            data-slot="slider-thumb"
+            className={cn(
+                'box-content block size-4 shrink-0 cursor-pointer rounded-full border-[2px] border-primary bg-primary-foreground shadow-xs shadow-black/5 outline-hidden focus:outline-hidden',
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+export { Slider, SliderThumb };

package/src/components/ui/sonner.tsx

@@ -0,0 +1,28 @@
+'use client';
+import { useFlashToast } from '../../hooks/use-flash-toast';
+import { useAppearance } from '../../hooks/use-appearance';
+import { Toaster as Sonner, type ToasterProps } from 'sonner';
+
+function Toaster({ ...props }: ToasterProps) {
+    const { appearance } = useAppearance();
+
+    useFlashToast();
+
+    return (
+        <Sonner
+            theme={appearance}
+            className="toaster group"
+            position="bottom-right"
+            style={
+                {
+                    '--normal-bg': 'var(--popover)',
+                    '--normal-text': 'var(--popover-foreground)',
+                    '--normal-border': 'var(--border)',
+                } as React.CSSProperties
+            }
+            {...props}
+        />
+    );
+}
+
+export { Toaster };