@nautui/core 0.1.0

package/src/components/Title.astro

@@ -0,0 +1,141 @@
+---
+import "../styles/spacing/margin.css";
+import {
+  extractSpacingProps,
+  getSpacingClasses,
+  MarginProps,
+} from "../lib/spacing";
+import type { Base } from "../types";
+
+export interface TitleProps extends Base, MarginProps {
+  align?: "left" | "center" | "right" | "justify";
+  gradient?: { colors: string[]; deg?: number };
+  level?: 1 | 2 | 3 | 4 | 5 | 6;
+  size?: "default" | "display" | "display-lg" | "display-xl" | "display-xxl";
+}
+
+const { spacing, nonSpacing } = extractSpacingProps(Astro.props as TitleProps);
+
+const {
+  level = 2,
+  class: className,
+  size = "default",
+  gradient,
+  align,
+  ...rest
+} = nonSpacing;
+
+const spacingClasses = getSpacingClasses(spacing);
+
+const classlist = [
+  "naut-title",
+  `l-${level}`,
+  align && `align-${align}`,
+  size && `size-${size}`,
+  gradient && "color--gradient",
+  ...spacingClasses,
+  className,
+];
+
+const gradientBg = gradient
+  ? `linear-gradient(${gradient.deg || 45}deg, ${gradient.colors.join(", ")})`
+  : undefined;
+---
+
+{level === 1 && <h1 class:list={classlist} {...rest}><slot /></h1>}
+{level === 2 && <h2 class:list={classlist} {...rest}><slot /></h2>}
+{level === 3 && <h3 class:list={classlist} {...rest}><slot /></h3>}
+{level === 4 && <h4 class:list={classlist} {...rest}><slot /></h4>}
+{level === 5 && <h5 class:list={classlist} {...rest}><slot /></h5>}
+{level === 6 && <h6 class:list={classlist} {...rest}><slot /></h6>}
+
+<style define:vars={{ gradientBg }}>
+  .naut-title {
+    font-weight: bold;
+
+    &.align-left {
+      text-align: left;
+    }
+
+    &.align-center {
+      text-align: center;
+    }
+
+    &.align-right {
+      text-align: right;
+    }
+
+    &.align-justify {
+      text-align: justify;
+    }
+
+    &.l-1 {
+      font-size: 2.5rem;
+      line-height: calc(2.05rem * var(--naut-line-height-ratio));
+    }
+
+    &.l-2 {
+      font-size: 1.8rem;
+      line-height: calc(1.45rem * var(--naut-line-height-ratio));
+    }
+
+    &.l-3 {
+      font-size: 1.6rem;
+      line-height: calc(1.3rem * var(--naut-line-height-ratio));
+    }
+
+    &.l-4 {
+      font-size: 1.5rem;
+      line-height: calc(1.25rem * var(--naut-line-height-ratio));
+    }
+
+    &.l-5 {
+      font-size: 1.3rem;
+      line-height: calc(1.085rem * var(--naut-line-height-ratio));
+    }
+
+    &.l-6 {
+      font-size: 1.2rem;
+      line-height: calc(1.025rem * var(--naut-line-height-ratio));
+    }
+
+    /* Size display: ;*/
+    &.size-display-sm {
+      font-size: clamp(2rem, 2.2vw + 1rem, 2.8rem);
+      line-height: clamp(2.5rem, 3.2vw + 1rem, 3.5rem);
+    }
+
+    &.size-display {
+      font-size: clamp(2.2rem, 2.5vw + 1rem, 3.2rem);
+      line-height: clamp(2.8rem, 3.2vw + 1rem, 3.95rem);
+    }
+
+    &.size-display-lg {
+      font-size: clamp(2.8rem, 4vw + 1rem, 4.2rem);
+      line-height: clamp(3rem, 4.5vw + 1rem, 4.5rem);
+    }
+
+    &.size-display-xl {
+      font-size: clamp(3rem, 5vw + 1rem, 4.5rem);
+      line-height: clamp(3.2rem, 5vw + 1rem, 5rem);
+    }
+
+    &.size-display-xxl {
+      font-size: clamp(3.2rem, 6vw + 1rem, 5rem);
+      line-height: clamp(3.5rem, 6vw + 1rem, 5.5rem);
+    }
+
+    /* Color */
+    &.color--gradient {
+      color: transparent;
+      -webkit-text-fill-color: transparent;
+      background-image: var(--gradientBg);
+      -webkit-background-clip: text;
+      &::selection {
+        color: var(--naut-color-content);
+        -webkit-text-fill-color: var(--naut-color-content);
+        background-color: var(--naut-color-selection);
+      }
+    }
+  }
+</style>

package/src/index.d.ts

@@ -0,0 +1,80 @@
+import type { AccordionProps } from "./components/Accordion.astro";
+import type { AccordionItemProps } from "./components/AccordionItem.astro";
+import type { BackgroundProps } from "./components/Background.astro";
+import type { BadgeProps } from "./components/Badge.astro";
+import type { BentoProps } from "./components/Bento.astro";
+import type { BentoItemProps } from "./components/BentoItem.astro";
+import type { BoxProps } from "./components/Box.astro";
+import type { BreadcrumbProps } from "./components/Breadcrumb.astro";
+import type { ButtonProps } from "./components/Button.astro";
+import type { CardProps } from "./components/Card.astro";
+import type { ContainerProps } from "./components/Container.astro";
+import type { DividerProps } from "./components/Divider.astro";
+import type { DrawerProps } from "./components/Drawer.astro";
+import type { FlexProps } from "./components/Flex.astro";
+import type { FlowProps } from "./components/Flow.astro";
+import type { GridProps } from "./components/Grid.astro";
+import type { GridItemProps } from "./components/GridItem.astro";
+import type { GroupProps } from "./components/Group.astro";
+import type { ImageProps } from "./components/Image.astro";
+import type { LinkProps } from "./components/Link.astro";
+import type { ListProps } from "./components/List.astro";
+import type { ListItemProps } from "./components/ListItem.astro";
+import type { MarkProps } from "./components/Mark.astro";
+import type { MarqueeProps } from "./components/Marquee.astro";
+import type { MasonryProps } from "./components/Masonry.astro";
+import type { MasonryItemProps } from "./components/MasonryItem.astro";
+import type { NavBarProps } from "./components/NavBar.astro";
+import type { SectionProps } from "./components/Section.astro";
+import type { SpaceProps } from "./components/Space.astro";
+import type { TextProps } from "./components/Text.astro";
+import type { ThemeProps } from "./components/Theme.astro";
+import type { ThemeToggleProps } from "./components/ThemeToggle.astro";
+import type { TitleProps } from "./components/Title.astro";
+
+export type AstroComponent = () => Promise<{ Content: unknown }>;
+
+// Theme
+export declare const Theme: (props: ThemeProps) => AstroComponent;
+export declare const ThemeToggle: (props: ThemeToggleProps) => AstroComponent;
+
+// Layout
+export declare const Container: (props: ContainerProps) => AstroComponent;
+export declare const Section: (props: SectionProps) => AstroComponent;
+export declare const Box: (props: BoxProps) => AstroComponent;
+export declare const Group: (props: GroupProps) => AstroComponent;
+export declare const Grid: (props: GridProps) => AstroComponent;
+export declare const GridItem: (props: GridItemProps) => AstroComponent;
+export declare const Marquee: (props: MarqueeProps) => AstroComponent;
+export declare const Masonry: (props: MasonryProps) => AstroComponent;
+export declare const MasonryItem: (props: MasonryItemProps) => AstroComponent;
+export declare const Flow: (props: FlowProps) => AstroComponent;
+export declare const Space: (props: SpaceProps) => AstroComponent;
+export declare const Flex: (props: FlexProps) => AstroComponent;
+export declare const Bento: (props: BentoProps) => AstroComponent;
+export declare const BentoItem: (props: BentoItemProps) => AstroComponent;
+
+// Typography
+export declare const Text: (props: TextProps) => AstroComponent;
+export declare const Title: (props: TitleProps) => AstroComponent;
+export declare const Link: (props: LinkProps) => AstroComponent;
+export declare const Mark: (props: MarkProps) => AstroComponent;
+export declare const List: (props: ListProps) => AstroComponent;
+export declare const ListItem: (props: ListItemProps) => AstroComponent;
+
+// UI
+export declare const Accordion: (props: AccordionProps) => AstroComponent;
+export declare const AccordionItem: (
+  props: AccordionItemProps
+) => AstroComponent;
+export declare const Button: (props: ButtonProps) => AstroComponent;
+export declare const Badge: (props: BadgeProps) => AstroComponent;
+export declare const Card: (props: CardProps) => AstroComponent;
+export declare const Divider: (props: DividerProps) => AstroComponent;
+export declare const Image: (props: ImageProps) => AstroComponent;
+export declare const Background: (props: BackgroundProps) => AstroComponent;
+
+// Navigation
+export declare const Breadcrumb: (props: BreadcrumbProps) => AstroComponent;
+export declare const Drawer: (props: DrawerProps) => AstroComponent;
+export declare const NavBar: (props: NavBarProps) => AstroComponent;

package/src/index.ts

@@ -0,0 +1,77 @@
+// biome-ignore-all lint/style/noExportedImports: DX
+
+import Accordion from "./components/Accordion.astro";
+import AccordionItem from "./components/AccordionItem.astro";
+import Background from "./components/Background.astro";
+import Badge from "./components/Badge.astro";
+import Bento from "./components/Bento.astro";
+import BentoItem from "./components/BentoItem.astro";
+import Box from "./components/Box.astro";
+import Breadcrumb from "./components/Breadcrumb.astro";
+import Button from "./components/Button.astro";
+import Card from "./components/Card.astro";
+import Container from "./components/Container.astro";
+import Divider from "./components/Divider.astro";
+import Drawer from "./components/Drawer.astro";
+import Flex from "./components/Flex.astro";
+import Flow from "./components/Flow.astro";
+import Grid from "./components/Grid.astro";
+import GridItem from "./components/GridItem.astro";
+import Group from "./components/Group.astro";
+import Image from "./components/Image.astro";
+import Link from "./components/Link.astro";
+import List from "./components/List.astro";
+import ListItem from "./components/ListItem.astro";
+import Mark from "./components/Mark.astro";
+import Marquee from "./components/Marquee.astro";
+import Masonry from "./components/Masonry.astro";
+import MasonryItem from "./components/MasonryItem.astro";
+import Menu from "./components/Menu.astro";
+import MenuItem from "./components/MenuItem.astro";
+import NavBar from "./components/NavBar.astro";
+import Section from "./components/Section.astro";
+import Space from "./components/Space.astro";
+import Stack from "./components/Stack.astro";
+import Text from "./components/Text.astro";
+import Theme from "./components/Theme.astro";
+import ThemeToggle from "./components/ThemeToggle.astro";
+import Title from "./components/Title.astro";
+
+export {
+  Accordion,
+  AccordionItem,
+  Background,
+  Badge,
+  Bento,
+  BentoItem,
+  Box,
+  Breadcrumb,
+  Button,
+  Card,
+  Container,
+  Divider,
+  Drawer,
+  Flex,
+  Flow,
+  Grid,
+  GridItem,
+  Group,
+  Image,
+  Link,
+  List,
+  ListItem,
+  Mark,
+  Marquee,
+  Masonry,
+  MasonryItem,
+  Menu,
+  MenuItem,
+  NavBar,
+  Section,
+  Space,
+  Stack,
+  Text,
+  Theme,
+  ThemeToggle,
+  Title,
+};

package/src/lib/border.ts

@@ -0,0 +1,92 @@
+export type BorderStyle = "solid" | "dashed" | "dotted";
+export type BorderWidth = "sm" | "md" | "lg" | "xl";
+
+export interface BorderObject {
+  color?: string;
+  style?: BorderStyle;
+  width?: BorderWidth;
+}
+
+export interface BorderProps {
+  bottom?: BorderWidth | BorderObject;
+  color?: string;
+  left?: BorderWidth | BorderObject;
+  right?: BorderWidth | BorderObject;
+  style?: BorderStyle;
+  top?: BorderWidth | BorderObject;
+  width?: BorderWidth;
+  x?: BorderWidth | BorderObject;
+  y?: BorderWidth | BorderObject;
+}
+
+export type Border = BorderWidth | BorderProps;
+
+/**
+ * Helper to add border classes and color variables for a given prefix.
+ */
+function applyBorderConfig(
+  prefix: string,
+  config: BorderObject,
+  classes: string[],
+  colorVar: Record<string, string>
+) {
+  const { width, style, color } = config;
+  if (width) {
+    classes.push(`${prefix}-${width}`);
+  }
+  if (style) {
+    classes.push(`${prefix}-${style}`);
+  }
+  if (color) {
+    // colorVars.push(`--naut-color-${prefix}: ${color}`);
+    colorVar[`naut-color-${prefix}`] = color;
+  }
+}
+
+/**
+ * Creates border classes and CSS variables from border props.
+ * Supports global and side-specific configurations.
+ */
+export function createBorder(props: BorderProps) {
+  const borderClasses: string[] = [];
+  const borderColors = {};
+
+  if (Object.keys(props).length > 0) {
+    borderClasses.push("border");
+  }
+
+  const { width, style, color, x, y, top, right, bottom, left } = props;
+
+  // 1. Global Props
+  applyBorderConfig(
+    "border",
+    { width, style, color },
+    borderClasses,
+    borderColors
+  );
+
+  // 2. Side-specific Processing
+  const sideSpecs: Record<string, BorderObject> = {};
+
+  const collect = (side: string, value?: BorderWidth | BorderObject) => {
+    if (value) {
+      const obj = typeof value === "string" ? { width: value } : value;
+      sideSpecs[side] = { ...sideSpecs[side], ...obj };
+    }
+  };
+
+  collect("left", x);
+  collect("right", x);
+  collect("top", y);
+  collect("bottom", y);
+  collect("top", top);
+  collect("right", right);
+  collect("bottom", bottom);
+  collect("left", left);
+
+  for (const [side, spec] of Object.entries(sideSpecs)) {
+    applyBorderConfig(`border-${side}`, spec, borderClasses, borderColors);
+  }
+
+  return { borderClasses, borderColors };
+}

package/src/lib/pattern.ts

@@ -0,0 +1,37 @@
+export interface PatternProps {
+  color?: string;
+  deg?: number;
+  gap?: number;
+  size?: number;
+  type: "dots" | "dots-x" | "grid" | "stripes";
+}
+
+export function getGradientPattern(props?: PatternProps) {
+  const color = props?.color || "var(--naut-color-base-300)";
+  const size = props?.size || 1;
+
+  switch (props?.type) {
+    case "dots": {
+      const gap = props.gap || 15;
+      return `radial-gradient(circle, ${color} ${size}px, transparent ${size}px) 0 0 / ${gap}px ${gap}px`;
+    }
+    case "dots-x": {
+      const gap = props.gap || 24;
+      return `radial-gradient(${color} ${size}px, transparent ${size}px) 0 0 / ${gap}px ${gap}px, radial-gradient(${color} ${size}px, transparent ${size}px) ${gap / 2}px ${gap / 2}px / ${gap}px ${gap}px`;
+    }
+    case "grid": {
+      const deg = props.deg || 90;
+      const gap = props.gap || 24;
+      return `linear-gradient(${deg}deg, ${color} ${size}px, transparent ${size}px) 0 0 / ${gap}px ${gap}px repeat, linear-gradient(${color} ${size}px, transparent ${size}px) 0 0 / ${gap}px ${gap}px repeat`;
+    }
+    case "stripes": {
+      const deg = props.deg || 130;
+      const gap = props.gap || 10;
+      const size = props.size || 5;
+      const color = props.color || "var(--naut-color-base-100)";
+      return `repeating-linear-gradient(${deg}deg, ${color} 0, ${color} ${size}px,transparent ${size}px,transparent ${gap}px)`;
+    }
+    default:
+      return "none";
+  }
+}

package/src/lib/spacing.ts

@@ -0,0 +1,48 @@
+import type { Size } from "../types";
+
+export type Spacing = Size | "0";
+
+export interface PaddingProps {
+  p?: Spacing; // all sides
+  pb?: Spacing; // bottom only
+  pl?: Spacing; // left only
+  pr?: Spacing; // right only
+  pt?: Spacing; // top only
+  px?: Spacing; // left + right
+  py?: Spacing; // top + bottom
+}
+
+export interface MarginProps {
+  m?: Spacing; // all sides
+  mb?: Spacing; // bottom only
+  ml?: Spacing; // left only
+  mr?: Spacing; // right only
+  mt?: Spacing; // top only
+  mx?: Spacing; // left + right
+  my?: Spacing; // top + bottom
+}
+
+export interface SpacingProps extends PaddingProps, MarginProps {}
+
+// Extracts spacing props from a component's props
+export function extractSpacingProps<T extends SpacingProps>(props: T) {
+  const { p, px, py, pt, pr, pb, pl, m, mx, my, mt, mr, mb, ml, ...rest } =
+    props;
+
+  const filterUndefined = (obj: Record<string, Spacing | undefined>) =>
+    Object.fromEntries(
+      Object.entries(obj).filter(([, v]) => v !== undefined)
+    ) as Partial<SpacingProps>;
+
+  const padding = filterUndefined({ p, px, py, pt, pr, pb, pl });
+  const margin = filterUndefined({ m, mx, my, mt, mr, mb, ml });
+  const spacing = { ...padding, ...margin };
+  return { padding, margin, spacing, nonSpacing: rest as T };
+}
+
+// spacing classes
+export function getSpacingClasses(props: SpacingProps): string[] {
+  return Object.entries(props)
+    .filter(([, value]) => value !== undefined)
+    .map(([key, value]) => `${key}-${value}`);
+}

package/src/styles/border.css

@@ -0,0 +1,180 @@
+:root {
+  --naut-border-width-sm: 0.031rem;
+  --naut-border-width-md: 0.063rem;
+  --naut-border-width-lg: 0.125rem;
+  --naut-border-width-xl: 0.195rem;
+}
+
+.border {
+  border-color: var(--naut-color-border);
+  border-style: solid;
+  border-width: 0;
+}
+
+/* Global Border Widths */
+.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);
+}
+
+/* Global Border Styles */
+.border-solid {
+  border-style: solid;
+}
+
+.border-dashed {
+  border-style: dashed;
+}
+
+.border-dotted {
+  border-style: dotted;
+}
+
+/* Side Border Widths */
+
+/* Top */
+.border-top-sm {
+  border-top-color: var(--naut-color-border-top, var(--naut-color-border));
+  border-top-width: var(--naut-border-width-sm);
+}
+
+.border-top-md {
+  border-top-color: var(--naut-color-border-top, var(--naut-color-border));
+  border-top-width: var(--naut-border-width-md);
+}
+
+.border-top-lg {
+  border-top-color: var(--naut-color-border-top, var(--naut-color-border));
+  border-top-width: var(--naut-border-width-lg);
+}
+
+.border-top-xl {
+  border-top-color: var(--naut-color-border-top, var(--naut-color-border));
+  border-top-width: var(--naut-border-width-xl);
+}
+
+.border-top-solid {
+  border-top-style: solid;
+}
+
+.border-top-dashed {
+  border-top-style: dashed;
+}
+
+.border-top-dotted {
+  border-top-style: dotted;
+}
+
+/* Right */
+.border-right-sm {
+  border-right-color: var(--naut-color-border-right, var(--naut-color-border));
+  border-right-width: var(--naut-border-width-sm);
+}
+
+.border-right-md {
+  border-right-color: var(--naut-color-border-right, var(--naut-color-border));
+  border-right-width: var(--naut-border-width-md);
+}
+
+.border-right-lg {
+  border-right-color: var(--naut-color-border-right, var(--naut-color-border));
+  border-right-width: var(--naut-border-width-lg);
+}
+
+.border-right-xl {
+  border-right-color: var(--naut-color-border-right, var(--naut-color-border));
+  border-right-width: var(--naut-border-width-xl);
+}
+
+.border-right-solid {
+  border-right-style: solid;
+}
+
+.border-right-dashed {
+  border-right-style: dashed;
+}
+
+.border-right-dotted {
+  border-right-style: dotted;
+}
+
+/* Bottom */
+.border-bottom-sm {
+  border-bottom-color: var(--naut-color-border-bottom,
+      var(--naut-color-border));
+  border-bottom-width: var(--naut-border-width-sm);
+}
+
+.border-bottom-md {
+  border-bottom-color: var(--naut-color-border-bottom,
+      var(--naut-color-border));
+  border-bottom-width: var(--naut-border-width-md);
+}
+
+.border-bottom-lg {
+  border-bottom-color: var(--naut-color-border-bottom,
+      var(--naut-color-border));
+  border-bottom-width: var(--naut-border-width-lg);
+}
+
+.border-bottom-xl {
+  border-bottom-color: var(--naut-color-border-bottom,
+      var(--naut-color-border));
+  border-bottom-width: var(--naut-border-width-xl);
+}
+
+.border-bottom-solid {
+  border-bottom-style: solid;
+}
+
+.border-bottom-dashed {
+  border-bottom-style: dashed;
+}
+
+.border-bottom-dotted {
+  border-bottom-style: dotted;
+}
+
+/* Left */
+.border-left-sm {
+  border-left-color: var(--naut-color-border-left, var(--naut-color-border));
+  border-left-width: var(--naut-border-width-sm);
+}
+
+.border-left-md {
+  border-left-color: var(--naut-color-border-left, var(--naut-color-border));
+  border-left-width: var(--naut-border-width-md);
+}
+
+.border-left-lg {
+  border-left-color: var(--naut-color-border-left, var(--naut-color-border));
+  border-left-width: var(--naut-border-width-lg);
+}
+
+.border-left-xl {
+  border-left-color: var(--naut-color-border-left, var(--naut-color-border));
+  border-left-width: var(--naut-border-width-xl);
+}
+
+.border-left-solid {
+  border-left-style: solid;
+}
+
+.border-left-dashed {
+  border-left-style: dashed;
+}
+
+.border-left-dotted {
+  border-left-style: dotted;
+}