@nautui/core 0.1.0

package/src/components/Flow.astro

@@ -0,0 +1,119 @@
+---
+import { Base, Responsive, Size } from "../types";
+
+type Direction = "left" | "center" | "right";
+type ResponsiveDirection = {
+  [key in Responsive]?: Direction;
+};
+
+export interface FlowProps extends Base {
+  direction?: Direction | ResponsiveDirection;
+  maxWidth?: Size;
+}
+
+const {
+  class: className,
+  direction = "left",
+  maxWidth,
+  ...rest
+} = Astro.props as FlowProps;
+const dir = typeof direction === "string" ? { base: direction } : direction;
+---
+
+<div
+  class:list={[
+    "naut-flow",
+    dir.base && `${dir.base}`,
+    dir.sm && `sm-${dir.sm}`,
+    dir.md && `md-${dir.md}`,
+    dir.lg && `lg-${dir.lg}`,
+    dir.xl && `xl-${dir.xl}`,
+    maxWidth && `max-w max-w-${maxWidth}`,
+    className
+  ]}
+  {...rest}
+>
+  <slot />
+</div>
+<style>
+  .naut-flow {
+    &.left {
+      text-align: left;
+    }
+    &.center {
+      text-align: center;
+    }
+    &.right {
+      text-align: right;
+    }
+
+    &.max-w {
+      margin-right: auto;
+      margin-left: auto;
+    }
+
+    &.max-w-sm {
+      max-width: 640px;
+    }
+
+    &.max-w-md {
+      max-width: 768px;
+    }
+
+    &.max-w-lg {
+      max-width: 1024px;
+    }
+
+    &.max-w-xl {
+      max-width: 1280px;
+    }
+
+    @media only screen and (max-width: 817px) {
+      &.sm-left {
+        text-align: left;
+      }
+      &.sm-center {
+        text-align: center;
+      }
+      &.sm-right {
+        text-align: right;
+      }
+    }
+
+    @media only screen and (min-width: 818px) and (max-width: 1041px) {
+      &.md-left {
+        text-align: left;
+      }
+      &.md-center {
+        text-align: center;
+      }
+      &.md-right {
+        text-align: right;
+      }
+    }
+
+    @media only screen and (min-width: 1042px) {
+      &.lg-left {
+        text-align: left;
+      }
+      &.lg-center {
+        text-align: center;
+      }
+      &.lg-right {
+        text-align: right;
+      }
+    }
+
+    @media only screen and (min-width: 1250px) {
+      &.xl-left {
+        text-align: left;
+      }
+      &.xl-center {
+        text-align: center;
+      }
+      &.xl-right {
+        text-align: right;
+      }
+    }
+  }
+</style>

package/src/components/Grid.astro

@@ -0,0 +1,335 @@
+---
+import "../styles/border.css";
+import "../styles/spacing/gap.css";
+import { Border, createBorder } from "../lib/border";
+import type { Base, Gap, Radius, Responsive } from "../types";
+
+export type Columns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+
+export type ResponsiveColumns = {
+  [key in Responsive]?: Columns;
+};
+
+export interface GridProps extends Base {
+  border?: Border;
+  columns?: Columns | ResponsiveColumns;
+  gap?: Gap;
+  radius?: Radius;
+}
+
+const {
+  class: className,
+  columns = 12,
+  gap = "md",
+  bordered = false,
+  border,
+  radius,
+  ...rest
+} = Astro.props as GridProps;
+
+const col = typeof columns === "number" ? { base: columns } : columns;
+const config = typeof border === "string" ? { width: border } : border || {};
+const { borderClasses, borderColors } = createBorder(config);
+---
+
+<div
+  class:list={[
+    "naut-grid",
+    `gap-${gap}`,
+    col?.base && `columns-${col.base}`,
+    col?.sm && `sm-columns-${col.sm}`,
+    col?.md && `md-columns-${col.md}`,
+    col?.lg && `lg-columns-${col.lg}`,
+    col?.xl && `xl-columns-${col.xl}`,
+    bordered && "bordered",
+    radius && `radius radius-${radius}`,
+    ...borderClasses,
+    className
+  ]}
+  {...rest}
+>
+  <slot />
+</div>
+
+<style define:vars={{ ...borderColors }}>
+  .naut-grid {
+    display: grid;
+
+    &.border {
+      gap: 1px;
+      background-color: var(--naut-color-border);
+    }
+
+    /* Radius */
+    &.radius {
+      overflow: hidden;
+    }
+
+    &.radius-sm {
+      border-radius: var(--naut-border-radius-sm);
+    }
+    &.radius-md {
+      border-radius: var(--naut-border-radius-md);
+    }
+    &.radius-lg {
+      border-radius: var(--naut-border-radius-lg);
+    }
+    &.radius-xl {
+      border-radius: var(--naut-border-radius-xl);
+    }
+
+    /* === columns === */
+
+    &.columns-1 {
+      grid-template-columns: repeat(1, 1fr);
+    }
+
+    &.columns-2 {
+      grid-template-columns: repeat(2, 1fr);
+    }
+
+    &.columns-3 {
+      grid-template-columns: repeat(3, 1fr);
+    }
+
+    &.columns-4 {
+      grid-template-columns: repeat(4, 1fr);
+    }
+
+    &.columns-5 {
+      grid-template-columns: repeat(5, 1fr);
+    }
+
+    &.columns-6 {
+      grid-template-columns: repeat(6, 1fr);
+    }
+
+    &.columns-7 {
+      grid-template-columns: repeat(7, 1fr);
+    }
+
+    &.columns-8 {
+      grid-template-columns: repeat(8, 1fr);
+    }
+
+    &.columns-9 {
+      grid-template-columns: repeat(9, 1fr);
+    }
+
+    &.columns-10 {
+      grid-template-columns: repeat(10, 1fr);
+    }
+
+    &.columns-11 {
+      grid-template-columns: repeat(11, 1fr);
+    }
+
+    &.columns-12 {
+      grid-template-columns: repeat(12, 1fr);
+    }
+
+    @media only screen and (max-width: 817px) {
+      &.sm-columns-1 {
+        grid-template-columns: repeat(1, 1fr);
+      }
+
+      &.sm-columns-2 {
+        grid-template-columns: repeat(2, 1fr);
+      }
+
+      &.sm-columns-3 {
+        grid-template-columns: repeat(3, 1fr);
+      }
+
+      &.sm-columns-4 {
+        grid-template-columns: repeat(4, 1fr);
+      }
+
+      &.sm-columns-5 {
+        grid-template-columns: repeat(5, 1fr);
+      }
+
+      &.sm-columns-6 {
+        grid-template-columns: repeat(6, 1fr);
+      }
+
+      &.sm-columns-7 {
+        grid-template-columns: repeat(7, 1fr);
+      }
+
+      &.sm-columns-8 {
+        grid-template-columns: repeat(8, 1fr);
+      }
+
+      &.sm-columns-9 {
+        grid-template-columns: repeat(9, 1fr);
+      }
+
+      &.sm-columns-10 {
+        grid-template-columns: repeat(10, 1fr);
+      }
+
+      &.sm-columns-11 {
+        grid-template-columns: repeat(11, 1fr);
+      }
+
+      &.sm-columns-12 {
+        grid-template-columns: repeat(12, 1fr);
+      }
+    }
+
+    @media only screen and (min-width: 818px) and (max-width: 1041px) {
+      &.md-columns-1 {
+        grid-template-columns: repeat(1, 1fr);
+      }
+
+      &.md-columns-2 {
+        grid-template-columns: repeat(2, 1fr);
+      }
+
+      &.md-columns-3 {
+        grid-template-columns: repeat(3, 1fr);
+      }
+
+      &.md-columns-4 {
+        grid-template-columns: repeat(4, 1fr);
+      }
+
+      &.md-columns-5 {
+        grid-template-columns: repeat(5, 1fr);
+      }
+
+      &.md-columns-6 {
+        grid-template-columns: repeat(6, 1fr);
+      }
+
+      &.md-columns-7 {
+        grid-template-columns: repeat(7, 1fr);
+      }
+
+      &.md-columns-8 {
+        grid-template-columns: repeat(8, 1fr);
+      }
+
+      &.md-columns-9 {
+        grid-template-columns: repeat(9, 1fr);
+      }
+
+      &.md-columns-10 {
+        grid-template-columns: repeat(10, 1fr);
+      }
+
+      &.md-columns-11 {
+        grid-template-columns: repeat(11, 1fr);
+      }
+
+      &.md-columns-12 {
+        grid-template-columns: repeat(12, 1fr);
+      }
+    }
+
+    @media only screen and (min-width: 1042px) {
+      &.lg-columns-1 {
+        grid-template-columns: repeat(1, 1fr);
+      }
+
+      &.lg-columns-2 {
+        grid-template-columns: repeat(2, 1fr);
+      }
+
+      &.lg-columns-3 {
+        grid-template-columns: repeat(3, 1fr);
+      }
+
+      &.lg-columns-4 {
+        grid-template-columns: repeat(4, 1fr);
+      }
+
+      &.lg-columns-5 {
+        grid-template-columns: repeat(5, 1fr);
+      }
+
+      &.lg-columns-6 {
+        grid-template-columns: repeat(6, 1fr);
+      }
+
+      &.lg-columns-7 {
+        grid-template-columns: repeat(7, 1fr);
+      }
+
+      &.lg-columns-8 {
+        grid-template-columns: repeat(8, 1fr);
+      }
+
+      &.lg-columns-9 {
+        grid-template-columns: repeat(9, 1fr);
+      }
+
+      &.lg-columns-10 {
+        grid-template-columns: repeat(10, 1fr);
+      }
+
+      &.lg-columns-11 {
+        grid-template-columns: repeat(11, 1fr);
+      }
+
+      &.lg-columns-12 {
+        grid-template-columns: repeat(12, 1fr);
+      }
+    }
+
+    @media only screen and (min-width: 1250px) {
+      &.xl-columns-1 {
+        grid-template-columns: repeat(1, 1fr);
+      }
+
+      &.xl-columns-2 {
+        grid-template-columns: repeat(2, 1fr);
+      }
+
+      &.xl-columns-3 {
+        grid-template-columns: repeat(3, 1fr);
+      }
+
+      &.xl-columns-4 {
+        grid-template-columns: repeat(4, 1fr);
+      }
+
+      &.xl-columns-5 {
+        grid-template-columns: repeat(5, 1fr);
+      }
+
+      &.xl-columns-6 {
+        grid-template-columns: repeat(6, 1fr);
+      }
+
+      &.xl-columns-7 {
+        grid-template-columns: repeat(7, 1fr);
+      }
+
+      &.xl-columns-8 {
+        grid-template-columns: repeat(8, 1fr);
+      }
+
+      &.xl-columns-9 {
+        grid-template-columns: repeat(9, 1fr);
+      }
+
+      &.xl-columns-10 {
+        grid-template-columns: repeat(10, 1fr);
+      }
+
+      &.xl-columns-11 {
+        grid-template-columns: repeat(11, 1fr);
+      }
+
+      &.xl-columns-12 {
+        grid-template-columns: repeat(12, 1fr);
+      }
+    }
+  }
+
+  :global(.naut-grid.border > .naut-grid-item) {
+    background-color: var(--naut-color-base);
+  }
+</style>

package/src/components/GridItem.astro

@@ -0,0 +1,225 @@
+---
+import type { Base } from "../types";
+import { type Columns, ResponsiveColumns } from "./Grid.astro";
+
+export interface GridItemProps extends Base {
+  span?: Columns | ResponsiveColumns;
+}
+
+const { class: className, span, ...rest } = Astro.props as GridItemProps;
+
+const col = typeof span === "number" ? { base: span } : span || {};
+---
+
+<div
+  class:list={[
+    "naut-grid-item",
+    col?.base && `span-${col.base}`,
+    col?.sm && `sm-span-${col.sm}`,
+    col?.md && `md-span-${col.md}`,
+    col?.lg && `lg-span-${col.lg}`,
+    col?.xl && `xl-span-${col.xl}`,
+    className
+  ]}
+  {...rest}
+>
+  <slot />
+</div>
+
+<style>
+  .naut-grid-item {
+    grid-column: auto;
+    &.span-1 {
+      grid-column: span 1 / span 1;
+    }
+    &.span-2 {
+      grid-column: span 2 / span 2;
+    }
+    &.span-3 {
+      grid-column: span 3 / span 3;
+    }
+    &.span-4 {
+      grid-column: span 4 / span 4;
+    }
+    &.span-5 {
+      grid-column: span 5 / span 5;
+    }
+    &.span-6 {
+      grid-column: span 6 / span 6;
+    }
+    &.span-7 {
+      grid-column: span 7 / span 7;
+    }
+    &.span-8 {
+      grid-column: span 8 / span 8;
+    }
+    &.span-9 {
+      grid-column: span 9 / span 9;
+    }
+    &.span-10 {
+      grid-column: span 10 / span 10;
+    }
+    &.span-11 {
+      grid-column: span 11 / span 11;
+    }
+    &.span-12 {
+      grid-column: span 12 / span 12;
+    }
+
+    @media only screen and (max-width: 817px) {
+      &.sm-span-1 {
+        grid-column: span 1 / span 1;
+      }
+      &.sm-span-2 {
+        grid-column: span 2 / span 2;
+      }
+      &.sm-span-3 {
+        grid-column: span 3 / span 3;
+      }
+      &.sm-span-4 {
+        grid-column: span 4 / span 4;
+      }
+      &.sm-span-5 {
+        grid-column: span 5 / span 5;
+      }
+      &.sm-span-6 {
+        grid-column: span 6 / span 6;
+      }
+      &.sm-span-7 {
+        grid-column: span 7 / span 7;
+      }
+      &.sm-span-8 {
+        grid-column: span 8 / span 8;
+      }
+      &.sm-span-9 {
+        grid-column: span 9 / span 9;
+      }
+      &.sm-span-10 {
+        grid-column: span 10 / span 10;
+      }
+      &.sm-span-11 {
+        grid-column: span 11 / span 11;
+      }
+      &.sm-span-12 {
+        grid-column: span 12 / span 12;
+      }
+    }
+
+    @media only screen and (min-width: 818px) and (max-width: 1041px) {
+      &.md-span-1 {
+        grid-column: span 1 / span 1;
+      }
+      &.md-span-2 {
+        grid-column: span 2 / span 2;
+      }
+      &.md-span-3 {
+        grid-column: span 3 / span 3;
+      }
+      &.md-span-4 {
+        grid-column: span 4 / span 4;
+      }
+      &.md-span-5 {
+        grid-column: span 5 / span 5;
+      }
+      &.md-span-6 {
+        grid-column: span 6 / span 6;
+      }
+      &.md-span-7 {
+        grid-column: span 7 / span 7;
+      }
+      &.md-span-8 {
+        grid-column: span 8 / span 8;
+      }
+      &.md-span-9 {
+        grid-column: span 9 / span 9;
+      }
+      &.md-span-10 {
+        grid-column: span 10 / span 10;
+      }
+      &.md-span-11 {
+        grid-column: span 11 / span 11;
+      }
+      &.md-span-12 {
+        grid-column: span 12 / span 12;
+      }
+    }
+
+    @media only screen and (min-width: 1042px) {
+      &.lg-span-1 {
+        grid-column: span 1 / span 1;
+      }
+      &.lg-span-2 {
+        grid-column: span 2 / span 2;
+      }
+      &.lg-span-3 {
+        grid-column: span 3 / span 3;
+      }
+      &.lg-span-4 {
+        grid-column: span 4 / span 4;
+      }
+      &.lg-span-5 {
+        grid-column: span 5 / span 5;
+      }
+      &.lg-span-6 {
+        grid-column: span 6 / span 6;
+      }
+      &.lg-span-7 {
+        grid-column: span 7 / span 7;
+      }
+      &.lg-span-8 {
+        grid-column: span 8 / span 8;
+      }
+      &.lg-span-9 {
+        grid-column: span 9 / span 9;
+      }
+      &.lg-span-10 {
+        grid-column: span 10 / span 10;
+      }
+      &.lg-span-11 {
+        grid-column: span 11 / span 11;
+      }
+      &.lg-span-12 {
+        grid-column: span 12 / span 12;
+      }
+    }
+
+    @media only screen and (min-width: 1250px) {
+      &.xl-span-1 {
+        grid-column: span 1 / span 1;
+      }
+      &.xl-span-2 {
+        grid-column: span 2 / span 2;
+      }
+      &.xl-span-3 {
+        grid-column: span 3 / span 3;
+      }
+      &.xl-span-4 {
+        grid-column: span 4 / span 4;
+      }
+      &.xl-span-5 {
+        grid-column: span 5 / span 5;
+      }
+      &.xl-span-6 {
+        grid-column: span 6 / span 6;
+      }
+      &.xl-span-7 {
+        grid-column: span 7 / span 7;
+      }
+      &.xl-span-8 {
+        grid-column: span 8 / span 8;
+      }
+      &.xl-span-9 {
+        grid-column: span 9 / span 9;
+      }
+      &.xl-span-10 {
+        grid-column: span 10 / span 10;
+      }
+      &.xl-span-11 {
+        grid-column: span 11 / span 11;
+      }
+      &.xl-span-12 {
+        grid-column: span 12 / span 12;
+      }
+    }
+  }
+</style>