[sparkle] - enh: Separator (#7938)

* [sparkle] - feature: update @radix-ui/react-separator and add Separator component

 - Upgraded @radix-ui/react-separator to version 1.1.0 to include new react versions in peerDependencies
 - Introduced new Separator component with vertical and horizontal orientation support
 - Organized imports in package.json and added @radix-ui/react-separator as a dependency
 - Enhanced tailwind config with separator color customization for light and dark themes

* [sparkle] - feature: bump package version to 0.2.257

 - Increment the package version to release new updates and features
 - Ensure lock file matches the new version for consistency

* [sparkle] - refactor: use Separator component in Page instead of divs

 - Replace manual divs with Separator component to maintain consistency and reuse components
 - Simplify the Page.Separator implementation for better readability and maintenance

---------

Co-authored-by: Jules <[email protected]>

sparkle/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.2.256",
+  "version": "0.2.257",
   "scripts": {
     "build": "rm -rf dist && npm run tailwind && npm run build:esm && npm run build:cjs",
     "tailwind": "tailwindcss -i ./src/styles/tailwind.css -o dist/sparkle.css",
@@ -64,9 +64,9 @@
     "sass-loader": "^13.3.2",
     "storybook": "^7.4.6",
     "tailwindcss": "^3.2.4",
+    "tailwindcss-animate": "^1.0.7",
     "tsc-alias": "^1.8.10",
     "typescript": "^5.4.5",
-    "tailwindcss-animate": "^1.0.7",
     "typescript-transform-paths": "^3.4.7",
     "uuid": "^9.0.1"
   },
@@ -88,6 +88,7 @@
     "@emoji-mart/data": "^1.1.2",
     "@emoji-mart/react": "^1.1.1",
     "@headlessui/react": "^1.7.19",
+    "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.3",
     "@tanstack/react-table": "^8.13.0",

sparkle/src/components/Page.tsx

@@ -1,5 +1,6 @@
 import React, { ComponentType } from "react";
 
+import { Separator } from "@sparkle/components/Separator";
 import { classNames } from "@sparkle/lib/utils";
 
 import { Button, ButtonProps } from "./Button";
@@ -75,9 +76,7 @@ Page.SectionHeader = function ({
 
 Page.Separator = function () {
   return (
-    <div className="s-w-full s-py-2">
-      <div className="s-h-px s-w-full s-bg-structure-200" />
-    </div>
+    <Separator/>
   );
 };
 

sparkle/src/components/Separator.tsx

@@ -0,0 +1,30 @@
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+import * as React from "react"
+
+import { classNames } from "@sparkle/lib/utils";
+
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(
+  (
+    { className, orientation = "horizontal", decorative = true, ...props },
+    ref
+  ) => (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={classNames(
+        "s-bg-separator s-shrink-0",
+        orientation === "horizontal" ? "s-h-[1px] s-w-full" : "s-h-full s-w-[1px]",
+        className ?? ""
+      )}
+      {...props}
+    />
+  )
+)
+Separator.displayName = SeparatorPrimitive.Root.displayName
+
+export { Separator }

sparkle/src/components/index.ts

@@ -39,6 +39,7 @@ export { Popup } from "./Popup";
 export { PriceTable } from "./PriceTable";
 export { RadioButton } from "./RadioButton";
 export { Searchbar } from "./Searchbar";
+export { Separator } from "./Separator";
 export { SliderToggle } from "./SliderToggle";
 export { default as Spinner } from "./Spinner";
 export { Tab } from "./Tab";

sparkle/src/stories/Separator.stories.tsx

@@ -0,0 +1,30 @@
+import type { Meta } from "@storybook/react";
+import * as React from "react";
+
+import { Separator } from "@sparkle/index_with_tw_base";
+
+const meta = {
+  title: "Primitives/Separator",
+  component: Separator,
+} satisfies Meta<typeof Separator>;
+
+export default meta;
+
+export const SeparatorExample = () => (
+  <div>
+    <div className="s-space-y-1">
+      <h4 className="s-text-sm s-font-medium s-leading-none">Dust Separator</h4>
+      <p className="s-text-sm s-text-muted-foreground">
+        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+      </p>
+    </div>
+    <Separator className="s-my-4" />
+    <div className="s-flex s-h-5 s-items-center s-space-x-4 s-text-sm">
+      <div>Dust</div>
+      <Separator orientation="vertical" />
+      <div>Separator</div>
+      <Separator orientation="vertical" />
+      <div>Menu</div>
+    </div>
+  </div>
+);

sparkle/tailwind.config.js

@@ -156,6 +156,7 @@ module.exports = {
           DEFAULT: colors.emerald[500],
           dark: colors.emerald[500],
         },
+        separator: { DEFAULT: colors.slate[200], dark: colors.slate[800] },
         action: {
           950: { DEFAULT: colors.blue[950], dark: colors.blue[50] },
           900: { DEFAULT: colors.blue[900], dark: colors.blue[100] },