@troychaplin/parlour-ui 0.1.0

package/dist/components/Container/styles.scss

@@ -0,0 +1,126 @@
+.parlour-container > * {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.parlour-container > * + * {
+  margin-block-start: var(--parlour--spacing-medium);
+  margin-block-end: 0;
+}
+
+.parlour-container > .has-global-padding,
+.has-global-padding > .parlour-container.alignfull > .has-global-padding {
+  padding-left: 0;
+  padding-right: 0;
+}
+.parlour-container > .has-global-padding > *:first-child,
+.has-global-padding > .parlour-container.alignfull > .has-global-padding > *:first-child {
+  margin-top: 0;
+}
+.parlour-container > .has-global-padding > *:last-child,
+.has-global-padding > .parlour-container.alignfull > .has-global-padding > *:last-child {
+  margin-bottom: 0;
+}
+
+.parlour-container.aligncontent,
+.parlour-container.alignwide,
+.parlour-container.alignfull {
+  padding-right: var(--parlour--spacing-3-x-large);
+  padding-left: var(--parlour--spacing-3-x-large);
+}
+@media (width > 768px) {
+  .parlour-container.aligncontent,
+  .parlour-container.alignwide,
+  .parlour-container.alignfull {
+    padding-right: var(--parlour--spacing-4-x-large);
+    padding-left: var(--parlour--spacing-4-x-large);
+  }
+}
+
+.parlour-main > div > .parlour-container--no-gap + .parlour-container--no-gap {
+  margin-top: var(--parlour--spacing-2-x-large);
+}
+
+.parlour-main > div > .parlour-container--no-gap.alignfull + .parlour-container--no-gap.alignfull {
+  margin-top: 0;
+}
+
+.parlour-container--light,
+.parlour-container--medium,
+.parlour-container--dark,
+.parlour-container--white {
+  padding-block: var(--parlour--spacing-5-x-large);
+}
+
+.parlour-container--light {
+  background-color: var(--parlour--color-neutral-200);
+}
+
+.parlour-container--medium {
+  background-color: var(--parlour--color-neutral-900);
+  color: var(--parlour--color-white);
+}
+.parlour-container--medium h2,
+.parlour-container--medium h3,
+.parlour-container--medium h4,
+.parlour-container--medium h5,
+.parlour-container--medium h6 {
+  color: var(--parlour--color-white);
+}
+
+.parlour-container--dark {
+  background-color: var(--parlour--color-neutral-950);
+  color: var(--parlour--color-white);
+}
+.parlour-container--dark h2,
+.parlour-container--dark h3,
+.parlour-container--dark h4,
+.parlour-container--dark h5,
+.parlour-container--dark h6 {
+  color: var(--parlour--color-white);
+}
+
+.parlour-container--white {
+  background-color: var(--parlour--color-white);
+}
+
+.parlour-container--light,
+.parlour-container--white {
+  border: 1px solid var(--parlour--color-neutral-300);
+}
+.parlour-container--light.alignfull,
+.parlour-container--white.alignfull {
+  border-inline: none;
+}
+.parlour-container--light.alignfull + .parlour-container--has-border,
+.parlour-container--white.alignfull + .parlour-container--has-border {
+  border-top: none;
+}
+
+.parlour-container--full {
+  width: 100%;
+}
+
+.parlour-container--radius-sm:not(.alignfull) {
+  border-radius: var(--parlour--radius-sm);
+}
+
+.parlour-container--radius-md:not(.alignfull) {
+  border-radius: var(--parlour--radius-md);
+}
+
+.parlour-container--radius-lg:not(.alignfull) {
+  border-radius: var(--parlour--radius-lg);
+}
+
+.parlour-container--radius-xl:not(.alignfull) {
+  border-radius: var(--parlour--radius-xl);
+}
+
+.parlour-container--radius-full:not(.alignfull) {
+  border-radius: var(--parlour--radius-full);
+}
+
+.parlour-container--radius-none:not(.alignfull) {
+  border-radius: 0;
+}

package/dist/components/Figure/Figure.d.ts

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+type FigureSizeType = 'xs' | 'sm' | 'md' | 'lg' | 'full';
+type FigureAlignType = 'left' | 'right' | 'center' | 'none';
+export interface FigureProps {
+    children: React.ReactNode;
+    caption?: string;
+    size?: FigureSizeType;
+    align?: FigureAlignType;
+}
+export declare const Figure: ({ children, caption, size, align }: FigureProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=Figure.d.ts.map

package/dist/components/Figure/Figure.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Figure.d.ts","sourceRoot":"","sources":["../../../src/components/Figure/Figure.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,eAAe,CAAC;AAEvB,KAAK,cAAc,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AACzD,KAAK,eAAe,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE5D,MAAM,WAAW,WAAW;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,KAAK,CAAC,EAAE,eAAe,CAAC;CAC3B;AAED,eAAO,MAAM,MAAM,GAAI,oCAAsD,WAAW,sBAuBvF,CAAC"}

package/dist/components/Figure/index.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../_shared/rolldown-runtime-BocRIvOZ.cjs");let t=require("react");t=e.t(t,1);let n=require("react/jsx-runtime");var r=({children:e,caption:t,size:r=`full`,align:i=`none`})=>{let a=i===`left`?`alignleft`:i===`right`?`alignright`:``,o=[`parlour-figure`,`parlour-figure--${r}`,i===`none`?``:`parlour-figure--${i}`,a].filter(Boolean).join(` `);return(0,n.jsx)(`figure`,{className:o,children:(0,n.jsxs)(`div`,{className:`parlour-figure__inner`,children:[e,t&&(0,n.jsx)(`figcaption`,{className:`parlour-figure__caption`,children:t})]})})};exports.Figure=r;

package/dist/components/Figure/index.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+
+type FigureSizeType = 'xs' | 'sm' | 'md' | 'lg' | 'full';
+type FigureAlignType = 'left' | 'right' | 'center' | 'none';
+interface FigureProps {
+    children: React.ReactNode;
+    caption?: string;
+    size?: FigureSizeType;
+    align?: FigureAlignType;
+}
+declare const Figure: ({ children, caption, size, align }: FigureProps) => React.JSX.Element;
+
+export { Figure };
+export type { FigureProps };

package/dist/components/Figure/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Figure/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC"}

package/dist/components/Figure/index.mjs

@@ -0,0 +1,23 @@
+import "react";
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+//#region src/components/Figure/Figure.tsx
+var n = ({ children: n, caption: r, size: i = "full", align: a = "none" }) => {
+	let o = a === "left" ? "alignleft" : a === "right" ? "alignright" : "", s = [
+		"parlour-figure",
+		`parlour-figure--${i}`,
+		a === "none" ? "" : `parlour-figure--${a}`,
+		o
+	].filter(Boolean).join(" ");
+	return /* @__PURE__ */ e("figure", {
+		className: s,
+		children: /* @__PURE__ */ t("div", {
+			className: "parlour-figure__inner",
+			children: [n, r && /* @__PURE__ */ e("figcaption", {
+				className: "parlour-figure__caption",
+				children: r
+			})]
+		})
+	});
+};
+//#endregion
+export { n as Figure };

package/dist/components/Figure/styles.css

@@ -0,0 +1,78 @@
+.parlour-figure {
+  max-width: 100%;
+  margin: 0;
+}
+.parlour-figure img {
+  display: block;
+  width: 100%;
+  height: auto;
+}
+
+.parlour-figure--xs {
+  width: 320px;
+}
+
+.parlour-figure--sm {
+  width: 440px;
+}
+
+.parlour-figure--md {
+  width: 512px;
+}
+
+.parlour-figure--lg {
+  width: 48rem;
+}
+
+.parlour-figure--full {
+  width: 100%;
+}
+
+@media (width <= 768px) {
+  .parlour-figure--xs,
+  .parlour-figure--sm,
+  .parlour-figure--md,
+  .parlour-figure--lg {
+    width: 100%;
+  }
+}
+.parlour-figure--left {
+  margin: var(--parlour--spacing-medium) 0;
+}
+@media (width > 768px) {
+  .parlour-figure--left {
+    float: left;
+    clear: left;
+    margin-top: 0;
+    margin-right: var(--parlour--spacing-large);
+  }
+}
+
+.parlour-figure--right {
+  margin: var(--parlour--spacing-medium) 0;
+}
+@media (width > 768px) {
+  .parlour-figure--right {
+    float: right;
+    clear: right;
+    margin-top: 0;
+    margin-left: var(--parlour--spacing-large);
+  }
+}
+
+.parlour-figure--center {
+  margin: var(--parlour--spacing-medium) 0;
+}
+
+.parlour-figure__inner {
+  overflow: hidden;
+  border-radius: var(--parlour--radius-md);
+}
+
+.parlour-figure__caption {
+  background-color: var(--parlour--color-neutral-100);
+  padding: var(--parlour--spacing-small) var(--parlour--spacing-medium);
+  font-size: var(--parlour--font-size-medium);
+  font-style: italic;
+  color: var(--parlour--color-neutral-800);
+}

package/dist/components/Figure/styles.scss

@@ -0,0 +1,78 @@
+.parlour-figure {
+  max-width: 100%;
+  margin: 0;
+}
+.parlour-figure img {
+  display: block;
+  width: 100%;
+  height: auto;
+}
+
+.parlour-figure--xs {
+  width: 320px;
+}
+
+.parlour-figure--sm {
+  width: 440px;
+}
+
+.parlour-figure--md {
+  width: 512px;
+}
+
+.parlour-figure--lg {
+  width: 48rem;
+}
+
+.parlour-figure--full {
+  width: 100%;
+}
+
+@media (width <= 768px) {
+  .parlour-figure--xs,
+  .parlour-figure--sm,
+  .parlour-figure--md,
+  .parlour-figure--lg {
+    width: 100%;
+  }
+}
+.parlour-figure--left {
+  margin: var(--parlour--spacing-medium) 0;
+}
+@media (width > 768px) {
+  .parlour-figure--left {
+    float: left;
+    clear: left;
+    margin-top: 0;
+    margin-right: var(--parlour--spacing-large);
+  }
+}
+
+.parlour-figure--right {
+  margin: var(--parlour--spacing-medium) 0;
+}
+@media (width > 768px) {
+  .parlour-figure--right {
+    float: right;
+    clear: right;
+    margin-top: 0;
+    margin-left: var(--parlour--spacing-large);
+  }
+}
+
+.parlour-figure--center {
+  margin: var(--parlour--spacing-medium) 0;
+}
+
+.parlour-figure__inner {
+  overflow: hidden;
+  border-radius: var(--parlour--radius-md);
+}
+
+.parlour-figure__caption {
+  background-color: var(--parlour--color-neutral-100);
+  padding: var(--parlour--spacing-small) var(--parlour--spacing-medium);
+  font-size: var(--parlour--font-size-medium);
+  font-style: italic;
+  color: var(--parlour--color-neutral-800);
+}

package/dist/components/FlexGroup/FlexGroup.d.ts

@@ -0,0 +1,21 @@
+import { elementClasses, flexAlignClasses, flexJustifyClasses, maxWidthClasses, spacingClasses } from '../../utils/propClasses';
+type elementKeys = keyof typeof elementClasses;
+type flexJustifyKeys = keyof typeof flexJustifyClasses;
+type flexAlignKeys = keyof typeof flexAlignClasses;
+type spacingKeys = keyof typeof spacingClasses;
+type maxWidthKeys = keyof typeof maxWidthClasses;
+export interface FlexGroupProps extends React.HTMLAttributes<HTMLElement> {
+    children: React.ReactNode;
+    as?: elementKeys;
+    direction?: 'row' | 'column';
+    wrap?: 'wrap' | 'nowrap';
+    justify?: flexJustifyKeys;
+    align?: flexAlignKeys;
+    gap?: spacingKeys;
+    padding?: spacingKeys;
+    margin?: spacingKeys;
+    maxWidth?: maxWidthKeys;
+}
+export declare const FlexGroup: ({ children, as, direction, wrap, justify, align, gap, padding, margin, maxWidth, className, ...rest }: FlexGroupProps) => import('react').JSX.Element;
+export {};
+//# sourceMappingURL=FlexGroup.d.ts.map

package/dist/components/FlexGroup/FlexGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlexGroup.d.ts","sourceRoot":"","sources":["../../../src/components/FlexGroup/FlexGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,EACH,cAAc,EACd,gBAAgB,EAChB,kBAAkB,EAClB,eAAe,EACf,cAAc,EACjB,MAAM,yBAAyB,CAAC;AACjC,OAAO,eAAe,CAAC;AAEvB,KAAK,WAAW,GAAG,MAAM,OAAO,cAAc,CAAC;AAC/C,KAAK,eAAe,GAAG,MAAM,OAAO,kBAAkB,CAAC;AACvD,KAAK,aAAa,GAAG,MAAM,OAAO,gBAAgB,CAAC;AACnD,KAAK,WAAW,GAAG,MAAM,OAAO,cAAc,CAAC;AAC/C,KAAK,YAAY,GAAG,MAAM,OAAO,eAAe,CAAC;AAEjD,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IACrE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAC7B,IAAI,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,GAAG,CAAC,EAAE,WAAW,CAAC;IAClB,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,QAAQ,CAAC,EAAE,YAAY,CAAC;CAC3B;AAED,eAAO,MAAM,SAAS,GAAI,uGAavB,cAAc,gCAuBhB,CAAC"}

package/dist/components/FlexGroup/index.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../_shared/FlexGroup-CgPbyEha.cjs");exports.FlexGroup=e.t;

package/dist/components/FlexGroup/index.d.ts

@@ -0,0 +1,69 @@
+import * as react from 'react';
+
+declare const maxWidthClasses: {
+    alignsmall: string;
+    aligncontent: string;
+    alignwide: string;
+    alignfull: string;
+};
+declare const elementClasses: {
+    div: string;
+    section: string;
+    header: string;
+    main: string;
+    footer: string;
+    article: string;
+    nav: string;
+    aside: string;
+    ul: string;
+    ol: string;
+};
+declare const spacingClasses: {
+    '3-x-small': "3-x-small";
+    '2-x-small': "2-x-small";
+    'x-small': "x-small";
+    small: "small";
+    normal: "normal";
+    medium: "medium";
+    large: "large";
+    'x-large': "x-large";
+    '2-x-large': "2-x-large";
+    '3-x-large': "3-x-large";
+    '4-x-large': "4-x-large";
+    '5-x-large': "5-x-large";
+    none: string;
+};
+declare const flexJustifyClasses: {
+    start: string;
+    center: string;
+    end: string;
+    'space-between': string;
+};
+declare const flexAlignClasses: {
+    start: string;
+    center: string;
+    end: string;
+    stretch: string;
+};
+
+type elementKeys = keyof typeof elementClasses;
+type flexJustifyKeys = keyof typeof flexJustifyClasses;
+type flexAlignKeys = keyof typeof flexAlignClasses;
+type spacingKeys = keyof typeof spacingClasses;
+type maxWidthKeys = keyof typeof maxWidthClasses;
+interface FlexGroupProps extends React.HTMLAttributes<HTMLElement> {
+    children: React.ReactNode;
+    as?: elementKeys;
+    direction?: 'row' | 'column';
+    wrap?: 'wrap' | 'nowrap';
+    justify?: flexJustifyKeys;
+    align?: flexAlignKeys;
+    gap?: spacingKeys;
+    padding?: spacingKeys;
+    margin?: spacingKeys;
+    maxWidth?: maxWidthKeys;
+}
+declare const FlexGroup: ({ children, as, direction, wrap, justify, align, gap, padding, margin, maxWidth, className, ...rest }: FlexGroupProps) => react.JSX.Element;
+
+export { FlexGroup };
+export type { FlexGroupProps };

package/dist/components/FlexGroup/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FlexGroup/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC"}

package/dist/components/FlexGroup/index.mjs

@@ -0,0 +1,2 @@
+import { t as e } from "../_shared/FlexGroup-CnOrx2MF.mjs";
+export { e as FlexGroup };

package/dist/components/FlexGroup/styles.css

@@ -0,0 +1,197 @@
+.parlour-flex-group {
+  display: flex;
+  margin-left: auto;
+  margin-right: auto;
+}
+.parlour-flex-group--row {
+  flex-direction: row;
+}
+.parlour-flex-group--column {
+  flex-direction: column;
+}
+.parlour-flex-group--wrap {
+  flex-wrap: wrap;
+}
+.parlour-flex-group--nowrap {
+  flex-wrap: nowrap;
+}
+.parlour-flex-group--justify-start {
+  justify-content: flex-start;
+}
+.parlour-flex-group--justify-center {
+  justify-content: center;
+}
+.parlour-flex-group--justify-end {
+  justify-content: flex-end;
+}
+.parlour-flex-group--justify-space-between {
+  justify-content: space-between;
+}
+.parlour-flex-group--align-start {
+  align-items: flex-start;
+}
+.parlour-flex-group--align-center {
+  align-items: center;
+}
+.parlour-flex-group--align-end {
+  align-items: flex-end;
+}
+.parlour-flex-group--align-stretch {
+  align-items: stretch;
+}
+
+.parlour-flex-group--gap-none {
+  gap: 0;
+}
+
+.parlour-flex-group--padding-none {
+  padding: 0;
+}
+
+.parlour-flex-group.parlour-flex-group--margin-none {
+  margin-block: 0;
+}
+
+.parlour-flex-group--gap--3-x-small {
+  gap: var(--parlour--spacing--3-x-small);
+}
+
+.parlour-flex-group--padding--3-x-small {
+  padding: var(--parlour--spacing--3-x-small);
+}
+
+.parlour-flex-group.parlour-flex-group--margin--3-x-small {
+  margin-block: var(--parlour--spacing--3-x-small);
+}
+
+.parlour-flex-group--gap--2-x-small {
+  gap: var(--parlour--spacing--2-x-small);
+}
+
+.parlour-flex-group--padding--2-x-small {
+  padding: var(--parlour--spacing--2-x-small);
+}
+
+.parlour-flex-group.parlour-flex-group--margin--2-x-small {
+  margin-block: var(--parlour--spacing--2-x-small);
+}
+
+.parlour-flex-group--gap--x-small {
+  gap: var(--parlour--spacing--x-small);
+}
+
+.parlour-flex-group--padding--x-small {
+  padding: var(--parlour--spacing--x-small);
+}
+
+.parlour-flex-group.parlour-flex-group--margin--x-small {
+  margin-block: var(--parlour--spacing--x-small);
+}
+
+.parlour-flex-group--gap--small {
+  gap: var(--parlour--spacing--small);
+}
+
+.parlour-flex-group--padding--small {
+  padding: var(--parlour--spacing--small);
+}
+
+.parlour-flex-group.parlour-flex-group--margin--small {
+  margin-block: var(--parlour--spacing--small);
+}
+
+.parlour-flex-group--gap--normal {
+  gap: var(--parlour--spacing--normal);
+}
+
+.parlour-flex-group--padding--normal {
+  padding: var(--parlour--spacing--normal);
+}
+
+.parlour-flex-group.parlour-flex-group--margin--normal {
+  margin-block: var(--parlour--spacing--normal);
+}
+
+.parlour-flex-group--gap--medium {
+  gap: var(--parlour--spacing--medium);
+}
+
+.parlour-flex-group--padding--medium {
+  padding: var(--parlour--spacing--medium);
+}
+
+.parlour-flex-group.parlour-flex-group--margin--medium {
+  margin-block: var(--parlour--spacing--medium);
+}
+
+.parlour-flex-group--gap--large {
+  gap: var(--parlour--spacing--large);
+}
+
+.parlour-flex-group--padding--large {
+  padding: var(--parlour--spacing--large);
+}
+
+.parlour-flex-group.parlour-flex-group--margin--large {
+  margin-block: var(--parlour--spacing--large);
+}
+
+.parlour-flex-group--gap--x-large {
+  gap: var(--parlour--spacing--x-large);
+}
+
+.parlour-flex-group--padding--x-large {
+  padding: var(--parlour--spacing--x-large);
+}
+
+.parlour-flex-group.parlour-flex-group--margin--x-large {
+  margin-block: var(--parlour--spacing--x-large);
+}
+
+.parlour-flex-group--gap--2-x-large {
+  gap: var(--parlour--spacing--2-x-large);
+}
+
+.parlour-flex-group--padding--2-x-large {
+  padding: var(--parlour--spacing--2-x-large);
+}
+
+.parlour-flex-group.parlour-flex-group--margin--2-x-large {
+  margin-block: var(--parlour--spacing--2-x-large);
+}
+
+.parlour-flex-group--gap--3-x-large {
+  gap: var(--parlour--spacing--3-x-large);
+}
+
+.parlour-flex-group--padding--3-x-large {
+  padding: var(--parlour--spacing--3-x-large);
+}
+
+.parlour-flex-group.parlour-flex-group--margin--3-x-large {
+  margin-block: var(--parlour--spacing--3-x-large);
+}
+
+.parlour-flex-group--gap--4-x-large {
+  gap: var(--parlour--spacing--4-x-large);
+}
+
+.parlour-flex-group--padding--4-x-large {
+  padding: var(--parlour--spacing--4-x-large);
+}
+
+.parlour-flex-group.parlour-flex-group--margin--4-x-large {
+  margin-block: var(--parlour--spacing--4-x-large);
+}
+
+.parlour-flex-group--gap--5-x-large {
+  gap: var(--parlour--spacing--5-x-large);
+}
+
+.parlour-flex-group--padding--5-x-large {
+  padding: var(--parlour--spacing--5-x-large);
+}
+
+.parlour-flex-group.parlour-flex-group--margin--5-x-large {
+  margin-block: var(--parlour--spacing--5-x-large);
+}