@clicktap/ui 0.14.25 → 0.14.27

package/components/Avatar/Avatar.d.ts

@@ -1,3 +1,7 @@
 import { AvatarProps } from './Avatar.types';
-export declare function Avatar({ icon, className, isDisabled, size, classNames, isBordered, radius, ...props }: AvatarProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * SSR-compatible Avatar component.
+ * Pure Tailwind implementation that works with Next.js App Router SSR.
+ */
+export declare function Avatar({ icon, className, isDisabled, size, classNames, isBordered, radius, name, src, alt, }: AvatarProps): import("react/jsx-runtime").JSX.Element;
 export default Avatar;

package/components/Avatar/Avatar.js

@@ -1 +1 @@
-import{jsx as f}from"react/jsx-runtime";import{useAvatarGroupContext as u,Avatar as h}from"@nextui-org/avatar";import{cn as r}from"../../utils/cn.js";function v({icon:d,className:x,isDisabled:i,size:o,classNames:t,isBordered:l,radius:n,...p}){const e=u();return f("div",{className:r("group","z-10","first:ms-0",!(e!=null&&e.isGrid)&&!!e&&"-ms-2",x),children:f(h,{...p,isDisabled:i,size:o,radius:n,isBordered:l,className:r(!(e!=null&&e.isGrid)&&!!e&&"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",i?"opacity-50":"opacity-100",[o==="sm"&&"h-8",o==="md"&&"h-10",o==="lg"&&"h-12",o==="sm"&&"w-8",o==="md"&&"w-10",o==="lg"&&"w-12"],[n==="full"&&"rounded-full",n==="lg"&&"rounded-2xl",n==="md"&&"rounded-xl",n==="sm"&&"rounded-lg",n==="none"&&"rounded-none"],l&&"shadow-[#fff_0px_0px_0px_2px,_#f1f5f9_0px_0px_0px_4px,_#00000000_0px_0px_0px_0px]",t==null?void 0:t.base),classNames:{icon:r("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",t==null?void 0:t.icon),name:r("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",t==null?void 0:t.name),fallback:r("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",t==null?void 0:t.fallback)},icon:d||f("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:f("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"})})})})}export{v as Avatar,v as default};
+import{jsx as e,jsxs as h}from"react/jsx-runtime";import{cn as o}from"../../utils/cn.js";const w=()=>e("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:e("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:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})});function C({icon:f,className:x,isDisabled:l,size:d="md",classNames:t,isBordered:p,radius:n="full",name:r,src:i,alt:u}){return e("div",{className:o("group","z-10","first:ms-0",x),children:h("div",{className:o("transition-transform duration-300 ease-in-out","bg-slate-100","flex items-center justify-center","relative","z-10","overflow-hidden",l?"opacity-50":"opacity-100",[d==="sm"&&"h-8 w-8 text-xs",d==="md"&&"h-10 w-10 text-sm",d==="lg"&&"h-12 w-12 text-base"],[n==="full"&&"rounded-full",n==="lg"&&"rounded-2xl",n==="md"&&"rounded-xl",n==="sm"&&"rounded-lg",n==="none"&&"rounded-none"],p&&"shadow-[#fff_0px_0px_0px_2px,_#f1f5f9_0px_0px_0px_4px,_#00000000_0px_0px_0px_0px]",t==null?void 0:t.base),children:[i&&e("img",{src:i,alt:u||r||"Avatar",className:o("absolute","w-full","h-full","overflow-hidden","object-cover","object-center",t==null?void 0:t.icon)}),!i&&r&&e("span",{className:o("flex items-center justify-center","text-center","max-w-full","overflow-hidden","font-medium",t==null?void 0:t.name),children:r}),!i&&!r&&e("span",{className:o("flex items-center justify-center",t==null?void 0:t.fallback),children:f||e(w,{})})]})})}export{C as Avatar,C as default};

package/components/Avatar/Avatar.types.d.ts

@@ -1,2 +1,28 @@
-import { AvatarProps as NextAvatarProps } from '@nextui-org/avatar';
-export type AvatarProps = Omit<NextAvatarProps, 'color'>;
+import { ReactNode } from 'react';
+export type AvatarProps = {
+    /** Custom icon to display instead of default user icon */
+    icon?: ReactNode;
+    /** Additional class name for the wrapper */
+    className?: string;
+    /** Whether the avatar is disabled */
+    isDisabled?: boolean;
+    /** Size of the avatar */
+    size?: 'sm' | 'md' | 'lg';
+    /** Custom class names for avatar parts */
+    classNames?: {
+        base?: string;
+        icon?: string;
+        name?: string;
+        fallback?: string;
+    };
+    /** Whether to show a border around the avatar */
+    isBordered?: boolean;
+    /** Border radius of the avatar */
+    radius?: 'full' | 'lg' | 'md' | 'sm' | 'none';
+    /** Name/initials to display */
+    name?: string;
+    /** Image source URL */
+    src?: string;
+    /** Alt text for the image */
+    alt?: string;
+};

package/components/Avatar/AvatarGroup/AvatarGroup.d.ts

@@ -1,4 +1,8 @@
 import { PropsWithChildren } from 'react';
 import { AvatarGroupProps } from './AvatarGroup.types';
-export declare function AvatarGroup({ children, isGrid, renderCount, className, }: PropsWithChildren<AvatarGroupProps>): import("react/jsx-runtime").JSX.Element;
+/**
+ * SSR-compatible AvatarGroup component.
+ * Pure Tailwind implementation that works with Next.js App Router SSR.
+ */
+export declare function AvatarGroup({ children, isGrid, className, }: PropsWithChildren<AvatarGroupProps>): import("react/jsx-runtime").JSX.Element;
 export default AvatarGroup;

package/components/Avatar/AvatarGroup/AvatarGroup.js

@@ -1 +1 @@
-import{jsx as e}from"react/jsx-runtime";import{AvatarGroup as m}from"@nextui-org/avatar";import{cn as n}from"../../../utils/cn.js";function i({children:a,isGrid:r,renderCount:o,className:t}){return e(m,{isGrid:r,max:0,renderCount:o??void 0,className:n(r?"inline-grid":"flex",r?"gap-3":"gap-0","grid-cols-4","items-center",t),children:a})}export{i as AvatarGroup,i as default};
+import{jsx as a}from"react/jsx-runtime";import{cn as o}from"../../../utils/cn.js";function m({children:e,isGrid:r,className:t}){return a("div",{className:o(r?"inline-grid":"flex",r?"gap-3":"gap-0","grid-cols-4","items-center",t),children:e})}export{m as AvatarGroup,m as default};

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

@@ -1,4 +1,9 @@
-import { AvatarGroupProps as NextAvatarGroupProps } from '@nextui-org/avatar';
-export type AvatarGroupProps = Pick<NextAvatarGroupProps, 'isGrid' | 'renderCount'> & {
+import { ReactNode } from 'react';
+export type AvatarGroupProps = {
+    /** Whether to display avatars in a grid layout */
+    isGrid?: boolean;
+    /** Custom render function for the count indicator */
+    renderCount?: (count: number) => ReactNode;
+    /** Additional class name */
     className?: string;
 };

package/components/Avatar/index.js

@@ -1 +1 @@
-import{Avatar as a}from"./Avatar.js";import{AvatarGroup as e}from"./AvatarGroup/AvatarGroup.js";import"react/jsx-runtime";import"@nextui-org/avatar";import"../../utils/cn.js";export{a as Avatar,e as AvatarGroup};
+import{Avatar as a}from"./Avatar.js";import{AvatarGroup as e}from"./AvatarGroup/AvatarGroup.js";import"react/jsx-runtime";import"../../utils/cn.js";export{a as Avatar,e as AvatarGroup};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clicktap/ui",
-  "version": "0.14.25",
+  "version": "0.14.27",
   "private": false,
   "author": "Clicktap",
   "description": "A library of React UI components and low-level hooks.",
@@ -38,15 +38,22 @@
     "@react-aria/interactions": "^3.21.1",
     "@react-stately/utils": "^3.9.1",
     "clsx": "2.1.1",
+    "tailwind-merge": "2.5.2",
     "next": "^14.2.3",
-    "react-hook-form": "^7.53.1",
-    "react-number-format": "^5.4.0",
-    "tailwind-merge": "2.5.2"
+    "react-number-format": "^5.4.0"
+  },
+  "devDependencies": {
+    "@storybook/addon-actions": "^8.0.6",
+    "@storybook/react": "7.4.5",
+    "framer-motion": "^11.0.0",
+    "glob": "^11.0.0",
+    "react-aria": "^3.0.0",
+    "react-aria-components": "^1.1.1",
+    "tailwindcss": "^4.0.15"
   },
   "peerDependencies": {
     "@floating-ui/react": "^0.25.4",
     "@nextui-org/accordion": "^2.0.28",
-    "@nextui-org/avatar": "^2.0.32",
     "@nextui-org/badge": "^2.0.31",
     "@nextui-org/pagination": "^2.0.35",
     "@nextui-org/tooltip": "^2.0.30",