@nautui/core 0.1.0

package/src/components/Marquee.astro

@@ -0,0 +1,193 @@
+---
+import "../styles/spacing/spacing.css";
+import "../styles/spacing/gap.css";
+import {
+  extractSpacingProps,
+  getSpacingClasses,
+  SpacingProps,
+} from "../lib/spacing";
+import type { Base, Gap } from "../types";
+
+export interface MarqueeProps extends Base, SpacingProps {
+  duration?: number;
+  fadeEdgeColor?: string;
+  fadeEdgeSize?: string;
+  fadeEdges?: boolean;
+  gap?: Gap;
+  orientation?: "horizontal" | "vertical";
+  pauseOnHover?: boolean;
+  repeat?: number;
+  reverse?: boolean;
+}
+
+const { spacing, nonSpacing } = extractSpacingProps(
+  Astro.props as MarqueeProps
+);
+const spacingClasses = getSpacingClasses(spacing);
+
+const {
+  class: className,
+  duration = 40_000,
+  reverse = false,
+  repeat = 4,
+  gap = "md",
+  pauseOnHover = false,
+  orientation = "horizontal",
+  fadeEdges = true,
+  fadeEdgeColor = "var(--naut-color-base)",
+  fadeEdgeSize = "5%",
+  ...rest
+} = nonSpacing;
+
+const safeDuration = Math.max(1, duration);
+const safeRepeat = Math.max(2, Math.floor(repeat));
+---
+
+<div
+  class:list={[
+    "naut-marquee",
+    `orientation-${orientation}`,
+    reverse && "reverse",
+    pauseOnHover && "pause-on-hover",
+    !fadeEdges && "no-fade",
+    className,
+    ...spacingClasses
+  ]}
+  {...rest}
+>
+  <div class="naut-marquee-track">
+    {Array.from({ length: safeRepeat }).map(() => (
+        <div class:list={["naut-marquee-group", `gap-${gap}`]}><slot /></div>
+      ))}
+  </div>
+</div>
+
+<style
+  define:vars={{
+    safeDuration,
+    safeRepeat,
+    fadeEdgeColor,
+    fadeEdgeSize
+  }}
+>
+  .naut-marquee {
+    position: relative;
+    display: block;
+    overflow: hidden;
+  }
+
+  .naut-marquee-track {
+    display: flex;
+    width: max-content;
+    animation: scroll-x calc(var(--safeDuration) * 1ms) linear infinite;
+    will-change: transform;
+  }
+
+  .naut-marquee-group {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    min-width: max-content;
+
+    /* space between connected marquee groups */
+    &.gap-sm {
+      margin-left: var(--naut-spacing-sm);
+    }
+
+    &.gap-md {
+      margin-left: var(--naut-spacing-md);
+    }
+
+    &.gap-lg {
+      margin-left: var(--naut-spacing-lg);
+    }
+
+    &.gap-xl {
+      margin-left: var(--naut-spacing-xl);
+    }
+  }
+
+  .naut-marquee.orientation-vertical .naut-marquee-track {
+    flex-direction: column;
+    height: max-content;
+    animation-name: scroll-y;
+  }
+
+  .naut-marquee.orientation-vertical .naut-marquee-group {
+    flex-direction: column;
+    min-height: max-content;
+  }
+
+  .naut-marquee.reverse .naut-marquee-track {
+    animation-direction: reverse;
+  }
+
+  .naut-marquee.pause-on-hover:hover .naut-marquee-track {
+    animation-play-state: paused;
+  }
+
+  .naut-marquee:not(.no-fade)::before,
+  .naut-marquee:not(.no-fade)::after {
+    position: absolute;
+    z-index: 1;
+    pointer-events: none;
+    content: "";
+  }
+
+  .naut-marquee.orientation-horizontal:not(.no-fade)::before {
+    top: 0;
+    left: 0;
+    width: var(--fadeEdgeSize);
+    height: 100%;
+    background: linear-gradient(to right, var(--fadeEdgeColor), transparent);
+  }
+
+  .naut-marquee.orientation-horizontal:not(.no-fade)::after {
+    top: 0;
+    right: 0;
+    width: var(--fadeEdgeSize);
+    height: 100%;
+    background: linear-gradient(to left, var(--fadeEdgeColor), transparent);
+  }
+
+  .naut-marquee.orientation-vertical:not(.no-fade)::before {
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: var(--fadeEdgeSize);
+    background: linear-gradient(to bottom, var(--fadeEdgeColor), transparent);
+  }
+
+  .naut-marquee.orientation-vertical:not(.no-fade)::after {
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: var(--fadeEdgeSize);
+    background: linear-gradient(to top, var(--fadeEdgeColor), transparent);
+  }
+
+  @keyframes scroll-x {
+    from {
+      transform: translate3d(0, 0, 0);
+    }
+    to {
+      transform: translate3d(calc(-100% / var(--safeRepeat)), 0, 0);
+    }
+  }
+
+  @keyframes scroll-y {
+    from {
+      transform: translate3d(0, 0, 0);
+    }
+    to {
+      transform: translate3d(0, calc(-100% / var(--safeRepeat)), 0);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .naut-marquee-track {
+      animation-duration: 1ms;
+      animation-iteration-count: 1;
+    }
+  }
+</style>

package/src/components/Masonry.astro

@@ -0,0 +1,75 @@
+---
+import "../styles/spacing/spacing.css";
+import {
+  extractSpacingProps,
+  getSpacingClasses,
+  SpacingProps,
+} from "../lib/spacing";
+import type { Base, Gap } from "../types";
+
+export interface MasonryProps extends Base, SpacingProps {
+  columns?: number;
+  gap?: Gap;
+}
+
+const { spacing, nonSpacing } = extractSpacingProps(
+  Astro.props as MasonryProps
+);
+const spacingClasses = getSpacingClasses(spacing);
+const { class: className, columns = 4, gap = "md" } = nonSpacing;
+---
+
+<div class:list={["naut-masonry", `gap-${gap}`, className, ...spacingClasses]}>
+  <slot />
+</div>
+
+<style define:vars={{ columns }}>
+  .naut-masonry {
+    column-count: 1; /* Stacked on mobile */
+    column-gap: 0;
+
+    @media only screen and (min-width: 576px) {
+      column-count: 2; /* 2 columns on tablet */
+    }
+
+    @media only screen and (min-width: 1042px) {
+      column-count: var(--columns); /* Desktop columns */
+    }
+
+    &.gap-sm {
+      column-gap: var(--naut-spacing-sm);
+    }
+
+    &.gap-md {
+      column-gap: var(--naut-spacing-md);
+    }
+
+    &.gap-lg {
+      column-gap: var(--naut-spacing-lg);
+    }
+
+    &.gap-xl {
+      column-gap: var(--naut-spacing-xl);
+    }
+  }
+
+  :global(.naut-masonry.gap-none > .naut-masonry-item) {
+    margin-bottom: 0;
+  }
+
+  :global(.naut-masonry.gap-sm > .naut-masonry-item) {
+    margin-bottom: var(--naut-spacing-sm);
+  }
+
+  :global(.naut-masonry.gap-md > .naut-masonry-item) {
+    margin-bottom: var(--naut-spacing-md);
+  }
+
+  :global(.naut-masonry.gap-lg > .naut-masonry-item) {
+    margin-bottom: var(--naut-spacing-lg);
+  }
+
+  :global(.naut-masonry.gap-xl > .naut-masonry-item) {
+    margin-bottom: var(--naut-spacing-xl);
+  }
+</style>

package/src/components/MasonryItem.astro

@@ -0,0 +1,28 @@
+---
+import "../styles/spacing/spacing.css";
+import {
+  extractSpacingProps,
+  getSpacingClasses,
+  SpacingProps,
+} from "../lib/spacing";
+import type { Base } from "../types";
+
+export interface MasonryItemProps extends Base, SpacingProps {}
+
+const { spacing, nonSpacing } = extractSpacingProps(
+  Astro.props as MasonryItemProps
+);
+const spacingClasses = getSpacingClasses(spacing);
+
+const { class: className, ...rest } = nonSpacing;
+---
+
+<div class:list={["naut-masonry-item", ...spacingClasses, className]} {...rest}>
+  <slot />
+</div>
+
+<style>
+  .naut-masonry-item {
+    break-inside: avoid;
+  }
+</style>

package/src/components/Menu.astro

@@ -0,0 +1,71 @@
+---
+import type { Base, Gap } from "../types";
+
+export interface MenuProps extends Base {
+  divided?: boolean;
+  gap?: Gap;
+  horizontal?: boolean;
+}
+
+const {
+  class: className,
+  horizontal = false,
+  divided = false,
+  gap,
+  ...rest
+} = Astro.props as MenuProps;
+const gapVar = gap ? `var(--naut-spacing-${gap})` : "1px";
+---
+
+<nav
+  class:list={[
+    "naut-menu",
+    horizontal && "horizontal",
+    divided && "divided",
+    className
+  ]}
+  {...rest}
+>
+  <ul class:list={["naut-menu__list", gap && `gap-${gap}`]}>
+    <slot />
+  </ul>
+</nav>
+
+<style define:vars={{ gapVar }}>
+  .naut-menu {
+    ul.naut-menu__list {
+      display: flex;
+      flex-direction: column;
+      gap: var(--gapVar);
+      padding: 0;
+      margin: 0;
+      list-style: none;
+    }
+
+    &.horizontal ul.naut-menu__list {
+      display: inline-flex;
+      flex-direction: row;
+    }
+  }
+
+  :global(.naut-menu.horizontal ul.naut-menu__list .naut-menu-item) {
+    padding-right: 1rem;
+    padding-left: 1rem;
+  }
+
+  :global(
+      .naut-menu.divided:not(.horizontal)
+      .naut-menu__list-item:not(:last-child)
+    ) {
+    padding-bottom: var(--gapVar);
+    border-bottom: 1px solid var(--naut-color-border);
+  }
+
+  :global(
+      .naut-menu.divided.horizontal
+      .naut-menu__list-item:not(:last-child)
+    ) {
+    padding-right: var(--gapVar);
+    border-right: 1px solid var(--naut-color-border);
+  }
+</style>

package/src/components/MenuItem.astro

@@ -0,0 +1,93 @@
+---
+import type { Base } from "../types";
+
+export interface MenuItemProps extends Base {
+  active?: boolean;
+  color?: "text" | "link" | "dimmed";
+  href: string;
+}
+
+const {
+  class: className,
+  active = false,
+  color = "text",
+  href,
+  ...rest
+} = Astro.props as MenuItemProps;
+
+const classList = [
+  "naut-menu-item",
+  active && "active",
+  color !== "text" && `color-${color}`,
+  className,
+];
+---
+
+<li class="naut-menu__list-item">
+  <a href={href} class:list={classList} {...rest}>
+    <span class="naut-menu-item--left"><slot name="before" /></span>
+    <span class="naut-menu-item--main"><slot /></span>
+    <span class="naut-menu-item--right"><slot name="after" /></span>
+  </a>
+</li>
+
+<style>
+  .naut-menu-item {
+    display: flex;
+    align-items: center;
+    padding: 0.5rem;
+    font-size: var(--naut-font-size-md);
+    color: var(--naut-color-content);
+    text-wrap: nowrap;
+    text-decoration: none;
+    cursor: pointer;
+
+    &:hover {
+      color: var(--naut-color-primary);
+      background-color: var(--naut-color-base-100);
+      opacity: 1;
+    }
+
+    &.active {
+      color: var(--naut-color-primary);
+      background-color: var(--naut-color-base-100);
+    }
+
+    &.color-dimmed {
+      color: var(--naut-color-content-soft);
+      opacity: 0.8;
+
+      &:hover {
+        color: var(--naut-color-content);
+      }
+    }
+
+    &.color-link {
+      color: var(--naut-color-link);
+    }
+
+    .naut-menu-item--main {
+      flex: 1;
+      text-align: left;
+    }
+
+    .naut-menu-item--left {
+      display: flex;
+      align-items: center;
+      margin-right: 0.4rem;
+    }
+
+    .naut-menu-item--left:empty {
+      display: none;
+    }
+
+    .naut-menu-item--right {
+      display: flex;
+      align-items: center;
+    }
+
+    .naut-menu-item--right:empty {
+      display: none;
+    }
+  }
+</style>

package/src/components/NavBar.astro

@@ -0,0 +1,211 @@
+---
+import type { Base, Radius, Shadow } from "../types";
+import Container from "./Container.astro";
+
+export interface NavBarProps extends Base {
+  autohide?: boolean;
+  bordered?: boolean;
+  dark?: boolean;
+  fluid?: boolean; // if true, the navbar will take the full width of the viewport
+  height: number;
+  offset?: number; // offset for sticky navbar
+  radius?: Radius | "full"; // border-radius for island variant
+  shadow?: Shadow;
+  sticky?: boolean;
+  variant?: "default" | "outline" | "island";
+  zindex?: number; // z-index for sticky navbar
+}
+
+const {
+  class: className,
+  dark = false,
+  variant = "default",
+  bordered = false,
+  sticky = false,
+  fluid = false,
+  autohide = false,
+  height = 70, // default height in pixels
+  shadow,
+  radius,
+  offset = 0,
+  zindex = 99,
+  ...rest
+} = Astro.props as NavBarProps;
+const offsetValue = offset ? `${offset}px` : "0";
+const offsetIsland = offset === 0 ? "var(--naut-spacing-md)" : offsetValue;
+const borderRadius = radius ? `var(--naut-border-radius-${radius})` : "0";
+const barHeight = height ? `${height}px` : "70px";
+const hiddenOffset = `${height + offset}px`;
+---
+
+<nav
+  class:list={[
+      "naut-navbar",
+      `variant--${variant}`,
+      sticky && "sticky",
+      bordered && "bordered",
+      shadow && "shadow",
+      radius && `radius--${radius}`,
+      fluid && "fluid",
+      dark && "dark",
+      className
+    ]}
+  {...rest}
+>
+  <div class="naut-space naut-space--left"></div>
+  <div class="naut-space naut-space--center">
+    <Container fluid={fluid}>
+      <div class="naut-navbar--content"><slot /></div>
+    </Container>
+  </div>
+  <div class="naut-space naut-space--right"></div>
+</nav>
+
+<style
+  define:vars={{
+    zindex,
+    barHeight,
+    borderRadius,
+    offsetValue,
+    offsetIsland,
+    hiddenOffset
+  }}
+>
+  .naut-navbar {
+    --naut-color-navbar-bg: var(--naut-color-base);
+    display: flex;
+    align-items: center;
+    height: var(--barHeight);
+    overflow: hidden;
+    color: var(--naut-color-content);
+    border-radius: var(--borderRadius);
+    transition: top 0.3s ease;
+
+    &.bordered:not(.dark) {
+      border-bottom: 1px solid var(--naut-color-border);
+    }
+
+    &.sticky {
+      position: fixed;
+      top: var(--offsetValue);
+      z-index: var(--zindex);
+      width: 100%;
+
+      &.scrolled {
+        background-color: rgb(from var(--naut-color-base) r g b / 0.75);
+        -webkit-backdrop-filter: blur(20px) saturate(100%);
+        backdrop-filter: blur(20px) saturate(100%);
+      }
+
+      &.hidden {
+        top: calc(-1 * var(--hiddenOffset));
+      }
+    }
+
+    &.radius--none {
+      border-radius: 0;
+    }
+
+    &.variant--island {
+      margin: 0 var(--naut-spacing-md);
+
+      &.sticky {
+        top: var(--offsetIsland);
+        left: 50%;
+        width: calc(100% - 2 * var(--naut-spacing-md));
+        margin: 0;
+        transform: translateX(-50%);
+      }
+
+      &.bordered {
+        border: 1px solid var(--naut-color-border);
+      }
+
+      &:not(.fluid) {
+        /*Mobile*/
+        @media only screen and (min-width: 576px) {
+          max-width: calc(576px + 2 * var(--naut-spacing-md));
+          margin: 0 auto;
+        }
+
+        /* Tablet */
+        @media only screen and (min-width: 818px) and (max-width: 1041px) {
+          max-width: calc(768px + 2 * var(--naut-spacing-md));
+        }
+
+        /* Desktop */
+        @media only screen and (min-width: 1042px) and (max-width: 1249px) {
+          max-width: calc(992px + 2 * var(--naut-spacing-md));
+        }
+
+        /* Large Desktop */
+        @media only screen and (min-width: 1250px) {
+          max-width: calc(1200px + 2 * var(--naut-spacing-md));
+        }
+      }
+    }
+
+    &.variant--outline {
+      .naut-space {
+        flex-grow: 1;
+        height: 100%;
+      }
+      .naut-space--left {
+        padding-right: var(--naut-spacing-md);
+        border-right: 1px solid var(--naut-color-border);
+      }
+      .naut-space--right {
+        padding-left: var(--naut-spacing-md);
+        border-left: 1px solid var(--naut-color-border);
+      }
+    }
+
+    &.shadow {
+      box-shadow: calc(0.0625 * calc(1rem * 1)) calc(0.5 * calc(1rem * 1))
+        calc(1 * calc(1rem * 1)) #0000001a;
+    }
+
+    .naut-space--center {
+      flex: 0 0 100%;
+    }
+
+    .naut-navbar--content {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      height: var(--barHeight);
+    }
+  }
+</style>
+
+<script is:inline define:vars={{ autohide, height, offset }}>
+  const nav = document.querySelector(".naut-navbar");
+  let lastScrollY = 0;
+  if (nav) {
+    const update = () => {
+      const scrolled = window.scrollY > 0;
+      nav.classList.toggle("scrolled", scrolled);
+      if (autohide) {
+        const offsetPoint = height + offset;
+        const pastOffset = window.scrollY > offsetPoint;
+        const scrollingDown = window.scrollY > lastScrollY;
+        nav.classList.toggle("hidden", pastOffset && scrollingDown);
+        lastScrollY = window.scrollY;
+      }
+    };
+    window.addEventListener("scroll", update, { passive: true });
+    update();
+  }
+</script>
+
+<script>
+  const nav = document.querySelector(".naut-navbar");
+  const sections = document.querySelector(".naut-section.dark");
+  if (nav && sections) {
+    const observer = new IntersectionObserver(
+      ([entry]) => nav.classList.toggle("dark", entry.isIntersecting),
+      { threshold: 0.1 }
+    );
+    observer.observe(sections);
+  }
+</script>