notionsoft-ui 1.0.36 → 1.0.38

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "notionsoft-ui",
-  "version": "1.0.36",
+  "version": "1.0.38",
   "description": "A React UI component installer (shadcn-style). Installs components directly into your project.",
   "bin": {
     "notionsoft-ui": "./cli/index.cjs"

package/src/notion-ui/breadcrumb/Breadcrumb.stories.tsx

@@ -0,0 +1,86 @@
+// Breadcrumb.stories.tsx
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbSeparator,
+  BreadcrumbHome,
+} from "./breadcrumb";
+
+const meta: Meta<typeof Breadcrumb> = {
+  title: "Components/Breadcrumb",
+  component: Breadcrumb,
+  parameters: {
+    layout: "centered",
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Breadcrumb>;
+
+/**
+ * Basic breadcrumb with text items
+ */
+export const Basic: Story = {
+  render: () => (
+    <Breadcrumb>
+      <BreadcrumbItem>dashboard</BreadcrumbItem>
+      <BreadcrumbSeparator />
+      <BreadcrumbItem>projects</BreadcrumbItem>
+      <BreadcrumbSeparator />
+      <BreadcrumbItem>storybook</BreadcrumbItem>
+    </Breadcrumb>
+  ),
+};
+
+/**
+ * Breadcrumb with home icon
+ */
+export const WithHomeIcon: Story = {
+  render: () => (
+    <Breadcrumb>
+      <BreadcrumbHome />
+      <BreadcrumbSeparator />
+      <BreadcrumbItem>dashboard</BreadcrumbItem>
+      <BreadcrumbSeparator />
+      <BreadcrumbItem>settings</BreadcrumbItem>
+    </Breadcrumb>
+  ),
+};
+
+/**
+ * Long breadcrumb path to demonstrate horizontal scrolling
+ */
+export const LongPath: Story = {
+  render: () => (
+    <Breadcrumb className="max-w-xs">
+      <BreadcrumbHome />
+      <BreadcrumbSeparator />
+      <BreadcrumbItem>dashboard</BreadcrumbItem>
+      <BreadcrumbSeparator />
+      <BreadcrumbItem>projects</BreadcrumbItem>
+      <BreadcrumbSeparator />
+      <BreadcrumbItem>frontend</BreadcrumbItem>
+      <BreadcrumbSeparator />
+      <BreadcrumbItem>components</BreadcrumbItem>
+      <BreadcrumbSeparator />
+      <BreadcrumbItem>breadcrumb</BreadcrumbItem>
+    </Breadcrumb>
+  ),
+};
+
+/**
+ * Custom styled breadcrumb
+ */
+export const CustomStyled: Story = {
+  render: () => (
+    <Breadcrumb className="bg-muted border-dashed">
+      <BreadcrumbHome className="text-primary" />
+      <BreadcrumbSeparator className="text-primary/30" />
+      <BreadcrumbItem className="text-primary">home</BreadcrumbItem>
+      <BreadcrumbSeparator />
+      <BreadcrumbItem className="font-semibold">profile</BreadcrumbItem>
+    </Breadcrumb>
+  ),
+};

package/src/notion-ui/breadcrumb/breadcrumb.tsx

@@ -0,0 +1,101 @@
+import { cn } from "@/utils/cn";
+import React from "react";
+
+interface BreadcrumbProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+const Breadcrumb = React.forwardRef<HTMLDivElement, BreadcrumbProps>(
+  (props, ref) => {
+    const { className, children, ...rest } = props;
+
+    return (
+      <div
+        ref={ref}
+        {...rest}
+        className={cn(
+          "rounded-sm px-5 items-center border border-primary/15 bg-card w-full sm:w-fit overflow-x-auto flex gap-x-4",
+          className
+        )}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+
+interface BreadcrumbSeparatorProps extends React.SVGProps<SVGSVGElement> {}
+
+const BreadcrumbSeparator = React.forwardRef<
+  SVGSVGElement,
+  BreadcrumbSeparatorProps
+>((props, ref) => {
+  const { className, children, ...rest } = props;
+
+  return (
+    <svg
+      ref={ref}
+      {...rest}
+      fill="currentColor"
+      viewBox="0 0 24 44"
+      preserveAspectRatio="none"
+      aria-hidden="true"
+      className={cn(
+        "text-primary/15 min-h-9 min-w-4 h-9 w-4 rtl:rotate-180",
+        className
+      )}
+    >
+      <path d="M.293 0l22 22-22 22h1.414l22-22-22-22H.293z"></path>
+    </svg>
+  );
+});
+
+interface BreadcrumbItemProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+const BreadcrumbItem = React.forwardRef<HTMLDivElement, BreadcrumbItemProps>(
+  (props, ref) => {
+    const { className, children, ...rest } = props;
+
+    return (
+      <div
+        ref={ref}
+        {...rest}
+        className={cn(
+          "text-primary/70 rtl:pt-0.5 hover:text-primary text-nowrap capitalize cursor-pointer transition-colors duration-200 font-medium rtl:text-4 ltr:text-xs",
+          className
+        )}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+
+interface BreadcrumbHomeProps extends React.SVGProps<SVGSVGElement> {}
+
+const BreadcrumbHome = React.forwardRef<SVGSVGElement, BreadcrumbHomeProps>(
+  (props, ref) => {
+    const { className, children, ...rest } = props;
+
+    return (
+      <svg
+        ref={ref}
+        {...rest}
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 20 20"
+        // aria-hidden="true"
+        // data-slot="icon"
+        className={cn(
+          "text-primary/60 fill-primary/60 hover:scale-105 min-w-4 min-h-4 size-4 hover:fill-primary/90 transition-[fill] duration-300 cursor-pointer",
+          className
+        )}
+      >
+        <path
+          fillRule="evenodd"
+          d="M9.293 2.293a1 1 0 0 1 1.414 0l7 7A1 1 0 0 1 17 11h-1v6a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1v-3a1 1 0 0 0-1-1H9a1 1 0 0 0-1 1v3a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-6H3a1 1 0 0 1-.707-1.707l7-7Z"
+          clipRule="evenodd"
+        ></path>
+      </svg>
+    );
+  }
+);
+
+export { Breadcrumb, BreadcrumbSeparator, BreadcrumbItem, BreadcrumbHome };