@clubmed/trident-ui 2.0.0-beta.2 → 2.0.0-beta.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/package.json +1 -1
  2. package/ui/SidebarLayout.js +1 -1
  3. package/ui/SidebarLayout.js.map +1 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@clubmed/trident-ui",
3
- "version": "2.0.0-beta.2",
3
+ "version": "2.0.0-beta.3",
4
4
  "type": "module",
5
5
  "description": "Shared ClubMed React UI components",
6
6
  "keywords": [
package/ui/SidebarLayout.js CHANGED
@@ -132,7 +132,7 @@ var p = ({ items: i, children: a, className: o, activeIndex: s = 0, ...p }) => {
132
132
  }, t))
133
133
  })]
134
134
  }), /* @__PURE__ */ c("main", {
135
- className: "min-w-full md:min-w-0 md:w-[calc(100%-96px)] bg-white p-24 overflow-auto md:rounded-ss-16 h-full shrink-0",
135
+ className: "min-w-full md:min-w-0 md:w-[calc(100%-108px)] bg-white p-24 overflow-auto md:rounded-ss-16 h-full shrink-0",
136
136
  children: b
137
137
  })]
138
138
  })]
package/ui/SidebarLayout.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SidebarLayout.js","names":[],"sources":["../../lib/ui/SidebarLayout.tsx"],"sourcesContent":["import { Icon, type IconicNames } from '@clubmed/trident-icons';\nimport clsx from 'clsx';\nimport {\n type ComponentPropsWithoutRef,\n type CSSProperties,\n type ReactNode,\n useCallback,\n useRef,\n useState,\n} from 'react';\nimport { twMerge } from 'tailwind-merge';\nimport { HamburgerIcon } from './HamburgerIcon';\nimport { useSlots } from '@/ui/hooks/useSlots';\n\ntype SidebarItem = {\n label: string;\n icon: IconicNames;\n url?: string;\n items?: {\n label: string;\n url: string;\n }[];\n};\n\ninterface SidebarItemProps {\n item: SidebarItem;\n isActive?: boolean;\n isCollapsed?: boolean;\n anchorName: string;\n onItemClick?: () => void;\n}\n\nconst SidebarItem = ({\n item,\n isActive = false,\n isCollapsed = false,\n anchorName,\n onItemClick,\n}: SidebarItemProps) => {\n const hasSubItems = item.items && item.items.length > 0;\n\n const Comp = item.url ? 'a' : 'button';\n\n const componentProps = item.url\n ? {\n href: item.url,\n className:\n 'flex whitespace-nowrap items-center text-white hover:text-saffron transition-colors outline-none focus-visible:bg-white/20 rounded-pill relative group/sidebar-item',\n }\n : {\n className:\n 'flex whitespace-nowrap items-center text-white outline-none rounded-pill relative group/sidebar-item',\n };\n\n return (\n <div className=\"col-start-1 col-end-3\">\n <Comp\n {...componentProps}\n onClick={(e) => {\n if (hasSubItems && onItemClick) {\n e.preventDefault();\n onItemClick();\n }\n }}\n style={{ anchorName: `--${anchorName}` } as React.CSSProperties}\n >\n <div className=\"relative\">\n <div\n className={twMerge('aspect-square w-48 rounded-full flex items-center justify-center')}\n >\n <Icon name={item.icon} className=\"w-24 text-white\" />\n </div>\n <div className=\"absolute inset-0 pointer-events-none\" aria-hidden=\"true\" inert>\n <div\n className={twMerge(\n 'max-md:hidden aspect-square w-48 rounded-full flex items-center justify-center bg-lightSand text-black',\n '[clip-path:circle(var(--sidebarItem_clipCircle))] transition-all duration-200 delay-100 ease-in-out group-focus-visible/sidebar-item:ring-8 group-focus-visible/sidebar-item:ring-lavender/20',\n isActive ? '[--sidebarItem_clipCircle:100%]' : '[--sidebarItem_clipCircle:0%]',\n 'group-hover/sidebar-item:[--sidebarItem_clipCircle:100%] group-focus-within/sidebar-item:[--sidebarItem_clipCircle:100%]',\n !isActive &&\n 'group-hover/sidebar-item:bg-lightSand/80 group-focus-within/sidebar-item:bg-lightSand/80',\n )}\n >\n <Icon name={item.icon} className=\"w-24\" />\n </div>\n </div>\n </div>\n <span\n className={twMerge(\n 'transition-all duration-300 ease-in-out whitespace-nowrap ps-8 pe-12 truncate md:max-w-240',\n isCollapsed ? 'opacity-0' : 'opacity-100',\n )}\n >\n {item.label}\n </span>\n </Comp>\n {hasSubItems && (\n <div\n className={twMerge(\n 'grid transition-[grid-template-rows,opacity] duration-300 ease-in-out overflow-hidden max-md:grid-rows-[1fr] max-md:opacity-100',\n isCollapsed ? 'grid-rows-[0fr] opacity-0' : 'grid-rows-[1fr] opacity-100 pb-12',\n )}\n inert={isCollapsed}\n >\n <div className=\"outline-none relative overflow-hidden flex flex-col gap-8 ps-48 font-normal\">\n {item.items!.map((subItem, subIndex) => (\n <a\n key={subIndex}\n href={subItem.url}\n className=\"text-white hover:text-saffron transition-colors text-b4 whitespace-nowrap outline-none focus-visible:bg-white/20 ps-8 pe-16 rounded-pill\"\n >\n {subItem.label}\n </a>\n ))}\n </div>\n </div>\n )}\n </div>\n );\n};\n\nexport const CollapseIndicatorSVG = ({ isCollapsed }: { isCollapsed: boolean }) => (\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"33\" height=\"48\">\n <g fill=\"none\" fillRule=\"nonzero\">\n <path\n fill=\"#FFF\"\n d=\"M10.008 48v-1.829c0-4.116-1.722-8.045-4.75-10.835-6.331-5.837-6.331-15.835 0-21.672a14.736 14.736 0 0 0 4.75-10.835V0h27.417v48H10.008Z\"\n />\n <g\n className={twMerge(\n 'transition-transform duration-500 ease-in-out origin-center [transform-box:fill-box]',\n isCollapsed ? 'rotate-180' : 'rotate-0',\n )}\n >\n <path\n fill=\"#1E2643\"\n d=\"M19.686 12.547c6.617 0 12 5.383 12 12s-5.383 12-12 12-12-5.383-12-12 5.383-12 12-12Zm0 1.986c-5.522 0-10.015 4.492-10.015 10.014 0 5.523 4.493 10.015 10.016 10.015 5.52 0 10.012-4.492 10.012-10.015 0-5.522-4.492-10.014-10.012-10.014Zm-2.097 4.382c.376-.366 1.032-.366 1.409 0l5.037 4.895a.948.948 0 0 1 0 1.37l-5.037 4.894a1.002 1.002 0 0 1-.705.285 1 1 0 0 1-.704-.285.947.947 0 0 1 0-1.369l4.332-4.21-4.332-4.21a.95.95 0 0 1 0-1.37Z\"\n />\n </g>\n </g>\n </svg>\n);\n\nexport interface SidebarLayoutProps extends ComponentPropsWithoutRef<'div'> {\n items: SidebarItem[];\n children: ReactNode;\n activeIndex?: number;\n}\n\nfunction useSidebarLayout() {\n const [isCollapsed, setIsCollapsed] = useState(true);\n const overlayRef = useRef<HTMLDivElement>(null);\n\n const handleToggleCollapse = useCallback(() => {\n setIsCollapsed((prev) => !prev);\n }, []);\n\n return {\n isCollapsed,\n setIsCollapsed,\n overlayRef,\n handleToggleCollapse,\n };\n}\n\nexport const SidebarLayout = ({\n items,\n children: initialChildren,\n className,\n activeIndex = 0,\n ...attrs\n}: SidebarLayoutProps) => {\n const { isCollapsed, setIsCollapsed, handleToggleCollapse } = useSidebarLayout();\n const {\n 'header-logo': headerLogo,\n header,\n ['header-actions']: headerActions,\n children,\n } = useSlots(initialChildren, ['header-logo', 'header', 'header-actions']);\n\n return (\n <div\n data-name=\"SidebarLayout\"\n className={clsx('h-screen overflow-clip flex flex-col bg-ultramarine', className)}\n {...attrs}\n >\n {/* Header */}\n <header className=\"bg-ultramarine h-64 flex items-center justify-between gap-8 p-8 ps-20 md:px-24 text-white shrink-0\">\n {headerLogo}\n {header}\n {headerActions}\n <button\n className=\"md:hidden w-48 h-48 focus-visible:ring-8 focus-visible:ring-lavender/20 rounded-full flex items-center justify-center text-white transition-opacity outline-none\"\n aria-label={isCollapsed ? 'Open the navigation menu' : 'Close the navigation menu'}\n onClick={handleToggleCollapse}\n >\n <HamburgerIcon isActive={!isCollapsed} />\n </button>\n </header>\n\n {/* Main container with sidebar and content */}\n <div className=\"flex h-full overflow-x-clip overflow-y-hidden\">\n {/* Sidebar */}\n <aside\n className={twMerge(\n 'max-md:absolute max-md:top-64 max-md:h-[calc(100dvh-64px)] max-md:w-screen flex bg-ultramarine px-8 md:py-16 md:ps-28 md:pe-16 text-white flex-col gap-24 transition-all duration-300 ease-in-out relative h-full shrink-0',\n isCollapsed ? 'max-md:-translate-x-full' : 'md:pe-24',\n )}\n >\n {/* Indicator */}\n <button\n className=\"hidden md:block absolute transition-top duration-300 ease-in-out rounded-pill outline-none focus-visible:ring-8 focus-visible:ring-lavender/20 [--indicatorYPos:anchor(top)] top-[max(var(--indicatorYPos,24px),24px)] left-[max(calc(100%_-_10px),86px)]\"\n onClick={handleToggleCollapse}\n aria-label={isCollapsed ? 'Expand sidebar' : 'Collapse sidebar'}\n style={\n {\n positionAnchor: `--sidebar-item-${activeIndex}`,\n } as CSSProperties\n }\n >\n <CollapseIndicatorSVG isCollapsed={isCollapsed} />\n </button>\n\n <nav\n className={twMerge(\n 'max-md:divide-y-1 p-8 max-md:h-full max-md:overflow-auto md:gap-y-20 grid overflow-hidden text-b3 font-semibold relative transition-grid-template-columns duration-300 ease-in-out',\n isCollapsed ? 'grid-cols-[48px_0fr]' : 'grid-cols-[48px_1fr]',\n )}\n >\n {items.map((item, index) => (\n <SidebarItem\n key={index}\n item={item}\n isActive={index === activeIndex}\n isCollapsed={isCollapsed}\n anchorName={`sidebar-item-${index}`}\n onItemClick={() => {\n if (item.items && item.items.length > 0) {\n setIsCollapsed((prev) => (prev ? false : prev));\n }\n }}\n />\n ))}\n </nav>\n </aside>\n\n <main className=\"min-w-full md:min-w-0 md:w-[calc(100%-96px)] bg-white p-24 overflow-auto md:rounded-ss-16 h-full shrink-0\">\n {children}\n </main>\n </div>\n </div>\n );\n};\n"],"mappings":"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"}
1
+ {"version":3,"file":"SidebarLayout.js","names":[],"sources":["../../lib/ui/SidebarLayout.tsx"],"sourcesContent":["import { Icon, type IconicNames } from '@clubmed/trident-icons';\nimport clsx from 'clsx';\nimport {\n type ComponentPropsWithoutRef,\n type CSSProperties,\n type ReactNode,\n useCallback,\n useRef,\n useState,\n} from 'react';\nimport { twMerge } from 'tailwind-merge';\nimport { HamburgerIcon } from './HamburgerIcon';\nimport { useSlots } from '@/ui/hooks/useSlots';\n\ntype SidebarItem = {\n label: string;\n icon: IconicNames;\n url?: string;\n items?: {\n label: string;\n url: string;\n }[];\n};\n\ninterface SidebarItemProps {\n item: SidebarItem;\n isActive?: boolean;\n isCollapsed?: boolean;\n anchorName: string;\n onItemClick?: () => void;\n}\n\nconst SidebarItem = ({\n item,\n isActive = false,\n isCollapsed = false,\n anchorName,\n onItemClick,\n}: SidebarItemProps) => {\n const hasSubItems = item.items && item.items.length > 0;\n\n const Comp = item.url ? 'a' : 'button';\n\n const componentProps = item.url\n ? {\n href: item.url,\n className:\n 'flex whitespace-nowrap items-center text-white hover:text-saffron transition-colors outline-none focus-visible:bg-white/20 rounded-pill relative group/sidebar-item',\n }\n : {\n className:\n 'flex whitespace-nowrap items-center text-white outline-none rounded-pill relative group/sidebar-item',\n };\n\n return (\n <div className=\"col-start-1 col-end-3\">\n <Comp\n {...componentProps}\n onClick={(e) => {\n if (hasSubItems && onItemClick) {\n e.preventDefault();\n onItemClick();\n }\n }}\n style={{ anchorName: `--${anchorName}` } as React.CSSProperties}\n >\n <div className=\"relative\">\n <div\n className={twMerge('aspect-square w-48 rounded-full flex items-center justify-center')}\n >\n <Icon name={item.icon} className=\"w-24 text-white\" />\n </div>\n <div className=\"absolute inset-0 pointer-events-none\" aria-hidden=\"true\" inert>\n <div\n className={twMerge(\n 'max-md:hidden aspect-square w-48 rounded-full flex items-center justify-center bg-lightSand text-black',\n '[clip-path:circle(var(--sidebarItem_clipCircle))] transition-all duration-200 delay-100 ease-in-out group-focus-visible/sidebar-item:ring-8 group-focus-visible/sidebar-item:ring-lavender/20',\n isActive ? '[--sidebarItem_clipCircle:100%]' : '[--sidebarItem_clipCircle:0%]',\n 'group-hover/sidebar-item:[--sidebarItem_clipCircle:100%] group-focus-within/sidebar-item:[--sidebarItem_clipCircle:100%]',\n !isActive &&\n 'group-hover/sidebar-item:bg-lightSand/80 group-focus-within/sidebar-item:bg-lightSand/80',\n )}\n >\n <Icon name={item.icon} className=\"w-24\" />\n </div>\n </div>\n </div>\n <span\n className={twMerge(\n 'transition-all duration-300 ease-in-out whitespace-nowrap ps-8 pe-12 truncate md:max-w-240',\n isCollapsed ? 'opacity-0' : 'opacity-100',\n )}\n >\n {item.label}\n </span>\n </Comp>\n {hasSubItems && (\n <div\n className={twMerge(\n 'grid transition-[grid-template-rows,opacity] duration-300 ease-in-out overflow-hidden max-md:grid-rows-[1fr] max-md:opacity-100',\n isCollapsed ? 'grid-rows-[0fr] opacity-0' : 'grid-rows-[1fr] opacity-100 pb-12',\n )}\n inert={isCollapsed}\n >\n <div className=\"outline-none relative overflow-hidden flex flex-col gap-8 ps-48 font-normal\">\n {item.items!.map((subItem, subIndex) => (\n <a\n key={subIndex}\n href={subItem.url}\n className=\"text-white hover:text-saffron transition-colors text-b4 whitespace-nowrap outline-none focus-visible:bg-white/20 ps-8 pe-16 rounded-pill\"\n >\n {subItem.label}\n </a>\n ))}\n </div>\n </div>\n )}\n </div>\n );\n};\n\nexport const CollapseIndicatorSVG = ({ isCollapsed }: { isCollapsed: boolean }) => (\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"33\" height=\"48\">\n <g fill=\"none\" fillRule=\"nonzero\">\n <path\n fill=\"#FFF\"\n d=\"M10.008 48v-1.829c0-4.116-1.722-8.045-4.75-10.835-6.331-5.837-6.331-15.835 0-21.672a14.736 14.736 0 0 0 4.75-10.835V0h27.417v48H10.008Z\"\n />\n <g\n className={twMerge(\n 'transition-transform duration-500 ease-in-out origin-center [transform-box:fill-box]',\n isCollapsed ? 'rotate-180' : 'rotate-0',\n )}\n >\n <path\n fill=\"#1E2643\"\n d=\"M19.686 12.547c6.617 0 12 5.383 12 12s-5.383 12-12 12-12-5.383-12-12 5.383-12 12-12Zm0 1.986c-5.522 0-10.015 4.492-10.015 10.014 0 5.523 4.493 10.015 10.016 10.015 5.52 0 10.012-4.492 10.012-10.015 0-5.522-4.492-10.014-10.012-10.014Zm-2.097 4.382c.376-.366 1.032-.366 1.409 0l5.037 4.895a.948.948 0 0 1 0 1.37l-5.037 4.894a1.002 1.002 0 0 1-.705.285 1 1 0 0 1-.704-.285.947.947 0 0 1 0-1.369l4.332-4.21-4.332-4.21a.95.95 0 0 1 0-1.37Z\"\n />\n </g>\n </g>\n </svg>\n);\n\nexport interface SidebarLayoutProps extends ComponentPropsWithoutRef<'div'> {\n items: SidebarItem[];\n children: ReactNode;\n activeIndex?: number;\n}\n\nfunction useSidebarLayout() {\n const [isCollapsed, setIsCollapsed] = useState(true);\n const overlayRef = useRef<HTMLDivElement>(null);\n\n const handleToggleCollapse = useCallback(() => {\n setIsCollapsed((prev) => !prev);\n }, []);\n\n return {\n isCollapsed,\n setIsCollapsed,\n overlayRef,\n handleToggleCollapse,\n };\n}\n\nexport const SidebarLayout = ({\n items,\n children: initialChildren,\n className,\n activeIndex = 0,\n ...attrs\n}: SidebarLayoutProps) => {\n const { isCollapsed, setIsCollapsed, handleToggleCollapse } = useSidebarLayout();\n const {\n 'header-logo': headerLogo,\n header,\n ['header-actions']: headerActions,\n children,\n } = useSlots(initialChildren, ['header-logo', 'header', 'header-actions']);\n\n return (\n <div\n data-name=\"SidebarLayout\"\n className={clsx('h-screen overflow-clip flex flex-col bg-ultramarine', className)}\n {...attrs}\n >\n {/* Header */}\n <header className=\"bg-ultramarine h-64 flex items-center justify-between gap-8 p-8 ps-20 md:px-24 text-white shrink-0\">\n {headerLogo}\n {header}\n {headerActions}\n <button\n className=\"md:hidden w-48 h-48 focus-visible:ring-8 focus-visible:ring-lavender/20 rounded-full flex items-center justify-center text-white transition-opacity outline-none\"\n aria-label={isCollapsed ? 'Open the navigation menu' : 'Close the navigation menu'}\n onClick={handleToggleCollapse}\n >\n <HamburgerIcon isActive={!isCollapsed} />\n </button>\n </header>\n\n {/* Main container with sidebar and content */}\n <div className=\"flex h-full overflow-x-clip overflow-y-hidden\">\n {/* Sidebar */}\n <aside\n className={twMerge(\n 'max-md:absolute max-md:top-64 max-md:h-[calc(100dvh-64px)] max-md:w-screen flex bg-ultramarine px-8 md:py-16 md:ps-28 md:pe-16 text-white flex-col gap-24 transition-all duration-300 ease-in-out relative h-full shrink-0',\n isCollapsed ? 'max-md:-translate-x-full' : 'md:pe-24',\n )}\n >\n {/* Indicator */}\n <button\n className=\"hidden md:block absolute transition-top duration-300 ease-in-out rounded-pill outline-none focus-visible:ring-8 focus-visible:ring-lavender/20 [--indicatorYPos:anchor(top)] top-[max(var(--indicatorYPos,24px),24px)] left-[max(calc(100%_-_10px),86px)]\"\n onClick={handleToggleCollapse}\n aria-label={isCollapsed ? 'Expand sidebar' : 'Collapse sidebar'}\n style={\n {\n positionAnchor: `--sidebar-item-${activeIndex}`,\n } as CSSProperties\n }\n >\n <CollapseIndicatorSVG isCollapsed={isCollapsed} />\n </button>\n\n <nav\n className={twMerge(\n 'max-md:divide-y-1 p-8 max-md:h-full max-md:overflow-auto md:gap-y-20 grid overflow-hidden text-b3 font-semibold relative transition-grid-template-columns duration-300 ease-in-out',\n isCollapsed ? 'grid-cols-[48px_0fr]' : 'grid-cols-[48px_1fr]',\n )}\n >\n {items.map((item, index) => (\n <SidebarItem\n key={index}\n item={item}\n isActive={index === activeIndex}\n isCollapsed={isCollapsed}\n anchorName={`sidebar-item-${index}`}\n onItemClick={() => {\n if (item.items && item.items.length > 0) {\n setIsCollapsed((prev) => (prev ? false : prev));\n }\n }}\n />\n ))}\n </nav>\n </aside>\n\n <main className=\"min-w-full md:min-w-0 md:w-[calc(100%-108px)] bg-white p-24 overflow-auto md:rounded-ss-16 h-full shrink-0\">\n {children}\n </main>\n </div>\n </div>\n );\n};\n"],"mappings":"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"}