cleaning

sparkle/package.json

@@ -100,7 +100,6 @@
     "@headlessui/react": "^1.7.19",
     "@radix-ui/react-aspect-ratio": "^1.1.0",
     "@radix-ui/react-checkbox": "^1.1.2",
-    "@radix-ui/react-context-menu": "^2.2.2",
     "@radix-ui/react-dialog": "^1.1.2",
     "@radix-ui/react-dropdown-menu": "^2.1.2",
     "@radix-ui/react-label": "^2.1.0",
@@ -109,7 +108,6 @@
     "@radix-ui/react-scroll-area": "^1.2.0",
     "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.0",
-    "@radix-ui/react-switch": "^1.1.1",
     "@radix-ui/react-tabs": "^1.1.1",
     "@radix-ui/react-tooltip": "^1.1.3",
     "@tanstack/react-table": "^8.13.0",
@@ -122,14 +120,8 @@
     "react-confetti": "^6.1.0",
     "react-dropdown-menu": "^0.0.2",
     "react-katex": "^3.0.1",
-    "react-resizable-panels": "^2.1.7",
-    "react-syntax-highlighter": "^15.6.1",
-    "rehype-katex": "^7.0.1",
-    "remark-directive": "^2.0.1",
-    "remark-gfm": "^3.0.1",
-    "remark-math": "^5.1.1",
     "react-markdown": "^8.0.7",
-    "react-resizable-panels": "^2.1.6",
+    "react-resizable-panels": "^2.1.7",
     "react-syntax-highlighter": "^15.6.1",
     "rehype-katex": "^7.0.1",
     "remark-directive": "^2.0.1",

sparkle/src/components/ScrollArea.tsx

@@ -11,20 +11,35 @@ export interface ScrollAreaProps
 
 const ScrollArea = React.forwardRef<
   React.ElementRef<typeof ScrollAreaPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
->(({ className, children, ...props }, ref) => (
-  <ScrollAreaPrimitive.Root
-    ref={ref}
-    className={cn("s-relative s-z-20 s-overflow-hidden", className)}
-    {...props}
-  >
-    <ScrollAreaPrimitive.Viewport className="s-h-full s-w-full s-rounded-[inherit]">
-      {children}
-    </ScrollAreaPrimitive.Viewport>
-    <ScrollBar />
-    <ScrollAreaPrimitive.Corner />
-  </ScrollAreaPrimitive.Root>
-));
+  ScrollAreaProps
+>(({ className, children, hideScrollBar = false, ...props }, ref) => {
+  const hasCustomScrollBar = useMemo(
+    () =>
+      React.Children.toArray(children).some(
+        (child) =>
+          React.isValidElement(child) &&
+          (child.type as typeof ScrollBar).displayName === ScrollBar.displayName
+      ),
+    [children]
+  );
+
+  const shouldHideDefaultScrollBar = hideScrollBar || hasCustomScrollBar;
+
+  return (
+    <ScrollAreaPrimitive.Root
+      ref={ref}
+      className={cn("s-relative s-z-20 s-overflow-hidden", className)}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Viewport className="s-h-full s-w-full s-rounded-[inherit]">
+        {children}
+      </ScrollAreaPrimitive.Viewport>
+      {!shouldHideDefaultScrollBar && <ScrollBar />}
+      <ScrollAreaPrimitive.Corner />
+    </ScrollAreaPrimitive.Root>
+  );
+});
+
 ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
 
 const scrollBarSizes = {
@@ -63,24 +78,45 @@ interface ScrollBarProps
 
 const ScrollBar = React.forwardRef<
   React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
-  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
->(({ className, orientation = "vertical", ...props }, ref) => (
-  <ScrollAreaPrimitive.ScrollAreaScrollbar
-    ref={ref}
-    orientation={orientation}
-    className={cn(
-      "s-flex s-touch-none s-select-none s-transition-colors",
-      orientation === "vertical" &&
-        "s-h-full s-w-3 s-border-l s-border-l-transparent s-px-[3px] s-py-3",
-      orientation === "horizontal" &&
-        "s-h-3 s-flex-col s-border-t s-border-t-transparent s-px-3 s-py-[3px]",
-      className
-    )}
-    {...props}
-  >
-    <ScrollAreaPrimitive.ScrollAreaThumb className="s-relative s-flex-1 s-rounded-full s-bg-muted-foreground/40" />
-  </ScrollAreaPrimitive.ScrollAreaScrollbar>
-));
+  ScrollBarProps
+>(
+  (
+    { className, orientation = "vertical", size = "compact", ...props },
+    ref
+  ) => {
+    const sizeConfig = scrollBarSizes[size];
+
+    return (
+      <ScrollAreaPrimitive.ScrollAreaScrollbar
+        ref={ref}
+        orientation={orientation}
+        className={cn(
+          "s-flex s-touch-none s-select-none hover:s-cursor-pointer",
+          orientation === "vertical" && [
+            "s-h-full s-border-l s-border-l-transparent",
+            sizeConfig.bar.vertical,
+            sizeConfig.padding.vertical,
+          ],
+          orientation === "horizontal" && [
+            "s-flex-col s-border-t s-border-t-transparent",
+            sizeConfig.bar.horizontal,
+            sizeConfig.padding.horizontal,
+          ],
+          className
+        )}
+        {...props}
+      >
+        <ScrollAreaPrimitive.ScrollAreaThumb
+          className={cn(
+            "s-relative s-flex-1 s-rounded-full s-transition-colors s-duration-200",
+            sizeConfig.thumb
+          )}
+        />
+      </ScrollAreaPrimitive.ScrollAreaScrollbar>
+    );
+  }
+);
+
 ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
 
 export { ScrollArea, ScrollBar };

sparkle/src/components/Sheet.tsx

@@ -66,27 +66,27 @@ const sheetVariants = cva(
 );
 
 interface SheetContentProps
-  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content> {}
+  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content> {
+  size?: SheetSizeType;
+  trapFocusScope?: boolean;
+  side?: SheetSideType;
+}
 
 const SheetContent = React.forwardRef<
   React.ElementRef<typeof SheetPrimitive.Content>,
   SheetContentProps
->(({ className, children, ...props }, ref) => (
+>(({ className, children, size, side, trapFocusScope, ...props }, ref) => (
   <SheetPortal>
     <SheetOverlay />
-    <SheetPrimitive.Content
-      ref={ref}
-      className={cn(
-        "s-fixed s-z-50 s-overflow-hidden s-bg-background s-transition s-ease-in-out data-[state=open]:s-animate-in data-[state=closed]:s-animate-out data-[state=closed]:s-duration-300 data-[state=open]:s-duration-500",
-        "s-flex s-flex-col",
-        "s-inset-y-0 s-right-0 s-h-full s-w-full data-[state=closed]:s-slide-out-to-right data-[state=open]:s-slide-in-from-right",
-        sizeClasses[size],
-        className
-      )}
-      {...props}
-    >
-      {children}
-    </SheetPrimitive.Content>
+    <FocusScope trapped={trapFocusScope} asChild>
+      <SheetPrimitive.Content
+        ref={ref}
+        className={cn(sheetVariants({ size, side }), className)}
+        {...props}
+      >
+        {children}
+      </SheetPrimitive.Content>
+    </FocusScope>
   </SheetPortal>
 ));
 SheetContent.displayName = SheetPrimitive.Content.displayName;
@@ -103,7 +103,7 @@ const SheetHeader = ({
 }: SheetHeaderProps) => (
   <div
     className={cn(
-      "s-z-50 s-flex s-flex-none s-flex-col s-gap-2 s-bg-background s-p-5 s-text-left s-shadow-tale",
+      "s-z-50 s-flex s-flex-none s-flex-col s-gap-2 s-bg-background s-p-5 s-text-left s-shadow-tale-white",
       className
     )}
     {...props}

sparkle/src/components/index.ts

@@ -31,23 +31,6 @@ export { default as ConfettiBackground } from "./ConfettiBackground";
 export { Container } from "./Container";
 export { ContentMessage } from "./ContentMessage";
 export { ContextItem } from "./ContextItem";
-export {
-  ContextMenu,
-  ContextMenuCheckboxItem,
-  ContextMenuContent,
-  ContextMenuGroup,
-  ContextMenuItem,
-  ContextMenuLabel,
-  ContextMenuPortal,
-  ContextMenuRadioGroup,
-  ContextMenuRadioItem,
-  ContextMenuSeparator,
-  ContextMenuShortcut,
-  ContextMenuSub,
-  ContextMenuSubContent,
-  ContextMenuSubTrigger,
-  ContextMenuTrigger,
-} from "./ContextMenu";
 export {
   ConversationContainer,
   ConversationMessage,
@@ -108,10 +91,6 @@ export {
   NewDialogTitle,
   NewDialogTrigger,
 } from "./NewDialog";
-  NavigationList,
-  NavigationListItem,
-  NavigationListLabel,
-} from "./NavigationList";
 export type { NotificationType } from "./Notification";
 export { Notification, useSendNotification } from "./Notification";
 export { Page } from "./Page";
@@ -148,37 +127,9 @@ export {
   SheetTitle,
   SheetTrigger,
 } from "./Sheet";
-export {
-  Sidebar,
-  SidebarContent,
-  SidebarFooter,
-  SidebarGroup,
-  SidebarGroupAction,
-  SidebarGroupContent,
-  SidebarGroupLabel,
-  SidebarHeader,
-  SidebarInput,
-  SidebarInset,
-  SidebarMenu,
-  SidebarMenuAction,
-  SidebarMenuBadge,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  SidebarMenuSkeleton,
-  SidebarMenuSub,
-  SidebarMenuSubButton,
-  SidebarMenuSubItem,
-  SidebarProvider,
-  SidebarRail,
-  SidebarSeparator,
-  SidebarTrigger,
-  useSidebar,
-} from "./Sidebar";
-export { Skeleton } from "./Skeleton";
 export { SliderToggle } from "./SliderToggle";
 export { default as Spinner } from "./Spinner";
 export { FlexSplitButton, SplitButton } from "./SplitButton";
-export { Switch } from "./Switch";
 export { Tabs, TabsContent, TabsList, TabsTrigger } from "./Tabs";
 export { TextArea } from "./TextArea";
 export {

sparkle/src/stories/Dropdown.stories.tsx

@@ -3,8 +3,6 @@ import type { Meta } from "@storybook/react";
 import React from "react";
 
 import {
-  Avatar,
-  Button,
   DropdownMenu,
   DropdownMenuCheckboxItem,
   DropdownMenuContent,
@@ -20,24 +18,27 @@ import {
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
-  ScrollArea,
-} from "@sparkle/components/";
+} from "@sparkle/components/Dropdown";
+import {
+  AnthropicLogo,
+  GithubLogo,
+  MistralLogo,
+  OpenaiLogo,
+} from "@sparkle/logo/platforms";
+
 import {
   ArrowDownCircleIcon,
+  Avatar,
+  Button,
   ChatBubbleBottomCenterPlusIcon,
   CloudArrowDownIcon,
   Cog6ToothIcon,
   LogoutIcon,
   MagicIcon,
+  ScrollArea,
   UserGroupIcon,
   UserIcon,
-} from "@sparkle/icons";
-import {
-  AnthropicLogo,
-  GithubLogo,
-  MistralLogo,
-  OpenaiLogo,
-} from "@sparkle/logo/platforms";
+} from "../index_with_tw_base";
 
 const meta = {
   title: "Primitives/Dropdown",

sparkle/src/stories/Resizable.stories.tsx

@@ -5,10 +5,10 @@ import {
   ResizableHandle,
   ResizablePanel,
   ResizablePanelGroup,
-} from "../index_with_tw_base";
+} from "../components/Resizable";
 
 const meta = {
-  title: "NewLayouts/Resizable",
+  title: "Layouts/Resizable",
 } satisfies Meta;
 
 export default meta;