@nautui/core 0.1.0

package/src/components/Section.astro

@@ -0,0 +1,108 @@
+---
+import "../styles/spacing/padding.css";
+import "../styles/border.css";
+import { Border, createBorder } from "../lib/border";
+import {
+  extractSpacingProps,
+  getSpacingClasses,
+  PaddingProps,
+} from "../lib/spacing";
+import type { Base } from "../types";
+
+export interface SectionProps extends Base, PaddingProps {
+  as?: "div" | "section" | "article" | "main" | "header" | "footer";
+  border?: Border;
+  dark?: boolean;
+}
+
+const { padding, nonSpacing } = extractSpacingProps(
+  Astro.props as SectionProps
+);
+
+const { class: className, border, cross, dark = false, ...rest } = nonSpacing;
+const p = Object.keys(padding).length === 0 ? "md" : padding.p;
+const paddingClasses = getSpacingClasses({ ...padding, p });
+
+const borderConfig =
+  typeof border === "string" ? { width: border } : border || {};
+const { borderClasses, borderColors } = createBorder(borderConfig);
+---
+
+<section
+  class:list={[
+    "naut-section",
+    dark && "dark",
+    ...borderClasses,
+    className,
+  ]}
+  {...rest}
+>
+  <slot name="background" />
+  <slot name="before" />
+  <div class="naut-section--wrapper">
+    <div class="naut-section--left"><slot name="left" /></div>
+    <div class="naut-section--center">
+      <div class:list={["naut-section--content", ...paddingClasses]}>
+        <slot />
+      </div>
+    </div>
+    <div class="naut-section--right"><slot name="right" /></div>
+  </div>
+  <slot name="after" />
+</section>
+
+<style define:vars={{ ...borderColors }}>
+  .naut-section {
+    position: relative;
+
+    .naut-section--wrapper {
+      position: relative;
+      z-index: 1;
+      display: flex;
+
+      .naut-section--left,
+      .naut-section--right {
+        position: relative;
+        display: flex;
+        @media only screen and (min-width: 576px) {
+          flex-grow: 1;
+        }
+      }
+
+      .naut-section--left {
+        justify-content: flex-end;
+      }
+
+      .naut-section--right {
+        justify-content: flex-start;
+      }
+
+      .naut-section--center {
+        flex: 1;
+        overflow: hidden;
+
+        /*Mobile*/
+        @media only screen and (min-width: 576px) {
+          flex: 1 1 100%;
+          max-width: 576px;
+          margin: 0 auto;
+        }
+
+        /* 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;
+        }
+      }
+    }
+  }
+</style>

package/src/components/Space.astro

@@ -0,0 +1,400 @@
+---
+import "../styles/spacing/display.css";
+import { Base, Responsive, Size } from "../types";
+
+type SpaceSize =
+  | "auto"
+  | Size
+  | "display"
+  | "display-lg"
+  | "display-xl"
+  | "full";
+
+type ResponsiveSize = {
+  [key in Responsive]?: SpaceSize;
+};
+
+export interface SpaceProps extends Base {
+  grow?: boolean;
+  orientation?: "horizontal" | "vertical";
+  size?: ResponsiveSize;
+}
+
+const {
+  class: className,
+  orientation = "vertical",
+  grow = false,
+  size = "md",
+} = Astro.props as SpaceProps;
+const measure = orientation === "vertical" ? "height" : "width";
+const spaceSize =
+  typeof size === "string" ? ({ base: size } as ResponsiveSize) : size;
+const classlist = [
+  "naut-space",
+  orientation,
+  spaceSize?.base && `size-${spaceSize.base}`,
+  spaceSize?.sm && `sm-size-${spaceSize.sm}`,
+  spaceSize?.md && `md-size-${spaceSize.md}`,
+  spaceSize?.lg && `lg-size-${spaceSize.lg}`,
+  spaceSize?.xl && `xl-size-${spaceSize.xl}`,
+  grow && "grow",
+];
+---
+
+<div class:list={classlist}><slot /></div>
+
+<style>
+  .naut-space {
+    position: relative;
+    box-sizing: border-box;
+
+    &.grow {
+      flex-grow: 1;
+    }
+
+    &:not(.horizontal) {
+      &.size-auto {
+        height: auto;
+      }
+
+      &.size-sm {
+        height: var(--naut-spacing-sm);
+      }
+
+      &.size-md {
+        height: var(--naut-spacing-md);
+      }
+
+      &.size-lg {
+        height: var(--naut-spacing-lg);
+      }
+
+      &.size-xl {
+        height: var(--naut-spacing-xl);
+      }
+
+      &.size-display {
+        height: var(--naut-spacing-display);
+      }
+
+      &.size-display-lg {
+        height: var(--naut-spacing-display-lg);
+      }
+
+      &.size-display-xl {
+        height: var(--naut-spacing-display-xl);
+      }
+
+      @media only screen and (max-width: 817px) {
+        &.sm-size-auto {
+          height: auto;
+        }
+
+        &.sm-size-sm {
+          height: var(--naut-spacing-sm);
+        }
+
+        &.sm-size-md {
+          height: var(--naut-spacing-md);
+        }
+
+        &.sm-size-lg {
+          height: var(--naut-spacing-lg);
+        }
+
+        &.sm-size-xl {
+          height: var(--naut-spacing-xl);
+        }
+
+        &.sm-size-display {
+          height: var(--naut-spacing-display);
+        }
+
+        &.sm-size-display-lg {
+          height: var(--naut-spacing-display-lg);
+        }
+
+        &.sm-size-display-xl {
+          height: var(--naut-spacing-display-xl);
+        }
+      }
+
+      @media only screen and (min-width: 818px) and (max-width: 1041px) {
+        &.md-size-auto {
+          height: auto;
+        }
+
+        &.md-size-sm {
+          height: var(--naut-spacing-sm);
+        }
+
+        &.md-size-md {
+          height: var(--naut-spacing-md);
+        }
+
+        &.md-size-lg {
+          height: var(--naut-spacing-lg);
+        }
+
+        &.md-size-xl {
+          height: var(--naut-spacing-xl);
+        }
+
+        &.md-size-display {
+          height: var(--naut-spacing-display);
+        }
+
+        &.md-size-display-lg {
+          height: var(--naut-spacing-display-lg);
+        }
+
+        &.md-size-display-xl {
+          height: var(--naut-spacing-display-xl);
+        }
+      }
+
+      @media only screen and (min-width: 1042px) {
+        &.lg-size-auto {
+          height: auto;
+        }
+
+        &.lg-size-sm {
+          height: var(--naut-spacing-sm);
+        }
+
+        &.lg-size-md {
+          height: var(--naut-spacing-md);
+        }
+
+        &.lg-size-lg {
+          height: var(--naut-spacing-lg);
+        }
+
+        &.lg-size-xl {
+          height: var(--naut-spacing-xl);
+        }
+
+        &.lg-size-display {
+          height: var(--naut-spacing-display);
+        }
+
+        &.lg-size-display-lg {
+          height: var(--naut-spacing-display-lg);
+        }
+
+        &.lg-size-display-xl {
+          height: var(--naut-spacing-display-xl);
+        }
+      }
+
+      @media only screen and (min-width: 1250px) {
+        &.xl-size-auto {
+          height: auto;
+        }
+
+        &.xl-size-sm {
+          height: var(--naut-spacing-sm);
+        }
+
+        &.xl-size-md {
+          height: var(--naut-spacing-md);
+        }
+
+        &.xl-size-lg {
+          height: var(--naut-spacing-lg);
+        }
+
+        &.xl-size-xl {
+          height: var(--naut-spacing-xl);
+        }
+
+        &.xl-size-display {
+          height: var(--naut-spacing-display);
+        }
+
+        &.xl-size-display-lg {
+          height: var(--naut-spacing-display-lg);
+        }
+
+        &.xl-size-display-xl {
+          height: var(--naut-spacing-display-xl);
+        }
+      }
+    }
+
+    &.horizontal {
+      display: inline-block;
+      &.size-auto {
+        width: auto;
+      }
+
+      &.size-full {
+        width: 100%;
+      }
+
+      &.size-sm {
+        width: var(--naut-spacing-sm);
+      }
+
+      &.size-md {
+        width: var(--naut-spacing-md);
+      }
+
+      &.size-lg {
+        width: var(--naut-spacing-lg);
+      }
+
+      &.size-xl {
+        width: var(--naut-spacing-xl);
+      }
+
+      &.size-display {
+        width: var(--naut-spacing-display);
+      }
+
+      &.size-display-lg {
+        width: var(--naut-spacing-display-lg);
+      }
+
+      &.size-display-xl {
+        width: var(--naut-spacing-display-xl);
+      }
+
+      @media only screen and (max-width: 817px) {
+        &.sm-size-auto {
+          width: auto;
+        }
+
+        &.sm-size-sm {
+          width: var(--naut-spacing-sm);
+        }
+
+        &.sm-size-md {
+          width: var(--naut-spacing-md);
+        }
+
+        &.sm-size-lg {
+          width: var(--naut-spacing-lg);
+        }
+
+        &.sm-size-xl {
+          width: var(--naut-spacing-xl);
+        }
+
+        &.sm-size-display {
+          width: var(--naut-spacing-display);
+        }
+
+        &.sm-size-display-lg {
+          width: var(--naut-spacing-display-lg);
+        }
+
+        &.sm-size-display-xl {
+          width: var(--naut-spacing-display-xl);
+        }
+      }
+
+      @media only screen and (min-width: 818px) and (max-width: 1041px) {
+        &.md-size-auto {
+          width: auto;
+        }
+
+        &.md-size-sm {
+          width: var(--naut-spacing-sm);
+        }
+
+        &.md-size-md {
+          width: var(--naut-spacing-md);
+        }
+
+        &.md-size-lg {
+          width: var(--naut-spacing-lg);
+        }
+
+        &.md-size-xl {
+          width: var(--naut-spacing-xl);
+        }
+
+        &.md-size-display {
+          width: var(--naut-spacing-display);
+        }
+
+        &.md-size-display-lg {
+          width: var(--naut-spacing-display-lg);
+        }
+
+        &.md-size-display-xl {
+          width: var(--naut-spacing-display-xl);
+        }
+      }
+
+      @media only screen and (min-width: 1042px) {
+        &.lg-size-auto {
+          width: auto;
+        }
+
+        &.lg-size-sm {
+          width: var(--naut-spacing-sm);
+        }
+
+        &.lg-size-md {
+          width: var(--naut-spacing-md);
+        }
+
+        &.lg-size-lg {
+          width: var(--naut-spacing-lg);
+        }
+
+        &.lg-size-xl {
+          width: var(--naut-spacing-xl);
+        }
+
+        &.lg-size-display {
+          width: var(--naut-spacing-display);
+        }
+
+        &.lg-size-display-lg {
+          width: var(--naut-spacing-display-lg);
+        }
+
+        &.lg-size-display-xl {
+          width: var(--naut-spacing-display-xl);
+        }
+      }
+
+      @media only screen and (min-width: 1250px) {
+        &.xl-size-auto {
+          width: auto;
+        }
+
+        &.xl-size-sm {
+          width: var(--naut-spacing-sm);
+        }
+
+        &.xl-size-md {
+          width: var(--naut-spacing-md);
+        }
+
+        &.xl-size-lg {
+          width: var(--naut-spacing-lg);
+        }
+
+        &.xl-size-xl {
+          width: var(--naut-spacing-xl);
+        }
+
+        &.xl-size-display {
+          width: var(--naut-spacing-display);
+        }
+
+        &.xl-size-display-lg {
+          width: var(--naut-spacing-display-lg);
+        }
+
+        &.xl-size-display-xl {
+          width: var(--naut-spacing-display-xl);
+        }
+      }
+    }
+  }
+</style>