@n3wth/ui 0.4.0 → 0.5.0

package/dist/molecules/NavLink/NavLink.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NavLink.d.ts","sourceRoot":"","sources":["../../../src/molecules/NavLink/NavLink.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,oBAAoB,EAAE,KAAK,SAAS,EAAc,MAAM,OAAO,CAAA;AAG7E,MAAM,WAAW,YAAa,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC3E,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,MAAM,CAAA;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,EAAE,SAAS,CAAA;CACpB;AAED,eAAO,MAAM,OAAO,4GAoCnB,CAAA"}
+{"version":3,"file":"NavLink.d.ts","sourceRoot":"","sources":["../../../src/molecules/NavLink/NavLink.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,oBAAoB,EAAE,KAAK,SAAS,EAAc,MAAM,OAAO,CAAA;AAG7E,MAAM,WAAW,YAAa,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC3E,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,MAAM,CAAA;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,EAAE,SAAS,CAAA;CACpB;AAED,eAAO,MAAM,OAAO,4GAuCnB,CAAA"}

package/dist/organisms/Nav/Nav.d.ts

@@ -13,6 +13,7 @@ export interface NavProps extends HTMLAttributes<HTMLElement> {
     onThemeToggle?: () => void;
     showThemeToggle?: boolean;
     fixed?: boolean;
+    hideOnScroll?: boolean;
 }
-export declare function Nav({ logo, logoHref, items, theme, onThemeToggle, showThemeToggle, fixed, className, ...props }: NavProps): import("react/jsx-runtime").JSX.Element;
+export declare function Nav({ logo, logoHref, items, theme, onThemeToggle, showThemeToggle, fixed, hideOnScroll, className, ...props }: NavProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Nav.d.ts.map

package/dist/organisms/Nav/Nav.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Nav.d.ts","sourceRoot":"","sources":["../../../src/organisms/Nav/Nav.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAyB,MAAM,OAAO,CAAA;AAMlF,MAAM,WAAW,OAAO;IACtB,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,QAAS,SAAQ,cAAc,CAAC,WAAW,CAAC;IAC3D,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,OAAO,EAAE,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IACxB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;IAC1B,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB;AAED,wBAAgB,GAAG,CAAC,EAClB,IAAI,EACJ,QAAc,EACd,KAAU,EACV,KAAc,EACd,aAAa,EACb,eAAsB,EACtB,KAAa,EACb,SAAS,EACT,GAAG,KAAK,EACT,EAAE,QAAQ,2CAyJV"}
+{"version":3,"file":"Nav.d.ts","sourceRoot":"","sources":["../../../src/organisms/Nav/Nav.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAA4C,MAAM,OAAO,CAAA;AAMrG,MAAM,WAAW,OAAO;IACtB,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,QAAS,SAAQ,cAAc,CAAC,WAAW,CAAC;IAC3D,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,OAAO,EAAE,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IACxB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;IAC1B,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,YAAY,CAAC,EAAE,OAAO,CAAA;CACvB;AAED,wBAAgB,GAAG,CAAC,EAClB,IAAI,EACJ,QAAc,EACd,KAAU,EACV,KAAc,EACd,aAAa,EACb,eAAsB,EACtB,KAAa,EACb,YAAoB,EACpB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,QAAQ,2CAoLV"}

package/dist/r/button.json

@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "button",
+  "dependencies": [
+    "lucide-react"
+  ],
+  "files": [
+    {
+      "path": "src/atoms/Button/Button.tsx",
+      "content": "import {\n  forwardRef,\n  type ButtonHTMLAttributes,\n  type ReactNode,\n  cloneElement,\n  isValidElement,\n} from 'react'\nimport { cn } from '../../utils/cn'\n\nexport type ButtonSize = 'sm' | 'md' | 'lg'\n\nexport interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  variant?: 'primary' | 'secondary' | 'ghost' | 'glass'\n  /** Size of the button. Can be a single value or responsive object */\n  size?: ButtonSize | { base?: ButtonSize; md?: ButtonSize; lg?: ButtonSize }\n  children: ReactNode\n  isLoading?: boolean\n  leftIcon?: ReactNode\n  rightIcon?: ReactNode\n  asChild?: boolean\n  /** Ensures minimum 44px touch target for accessibility (WCAG 2.5.5) */\n  touchTarget?: boolean\n}\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      variant = 'primary',\n      size = 'md',\n      children,\n      isLoading = false,\n      leftIcon,\n      rightIcon,\n      className,\n      disabled,\n      asChild = false,\n      touchTarget = false,\n      ...props\n    },\n    ref\n  ) => {\n    const baseStyles = [\n      'inline-flex items-center justify-center gap-2',\n      'font-medium',\n      'border',\n      'rounded-full',\n      'transition-[transform,background-color,border-color,color,opacity] duration-200 ease-out',\n      'focus-ring',\n      'disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none',\n      // Active state for touch feedback\n      'active:scale-[0.96]',\n    ]\n\n    const variants = {\n      primary: [\n        'bg-[var(--color-white)] text-[var(--color-bg)]',\n        'border-[var(--color-white)]',\n        'hover:scale-[1.02]',\n        'glow-white',\n      ],\n      secondary: [\n        'bg-transparent text-[var(--color-white)]',\n        'border-[var(--glass-border)]',\n        'hover:border-[var(--glass-highlight)] hover:bg-[var(--glass-bg)]',\n      ],\n      ghost: [\n        'bg-transparent text-[var(--color-grey-400)]',\n        'border-transparent',\n        'hover:text-[var(--color-white)] hover:bg-[var(--glass-bg)]',\n      ],\n      glass: [\n        'bg-[var(--glass-bg)] text-[var(--color-white)]',\n        'border-[var(--glass-border)]',\n        'backdrop-blur-lg',\n        'hover:bg-[rgba(255,255,255,0.1)] hover:border-[var(--glass-highlight)]',\n        'hover:scale-[1.02]',\n      ],\n    }\n\n    const sizes = {\n      sm: 'px-3 py-1.5 text-xs',\n      md: 'px-4 py-2 text-sm',\n      lg: 'px-6 py-3 text-base',\n    }\n\n    // Handle responsive size prop\n    const getSizeClasses = () => {\n      if (typeof size === 'string') {\n        return sizes[size]\n      }\n\n      // Responsive size object\n      const classes: string[] = []\n      if (size.base) classes.push(sizes[size.base])\n      if (size.md) classes.push(`md:${sizes[size.md].split(' ').join(' md:')}`)\n      if (size.lg) classes.push(`lg:${sizes[size.lg].split(' ').join(' lg:')}`)\n\n      // If no base specified, default to sm for mobile-first\n      if (!size.base && (size.md || size.lg)) {\n        classes.unshift(sizes.sm)\n      }\n\n      return classes.join(' ')\n    }\n\n    const touchTargetStyles = touchTarget ? 'min-w-[44px] min-h-[44px]' : ''\n\n    const buttonClassName = cn(\n      baseStyles,\n      variants[variant],\n      getSizeClasses(),\n      touchTargetStyles,\n      className\n    )\n\n    type ChildProps = { children?: ReactNode; className?: string }\n    const childElement = isValidElement<ChildProps>(children) ? children : null\n\n    const content = (\n      <>\n        {isLoading ? (\n          <span className=\"w-4 h-4 border-2 border-current border-t-transparent rounded-full animate-spin\" />\n        ) : (\n          leftIcon\n        )}\n        {asChild && childElement ? childElement.props.children : children}\n        {!isLoading && rightIcon}\n      </>\n    )\n\n    if (asChild && childElement) {\n      return cloneElement(childElement, {\n        className: cn(buttonClassName, childElement.props.className),\n        ref,\n        children: content,\n      } as ChildProps)\n    }\n\n    return (\n      <button\n        ref={ref}\n        className={buttonClassName}\n        disabled={disabled || isLoading}\n        {...props}\n      >\n        {content}\n      </button>\n    )\n  }\n)\n\nButton.displayName = 'Button'\n",
+      "type": "registry:ui"
+    }
+  ],
+  "type": "registry:ui"
+}

package/dist/r/card.json

@@ -0,0 +1,12 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "card",
+  "files": [
+    {
+      "path": "src/molecules/Card/Card.tsx",
+      "content": "import { type HTMLAttributes, type ReactNode } from 'react'\nimport { cn } from '../../utils/cn'\n\nexport interface CardProps extends HTMLAttributes<HTMLDivElement> {\n  variant?: 'default' | 'glass' | 'interactive'\n  padding?: 'none' | 'sm' | 'md' | 'lg'\n  children: ReactNode\n}\n\nexport function Card({\n  variant = 'default',\n  padding = 'md',\n  children,\n  className,\n  ...props\n}: CardProps) {\n  const baseStyles = [\n    'rounded-2xl',\n    'border',\n    'transition-[background-color,border-color] duration-300 ease-out',\n  ]\n\n  const variants = {\n    default: [\n      'bg-transparent',\n      'border-[var(--glass-border)]',\n    ],\n    glass: [\n      'bg-[var(--glass-bg)]',\n      'backdrop-blur-lg',\n      'border-[var(--glass-border)]',\n    ],\n    interactive: [\n      'bg-transparent',\n      'border-[var(--glass-border)]',\n      'hover:border-[var(--glass-highlight)]',\n      'hover:bg-[var(--glass-bg)]',\n      'cursor-pointer',\n      'gradient-border shine-sweep',\n    ],\n  }\n\n  const paddings = {\n    none: '',\n    sm: 'p-3',\n    md: 'p-5',\n    lg: 'p-8',\n  }\n\n  return (\n    <div\n      className={cn(baseStyles, variants[variant], paddings[padding], className)}\n      {...props}\n    >\n      {children}\n    </div>\n  )\n}\n\nexport interface CardHeaderProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactNode\n}\n\nexport function CardHeader({ children, className, ...props }: CardHeaderProps) {\n  return (\n    <div className={cn('flex flex-col gap-1.5', className)} {...props}>\n      {children}\n    </div>\n  )\n}\n\nexport interface CardTitleProps extends HTMLAttributes<HTMLHeadingElement> {\n  children: ReactNode\n  as?: 'h1' | 'h2' | 'h3' | 'h4'\n}\n\nexport function CardTitle({ children, as: Tag = 'h3', className, ...props }: CardTitleProps) {\n  return (\n    <Tag\n      className={cn(\n        'font-display text-base font-semibold text-[var(--color-white)]',\n        'tracking-tight',\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </Tag>\n  )\n}\n\nexport interface CardDescriptionProps extends HTMLAttributes<HTMLParagraphElement> {\n  children: ReactNode\n}\n\nexport function CardDescription({ children, className, ...props }: CardDescriptionProps) {\n  return (\n    <p\n      className={cn(\n        'text-sm text-[var(--color-grey-400)]',\n        'line-clamp-2',\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </p>\n  )\n}\n\nexport interface CardContentProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactNode\n}\n\nexport function CardContent({ children, className, ...props }: CardContentProps) {\n  return (\n    <div className={cn('mt-4', className)} {...props}>\n      {children}\n    </div>\n  )\n}\n\nexport interface CardFooterProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactNode\n}\n\nexport function CardFooter({ children, className, ...props }: CardFooterProps) {\n  return (\n    <div\n      className={cn(\n        'mt-4 pt-4',\n        'border-t border-[var(--glass-border)]',\n        'flex items-center gap-3',\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  )\n}\n",
+      "type": "registry:ui"
+    }
+  ],
+  "type": "registry:ui"
+}

package/dist/r/hero.json

@@ -0,0 +1,12 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "hero",
+  "files": [
+    {
+      "path": "src/organisms/Hero/Hero.tsx",
+      "content": "import { type HTMLAttributes, type ReactNode } from 'react'\nimport { cn } from '../../utils/cn'\nimport { Badge } from '../../atoms/Badge'\nimport { Button } from '../../atoms/Button'\n\nexport interface HeroCTA {\n  label: string\n  href: string\n  variant?: 'primary' | 'secondary' | 'ghost'\n}\n\nexport interface HeroProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {\n  badge?: string\n  title: ReactNode\n  description?: ReactNode\n  ctas?: HeroCTA[]\n  align?: 'left' | 'center'\n  size?: 'default' | 'large'\n  gradient?: boolean\n}\n\nexport function Hero({\n  badge,\n  title,\n  description,\n  ctas = [],\n  align = 'center',\n  size = 'default',\n  gradient = true,\n  className,\n  ...props\n}: HeroProps) {\n  const alignments = {\n    left: 'text-left items-start',\n    center: 'text-center items-center',\n  }\n\n  const titleSizes = {\n    default: 'text-4xl sm:text-5xl md:text-6xl',\n    large: 'text-5xl sm:text-6xl md:text-7xl lg:text-8xl',\n  }\n\n  return (\n    <section\n      className={cn(\n        'relative',\n        'px-6 py-24 md:py-32 lg:py-40',\n        className\n      )}\n      {...props}\n    >\n      <div\n        className={cn(\n          'mx-auto max-w-4xl',\n          'flex flex-col gap-6',\n          alignments[align]\n        )}\n      >\n        {badge && (\n          <Badge variant=\"default\" size=\"md\" className=\"animate-in\">\n            {badge}\n          </Badge>\n        )}\n\n        <h1\n          className={cn(\n            'font-display font-semibold tracking-tight',\n            titleSizes[size],\n            gradient ? 'hero-gradient-text' : 'text-[var(--color-white)]',\n            'animate-in'\n          )}\n          style={{ animationDelay: '0.1s', textAlign: align === 'center' ? 'center' : 'left', width: '100%', display: 'block' }}\n        >\n          {title}\n        </h1>\n\n        {description && (\n          <p\n            className={cn(\n              'text-lg md:text-xl',\n              'text-[var(--color-grey-400)]',\n              'max-w-2xl leading-relaxed',\n              'animate-in'\n            )}\n            style={{ animationDelay: '0.2s' }}\n          >\n            {description}\n          </p>\n        )}\n\n        {ctas.length > 0 && (\n          <div\n            className={cn(\n              'flex flex-wrap gap-4 mt-4',\n              align === 'center' ? 'justify-center' : 'justify-start',\n              'animate-in'\n            )}\n            style={{ animationDelay: '0.3s' }}\n          >\n            {ctas.map((cta, index) => (\n              <Button\n                key={cta.href}\n                variant={cta.variant || (index === 0 ? 'primary' : 'secondary')}\n                size=\"lg\"\n                asChild\n              >\n                <a href={cta.href}>{cta.label}</a>\n              </Button>\n            ))}\n          </div>\n        )}\n      </div>\n    </section>\n  )\n}\n",
+      "type": "registry:ui"
+    }
+  ],
+  "type": "registry:ui"
+}

package/dist/r/registry.json

@@ -0,0 +1,38 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry.json",
+  "name": "n3wth-ui",
+  "homepage": "https://ui.newth.ai",
+  "items": [
+    {
+      "name": "button",
+      "type": "registry:ui",
+      "dependencies": ["lucide-react"],
+      "files": [
+        {
+          "path": "src/atoms/Button/Button.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "card",
+      "type": "registry:ui",
+      "files": [
+        {
+          "path": "src/molecules/Card/Card.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "hero",
+      "type": "registry:ui",
+      "files": [
+        {
+          "path": "src/organisms/Hero/Hero.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    }
+  ]
+}

package/dist/styles.css

@@ -213,6 +213,25 @@ body {
   font-variant-numeric: tabular-nums;
 }
 
+/* Apple-style text shadow for readability over shapes/backgrounds */
+.text-glow {
+  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5),
+               0 1px 3px rgba(0, 0, 0, 0.3);
+}
+
+.text-glow-subtle {
+  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.4);
+}
+
+[data-theme='light'] .text-glow {
+  text-shadow: 0 2px 20px rgba(255, 255, 255, 0.5),
+               0 1px 3px rgba(255, 255, 255, 0.3);
+}
+
+[data-theme='light'] .text-glow-subtle {
+  text-shadow: 0 1px 12px rgba(255, 255, 255, 0.4);
+}
+
 /* Hero gradient text animation - enhanced with more dimension */
 .hero-gradient-text {
   background: linear-gradient(
@@ -304,13 +323,11 @@ body {
 
 /* Glass Nav */
 .glass-nav {
-  background: rgba(0, 0, 0, 0.7);
-  backdrop-filter: blur(20px) saturate(180%);
-  -webkit-backdrop-filter: blur(20px) saturate(180%);
+  background: var(--color-bg);
 }
 
 [data-theme='light'] .glass-nav {
-  background: rgba(255, 255, 255, 0.8);
+  background: var(--color-bg);
 }
 
 /* Glass Pill */
@@ -875,6 +892,230 @@ body {
   border-width: 0;
 }
 
+/* ============================================================
+   Mobile-First Responsive Utilities
+   ============================================================ */
+
+/* Touch-friendly minimum target sizes (WCAG 2.5.5 AAA = 44px) */
+.touch-target {
+  min-width: 44px;
+  min-height: 44px;
+}
+
+.touch-target-sm {
+  min-width: 36px;
+  min-height: 36px;
+}
+
+/* Safe area insets for notched devices */
+.safe-area-top {
+  padding-top: env(safe-area-inset-top);
+}
+
+.safe-area-bottom {
+  padding-bottom: env(safe-area-inset-bottom);
+}
+
+.safe-area-left {
+  padding-left: env(safe-area-inset-left);
+}
+
+.safe-area-right {
+  padding-right: env(safe-area-inset-right);
+}
+
+.safe-area-inset {
+  padding-top: env(safe-area-inset-top);
+  padding-bottom: env(safe-area-inset-bottom);
+  padding-left: env(safe-area-inset-left);
+  padding-right: env(safe-area-inset-right);
+}
+
+/* Mobile viewport height (accounts for mobile browser chrome) */
+.min-h-screen-mobile {
+  min-height: 100vh;
+  min-height: 100dvh;
+}
+
+.h-screen-mobile {
+  height: 100vh;
+  height: 100dvh;
+}
+
+/* Disable hover effects on touch devices */
+@media (hover: none) and (pointer: coarse) {
+  .glass-pill:hover,
+  .glass-card:hover,
+  .skill-card:hover,
+  .glow-white:hover,
+  .glow-accent:hover,
+  .link-hover:hover::after,
+  .gradient-border:hover::before,
+  .shine-sweep:hover::after {
+    transform: none;
+    box-shadow: none;
+  }
+
+  /* Use active states for touch feedback */
+  .glass-pill:active {
+    background: var(--glass-highlight);
+    transform: scale(0.98);
+  }
+
+  .glass-card:active,
+  .skill-card:active {
+    background: var(--glass-bg);
+  }
+
+  /* Disable shine sweep on touch */
+  .shine-sweep::after {
+    display: none;
+  }
+}
+
+/* Improved tap highlight for iOS */
+@supports (-webkit-touch-callout: none) {
+  .tap-highlight-none {
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  button,
+  a,
+  [role="button"] {
+    -webkit-tap-highlight-color: rgba(255, 255, 255, 0.1);
+  }
+
+  [data-theme='light'] button,
+  [data-theme='light'] a,
+  [data-theme='light'] [role="button"] {
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
+  }
+}
+
+/* Mobile-specific text sizing for readability */
+@media (max-width: 767px) {
+  .text-fluid-sm {
+    font-size: clamp(0.75rem, 2.5vw, 0.875rem);
+  }
+
+  .text-fluid-base {
+    font-size: clamp(0.875rem, 3vw, 1rem);
+  }
+
+  .text-fluid-lg {
+    font-size: clamp(1rem, 4vw, 1.25rem);
+  }
+
+  .text-fluid-xl {
+    font-size: clamp(1.25rem, 5vw, 1.5rem);
+  }
+
+  .text-fluid-2xl {
+    font-size: clamp(1.5rem, 6vw, 2rem);
+  }
+
+  .text-fluid-3xl {
+    font-size: clamp(1.875rem, 8vw, 3rem);
+  }
+
+  /* Prevent zoom on input focus (iOS) */
+  input[type="text"],
+  input[type="email"],
+  input[type="password"],
+  input[type="search"],
+  input[type="tel"],
+  input[type="url"],
+  input[type="number"],
+  select,
+  textarea {
+    font-size: 16px;
+  }
+}
+
+/* Responsive spacing utilities */
+.gap-responsive {
+  gap: 1rem;
+}
+
+@media (min-width: 768px) {
+  .gap-responsive {
+    gap: 1.5rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .gap-responsive {
+    gap: 2rem;
+  }
+}
+
+.p-responsive {
+  padding: 1rem;
+}
+
+@media (min-width: 768px) {
+  .p-responsive {
+    padding: 1.5rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .p-responsive {
+    padding: 2rem;
+  }
+}
+
+/* Mobile container padding */
+.container-mobile {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+@media (min-width: 640px) {
+  .container-mobile {
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+  }
+}
+
+@media (min-width: 768px) {
+  .container-mobile {
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .container-mobile {
+    padding-left: 2.5rem;
+    padding-right: 2.5rem;
+  }
+}
+
+/* Landscape orientation handling */
+@media (max-height: 500px) and (orientation: landscape) {
+  .landscape-compact {
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+  }
+
+  .landscape-hidden {
+    display: none;
+  }
+}
+
+/* Stack on mobile, row on larger screens */
+.stack-mobile {
+  display: flex;
+  flex-direction: column;
+}
+
+@media (min-width: 768px) {
+  .stack-mobile {
+    flex-direction: row;
+  }
+}
+
 /* ============================================================
    Reduced Motion Preferences
    ============================================================ */
@@ -963,4 +1204,101 @@ body {
   .connection-line {
     animation: none !important;
   }
+
+  /* Disable gradient animations */
+  .gradient-border::before {
+    transition: none !important;
+  }
+
+  /* Disable glow effects */
+  .glow-white,
+  .glow-accent,
+  .focus-glow:focus-within {
+    box-shadow: none !important;
+    transition: none !important;
+  }
+
+  /* Disable shine sweep */
+  .shine-sweep::after {
+    display: none !important;
+  }
+
+  /* Ensure instant state changes */
+  button,
+  a,
+  [role="button"],
+  .glass-pill,
+  .glass-card,
+  .skill-card,
+  .copy-btn,
+  .command-box {
+    transition: none !important;
+  }
+
+  /* Keep functional focus indicators */
+  .focus-ring:focus-visible {
+    outline: 2px solid var(--color-accent);
+    outline-offset: 2px;
+  }
+}
+
+/* ============================================================
+   Responsive Shape Component
+   ============================================================ */
+
+.shape-responsive {
+  width: var(--shape-size-base, 48px);
+  height: var(--shape-size-base, 48px);
+}
+
+@media (min-width: 640px) {
+  .shape-responsive {
+    width: var(--shape-size-sm, var(--shape-size-base, 48px));
+    height: var(--shape-size-sm, var(--shape-size-base, 48px));
+  }
+}
+
+@media (min-width: 768px) {
+  .shape-responsive {
+    width: var(--shape-size-md, var(--shape-size-sm, var(--shape-size-base, 48px)));
+    height: var(--shape-size-md, var(--shape-size-sm, var(--shape-size-base, 48px)));
+  }
+}
+
+@media (min-width: 1024px) {
+  .shape-responsive {
+    width: var(--shape-size-lg, var(--shape-size-md, var(--shape-size-sm, var(--shape-size-base, 48px))));
+    height: var(--shape-size-lg, var(--shape-size-md, var(--shape-size-sm, var(--shape-size-base, 48px))));
+  }
+}
+
+/* ============================================================
+   High Contrast Mode Support
+   ============================================================ */
+
+@media (prefers-contrast: high) {
+  :root,
+  [data-theme='dark'] {
+    --glass-border: rgba(255, 255, 255, 0.3);
+    --glass-highlight: rgba(255, 255, 255, 0.5);
+    --color-grey-400: #a1a1a6;
+    --color-grey-600: #8e8e93;
+  }
+
+  [data-theme='light'] {
+    --glass-border: rgba(0, 0, 0, 0.3);
+    --glass-highlight: rgba(0, 0, 0, 0.5);
+    --color-grey-400: #636366;
+    --color-grey-600: #48484a;
+  }
+
+  .glass-card,
+  .glass-pill,
+  .command-box {
+    border-width: 2px;
+  }
+
+  .focus-ring:focus-visible {
+    outline-width: 3px;
+  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@n3wth/ui",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Atomic design system for Newth sites - flat, minimal, iOS-inspired",
   "type": "module",
   "main": "./dist/index.js",
@@ -26,7 +26,8 @@
     "build": "tsc && vite build && node -e \"const fs=require('fs');const css=fs.readFileSync('src/styles.css','utf8').replace(/@import 'tailwindcss';\\n\\n/,'');fs.writeFileSync('dist/styles.css',css)\"",
     "lint": "eslint src",
     "prepublishOnly": "npm run build",
-    "release:patch": "npm version patch -m 'chore: bump version to %s' && git push && git push --tags && gh release create v$(node -p \"require('./package.json').version\") --generate-notes",
+    "release:patch": "npm version patch -m 'chore: bump version to %s' && npm run registry:build && git add . && git commit -m 'chore: update registry' && git push && git push --tags && gh release create v$(node -p \"require('./package.json').version\") --generate-notes",
+    "registry:build": "npx shadcn@latest build",
     "release:minor": "npm version minor -m 'chore: bump version to %s' && git push && git push --tags && gh release create v$(node -p \"require('./package.json').version\") --generate-notes",
     "release:major": "npm version major -m 'chore: bump version to %s' && git push && git push --tags && gh release create v$(node -p \"require('./package.json').version\") --generate-notes"
   },

package/public/r/button.json

@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "button",
+  "dependencies": [
+    "lucide-react"
+  ],
+  "files": [
+    {
+      "path": "src/atoms/Button/Button.tsx",
+      "content": "import {\n  forwardRef,\n  type ButtonHTMLAttributes,\n  type ReactNode,\n  cloneElement,\n  isValidElement,\n} from 'react'\nimport { cn } from '../../utils/cn'\n\nexport type ButtonSize = 'sm' | 'md' | 'lg'\n\nexport interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  variant?: 'primary' | 'secondary' | 'ghost' | 'glass'\n  /** Size of the button. Can be a single value or responsive object */\n  size?: ButtonSize | { base?: ButtonSize; md?: ButtonSize; lg?: ButtonSize }\n  children: ReactNode\n  isLoading?: boolean\n  leftIcon?: ReactNode\n  rightIcon?: ReactNode\n  asChild?: boolean\n  /** Ensures minimum 44px touch target for accessibility (WCAG 2.5.5) */\n  touchTarget?: boolean\n}\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      variant = 'primary',\n      size = 'md',\n      children,\n      isLoading = false,\n      leftIcon,\n      rightIcon,\n      className,\n      disabled,\n      asChild = false,\n      touchTarget = false,\n      ...props\n    },\n    ref\n  ) => {\n    const baseStyles = [\n      'inline-flex items-center justify-center gap-2',\n      'font-medium',\n      'border',\n      'rounded-full',\n      'transition-[transform,background-color,border-color,color,opacity] duration-200 ease-out',\n      'focus-ring',\n      'disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none',\n      // Active state for touch feedback\n      'active:scale-[0.96]',\n    ]\n\n    const variants = {\n      primary: [\n        'bg-[var(--color-white)] text-[var(--color-bg)]',\n        'border-[var(--color-white)]',\n        'hover:scale-[1.02]',\n        'glow-white',\n      ],\n      secondary: [\n        'bg-transparent text-[var(--color-white)]',\n        'border-[var(--glass-border)]',\n        'hover:border-[var(--glass-highlight)] hover:bg-[var(--glass-bg)]',\n      ],\n      ghost: [\n        'bg-transparent text-[var(--color-grey-400)]',\n        'border-transparent',\n        'hover:text-[var(--color-white)] hover:bg-[var(--glass-bg)]',\n      ],\n      glass: [\n        'bg-[var(--glass-bg)] text-[var(--color-white)]',\n        'border-[var(--glass-border)]',\n        'backdrop-blur-lg',\n        'hover:bg-[rgba(255,255,255,0.1)] hover:border-[var(--glass-highlight)]',\n        'hover:scale-[1.02]',\n      ],\n    }\n\n    const sizes = {\n      sm: 'px-3 py-1.5 text-xs',\n      md: 'px-4 py-2 text-sm',\n      lg: 'px-6 py-3 text-base',\n    }\n\n    // Handle responsive size prop\n    const getSizeClasses = () => {\n      if (typeof size === 'string') {\n        return sizes[size]\n      }\n\n      // Responsive size object\n      const classes: string[] = []\n      if (size.base) classes.push(sizes[size.base])\n      if (size.md) classes.push(`md:${sizes[size.md].split(' ').join(' md:')}`)\n      if (size.lg) classes.push(`lg:${sizes[size.lg].split(' ').join(' lg:')}`)\n\n      // If no base specified, default to sm for mobile-first\n      if (!size.base && (size.md || size.lg)) {\n        classes.unshift(sizes.sm)\n      }\n\n      return classes.join(' ')\n    }\n\n    const touchTargetStyles = touchTarget ? 'min-w-[44px] min-h-[44px]' : ''\n\n    const buttonClassName = cn(\n      baseStyles,\n      variants[variant],\n      getSizeClasses(),\n      touchTargetStyles,\n      className\n    )\n\n    type ChildProps = { children?: ReactNode; className?: string }\n    const childElement = isValidElement<ChildProps>(children) ? children : null\n\n    const content = (\n      <>\n        {isLoading ? (\n          <span className=\"w-4 h-4 border-2 border-current border-t-transparent rounded-full animate-spin\" />\n        ) : (\n          leftIcon\n        )}\n        {asChild && childElement ? childElement.props.children : children}\n        {!isLoading && rightIcon}\n      </>\n    )\n\n    if (asChild && childElement) {\n      return cloneElement(childElement, {\n        className: cn(buttonClassName, childElement.props.className),\n        ref,\n        children: content,\n      } as ChildProps)\n    }\n\n    return (\n      <button\n        ref={ref}\n        className={buttonClassName}\n        disabled={disabled || isLoading}\n        {...props}\n      >\n        {content}\n      </button>\n    )\n  }\n)\n\nButton.displayName = 'Button'\n",
+      "type": "registry:ui"
+    }
+  ],
+  "type": "registry:ui"
+}

package/public/r/card.json

@@ -0,0 +1,12 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "card",
+  "files": [
+    {
+      "path": "src/molecules/Card/Card.tsx",
+      "content": "import { type HTMLAttributes, type ReactNode } from 'react'\nimport { cn } from '../../utils/cn'\n\nexport interface CardProps extends HTMLAttributes<HTMLDivElement> {\n  variant?: 'default' | 'glass' | 'interactive'\n  padding?: 'none' | 'sm' | 'md' | 'lg'\n  children: ReactNode\n}\n\nexport function Card({\n  variant = 'default',\n  padding = 'md',\n  children,\n  className,\n  ...props\n}: CardProps) {\n  const baseStyles = [\n    'rounded-2xl',\n    'border',\n    'transition-[background-color,border-color] duration-300 ease-out',\n  ]\n\n  const variants = {\n    default: [\n      'bg-transparent',\n      'border-[var(--glass-border)]',\n    ],\n    glass: [\n      'bg-[var(--glass-bg)]',\n      'backdrop-blur-lg',\n      'border-[var(--glass-border)]',\n    ],\n    interactive: [\n      'bg-transparent',\n      'border-[var(--glass-border)]',\n      'hover:border-[var(--glass-highlight)]',\n      'hover:bg-[var(--glass-bg)]',\n      'cursor-pointer',\n      'gradient-border shine-sweep',\n    ],\n  }\n\n  const paddings = {\n    none: '',\n    sm: 'p-3',\n    md: 'p-5',\n    lg: 'p-8',\n  }\n\n  return (\n    <div\n      className={cn(baseStyles, variants[variant], paddings[padding], className)}\n      {...props}\n    >\n      {children}\n    </div>\n  )\n}\n\nexport interface CardHeaderProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactNode\n}\n\nexport function CardHeader({ children, className, ...props }: CardHeaderProps) {\n  return (\n    <div className={cn('flex flex-col gap-1.5', className)} {...props}>\n      {children}\n    </div>\n  )\n}\n\nexport interface CardTitleProps extends HTMLAttributes<HTMLHeadingElement> {\n  children: ReactNode\n  as?: 'h1' | 'h2' | 'h3' | 'h4'\n}\n\nexport function CardTitle({ children, as: Tag = 'h3', className, ...props }: CardTitleProps) {\n  return (\n    <Tag\n      className={cn(\n        'font-display text-base font-semibold text-[var(--color-white)]',\n        'tracking-tight',\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </Tag>\n  )\n}\n\nexport interface CardDescriptionProps extends HTMLAttributes<HTMLParagraphElement> {\n  children: ReactNode\n}\n\nexport function CardDescription({ children, className, ...props }: CardDescriptionProps) {\n  return (\n    <p\n      className={cn(\n        'text-sm text-[var(--color-grey-400)]',\n        'line-clamp-2',\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </p>\n  )\n}\n\nexport interface CardContentProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactNode\n}\n\nexport function CardContent({ children, className, ...props }: CardContentProps) {\n  return (\n    <div className={cn('mt-4', className)} {...props}>\n      {children}\n    </div>\n  )\n}\n\nexport interface CardFooterProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactNode\n}\n\nexport function CardFooter({ children, className, ...props }: CardFooterProps) {\n  return (\n    <div\n      className={cn(\n        'mt-4 pt-4',\n        'border-t border-[var(--glass-border)]',\n        'flex items-center gap-3',\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  )\n}\n",
+      "type": "registry:ui"
+    }
+  ],
+  "type": "registry:ui"
+}

package/public/r/hero.json

@@ -0,0 +1,12 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "hero",
+  "files": [
+    {
+      "path": "src/organisms/Hero/Hero.tsx",
+      "content": "import { type HTMLAttributes, type ReactNode } from 'react'\nimport { cn } from '../../utils/cn'\nimport { Badge } from '../../atoms/Badge'\nimport { Button } from '../../atoms/Button'\n\nexport interface HeroCTA {\n  label: string\n  href: string\n  variant?: 'primary' | 'secondary' | 'ghost'\n}\n\nexport interface HeroProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {\n  badge?: string\n  title: ReactNode\n  description?: ReactNode\n  ctas?: HeroCTA[]\n  align?: 'left' | 'center'\n  size?: 'default' | 'large'\n  gradient?: boolean\n}\n\nexport function Hero({\n  badge,\n  title,\n  description,\n  ctas = [],\n  align = 'center',\n  size = 'default',\n  gradient = true,\n  className,\n  ...props\n}: HeroProps) {\n  const alignments = {\n    left: 'text-left items-start',\n    center: 'text-center items-center',\n  }\n\n  const titleSizes = {\n    default: 'text-4xl sm:text-5xl md:text-6xl',\n    large: 'text-5xl sm:text-6xl md:text-7xl lg:text-8xl',\n  }\n\n  return (\n    <section\n      className={cn(\n        'relative',\n        'px-6 py-24 md:py-32 lg:py-40',\n        className\n      )}\n      {...props}\n    >\n      <div\n        className={cn(\n          'mx-auto max-w-4xl',\n          'flex flex-col gap-6',\n          alignments[align]\n        )}\n      >\n        {badge && (\n          <Badge variant=\"default\" size=\"md\" className=\"animate-in\">\n            {badge}\n          </Badge>\n        )}\n\n        <h1\n          className={cn(\n            'font-display font-semibold tracking-tight',\n            titleSizes[size],\n            gradient ? 'hero-gradient-text' : 'text-[var(--color-white)]',\n            'animate-in'\n          )}\n          style={{ animationDelay: '0.1s', textAlign: align === 'center' ? 'center' : 'left', width: '100%', display: 'block' }}\n        >\n          {title}\n        </h1>\n\n        {description && (\n          <p\n            className={cn(\n              'text-lg md:text-xl',\n              'text-[var(--color-grey-400)]',\n              'max-w-2xl leading-relaxed',\n              'animate-in'\n            )}\n            style={{ animationDelay: '0.2s' }}\n          >\n            {description}\n          </p>\n        )}\n\n        {ctas.length > 0 && (\n          <div\n            className={cn(\n              'flex flex-wrap gap-4 mt-4',\n              align === 'center' ? 'justify-center' : 'justify-start',\n              'animate-in'\n            )}\n            style={{ animationDelay: '0.3s' }}\n          >\n            {ctas.map((cta, index) => (\n              <Button\n                key={cta.href}\n                variant={cta.variant || (index === 0 ? 'primary' : 'secondary')}\n                size=\"lg\"\n                asChild\n              >\n                <a href={cta.href}>{cta.label}</a>\n              </Button>\n            ))}\n          </div>\n        )}\n      </div>\n    </section>\n  )\n}\n",
+      "type": "registry:ui"
+    }
+  ],
+  "type": "registry:ui"
+}

package/public/r/registry.json

@@ -0,0 +1,38 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry.json",
+  "name": "n3wth-ui",
+  "homepage": "https://ui.newth.ai",
+  "items": [
+    {
+      "name": "button",
+      "type": "registry:ui",
+      "dependencies": ["lucide-react"],
+      "files": [
+        {
+          "path": "src/atoms/Button/Button.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "card",
+      "type": "registry:ui",
+      "files": [
+        {
+          "path": "src/molecules/Card/Card.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "hero",
+      "type": "registry:ui",
+      "files": [
+        {
+          "path": "src/organisms/Hero/Hero.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    }
+  ]
+}

package/tailwind.preset.js

@@ -54,6 +54,38 @@ module.exports = {
           '50%': { backgroundPosition: '100% 50%' },
         },
       },
+      // Mobile-first spacing scale
+      spacing: {
+        'safe-top': 'env(safe-area-inset-top)',
+        'safe-bottom': 'env(safe-area-inset-bottom)',
+        'safe-left': 'env(safe-area-inset-left)',
+        'safe-right': 'env(safe-area-inset-right)',
+      },
+      // Touch-friendly minimum sizes (WCAG 2.5.5)
+      minWidth: {
+        'touch': '44px',
+        'touch-sm': '36px',
+      },
+      minHeight: {
+        'touch': '44px',
+        'touch-sm': '36px',
+        'screen-dvh': '100dvh',
+      },
+      height: {
+        'screen-dvh': '100dvh',
+      },
+      // Fluid typography scale
+      fontSize: {
+        'fluid-xs': 'clamp(0.75rem, 2vw, 0.875rem)',
+        'fluid-sm': 'clamp(0.875rem, 2.5vw, 1rem)',
+        'fluid-base': 'clamp(1rem, 3vw, 1.125rem)',
+        'fluid-lg': 'clamp(1.125rem, 3.5vw, 1.25rem)',
+        'fluid-xl': 'clamp(1.25rem, 4vw, 1.5rem)',
+        'fluid-2xl': 'clamp(1.5rem, 5vw, 2rem)',
+        'fluid-3xl': 'clamp(1.875rem, 6vw, 2.5rem)',
+        'fluid-4xl': 'clamp(2.25rem, 8vw, 3.5rem)',
+        'fluid-5xl': 'clamp(3rem, 10vw, 4.5rem)',
+      },
     },
   },
 }