myoperator-ui 0.0.163 → 0.0.165

package/dist/index.js

@@ -2874,10 +2874,12 @@ export interface TableProps
     VariantProps<typeof tableVariants> {
   /** Remove outer border from the table */
   withoutBorder?: boolean;
+  /** Allow cell content to wrap to multiple lines. By default, content is kept on a single line with horizontal scroll. */
+  wrapContent?: boolean;
 }
 
 const Table = React.forwardRef<HTMLTableElement, TableProps>(
-  ({ className, size, withoutBorder, ...props }, ref) => (
+  ({ className, size, withoutBorder, wrapContent, ...props }, ref) => (
     <div
       className={cn(
         "relative w-full overflow-auto",
@@ -2886,7 +2888,11 @@ const Table = React.forwardRef<HTMLTableElement, TableProps>(
     >
       <table
         ref={ref}
-        className={cn(tableVariants({ size, className }))}
+        className={cn(
+          tableVariants({ size }),
+          !wrapContent && "[&_th]:whitespace-nowrap [&_td]:whitespace-nowrap",
+          className
+        )}
         {...props}
       />
     </div>
@@ -5887,6 +5893,195 @@ const PageHeader = React.forwardRef<HTMLDivElement, PageHeaderProps>(
 PageHeader.displayName = "PageHeader";
 
 export { PageHeader, pageHeaderVariants };
+`, prefix)
+        }
+      ]
+    },
+    "pagination": {
+      name: "pagination",
+      description: "A composable pagination component with page navigation, next/previous links, and ellipsis",
+      category: "layout",
+      dependencies: [
+        "clsx",
+        "tailwind-merge",
+        "lucide-react"
+      ],
+      internalDependencies: [
+        "button"
+      ],
+      files: [
+        {
+          name: "pagination.tsx",
+          content: prefixTailwindClasses(`import * as React from "react";
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  MoreHorizontalIcon,
+} from "lucide-react";
+
+import { cn } from "../../lib/utils";
+import { buttonVariants, type ButtonProps } from "./button";
+
+export interface PaginationProps extends React.ComponentProps<"nav"> {
+  /** Additional CSS classes for the nav wrapper */
+  className?: string;
+}
+
+function Pagination({ className, ...props }: PaginationProps) {
+  return (
+    <nav
+      role="navigation"
+      aria-label="pagination"
+      data-slot="pagination"
+      className={cn("mx-auto flex w-full justify-center", className)}
+      {...props}
+    />
+  );
+}
+Pagination.displayName = "Pagination";
+
+export interface PaginationContentProps extends React.ComponentProps<"ul"> {
+  /** Additional CSS classes for the list container */
+  className?: string;
+}
+
+function PaginationContent({
+  className,
+  ...props
+}: PaginationContentProps) {
+  return (
+    <ul
+      data-slot="pagination-content"
+      className={cn("flex flex-row items-center gap-1", className)}
+      {...props}
+    />
+  );
+}
+PaginationContent.displayName = "PaginationContent";
+
+export interface PaginationItemProps extends React.ComponentProps<"li"> {
+  /** Additional CSS classes for the list item */
+  className?: string;
+}
+
+function PaginationItem({ ...props }: PaginationItemProps) {
+  return <li data-slot="pagination-item" {...props} />;
+}
+PaginationItem.displayName = "PaginationItem";
+
+export interface PaginationLinkProps
+  extends Pick<ButtonProps, "size">,
+    React.ComponentProps<"a"> {
+  /** Highlights the link as the current page */
+  isActive?: boolean;
+  /** Size of the link (uses Button size variants) */
+  size?: ButtonProps["size"];
+  /** Additional CSS classes */
+  className?: string;
+}
+
+function PaginationLink({
+  className,
+  isActive,
+  size = "icon",
+  ...props
+}: PaginationLinkProps) {
+  return (
+    <a
+      aria-current={isActive ? "page" : undefined}
+      data-slot="pagination-link"
+      data-active={isActive}
+      className={cn(
+        buttonVariants({
+          variant: isActive ? "outline" : "ghost",
+          size,
+        }),
+        className
+      )}
+      {...props}
+    />
+  );
+}
+PaginationLink.displayName = "PaginationLink";
+
+export interface PaginationPreviousProps extends PaginationLinkProps {
+  /** Additional CSS classes */
+  className?: string;
+}
+
+function PaginationPrevious({
+  className,
+  ...props
+}: PaginationPreviousProps) {
+  return (
+    <PaginationLink
+      aria-label="Go to previous page"
+      size="default"
+      className={cn("gap-1 px-2.5 sm:pl-2.5", className)}
+      {...props}
+    >
+      <ChevronLeftIcon />
+      <span className="hidden sm:block">Previous</span>
+    </PaginationLink>
+  );
+}
+PaginationPrevious.displayName = "PaginationPrevious";
+
+export interface PaginationNextProps extends PaginationLinkProps {
+  /** Additional CSS classes */
+  className?: string;
+}
+
+function PaginationNext({
+  className,
+  ...props
+}: PaginationNextProps) {
+  return (
+    <PaginationLink
+      aria-label="Go to next page"
+      size="default"
+      className={cn("gap-1 px-2.5 sm:pr-2.5", className)}
+      {...props}
+    >
+      <span className="hidden sm:block">Next</span>
+      <ChevronRightIcon />
+    </PaginationLink>
+  );
+}
+PaginationNext.displayName = "PaginationNext";
+
+export interface PaginationEllipsisProps extends React.ComponentProps<"span"> {
+  /** Additional CSS classes */
+  className?: string;
+}
+
+function PaginationEllipsis({
+  className,
+  ...props
+}: PaginationEllipsisProps) {
+  return (
+    <span
+      aria-hidden
+      data-slot="pagination-ellipsis"
+      className={cn("flex size-9 items-center justify-center", className)}
+      {...props}
+    >
+      <MoreHorizontalIcon className="size-4" />
+      <span className="sr-only">More pages</span>
+    </span>
+  );
+}
+PaginationEllipsis.displayName = "PaginationEllipsis";
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationLink,
+  PaginationItem,
+  PaginationPrevious,
+  PaginationNext,
+  PaginationEllipsis,
+};
 `, prefix)
         }
       ]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "myoperator-ui",
-  "version": "0.0.163",
+  "version": "0.0.165",
   "description": "CLI for adding myOperator UI components to your project",
   "type": "module",
   "exports": "./dist/index.js",