@nautui/core 0.1.0

package/src/components/Box.astro

@@ -0,0 +1,189 @@
+---
+import "../styles/spacing/padding.css";
+import "../styles/spacing/margin.css";
+import "../styles/border.css";
+import "../styles/radius.css";
+import { type Border, createBorder } from "../lib/border";
+import {
+  extractSpacingProps,
+  getSpacingClasses,
+  SpacingProps,
+} from "../lib/spacing";
+import type { Base, Radius } from "../types";
+
+type CornerStyle = "diamond" | "square" | "circle" | "plus" | "x";
+
+export interface Corner {
+  bottomLeft?: CornerStyle;
+  bottomRight?: CornerStyle;
+  topLeft?: CornerStyle;
+  topRight?: CornerStyle;
+}
+
+export interface BoxProps extends Base, SpacingProps {
+  border?: Border;
+  centered?: boolean;
+  corner?: Corner;
+  radius?: Radius;
+}
+
+const { padding, margin, nonSpacing } = extractSpacingProps(
+  Astro.props as BoxProps
+);
+
+const {
+  border,
+  radius,
+  corner,
+  centered = false,
+  class: className,
+  ...rest
+} = nonSpacing;
+
+const borderConfig =
+  typeof border === "string" ? { width: border } : border || {};
+const { borderClasses, borderColors } = createBorder(borderConfig);
+
+const p = Object.keys(padding).length === 0 ? "md" : padding.p;
+const marginClasses = getSpacingClasses({ ...margin });
+const paddingClasses = getSpacingClasses({ ...padding, p });
+const classlist = [
+  "naut-box",
+  radius && `radius-${radius}`,
+  centered && "centered",
+  className,
+  ...borderClasses,
+  ...marginClasses,
+];
+---
+
+<div class:list={classlist} {...rest}>
+  {corner?.topLeft && <span class:list={["corner", "top-left", corner.topLeft]} />}
+  {corner?.topRight && <span class:list={["corner", "top-right", corner.topRight]} />}
+  {corner?.bottomRight && <span class:list={["corner", "bottom-right", corner.bottomRight]} />}
+  {corner?.bottomLeft && <span class:list={["corner", "bottom-left", corner.bottomLeft]} />}
+  <slot name="background" />
+  <slot name="before" />
+  <div class:list={["naut-box--wrapper", ...paddingClasses]}><slot /></div>
+  <slot name="after" />
+</div>
+
+<style define:vars={{ ...borderColors }}>
+  .naut-box {
+    position: relative;
+    display: flow-root; /* Prevents margin collapsing */
+
+    &.centered {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+    }
+
+    .naut-box--wrapper {
+      position: relative;
+      overflow: hidden;
+    }
+
+    .corner {
+      position: absolute;
+      z-index: 1;
+      width: 9px;
+      height: 9px;
+
+      &.square,
+      &.circle,
+      &.diamond {
+        background-color: var(--naut-color-base);
+        border: 1px solid var(--naut-color-border);
+
+        &.top-left {
+          top: -0.38rem;
+          left: -0.35rem;
+        }
+
+        &.top-right {
+          top: -0.38rem;
+          right: -0.4rem;
+        }
+
+        &.bottom-left {
+          bottom: -0.35rem;
+          left: -0.36rem;
+        }
+
+        &.bottom-right {
+          right: -0.4rem;
+          bottom: -0.35rem;
+        }
+      }
+
+      &.circle {
+        border-radius: 50%;
+      }
+
+      &.diamond {
+        transform: rotate(45deg);
+      }
+
+      &.plus,
+      &.x {
+        &.top-left {
+          top: -0.33rem;
+          left: -0.31rem;
+        }
+
+        &.top-right {
+          top: -0.33rem;
+          right: -0.32rem;
+        }
+
+        &.bottom-left {
+          bottom: -0.32rem;
+          left: -0.31rem;
+        }
+
+        &.bottom-right {
+          right: -0.32rem;
+          bottom: -0.32rem;
+        }
+
+        &::before,
+        &::after {
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          content: "";
+          background-color: var(--naut-color-border-strong);
+        }
+      }
+
+      &.plus {
+        &::before {
+          width: 1px;
+          height: 100%;
+          transform: translate(-50%, -50%);
+        }
+
+        &::after {
+          width: 100%;
+          height: 1px;
+          transform: translate(-50%, -50%);
+        }
+      }
+
+      &.x {
+        &::before,
+        &::after {
+          width: 100%;
+          height: 1px;
+          transform: translate(-50%, -50%) rotate(45deg);
+        }
+
+        &::after {
+          transform: translate(-50%, -50%) rotate(-45deg);
+        }
+      }
+    }
+  }
+</style>

package/src/components/Breadcrumb.astro

@@ -0,0 +1,62 @@
+---
+import type { Base } from "../types";
+
+interface BreadcrumbItem {
+  href?: string;
+  label: string;
+}
+
+export interface BreadcrumbProps extends Base {
+  className?: string;
+  items: BreadcrumbItem[];
+}
+
+const { items, class: className } = Astro.props as BreadcrumbProps;
+---
+
+<nav class:list={["naut-breadcrumb", className]}>
+  <ol>
+    {items.map((item) => (
+      <li>
+        {item.href && <a href={item.href} title={item.label}>{item.label}</a>}
+        {!item.href && <span>{item.label}</span>}
+      </li>
+    ))}
+  </ol>
+</nav>
+
+<style>
+  .naut-breadcrumb {
+    ol {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 1rem;
+      align-items: center;
+      padding: 0;
+      margin: 0;
+      list-style: none;
+
+      li {
+        display: flex;
+        flex-wrap: nowrap;
+        gap: 0.5rem;
+        align-items: center;
+
+        a {
+          color: var(--naut-color-content-soft);
+          text-decoration: none;
+          &:hover {
+            color: var(--naut-color-content);
+          }
+        }
+      }
+
+      li + li::before {
+        padding-inline-end: 0.5rem;
+        color: var(--naut-color-content-soft);
+        content: "/";
+        opacity: 0.5;
+      }
+    }
+  }
+</style>

package/src/components/Button.astro

@@ -0,0 +1,273 @@
+---
+import type { Base, Radius, Size } from "../types";
+
+type ButtonVariant = "default" | "primary" | "secondary" | "destructive";
+type ButtonSize = Omit<Size, "xl">;
+type ButtonType = "button" | "submit" | "reset";
+
+export interface ButtonProps extends Base {
+  border?: Omit<Size, "xl"> | "none";
+  dark?: boolean;
+  href?: string;
+  rounded?: Radius;
+  size?: ButtonSize;
+  type?: ButtonType;
+  variant?: ButtonVariant;
+}
+
+const {
+  href,
+  class: className,
+  size = "md",
+  type = "button",
+  variant = "default",
+  rounded = "md",
+  border = "md",
+  pill = false,
+  dark = false,
+  ...rest
+} = Astro.props as ButtonProps;
+
+const classlist = [
+  "naut-button",
+  `size-${size}`,
+  `variant-${variant}`,
+  `rounded-${rounded}`,
+  `border-${border}`,
+  pill && "pill",
+  dark && "dark",
+  className,
+];
+---
+
+{href && <a href={href} class:list={classlist} {...rest}><slot /></a>}
+{!href && <button class:list={classlist} type={type} {...rest}><slot /></button>}
+
+<style>
+  .naut-button {
+    position: relative;
+    display: inline-flex;
+    gap: 0.5rem;
+    align-items: center;
+    justify-content: center;
+
+    /* Size */
+    height: 2.5rem;
+    padding: 0 1rem;
+    font-family: inherit;
+    font-size: 0.875rem;
+    font-weight: 400;
+    line-height: 1.5rem;
+
+    /* Variant default */
+    color: var(--naut-color-content);
+    white-space: nowrap;
+    text-decoration: none;
+    cursor: pointer;
+    outline: none;
+    background: var(--naut-color-base-100);
+    border-color: var(--naut-color-base-300);
+    border-style: solid;
+    border-width: 0.063rem;
+    border-radius: 0.5rem;
+    box-shadow: 1px 1px 2px 0.5px rgb(from #000 r g b / 0.1);
+    transition-duration: 0.1s;
+
+    &:hover:not(:disabled) {
+      background: var(--naut-color-base-200);
+    }
+
+    &:active:not(:disabled) {
+      transform: translateY(0.0625rem);
+      transition-duration: 0;
+    }
+
+    &.variant-primary {
+      color: var(--naut-color-primary-content);
+      background: var(--naut-color-primary);
+      border-color: var(--naut-color-primary);
+
+      &:hover:not(:disabled) {
+        background: color-mix(in oklch, var(--naut-color-primary), white 35%);
+      }
+    }
+
+    &.variant-secondary {
+      color: var(--naut-color-secondary-content);
+      background: var(--naut-color-secondary);
+      border-color: var(--naut-color-secondary);
+
+      &:hover:not(:disabled) {
+        background: color-mix(in oklch, var(--naut-color-secondary), white 35%);
+      }
+    }
+
+    &.variant-destructive {
+      color: var(--naut-color-destructive-content);
+      background: var(--naut-color-destructive);
+      border-color: var(--naut-color-destructive);
+
+      &:hover:not(:disabled) {
+        background: color-mix(
+          in oklch,
+          var(--naut-color-destructive),
+          white 25%
+        );
+      }
+    }
+
+    &.variant-outline,
+    &.variant-outline-primary,
+    &.variant-outline-secondary {
+      color: var(--naut-color-content);
+      background: transparent;
+      border-color: var(--naut-color-border-strong);
+    }
+
+    /*&.variant-outline:hover:not(:disabled) {
+      background: var(--naut-color-base-200);
+    }*/
+
+    &.variant-outline-primary {
+      border-color: var(--naut-color-primary);
+
+      &:hover:not(:disabled) {
+        background: rgb(from var(--naut-color-primary) r g b / 0.15);
+      }
+    }
+
+    &.variant-outline-secondary {
+      border-color: var(--naut-color-secondary);
+
+      &:hover:not(:disabled) {
+        background: rgb(from var(--naut-color-secondary) r g b / 0.15);
+      }
+    }
+
+    &.variant-flat {
+      background: var(--naut-color-base-100);
+      border-color: transparent;
+      box-shadow: none;
+    }
+
+    &.variant-ghost {
+      background: transparent;
+      border: none;
+      box-shadow: none;
+    }
+
+    &.variant-link {
+      color: var(--naut-color-primary);
+      background: transparent;
+      border-color: transparent;
+      box-shadow: none;
+
+      &:hover:not(:disabled) {
+        text-decoration: underline;
+        background: transparent;
+      }
+    }
+
+    &.variant-rainbow {
+      --naut-rainbow-conic-gradient: conic-gradient(
+        from 0turn,
+        hsl(110 90% 50%),
+        hsl(210 90% 60%),
+        hsl(220 70% 60%),
+        hsl(30 70% 60%),
+        hsl(100 90% 50%)
+      );
+      background:
+        linear-gradient(var(--naut-color-base), var(--naut-color-base-100))
+        padding-box,
+        var(--naut-rainbow-conic-gradient) border-box;
+      border-color: transparent;
+      &:hover:not(:disabled) {
+        background:
+          linear-gradient(var(--naut-color-base), var(--naut-color-base-200))
+          padding-box,
+          var(--naut-rainbow-conic-gradient) border-box;
+      }
+    }
+
+    &:disabled {
+      color: rgb(from var(--naut-color-content-soft) r g b / 0.3);
+      pointer-events: none;
+      background: rgb(from var(--naut-color-base-100) r g b / 0.7);
+      border-color: rgb(from var(--naut-color-border) r g b / 0.1);
+      box-shadow: none;
+    }
+
+    /* Border thickness */
+
+    &.border-none {
+      border: none;
+    }
+
+    &.border-sm {
+      border-width: var(--naut-border-width-sm);
+    }
+
+    &.border-md {
+      border-width: var(--naut-border-width-md);
+    }
+
+    &.border-lg {
+      border-width: var(--naut-border-width-lg);
+    }
+
+    &.border-xl {
+      border-width: var(--naut-border-width-xl);
+    }
+
+    /* Border Radius */
+
+    &.rounded-none {
+      border-radius: 0;
+    }
+
+    &.rounded-sm {
+      border-radius: var(--naut-border-radius-sm);
+    }
+
+    &.rounded-md {
+      border-radius: var(--naut-border-radius-md);
+    }
+
+    &.rounded-lg {
+      border-radius: var(--naut-border-radius-lg);
+    }
+
+    &.rounded-full {
+      border-radius: 9999px;
+    }
+
+    /* square */
+    &:has(> :only-child):has(> svg:first-child) {
+      padding: 0 0.438rem;
+    }
+
+    /* Sizes */
+    &.size-sm {
+      height: 2rem;
+      padding: 0 0.85rem;
+      font-size: 0.8rem;
+
+      /* square */
+      &:has(> :only-child):has(> svg:first-child) {
+        padding: 0 0.375rem;
+      }
+    }
+
+    &.size-lg {
+      height: 3rem;
+      padding: 0 2.5rem;
+      font-size: calc(var(--naut-font-size) * 1.125);
+
+      /* square */
+      &:has(> :only-child):has(> svg:first-child) {
+        padding: 0 0.562rem;
+      }
+    }
+  }
+</style>