@nautui/core 0.1.0

package/src/components/Stack.astro

@@ -0,0 +1,237 @@
+---
+import "../styles/spacing/gap.css";
+import type { Base, Gap, Responsive } from "../types";
+
+type Align = "inherit" | "start" | "center" | "end" | "stretch";
+type Justify =
+  | "start"
+  | "center"
+  | "end"
+  | "space-between"
+  | "space-around"
+  | "space-evenly";
+
+type AlignResponsive = {
+  [key in Responsive]?: Align;
+};
+
+type JustifyResponsive = {
+  [key in Responsive]?: Justify;
+};
+
+export interface StackProps extends Base {
+  align?: AlignResponsive | Align;
+  gap?: Gap;
+  justify?: JustifyResponsive | Justify;
+}
+
+const {
+  class: className,
+  align,
+  justify = "start",
+  gap = "md",
+  ...rest
+} = Astro.props as StackProps;
+const items = typeof align === "string" ? { base: align } : align;
+const content = typeof justify === "string" ? { base: justify } : justify;
+---
+
+<div
+  class:list={[
+    "naut-stack",
+    `gap-${gap}`,
+    items?.base && `items-${items.base}`,
+    items?.sm && `sm-items-${items.sm}`,
+    items?.md && `md-items-${items.md}`,
+    items?.lg && `lg-items-${items.lg}`,
+    items?.xl && `xl-items-${items.xl}`,
+    content?.base && `content-${content.base}`,
+    content?.sm && `sm-content-${content.sm}`,
+    content?.md && `md-content-${content.md}`,
+    content?.lg && `lg-content-${content.lg}`,
+    content?.xl && `xl-content-${content.xl}`,
+    className
+  ]}
+  {...rest}
+>
+  <slot />
+</div>
+
+<style>
+  .naut-stack {
+    display: flex;
+    flex-direction: column;
+
+    &.content-start {
+      justify-content: flex-start;
+    }
+
+    &.content-center {
+      justify-content: center;
+    }
+
+    &.content-end {
+      justify-content: flex-end;
+    }
+
+    &.content-space-between {
+      justify-content: space-between;
+    }
+
+    &.content-space-around {
+      justify-content: space-around;
+    }
+
+    &.content-space-evenly {
+      justify-content: space-evenly;
+    }
+
+    &.items-start {
+      align-items: flex-start;
+    }
+
+    &.items-center {
+      align-items: center;
+    }
+
+    &.items-end {
+      align-items: flex-end;
+    }
+
+    &.items-stretch {
+      align-items: stretch;
+    }
+
+    @media only screen and (max-width: 817px) {
+      &.sm-content-start {
+        justify-content: flex-start;
+      }
+      &.sm-content-center {
+        justify-content: center;
+      }
+      &.sm-content-end {
+        justify-content: flex-end;
+      }
+      &.sm-content-space-between {
+        justify-content: space-between;
+      }
+      &.sm-content-space-around {
+        justify-content: space-around;
+      }
+      &.sm-content-space-evenly {
+        justify-content: space-evenly;
+      }
+      &.sm-items-start {
+        align-items: flex-start;
+      }
+      &.sm-items-center {
+        align-items: center;
+      }
+      &.sm-items-end {
+        align-items: flex-end;
+      }
+      &.sm-items-stretch {
+        align-items: stretch;
+      }
+    }
+
+    @media only screen and (min-width: 818px) and (max-width: 1041px) {
+      &.md-content-start {
+        justify-content: flex-start;
+      }
+      &.md-content-center {
+        justify-content: center;
+      }
+      &.md-content-end {
+        justify-content: flex-end;
+      }
+      &.md-content-space-between {
+        justify-content: space-between;
+      }
+      &.md-content-space-around {
+        justify-content: space-around;
+      }
+      &.md-content-space-evenly {
+        justify-content: space-evenly;
+      }
+      &.md-items-start {
+        align-items: flex-start;
+      }
+      &.md-items-center {
+        align-items: center;
+      }
+      &.md-items-end {
+        align-items: flex-end;
+      }
+      &.md-items-stretch {
+        align-items: stretch;
+      }
+    }
+
+    @media only screen and (min-width: 1042px) {
+      &.lg-content-start {
+        justify-content: flex-start;
+      }
+      &.lg-content-center {
+        justify-content: center;
+      }
+      &.lg-content-end {
+        justify-content: flex-end;
+      }
+      &.lg-content-space-between {
+        justify-content: space-between;
+      }
+      &.lg-content-space-around {
+        justify-content: space-around;
+      }
+      &.lg-content-space-evenly {
+        justify-content: space-evenly;
+      }
+      &.lg-items-start {
+        align-items: flex-start;
+      }
+      &.lg-items-center {
+        align-items: center;
+      }
+      &.lg-items-end {
+        align-items: flex-end;
+      }
+      &.lg-items-stretch {
+        align-items: stretch;
+      }
+    }
+
+    @media only screen and (min-width: 1250px) {
+      &.xl-content-start {
+        justify-content: flex-start;
+      }
+      &.xl-content-center {
+        justify-content: center;
+      }
+      &.xl-content-end {
+        justify-content: flex-end;
+      }
+      &.xl-content-space-between {
+        justify-content: space-between;
+      }
+      &.xl-content-space-around {
+        justify-content: space-around;
+      }
+      &.xl-content-space-evenly {
+        justify-content: space-evenly;
+      }
+      &.xl-items-start {
+        align-items: flex-start;
+      }
+      &.xl-items-center {
+        align-items: center;
+      }
+      &.xl-items-end {
+        align-items: flex-end;
+      }
+      &.xl-items-stretch {
+        align-items: stretch;
+      }
+    }
+  }
+</style>

package/src/components/Text.astro

@@ -0,0 +1,270 @@
+---
+import "../styles/spacing/margin.css";
+import {
+  extractSpacingProps,
+  getSpacingClasses,
+  MarginProps,
+} from "../lib/spacing";
+import type { Base, Size } from "../types";
+
+export interface TextProps extends Base, MarginProps {
+  align?: "left" | "center" | "right" | "justify";
+  decoration?: "underline" | "strikethrough";
+  dimmed?: boolean;
+  inline?: boolean;
+  italic?: boolean;
+  maxWidth?: number | string;
+  size?: Size;
+  transform?: "capitalize" | "uppercase" | "lowercase";
+  weight?: "light" | "normal" | "medium" | "bold" | "semi-bold" | "extra-bold";
+}
+
+const { margin, nonSpacing } = extractSpacingProps(Astro.props as TextProps);
+
+const {
+  class: className,
+  weight,
+  transform,
+  decoration,
+  size,
+  maxWidth,
+  italic = false,
+  inline = false,
+  dimmed = false,
+  align,
+  ...rest
+} = nonSpacing;
+
+const marginClasses = getSpacingClasses(margin);
+
+const maxWidthStyle =
+  maxWidth === undefined
+    ? undefined
+    : `max-width: ${typeof maxWidth === "number" ? `${maxWidth}px` : maxWidth}`;
+
+const classList = [
+  "text",
+  italic && "italic",
+  dimmed && "dimmed",
+  align && `align-${align}`,
+  size && `size-${size}`,
+  weight && `weight-${weight}`,
+  transform && `transform-${transform}`,
+  decoration && `decoration-${decoration}`,
+  ...marginClasses,
+  className,
+];
+---
+
+{inline && <span class:list={classList} style={maxWidthStyle} {...rest}><slot /></span>}
+{!inline && <p class:list={classList} style={maxWidthStyle} {...rest}><slot /></p>}
+
+<style>
+  .text {
+    font-family: inherit;
+    font-size: inherit;
+    line-height: inherit;
+
+    &::selection {
+      color: var(--naut-color-content);
+      -webkit-text-fill-color: var(--naut-color-content);
+      background-color: var(--naut-color-selection);
+    }
+
+    &.inline {
+      display: inline-block;
+    }
+
+    &.italic {
+      font-style: italic;
+    }
+
+    &.align-left {
+      text-align: left;
+    }
+
+    &.align-center {
+      text-align: center;
+    }
+
+    &.align-right {
+      text-align: right;
+    }
+
+    &.align-justify {
+      text-align: justify;
+    }
+
+    &.dimmed {
+      color: var(--naut-color-content-soft);
+    }
+
+    &.size-xs {
+      font-size: var(--naut-font-size-xs);
+      line-height: calc(
+        var(--naut-font-size-xs) *
+        var(--naut-line-height-ratio)
+      );
+    }
+
+    &.size-sm {
+      font-size: var(--naut-font-size-sm);
+      line-height: calc(
+        var(--naut-font-size-sm) *
+        var(--naut-line-height-ratio)
+      );
+    }
+
+    &.size-md {
+      font-size: var(--naut-font-size-md);
+      line-height: calc(
+        var(--naut-font-size-md) *
+        var(--naut-line-height-ratio)
+      );
+    }
+
+    &.size-lg {
+      font-size: clamp(1.15rem, 1.5vw + 1rem, var(--naut-font-size-lg));
+      line-height: clamp(1.8rem, 2.5vw + 1rem, 2.05rem);
+    }
+
+    &.size-xl {
+      font-size: clamp(1.3rem, 1.3vw + 1rem, var(--naut-font-size-xl));
+      line-height: clamp(2rem, 2.5vw + 1rem, 2.34rem);
+    }
+
+    &.size-xxl {
+      font-size: clamp(1.5rem, 1.5vw + 1rem, var(--naut-font-size-xxl));
+      line-height: clamp(2.2rem, 2vw + 1rem, 3.25rem);
+    }
+
+    &.weight-light {
+      font-weight: 300;
+    }
+
+    &.weight-medium {
+      font-weight: 500;
+    }
+
+    &.weight-bold {
+      font-weight: 700;
+    }
+
+    &.weight-semi-bold {
+      font-weight: 600;
+    }
+
+    &.weight-extra-bold {
+      font-weight: 800;
+    }
+
+    &.transform-capitalize {
+      text-transform: capitalize;
+    }
+    &.transform-uppercase {
+      text-transform: uppercase;
+    }
+    &.transform-lowercase {
+      text-transform: lowercase;
+    }
+
+    &.decoration-underline {
+      text-decoration: underline;
+    }
+    &.decoration-strikethrough {
+      text-decoration: line-through;
+    }
+
+    /* Margins */
+    &.mt-0 {
+      margin-top: 0;
+    }
+    &.mb-0 {
+      margin-bottom: 0;
+    }
+    &.ml-0 {
+      margin-left: 0;
+    }
+    &.mr-0 {
+      margin-right: 0;
+    }
+
+    &.mt-xs {
+      margin-top: var(--naut-spacing-xs);
+    }
+    &.mb-xs {
+      margin-bottom: var(--naut-spacing-xs);
+    }
+    &.ml-xs {
+      margin-left: var(--naut-spacing-xs);
+    }
+    &.mr-xs {
+      margin-right: var(--naut-spacing-xs);
+    }
+
+    &.mt-sm {
+      margin-top: var(--naut-spacing-sm);
+    }
+    &.mb-sm {
+      margin-bottom: var(--naut-spacing-sm);
+    }
+    &.ml-sm {
+      margin-left: var(--naut-spacing-sm);
+    }
+    &.mr-sm {
+      margin-right: var(--naut-spacing-sm);
+    }
+
+    &.mt-md {
+      margin-top: var(--naut-spacing-md);
+    }
+    &.mb-md {
+      margin-bottom: var(--naut-spacing-md);
+    }
+    &.ml-md {
+      margin-left: var(--naut-spacing-md);
+    }
+    &.mr-md {
+      margin-right: var(--naut-spacing-md);
+    }
+
+    &.mt-lg {
+      margin-top: var(--naut-spacing-lg);
+    }
+    &.mb-lg {
+      margin-bottom: var(--naut-spacing-lg);
+    }
+    &.ml-lg {
+      margin-left: var(--naut-spacing-lg);
+    }
+    &.mr-lg {
+      margin-right: var(--naut-spacing-lg);
+    }
+
+    &.mt-xl {
+      margin-top: var(--naut-spacing-xl);
+    }
+    &.mb-xl {
+      margin-bottom: var(--naut-spacing-xl);
+    }
+    &.ml-xl {
+      margin-left: var(--naut-spacing-xl);
+    }
+    &.mr-xl {
+      margin-right: var(--naut-spacing-xl);
+    }
+  }
+
+  p.text {
+    &:first-child {
+      margin-top: 0;
+    }
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  span.text {
+    display: inline-block;
+  }
+</style>

package/src/components/Theme.astro

@@ -0,0 +1,37 @@
+---
+import "../styles/global.css";
+import "../styles/colors.css";
+import type { Base } from "../types";
+
+export interface ThemeProps extends Base {
+  dark?: boolean;
+}
+
+const { class: className, dark = true } = Astro.props as ThemeProps;
+---
+
+<Fragment class:list={["naut-theme", className]}> <slot /> </Fragment>
+
+<script is:inline define:vars={{ dark }}>
+  (() => {
+    if (dark) {
+      if (window.__nautThemeInitialized) {
+        return;
+      }
+      window.__nautThemeInitialized = true;
+
+      const getTheme = () => {
+        const stored = localStorage.getItem("naut-theme");
+        if (["dark", "light"].includes(stored)) {
+          return stored;
+        }
+        return window.matchMedia("(prefers-color-scheme: dark)").matches
+          ? "dark"
+          : "light";
+      };
+
+      const theme = getTheme();
+      document.documentElement.setAttribute("data-theme", theme);
+    }
+  })();
+</script>

package/src/components/ThemeToggle.astro

@@ -0,0 +1,141 @@
+---
+import type { Base } from "../types";
+import Button from "./Button.astro";
+
+export interface ThemeToggleProps extends Base {}
+
+const { class: className } = Astro.props as ThemeToggleProps;
+---
+
+<Button
+  variant="ghost"
+  aria-label="Toggle theme"
+  onclick="toggleTheme()"
+  class:list={["naut-theme-toggle", className]}
+  title="Toggle theme"
+>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <title>Sun and Moon</title>
+    <g class="naut-theme-toggle--sun">
+      <circle cx="12" cy="12" r="4" />
+      <path d="M12 2v2" />
+      <path d="M12 20v2" />
+      <path d="m4.93 4.93 1.41 1.41" />
+      <path d="m17.66 17.66 1.41 1.41" />
+      <path d="M2 12h2" />
+      <path d="M20 12h2" />
+      <path d="m6.34 17.66-1.41 1.41" />
+      <path d="m19.07 4.93-1.41 1.41" />
+    </g>
+    <g class="naut-theme-toggle--moon">
+      <path
+        d="M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401"
+      />
+    </g>
+  </svg>
+</Button>
+
+<style>
+  .naut-theme-toggle--sun {
+    display: block;
+  }
+
+  .naut-theme-toggle--moon {
+    display: none;
+  }
+
+  :global([data-theme="dark"]) .naut-theme-toggle--sun {
+    display: none;
+  }
+
+  :global([data-theme="dark"]) .naut-theme-toggle--moon {
+    display: block;
+  }
+</style>
+
+<script>
+  declare global {
+    interface Window {
+      setTheme: (theme: string) => void;
+      toggleTheme: () => void;
+    }
+  }
+
+  // Function to apply theme with naut-theme attribute
+  const applyTheme = (theme: string, isUserChoice = true) => {
+    document.documentElement.setAttribute("data-theme", theme);
+    localStorage.setItem("naut-theme", theme);
+    localStorage.setItem("themeSourceType", isUserChoice ? "user" : "system");
+  };
+
+  // Function to handle theme change
+  const setTheme = (theme: string) => {
+    applyTheme(theme);
+  };
+
+  // Initialize theme on load
+  const initializeTheme = () => {
+    // Ensure themeSourceType is set if missing
+    if (!localStorage.getItem("themeSourceType")) {
+      localStorage.setItem("themeSourceType", "system");
+    }
+  };
+
+  // Main toggle function
+  const toggleTheme = () => {
+    const currentTheme =
+      document.documentElement.getAttribute("data-theme") ||
+      localStorage.getItem("naut-theme") ||
+      (window.matchMedia("(prefers-color-scheme: dark)").matches
+        ? "dark"
+        : "light");
+
+    const newTheme = currentTheme === "dark" ? "light" : "dark";
+
+    // Check if the new theme matches system preference
+    const systemTheme = window.matchMedia("(prefers-color-scheme: dark)")
+      .matches
+      ? "dark"
+      : "light";
+
+    // Only mark as "user" choice if it differs from system preference
+    const isOverridingSystem = newTheme !== systemTheme;
+    applyTheme(newTheme, isOverridingSystem);
+  };
+
+  // Listen for system preference changes
+  const handleSystemThemeChange = (e: MediaQueryListEvent) => {
+    const themeSourceType = localStorage.getItem("themeSourceType");
+    const systemTheme = e.matches ? "dark" : "light";
+    const currentTheme = localStorage.getItem("naut-theme");
+
+    if (themeSourceType === "system") {
+      // Auto-switch because user hasn't overridden
+      applyTheme(systemTheme, false);
+    } else if (themeSourceType === "user" && currentTheme === systemTheme) {
+      // User's override now matches system preference, so re-enable auto-switching
+      localStorage.setItem("themeSourceType", "system");
+    }
+  };
+
+  // Set up system preference listener
+  const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+  mediaQuery.addEventListener("change", handleSystemThemeChange);
+
+  // Initialize on load
+  initializeTheme();
+
+  // Expose functions to window
+  window.toggleTheme = toggleTheme;
+  window.setTheme = setTheme;
+</script>