@nautui/core 0.1.0

package/src/components/Card.astro

@@ -0,0 +1,228 @@
+---
+import "../styles/spacing/padding.css";
+import "../styles/border.css";
+import "../styles/shadow.css";
+import { type Border, createBorder } from "../lib/border";
+import {
+  extractSpacingProps,
+  getSpacingClasses,
+  PaddingProps,
+} from "../lib/spacing";
+import type { Base, Radius } from "../types";
+
+export interface CardProps extends Base, PaddingProps {
+  border?: Border;
+  fluid?: boolean;
+  hover?:
+    | "surface"
+    | "primary"
+    | "outline"
+    | "outline-primary"
+    | "elevate"
+    | "elevate-lg"
+    | "elevate-xl";
+  radius?: Radius | "none";
+  shadow?: "sm" | "md" | "lg" | "xl";
+  size?: "sm" | "md" | "lg";
+  variant?:
+    | "ghost"
+    | "surface"
+    | "light"
+    | "dark"
+    | "primary"
+    | "outline-primary"
+    | "rainbow";
+}
+
+const { padding, nonSpacing } = extractSpacingProps(Astro.props as CardProps);
+
+const {
+  class: className,
+  border,
+  shadow,
+  radius,
+  size = "sm",
+  fluid = false,
+  variant = "ghost",
+  hover,
+  ...rest
+} = nonSpacing;
+const p = Object.keys(padding).length === 0 ? "md" : padding.p;
+const paddingClasses = getSpacingClasses({ ...padding, p });
+const config = typeof border === "string" ? { width: border } : border || {};
+const { borderClasses, borderColors } = createBorder(config);
+---
+
+<div
+  class:list={[
+    "naut-card",
+    size && `size-${size}`,
+    fluid && "fluid",
+    variant !== "ghost" && `variant-${variant}`,
+    hover && `hover-${hover}`,
+    radius && `radius-${radius}`,
+    shadow && `shadow-${shadow}`,
+    ...borderClasses,
+    className
+  ]}
+  {...rest}
+>
+  <div class="naut-card--header"><slot name="header" /></div>
+  <div class:list={["naut-card--body", ...paddingClasses]}><slot /></div>
+  <div class="naut-card--footer"><slot name="footer" /></div>
+</div>
+
+<style define:vars={{ ...borderColors }}>
+  .naut-card {
+    --radius-scale: 1.575;
+    position: relative;
+    box-sizing: border-box;
+
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    transition: 0.15s ease-in-out;
+
+    &.size-sm:not(.fluid) {
+      max-width: 20rem;
+    }
+
+    &.size-md:not(.fluid) {
+      max-width: 30rem;
+    }
+
+    &.size-lg:not(.fluid) {
+      max-width: 40rem;
+    }
+
+    &.fluid {
+      width: 100%;
+      height: 100%;
+    }
+
+    .naut-card--body {
+      position: relative;
+    }
+
+    .naut-card--header:empty {
+      display: none;
+    }
+
+    .naut-card--footer:empty {
+      display: none;
+    }
+
+    &.radius-none {
+      border-radius: 0;
+    }
+
+    &.radius-sm {
+      border-radius: calc(var(--naut-border-radius-sm) * var(--radius-scale));
+    }
+
+    &.radius-md {
+      border-radius: calc(var(--naut-border-radius-md) * var(--radius-scale));
+    }
+
+    &.radius-lg {
+      border-radius: calc(var(--naut-border-radius-lg) * var(--radius-scale));
+    }
+
+    &.shadow-sm {
+      box-shadow: var(--naut-shadow-sm);
+    }
+
+    &.shadow-md {
+      box-shadow: var(--naut-shadow-md);
+    }
+
+    &.shadow-lg {
+      box-shadow: var(--naut-shadow-lg);
+    }
+
+    &.shadow-xl {
+      box-shadow: var(--naut-shadow-xl);
+    }
+
+    /* variant */
+    &.variant-surface {
+      background-color: var(--naut-color-surface);
+    }
+
+    &.variant-primary {
+      color: var(--naut-color-primary-content);
+      background-color: var(--naut-color-primary);
+    }
+
+    &.variant-light {
+      background-color: var(--naut-color-light);
+    }
+
+    &.variant-dark {
+      color: var(--naut-color-base);
+      background-color: var(--naut-color-base-content);
+    }
+
+    &.variant-outline-primary {
+      border-color: var(--naut-color-primary);
+      border-width: var(--naut-border-width-lg);
+    }
+
+    &.variant-outline-dark {
+      border-color: var(--naut-color-text);
+      border-width: var(--naut-border-width-lg);
+    }
+
+    &.variant-rainbow {
+      background:
+        linear-gradient(var(--naut-color-base), var(--naut-color-base))
+        padding-box,
+        conic-gradient(
+          from 0turn,
+          hsl(110 90% 50%),
+          hsl(210 90% 60%),
+          hsl(220 70% 60%),
+          hsl(30 70% 60%),
+          hsl(100 90% 50%)
+        )
+        border-box;
+      border-color: transparent;
+      border-style: solid;
+      border-width: var(--naut-border-width-lg);
+    }
+
+    /* --- hover --- */
+
+    &.hover-primary:hover {
+      color: var(--naut-color-base);
+      background-color: var(--naut-color-primary);
+    }
+
+    &.hover-outline:hover {
+      border-color: var(--naut-color-border-outline);
+    }
+
+    &.hover-outline-primary:hover {
+      border-color: var(--naut-color-primary);
+    }
+
+    &.hover-surface:hover {
+      background-color: var(--naut-color-base-100);
+    }
+
+    &.hover-elevate:hover {
+      box-shadow: var(--naut-shadow-md);
+      transform: translateY(-5px);
+    }
+
+    &.hover-elevate-lg:hover {
+      box-shadow: var(--naut-shadow-lg);
+      transform: translateY(-5px);
+    }
+
+    &.hover-elevate-xl:hover {
+      box-shadow: var(--naut-shadow-xl);
+      transform: translateY(-10px);
+    }
+  }
+</style>

package/src/components/Container.astro

@@ -0,0 +1,76 @@
+---
+import type { Base } from "../types";
+
+export interface ContainerProps extends Base {
+  flex?: string | number; // allows custom flex values (e.g. "0 1 100%")
+  fluid?: boolean; // if true, the container will take the full width of the viewport
+  maxWidth?: number;
+}
+
+const {
+  class: className,
+  fluid = false,
+  flex,
+  maxWidth,
+  ...rest
+} = Astro.props as ContainerProps;
+
+const isMax = maxWidth !== undefined;
+const maxWidthVar = maxWidth ? maxWidth : "none";
+const flexVar = flex ? flex : "none";
+---
+
+<div
+  class:list={[
+    "naut-container",
+    isMax && "max",
+    fluid && "fluid",
+    flex && "flex",
+    className
+  ]}
+  {...rest}
+>
+  <slot />
+</div>
+
+<style define:vars={{ maxWidthVar, flexVar }}>
+  .naut-container {
+    display: flow-root; /* Prevents margin collapsing */
+    padding: 0 var(--naut-spacing-md);
+
+    &.fluid {
+      width: 100%;
+    }
+
+    &.flex {
+      flex: var(--flexVar);
+    }
+
+    &:not(.fluid) {
+      margin: 0 auto;
+      /*Mobile*/
+      @media only screen and (min-width: 576px) and (max-width: 817px) {
+        max-width: 576px;
+      }
+
+      /* Tablet */
+      @media only screen and (min-width: 818px) and (max-width: 1041px) {
+        max-width: 768px;
+      }
+
+      /* Desktop */
+      @media only screen and (min-width: 1042px) and (max-width: 1249px) {
+        max-width: 992px;
+      }
+
+      /* Large Desktop */
+      @media only screen and (min-width: 1250px) {
+        max-width: 1200px;
+      }
+    }
+
+    &.max {
+      max-width: var(--maxWidthVar);
+    }
+  }
+</style>

package/src/components/Divider.astro

@@ -0,0 +1,85 @@
+---
+import "../styles/spacing/margin.css";
+import {
+  extractSpacingProps,
+  getSpacingClasses,
+  MarginProps,
+} from "../lib/spacing";
+import type { Base } from "../types";
+
+export interface DividerProps extends Base, MarginProps {
+  label?: string;
+  orientation?: "horizontal" | "vertical";
+  size?: "sm" | "md" | "lg" | "xl";
+  variant?: "solid" | "dotted" | "dashed";
+}
+
+const { margin, nonSpacing } = extractSpacingProps(Astro.props as DividerProps);
+
+const {
+  class: className,
+  label,
+  orientation = "horizontal",
+  size = "md",
+  variant = "solid",
+} = nonSpacing;
+
+const my = margin.my || margin.mt || margin.mb ? undefined : "md";
+const marginClasses = getSpacingClasses({ ...margin, my });
+const borderVar = `var(--naut-border-width-${size}) ${variant} var(--naut-color-border)`;
+---
+
+<div
+  class:list={[
+    "naut-divider",
+    orientation && `${orientation}`,
+    size && `size--${size}`,
+    variant && `${variant}`,
+    label && "with-label",
+    ...marginClasses,
+    className,
+  ]}
+>
+  {label && <span class="label">{label}</span>}
+</div>
+
+<style define:vars={{ borderVar, margin }}>
+  .naut-divider {
+    display: flex;
+    align-items: center;
+
+    &::before {
+      flex: 1;
+      content: "";
+      border-top: var(--borderVar);
+    }
+
+    &::after {
+      flex: 1;
+      content: "";
+      border-top: var(--borderVar);
+    }
+
+    &.with-label {
+      &::before {
+        margin-inline-end: var(--naut-spacing-md);
+      }
+      &::after {
+        margin-inline-start: var(--naut-spacing-md);
+      }
+    }
+
+    &.horizontal {
+      height: 1px;
+    }
+
+    &.vertical {
+      width: 1px;
+    }
+
+    .label {
+      font-size: var(--naut-font-size-sm);
+      color: var(--naut-color-content-soft);
+    }
+  }
+</style>

package/src/components/Drawer.astro

@@ -0,0 +1,139 @@
+---
+import type { Base } from "../types";
+import Button from "./Button.astro";
+
+export interface DrawerProps extends Base {
+  hidden?: "mobile" | "tablet" | "desktop" | "large-desktop";
+  zIndex?: number;
+}
+
+const { hidden = "desktop", zIndex = 999 } = Astro.props as DrawerProps;
+---
+
+<div class:list={["naut-drawer-toggle", `hidden--${hidden}`]}>
+  <Button variant="ghost" onclick="toggleMenu()">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="1.7"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      class="lucide lucide-menu-icon lucide-menu"
+    >
+      <title>Menu</title>
+      <g class="menu-icon">
+        <path d="M4 5h16" />
+        <path d="M4 12h16" />
+        <path d="M4 19h16" />
+      </g>
+    </svg>
+  </Button>
+</div>
+<div id="naut-drawer">
+  <header class="naut-drawer-header">
+    <Button variant="ghost" id="close-btn" onclick="toggleMenu()">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="1.7"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        class="lucide lucide-x"
+      >
+        <title>Close</title>
+        <path d="M18 6 6 18" />
+        <path d="m6 6 12 12" />
+      </svg>
+    </Button>
+  </header>
+  <div class="naut-drawer-content"><slot /></div>
+</div>
+
+<script is:inline>
+  const toggleMenu = () => {
+    const drawer = document.querySelector("#naut-drawer");
+    if (drawer) {
+      drawer.classList.toggle("active");
+      document.body.appendChild(drawer);
+      // disable scroll
+      document.body.style.overflow =
+        document.body.style.overflow === "hidden" ? "auto" : "hidden";
+    }
+  };
+</script>
+
+<style define:vars={{ zIndex }}>
+  .naut-drawer-toggle {
+    display: inline-block;
+
+    &.hidden--mobile {
+      @media only screen and (min-width: 576px) {
+        display: none;
+      }
+    }
+
+    &.hidden--tablet {
+      @media only screen and (min-width: 818px) {
+        display: none;
+      }
+    }
+
+    &.hidden--desktop {
+      @media only screen and (min-width: 1042px) {
+        display: none;
+      }
+    }
+
+    &.only--desktop-large {
+      @media only screen and (min-width: 1250px) {
+        display: none;
+      }
+    }
+  }
+
+  #naut-drawer {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: var(--zIndex);
+    visibility: hidden;
+    overflow: hidden;
+    color: var(--naut-color-content);
+    background: rgb(
+      from var(--naut-color-base) r g b /
+      0.7
+    ); /* Semi-transparent color */
+    opacity: 0;
+    -webkit-backdrop-filter: blur(5px); /* Required for Safari support */
+    backdrop-filter: blur(5px); /* Blurs what's behind this box */
+    transition:
+      opacity 0.4s ease-in-out,
+      visibility 0.4s ease-in-out;
+
+    &.active {
+      visibility: visible;
+      opacity: 1;
+    }
+
+    #close-btn {
+      position: absolute;
+      top: 1rem;
+      right: 1.2rem;
+      z-index: 12;
+    }
+
+    .naut-drawer-content {
+      padding: var(--naut-spacing-md);
+    }
+  }
+</style>

package/src/components/Flex.astro

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