@nautui/core 0.1.0

package/src/components/Group.astro

@@ -0,0 +1,106 @@
+---
+import "../styles/spacing/gap.css";
+import type { Base, Gap } from "../types";
+
+type ScreenSize = "sm" | "md" | "lg" | "xl";
+
+export interface GroupProps extends Base {
+  gap?: Gap;
+  grow?: boolean;
+  justify?:
+    | "start"
+    | "center"
+    | "end"
+    | "space-between"
+    | "space-around"
+    | "space-evenly";
+  not?: ScreenSize | ScreenSize[];
+  wrap?: boolean;
+}
+
+const {
+  class: className,
+  justify = "start",
+  gap = "md",
+  grow = false,
+  wrap = false,
+  not,
+} = Astro.props as GroupProps;
+const notScreens = typeof not === "string" ? [not] : not;
+---
+
+<div
+  class:list={[
+  "naut-group",
+  grow && "grow",
+  wrap && "wrap",
+  gap && `gap-${gap}`,
+  justify && `justify-${justify}`,
+  notScreens?.map((s) => `not-${s}`).join(" "),
+  className]}
+>
+  <slot />
+</div>
+
+<style>
+  .naut-group {
+    display: inline-flex;
+    align-items: center;
+
+    &.not-sm {
+      @media only screen and (max-width: 817px) {
+        flex-direction: column;
+      }
+    }
+
+    &.not-md {
+      @media only screen and (min-width: 818px) and (min-width: 1041px) {
+        flex-direction: column;
+      }
+    }
+
+    &.not-lg {
+      @media only screen and (min-width: 1042px) and (min-width: 1249px) {
+        flex-direction: column;
+      }
+    }
+
+    &.not-xl {
+      @media only screen and (min-width: 1250px) {
+        flex-direction: column;
+      }
+    }
+
+    &.justify-start {
+      justify-content: flex-start;
+    }
+
+    &.justify-center {
+      justify-content: center;
+    }
+
+    &.justify-end {
+      justify-content: flex-end;
+    }
+
+    &.justify-space-between {
+      justify-content: space-between;
+    }
+
+    &.justify-space-around {
+      justify-content: space-around;
+    }
+
+    &.justify-space-evenly {
+      justify-content: space-evenly;
+    }
+
+    &.grow {
+      flex-grow: 1;
+    }
+
+    &.wrap {
+      flex-wrap: wrap;
+    }
+  }
+</style>

package/src/components/Image.astro

@@ -0,0 +1,191 @@
+---
+import type { Base, Radius } from "../types";
+
+export interface ImageProps extends Base {
+  alt: string;
+  cover?: boolean;
+  fluid?: boolean;
+  maxHeight?: string;
+  maxWidth?: string;
+  radius?: Radius;
+  ratio?: "1:1" | "16:9" | "4:3" | "3:2" | "2:1" | "9:16 | 3:4" | "2:3" | "1:2";
+  responsive?: boolean;
+  shadow?: "sm" | "md" | "lg" | "xl";
+  src: string;
+  [key: string]: unknown;
+}
+
+const {
+  src,
+  alt,
+  class: className,
+  ratio,
+  radius,
+  shadow,
+  cover = false,
+  fluid = false,
+  responsive = false,
+  maxWidth,
+  maxHeight,
+  ...rest
+} = Astro.props as ImageProps;
+const ratioName = ratio ? ratio.replace(":", "x") : undefined;
+const imageMaxWidth = maxWidth && !cover ? maxWidth : undefined;
+const imageMaxHeight = maxHeight && !cover ? maxHeight : undefined;
+const imageHeight = maxHeight && !cover ? maxHeight : undefined;
+---
+
+<div
+  class:list={[
+    "naut-image",
+    ratioName && `ratio ratio-${ratioName}`,
+    radius && `radius-${radius}`,
+    shadow && `shadow-${shadow}`,
+    cover && "fit-cover",
+    maxHeight && !cover && "fit-height",
+    fluid && "fluid",
+    responsive && "responsive",
+    className
+  ]}
+>
+  <img src={src} alt={alt} {...rest}>
+</div>
+<style define:vars={{ imageHeight, imageMaxHeight, imageMaxWidth }}>
+  .naut-image {
+    --radius-scale: 1.575;
+    position: relative;
+    display: inline-block;
+    max-width: var(--imageMaxWidth);
+    height: var(--imageHeight);
+    max-height: var(--imageMaxHeight);
+    overflow: hidden;
+    background-color: var(--naut-color-base-100);
+
+    img {
+      display: block;
+      width: auto;
+      height: auto;
+    }
+
+    &.fit-cover {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+    }
+
+    &.fluid:not(.fit-cover) {
+      width: 100%;
+      img {
+        width: 100%;
+      }
+    }
+
+    &.responsive:not(.fluid) {
+      @media only screen and (max-width: 1041px) {
+        width: 100%;
+        max-width: 100%;
+        height: auto;
+        img {
+          width: 100%;
+          height: auto;
+        }
+      }
+    }
+
+    &.fit-height:not(.ratio):not(.fit-cover):not(.fluid) {
+      width: fit-content;
+      max-width: 100%;
+      img {
+        display: block;
+        width: auto;
+        max-width: none;
+        height: 100%;
+      }
+    }
+
+    &.ratio {
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+    }
+
+    &.ratio-1x1 {
+      aspect-ratio: 1 / 1;
+    }
+
+    &.ratio-16x9 {
+      aspect-ratio: 16 / 9;
+    }
+
+    &.ratio-4x3 {
+      aspect-ratio: 4 / 3;
+    }
+
+    &.ratio-3x2 {
+      aspect-ratio: 3 / 2;
+    }
+
+    &.ratio-2x1 {
+      aspect-ratio: 2 / 1;
+    }
+
+    &.ratio-9x16 {
+      aspect-ratio: 9 / 16;
+    }
+
+    &.ratio-3x4 {
+      aspect-ratio: 3 / 4;
+    }
+
+    &.ratio-2x3 {
+      aspect-ratio: 2 / 3;
+    }
+
+    &.ratio-1x2 {
+      aspect-ratio: 1 / 2;
+    }
+
+    &.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));
+    }
+
+    &.radius-full {
+      border-radius: 9999px;
+    }
+
+    &.shadow-sm:not(.cover) {
+      box-shadow: var(--naut-shadow-sm);
+    }
+
+    &.shadow-md:not(.cover) {
+      box-shadow: var(--naut-shadow-md);
+    }
+
+    &.shadow-lg:not(.cover) {
+      box-shadow: var(--naut-shadow-lg);
+    }
+
+    &.shadow-xl:not(.cover) {
+      box-shadow: var(--naut-shadow-xl);
+    }
+  }
+</style>

package/src/components/Link.astro

@@ -0,0 +1,118 @@
+---
+import type { Base } from "../types";
+
+export interface LinkProps extends Base {
+  dimmed?: boolean;
+  external?: boolean;
+  hover?: "underline" | "dimmed" | "surface";
+  to: string;
+  underline?: boolean;
+  wrap?: boolean;
+}
+
+const {
+  to,
+  title,
+  dimmed,
+  class: className,
+  hover = "underline",
+  external = false,
+  underline = false,
+  wrap = false,
+  ...rest
+} = Astro.props as LinkProps;
+---
+
+<a
+  class:list={[
+    "naut-link",
+    `hover--${hover}`,
+    wrap && "wrap",
+    dimmed && "dimmed",
+    external && "external",
+    underline && "underline",
+    className
+  ]}
+  href={to}
+  {...rest}
+>
+  <div class="link--wrapper"><slot /></div>
+  {external && (
+    <svg
+      class="lucide lucide-external-link-icon external-link-icon"
+      fill="none"
+      height="16"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+      viewBox="0 0 24 24"
+      width="16"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <title>External Link</title>
+      <path d="M15 3h6v6"/><path d="M10 14 21 3"/><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/></svg>
+  )}
+</a>
+<style>
+  .naut-link {
+    display: inline-flex;
+    flex-wrap: nowrap;
+    gap: 0.5rem;
+    align-items: center;
+    padding: 0.2rem 0.8rem;
+    color: var(--naut-color-link);
+    text-decoration: none;
+
+    .link--wrapper {
+      display: inline-flex;
+      flex-wrap: nowrap;
+      gap: 0.5rem;
+      align-items: center;
+      text-wrap: nowrap;
+    }
+
+    &.wrap {
+      flex-wrap: wrap;
+
+      .link--wrapper {
+        flex-wrap: wrap;
+        text-wrap: wrap;
+      }
+    }
+
+    &.underline {
+      text-decoration: underline;
+    }
+
+    &.dimmed {
+      opacity: 0.5;
+    }
+
+    &.external {
+      gap: 0.3rem;
+
+      .external-link-icon {
+        opacity: 0.5;
+      }
+    }
+
+    &:hover {
+      &.dimmed {
+        opacity: 1;
+      }
+
+      &.hover--underline {
+        text-decoration: underline;
+      }
+
+      &.hover--dimmed {
+        opacity: 0.5;
+      }
+
+      &.hover--surface {
+        background-color: var(--naut-color-base-100);
+      }
+    }
+  }
+</style>

package/src/components/List.astro

@@ -0,0 +1,57 @@
+---
+import "../styles/spacing/gap.css";
+import type { Base, Gap } from "../types";
+
+export interface ListProps extends Base {
+  gap?: Gap;
+  horizontal?: boolean;
+  marker?: "none" | string;
+  noMarker?: boolean;
+  ordered?: boolean;
+}
+
+const {
+  class: className,
+  gap = "sm",
+  ordered = false,
+  horizontal = false,
+  marker,
+  ...rest
+} = Astro.props as ListProps;
+const markerValue = marker && marker !== "none" ? `"${marker}  "` : undefined;
+const classList = [
+  "naut-list",
+  horizontal && "horizontal",
+  marker === "none" && "no-marker",
+  gap && `gap-${gap}`,
+  className,
+];
+const spacing = `var(--naut-spacing-${gap})`;
+---
+
+{!ordered && <ul class:list={classList} {...rest}>
+  <slot />
+</ul>}
+
+{ordered && <ol class:list={classList} {...rest}>
+  <slot />
+</ol>}
+
+<style define:vars={{ marker: markerValue }}>
+  .naut-list {
+    display: grid;
+    padding-left: var(--naut-spacing-md);
+
+    &.no-marker {
+      padding-left: 0;
+      list-style: none;
+    }
+
+    &.horizontal {
+      display: flex;
+      flex-direction: row;
+      gap: calc(var(--naut-spacing) * 1.5);
+      padding: 0;
+    }
+  }
+</style>

package/src/components/ListItem.astro

@@ -0,0 +1,31 @@
+---
+import type { Base } from "../types";
+
+export interface ListItemProps extends Base {
+  marker?: "none" | string;
+}
+
+const { class: className, marker, ...rest }: ListItemProps = Astro.props;
+
+const markerVar = marker && marker !== "none" ? `"${marker}  "` : undefined;
+const itemMarker = markerVar || "var(--marker)"; // marker var from parent
+---
+
+<li
+  class:list={[ "naut-list-item", marker === "none" && "no-marker", className]}
+  {...rest}
+>
+  <slot />
+</li>
+
+<style define:vars={{ itemMarker }}>
+  li.naut-list-item {
+    &:not(.no-marker)::marker {
+      content: var(--itemMarker);
+    }
+
+    &.no-marker {
+      list-style-type: none;
+    }
+  }
+</style>

package/src/components/Mark.astro

@@ -0,0 +1,161 @@
+---
+import type { Base } from "../types";
+
+export interface MarkProps extends Base {
+  gradient?: { colors: string[]; deg?: number };
+  rotate?: "sm" | "md" | "lg";
+  variant?:
+    | "default"
+    | "underline"
+    | "halflight"
+    | "parallelogram"
+    | "sketch-circle";
+}
+
+const {
+  class: className,
+  variant,
+  rotate,
+  gradient,
+  ...rest
+} = Astro.props as MarkProps;
+const gradientBg = gradient
+  ? `linear-gradient(${gradient.deg || 45}deg, ${gradient.colors.join(", ")})`
+  : undefined;
+---
+
+<mark
+  class:list={[
+    "naut-mark",
+    variant && `variant--${variant}`,
+    rotate && `rotate--${rotate}`,
+    gradient && "gradient",
+    className]}
+  {...rest}
+>
+  <slot />
+</mark>
+
+<style define:vars={{ gradientBg }}>
+  .naut-mark {
+    display: inline-block;
+    padding-right: 1rem;
+    padding-left: 1rem;
+    color: var(--naut-color-content);
+    -moz-text-fill-color: var(--naut-color-content);
+    -webkit-text-fill-color: var(--naut-color-content);
+    background-color: var(--naut-color-highlight);
+
+    &::selection {
+      color: var(--naut-color-content);
+    }
+
+    &.rotate--sm {
+      transform: rotate(-1.25deg);
+    }
+
+    &.rotate--md {
+      transform: rotate(-1.5deg);
+    }
+
+    &.rotate--lg {
+      transform: rotate(-1.95deg);
+    }
+
+    &.variant--underline {
+      color: inherit;
+      background:
+        linear-gradient(120deg, var(--naut-color-highlight) 0 100%) no-repeat
+        18px calc(100% + 4px) / calc(100% - 32px) 0.2em transparent;
+    }
+
+    &.variant--halflight {
+      padding: 0 0.3rem;
+      color: inherit;
+      background:
+        linear-gradient(120deg, var(--naut-color-highlight) 0% 100%) no-repeat 0
+        88% / 100% 0.4em transparent;
+    }
+
+    &.variant--parallelogram {
+      padding-inline: 1.4rem;
+      margin-inline: calc(1.4rem * -1);
+      background-color: transparent;
+      background-image:
+        linear-gradient(
+          to bottom right,
+          transparent 50%,
+          var(--naut-color-highlight) 50%
+        ),
+        linear-gradient(
+          var(--naut-color-highlight),
+          var(--naut-color-highlight)
+        ),
+        linear-gradient(
+          to top left,
+          transparent 50%,
+          var(--naut-color-highlight) 50%
+        );
+      background-repeat: no-repeat;
+      background-position:
+        left center,
+        center,
+        right center;
+      background-size:
+        0.25em 1.5em,
+        calc(100% - 0.25em * 2 + 1.5px) 1.5em,
+        0.25em 1.5em;
+    }
+
+    &.variant--sketch-circle {
+      position: relative;
+      color: inherit;
+      background-color: transparent;
+
+      &::before {
+        position: absolute;
+        top: -0.1em;
+        left: -0.5em;
+        z-index: -1;
+        width: 100%;
+        height: 1em;
+        padding: 0.1em 0.25em;
+        content: "";
+        border: 6px solid var(--naut-color-highlight);
+        border-right-color: transparent;
+        border-radius: 50%;
+        transform: rotate(2deg);
+      }
+
+      &::after {
+        position: absolute;
+        top: 0.1em;
+        left: -0.5em;
+        z-index: -1;
+        width: 100%;
+        height: 1em;
+        padding: 0.1em 0.25em;
+        content: "";
+        border: 6px solid var(--naut-color-highlight);
+        border-top-color: transparent;
+        border-left-color: transparent;
+        border-radius: 50%;
+        transform: rotate(-2deg);
+      }
+    }
+
+    &.gradient {
+      color: transparent;
+      background-color: transparent;
+      background-image: var(--gradientBg);
+      -webkit-background-clip: text;
+      background-clip: text;
+
+      &::selection {
+        color: var(--naut-color-content);
+        background-color: var(--naut-color-selection);
+        background-image: none;
+      }
+    }
+  }
+</style>