jettypod 4.4.118 → 4.4.121

package/apps/dashboard/components/settings/SettingsLayout.tsx

@@ -1,4 +1,3 @@
-'use client';
 
 import { useState, ReactNode } from 'react';
 
@@ -12,17 +11,17 @@ export function SettingsLayout({ tabs }: { tabs: SettingsTab[] }) {
   const [activeTab, setActiveTab] = useState(tabs[0]?.id || '');
 
   return (
-    <div className="flex gap-6">
+    <div className="flex gap-8">
       <nav className="w-48 flex-shrink-0">
-        <ul className="space-y-1">
+        <ul className="space-y-1.5">
           {tabs.map((tab) => (
             <li key={tab.id}>
               <button
                 onClick={() => setActiveTab(tab.id)}
-                className={`block w-full text-left px-3 py-2 text-sm font-medium rounded-lg ${
+                className={`block w-full text-left px-4 py-3 text-base font-medium rounded-lg ${
                   activeTab === tab.id
                     ? 'text-zinc-900 dark:text-zinc-100 bg-zinc-100 dark:bg-zinc-800'
-                    : 'text-zinc-600 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-zinc-800'
+                    : 'text-zinc-600 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors duration-200 ease-out'
                 }`}
               >
                 {tab.label}

package/apps/dashboard/components/ui/Button.tsx

@@ -0,0 +1,104 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '@/lib/utils';
+
+const primaryStyle: React.CSSProperties = {
+  backgroundColor: '#819D9F',
+  color: '#ffffff',
+  boxShadow: '0 1px 2px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(129, 157, 159, 0.2)',
+};
+
+const accentStyle: React.CSSProperties = {
+  backgroundColor: '#e57a44',
+  color: '#ffffff',
+  boxShadow: '0 1px 2px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(229, 122, 68, 0.2)',
+};
+
+const secondaryStyle: React.CSSProperties = {
+  border: '2px solid #18181b',
+};
+
+const destructiveStyle: React.CSSProperties = {
+  border: '2px solid #dc2626',
+};
+
+const buttonVariants = cva(
+  'inline-flex items-center justify-center font-medium transition-[color,background-color,border-color,opacity] duration-200 ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-400 dark:focus-visible:ring-zinc-500 focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:opacity-40 disabled:grayscale disabled:pointer-events-none cursor-pointer',
+  {
+    variants: {
+      variant: {
+        primary: 'rounded-xl text-white hover:brightness-105 active:scale-[0.98]',
+        secondary:
+          'rounded-xl text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800 active:scale-[0.98]',
+        ghost:
+          'rounded-xl text-zinc-600 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-zinc-800 hover:text-zinc-900 dark:hover:text-zinc-100 active:scale-[0.98]',
+        destructive:
+          'rounded-xl text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-950 active:scale-[0.98]',
+        accent:
+          'rounded-xl text-white hover:brightness-105 active:scale-[0.98]',
+        menu:
+          'w-full text-left rounded-lg text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-700',
+      },
+      size: {
+        xs: 'px-2.5 py-0.5 text-xs',
+        sm: 'px-4 py-2 text-sm',
+        default: 'px-5 py-3 text-base',
+        lg: 'py-4 px-8 text-base',
+        icon: 'p-1.5',
+      },
+    },
+    defaultVariants: {
+      variant: 'primary',
+      size: 'default',
+    },
+  }
+);
+
+interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  fullWidth?: boolean;
+  loading?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, fullWidth, loading, style, children, ...props }, ref) => {
+    const isPrimary = variant === 'primary' || variant === undefined;
+    const isAccent = variant === 'accent';
+    const isSecondary = variant === 'secondary';
+    const isDestructive = variant === 'destructive';
+    const inlineStyle = isPrimary
+      ? primaryStyle
+      : isAccent
+        ? accentStyle
+        : isSecondary
+          ? secondaryStyle
+          : isDestructive
+            ? destructiveStyle
+            : undefined;
+    return (
+      <button
+        className={cn(
+          buttonVariants({ variant, size }),
+          fullWidth && 'w-full',
+          className
+        )}
+        style={inlineStyle ? { ...inlineStyle, ...style } : style}
+        disabled={loading || props.disabled}
+        ref={ref}
+        {...props}
+      >
+        {loading ? (
+          <span className="flex items-center gap-2">
+            <span className="inline-block w-4 h-4 rounded-full animate-spin" style={{ border: '2px solid currentColor', borderTopColor: 'transparent' }} />
+            {children}
+          </span>
+        ) : children}
+      </button>
+    );
+  }
+);
+Button.displayName = 'Button';
+
+export { Button, buttonVariants };
+export type { ButtonProps };

package/apps/dashboard/components/ui/Input.tsx

@@ -0,0 +1,78 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '@/lib/utils';
+
+const baseStyle: React.CSSProperties = {
+  border: '2px solid #27272a',
+  borderRadius: '12px',
+};
+
+const focusStyle: React.CSSProperties = {
+  border: '2px solid #819D9F',
+  boxShadow: '0 0 0 3px rgba(129, 157, 159, 0.15)',
+  outline: 'none',
+};
+
+const errorBaseStyle: React.CSSProperties = {
+  border: '2px solid #dc2626',
+  borderRadius: '12px',
+};
+
+const errorFocusStyle: React.CSSProperties = {
+  border: '2px solid #dc2626',
+  boxShadow: '0 0 0 3px rgba(220, 38, 38, 0.15)',
+  outline: 'none',
+};
+
+const inputVariants = cva(
+  'w-full bg-white dark:bg-zinc-800 text-zinc-900 dark:text-zinc-100 placeholder:text-zinc-400 dark:placeholder:text-zinc-500 transition-[border-color] duration-200 ease-out focus:outline-none disabled:opacity-40 disabled:grayscale disabled:pointer-events-none',
+  {
+    variants: {
+      size: {
+        sm: 'px-4 py-2 text-sm',
+        default: 'px-6 py-5 text-base',
+        lg: 'px-8 py-6 text-lg',
+      },
+    },
+    defaultVariants: {
+      size: 'default',
+    },
+  }
+);
+
+interface InputProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>,
+    VariantProps<typeof inputVariants> {
+  error?: boolean;
+}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, size, error, style, onFocus, onBlur, ...props }, ref) => {
+    const [isFocused, setIsFocused] = React.useState(false);
+
+    const inlineStyle = error
+      ? isFocused ? { ...errorFocusStyle, ...style } : { ...errorBaseStyle, ...style }
+      : isFocused ? { ...focusStyle, ...style } : { ...baseStyle, ...style };
+
+    return (
+      <input
+        ref={ref}
+        className={cn(inputVariants({ size }), className)}
+        style={inlineStyle}
+        onFocus={(e) => {
+          setIsFocused(true);
+          onFocus?.(e);
+        }}
+        onBlur={(e) => {
+          setIsFocused(false);
+          onBlur?.(e);
+        }}
+        {...props}
+      />
+    );
+  }
+);
+Input.displayName = 'Input';
+
+export { Input, inputVariants };
+export type { InputProps };

package/apps/dashboard/components.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://ui.shadcn.com/schema.json",
   "style": "new-york",
-  "rsc": true,
+  "rsc": false,
   "tsx": true,
   "tailwind": {
     "config": "",