@org-design-system/components 0.1.9 → 0.1.11

package/src/components/breadcrumb.tsx

@@ -0,0 +1,122 @@
+import * as React from "react"
+import { Slot } from "radix-ui"
+
+import { cn } from "../lib/utils"
+import { ChevronRightIcon, MoreHorizontalIcon } from "lucide-react"
+
+function Breadcrumb({ className, ...props }: React.ComponentProps<"nav">) {
+  return (
+    <nav
+      aria-label="breadcrumb"
+      data-slot="breadcrumb"
+      className={cn(className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
+  return (
+    <ol
+      data-slot="breadcrumb-list"
+      className={cn(
+        "flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-item"
+      className={cn("inline-flex items-center gap-1", className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbLink({
+  asChild,
+  className,
+  ...props
+}: React.ComponentProps<"a"> & {
+  asChild?: boolean
+}) {
+  const Comp = asChild ? Slot.Root : "a"
+
+  return (
+    <Comp
+      data-slot="breadcrumb-link"
+      className={cn("transition-colors hover:text-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-page"
+      role="link"
+      aria-disabled="true"
+      aria-current="page"
+      className={cn("font-normal text-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbSeparator({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-separator"
+      role="presentation"
+      aria-hidden="true"
+      className={cn("[&>svg]:size-3.5", className)}
+      {...props}
+    >
+      {children ?? (
+        <ChevronRightIcon />
+      )}
+    </li>
+  )
+}
+
+function BreadcrumbEllipsis({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-ellipsis"
+      role="presentation"
+      aria-hidden="true"
+      className={cn(
+        "flex size-5 items-center justify-center [&>svg]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <MoreHorizontalIcon
+      />
+      <span className="sr-only">More</span>
+    </span>
+  )
+}
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+}

package/src/index.ts

@@ -2,6 +2,7 @@
 export * from './components/alert-dialog';
 export * from './components/avatar';
 export * from './components/badge';
+export * from './components/breadcrumb';
 export * from './components/button';
 export * from './components/card';
 export * from './components/checkbox';

package/dist/index.css

@@ -1,30 +0,0 @@
-@import "tailwindcss";
-@import "@org-design-system/styles/index.css";
-@import "@org-design-system/styles/component.css";
-
-@source "./components/**/*.tsx";
-
-@theme {
-  /* Mapping for shadcn components that expect these variables */
-  --color-background: var(--color-surface-bg);
-  --color-foreground: var(--color-text-primary);
-  
-  --color-primary: var(--color-green-9);
-  --color-primary-foreground: var(--color-gray-1);
-  
-  --color-secondary: var(--color-gray-alpha-3);
-  --color-secondary-foreground: var(--color-text-primary);
-  
-  --color-muted: var(--color-gray-alpha-2);
-  --color-muted-foreground: var(--color-text-secondary);
-  
-  --color-accent: var(--color-green-alpha-2);
-  --color-accent-foreground: var(--color-text-focus);
-  
-  --color-destructive: var(--color-red-9);
-  --color-destructive-foreground: var(--color-gray-1);
-  
-  --color-border: var(--color-stroke-primary);
-  --color-input: var(--color-stroke-primary);
-  --color-ring: var(--color-surface-focus);
-}