create-stitchkit 0.1.0

package/template/packages/frontend/src/components/ui/select.tsx

@@ -0,0 +1,240 @@
+'use client';
+
+/**
+ * Select - Dropdown компонент
+ *
+ * Составные части: Select, SelectTrigger, SelectContent, SelectItem, SelectGroup, SelectLabel, SelectSeparator
+ * Варианты trigger: default, outline
+ * Размеры: sm, md
+ *
+ * Powered by Radix UI Select & CVA
+ */
+
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { IconCheck, IconChevronDown, IconChevronUp } from '@tabler/icons-react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { type ComponentPropsWithoutRef, type ComponentRef, forwardRef } from 'react';
+import { cn } from '@/lib/utils';
+
+// ==========================================================================
+// Root & Value
+// ==========================================================================
+
+const Select = SelectPrimitive.Root;
+const SelectValue = SelectPrimitive.Value;
+
+// ==========================================================================
+// Group & Label
+// ==========================================================================
+
+const SelectGroup = SelectPrimitive.Group;
+
+const SelectLabel = forwardRef<
+  ComponentRef<typeof SelectPrimitive.Label>,
+  ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn('px-3 py-1.5 text-xs text-muted-foreground', className)}
+    {...props}
+  />
+));
+SelectLabel.displayName = 'SelectLabel';
+
+// ==========================================================================
+// Separator
+// ==========================================================================
+
+const SelectSeparator = forwardRef<
+  ComponentRef<typeof SelectPrimitive.Separator>,
+  ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn('-mx-1 my-1 h-px bg-border', className)}
+    {...props}
+  />
+));
+SelectSeparator.displayName = 'SelectSeparator';
+
+// ==========================================================================
+// Trigger Styles
+// ==========================================================================
+
+const selectTriggerVariants = cva(
+  'flex items-center justify-between gap-2 text-foreground transition-colors cursor-pointer outline-hidden disabled:opacity-50 disabled:cursor-not-allowed data-[placeholder]:text-muted-foreground',
+  {
+    variants: {
+      variant: {
+        default: 'bg-muted hover:bg-muted/80',
+        outline: 'border border-border bg-transparent hover:bg-muted',
+        ghost: 'bg-transparent text-muted-foreground hover:bg-muted/50 hover:text-foreground',
+      },
+      size: {
+        sm: 'h-8 px-3 text-sm rounded-lg',
+        md: 'h-10 px-4 text-sm rounded-xl',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'md',
+    },
+  },
+);
+
+// ==========================================================================
+// Trigger
+// ==========================================================================
+
+interface SelectTriggerProps
+  extends ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>,
+    VariantProps<typeof selectTriggerVariants> {}
+
+const SelectTrigger = forwardRef<
+  ComponentRef<typeof SelectPrimitive.Trigger>,
+  SelectTriggerProps
+>(({ className, variant, size, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(selectTriggerVariants({ variant, size, className }))}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon>
+      <IconChevronDown className='h-3 w-3 text-muted-foreground' />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+));
+SelectTrigger.displayName = 'SelectTrigger';
+
+// ==========================================================================
+// Content Styles
+// ==========================================================================
+
+const selectContentVariants = cva(
+  [
+    'relative z-50 max-h-[var(--radix-select-content-available-height)] min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-xl shadow-lg',
+    'data-[state=open]:animate-in data-[state=closed]:animate-out',
+    'fade-in-0 fade-out-0 zoom-in-95 zoom-out-95',
+    'duration-200',
+  ],
+  {
+    variants: {
+      variant: {
+        default: 'border border-border bg-background text-foreground',
+        glass: 'border border-border text-foreground bg-background/80 backdrop-blur-sm',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+);
+
+// ==========================================================================
+// Content
+// ==========================================================================
+
+const SelectScrollUpButton = forwardRef<
+  ComponentRef<typeof SelectPrimitive.ScrollUpButton>,
+  ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn('flex cursor-default items-center justify-center py-1', className)}
+    {...props}
+  >
+    <IconChevronUp className='h-4 w-4' stroke={2} />
+  </SelectPrimitive.ScrollUpButton>
+));
+SelectScrollUpButton.displayName = 'SelectScrollUpButton';
+
+const SelectScrollDownButton = forwardRef<
+  ComponentRef<typeof SelectPrimitive.ScrollDownButton>,
+  ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn('flex cursor-default items-center justify-center py-1', className)}
+    {...props}
+  >
+    <IconChevronDown className='h-4 w-4' stroke={2} />
+  </SelectPrimitive.ScrollDownButton>
+));
+SelectScrollDownButton.displayName = 'SelectScrollDownButton';
+
+interface SelectContentProps
+  extends ComponentPropsWithoutRef<typeof SelectPrimitive.Content>,
+    VariantProps<typeof selectContentVariants> {}
+
+const SelectContent = forwardRef<
+  ComponentRef<typeof SelectPrimitive.Content>,
+  SelectContentProps
+>(({ className, children, position = 'popper', variant, ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(selectContentVariants({ variant }), className)}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          'p-1',
+          position === 'popper' &&
+            'h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width)',
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+));
+SelectContent.displayName = 'SelectContent';
+
+// ==========================================================================
+// Item
+// ==========================================================================
+
+const SelectItem = forwardRef<
+  ComponentRef<typeof SelectPrimitive.Item>,
+  ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      'relative flex w-full cursor-pointer select-none items-center rounded-lg py-2 pl-3 pr-8 text-sm outline-hidden',
+      'focus:bg-muted',
+      'data-disabled:pointer-events-none data-disabled:opacity-50',
+      className,
+    )}
+    {...props}
+  >
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    <span className='absolute right-2 flex h-4 w-4 items-center justify-center'>
+      <SelectPrimitive.ItemIndicator>
+        <IconCheck className='h-4 w-4' stroke={2} />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+  </SelectPrimitive.Item>
+));
+SelectItem.displayName = 'SelectItem';
+
+// ==========================================================================
+// Exports
+// ==========================================================================
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+};

package/template/packages/frontend/src/components/ui/sidebar.tsx

@@ -0,0 +1,343 @@
+'use client';
+
+import {
+  IconLayoutSidebarLeftCollapseFilled,
+  IconLayoutSidebarLeftExpandFilled,
+  IconMenu2,
+  IconX,
+} from '@tabler/icons-react';
+import {
+  type ComponentType,
+  createContext,
+  type ReactNode,
+  useContext,
+  useEffect,
+  useState,
+} from 'react';
+import { Button } from '@/components/ui/button';
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerTitle,
+  DrawerTrigger,
+} from '@/components/ui/drawer';
+import { useMediaQuery } from '@/hooks';
+import { Link, usePathname } from '@/i18n/navigation';
+import { cn } from '@/lib/utils';
+
+// =============================================================================
+// Types
+// =============================================================================
+
+export interface SidebarNavItem {
+  name: string;
+  href: string;
+  icon: ComponentType<{ size?: number; className?: string }>;
+}
+
+export interface SidebarProps {
+  /** Navigation items */
+  navigation: SidebarNavItem[];
+  /** Logo/header content */
+  logo?: ReactNode;
+  /** Link for logo click */
+  logoHref?: string;
+  /** Footer content - render prop with collapsed state */
+  footer?: ReactNode | ((collapsed: boolean) => ReactNode);
+  /** Default collapsed state for desktop */
+  defaultCollapsed?: boolean;
+  /** Custom class for sidebar container */
+  className?: string;
+  /** Breakpoint for mobile/desktop switch */
+  mobileBreakpoint?: 'md' | 'lg';
+  /** Desktop placement */
+  variant?: 'attached' | 'floating';
+  /** Whether the desktop rail can collapse */
+  collapsible?: boolean;
+}
+
+const sidebarBreakpoints = {
+  md: {
+    query: '(min-width: 768px)',
+    mobileClassName: 'md:hidden',
+    desktopClassName: 'md:flex',
+  },
+  lg: {
+    query: '(min-width: 1024px)',
+    mobileClassName: 'lg:hidden',
+    desktopClassName: 'lg:flex',
+  },
+};
+
+// =============================================================================
+// Context
+// =============================================================================
+
+interface SidebarContextValue {
+  collapsed: boolean;
+  setCollapsed: (value: boolean) => void;
+}
+
+const SidebarContext = createContext<SidebarContextValue | null>(null);
+
+export function useSidebarContext() {
+  const context = useContext(SidebarContext);
+  if (!context) {
+    throw new Error('Sidebar components must be used within Sidebar');
+  }
+  return context;
+}
+
+// =============================================================================
+// Navigation Content (shared between mobile & desktop)
+// =============================================================================
+
+function NavigationContent({
+  navigation,
+  collapsed = false,
+  onNavigate,
+}: {
+  navigation: SidebarNavItem[];
+  collapsed?: boolean;
+  onNavigate?: () => void;
+}) {
+  const pathname = usePathname();
+
+  return (
+    <nav className='flex-1 space-y-1 p-2'>
+      {navigation.map((item) => {
+        // Exact match only - no startsWith to avoid /admin matching /admin/users
+        const isActive = pathname === item.href;
+
+        return (
+          <Link
+            key={item.name}
+            href={item.href}
+            onClick={onNavigate}
+            aria-current={isActive ? 'page' : undefined}
+            className={cn(
+              // Icon stays LEFT, never moves. Text fades out.
+              'flex min-w-0 items-start gap-3 overflow-hidden rounded-md px-3 py-2 text-sm transition-colors',
+              isActive
+                ? 'bg-muted text-foreground font-medium hover:bg-muted/80'
+                : 'text-muted-foreground hover:bg-muted/50 hover:text-foreground',
+            )}
+            title={collapsed ? item.name : undefined}
+          >
+            <item.icon size={18} className='mt-0.5 shrink-0' />
+            <span
+              className={cn(
+                'min-w-0 flex-1 break-words leading-5 transition-opacity duration-200',
+                collapsed && 'whitespace-nowrap',
+              )}
+              style={{
+                opacity: collapsed ? 0 : 1,
+              }}
+            >
+              {item.name}
+            </span>
+          </Link>
+        );
+      })}
+    </nav>
+  );
+}
+
+// =============================================================================
+// Mobile Sidebar (Drawer)
+// =============================================================================
+
+function MobileSidebar({
+  navigation,
+  logo,
+  logoHref,
+  footer,
+  mobileBreakpoint,
+}: Omit<SidebarProps, 'defaultCollapsed' | 'className'>) {
+  const [open, setOpen] = useState(false);
+  const breakpoint = mobileBreakpoint ?? 'lg';
+  const isDesktop = useMediaQuery(sidebarBreakpoints[breakpoint].query);
+
+  // Close drawer when screen becomes desktop
+  useEffect(() => {
+    if (isDesktop && open) {
+      setOpen(false);
+    }
+  }, [isDesktop, open]);
+
+  return (
+    <Drawer direction='left' open={open} onOpenChange={setOpen}>
+      <DrawerTrigger asChild>
+        <Button
+          aria-label='Open navigation'
+          variant='ghost'
+          size='icon'
+          className={cn(
+            'absolute left-3 top-2 z-50',
+            sidebarBreakpoints[breakpoint].mobileClassName,
+          )}
+        >
+          <IconMenu2 size={22} />
+        </Button>
+      </DrawerTrigger>
+      <DrawerContent className='w-64' aria-describedby={undefined}>
+        {/* Accessibility: hidden title for screen readers */}
+        <DrawerTitle className='sr-only'>Navigation Menu</DrawerTitle>
+        {/* Header */}
+        <div className='h-14 flex items-center justify-between px-3 border-b border-border/50'>
+          {logo && logoHref ? (
+            <Link
+              href={logoHref}
+              className='font-display font-semibold text-sm'
+              onClick={() => setOpen(false)}
+            >
+              {logo}
+            </Link>
+          ) : (
+            <span className='font-display font-semibold text-sm'>{logo}</span>
+          )}
+          <DrawerClose asChild>
+            <Button
+              aria-label='Close navigation'
+              variant='ghost'
+              size='icon'
+              className='h-8 w-8'
+            >
+              <IconX size={16} />
+            </Button>
+          </DrawerClose>
+        </div>
+
+        <NavigationContent navigation={navigation} onNavigate={() => setOpen(false)} />
+
+        {/* Footer */}
+        {footer && (
+          <div className='p-3'>{typeof footer === 'function' ? footer(false) : footer}</div>
+        )}
+      </DrawerContent>
+    </Drawer>
+  );
+}
+
+// =============================================================================
+// Desktop Sidebar
+// =============================================================================
+
+function DesktopSidebar({
+  navigation,
+  logo,
+  logoHref,
+  footer,
+  defaultCollapsed = false,
+  className,
+  mobileBreakpoint = 'lg',
+  variant = 'attached',
+  collapsible = true,
+}: SidebarProps) {
+  const [collapsed, setCollapsed] = useState(defaultCollapsed);
+
+  return (
+    <SidebarContext.Provider value={{ collapsed, setCollapsed }}>
+      <aside
+        className={cn(
+          'hidden flex-col transition-[width] duration-300',
+          sidebarBreakpoints[mobileBreakpoint].desktopClassName,
+          variant === 'floating'
+            ? 'absolute left-5 top-20 z-30 max-h-[calc(100dvh-6.5rem)] overflow-y-auto rounded-2xl border border-border bg-card/90 shadow-xl shadow-black/5 backdrop-blur'
+            : 'h-full shrink-0 border-r border-border/50 bg-muted/30',
+          collapsed && collapsible ? 'w-14' : 'w-60',
+          className,
+        )}
+      >
+        {/* Header */}
+        <div className='h-12 flex items-center px-3 border-b border-border/50 relative'>
+          {/* Logo - left, fades out */}
+          <div
+            className='transition-opacity duration-200'
+            style={{
+              opacity: collapsed ? 0 : 1,
+              pointerEvents: collapsed ? 'none' : 'auto',
+            }}
+          >
+            {logo && logoHref ? (
+              <Link
+                href={logoHref}
+                className='font-display font-semibold text-base whitespace-nowrap text-foreground'
+              >
+                {logo}
+              </Link>
+            ) : (
+              <span className='font-display font-semibold text-base whitespace-nowrap text-foreground'>
+                {logo}
+              </span>
+            )}
+          </div>
+          {/* Button - right when expanded, center when collapsed */}
+          {collapsible ? (
+            <Button
+              aria-label={collapsed ? 'Expand navigation' : 'Collapse navigation'}
+              variant='ghost'
+              size='icon'
+              onClick={() => setCollapsed(!collapsed)}
+              className='absolute right-3 h-8 w-8'
+            >
+              {collapsed ? (
+                <IconLayoutSidebarLeftExpandFilled size={16} />
+              ) : (
+                <IconLayoutSidebarLeftCollapseFilled size={16} />
+              )}
+            </Button>
+          ) : null}
+        </div>
+
+        <NavigationContent navigation={navigation} collapsed={collapsed} />
+
+        {/* Footer */}
+        {footer && (
+          <div className='p-2'>{typeof footer === 'function' ? footer(collapsed) : footer}</div>
+        )}
+      </aside>
+    </SidebarContext.Provider>
+  );
+}
+
+// =============================================================================
+// Main Sidebar Component
+// =============================================================================
+
+export function Sidebar(props: SidebarProps) {
+  return (
+    <>
+      <MobileSidebar {...props} />
+      <DesktopSidebar {...props} />
+    </>
+  );
+}
+
+// =============================================================================
+// Sidebar Footer Link (helper component)
+// =============================================================================
+
+export function SidebarFooterLink({
+  href,
+  icon: Icon,
+  children,
+  onClick,
+}: {
+  href: string;
+  icon: ComponentType<{ size?: number }>;
+  children: ReactNode;
+  onClick?: () => void;
+}) {
+  return (
+    <Link
+      href={href}
+      onClick={onClick}
+      className='flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground'
+    >
+      <Icon size={18} />
+      <span>{children}</span>
+    </Link>
+  );
+}

package/template/packages/frontend/src/components/ui/skeleton.tsx

@@ -0,0 +1,8 @@
+import type { HTMLAttributes } from 'react';
+import { cn } from '@/lib/utils';
+
+function Skeleton({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn('animate-pulse rounded-md bg-muted', className)} {...props} />;
+}
+
+export { Skeleton };

package/template/packages/frontend/src/components/ui/slider.tsx

@@ -0,0 +1,31 @@
+'use client';
+
+import * as SliderPrimitive from '@radix-ui/react-slider';
+import { type ComponentPropsWithoutRef, type ComponentRef, forwardRef } from 'react';
+import { cn } from '@/lib/utils';
+
+export const Slider = forwardRef<
+  ComponentRef<typeof SliderPrimitive.Root>,
+  ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
+>(({ className, 'aria-label': ariaLabel, ...props }, ref) => (
+  <SliderPrimitive.Root
+    ref={ref}
+    className={cn('relative flex w-full touch-none select-none items-center', className)}
+    {...props}
+  >
+    <SliderPrimitive.Track className='relative h-2 w-full grow overflow-hidden rounded-full bg-muted'>
+      <SliderPrimitive.Range className='absolute h-full bg-primary' />
+    </SliderPrimitive.Track>
+    <SliderPrimitive.Thumb
+      aria-label={ariaLabel}
+      className={cn(
+        'block h-5 w-5 rounded-full border-2 border-primary bg-background shadow-md',
+        'transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50',
+        'disabled:pointer-events-none disabled:opacity-50',
+        'cursor-grab active:cursor-grabbing',
+      )}
+    />
+  </SliderPrimitive.Root>
+));
+
+Slider.displayName = 'Slider';

package/template/packages/frontend/src/components/ui/slot-drum.tsx

@@ -0,0 +1,50 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import type { ReactNode } from 'react';
+
+const DEFAULT_ITEM_HEIGHT = 36; // h-9
+
+interface SlotDrumProps<T> {
+  items: T[];
+  activeIndex: number;
+  renderItem: (item: T, index: number) => ReactNode;
+  getItemKey: (item: T) => string;
+  itemHeight?: number;
+  className?: string;
+}
+
+export function SlotDrum<T>({
+  items,
+  activeIndex,
+  renderItem,
+  getItemKey,
+  itemHeight = DEFAULT_ITEM_HEIGHT,
+  className,
+}: SlotDrumProps<T>) {
+  return (
+    <div
+      className={`relative overflow-hidden ${className ?? ''}`}
+      style={{ height: itemHeight }}
+    >
+      <motion.div
+        animate={{ y: -activeIndex * itemHeight }}
+        transition={{
+          type: 'spring',
+          stiffness: 300,
+          damping: 30,
+        }}
+      >
+        {items.map((item, index) => (
+          <div
+            key={getItemKey(item)}
+            className='flex items-center'
+            style={{ height: itemHeight }}
+          >
+            {renderItem(item, index)}
+          </div>
+        ))}
+      </motion.div>
+    </div>
+  );
+}

package/template/packages/frontend/src/components/ui/spinner.tsx

@@ -0,0 +1,30 @@
+import { cn } from '@/lib/utils';
+
+export function Spinner({ className }: { className?: string }) {
+  return (
+    <svg
+      aria-label='Loading'
+      className={cn('size-4', className)}
+      viewBox='0 0 24 24'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+    >
+      <circle cx='12' cy='12' r='9' stroke='currentColor' strokeOpacity='0.2' strokeWidth='2' />
+      <path
+        d='M21 12a9 9 0 0 0-9-9'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeWidth='2'
+      >
+        <animateTransform
+          attributeName='transform'
+          type='rotate'
+          from='0 12 12'
+          to='360 12 12'
+          dur='1s'
+          repeatCount='indefinite'
+        />
+      </path>
+    </svg>
+  );
+}