@clicktap/ui 0.14.11 → 0.14.13

package/components/Accordion/Accordion.tsx

@@ -0,0 +1,82 @@
+'use client';
+
+import { Accordion as NextUiAccordion } from '@nextui-org/accordion';
+import type { AccordionProps } from '@nextui-org/accordion';
+import { cn } from '../../utils/cn';
+import { DownArrow } from '../Icon/DownArrow';
+
+export function Accordion({
+  children,
+  variant,
+  isCompact,
+  className,
+  itemClasses,
+  ...props
+}: AccordionProps) {
+  return (
+    <NextUiAccordion
+      variant={variant}
+      isCompact={isCompact}
+      dividerProps={{
+        className: cn(
+          'my-2 border-solid border-slate-200',
+          variant === 'shadow' && 'border-slate-300'
+        ),
+      }}
+      className={cn(
+        'px-0',
+        variant === 'bordered' && [
+          'px-4 py-4 rounded-xl border-2 border-slate-200',
+        ],
+        variant === 'shadow' && [
+          'px-4 py-4 rounded-xl bg-slate-100 shadow-slate-200 border border-slate-200',
+        ],
+        className
+      )}
+      itemClasses={{
+        base: cn(
+          'w-full py-2',
+          'data-[disabled="true"]:pointer-events-none data-[disabled="true"]:opacity-50',
+          variant === 'bordered' && ['rounded-xl py-0'],
+          variant === 'splitted' && [
+            'flex flex-col bg-slate-100 rounded-xl border border-slate-200',
+          ],
+          isCompact && 'py-0',
+          itemClasses?.base
+        ),
+        trigger: cn(
+          'w-full h-full flex items-center gap-3 py-0 appearance-none cursor-pointer select-none',
+          'data-[focus-visible="true"]:outline-2 data-[focus-visible="true"]:outline data-[focus-visible="true"]:outline-slate-100',
+          'bg-transparent text-inherit',
+          isCompact && ['py-2'],
+          itemClasses?.trigger
+        ),
+        title: cn(
+          'text-xl font-semibold',
+          isCompact && 'text-base',
+          itemClasses?.title
+        ),
+        subtitle: cn(
+          'text-base',
+          isCompact && 'text-sm',
+          itemClasses?.subtitle
+        ),
+        titleWrapper: cn('text-left', itemClasses?.titleWrapper),
+        startContent: cn('shrink-0', itemClasses?.startContent),
+        content: cn([isCompact ? 'py-1' : 'py-2'], itemClasses?.content),
+        indicator: itemClasses?.indicator,
+        heading: itemClasses?.heading,
+      }}
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...props}
+    >
+      {children}
+    </NextUiAccordion>
+  );
+}
+
+export default Accordion;
+
+export function AccordionItemArrow() {
+  return <DownArrow className="w-4 h-4" />;
+}

package/components/Accordion/index.ts

@@ -0,0 +1,3 @@
+export { Accordion, AccordionItemArrow } from './Accordion';
+export { AccordionItem } from '@nextui-org/accordion';
+export type { AccordionProps } from '@nextui-org/accordion';

package/components/Avatar/Avatar.stories.tsx

@@ -0,0 +1,99 @@
+import type { ReactNode } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Avatar } from './Avatar';
+import type { AvatarProps } from './Avatar.types';
+import { AvatarGroup } from './AvatarGroup/AvatarGroup';
+import type { AvatarGroupProps } from './AvatarGroup/AvatarGroup.types';
+
+function Layout({ children }: { children: ReactNode }) {
+  return children;
+}
+
+function AvatarExample(props: AvatarProps) {
+  return (
+    <Layout>
+      {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+      <Avatar {...props} />
+    </Layout>
+  );
+}
+
+function AvatarGroupExample(props: AvatarGroupProps) {
+  return (
+    <Layout>
+      {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+      <AvatarGroup {...props}>
+        <Avatar src="https://letsenhance.io/static/8f5e523ee6b2479e26ecc91b9c25261e/1015f/MainAfter.jpg" />
+        <Avatar src="https://i.pravatar.cc/150?u=a042581f4e29026704d" />
+        <Avatar src="https://i.pravatar.cc/150?u=a04258114e29026702d" />
+        <Avatar src="https://letsenhance.io/static/8f5e523ee6b2479e26ecc91b9c25261e/1015f/MainAfter.jpg" />
+        <Avatar src="https://i.pravatar.cc/150?u=a042581f4e29026704d" />
+        <Avatar src="https://i.pravatar.cc/150?u=a04258114e29026702d" />
+      </AvatarGroup>
+    </Layout>
+  );
+}
+
+type Story = StoryObj<typeof Avatar>;
+type StoryGroup = StoryObj<typeof AvatarGroup>;
+
+const meta: Meta<typeof Layout> = {
+  component: Layout,
+};
+
+export default meta;
+
+export const AvatarComponent: Story = {
+  name: 'Avatar',
+  render: AvatarExample,
+  argTypes: {
+    src: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+    size: {
+      options: ['sm', 'md', 'lg'],
+      control: 'radio',
+    },
+    showFallback: {
+      control: 'boolean',
+    },
+    radius: {
+      options: ['sm', 'md', 'lg', 'none', 'full'],
+      control: 'radio',
+    },
+    isBordered: {
+      control: 'boolean',
+    },
+    isDisabled: {
+      control: 'boolean',
+    },
+    isFocusable: {
+      control: 'boolean',
+    },
+  },
+  args: {
+    src: 'https://letsenhance.io/static/8f5e523ee6b2479e26ecc91b9c25261e/1015f/MainAfter.jpg',
+    name: 'Avatar',
+    size: 'md',
+    showFallback: false,
+    radius: 'full',
+    isBordered: false,
+    isDisabled: false,
+    isFocusable: false,
+  },
+};
+export const AvatarGroupComponent: StoryGroup = {
+  name: 'Avatar Group',
+  render: AvatarGroupExample,
+  argTypes: {
+    isGrid: {
+      control: 'boolean',
+    },
+  },
+  args: {
+    isGrid: false,
+  },
+};

package/components/Avatar/Avatar.tsx

@@ -0,0 +1,120 @@
+'use client';
+
+import { useAvatarGroupContext, Avatar as UiAvatar } from '@nextui-org/avatar';
+import { cn } from '../../utils/cn';
+import type { AvatarProps } from './Avatar.types';
+
+export function Avatar({
+  icon,
+  className,
+  isDisabled,
+  size,
+  classNames,
+  isBordered,
+  radius,
+  ...props
+}: AvatarProps) {
+  const avatarGroupContext = useAvatarGroupContext();
+  return (
+    <div
+      className={cn(
+        'group',
+        'z-10',
+        'first:ms-0',
+        !avatarGroupContext?.isGrid && !!avatarGroupContext && '-ms-2',
+        className
+      )}
+    >
+      <UiAvatar
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...props}
+        isDisabled={isDisabled}
+        size={size}
+        radius={radius}
+        isBordered={isBordered}
+        className={cn(
+          !avatarGroupContext?.isGrid &&
+            !!avatarGroupContext &&
+            'group-hover:-translate-y-3.5',
+          'transition-transform duration-300 ease-in-out',
+          'bg-slate-100',
+          'flex items-center justify-center',
+          'relative',
+          'z-10',
+          'overflow-hidden',
+          isDisabled ? 'opacity-50' : 'opacity-100',
+          [
+            size === 'sm' && 'h-8',
+            size === 'md' && 'h-10',
+            size === 'lg' && 'h-12',
+            size === 'sm' && 'w-8',
+            size === 'md' && 'w-10',
+            size === 'lg' && 'w-12',
+          ],
+          [
+            radius === 'full' && 'rounded-full',
+            radius === 'lg' && 'rounded-2xl',
+            radius === 'md' && 'rounded-xl',
+            radius === 'sm' && 'rounded-lg',
+            radius === 'none' && 'rounded-none',
+          ],
+          isBordered &&
+            'shadow-[#fff_0px_0px_0px_2px,_#f1f5f9_0px_0px_0px_4px,_#00000000_0px_0px_0px_0px]',
+          classNames?.base
+        )}
+        classNames={{
+          icon: cn(
+            'data-[loaded=true]:opacity-100 opacity-0',
+            'absolute',
+            'w-full',
+            'h-full',
+            'overflow-hidden',
+            'object-cover',
+            'object-center',
+            'transition-opacity ease-in-out duration-500',
+            classNames?.icon
+          ),
+          name: cn(
+            'flex items-center justify-center',
+            'absolute top-1/2 left-1/2',
+            '-translate-x-1/2 -translate-y-1/2',
+            'text-xs text-center',
+            'max-w-full',
+            'overflow-hidden',
+            classNames?.name
+          ),
+          fallback: cn(
+            'flex items-center justify-center',
+            'absolute top-1/2 left-1/2',
+            '-translate-x-1/2 -translate-y-1/2',
+            'text-xs text-center',
+            'max-w-full',
+            'overflow-hidden',
+            classNames?.fallback
+          ),
+        }}
+        icon={
+          icon || (
+            <svg
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M20 21C20 19.6044 20 18.9067 19.8278 18.3389C19.44 17.0605 18.4395 16.06 17.1611 15.6722C16.5933 15.5 15.8956 15.5 14.5 15.5H9.5C8.10444 15.5 7.40665 15.5 6.83886 15.6722C5.56045 16.06 4.56004 17.0605 4.17224 18.3389C4 18.9067 4 19.6044 4 21M16.5 7.5C16.5 9.98528 14.4853 12 12 12C9.51472 12 7.5 9.98528 7.5 7.5C7.5 5.01472 9.51472 3 12 3C14.4853 3 16.5 5.01472 16.5 7.5Z"
+                stroke="black"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+            </svg>
+          )
+        }
+      />
+    </div>
+  );
+}
+
+export default Avatar;

package/components/Avatar/Avatar.types.ts

@@ -0,0 +1,3 @@
+import type { AvatarProps as NextAvatarProps } from '@nextui-org/avatar';
+
+export type AvatarProps = Omit<NextAvatarProps, 'color'>;

package/components/Avatar/AvatarGroup/AvatarGroup.tsx

@@ -0,0 +1,32 @@
+'use client';
+
+import { AvatarGroup as UIAvatarGroup } from '@nextui-org/avatar';
+import type { PropsWithChildren } from 'react';
+import { cn } from '../../../utils/cn';
+import type { AvatarGroupProps } from './AvatarGroup.types';
+
+export function AvatarGroup({
+  children,
+  isGrid,
+  renderCount,
+  className,
+}: PropsWithChildren<AvatarGroupProps>) {
+  return (
+    <UIAvatarGroup
+      isGrid={isGrid}
+      max={0}
+      renderCount={renderCount ?? undefined}
+      className={cn(
+        isGrid ? 'inline-grid' : 'flex',
+        isGrid ? 'gap-3' : 'gap-0',
+        'grid-cols-4',
+        'items-center',
+        className
+      )}
+    >
+      {children}
+    </UIAvatarGroup>
+  );
+}
+
+export default AvatarGroup;

package/components/Avatar/AvatarGroup/AvatarGroup.types.ts

@@ -0,0 +1,8 @@
+import type { AvatarGroupProps as NextAvatarGroupProps } from '@nextui-org/avatar';
+
+export type AvatarGroupProps = Pick<
+  NextAvatarGroupProps,
+  'isGrid' | 'renderCount'
+> & {
+  className?: string;
+};

package/components/Avatar/index.ts

@@ -0,0 +1,4 @@
+export { Avatar } from './Avatar';
+export { AvatarGroup } from './AvatarGroup/AvatarGroup';
+export type { AvatarProps } from './Avatar.types';
+export type { AvatarGroupProps } from './AvatarGroup/AvatarGroup.types';

package/components/Badge/Badge.stories.tsx

@@ -0,0 +1,72 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Badge } from './Badge';
+import type { BadgeProps } from './Badge.types';
+import { Avatar } from '../Avatar/Avatar';
+
+type Story = StoryObj<typeof Badge>;
+
+function Component(props: BadgeProps) {
+  return (
+    <Badge {...props}>
+      <Avatar name="Regular" radius="md" />
+    </Badge>
+  );
+}
+
+const meta: Meta<typeof Component> = {
+  component: Component,
+};
+
+export default meta;
+
+export const Example: Story = {
+  render: Component,
+  argTypes: {
+    content: {
+      control: 'text',
+    },
+    variant: {
+      options: ['shadow', 'flat', 'solid', 'faded'],
+      control: 'radio',
+    },
+    size: {
+      options: ['sm', 'md', 'lg'],
+      control: 'radio',
+    },
+    placement: {
+      options: ['top-right', 'bottom-right', 'bottom-left', 'top-left'],
+      control: 'radio',
+    },
+    shape: {
+      options: ['circle', 'rectangle'],
+      control: 'radio',
+    },
+    isInvisible: {
+      control: 'boolean',
+    },
+    isOneChar: {
+      control: 'boolean',
+    },
+    isDot: {
+      control: 'boolean',
+    },
+    disableAnimation: {
+      control: 'boolean',
+    },
+    showOutline: {
+      control: 'boolean',
+    },
+  },
+  args: {
+    content: '5',
+    variant: 'solid',
+    size: 'md',
+    placement: 'top-right',
+    shape: 'rectangle',
+    isInvisible: false,
+    isOneChar: false,
+    isDot: false,
+    disableAnimation: false,
+    showOutline: true,
+  },
+};

package/components/Badge/Badge.tsx

@@ -0,0 +1,169 @@
+'use client';
+
+import { useId } from 'react';
+import { AnimatePresence, motion } from 'framer-motion';
+import { Badge as NextUIBadge } from '@nextui-org/badge';
+import { cn } from '../../utils/cn';
+import type { BadgeProps } from './Badge.types';
+
+const animationVariants = {
+  hidden: {
+    opacity: 0,
+    transform: 'scale(0)',
+  },
+  show: {
+    opacity: 1,
+    transform: 'scale(1)',
+  },
+};
+
+export function Badge({
+  children,
+  isInvisible,
+  disableAnimation,
+  placement = 'top-right',
+  shape = 'rectangle',
+  className,
+  classNames,
+  showOutline = false,
+  content,
+  isDot,
+  isOneChar,
+  size = 'md',
+  variant = 'solid',
+  ...props
+}: BadgeProps) {
+  const id = useId();
+  const transition = disableAnimation
+    ? { duration: 0 }
+    : { type: 'spring', bounce: 0.3 };
+
+  const isOneCharContent = String(content)?.length === 1 || isOneChar;
+
+  const textVariants = {
+    sm: 'text-xs',
+    md: 'text-sm',
+    lg: 'text-sm',
+  };
+
+  const oneCharSizeVariants = {
+    sm: 'w-4 h-4',
+    md: 'w-5 h-5',
+    lg: 'w-6 h-6',
+  };
+
+  const sizeVariants = {
+    sm: 'min-w-4 h-4',
+    md: 'min-w-5 h-5',
+    lg: 'min-w-6 h-6',
+  };
+
+  const sizeVariant = isOneCharContent
+    ? oneCharSizeVariants[size]
+    : sizeVariants[size];
+
+  return (
+    <NextUIBadge
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...props}
+      size={size}
+      variant={variant}
+      isInvisible={isInvisible}
+      isDot={isDot}
+      classNames={{
+        base: cn('relative', 'inline-flex shrink-0', classNames?.base),
+        badge: cn(
+          'p-0',
+          'border-0',
+          'absolute z-10',
+          [
+            placement === 'top-right' &&
+              shape === 'rectangle' &&
+              'top-0.5 right-px',
+            placement === 'top-right' && shape === 'circle' && 'top-1 right-1',
+
+            placement === 'bottom-right' &&
+              shape === 'rectangle' &&
+              'bottom-0.5 right-px',
+            placement === 'bottom-right' &&
+              shape === 'circle' &&
+              'bottom-1 right-1',
+
+            placement === 'top-left' &&
+              shape === 'rectangle' &&
+              'top-0.5 left-px',
+            placement === 'top-left' && shape === 'circle' && 'top-1 left-1',
+
+            placement === 'bottom-left' &&
+              shape === 'rectangle' &&
+              'bottom-0.5 left-px',
+            placement === 'bottom-left' &&
+              shape === 'circle' &&
+              'bottom-1 left-1',
+          ],
+          [
+            placement === 'top-right' && 'translate-x-1/2 -translate-y-1/2',
+            placement === 'bottom-right' && 'translate-x-1/2 translate-y-1/2',
+            placement === 'bottom-left' && '-translate-x-1/2 translate-y-1/2',
+            placement === 'top-left' && '-translate-x-1/2 -translate-y-1/2',
+          ],
+          classNames?.badge
+        ),
+      }}
+      content={
+        <AnimatePresence>
+          {!isInvisible && (
+            <motion.div
+              layout
+              key={`badge-${id}`}
+              variants={animationVariants}
+              initial={disableAnimation ? 'show' : 'hidden'}
+              transition={transition}
+              animate="show"
+              exit="hidden"
+              className={cn(
+                'flex flex-wrap',
+                'place-content-center',
+                'z-10',
+                'box-border',
+                'rounded-full',
+                'py-0 px-1',
+                'font-normal text-slate-900',
+                'select-none',
+                // 'transition-transform transition-opacity duration-300 ease-in-out',
+                'whitespace-normal',
+                variant === 'faded' ? 'text-slate-800' : 'text-white',
+                !content || isDot ? 'w-3.5 h-3.5' : sizeVariant,
+                (typeof content === 'string' && content.length > 1) || isDot
+                  ? 'text-xs'
+                  : textVariants[size],
+                [
+                  variant === 'solid' && 'bg-slate-800',
+                  variant === 'shadow' && 'bg-slate-800',
+                  variant === 'flat' && 'bg-slate-800/55',
+                  variant === 'faded' && 'bg-white',
+                ],
+                [
+                  variant === 'faded' &&
+                    'border-2 border-solid border-slate-800',
+                  showOutline &&
+                    variant !== 'faded' &&
+                    'border-2 border-solid border-white',
+                ],
+                variant === 'shadow' &&
+                  'shadow-[0_0_0_0_rgba(0,0,0,0),_0_0_0_0_rgba(0,0,0,0),_0_10px_15px_-3px_rgba(30,41,59,0.3),_0_4px_6px_-4px_rgba(30,41,59,0.3)]',
+                className
+              )}
+            >
+              {content}
+            </motion.div>
+          )}
+        </AnimatePresence>
+      }
+    >
+      {children}
+    </NextUIBadge>
+  );
+}
+
+export default Badge;

package/components/Badge/Badge.types.ts

@@ -0,0 +1,3 @@
+import type { BadgeProps as NextBadgeProps } from '@nextui-org/badge';
+
+export type BadgeProps = Omit<NextBadgeProps, 'color | disableOutline'>;

package/components/Badge/index.ts

@@ -0,0 +1,2 @@
+export { Badge } from './Badge';
+export type { BadgeProps } from './Badge.types';

package/components/Breadcrumbs/BreadcrumbEllipsis.tsx

@@ -0,0 +1,47 @@
+'use client';
+
+import type { BreadcrumbEllipsisProps } from './BreadcrumbEllipsis.types';
+
+export function BreadcrumbEllipsis({
+  children,
+  ...props
+}: BreadcrumbEllipsisProps) {
+  return (
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    <span {...props} aria-hidden="true">
+      {children ?? (
+        <svg
+          width="16"
+          height="16"
+          viewBox="0 0 24 24"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z"
+            stroke="black"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+          <path
+            d="M19 13C19.5523 13 20 12.5523 20 12C20 11.4477 19.5523 11 19 11C18.4477 11 18 11.4477 18 12C18 12.5523 18.4477 13 19 13Z"
+            stroke="black"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+          <path
+            d="M5 13C5.55228 13 6 12.5523 6 12C6 11.4477 5.55228 11 5 11C4.44772 11 4 11.4477 4 12C4 12.5523 4.44772 13 5 13Z"
+            stroke="black"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+      )}
+    </span>
+  );
+}
+
+export default BreadcrumbEllipsis;

package/components/Breadcrumbs/BreadcrumbEllipsis.types.ts

@@ -0,0 +1,5 @@
+import type { HTMLAttributes, PropsWithChildren } from 'react';
+
+export type BreadcrumbEllipsisProps = PropsWithChildren<
+  HTMLAttributes<HTMLSpanElement>
+>;

package/components/Breadcrumbs/BreadcrumbItem.tsx

@@ -0,0 +1,23 @@
+'use client';
+
+import { Breadcrumb } from 'react-aria-components';
+import { cn } from '../../utils/cn';
+import type { BreadcrumbItemProps } from './BreadcrumbItem.types';
+
+export function BreadcrumbItem({
+  children,
+  className,
+  ...props
+}: BreadcrumbItemProps) {
+  return (
+    <Breadcrumb
+      className={cn('flex items-center', className)}
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...props}
+    >
+      {children}
+    </Breadcrumb>
+  );
+}
+
+export default BreadcrumbItem;