xertica-ui 2.1.2 → 2.1.3

package/components/ui/hover-card/hover-card.mdx

@@ -10,14 +10,14 @@ import * as HoverCardStories from './hover-card.stories';
 
 <Primary />
 
----
-
-## Variations
-
-<Stories />
-
----
-
+---
+
+## Variations
+
+<Stories />
+
+---
+
 ## AI Best Practices
 
 > [!IMPORTANT]

package/components/ui/input/input.mdx

@@ -13,14 +13,14 @@ import * as InputStories from './input.stories';
 ## Controls
 <Controls />
 
----
-
-## Variations
-
-<Stories />
-
----
-
+---
+
+## Variations
+
+<Stories />
+
+---
+
 ## AI Best Practices
 
 > [!IMPORTANT]

package/components/ui/input-otp/input-otp.mdx

@@ -10,14 +10,14 @@ import * as InputOTPStories from './input-otp.stories';
 
 <Primary />
 
----
-
-## Variations
-
-<Stories />
-
----
-
+---
+
+## Variations
+
+<Stories />
+
+---
+
 ## AI Best Practices
 
 > [!IMPORTANT]

package/components/ui/input-otp/input-otp.stories.tsx

@@ -82,8 +82,8 @@ export const Sizes: Story = {
   render: () => (
     <div className="flex flex-col gap-8">
       <div className="flex flex-col gap-2">
-        <p id="otp-sm-label" className="text-sm font-medium">Small (sm)</p>
-        <InputOTP maxLength={4} aria-labelledby="otp-sm-label">
+        <p id="otp-sm-label" className="text-sm font-medium">Small (sm)</p>
+        <InputOTP maxLength={4} aria-labelledby="otp-sm-label">
           <InputOTPGroup>
             <InputOTPSlot index={0} size="sm" />
             <InputOTPSlot index={1} size="sm" />
@@ -94,8 +94,8 @@ export const Sizes: Story = {
       </div>
 
       <div className="flex flex-col gap-2">
-        <p id="otp-md-label" className="text-sm font-medium">Medium (md — default)</p>
-        <InputOTP maxLength={4} aria-labelledby="otp-md-label">
+        <p id="otp-md-label" className="text-sm font-medium">Medium (md — default)</p>
+        <InputOTP maxLength={4} aria-labelledby="otp-md-label">
           <InputOTPGroup>
             <InputOTPSlot index={0} size="md" />
             <InputOTPSlot index={1} size="md" />
@@ -106,8 +106,8 @@ export const Sizes: Story = {
       </div>
 
       <div className="flex flex-col gap-2">
-        <p id="otp-lg-label" className="text-sm font-medium">Large (lg)</p>
-        <InputOTP maxLength={4} aria-labelledby="otp-lg-label">
+        <p id="otp-lg-label" className="text-sm font-medium">Large (lg)</p>
+        <InputOTP maxLength={4} aria-labelledby="otp-lg-label">
           <InputOTPGroup>
             <InputOTPSlot index={0} size="lg" />
             <InputOTPSlot index={1} size="lg" />

package/components/ui/label/label.mdx

@@ -10,14 +10,14 @@ import * as LabelStories from './label.stories';
 
 <Primary />
 
----
-
-## Variations
-
-<Stories />
-
----
-
+---
+
+## Variations
+
+<Stories />
+
+---
+
 ## AI Best Practices
 
 > [!IMPORTANT]

package/components/ui/map/map.mdx

@@ -10,14 +10,14 @@ import * as MapStories from './map.stories';
 
 <Primary />
 
----
-
-## Variations
-
-<Stories />
-
----
-
+---
+
+## Variations
+
+<Stories />
+
+---
+
 ## AI Best Practices
 
 > [!IMPORTANT]

package/components/ui/map/map.stories.tsx

@@ -1,34 +1,34 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { Map } from './map';
-import React from 'react';
-
-function MapStoryFrame({ children }: { children: React.ReactNode }) {
-  return (
-    <div
-      style={{
-        width: 'min(100vw - 48px, 960px)',
-        minWidth: 320,
-      }}
-    >
-      {children}
-    </div>
-  );
-}
-
-const meta: Meta<typeof Map> = {
-  title: 'UI/Map',
-  component: Map,
-  render: (args) => (
-    <MapStoryFrame>
-      <Map {...args} />
-    </MapStoryFrame>
-  ),
-  parameters: {
-    layout: 'centered',
-  },
-  argTypes: {
-    zoom: { control: { type: 'range', min: 1, max: 20 } },
-    height: { control: 'text' },
+import { Map } from './map';
+import React from 'react';
+
+function MapStoryFrame({ children }: { children: React.ReactNode }) {
+  return (
+    <div
+      style={{
+        width: 'min(100vw - 48px, 960px)',
+        minWidth: 320,
+      }}
+    >
+      {children}
+    </div>
+  );
+}
+
+const meta: Meta<typeof Map> = {
+  title: 'UI/Map',
+  component: Map,
+  render: (args) => (
+    <MapStoryFrame>
+      <Map {...args} />
+    </MapStoryFrame>
+  ),
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    zoom: { control: { type: 'range', min: 1, max: 20 } },
+    height: { control: 'text' },
   },
 };
 
@@ -40,13 +40,13 @@ export const Default: Story = {
     center: { lat: -23.5505, lng: -46.6333 },
     zoom: 12,
     height: "400px",
-  },
-  render: (args) => (
-    <MapStoryFrame>
-      <Map {...args} />
-    </MapStoryFrame>
-  ),
-};
+  },
+  render: (args) => (
+    <MapStoryFrame>
+      <Map {...args} />
+    </MapStoryFrame>
+  ),
+};
 
 export const WithMarkers: Story = {
   args: {
@@ -66,21 +66,21 @@ export const WithMarkers: Story = {
         customColor: "hsl(var(--destructive))",
       },
     ],
-  },
-  render: (args) => (
-    <MapStoryFrame>
-      <Map {...args} />
-    </MapStoryFrame>
-  ),
-};
+  },
+  render: (args) => (
+    <MapStoryFrame>
+      <Map {...args} />
+    </MapStoryFrame>
+  ),
+};
 
 export const NoKey: Story = {
   args: {
     apiKey: "",
-  },
-  render: (args) => (
-    <MapStoryFrame>
-      <Map {...args} />
-    </MapStoryFrame>
-  ),
-};
+  },
+  render: (args) => (
+    <MapStoryFrame>
+      <Map {...args} />
+    </MapStoryFrame>
+  ),
+};

package/components/ui/map/map.tsx

@@ -310,7 +310,7 @@ const MapContent = React.forwardRef<HTMLDivElement, MapProps & { apiKey: string
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
                 </svg>
               </div>
-              <p className="text-sm font-medium text-foreground">Failed to load Google Maps</p>
+              <p className="text-sm font-medium text-foreground">Failed to load Google Maps</p>
               <p className="text-xs text-muted-foreground">Check API key in Settings</p>
             </div>
           </div>
@@ -468,4 +468,4 @@ export const Map = React.forwardRef<HTMLDivElement, MapProps>(
     );
   }
 );
-Map.displayName = "Map";
+Map.displayName = "Map";

package/components/ui/menubar/menubar.mdx

@@ -10,14 +10,14 @@ import * as MenubarStories from './menubar.stories';
 
 <Primary />
 
----
-
-## Variations
-
-<Stories />
-
----
-
+---
+
+## Variations
+
+<Stories />
+
+---
+
 ## AI Best Practices
 
 > [!IMPORTANT]

package/components/ui/navigation-menu/navigation-menu.mdx

@@ -10,14 +10,14 @@ import * as NavigationMenuStories from './navigation-menu.stories';
 
 <Primary />
 
----
-
-## Variations
-
-<Stories />
-
----
-
+---
+
+## Variations
+
+<Stories />
+
+---
+
 ## AI Best Practices
 
 > [!IMPORTANT]

package/components/ui/notification-badge/notification-badge.mdx

@@ -10,14 +10,14 @@ import * as NotificationBadgeStories from './notification-badge.stories';
 
 <Primary />
 
----
-
-## Variations
-
-<Stories />
-
----
-
+---
+
+## Variations
+
+<Stories />
+
+---
+
 ## AI Best Practices
 
 > [!IMPORTANT]

package/components/ui/pagination/index.ts

@@ -1 +1,3 @@
 export * from './pagination';
+export { usePagination } from './use-pagination';
+export type { PaginationPageItem, UsePaginationProps, UsePaginationReturn } from './use-pagination';

package/components/ui/pagination/pagination.mdx

@@ -10,14 +10,14 @@ import * as PaginationStories from './pagination.stories';
 
 <Primary />
 
----
-
-## Variations
-
-<Stories />
-
----
-
+---
+
+## Variations
+
+<Stories />
+
+---
+
 ## AI Best Practices
 
 > [!IMPORTANT]

package/components/ui/pagination/pagination.stories.tsx

@@ -8,7 +8,9 @@ import {
   PaginationNext,
   PaginationPrevious,
 } from './pagination';
+import { usePagination } from './use-pagination';
 import React, { useState } from 'react';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
 
 type PaginationStoryProps = React.ComponentProps<typeof Pagination> & {
   activePage?: number;
@@ -104,3 +106,95 @@ export const Controlled: Story = {
     );
   },
 };
+
+/**
+ * ## usePagination — Headless Hook
+ *
+ * Use `usePagination` when you need page state, ellipsis logic, and slice
+ * indices but want to render a completely custom pagination UI — or when you
+ * need to drive a data-fetch without any visual pagination bar at all.
+ *
+ * The hook computes `items` (an ordered list of page numbers + ellipsis
+ * markers) so you never have to calculate which pages to show manually.
+ *
+ * ```tsx
+ * import { usePagination } from '@xertica/ui/pagination';
+ *
+ * const { currentPage, totalPages, items, next, prev, goTo, canGoPrev, canGoNext } =
+ *   usePagination({ totalItems: 200, pageSize: 20 });
+ * ```
+ */
+export const HeadlessHook: Story = {
+  name: 'usePagination (headless)',
+  render: () => {
+    const {
+      currentPage,
+      totalPages,
+      items,
+      next,
+      prev,
+      goTo,
+      canGoPrev,
+      canGoNext,
+      startIndex,
+      endIndex,
+    } = usePagination({ totalItems: 237, pageSize: 20, siblingCount: 1 });
+
+    return (
+      <div className="space-y-4">
+        {/* Data slice info */}
+        <p className="text-sm text-muted-foreground">
+          Showing items <span className="font-medium text-foreground">{startIndex + 1}–{endIndex}</span> of{' '}
+          <span className="font-medium text-foreground">237</span>
+        </p>
+
+        {/* Fully custom pagination bar */}
+        <div className="flex items-center gap-1">
+          <button
+            onClick={prev}
+            disabled={!canGoPrev}
+            className="flex h-8 w-8 items-center justify-center rounded-md border text-sm disabled:opacity-40 hover:bg-muted transition-colors"
+            aria-label="Previous page"
+          >
+            <ChevronLeft className="h-4 w-4" />
+          </button>
+
+          {items.map((item) =>
+            item.type === 'ellipsis' ? (
+              <span key={item.key} className="flex h-8 w-8 items-center justify-center text-muted-foreground text-sm">
+                …
+              </span>
+            ) : (
+              <button
+                key={item.page}
+                onClick={() => goTo(item.page)}
+                className={[
+                  'flex h-8 w-8 items-center justify-center rounded-md border text-sm font-medium transition-colors',
+                  item.page === currentPage
+                    ? 'bg-primary text-primary-foreground border-primary'
+                    : 'hover:bg-muted',
+                ].join(' ')}
+                aria-current={item.page === currentPage ? 'page' : undefined}
+              >
+                {item.page}
+              </button>
+            )
+          )}
+
+          <button
+            onClick={next}
+            disabled={!canGoNext}
+            className="flex h-8 w-8 items-center justify-center rounded-md border text-sm disabled:opacity-40 hover:bg-muted transition-colors"
+            aria-label="Next page"
+          >
+            <ChevronRight className="h-4 w-4" />
+          </button>
+        </div>
+
+        <p className="text-xs text-muted-foreground">
+          Page {currentPage} of {totalPages}
+        </p>
+      </div>
+    );
+  },
+};