@devalok/shilp-sutra 0.36.0 → 0.37.0-next.0

package/dist/shell/top-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"top-bar.js","names":[],"sources":["../../src/shell/top-bar.tsx"],"sourcesContent":["'use client'\n\n/**\n * TopBar v2 — Composition-based application top bar.\n *\n * Subcomponents: TopBar.Left, TopBar.Center, TopBar.Right,\n * TopBar.Section, TopBar.IconButton, TopBar.Title, TopBar.UserMenu.\n */\nimport * as React from 'react'\nimport { useColorMode } from '../hooks/use-color-mode'\nimport { Avatar, AvatarFallback, AvatarImage } from '../ui/avatar'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '../ui/dropdown-menu'\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from '../ui/tooltip'\nimport { IconLogout, IconUser, IconMoon, IconSun } from '@tabler/icons-react'\nimport { Icon } from '../ui/icon'\nimport { cn } from '../ui/lib/utils'\n\n// -----------------------------------------------------------------------\n// Types\n// -----------------------------------------------------------------------\n\nexport interface TopBarUser {\n  name: string\n  email?: string\n  image?: string | null\n}\n\nexport interface UserMenuItem {\n  /** Display label */\n  label: string\n  /** Optional icon (ReactNode) */\n  icon?: React.ReactNode\n  /** Navigate via onNavigate when clicked */\n  href?: string\n  /** Custom click handler */\n  onClick?: () => void\n  /** Render a separator before this item */\n  separator?: boolean\n  /** Text color semantic token (e.g. \"error\") — maps to text-{color} */\n  color?: string\n  /** Badge content — string for count, true for dot indicator */\n  badge?: string | boolean\n  /** Whether the item is disabled */\n  disabled?: boolean\n}\n\n// -----------------------------------------------------------------------\n// TopBar (root)\n// -----------------------------------------------------------------------\n\ninterface TopBarRootProps extends React.HTMLAttributes<HTMLElement> {\n  children: React.ReactNode\n  className?: string\n}\n\nconst TopBarRoot = React.forwardRef<HTMLElement, TopBarRootProps>(\n  ({ className, children, ...props }, ref) => {\n    // Detect if a Center zone is present to switch to grid layout\n    const hasCenter = React.Children.toArray(children).some(\n      (child) => React.isValidElement(child) && child.type === TopBarCenter,\n    )\n\n    return (\n      <header\n        {...props}\n        ref={ref}\n        className={cn(\n          'z-sticky w-full border-b border-surface-border-strong bg-surface-raised px-ds-05 py-ds-04 md:px-ds-06',\n          hasCenter\n            ? 'grid grid-cols-[1fr_auto_1fr] items-center'\n            : 'flex items-center',\n          className,\n        )}\n      >\n        {children}\n      </header>\n    )\n  },\n)\nTopBarRoot.displayName = 'TopBar'\n\n// -----------------------------------------------------------------------\n// TopBar.Left\n// -----------------------------------------------------------------------\n\ninterface TopBarLeftProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode\n}\n\nconst TopBarLeft = React.forwardRef<HTMLDivElement, TopBarLeftProps>(\n  ({ className, children, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn('flex items-center gap-ds-04', className)}\n      {...props}\n    >\n      {children}\n    </div>\n  ),\n)\nTopBarLeft.displayName = 'TopBar.Left'\n\n// -----------------------------------------------------------------------\n// TopBar.Center\n// -----------------------------------------------------------------------\n\ninterface TopBarCenterProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode\n}\n\nconst TopBarCenter = React.forwardRef<HTMLDivElement, TopBarCenterProps>(\n  ({ className, children, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn('flex items-center justify-center px-ds-04', className)}\n      {...props}\n    >\n      {children}\n    </div>\n  ),\n)\nTopBarCenter.displayName = 'TopBar.Center'\n\n// -----------------------------------------------------------------------\n// TopBar.Right\n// -----------------------------------------------------------------------\n\ninterface TopBarRightProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode\n}\n\nconst TopBarRight = React.forwardRef<HTMLDivElement, TopBarRightProps>(\n  ({ className, children, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn('ml-auto flex items-center gap-ds-04', className)}\n      {...props}\n    >\n      {children}\n    </div>\n  ),\n)\nTopBarRight.displayName = 'TopBar.Right'\n\n// -----------------------------------------------------------------------\n// TopBar.Section\n// -----------------------------------------------------------------------\n\nconst gapMap = {\n  tight: 'gap-ds-02',\n  default: 'gap-ds-04',\n  loose: 'gap-ds-06',\n} as const\n\ninterface TopBarSectionProps extends React.HTMLAttributes<HTMLDivElement> {\n  gap?: keyof typeof gapMap\n  children: React.ReactNode\n}\n\nconst TopBarSection = React.forwardRef<HTMLDivElement, TopBarSectionProps>(\n  ({ gap = 'default', className, children, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn('flex items-center', gapMap[gap], className)}\n      {...props}\n    >\n      {children}\n    </div>\n  ),\n)\nTopBarSection.displayName = 'TopBar.Section'\n\n// -----------------------------------------------------------------------\n// TopBar.IconButton\n// -----------------------------------------------------------------------\n\ninterface TopBarIconButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  icon: React.ReactNode\n  tooltip: string\n}\n\nconst TopBarIconButton = React.forwardRef<\n  HTMLButtonElement,\n  TopBarIconButtonProps\n>(({ icon, tooltip, className, ...props }, ref) => (\n  <Tooltip>\n    <TooltipTrigger asChild>\n      <button\n        ref={ref}\n        type=\"button\"\n        aria-label={tooltip}\n        className={cn(\n          'flex h-ds-sm-plus w-ds-sm-plus items-center justify-center rounded-ds-full border border-surface-border-strong bg-surface-raised-hover text-surface-fg-muted transition-[color,background-color,border-color,transform] hover:bg-surface-raised-active active:scale-90 duration-fast-01 ease-productive-standard',\n          className,\n        )}\n        {...props}\n      >\n        <span className=\"[&>svg]:h-ico-sm [&>svg]:w-ico-sm\" aria-hidden=\"true\">\n          {icon}\n        </span>\n      </button>\n    </TooltipTrigger>\n    <TooltipContent side=\"bottom\" align=\"center\">\n      {tooltip}\n    </TooltipContent>\n  </Tooltip>\n))\nTopBarIconButton.displayName = 'TopBar.IconButton'\n\n// -----------------------------------------------------------------------\n// TopBar.Title\n// -----------------------------------------------------------------------\n\ninterface TopBarTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {\n  children: React.ReactNode\n}\n\nconst TopBarTitle = React.forwardRef<HTMLHeadingElement, TopBarTitleProps>(\n  ({ className, children, ...props }, ref) => (\n    <h2\n      ref={ref}\n      className={cn(\n        'hidden text-ds-lg text-surface-fg md:block',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </h2>\n  ),\n)\nTopBarTitle.displayName = 'TopBar.Title'\n\n// -----------------------------------------------------------------------\n// TopBar.UserMenu\n// -----------------------------------------------------------------------\n\ninterface TopBarUserMenuProps {\n  user: TopBarUser\n  onNavigate?: (path: string) => void\n  onLogout?: () => void\n  userMenuItems?: UserMenuItem[]\n  className?: string\n}\n\nconst TopBarUserMenu = React.forwardRef<HTMLButtonElement, TopBarUserMenuProps>(\n  ({ user, onNavigate, onLogout, userMenuItems, className }, ref) => {\n    const { colorMode, toggleColorMode } = useColorMode()\n\n    return (\n      <DropdownMenu>\n        <Tooltip>\n          <TooltipTrigger asChild>\n            <DropdownMenuTrigger asChild>\n              <button\n                ref={ref}\n                type=\"button\"\n                className={cn('flex items-center gap-ds-03 outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2', className)}\n              >\n                <Avatar className=\"h-ds-sm-plus w-ds-sm-plus cursor-pointer\">\n                  {user.image ? (\n                    <AvatarImage src={user.image} alt={user.name} />\n                  ) : null}\n                  <AvatarFallback className=\"bg-surface-raised-hover text-surface-fg\">\n                    {user.name?.charAt(0).toUpperCase()}\n                  </AvatarFallback>\n                </Avatar>\n              </button>\n            </DropdownMenuTrigger>\n          </TooltipTrigger>\n          <TooltipContent side=\"bottom\" align=\"center\">\n            User Menu\n          </TooltipContent>\n        </Tooltip>\n\n        <DropdownMenuContent\n          className=\"w-[200px] rounded-ds-xl border border-surface-border-strong bg-surface-overlay p-0 shadow-floating\"\n          sideOffset={8}\n          align=\"end\"\n        >\n          {/* User Info */}\n          <div className=\"border-b border-surface-border-strong px-ds-05 py-ds-04\">\n            <p className=\"text-ds-md text-surface-fg\">{user.name}</p>\n            {user.email && (\n              <p className=\"text-ds-sm text-surface-fg-subtle truncate\">{user.email}</p>\n            )}\n          </div>\n\n          <DropdownMenuItem\n            className=\"flex w-full cursor-pointer items-center gap-ds-03 px-ds-05 py-ds-04 hover:bg-surface-raised\"\n            onClick={() => onNavigate?.('/profile')}\n          >\n            <Icon icon={IconUser} size=\"sm\" className=\"text-surface-fg-muted\" />\n            <span className=\"text-ds-md text-surface-fg-muted\">Profile</span>\n          </DropdownMenuItem>\n\n          {/* Custom user menu items */}\n          {userMenuItems?.map((item, index) => {\n            const colorMap: Record<string, string> = {\n              error: 'text-error-11',\n              success: 'text-success-11',\n              warning: 'text-warning-11',\n              info: 'text-info-11',\n            }\n            const textColor = item.color\n              ? (colorMap[item.color] ?? 'text-surface-fg-muted')\n              : 'text-surface-fg-muted'\n            return (\n              <React.Fragment key={item.label + index}>\n                {item.separator && (\n                  <DropdownMenuSeparator className=\"bg-surface-border\" />\n                )}\n                <DropdownMenuItem\n                  className={cn(\n                    'flex w-full cursor-pointer items-center gap-ds-03 px-ds-05 py-ds-04 hover:bg-surface-raised',\n                    item.disabled && 'pointer-events-none opacity-action-disabled',\n                  )}\n                  disabled={item.disabled}\n                  onClick={() => {\n                    if (item.disabled) return\n                    if (item.onClick) item.onClick()\n                    else if (item.href) onNavigate?.(item.href)\n                  }}\n                >\n                  {item.icon && (\n                    <span\n                      className={cn(\n                        '[&>svg]:h-ico-sm [&>svg]:w-ico-sm',\n                        textColor,\n                      )}\n                    >\n                      {item.icon}\n                    </span>\n                  )}\n                  <span className={cn('text-ds-md', textColor)}>\n                    {item.label}\n                  </span>\n                  {item.badge != null &&\n                    item.badge !== false &&\n                    (typeof item.badge === 'string' ? (\n                      <span className=\"ml-auto inline-flex h-[18px] min-w-[18px] items-center justify-center rounded-ds-full bg-error-9 px-ds-02 text-[10px] font-semibold leading-none text-error-fg\">\n                        {item.badge}\n                      </span>\n                    ) : (\n                      <span className=\"ml-auto h-[8px] w-[8px] rounded-ds-full bg-error-9\" />\n                    ))}\n                </DropdownMenuItem>\n              </React.Fragment>\n            )\n          })}\n\n          <DropdownMenuItem\n            className=\"flex w-full cursor-pointer items-center gap-ds-03 px-ds-05 py-ds-04 hover:bg-surface-raised\"\n            onClick={toggleColorMode}\n          >\n            {colorMode === 'dark' ? (\n              <Icon icon={IconSun} size=\"sm\" className=\"text-surface-fg-muted\" />\n            ) : (\n              <Icon icon={IconMoon} size=\"sm\" className=\"text-surface-fg-muted\" />\n            )}\n            <span className=\"text-ds-md text-surface-fg-muted\">\n              {colorMode === 'dark' ? 'Light Mode' : 'Dark Mode'}\n            </span>\n          </DropdownMenuItem>\n\n          {onLogout && (\n            <>\n              <DropdownMenuSeparator className=\"bg-surface-border\" />\n              <DropdownMenuItem\n                className=\"flex w-full cursor-pointer items-center gap-ds-03 px-ds-05 py-ds-04 hover:bg-surface-raised\"\n                onClick={onLogout}\n              >\n                <Icon icon={IconLogout} size=\"sm\" className=\"text-error-11\" />\n                <span className=\"text-ds-md text-error-11\">Logout</span>\n              </DropdownMenuItem>\n            </>\n          )}\n        </DropdownMenuContent>\n      </DropdownMenu>\n    )\n  },\n)\nTopBarUserMenu.displayName = 'TopBar.UserMenu'\n\n// -----------------------------------------------------------------------\n// Compound export\n// -----------------------------------------------------------------------\n\nexport type TopBarProps = TopBarRootProps\n\nconst TopBar = Object.assign(TopBarRoot, {\n  Left: TopBarLeft,\n  Center: TopBarCenter,\n  Right: TopBarRight,\n  Section: TopBarSection,\n  IconButton: TopBarIconButton,\n  Title: TopBarTitle,\n  UserMenu: TopBarUserMenu,\n})\n\nexport { TopBar }\n"],"mappings":"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"}
+{"version":3,"file":"top-bar.js","names":[],"sources":["../../src/shell/top-bar.tsx"],"sourcesContent":["'use client'\n\n/**\n * TopBar v2 — Composition-based application top bar.\n *\n * Subcomponents: TopBar.Left, TopBar.Center, TopBar.Right,\n * TopBar.Section, TopBar.IconButton, TopBar.Title, TopBar.UserMenu.\n */\nimport { IconLogout, IconMoon, IconSun,IconUser } from '@tabler/icons-react'\nimport * as React from 'react'\n\nimport { useColorMode } from '../hooks/use-color-mode'\nimport { Avatar, AvatarFallback, AvatarImage } from '../ui/avatar'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '../ui/dropdown-menu'\nimport { Icon } from '../ui/icon'\nimport { cn } from '../ui/lib/utils'\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from '../ui/tooltip'\n\n// -----------------------------------------------------------------------\n// Types\n// -----------------------------------------------------------------------\n\nexport interface TopBarUser {\n  name: string\n  email?: string\n  image?: string | null\n}\n\nexport interface UserMenuItem {\n  /** Display label */\n  label: string\n  /** Optional icon (ReactNode) */\n  icon?: React.ReactNode\n  /** Navigate via onNavigate when clicked */\n  href?: string\n  /** Custom click handler */\n  onClick?: () => void\n  /** Render a separator before this item */\n  separator?: boolean\n  /** Text color semantic token (e.g. \"error\") — maps to text-{color} */\n  color?: string\n  /** Badge content — string for count, true for dot indicator */\n  badge?: string | boolean\n  /** Whether the item is disabled */\n  disabled?: boolean\n}\n\n// -----------------------------------------------------------------------\n// TopBar (root)\n// -----------------------------------------------------------------------\n\ninterface TopBarRootProps extends React.HTMLAttributes<HTMLElement> {\n  children: React.ReactNode\n  className?: string\n}\n\nconst TopBarRoot = React.forwardRef<HTMLElement, TopBarRootProps>(\n  ({ className, children, ...props }, ref) => {\n    // Detect if a Center zone is present to switch to grid layout\n    const hasCenter = React.Children.toArray(children).some(\n      (child) => React.isValidElement(child) && child.type === TopBarCenter,\n    )\n\n    return (\n      <header\n        {...props}\n        ref={ref}\n        className={cn(\n          'z-sticky w-full border-b border-surface-border-strong bg-surface-raised px-ds-05 py-ds-04 md:px-ds-06',\n          hasCenter\n            ? 'grid grid-cols-[1fr_auto_1fr] items-center'\n            : 'flex items-center',\n          className,\n        )}\n      >\n        {children}\n      </header>\n    )\n  },\n)\nTopBarRoot.displayName = 'TopBar'\n\n// -----------------------------------------------------------------------\n// TopBar.Left\n// -----------------------------------------------------------------------\n\ninterface TopBarLeftProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode\n}\n\nconst TopBarLeft = React.forwardRef<HTMLDivElement, TopBarLeftProps>(\n  ({ className, children, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn('flex items-center gap-ds-04', className)}\n      {...props}\n    >\n      {children}\n    </div>\n  ),\n)\nTopBarLeft.displayName = 'TopBar.Left'\n\n// -----------------------------------------------------------------------\n// TopBar.Center\n// -----------------------------------------------------------------------\n\ninterface TopBarCenterProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode\n}\n\nconst TopBarCenter = React.forwardRef<HTMLDivElement, TopBarCenterProps>(\n  ({ className, children, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn('flex items-center justify-center px-ds-04', className)}\n      {...props}\n    >\n      {children}\n    </div>\n  ),\n)\nTopBarCenter.displayName = 'TopBar.Center'\n\n// -----------------------------------------------------------------------\n// TopBar.Right\n// -----------------------------------------------------------------------\n\ninterface TopBarRightProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode\n}\n\nconst TopBarRight = React.forwardRef<HTMLDivElement, TopBarRightProps>(\n  ({ className, children, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn('ml-auto flex items-center gap-ds-04', className)}\n      {...props}\n    >\n      {children}\n    </div>\n  ),\n)\nTopBarRight.displayName = 'TopBar.Right'\n\n// -----------------------------------------------------------------------\n// TopBar.Section\n// -----------------------------------------------------------------------\n\nconst gapMap = {\n  tight: 'gap-ds-02',\n  default: 'gap-ds-04',\n  loose: 'gap-ds-06',\n} as const\n\ninterface TopBarSectionProps extends React.HTMLAttributes<HTMLDivElement> {\n  gap?: keyof typeof gapMap\n  children: React.ReactNode\n}\n\nconst TopBarSection = React.forwardRef<HTMLDivElement, TopBarSectionProps>(\n  ({ gap = 'default', className, children, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn('flex items-center', gapMap[gap], className)}\n      {...props}\n    >\n      {children}\n    </div>\n  ),\n)\nTopBarSection.displayName = 'TopBar.Section'\n\n// -----------------------------------------------------------------------\n// TopBar.IconButton\n// -----------------------------------------------------------------------\n\ninterface TopBarIconButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  icon: React.ReactNode\n  tooltip: string\n}\n\nconst TopBarIconButton = React.forwardRef<\n  HTMLButtonElement,\n  TopBarIconButtonProps\n>(({ icon, tooltip, className, ...props }, ref) => (\n  <Tooltip>\n    <TooltipTrigger asChild>\n      <button\n        ref={ref}\n        type=\"button\"\n        aria-label={tooltip}\n        className={cn(\n          'flex h-ds-sm-plus w-ds-sm-plus items-center justify-center rounded-ds-full border border-surface-border-strong bg-surface-raised-hover text-surface-fg-muted transition-[color,background-color,border-color,transform] hover:bg-surface-raised-active active:scale-90 duration-fast-01 ease-productive-standard',\n          className,\n        )}\n        {...props}\n      >\n        <span className=\"[&>svg]:h-ico-sm [&>svg]:w-ico-sm\" aria-hidden=\"true\">\n          {icon}\n        </span>\n      </button>\n    </TooltipTrigger>\n    <TooltipContent side=\"bottom\" align=\"center\">\n      {tooltip}\n    </TooltipContent>\n  </Tooltip>\n))\nTopBarIconButton.displayName = 'TopBar.IconButton'\n\n// -----------------------------------------------------------------------\n// TopBar.Title\n// -----------------------------------------------------------------------\n\ninterface TopBarTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {\n  children: React.ReactNode\n}\n\nconst TopBarTitle = React.forwardRef<HTMLHeadingElement, TopBarTitleProps>(\n  ({ className, children, ...props }, ref) => (\n    <h2\n      ref={ref}\n      className={cn(\n        'hidden text-ds-lg text-surface-fg md:block',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </h2>\n  ),\n)\nTopBarTitle.displayName = 'TopBar.Title'\n\n// -----------------------------------------------------------------------\n// TopBar.UserMenu\n// -----------------------------------------------------------------------\n\ninterface TopBarUserMenuProps {\n  user: TopBarUser\n  onNavigate?: (path: string) => void\n  onLogout?: () => void\n  userMenuItems?: UserMenuItem[]\n  className?: string\n}\n\nconst TopBarUserMenu = React.forwardRef<HTMLButtonElement, TopBarUserMenuProps>(\n  ({ user, onNavigate, onLogout, userMenuItems, className }, ref) => {\n    const { colorMode, toggleColorMode } = useColorMode()\n\n    return (\n      <DropdownMenu>\n        <Tooltip>\n          <TooltipTrigger asChild>\n            <DropdownMenuTrigger asChild>\n              <button\n                ref={ref}\n                type=\"button\"\n                className={cn('flex items-center gap-ds-03 outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2', className)}\n              >\n                <Avatar className=\"h-ds-sm-plus w-ds-sm-plus cursor-pointer\">\n                  {user.image ? (\n                    <AvatarImage src={user.image} alt={user.name} />\n                  ) : null}\n                  <AvatarFallback className=\"bg-surface-raised-hover text-surface-fg\">\n                    {user.name?.charAt(0).toUpperCase()}\n                  </AvatarFallback>\n                </Avatar>\n              </button>\n            </DropdownMenuTrigger>\n          </TooltipTrigger>\n          <TooltipContent side=\"bottom\" align=\"center\">\n            User Menu\n          </TooltipContent>\n        </Tooltip>\n\n        <DropdownMenuContent\n          className=\"w-[200px] rounded-ds-xl border border-surface-border-strong bg-surface-overlay p-0 shadow-floating\"\n          sideOffset={8}\n          align=\"end\"\n        >\n          {/* User Info */}\n          <div className=\"border-b border-surface-border-strong px-ds-05 py-ds-04\">\n            <p className=\"text-ds-md text-surface-fg\">{user.name}</p>\n            {user.email && (\n              <p className=\"text-ds-sm text-surface-fg-subtle truncate\">{user.email}</p>\n            )}\n          </div>\n\n          <DropdownMenuItem\n            className=\"flex w-full cursor-pointer items-center gap-ds-03 px-ds-05 py-ds-04 hover:bg-surface-raised\"\n            onClick={() => onNavigate?.('/profile')}\n          >\n            <Icon icon={IconUser} size=\"sm\" className=\"text-surface-fg-muted\" />\n            <span className=\"text-ds-md text-surface-fg-muted\">Profile</span>\n          </DropdownMenuItem>\n\n          {/* Custom user menu items */}\n          {userMenuItems?.map((item, index) => {\n            const colorMap: Record<string, string> = {\n              error: 'text-error-11',\n              success: 'text-success-11',\n              warning: 'text-warning-11',\n              info: 'text-info-11',\n            }\n            const textColor = item.color\n              ? (colorMap[item.color] ?? 'text-surface-fg-muted')\n              : 'text-surface-fg-muted'\n            return (\n              <React.Fragment key={item.label + index}>\n                {item.separator && (\n                  <DropdownMenuSeparator className=\"bg-surface-border\" />\n                )}\n                <DropdownMenuItem\n                  className={cn(\n                    'flex w-full cursor-pointer items-center gap-ds-03 px-ds-05 py-ds-04 hover:bg-surface-raised',\n                    item.disabled && 'pointer-events-none opacity-action-disabled',\n                  )}\n                  disabled={item.disabled}\n                  onClick={() => {\n                    if (item.disabled) return\n                    if (item.onClick) item.onClick()\n                    else if (item.href) onNavigate?.(item.href)\n                  }}\n                >\n                  {item.icon && (\n                    <span\n                      className={cn(\n                        '[&>svg]:h-ico-sm [&>svg]:w-ico-sm',\n                        textColor,\n                      )}\n                    >\n                      {item.icon}\n                    </span>\n                  )}\n                  <span className={cn('text-ds-md', textColor)}>\n                    {item.label}\n                  </span>\n                  {item.badge != null &&\n                    item.badge !== false &&\n                    (typeof item.badge === 'string' ? (\n                      <span className=\"ml-auto inline-flex h-[18px] min-w-[18px] items-center justify-center rounded-ds-full bg-error-9 px-ds-02 text-[10px] font-semibold leading-none text-error-fg\">\n                        {item.badge}\n                      </span>\n                    ) : (\n                      <span className=\"ml-auto h-[8px] w-[8px] rounded-ds-full bg-error-9\" />\n                    ))}\n                </DropdownMenuItem>\n              </React.Fragment>\n            )\n          })}\n\n          <DropdownMenuItem\n            className=\"flex w-full cursor-pointer items-center gap-ds-03 px-ds-05 py-ds-04 hover:bg-surface-raised\"\n            onClick={toggleColorMode}\n          >\n            {colorMode === 'dark' ? (\n              <Icon icon={IconSun} size=\"sm\" className=\"text-surface-fg-muted\" />\n            ) : (\n              <Icon icon={IconMoon} size=\"sm\" className=\"text-surface-fg-muted\" />\n            )}\n            <span className=\"text-ds-md text-surface-fg-muted\">\n              {colorMode === 'dark' ? 'Light Mode' : 'Dark Mode'}\n            </span>\n          </DropdownMenuItem>\n\n          {onLogout && (\n            <>\n              <DropdownMenuSeparator className=\"bg-surface-border\" />\n              <DropdownMenuItem\n                className=\"flex w-full cursor-pointer items-center gap-ds-03 px-ds-05 py-ds-04 hover:bg-surface-raised\"\n                onClick={onLogout}\n              >\n                <Icon icon={IconLogout} size=\"sm\" className=\"text-error-11\" />\n                <span className=\"text-ds-md text-error-11\">Logout</span>\n              </DropdownMenuItem>\n            </>\n          )}\n        </DropdownMenuContent>\n      </DropdownMenu>\n    )\n  },\n)\nTopBarUserMenu.displayName = 'TopBar.UserMenu'\n\n// -----------------------------------------------------------------------\n// Compound export\n// -----------------------------------------------------------------------\n\nexport type TopBarProps = TopBarRootProps\n\nconst TopBar = Object.assign(TopBarRoot, {\n  Left: TopBarLeft,\n  Center: TopBarCenter,\n  Right: TopBarRight,\n  Section: TopBarSection,\n  IconButton: TopBarIconButton,\n  Title: TopBarTitle,\n  UserMenu: TopBarUserMenu,\n})\n\nexport { TopBar }\n"],"mappings":"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"}

package/dist/tailwind/index.cjs

@@ -1,9 +1,7 @@
 "use strict";
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -17,509 +15,27 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var preset_exports = {};
 __export(preset_exports, {
-  default: () => t
+  default: () => e
 });
 module.exports = __toCommonJS(preset_exports);
-var import_plugin = __toESM(require("tailwindcss/plugin"), 1);
-var t = {
-  theme: { extend: {
-    screens: {
-      sm: "640px",
-      md: "768px",
-      lg: "1024px",
-      xl: "1280px",
-      "2xl": "1536px"
-    },
-    fontFamily: {
-      sans: [
-        "var(--font-sans)",
-        "system-ui",
-        "sans-serif"
-      ],
-      display: [
-        "var(--font-display)",
-        "system-ui",
-        "sans-serif"
-      ],
-      body: ["var(--font-body)", "sans-serif"],
-      accent: ["var(--font-accent)", "sans-serif"],
-      mono: ["var(--font-mono)", "monospace"]
-    },
-    fontWeight: {
-      light: "var(--font-weight-light)",
-      regular: "var(--font-weight-regular)",
-      medium: "var(--font-weight-medium)",
-      semibold: "var(--font-weight-semibold)",
-      bold: "var(--font-weight-bold)"
-    },
-    letterSpacing: {
-      "ds-tighter": "var(--tracking-tighter)",
-      "ds-tight": "var(--tracking-tight)",
-      "ds-normal": "var(--tracking-normal)",
-      "ds-wide": "var(--tracking-wide)",
-      "ds-wider": "var(--tracking-wider)",
-      "ds-widest": "var(--tracking-widest)"
-    },
-    lineHeight: {
-      "ds-none": "var(--line-height-none)",
-      "ds-tight": "var(--line-height-tight)",
-      "ds-snug": "var(--line-height-snug)",
-      "ds-normal": "var(--line-height-normal)",
-      "ds-relaxed": "var(--line-height-relaxed)",
-      "ds-loose": "var(--line-height-loose)"
-    },
-    fontSize: {
-      "ds-xs": ["var(--font-size-xs)", { lineHeight: "var(--line-height-relaxed)" }],
-      "ds-sm": ["var(--font-size-sm)", { lineHeight: "var(--line-height-relaxed)" }],
-      "ds-md": ["var(--font-size-md)", { lineHeight: "var(--line-height-relaxed)" }],
-      "ds-base": ["var(--font-size-base)", { lineHeight: "var(--line-height-relaxed)" }],
-      "ds-lg": ["var(--font-size-lg)", { lineHeight: "var(--line-height-normal)" }],
-      "ds-xl": ["var(--font-size-xl)", { lineHeight: "var(--line-height-snug)" }],
-      "ds-2xl": ["var(--font-size-2xl)", { lineHeight: "var(--line-height-snug)" }],
-      "ds-3xl": ["var(--font-size-3xl)", { lineHeight: "var(--line-height-tight)" }],
-      "ds-4xl": ["var(--font-size-4xl)", { lineHeight: "var(--line-height-tight)" }],
-      "ds-5xl": ["var(--font-size-5xl)", { lineHeight: "var(--line-height-tight)" }],
-      "ds-6xl": ["var(--font-size-6xl)", { lineHeight: "var(--line-height-tight)" }]
-    },
-    borderWidth: {
-      "ds-sm": "var(--border-width-sm)",
-      "ds-md": "var(--border-width-md)",
-      "ds-lg": "var(--border-width-lg)",
-      focus: "var(--border-focus-width)"
-    },
-    borderRadius: {
-      "ds-none": "0",
-      "ds-sm": "var(--radius-sm)",
-      "ds-default": "var(--radius-default)",
-      "ds-md": "var(--radius-md)",
-      "ds-lg": "var(--radius-lg)",
-      "ds-xl": "var(--radius-xl)",
-      "ds-2xl": "var(--radius-2xl)",
-      "ds-full": "var(--radius-full)"
-    },
-    spacing: {
-      "ds-01": "var(--spacing-01)",
-      "ds-02": "var(--spacing-02)",
-      "ds-02b": "var(--spacing-02b)",
-      "ds-03": "var(--spacing-03)",
-      "ds-04": "var(--spacing-04)",
-      "ds-05": "var(--spacing-05)",
-      "ds-05b": "var(--spacing-05b)",
-      "ds-06": "var(--spacing-06)",
-      "ds-06b": "var(--spacing-06b)",
-      "ds-07": "var(--spacing-07)",
-      "ds-08": "var(--spacing-08)",
-      "ds-09": "var(--spacing-09)",
-      "ds-10": "var(--spacing-10)",
-      "ds-11": "var(--spacing-11)",
-      "ds-12": "var(--spacing-12)",
-      "ds-13": "var(--spacing-13)",
-      "page-x": "var(--spacing-page-x)",
-      "page-y": "var(--spacing-page-y)",
-      "section-gap": "var(--spacing-section-gap)",
-      "card-gap": "var(--spacing-card-gap)",
-      "stack-gap": "var(--spacing-stack-gap)"
-    },
-    width: {
-      "ds-xs": "var(--size-xs)",
-      "ds-xs-plus": "var(--size-xs-plus)",
-      "ds-sm": "var(--size-sm)",
-      "ds-sm-plus": "var(--size-sm-plus)",
-      "ds-md": "var(--size-md)",
-      "ds-lg": "var(--size-lg)",
-      "ds-xl": "var(--size-xl)",
-      "ico-sm": "var(--icon-sm)",
-      "ico-md": "var(--icon-md)",
-      "ico-lg": "var(--icon-lg)",
-      "ico-xl": "var(--icon-xl)"
-    },
-    height: {
-      "ds-xs": "var(--size-xs)",
-      "ds-xs-plus": "var(--size-xs-plus)",
-      "ds-sm": "var(--size-sm)",
-      "ds-sm-plus": "var(--size-sm-plus)",
-      "ds-md": "var(--size-md)",
-      "ds-lg": "var(--size-lg)",
-      "ds-xl": "var(--size-xl)",
-      "ico-sm": "var(--icon-sm)",
-      "ico-md": "var(--icon-md)",
-      "ico-lg": "var(--icon-lg)",
-      "ico-xl": "var(--icon-xl)"
-    },
-    minHeight: {
-      "ds-xs": "var(--size-xs)",
-      "ds-xs-plus": "var(--size-xs-plus)",
-      "ds-sm": "var(--size-sm)",
-      "ds-sm-plus": "var(--size-sm-plus)",
-      "ds-md": "var(--size-md)",
-      "ds-lg": "var(--size-lg)",
-      "ds-xl": "var(--size-xl)"
-    },
-    maxWidth: {
-      layout: "var(--max-width)",
-      "layout-body": "var(--max-width-body)"
-    },
-    minWidth: {
-      "ds-xs": "var(--size-xs)",
-      "ds-sm": "var(--size-sm)",
-      "ds-md": "var(--size-md)",
-      "ds-lg": "var(--size-lg)",
-      "ds-xl": "var(--size-xl)"
-    },
-    opacity: {
-      "action-hover": "var(--action-hover-opacity)",
-      "action-selected": "var(--action-selected-opacity)",
-      "action-disabled": "var(--action-disabled-opacity)",
-      "action-focus": "var(--action-focus-opacity)",
-      "action-active": "var(--action-active-opacity)"
-    },
-    colors: {
-      "accent-1": "var(--color-accent-1)",
-      "accent-2": "var(--color-accent-2)",
-      "accent-3": "var(--color-accent-3)",
-      "accent-4": "var(--color-accent-4)",
-      "accent-5": "var(--color-accent-5)",
-      "accent-6": "var(--color-accent-6)",
-      "accent-7": "var(--color-accent-7)",
-      "accent-8": "var(--color-accent-8)",
-      "accent-9": "var(--color-accent-9)",
-      "accent-10": "var(--color-accent-10)",
-      "accent-11": "var(--color-accent-11)",
-      "accent-12": "var(--color-accent-12)",
-      "accent-fg": "var(--color-accent-fg)",
-      "secondary-1": "var(--color-secondary-1)",
-      "secondary-2": "var(--color-secondary-2)",
-      "secondary-3": "var(--color-secondary-3)",
-      "secondary-4": "var(--color-secondary-4)",
-      "secondary-5": "var(--color-secondary-5)",
-      "secondary-6": "var(--color-secondary-6)",
-      "secondary-7": "var(--color-secondary-7)",
-      "secondary-8": "var(--color-secondary-8)",
-      "secondary-9": "var(--color-secondary-9)",
-      "secondary-10": "var(--color-secondary-10)",
-      "secondary-11": "var(--color-secondary-11)",
-      "secondary-12": "var(--color-secondary-12)",
-      "secondary-fg": "var(--color-secondary-fg)",
-      "surface-base": "var(--color-surface-base)",
-      "surface-sunken": "var(--color-surface-sunken)",
-      "surface-raised": "var(--color-surface-raised)",
-      "surface-overlay": "var(--color-surface-overlay)",
-      "surface-raised-hover": "var(--color-surface-raised-hover)",
-      "surface-raised-active": "var(--color-surface-raised-active)",
-      "surface-inverted": "var(--color-surface-inverted)",
-      "surface-inverted-fg": "var(--color-surface-inverted-fg)",
-      "surface-disabled": "var(--color-surface-disabled)",
-      "surface-fg-disabled": "var(--color-surface-fg-disabled)",
-      "surface-fg": "var(--color-surface-fg)",
-      "surface-fg-muted": "var(--color-surface-fg-muted)",
-      "surface-fg-subtle": "var(--color-surface-fg-subtle)",
-      "surface-border": "var(--color-surface-border)",
-      "surface-border-strong": "var(--color-surface-border-strong)",
-      "surface-border-subtle": "var(--color-surface-border-subtle)",
-      backdrop: "var(--color-backdrop)",
-      link: "var(--color-link)",
-      "link-hover": "var(--color-link-hover)",
-      "link-visited": "var(--color-link-visited)",
-      "error-2": "var(--color-error-2)",
-      "error-3": "var(--color-error-3)",
-      "error-4": "var(--color-error-4)",
-      "error-5": "var(--color-error-5)",
-      "error-7": "var(--color-error-7)",
-      "error-9": "var(--color-error-9)",
-      "error-10": "var(--color-error-10)",
-      "error-11": "var(--color-error-11)",
-      "error-fg": "var(--color-error-fg)",
-      "success-2": "var(--color-success-2)",
-      "success-3": "var(--color-success-3)",
-      "success-4": "var(--color-success-4)",
-      "success-5": "var(--color-success-5)",
-      "success-7": "var(--color-success-7)",
-      "success-9": "var(--color-success-9)",
-      "success-10": "var(--color-success-10)",
-      "success-11": "var(--color-success-11)",
-      "success-fg": "var(--color-success-fg)",
-      "warning-2": "var(--color-warning-2)",
-      "warning-3": "var(--color-warning-3)",
-      "warning-4": "var(--color-warning-4)",
-      "warning-5": "var(--color-warning-5)",
-      "warning-7": "var(--color-warning-7)",
-      "warning-9": "var(--color-warning-9)",
-      "warning-10": "var(--color-warning-10)",
-      "warning-11": "var(--color-warning-11)",
-      "warning-fg": "var(--color-warning-fg)",
-      "info-2": "var(--color-info-2)",
-      "info-3": "var(--color-info-3)",
-      "info-4": "var(--color-info-4)",
-      "info-5": "var(--color-info-5)",
-      "info-7": "var(--color-info-7)",
-      "info-9": "var(--color-info-9)",
-      "info-10": "var(--color-info-10)",
-      "info-11": "var(--color-info-11)",
-      "info-fg": "var(--color-info-fg)",
-      "category-teal-3": "var(--color-category-teal-3)",
-      "category-teal-7": "var(--color-category-teal-7)",
-      "category-teal-9": "var(--color-category-teal-9)",
-      "category-teal-11": "var(--color-category-teal-11)",
-      "category-amber-3": "var(--color-category-amber-3)",
-      "category-amber-7": "var(--color-category-amber-7)",
-      "category-amber-9": "var(--color-category-amber-9)",
-      "category-amber-11": "var(--color-category-amber-11)",
-      "category-slate-3": "var(--color-category-slate-3)",
-      "category-slate-7": "var(--color-category-slate-7)",
-      "category-slate-9": "var(--color-category-slate-9)",
-      "category-slate-11": "var(--color-category-slate-11)",
-      "category-indigo-3": "var(--color-category-indigo-3)",
-      "category-indigo-7": "var(--color-category-indigo-7)",
-      "category-indigo-9": "var(--color-category-indigo-9)",
-      "category-indigo-11": "var(--color-category-indigo-11)",
-      "category-cyan-3": "var(--color-category-cyan-3)",
-      "category-cyan-7": "var(--color-category-cyan-7)",
-      "category-cyan-9": "var(--color-category-cyan-9)",
-      "category-cyan-11": "var(--color-category-cyan-11)",
-      "category-orange-3": "var(--color-category-orange-3)",
-      "category-orange-7": "var(--color-category-orange-7)",
-      "category-orange-9": "var(--color-category-orange-9)",
-      "category-orange-11": "var(--color-category-orange-11)",
-      "category-emerald-3": "var(--color-category-emerald-3)",
-      "category-emerald-7": "var(--color-category-emerald-7)",
-      "category-emerald-9": "var(--color-category-emerald-9)",
-      "category-emerald-11": "var(--color-category-emerald-11)",
-      overlay: "var(--color-overlay)",
-      disabled: "var(--color-disabled)",
-      "skeleton-base": "var(--color-skeleton-base)",
-      "skeleton-shimmer": "var(--color-skeleton-shimmer)",
-      "inset-glow": "var(--color-inset-glow)",
-      "inset-glow-strong": "var(--color-inset-glow-strong)",
-      "inset-glow-subtle": "var(--color-inset-glow-subtle)",
-      "surface-overlay-light": "var(--color-surface-overlay-light)",
-      "surface-overlay-dark": "var(--color-surface-overlay-dark)",
-      "text-shadow": "var(--color-text-shadow)",
-      "chart-1": "var(--chart-1)",
-      "chart-2": "var(--chart-2)",
-      "chart-3": "var(--chart-3)",
-      "chart-4": "var(--chart-4)",
-      "chart-5": "var(--chart-5)",
-      "chart-6": "var(--chart-6)",
-      "chart-7": "var(--chart-7)",
-      "chart-8": "var(--chart-8)"
-    },
-    keyframes: {
-      "accordion-down": {
-        from: { height: "0" },
-        to: { height: "var(--radix-accordion-content-height)" }
-      },
-      "accordion-up": {
-        from: { height: "var(--radix-accordion-content-height)" },
-        to: { height: "0" }
-      },
-      "collapsible-down": {
-        from: { height: "0" },
-        to: { height: "var(--radix-collapsible-content-height)" }
-      },
-      "collapsible-up": {
-        from: { height: "var(--radix-collapsible-content-height)" },
-        to: { height: "0" }
-      },
-      "progress-indeterminate": {
-        "0%": { transform: "translateX(-100%)" },
-        "100%": { transform: "translateX(250%)" }
-      },
-      "skeleton-shimmer": {
-        "0%": { backgroundPosition: "-200% 0" },
-        "100%": { backgroundPosition: "200% 0" }
-      },
-      "caret-blink": {
-        "0%,70%,100%": { opacity: "1" },
-        "20%,50%": { opacity: "0" }
-      },
-      "timer-bar": {
-        "0%": { transform: "scaleX(1)" },
-        "100%": { transform: "scaleX(0)" }
-      },
-      "popover-in": {
-        from: {
-          opacity: "0",
-          transform: "scale(0.95)"
-        },
-        to: {
-          opacity: "1",
-          transform: "scale(1)"
-        }
-      },
-      "popover-out": {
-        from: {
-          opacity: "1",
-          transform: "scale(1)"
-        },
-        to: {
-          opacity: "0",
-          transform: "scale(0.95)"
-        }
-      },
-      "processing-ants": { to: { "--border-angle": "360deg" } }
-    },
-    animation: {
-      "accordion-down": "accordion-down 200ms ease-out",
-      "accordion-up": "accordion-up 200ms ease-out",
-      "collapsible-down": "collapsible-down 200ms ease-out",
-      "collapsible-up": "collapsible-up 200ms ease-out",
-      "progress-indeterminate": "progress-indeterminate var(--duration-slow-02) var(--ease-productive-standard) infinite",
-      "skeleton-shimmer": "skeleton-shimmer var(--duration-slow-02) var(--ease-linear) infinite",
-      "caret-blink": "caret-blink 1.25s ease-out infinite",
-      "timer-bar": "timer-bar linear forwards",
-      "popover-in": "popover-in 150ms var(--ease-productive-entrance)",
-      "popover-out": "popover-out 100ms var(--ease-productive-exit)",
-      "processing-ants-ambient": "processing-ants 3s linear infinite",
-      "processing-ants-working": "processing-ants 2s linear infinite",
-      "processing-ants-urgent": "processing-ants 1s linear infinite"
-    },
-    backgroundImage: {
-      "gradient-brand": "var(--gradient-brand-light)",
-      "gradient-brand-dark": "var(--gradient-brand-dark)"
-    },
-    boxShadow: {
-      raised: "var(--shadow-raised)",
-      "raised-hover": "var(--shadow-raised-hover)",
-      "raised-inner": "var(--shadow-raised-inner)",
-      floating: "var(--shadow-floating)",
-      overlay: "var(--shadow-overlay)",
-      brand: "var(--shadow-brand)",
-      glow: "var(--shadow-glow)",
-      inset: "var(--shadow-inset)",
-      pressed: "var(--shadow-pressed)",
-      success: "var(--shadow-success)",
-      error: "var(--shadow-error)",
-      warning: "var(--shadow-warning)",
-      "ring-sm": "var(--shadow-ring-sm)",
-      ring: "var(--shadow-ring)",
-      kbd: "var(--shadow-kbd)"
-    },
-    transitionDuration: {
-      instant: "var(--duration-instant)",
-      "fast-01": "var(--duration-fast-01)",
-      "fast-02": "var(--duration-fast-02)",
-      "moderate-01": "var(--duration-moderate-01)",
-      "moderate-01b": "var(--duration-moderate-01b)",
-      "moderate-02": "var(--duration-moderate-02)",
-      "slow-01": "var(--duration-slow-01)",
-      "slow-02": "var(--duration-slow-02)"
-    },
-    transitionTimingFunction: {
-      "productive-standard": "var(--ease-productive-standard)",
-      "productive-entrance": "var(--ease-productive-entrance)",
-      "productive-exit": "var(--ease-productive-exit)",
-      "expressive-standard": "var(--ease-expressive-standard)",
-      "expressive-entrance": "var(--ease-expressive-entrance)",
-      "expressive-exit": "var(--ease-expressive-exit)",
-      bounce: "var(--ease-bounce)",
-      linear: "var(--ease-linear)"
-    },
-    zIndex: {
-      base: "var(--z-base)",
-      raised: "var(--z-raised)",
-      dropdown: "var(--z-dropdown)",
-      sticky: "var(--z-sticky)",
-      overlay: "var(--z-overlay)",
-      modal: "var(--z-modal)",
-      popover: "var(--z-popover)",
-      toast: "var(--z-toast)",
-      tooltip: "var(--z-tooltip)"
+var e = {}, t = false;
+function n() {
+  if (t) return;
+  t = true;
+  let e2 = '\n\u26A0\uFE0F  [@devalok/shilp-sutra] DEPRECATION: The JS preset at "./tailwind" is deprecated in 0.37.0 and will be removed in 0.38.0.\n\nEvery class utility you relied on from this preset (bg-surface-raised, p-ds-04, shadow-raised, text-ds-md, etc.) is now emitted zero CSS by Tailwind 4. Your app will ship unstyled unless you migrate.\n\nReplace:\n    // tailwind.config.ts\n    import shilpSutra from "@devalok/shilp-sutra/tailwind"\n    export default { presets: [shilpSutra], content: [...] }\n\nwith:\n    // app/globals.css\n    @import "tailwindcss";\n    @import "@devalok/shilp-sutra/css";\n\nFull guide: https://github.com/devalok-design/shilp-sutra/blob/main/MIGRATION.md\n';
+  try {
+    if (typeof process < "u" && typeof process.stderr?.write == "function") {
+      process.stderr.write(e2);
+      return;
     }
-  } },
-  plugins: [(0, import_plugin.default)(({ addBase: e2, addUtilities: t2 }) => {
-    let n = [
-      "heading-2xl",
-      "heading-xl",
-      "heading-lg",
-      "heading-md",
-      "heading-sm",
-      "heading-xs",
-      "body-lg",
-      "body-md",
-      "body-sm",
-      "body-xs",
-      "label-lg",
-      "label-md",
-      "label-sm",
-      "label-xs",
-      "label-plain-lg",
-      "label-plain-md",
-      "label-plain-sm",
-      "caption",
-      "overline",
-      "code"
-    ], r = /* @__PURE__ */ new Set([
-      "label-lg",
-      "label-md",
-      "label-sm",
-      "label-xs",
-      "overline"
-    ]), i = /* @__PURE__ */ new Set(["code"]), a = {};
-    for (let e3 of n) {
-      let t3 = {
-        "font-size": `var(--typo-${e3}-size)`,
-        "font-weight": `var(--typo-${e3}-weight)`,
-        "line-height": `var(--typo-${e3}-leading)`,
-        "letter-spacing": `var(--typo-${e3}-tracking)`
-      };
-      r.has(e3) && (t3["text-transform"] = "uppercase"), i.has(e3) && (t3["font-family"] = "var(--typo-code-font)"), a[`.text-${e3}`] = t3;
-    }
-    e2({
-      "@property --border-angle": {
-        syntax: '"<angle>"',
-        "initial-value": "0deg",
-        inherits: "false"
-      },
-      "@media screen and (max-width: 767px)": { 'input:not([type="checkbox"]):not([type="radio"]), textarea, select': { "font-size": "max(16px, 1em) !important" } }
-    }), t2({
-      ...a,
-      ".tabular-nums": { "font-variant-numeric": "tabular-nums" },
-      ".touch-target": { position: "relative" },
-      ".touch-target::before": {
-        content: '""',
-        position: "absolute",
-        top: "50%",
-        left: "50%",
-        transform: "translate(-50%, -50%)",
-        "min-width": "44px",
-        "min-height": "44px"
-      },
-      ".focus-ring": { "&:focus-visible": {
-        outline: "none",
-        "box-shadow": "0 0 0 var(--border-focus-width) var(--color-surface-base), 0 0 0 calc(var(--border-focus-width) + var(--border-focus-offset)) var(--color-accent-9)"
-      } },
-      ".focus-ring-inset": { "&:focus-visible": {
-        outline: "none",
-        "box-shadow": "inset 0 0 0 var(--border-focus-width) var(--color-accent-9)"
-      } },
-      ".focus-ring-sm": { "&:focus-visible": {
-        outline: "none",
-        "box-shadow": "0 0 0 var(--border-focus-width) var(--color-accent-7)"
-      } },
-      ".pt-safe": { "padding-top": "env(safe-area-inset-top, 0px)" },
-      ".pb-safe": { "padding-bottom": "env(safe-area-inset-bottom, 0px)" },
-      ".pl-safe": { "padding-left": "env(safe-area-inset-left, 0px)" },
-      ".pr-safe": { "padding-right": "env(safe-area-inset-right, 0px)" },
-      ".p-safe": {
-        "padding-top": "env(safe-area-inset-top, 0px)",
-        "padding-bottom": "env(safe-area-inset-bottom, 0px)",
-        "padding-left": "env(safe-area-inset-left, 0px)",
-        "padding-right": "env(safe-area-inset-right, 0px)"
-      }
-    });
-  })]
-};
+  } catch {
+  }
+  console.warn(e2);
+}
+n();
 
 module.exports = module.exports.default;
 module.exports.default = module.exports;

package/dist/tailwind/preset.d.ts

@@ -1,4 +1,25 @@
 import { Config } from 'tailwindcss';
+/**
+ * @deprecated Since 0.37.0. Tailwind 4 uses CSS-first configuration via
+ * `@theme`, `@utility`, and `@custom-variant`, not JavaScript presets.
+ *
+ * Migrate to:
+ *
+ * ```css
+ *   // app/globals.css
+ *   @import "tailwindcss";
+ *   @import "@devalok/shilp-sutra/css";
+ * ```
+ *
+ * And delete your `tailwind.config.ts` (or shrink it to whatever your own
+ * app needs — we no longer ask you to reference our preset).
+ *
+ * This export remains as a typed no-op so in-flight consumer code that
+ * still imports it doesn't crash at import time. Scheduled for removal
+ * in 0.38.0.
+ *
+ * See MIGRATION.md at the repo root for the full 0.36 → 0.37 walkthrough.
+ */
 declare const preset: Partial<Config>;
 export default preset;
 //# sourceMappingURL=preset.d.ts.map

package/dist/tailwind/preset.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"preset.d.ts","sourceRoot":"","sources":["../../src/tailwind/preset.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAA;AAGzC,QAAA,MAAM,MAAM,EAAE,OAAO,CAAC,MAAM,CA4f3B,CAAA;AAED,eAAe,MAAM,CAAA"}
+{"version":3,"file":"preset.d.ts","sourceRoot":"","sources":["../../src/tailwind/preset.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAA;AAEzC;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,QAAA,MAAM,MAAM,EAAE,OAAO,CAAC,MAAM,CAAM,CAAA;AA8DlC,eAAe,MAAM,CAAA"}