myoperator-ui 0.0.162 → 0.0.164

package/dist/index.js

@@ -5887,6 +5887,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)
         }
       ]
@@ -8206,7 +8395,7 @@ export type {
     },
     "payment-option-card": {
       name: "payment-option-card",
-      description: "A selectable payment method list with icons, titles, and descriptions",
+      description: "A selectable payment method list with icons, titles, and descriptions. Includes a modal variant for overlay usage.",
       category: "custom",
       dependencies: [
         "clsx",
@@ -8214,7 +8403,8 @@ export type {
         "lucide-react"
       ],
       internalDependencies: [
-        "button"
+        "button",
+        "dialog"
       ],
       isMultiFile: true,
       directory: "payment-option-card",
@@ -8359,6 +8549,96 @@ export const PaymentOptionCard = React.forwardRef<
 );
 
 PaymentOptionCard.displayName = "PaymentOptionCard";
+`, prefix)
+        },
+        {
+          name: "payment-option-card-modal.tsx",
+          content: prefixTailwindClasses(`import * as React from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogTitle,
+} from "../dialog";
+import { PaymentOptionCard } from "./payment-option-card";
+import type { PaymentOptionCardModalProps } from "./types";
+
+/**
+ * PaymentOptionCardModal wraps the PaymentOptionCard in a centered Dialog overlay.
+ * Use this when you want to show payment method selection as a modal popup rather
+ * than an inline card.
+ *
+ * @example
+ * \`\`\`tsx
+ * const [open, setOpen] = useState(false);
+ *
+ * <PaymentOptionCardModal
+ *   open={open}
+ *   onOpenChange={setOpen}
+ *   options={paymentOptions}
+ *   onOptionSelect={(id) => console.log(id)}
+ *   onCtaClick={() => { handlePayment(); setOpen(false); }}
+ * />
+ * \`\`\`
+ */
+export const PaymentOptionCardModal = React.forwardRef<
+  HTMLDivElement,
+  PaymentOptionCardModalProps
+>(
+  (
+    {
+      open,
+      onOpenChange,
+      title,
+      subtitle,
+      options,
+      selectedOptionId,
+      defaultSelectedOptionId,
+      onOptionSelect,
+      ctaText,
+      onCtaClick,
+      loading,
+      disabled,
+      className,
+    },
+    ref
+  ) => {
+    const handleClose = () => {
+      onOpenChange(false);
+    };
+
+    return (
+      <Dialog open={open} onOpenChange={onOpenChange}>
+        <DialogContent
+          ref={ref}
+          size="sm"
+          hideCloseButton
+          className="p-0 border-0 bg-transparent shadow-none"
+        >
+          {/* Visually hidden title for accessibility */}
+          <DialogTitle className="sr-only">
+            {title || "Select payment method"}
+          </DialogTitle>
+          <PaymentOptionCard
+            title={title}
+            subtitle={subtitle}
+            options={options}
+            selectedOptionId={selectedOptionId}
+            defaultSelectedOptionId={defaultSelectedOptionId}
+            onOptionSelect={onOptionSelect}
+            ctaText={ctaText}
+            onCtaClick={onCtaClick}
+            onClose={handleClose}
+            loading={loading}
+            disabled={disabled}
+            className={className}
+          />
+        </DialogContent>
+      </Dialog>
+    );
+  }
+);
+
+PaymentOptionCardModal.displayName = "PaymentOptionCardModal";
 `, prefix)
         },
         {
@@ -8408,12 +8688,30 @@ export interface PaymentOptionCardProps {
   /** Additional className for the root element */
   className?: string;
 }
+
+/**
+ * Props for the PaymentOptionCardModal component.
+ * Extends the card props with Dialog open/close control, omitting \`onClose\`
+ * which is handled internally by the modal.
+ */
+export interface PaymentOptionCardModalProps
+  extends Omit<PaymentOptionCardProps, "onClose"> {
+  /** Whether the modal is open */
+  open: boolean;
+  /** Callback when modal should open or close */
+  onOpenChange: (open: boolean) => void;
+}
 `, prefix)
         },
         {
           name: "index.ts",
           content: prefixTailwindClasses(`export { PaymentOptionCard } from "./payment-option-card";
-export type { PaymentOptionCardProps, PaymentOption } from "./types";
+export { PaymentOptionCardModal } from "./payment-option-card-modal";
+export type {
+  PaymentOptionCardProps,
+  PaymentOptionCardModalProps,
+  PaymentOption,
+} from "./types";
 `, prefix)
         }
       ]

package/package.json

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