@shellui/core 0.0.4

package/src/components/ViewRoute.tsx

@@ -0,0 +1,47 @@
+import { useMemo } from 'react';
+import { Navigate, useLocation } from 'react-router';
+import { ContentView } from './ContentView';
+import type { NavigationItem } from '../features/config/types';
+
+interface ViewRouteProps {
+  navigation: NavigationItem[];
+}
+
+export const ViewRoute = ({ navigation }: ViewRouteProps) => {
+  const location = useLocation();
+  const pathname = location.pathname;
+
+  const navItem = useMemo(() => {
+    return navigation.find((item) => {
+      const pathPrefix = `/${item.path}`;
+      return pathname === pathPrefix || pathname.startsWith(`${pathPrefix}/`);
+    });
+  }, [navigation, pathname]);
+
+  if (!navItem) {
+    return (
+      <Navigate
+        to="/"
+        replace
+      />
+    );
+  }
+  // Calculate the relative path from the navItem.path
+  // e.g. if item.path is "docs" and pathname is "/docs/intro", subPath is "intro"
+  const pathPrefix = `/${navItem.path}`;
+  const subPath = pathname.length > pathPrefix.length ? pathname.slice(pathPrefix.length + 1) : '';
+
+  // Construct the final URL for the iframe
+  let finalUrl = navItem.url;
+  if (subPath) {
+    const baseUrl = navItem.url.endsWith('/') ? navItem.url : `${navItem.url}/`;
+    finalUrl = `${baseUrl}${subPath}`;
+  }
+  return (
+    <ContentView
+      url={finalUrl}
+      pathPrefix={navItem.path}
+      navItem={navItem}
+    />
+  );
+};

package/src/components/ui/alert-dialog.tsx

@@ -0,0 +1,181 @@
+import {
+  forwardRef,
+  type ElementRef,
+  type ComponentPropsWithoutRef,
+  type HTMLAttributes,
+} from 'react';
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '@/lib/utils';
+import { Z_INDEX } from '@/lib/z-index';
+import { Button, type ButtonProps } from '@/components/ui/button';
+
+const AlertDialog = AlertDialogPrimitive.Root;
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal;
+
+const AlertDialogOverlay = forwardRef<
+  ElementRef<typeof AlertDialogPrimitive.Overlay>,
+  ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Overlay
+    ref={ref}
+    data-dialog-overlay
+    className={cn('fixed inset-0 bg-[hsl(var(--background)/0.8)] backdrop-blur-[1px]', className)}
+    style={{ zIndex: Z_INDEX.ALERT_DIALOG_OVERLAY }}
+    {...props}
+  />
+));
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
+
+const alertDialogContentVariants = cva(
+  'fixed left-[50%] top-[50%] grid w-full min-w-0 max-w-[calc(100vw-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background py-6 shadow-lg box-border overflow-hidden sm:rounded-lg',
+  {
+    variants: {
+      size: {
+        default: 'max-w-lg',
+        sm: 'max-w-sm',
+      },
+    },
+    defaultVariants: {
+      size: 'default',
+    },
+  },
+);
+
+interface AlertDialogContentProps
+  extends
+    ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>,
+    VariantProps<typeof alertDialogContentVariants> {}
+
+const AlertDialogContent = forwardRef<
+  ElementRef<typeof AlertDialogPrimitive.Content>,
+  AlertDialogContentProps
+>(({ className, size = 'default', children, style, ...props }, ref) => (
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogPrimitive.Content
+      ref={ref}
+      data-dialog-content
+      className={cn(alertDialogContentVariants({ size }), 'group', className)}
+      data-size={size}
+      style={{ zIndex: Z_INDEX.ALERT_DIALOG_CONTENT, ...style }}
+      {...props}
+    >
+      {children}
+    </AlertDialogPrimitive.Content>
+  </AlertDialogPortal>
+));
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
+
+const AlertDialogHeader = ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      'flex flex-col px-6 space-y-2 text-left group-data-[size=sm]:items-center group-data-[size=sm]:text-center',
+      className,
+    )}
+    {...props}
+  />
+);
+AlertDialogHeader.displayName = 'AlertDialogHeader';
+
+const AlertDialogMedia = ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      'flex size-10 shrink-0 items-center justify-center rounded-lg mb-4 [&>svg]:size-5',
+      className,
+    )}
+    {...props}
+  />
+);
+AlertDialogMedia.displayName = 'AlertDialogMedia';
+
+const AlertDialogFooter = ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      'flex w-full min-w-full flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
+      '-mb-6 mt-2 border-t border-border bg-muted/50 px-6 py-3 sm:rounded-b-lg',
+      '[&_button]:h-8 [&_button]:text-xs [&_button]:px-3',
+      'group-data-[size=sm]:flex-row group-data-[size=sm]:gap-2',
+      'group-data-[size=sm]:[&>*:not(:only-child)]:min-w-0 group-data-[size=sm]:[&>*:not(:only-child)]:flex-1',
+      className,
+    )}
+    {...props}
+  />
+);
+AlertDialogFooter.displayName = 'AlertDialogFooter';
+
+const AlertDialogTitle = forwardRef<
+  ElementRef<typeof AlertDialogPrimitive.Title>,
+  ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Title
+    ref={ref}
+    className={cn('text-lg font-semibold leading-none tracking-tight', className)}
+    {...props}
+  />
+));
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
+
+const AlertDialogDescription = forwardRef<
+  ElementRef<typeof AlertDialogPrimitive.Description>,
+  ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Description
+    ref={ref}
+    className={cn('text-sm text-muted-foreground', className)}
+    {...props}
+  />
+));
+AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
+
+const AlertDialogAction = forwardRef<
+  ElementRef<typeof AlertDialogPrimitive.Action>,
+  ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action> &
+    Pick<ButtonProps, 'variant' | 'size'>
+>(({ className, variant, size, ...props }, ref) => (
+  <AlertDialogPrimitive.Action asChild>
+    <Button
+      ref={ref}
+      variant={variant}
+      size={size}
+      className={className}
+      {...props}
+    />
+  </AlertDialogPrimitive.Action>
+));
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
+
+const AlertDialogCancel = forwardRef<
+  ElementRef<typeof AlertDialogPrimitive.Cancel>,
+  ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel> &
+    Pick<ButtonProps, 'variant' | 'size'>
+>(({ className, variant, size, ...props }, ref) => (
+  <AlertDialogPrimitive.Cancel asChild>
+    <Button
+      ref={ref}
+      variant={variant}
+      size={size}
+      className={className}
+      {...props}
+    />
+  </AlertDialogPrimitive.Cancel>
+));
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogMedia,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+};

package/src/components/ui/breadcrumb.tsx

@@ -0,0 +1,155 @@
+import {
+  forwardRef,
+  type ComponentPropsWithoutRef,
+  type ComponentProps,
+  type ReactNode,
+} from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cn } from '@/lib/utils';
+
+const Breadcrumb = forwardRef<
+  HTMLElement,
+  ComponentPropsWithoutRef<'nav'> & {
+    separator?: ReactNode;
+  }
+>(({ ...props }, ref) => (
+  <nav
+    ref={ref}
+    aria-label="breadcrumb"
+    {...props}
+  />
+));
+Breadcrumb.displayName = 'Breadcrumb';
+
+const BreadcrumbList = forwardRef<HTMLOListElement, ComponentPropsWithoutRef<'ol'>>(
+  ({ className, ...props }, ref) => (
+    <ol
+      ref={ref}
+      className={cn(
+        'flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5',
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+BreadcrumbList.displayName = 'BreadcrumbList';
+
+const BreadcrumbItem = forwardRef<HTMLLIElement, ComponentPropsWithoutRef<'li'>>(
+  ({ className, ...props }, ref) => (
+    <li
+      ref={ref}
+      className={cn('inline-flex items-center gap-1.5', className)}
+      {...props}
+    />
+  ),
+);
+BreadcrumbItem.displayName = 'BreadcrumbItem';
+
+const BreadcrumbLink = forwardRef<
+  HTMLAnchorElement,
+  ComponentPropsWithoutRef<'a'> & {
+    asChild?: boolean;
+  }
+>(({ asChild, className, ...props }, ref) => {
+  const Comp = asChild ? Slot : 'a';
+
+  return (
+    <Comp
+      ref={ref}
+      className={cn('transition-colors hover:text-foreground', className)}
+      {...props}
+    />
+  );
+});
+BreadcrumbLink.displayName = 'BreadcrumbLink';
+
+const BreadcrumbPage = forwardRef<HTMLSpanElement, ComponentPropsWithoutRef<'span'>>(
+  ({ className, ...props }, ref) => (
+    <span
+      ref={ref}
+      role="link"
+      aria-disabled="true"
+      aria-current="page"
+      className={cn('font-normal text-foreground', className)}
+      {...props}
+    />
+  ),
+);
+BreadcrumbPage.displayName = 'BreadcrumbPage';
+
+const BreadcrumbSeparator = ({ children, className, ...props }: ComponentProps<'li'>) => (
+  <li
+    role="presentation"
+    aria-hidden="true"
+    className={cn('[&>svg]:size-3.5', className)}
+    {...props}
+  >
+    {children ?? (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <polyline points="9 18 15 12 9 6" />
+      </svg>
+    )}
+  </li>
+);
+BreadcrumbSeparator.displayName = 'BreadcrumbSeparator';
+
+const BreadcrumbEllipsis = ({ className, ...props }: ComponentProps<'span'>) => (
+  <span
+    role="presentation"
+    aria-hidden="true"
+    className={cn('flex h-9 w-9 items-center justify-center', className)}
+    {...props}
+  >
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className="h-4 w-4"
+    >
+      <circle
+        cx="12"
+        cy="12"
+        r="1"
+      />
+      <circle
+        cx="19"
+        cy="12"
+        r="1"
+      />
+      <circle
+        cx="5"
+        cy="12"
+        r="1"
+      />
+    </svg>
+    <span className="sr-only">More</span>
+  </span>
+);
+BreadcrumbEllipsis.displayName = 'BreadcrumbEllipsis';
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+};

package/src/components/ui/button-group.tsx

@@ -0,0 +1,52 @@
+import {
+  forwardRef,
+  Children,
+  isValidElement,
+  cloneElement,
+  type HTMLAttributes,
+  type ReactNode,
+  type ReactElement,
+} from 'react';
+import { cn } from '@/lib/utils';
+
+export interface ButtonGroupProps extends HTMLAttributes<HTMLDivElement> {
+  children: ReactNode;
+}
+
+const ButtonGroup = forwardRef<HTMLDivElement, ButtonGroupProps>(
+  ({ className, children, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn('inline-flex rounded-md', className)}
+        role="group"
+        {...props}
+      >
+        {Children.map(children, (child, index) => {
+          if (isValidElement(child)) {
+            const isFirst = index === 0;
+            const isLast = index === Children.count(children) - 1;
+
+            return cloneElement(child as ReactElement<Record<string, unknown>>, {
+              className: cn(
+                // Remove rounded corners from all buttons
+                'rounded-none',
+                // First button: rounded left only (uses theme radius)
+                isFirst && 'rounded-l-md',
+                // Last button: rounded right only (uses theme radius)
+                isLast && 'rounded-r-md',
+                // Remove left border from all except first, using theme border color
+                !isFirst && 'border-l-0 -ml-px',
+                (child as ReactElement<{ className?: string }>).props.className,
+              ),
+            });
+          }
+          return child;
+        })}
+      </div>
+    );
+  },
+);
+ButtonGroup.displayName = 'ButtonGroup';
+
+export { ButtonGroup };

package/src/components/ui/button.tsx

@@ -0,0 +1,51 @@
+import { forwardRef, type ButtonHTMLAttributes } from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '@/lib/utils';
+
+const buttonVariants = cva(
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 cursor-pointer disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+        outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-10 px-4 py-2',
+        sm: 'h-9 rounded-md px-3',
+        lg: 'h-11 rounded-md px-8',
+        icon: 'h-10 w-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+);
+
+export interface ButtonProps
+  extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button';
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Button.displayName = 'Button';
+
+export { Button, buttonVariants };

package/src/components/ui/dialog.tsx

@@ -0,0 +1,160 @@
+import {
+  forwardRef,
+  useCallback,
+  Children,
+  type ElementRef,
+  type ComponentPropsWithoutRef,
+  type ComponentProps,
+  type HTMLAttributes,
+} from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { cn } from '@/lib/utils';
+import { Z_INDEX } from '@/lib/z-index';
+
+const Dialog = DialogPrimitive.Root;
+
+const DialogTrigger = DialogPrimitive.Trigger;
+
+const DialogPortal = DialogPrimitive.Portal;
+
+const DialogClose = DialogPrimitive.Close;
+
+const DialogOverlay = forwardRef<
+  ElementRef<typeof DialogPrimitive.Overlay>,
+  ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    data-dialog-overlay
+    className={cn('fixed inset-0 bg-[hsl(var(--background)/0.8)] backdrop-blur-[1px]', className)}
+    style={{ zIndex: Z_INDEX.MODAL_OVERLAY }}
+    {...props}
+  />
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+interface DialogContentProps extends ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
+  /** When true, the default close (X) button is not rendered. Escape and overlay still close. */
+  hideCloseButton?: boolean;
+}
+
+const DialogContent = forwardRef<ElementRef<typeof DialogPrimitive.Content>, DialogContentProps>(
+  ({ className, children, onPointerDownOutside, hideCloseButton, ...props }, ref) => {
+    const hasContent = Children.count(children) > 2;
+
+    const handlePointerDownOutside = useCallback(
+      (
+        event: Parameters<NonNullable<ComponentProps<typeof DialogPrimitive.Content>['onPointerDownOutside']>>[0],
+      ) => {
+        const target = event?.target as Element | null;
+        if (target?.closest?.('[data-sonner-toaster]')) {
+          event.preventDefault();
+        }
+        onPointerDownOutside?.(event);
+      },
+      [onPointerDownOutside],
+    );
+
+    return (
+      <DialogPortal>
+        <DialogOverlay />
+        <DialogPrimitive.Content
+          ref={ref}
+          data-dialog-content
+          data-has-content={hasContent}
+          className={cn(
+            'fixed left-[50%] top-[50%] grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-6 border bg-background px-6 pt-0 pb-0 shadow-lg sm:rounded-lg',
+            'data-[has-content=false]:gap-0 data-[has-content=false]:[&>[data-dialog-header]]:border-b-0 data-[has-content=false]:[&>[data-dialog-header]]:pb-0',
+            className,
+          )}
+          style={{ backgroundColor: 'hsl(var(--background))', zIndex: Z_INDEX.MODAL_CONTENT }}
+          onPointerDownOutside={handlePointerDownOutside}
+          {...props}
+        >
+          {children}
+          {!hideCloseButton && (
+            <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground cursor-pointer">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                className="h-4 w-4"
+              >
+                <path d="M18 6 6 18" />
+                <path d="m6 6 12 12" />
+              </svg>
+              <span className="sr-only">Close</span>
+            </DialogPrimitive.Close>
+          )}
+        </DialogPrimitive.Content>
+      </DialogPortal>
+    );
+  },
+);
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+const DialogHeader = ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => (
+  <div
+    data-dialog-header
+    className={cn(
+      '-mx-6 flex flex-col space-y-2.5 border-b border-border/60 px-6 pt-5 pb-4 text-left',
+      className,
+    )}
+    {...props}
+  />
+);
+DialogHeader.displayName = 'DialogHeader';
+
+const DialogFooter = ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      '-mx-6 mt-4 flex flex-col-reverse gap-2 rounded-b-lg border-t border-border bg-sidebar-background px-6 py-2 text-sidebar-foreground sm:flex-row sm:justify-end sm:space-x-2 [&_button]:h-8 [&_button]:px-3 [&_button]:text-xs',
+      className,
+    )}
+    {...props}
+  />
+);
+DialogFooter.displayName = 'DialogFooter';
+
+const DialogTitle = forwardRef<
+  ElementRef<typeof DialogPrimitive.Title>,
+  ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn('text-lg font-semibold leading-none tracking-tight', className)}
+    {...props}
+  />
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+const DialogDescription = forwardRef<
+  ElementRef<typeof DialogPrimitive.Description>,
+  ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn('text-sm text-muted-foreground', className)}
+    {...props}
+  />
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogClose,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+};