@regardio/react 0.4.7 → 0.5.5

package/src/carousel/carousel-content.tsx

@@ -0,0 +1,16 @@
+'use client';
+
+import { forwardRef, type HTMLAttributes } from 'react';
+
+export const CarouselContent = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => {
+    return (
+      <div
+        className={className}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+CarouselContent.displayName = 'CarouselContent';

package/src/carousel/carousel-item.tsx

@@ -0,0 +1,23 @@
+'use client';
+
+import { forwardRef, type HTMLAttributes } from 'react';
+
+export interface CarouselItemProps extends HTMLAttributes<HTMLDivElement> {
+  'aria-label'?: string;
+}
+
+export const CarouselItem = forwardRef<HTMLDivElement, CarouselItemProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      // biome-ignore lint/a11y/useSemanticElements: False positive
+      <div
+        aria-roledescription="slide"
+        className={className}
+        ref={ref}
+        role="group"
+        {...props}
+      />
+    );
+  },
+);
+CarouselItem.displayName = 'CarouselItem';

package/src/carousel/carousel-next.tsx

@@ -0,0 +1,22 @@
+'use client';
+
+import { forwardRef, type HTMLAttributes } from 'react';
+import { useCarousel } from './carousel-root';
+
+export const CarouselNext = forwardRef<HTMLButtonElement, HTMLAttributes<HTMLButtonElement>>(
+  ({ className, ...props }, ref) => {
+    const { canScrollNext, scrollNext } = useCarousel();
+
+    return (
+      <button
+        className={className}
+        disabled={!canScrollNext}
+        onClick={scrollNext}
+        ref={ref}
+        type="button"
+        {...props}
+      />
+    );
+  },
+);
+CarouselNext.displayName = 'CarouselNext';

package/src/carousel/carousel-previous.tsx

@@ -0,0 +1,22 @@
+'use client';
+
+import { forwardRef, type HTMLAttributes } from 'react';
+import { useCarousel } from './carousel-root';
+
+export const CarouselPrevious = forwardRef<HTMLButtonElement, HTMLAttributes<HTMLButtonElement>>(
+  ({ className, ...props }, ref) => {
+    const { canScrollPrev, scrollPrev } = useCarousel();
+
+    return (
+      <button
+        className={className}
+        disabled={!canScrollPrev}
+        onClick={scrollPrev}
+        ref={ref}
+        type="button"
+        {...props}
+      />
+    );
+  },
+);
+CarouselPrevious.displayName = 'CarouselPrevious';

package/src/{components/carousel.tsx → carousel/carousel-root.tsx}

@@ -1,3 +1,5 @@
+'use client';
+
 import type { EmblaCarouselType, EmblaOptionsType } from 'embla-carousel';
 import useEmblaCarousel from 'embla-carousel-react';
 import {
@@ -10,7 +12,6 @@ import {
   useEffect,
   useState,
 } from 'react';
-import { cn } from '../utils/cn';
 
 export type CarouselApi = EmblaCarouselType;
 
@@ -24,21 +25,21 @@ interface CarouselContextValue {
 
 const CarouselContext = createContext<CarouselContextValue | null>(null);
 
-function useCarousel() {
+export function useCarousel() {
   const context = useContext(CarouselContext);
   if (!context) {
-    throw new Error('useCarousel must be used within a <Carousel />');
+    throw new Error('useCarousel must be used within a <Carousel.Root />');
   }
   return context;
 }
 
-interface CarouselProps extends HTMLAttributes<HTMLDivElement> {
+export interface CarouselRootProps extends HTMLAttributes<HTMLDivElement> {
   opts?: EmblaOptionsType;
   setApi?: (api: CarouselApi) => void;
   orientation?: 'horizontal' | 'vertical';
 }
 
-const Carousel = forwardRef<HTMLDivElement, CarouselProps>(
+export const CarouselRoot = forwardRef<HTMLDivElement, CarouselRootProps>(
   ({ children, className, opts, orientation = 'horizontal', setApi, ...props }, ref) => {
     const [emblaRef, emblaApi] = useEmblaCarousel({
       ...opts,
@@ -110,7 +111,7 @@ const Carousel = forwardRef<HTMLDivElement, CarouselProps>(
         <section
           aria-label="Carousel"
           aria-roledescription="carousel"
-          className={cn('relative', className)}
+          className={className}
           onKeyDownCapture={handleKeyDown}
           ref={ref}
           {...props}
@@ -123,75 +124,4 @@ const Carousel = forwardRef<HTMLDivElement, CarouselProps>(
     );
   },
 );
-Carousel.displayName = 'Carousel';
-
-const CarouselContent = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => {
-    return (
-      <div
-        className={cn('flex', className)}
-        ref={ref}
-        {...props}
-      />
-    );
-  },
-);
-CarouselContent.displayName = 'CarouselContent';
-
-interface CarouselItemProps extends HTMLAttributes<HTMLDivElement> {
-  'aria-label'?: string;
-}
-
-const CarouselItem = forwardRef<HTMLDivElement, CarouselItemProps>(
-  ({ className, ...props }, ref) => {
-    return (
-      // biome-ignore lint/a11y/useSemanticElements: False positive
-      <div
-        aria-roledescription="slide"
-        className={cn('min-w-0 shrink-0 grow-0', className)}
-        ref={ref}
-        role="group"
-        {...props}
-      />
-    );
-  },
-);
-CarouselItem.displayName = 'CarouselItem';
-
-const CarouselPrevious = forwardRef<HTMLButtonElement, HTMLAttributes<HTMLButtonElement>>(
-  ({ className, ...props }, ref) => {
-    const { canScrollPrev, scrollPrev } = useCarousel();
-
-    return (
-      <button
-        className={cn('disabled:opacity-50', className)}
-        disabled={!canScrollPrev}
-        onClick={scrollPrev}
-        ref={ref}
-        type="button"
-        {...props}
-      />
-    );
-  },
-);
-CarouselPrevious.displayName = 'CarouselPrevious';
-
-const CarouselNext = forwardRef<HTMLButtonElement, HTMLAttributes<HTMLButtonElement>>(
-  ({ className, ...props }, ref) => {
-    const { canScrollNext, scrollNext } = useCarousel();
-
-    return (
-      <button
-        className={cn('disabled:opacity-50', className)}
-        disabled={!canScrollNext}
-        onClick={scrollNext}
-        ref={ref}
-        type="button"
-        {...props}
-      />
-    );
-  },
-);
-CarouselNext.displayName = 'CarouselNext';
-
-export { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, useCarousel };
+CarouselRoot.displayName = 'CarouselRoot';

package/src/carousel/carousel.stories.tsx

@@ -0,0 +1,135 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Carousel } from './index';
+
+const meta: Meta<typeof Carousel.Root> = {
+  component: Carousel.Root,
+  parameters: {
+    layout: 'padded',
+  },
+  tags: ['autodocs'],
+  title: 'Components/Carousel',
+};
+
+export default meta;
+type Story = StoryObj<typeof Carousel.Root>;
+
+const SlideCard = ({ children }: { children: React.ReactNode }) => (
+  <div
+    style={{
+      alignItems: 'center',
+      background: '#f0f0f0',
+      border: '1px solid #ddd',
+      borderRadius: '8px',
+      display: 'flex',
+      height: '200px',
+      justifyContent: 'center',
+      width: '300px',
+    }}
+  >
+    {children}
+  </div>
+);
+
+export const Default: Story = {
+  render: () => (
+    <Carousel.Root className="w-full max-w-md">
+      <Carousel.Content className="gap-4">
+        <Carousel.Item>
+          <SlideCard>Slide 1</SlideCard>
+        </Carousel.Item>
+        <Carousel.Item>
+          <SlideCard>Slide 2</SlideCard>
+        </Carousel.Item>
+        <Carousel.Item>
+          <SlideCard>Slide 3</SlideCard>
+        </Carousel.Item>
+      </Carousel.Content>
+    </Carousel.Root>
+  ),
+};
+
+export const WithControls: Story = {
+  render: () => (
+    <Carousel.Root className="w-full max-w-md">
+      <Carousel.Content className="gap-4">
+        <Carousel.Item>
+          <SlideCard>Slide 1</SlideCard>
+        </Carousel.Item>
+        <Carousel.Item>
+          <SlideCard>Slide 2</SlideCard>
+        </Carousel.Item>
+        <Carousel.Item>
+          <SlideCard>Slide 3</SlideCard>
+        </Carousel.Item>
+      </Carousel.Content>
+      <div className="flex justify-center gap-4 mt-4">
+        <Carousel.Previous className="px-4 py-2 bg-gray-200 rounded">Previous</Carousel.Previous>
+        <Carousel.Next className="px-4 py-2 bg-gray-200 rounded">Next</Carousel.Next>
+      </div>
+    </Carousel.Root>
+  ),
+};
+
+export const ManySlides: Story = {
+  render: () => (
+    <Carousel.Root className="w-full max-w-md">
+      <Carousel.Content className="gap-4">
+        {[1, 2, 3, 4, 5, 6].map((i) => (
+          <Carousel.Item key={i}>
+            <SlideCard>Slide {i}</SlideCard>
+          </Carousel.Item>
+        ))}
+      </Carousel.Content>
+      <div className="flex justify-center gap-4 mt-4">
+        <Carousel.Previous className="px-4 py-2 bg-gray-200 rounded">←</Carousel.Previous>
+        <Carousel.Next className="px-4 py-2 bg-gray-200 rounded">→</Carousel.Next>
+      </div>
+    </Carousel.Root>
+  ),
+};
+
+export const VerticalOrientation: Story = {
+  render: () => (
+    <Carousel.Root
+      className="w-full max-w-md h-[400px]"
+      orientation="vertical"
+    >
+      <Carousel.Content className="flex-col gap-4">
+        <Carousel.Item>
+          <SlideCard>Vertical Slide 1</SlideCard>
+        </Carousel.Item>
+        <Carousel.Item>
+          <SlideCard>Vertical Slide 2</SlideCard>
+        </Carousel.Item>
+        <Carousel.Item>
+          <SlideCard>Vertical Slide 3</SlideCard>
+        </Carousel.Item>
+      </Carousel.Content>
+    </Carousel.Root>
+  ),
+};
+
+export const WithOptions: Story = {
+  render: () => (
+    <Carousel.Root
+      className="w-full max-w-md"
+      opts={{ align: 'start', loop: true }}
+    >
+      <Carousel.Content className="gap-4">
+        <Carousel.Item>
+          <SlideCard>Loop Slide 1</SlideCard>
+        </Carousel.Item>
+        <Carousel.Item>
+          <SlideCard>Loop Slide 2</SlideCard>
+        </Carousel.Item>
+        <Carousel.Item>
+          <SlideCard>Loop Slide 3</SlideCard>
+        </Carousel.Item>
+      </Carousel.Content>
+      <div className="flex justify-center gap-4 mt-4">
+        <Carousel.Previous className="px-4 py-2 bg-gray-200 rounded">←</Carousel.Previous>
+        <Carousel.Next className="px-4 py-2 bg-gray-200 rounded">→</Carousel.Next>
+      </div>
+    </Carousel.Root>
+  ),
+};

package/src/carousel/index.parts.ts

@@ -0,0 +1,5 @@
+export { CarouselContent as Content } from './carousel-content';
+export { CarouselItem as Item } from './carousel-item';
+export { CarouselNext as Next } from './carousel-next';
+export { CarouselPrevious as Previous } from './carousel-previous';
+export { CarouselRoot as Root } from './carousel-root';

package/src/carousel/index.ts

@@ -0,0 +1,4 @@
+export type { CarouselItemProps } from './carousel-item';
+export type { CarouselApi, CarouselRootProps } from './carousel-root';
+export { useCarousel } from './carousel-root';
+export * as Carousel from './index.parts';

package/src/{stories/Countdown.stories.tsx → countdown/countdown.stories.tsx}

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Countdown } from '../components/countdown';
+import { Countdown } from './countdown';
 
 const meta: Meta<typeof Countdown> = {
   component: Countdown,

package/src/{components → countdown}/countdown.tsx

@@ -1,5 +1,7 @@
+'use client';
+
+import { cn } from '@regardio/tailwind/utils';
 import { useEffect, useState } from 'react';
-import { cn } from '../utils/cn';
 
 export function Countdown() {
   const [timerValue, setTimerValue] = useState(0);
@@ -20,12 +22,6 @@ export function Countdown() {
     };
   }, []);
 
-  // const formattedDate = partyDate.toLocaleDateString(data.locale, {
-  //   day: '2-digit',
-  //   month: 'long',
-  //   year: 'numeric',
-  // });
-
   return (
     <div
       className={cn(

package/src/countdown/index.ts

@@ -0,0 +1 @@
+export { Countdown } from './countdown';

package/src/{stories/GenericError.stories.tsx → generic-error/generic-error.stories.tsx}

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import { createMemoryRouter, RouterProvider } from 'react-router';
-import { GenericError, getErrorDescriptor } from '../components/generic-error';
+import { GenericError, getErrorDescriptor } from './generic-error';
 
 const meta: Meta<typeof GenericError> = {
   component: GenericError,

package/src/{components → generic-error}/generic-error.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import type { ReactElement } from 'react';
 import { isRouteErrorResponse, useRouteError } from 'react-router';
 

package/src/generic-error/index.ts

@@ -0,0 +1,2 @@
+export type { ErrorDescriptor } from './generic-error';
+export { GenericError, getErrorDescriptor } from './generic-error';

package/src/grid/grid-item.tsx

@@ -0,0 +1,188 @@
+import { tv, type VariantProps } from '@regardio/tailwind/utils';
+import { forwardRef, type HTMLAttributes } from 'react';
+
+const gridItem = tv({
+  defaultVariants: {
+    span: 12,
+  },
+  slots: {
+    root: ['relative'],
+  },
+  variants: {
+    end: {
+      1: { root: 'col-end-1' },
+      2: { root: 'col-end-2' },
+      3: { root: 'col-end-3' },
+      4: { root: 'col-end-4' },
+      5: { root: 'col-end-5' },
+      6: { root: 'col-end-6' },
+      7: { root: 'col-end-7' },
+      8: { root: 'col-end-8' },
+      9: { root: 'col-end-9' },
+      10: { root: 'col-end-10' },
+      11: { root: 'col-end-11' },
+      12: { root: 'col-end-12' },
+      13: { root: 'col-end-13' },
+      auto: { root: 'col-end-auto' },
+    },
+    rowSpan: {
+      1: { root: 'row-span-1' },
+      2: { root: 'row-span-2' },
+      3: { root: 'row-span-3' },
+      4: { root: 'row-span-4' },
+      5: { root: 'row-span-5' },
+      6: { root: 'row-span-6' },
+      full: { root: 'row-span-full' },
+    },
+    span: {
+      1: { root: 'col-span-1' },
+      2: { root: 'col-span-2' },
+      3: { root: 'col-span-3' },
+      4: { root: 'col-span-4' },
+      5: { root: 'col-span-5' },
+      6: { root: 'col-span-6' },
+      7: { root: 'col-span-7' },
+      8: { root: 'col-span-8' },
+      9: { root: 'col-span-9' },
+      10: { root: 'col-span-10' },
+      11: { root: 'col-span-11' },
+      12: { root: 'col-span-12' },
+      full: { root: 'col-span-full' },
+    },
+    spanLg: {
+      1: { root: '@lg:col-span-1' },
+      2: { root: '@lg:col-span-2' },
+      3: { root: '@lg:col-span-3' },
+      4: { root: '@lg:col-span-4' },
+      5: { root: '@lg:col-span-5' },
+      6: { root: '@lg:col-span-6' },
+      7: { root: '@lg:col-span-7' },
+      8: { root: '@lg:col-span-8' },
+      9: { root: '@lg:col-span-9' },
+      10: { root: '@lg:col-span-10' },
+      11: { root: '@lg:col-span-11' },
+      12: { root: '@lg:col-span-12' },
+      full: { root: '@lg:col-span-full' },
+    },
+    spanMd: {
+      1: { root: '@md:col-span-1' },
+      2: { root: '@md:col-span-2' },
+      3: { root: '@md:col-span-3' },
+      4: { root: '@md:col-span-4' },
+      5: { root: '@md:col-span-5' },
+      6: { root: '@md:col-span-6' },
+      7: { root: '@md:col-span-7' },
+      8: { root: '@md:col-span-8' },
+      9: { root: '@md:col-span-9' },
+      10: { root: '@md:col-span-10' },
+      11: { root: '@md:col-span-11' },
+      12: { root: '@md:col-span-12' },
+      full: { root: '@md:col-span-full' },
+    },
+    spanSm: {
+      1: { root: '@sm:col-span-1' },
+      2: { root: '@sm:col-span-2' },
+      3: { root: '@sm:col-span-3' },
+      4: { root: '@sm:col-span-4' },
+      5: { root: '@sm:col-span-5' },
+      6: { root: '@sm:col-span-6' },
+      7: { root: '@sm:col-span-7' },
+      8: { root: '@sm:col-span-8' },
+      9: { root: '@sm:col-span-9' },
+      10: { root: '@sm:col-span-10' },
+      11: { root: '@sm:col-span-11' },
+      12: { root: '@sm:col-span-12' },
+      full: { root: '@sm:col-span-full' },
+    },
+    spanXl: {
+      1: { root: '@xl:col-span-1' },
+      2: { root: '@xl:col-span-2' },
+      3: { root: '@xl:col-span-3' },
+      4: { root: '@xl:col-span-4' },
+      5: { root: '@xl:col-span-5' },
+      6: { root: '@xl:col-span-6' },
+      7: { root: '@xl:col-span-7' },
+      8: { root: '@xl:col-span-8' },
+      9: { root: '@xl:col-span-9' },
+      10: { root: '@xl:col-span-10' },
+      11: { root: '@xl:col-span-11' },
+      12: { root: '@xl:col-span-12' },
+      full: { root: '@xl:col-span-full' },
+    },
+    spanXs: {
+      1: { root: '@xs:col-span-1' },
+      2: { root: '@xs:col-span-2' },
+      3: { root: '@xs:col-span-3' },
+      4: { root: '@xs:col-span-4' },
+      5: { root: '@xs:col-span-5' },
+      6: { root: '@xs:col-span-6' },
+      7: { root: '@xs:col-span-7' },
+      8: { root: '@xs:col-span-8' },
+      9: { root: '@xs:col-span-9' },
+      10: { root: '@xs:col-span-10' },
+      11: { root: '@xs:col-span-11' },
+      12: { root: '@xs:col-span-12' },
+      full: { root: '@xs:col-span-full' },
+    },
+    start: {
+      1: { root: 'col-start-1' },
+      2: { root: 'col-start-2' },
+      3: { root: 'col-start-3' },
+      4: { root: 'col-start-4' },
+      5: { root: 'col-start-5' },
+      6: { root: 'col-start-6' },
+      7: { root: 'col-start-7' },
+      8: { root: 'col-start-8' },
+      9: { root: 'col-start-9' },
+      10: { root: 'col-start-10' },
+      11: { root: 'col-start-11' },
+      12: { root: 'col-start-12' },
+      13: { root: 'col-start-13' },
+      auto: { root: 'col-start-auto' },
+    },
+  },
+});
+
+export type GridItemVariants = VariantProps<typeof gridItem>;
+
+export interface GridItemProps extends HTMLAttributes<HTMLDivElement>, GridItemVariants {
+  classNames?: {
+    root?: string;
+  };
+}
+
+export const GridItem = forwardRef<HTMLDivElement, GridItemProps>(
+  (
+    {
+      children,
+      className,
+      classNames,
+      span,
+      spanXs,
+      spanSm,
+      spanMd,
+      spanLg,
+      spanXl,
+      start,
+      end,
+      rowSpan,
+      ...props
+    },
+    ref,
+  ) => {
+    const styles = gridItem({ end, rowSpan, span, spanLg, spanMd, spanSm, spanXl, spanXs, start });
+
+    return (
+      <div
+        className={styles.root({ className: classNames?.root ?? className })}
+        ref={ref}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  },
+);
+GridItem.displayName = 'GridItem';
+
+export { gridItem };

package/src/grid/grid-root.tsx

@@ -0,0 +1,72 @@
+import { tv, type VariantProps } from '@regardio/tailwind/utils';
+import { createContext, forwardRef, type HTMLAttributes, useContext } from 'react';
+
+const grid = tv({
+  defaultVariants: {
+    flow: 'dense',
+  },
+  slots: {
+    root: [
+      'u-grid',
+      'grid',
+      'grid-cols-12',
+      'gap-[var(--spacing-grid-gutter)]',
+      'w-full',
+      'container-[grid]/inline-size',
+    ],
+  },
+  variants: {
+    align: {
+      center: { root: 'content-center' },
+      end: { root: 'content-end' },
+      start: { root: 'content-start' },
+      stretch: { root: 'content-stretch' },
+    },
+    flow: {
+      column: { root: 'grid-auto-flow-col' },
+      dense: { root: 'grid-auto-flow-dense' },
+      row: { root: 'grid-auto-flow-row' },
+    },
+  },
+});
+
+type GridVariants = VariantProps<typeof grid>;
+
+interface GridContextValue {
+  styles: ReturnType<typeof grid>;
+}
+
+const GridContext = createContext<GridContextValue | null>(null);
+
+export function useGrid() {
+  const context = useContext(GridContext);
+  if (!context) {
+    throw new Error('useGrid must be used within a <Grid.Root />');
+  }
+  return context;
+}
+
+export interface GridRootProps extends HTMLAttributes<HTMLDivElement>, GridVariants {
+  classNames?: {
+    root?: string;
+  };
+}
+
+export const GridRoot = forwardRef<HTMLDivElement, GridRootProps>(
+  ({ children, className, classNames, flow, align, ...props }, ref) => {
+    const styles = grid({ align, flow });
+
+    return (
+      <GridContext.Provider value={{ styles }}>
+        <div
+          className={styles.root({ className: classNames?.root ?? className })}
+          ref={ref}
+          {...props}
+        >
+          {children}
+        </div>
+      </GridContext.Provider>
+    );
+  },
+);
+GridRoot.displayName = 'GridRoot';