@buildcanada/components 0.3.3 → 0.3.5

package/dist/content/StatBlock/StatBlock.scss

@@ -0,0 +1,83 @@
+@use "../../styles/tokens" as *;
+@use "../../styles/typography" as *;
+
+/*******************************************************************************
+ * StatBlock Component
+ *
+ * Large formatted number with label, used for data display (canadaspends.com)
+ ******************************************************************************/
+
+.bc-stat-block {
+  display: flex;
+  flex-direction: column;
+  gap: calc($space-1 / 2);
+
+  /***************************************************************************
+   * Size Variants
+   ***************************************************************************/
+
+  &--sm {
+    .bc-stat-block__value {
+      @include h2;
+    }
+
+    .bc-stat-block__label {
+      @include label-sm;
+    }
+  }
+
+  &--md {
+    .bc-stat-block__value {
+      @include display-2;
+    }
+
+    .bc-stat-block__label {
+      @include label;
+    }
+  }
+
+  &--lg {
+    .bc-stat-block__value {
+      @include display-1;
+    }
+
+    .bc-stat-block__label {
+      @include h4;
+    }
+  }
+
+  /***************************************************************************
+   * Elements
+   ***************************************************************************/
+
+  &__value {
+    color: $charcoal;
+    font-variant-numeric: tabular-nums;
+  }
+
+  &__label {
+    color: $text-secondary;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  &__description {
+    @include body-3;
+    color: $text-muted;
+    margin-top: calc($space-1 / 2);
+  }
+
+  &__change {
+    @include mono-sm;
+    color: $text-secondary;
+    margin-top: calc($space-1 / 2);
+
+    &--up {
+      color: $emerald-600;
+    }
+
+    &--down {
+      color: $auburn;
+    }
+  }
+}

package/dist/content/StatBlock/index.d.ts

@@ -0,0 +1,3 @@
+export { StatBlock, type StatBlockProps, type StatBlockSize, type StatBlockTrend } from "./StatBlock.js";
+export { default } from "./StatBlock.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/content/StatBlock/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/content/StatBlock/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,KAAK,aAAa,EAAE,KAAK,cAAc,EAAE,MAAM,gBAAgB,CAAA;AACxG,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA"}

package/dist/content/StatBlock/index.js

@@ -0,0 +1,2 @@
+export { StatBlock } from "./StatBlock.js";
+export { default } from "./StatBlock.js";

package/dist/feedback/Dialog/Dialog.d.ts

@@ -0,0 +1,18 @@
+export type DialogPosition = "top-left" | "top-right" | "bottom-left" | "bottom-right" | "center";
+export interface DialogProps {
+    open: boolean;
+    onClose: () => void;
+    children: React.ReactNode;
+    title?: string;
+    description?: string;
+    position?: DialogPosition;
+    className?: string;
+    closeOnEscape?: boolean;
+    showCloseButton?: boolean;
+    ariaLabelledBy?: string;
+    ariaDescribedBy?: string;
+    offset?: number;
+}
+export declare function Dialog({ open, onClose, children, title, description, position, className, closeOnEscape, showCloseButton, ariaLabelledBy, ariaDescribedBy, offset, }: DialogProps): import("react/jsx-runtime").JSX.Element;
+export default Dialog;
+//# sourceMappingURL=Dialog.d.ts.map

package/dist/feedback/Dialog/Dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../src/feedback/Dialog/Dialog.tsx"],"names":[],"mappings":"AAKA,MAAM,MAAM,cAAc,GACpB,UAAU,GACV,WAAW,GACX,aAAa,GACb,cAAc,GACd,QAAQ,CAAA;AAEd,MAAM,WAAW,WAAW;IACxB,IAAI,EAAE,OAAO,CAAA;IACb,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,cAAc,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,MAAM,CAAC,EAAE,MAAM,CAAA;CAClB;AAED,wBAAgB,MAAM,CAAC,EACnB,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,KAAK,EACL,WAAW,EACX,QAAyB,EACzB,SAAS,EACT,aAAoB,EACpB,eAAsB,EACtB,cAAc,EACd,eAAe,EACf,MAAW,GACd,EAAE,WAAW,2CA6Eb;AAED,eAAe,MAAM,CAAA"}

package/dist/feedback/Dialog/Dialog.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useCallback } from "react";
+import cx from "classnames";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faXmark } from "@fortawesome/free-solid-svg-icons";
+export function Dialog({ open, onClose, children, title, description, position = "bottom-right", className, closeOnEscape = true, showCloseButton = true, ariaLabelledBy, ariaDescribedBy, offset = 16, }) {
+    const dialogRef = useRef(null);
+    const handleClose = useCallback(() => {
+        onClose();
+    }, [onClose]);
+    // Handle escape key
+    useEffect(() => {
+        if (!closeOnEscape || !open)
+            return;
+        const handleKeyDown = (e) => {
+            if (e.key === "Escape") {
+                handleClose();
+            }
+        };
+        document.addEventListener("keydown", handleKeyDown);
+        return () => document.removeEventListener("keydown", handleKeyDown);
+    }, [closeOnEscape, open, handleClose]);
+    if (!open)
+        return null;
+    const classes = cx("bc-dialog", `bc-dialog--${position}`, className);
+    const titleId = ariaLabelledBy || (title ? "bc-dialog-title" : undefined);
+    const descriptionId = ariaDescribedBy || (description ? "bc-dialog-description" : undefined);
+    const style = {
+        "--bc-dialog-offset": `${offset}px`,
+    };
+    return (_jsx("div", { ref: dialogRef, className: classes, style: style, role: "dialog", "aria-modal": "false", "aria-labelledby": titleId, "aria-describedby": descriptionId, children: _jsxs("div", { className: "bc-dialog__container", children: [(title || showCloseButton) && (_jsxs("header", { className: "bc-dialog__header", children: [title && (_jsx("h2", { id: titleId, className: "bc-dialog__title", children: title })), showCloseButton && (_jsx("button", { type: "button", className: "bc-dialog__close", onClick: handleClose, "aria-label": "Close dialog", children: _jsx(FontAwesomeIcon, { icon: faXmark }) }))] })), description && (_jsx("p", { id: descriptionId, className: "bc-dialog__description", children: description })), _jsx("div", { className: "bc-dialog__content", children: children })] }) }));
+}
+export default Dialog;

package/dist/feedback/Dialog/Dialog.scss

@@ -0,0 +1,158 @@
+@use "../../styles/tokens" as *;
+
+/*******************************************************************************
+ * Dialog Component
+ *
+ * A non-modal floating panel that doesn't block interaction with the UI.
+ * Sizes to its contents and can be positioned in corners.
+ ******************************************************************************/
+
+.bc-dialog {
+    position: fixed;
+    z-index: $z-popover;
+    background: $white;
+    border: 1px solid $border-default;
+    box-shadow: $shadow-lg;
+    max-width: calc(100vw - var(--bc-dialog-offset, 16px) * 2);
+    max-height: calc(100dvh - var(--bc-dialog-offset, 16px) * 2);
+
+    // Animation
+    animation: bc-dialog-enter $transition-base;
+}
+
+@keyframes bc-dialog-enter {
+    from {
+        opacity: 0;
+        transform: scale(0.95);
+    }
+    to {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+/*******************************************************************************
+ * Dialog Positions
+ ******************************************************************************/
+
+.bc-dialog--top-left {
+    top: var(--bc-dialog-offset, 16px);
+    left: var(--bc-dialog-offset, 16px);
+}
+
+.bc-dialog--top-right {
+    top: var(--bc-dialog-offset, 16px);
+    right: var(--bc-dialog-offset, 16px);
+}
+
+.bc-dialog--bottom-left {
+    bottom: var(--bc-dialog-offset, 16px);
+    left: var(--bc-dialog-offset, 16px);
+}
+
+.bc-dialog--bottom-right {
+    bottom: var(--bc-dialog-offset, 16px);
+    right: var(--bc-dialog-offset, 16px);
+}
+
+.bc-dialog--center {
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    animation: bc-dialog-enter-center $transition-base;
+}
+
+@keyframes bc-dialog-enter-center {
+    from {
+        opacity: 0;
+        transform: translate(-50%, -50%) scale(0.95);
+    }
+    to {
+        opacity: 1;
+        transform: translate(-50%, -50%) scale(1);
+    }
+}
+
+/*******************************************************************************
+ * Dialog Container
+ ******************************************************************************/
+
+.bc-dialog__container {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+/*******************************************************************************
+ * Dialog Header
+ ******************************************************************************/
+
+.bc-dialog__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: $space-2;
+    padding: $space-2 $space-2 0 $space-3;
+    flex-shrink: 0;
+}
+
+.bc-dialog__title {
+    font-family: "Soehne Kraftig", "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-size: 1.125rem;
+    font-weight: 500;
+    line-height: 1.4;
+    color: $charcoal;
+    margin: 0;
+}
+
+.bc-dialog__close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    border: none;
+    background: transparent;
+    color: $gray-600;
+    cursor: pointer;
+    transition: background-color $transition-fast, color $transition-fast;
+    flex-shrink: 0;
+
+    &:hover {
+        background-color: $gray-100;
+        color: $charcoal;
+    }
+
+    &:focus-visible {
+        outline: 2px solid $auburn;
+        outline-offset: 2px;
+    }
+
+    svg {
+        width: 16px;
+        height: 16px;
+    }
+}
+
+/*******************************************************************************
+ * Dialog Description
+ ******************************************************************************/
+
+.bc-dialog__description {
+    font-family: "Financier Text Regular", Georgia, "Times New Roman", serif;
+    font-size: 0.875rem;
+    line-height: 1.5;
+    color: $gray-600;
+    margin: 0;
+    padding: $space-1 $space-3 0;
+}
+
+/*******************************************************************************
+ * Dialog Content
+ ******************************************************************************/
+
+.bc-dialog__content {
+    overflow-y: auto;
+    padding: $space-3;
+}

package/dist/feedback/Dialog/index.d.ts

@@ -0,0 +1,2 @@
+export { Dialog, type DialogProps, type DialogPosition } from "./Dialog.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/feedback/Dialog/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/feedback/Dialog/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,KAAK,cAAc,EAAE,MAAM,aAAa,CAAA"}

package/dist/feedback/Dialog/index.js

@@ -0,0 +1 @@
+export { Dialog } from "./Dialog.js";

package/dist/feedback/PopupForm/PopupForm.d.ts

@@ -0,0 +1,24 @@
+import { type DialogPosition } from "../Dialog/index.js";
+import { type ButtonVariant } from "../../primitives/Button/index.js";
+export interface PopupFormProps {
+    open: boolean;
+    onClose: () => void;
+    onSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
+    children: React.ReactNode;
+    title?: string;
+    description?: string;
+    position?: DialogPosition;
+    offset?: number;
+    className?: string;
+    submitText?: string;
+    submitVariant?: ButtonVariant;
+    cancelText?: string;
+    cancelVariant?: ButtonVariant;
+    showCancel?: boolean;
+    isSubmitting?: boolean;
+    submitDisabled?: boolean;
+    closeOnEscape?: boolean;
+}
+export declare function PopupForm({ open, onClose, onSubmit, children, title, description, position, offset, className, submitText, submitVariant, cancelText, cancelVariant, showCancel, isSubmitting, submitDisabled, closeOnEscape, }: PopupFormProps): import("react/jsx-runtime").JSX.Element;
+export default PopupForm;
+//# sourceMappingURL=PopupForm.d.ts.map

package/dist/feedback/PopupForm/PopupForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopupForm.d.ts","sourceRoot":"","sources":["../../../src/feedback/PopupForm/PopupForm.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAU,KAAK,cAAc,EAAE,MAAM,oBAAoB,CAAA;AAChE,OAAO,EAAU,KAAK,aAAa,EAAE,MAAM,kCAAkC,CAAA;AAE7E,MAAM,WAAW,cAAc;IAC3B,IAAI,EAAE,OAAO,CAAA;IACb,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,eAAe,CAAC,KAAK,IAAI,CAAA;IACvD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,cAAc,CAAA;IACzB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,aAAa,CAAC,EAAE,aAAa,CAAA;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,aAAa,CAAC,EAAE,aAAa,CAAA;IAC7B,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,aAAa,CAAC,EAAE,OAAO,CAAA;CAC1B;AAED,wBAAgB,SAAS,CAAC,EACtB,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,WAAW,EACX,QAAyB,EACzB,MAAM,EACN,SAAS,EACT,UAAqB,EACrB,aAA8B,EAC9B,UAAqB,EACrB,aAAkC,EAClC,UAAiB,EACjB,YAAoB,EACpB,cAAsB,EACtB,aAAoB,GACvB,EAAE,cAAc,2CA4ChB;AAED,eAAe,SAAS,CAAA"}

package/dist/feedback/PopupForm/PopupForm.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cx from "classnames";
+import { Dialog } from "../Dialog/index.js";
+import { Button } from "../../primitives/Button/index.js";
+export function PopupForm({ open, onClose, onSubmit, children, title, description, position = "bottom-right", offset, className, submitText = "Submit", submitVariant = "solid-auburn", cancelText = "Cancel", cancelVariant = "outline-charcoal", showCancel = true, isSubmitting = false, submitDisabled = false, closeOnEscape = true, }) {
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        onSubmit(e);
+    };
+    const classes = cx("bc-popup-form", className);
+    return (_jsx(Dialog, { open: open, onClose: onClose, title: title, description: description, position: position, offset: offset, closeOnEscape: closeOnEscape, children: _jsxs("form", { onSubmit: handleSubmit, className: classes, children: [_jsx("div", { className: "bc-popup-form__fields", children: children }), _jsxs("div", { className: "bc-popup-form__actions", children: [showCancel && (_jsx(Button, { type: "button", text: cancelText, variant: cancelVariant, onClick: onClose, disabled: isSubmitting, icon: null })), _jsx(Button, { type: "submit", text: isSubmitting ? "Submitting..." : submitText, variant: submitVariant, disabled: submitDisabled || isSubmitting, icon: null })] })] }) }));
+}
+export default PopupForm;

package/dist/feedback/PopupForm/PopupForm.scss

@@ -0,0 +1,34 @@
+@use "../../styles/tokens" as *;
+
+/*******************************************************************************
+ * PopupForm Component
+ ******************************************************************************/
+
+.bc-popup-form {
+    display: flex;
+    flex-direction: column;
+    gap: $space-3;
+}
+
+/*******************************************************************************
+ * PopupForm Fields
+ ******************************************************************************/
+
+.bc-popup-form__fields {
+    display: flex;
+    flex-direction: column;
+    gap: $space-3;
+}
+
+/*******************************************************************************
+ * PopupForm Actions
+ ******************************************************************************/
+
+.bc-popup-form__actions {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    gap: $space-2;
+    padding-top: $space-2;
+    border-top: 1px solid $border-muted;
+}

package/dist/feedback/PopupForm/index.d.ts

@@ -0,0 +1,2 @@
+export { PopupForm, type PopupFormProps } from "./PopupForm.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/feedback/PopupForm/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/feedback/PopupForm/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,gBAAgB,CAAA"}

package/dist/feedback/PopupForm/index.js

@@ -0,0 +1 @@
+export { PopupForm } from "./PopupForm.js";

package/dist/index.d.ts

@@ -0,0 +1,21 @@
+/*******************************************************************************
+ * @buildcanada/components
+ *
+ * Build Canada Design System Components
+ ******************************************************************************/
+export { Button, type ButtonProps, type ButtonVariant, type ButtonSize } from "./primitives/Button/index.js";
+export { TextField, type TextFieldProps, type TextFieldType } from "./primitives/TextField/index.js";
+export { Checkbox, type CheckboxProps } from "./primitives/Checkbox/index.js";
+export { Container, type ContainerProps, type ContainerSize } from "./layout/Container/index.js";
+export { Section, type SectionProps, type SectionBackground, type SectionSpacing } from "./layout/Section/index.js";
+export { Grid, GridItem, type GridProps, type GridItemProps, type GridColumns, type GridGap } from "./layout/Grid/index.js";
+export { Stack, type StackProps, type StackDirection, type StackSpacing, type StackAlign, type StackJustify } from "./layout/Stack/index.js";
+export { Divider, type DividerProps, type DividerOrientation, type DividerVariant } from "./layout/Divider/index.js";
+export { Card, CardImage, CardIcon, CardContent, CardTitle, CardDescription, CardMeta, CardStat, CardAuthor, type CardProps, type CardVariant, type CardImageProps, type CardIconProps, type CardContentProps, type CardTitleProps, type CardDescriptionProps, type CardMetaProps, type CardStatProps, type CardAuthorProps, } from "./content/Card/index.js";
+export { Hero, HeroTitle, HeroSubtitle, HeroActions, type HeroProps, type HeroVariant, type HeroBackground, type HeroTitleProps, type HeroSubtitleProps, type HeroActionsProps, } from "./content/Hero/index.js";
+export { StatBlock, type StatBlockProps, type StatBlockSize, type StatBlockTrend } from "./content/StatBlock/index.js";
+export { Header, type HeaderProps, type NavItem } from "./navigation/Header/index.js";
+export { Footer, type FooterProps, type FooterLink, type SocialLink } from "./navigation/Footer/index.js";
+export { Dialog, type DialogProps, type DialogPosition } from "./feedback/Dialog/index.js";
+export { PopupForm, type PopupFormProps } from "./feedback/PopupForm/index.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;gFAIgF;AAGhF,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,KAAK,aAAa,EAAE,KAAK,UAAU,EAAE,MAAM,8BAA8B,CAAA;AAC5G,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,KAAK,aAAa,EAAE,MAAM,iCAAiC,CAAA;AACpG,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,gCAAgC,CAAA;AAG7E,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,KAAK,aAAa,EAAE,MAAM,6BAA6B,CAAA;AAChG,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,iBAAiB,EAAE,KAAK,cAAc,EAAE,MAAM,2BAA2B,CAAA;AACnH,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,SAAS,EAAE,KAAK,aAAa,EAAE,KAAK,WAAW,EAAE,KAAK,OAAO,EAAE,MAAM,wBAAwB,CAAA;AAC3H,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,KAAK,cAAc,EAAE,KAAK,YAAY,EAAE,KAAK,UAAU,EAAE,KAAK,YAAY,EAAE,MAAM,yBAAyB,CAAA;AAC5I,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,kBAAkB,EAAE,KAAK,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAGpH,OAAO,EACH,IAAI,EACJ,SAAS,EACT,QAAQ,EACR,WAAW,EACX,SAAS,EACT,eAAe,EACf,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,KAAK,SAAS,EACd,KAAK,WAAW,EAChB,KAAK,cAAc,EACnB,KAAK,aAAa,EAClB,KAAK,gBAAgB,EACrB,KAAK,cAAc,EACnB,KAAK,oBAAoB,EACzB,KAAK,aAAa,EAClB,KAAK,aAAa,EAClB,KAAK,eAAe,GACvB,MAAM,yBAAyB,CAAA;AAChC,OAAO,EACH,IAAI,EACJ,SAAS,EACT,YAAY,EACZ,WAAW,EACX,KAAK,SAAS,EACd,KAAK,WAAW,EAChB,KAAK,cAAc,EACnB,KAAK,cAAc,EACnB,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,GACxB,MAAM,yBAAyB,CAAA;AAChC,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,KAAK,aAAa,EAAE,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAA;AAGtH,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,KAAK,OAAO,EAAE,MAAM,8BAA8B,CAAA;AACrF,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,KAAK,UAAU,EAAE,KAAK,UAAU,EAAE,MAAM,8BAA8B,CAAA;AAGzG,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,KAAK,cAAc,EAAE,MAAM,4BAA4B,CAAA;AAC1F,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,+BAA+B,CAAA"}

package/dist/index.js

@@ -0,0 +1,25 @@
+/*******************************************************************************
+ * @buildcanada/components
+ *
+ * Build Canada Design System Components
+ ******************************************************************************/
+// Primitives
+export { Button } from "./primitives/Button/index.js";
+export { TextField } from "./primitives/TextField/index.js";
+export { Checkbox } from "./primitives/Checkbox/index.js";
+// Layout
+export { Container } from "./layout/Container/index.js";
+export { Section } from "./layout/Section/index.js";
+export { Grid, GridItem } from "./layout/Grid/index.js";
+export { Stack } from "./layout/Stack/index.js";
+export { Divider } from "./layout/Divider/index.js";
+// Content
+export { Card, CardImage, CardIcon, CardContent, CardTitle, CardDescription, CardMeta, CardStat, CardAuthor, } from "./content/Card/index.js";
+export { Hero, HeroTitle, HeroSubtitle, HeroActions, } from "./content/Hero/index.js";
+export { StatBlock } from "./content/StatBlock/index.js";
+// Navigation
+export { Header } from "./navigation/Header/index.js";
+export { Footer } from "./navigation/Footer/index.js";
+// Feedback
+export { Dialog } from "./feedback/Dialog/index.js";
+export { PopupForm } from "./feedback/PopupForm/index.js";

package/dist/layout/Container/Container.d.ts

@@ -0,0 +1,11 @@
+export type ContainerSize = "sm" | "md" | "lg" | "xl" | "full";
+export interface ContainerProps {
+    children: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+    size?: ContainerSize;
+    as?: "div" | "main" | "article" | "section";
+}
+export declare function Container({ children, className, style, size, as: Component, }: ContainerProps): import("react/jsx-runtime").JSX.Element;
+export default Container;
+//# sourceMappingURL=Container.d.ts.map

package/dist/layout/Container/Container.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Container.d.ts","sourceRoot":"","sources":["../../../src/layout/Container/Container.tsx"],"names":[],"mappings":"AAEA,MAAM,MAAM,aAAa,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAA;AAE9D,MAAM,WAAW,cAAc;IAC3B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IAC3B,IAAI,CAAC,EAAE,aAAa,CAAA;IACpB,EAAE,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,CAAA;CAC9C;AAED,wBAAgB,SAAS,CAAC,EACtB,QAAQ,EACR,SAAS,EACT,KAAK,EACL,IAAW,EACX,EAAE,EAAE,SAAiB,GACxB,EAAE,cAAc,2CAQhB;AAED,eAAe,SAAS,CAAA"}

package/dist/layout/Container/Container.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import cx from "classnames";
+export function Container({ children, className, style, size = "lg", as: Component = "div", }) {
+    const classes = cx("bc-container", `bc-container--${size}`, className);
+    return (_jsx(Component, { className: classes, style: style, children: children }));
+}
+export default Container;

package/dist/layout/Container/Container.scss

@@ -0,0 +1,40 @@
+@use "../../styles/tokens" as *;
+
+/*******************************************************************************
+ * Container Component
+ *
+ * Max-width container with responsive padding
+ ******************************************************************************/
+
+.bc-container {
+  width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: $space-3;
+  padding-right: $space-3;
+
+  @include md-up {
+    padding-left: $space-5;
+    padding-right: $space-5;
+  }
+
+  &--sm {
+    max-width: 640px;
+  }
+
+  &--md {
+    max-width: 768px;
+  }
+
+  &--lg {
+    max-width: 1024px;
+  }
+
+  &--xl {
+    max-width: 1280px;
+  }
+
+  &--full {
+    max-width: none;
+  }
+}

package/dist/layout/Container/index.d.ts

@@ -0,0 +1,3 @@
+export { Container, type ContainerProps, type ContainerSize } from "./Container.js";
+export { default } from "./Container.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/layout/Container/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/layout/Container/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,KAAK,aAAa,EAAE,MAAM,gBAAgB,CAAA;AACnF,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA"}

package/dist/layout/Container/index.js

@@ -0,0 +1,2 @@
+export { Container } from "./Container.js";
+export { default } from "./Container.js";

package/dist/layout/Divider/Divider.d.ts

@@ -0,0 +1,12 @@
+export type DividerOrientation = "horizontal" | "vertical";
+export type DividerVariant = "solid" | "dashed" | "construction";
+export interface DividerProps {
+    className?: string;
+    style?: React.CSSProperties;
+    orientation?: DividerOrientation;
+    variant?: DividerVariant;
+    spacing?: "none" | "sm" | "md" | "lg";
+}
+export declare function Divider({ className, style, orientation, variant, spacing, }: DividerProps): import("react/jsx-runtime").JSX.Element;
+export default Divider;
+//# sourceMappingURL=Divider.d.ts.map

package/dist/layout/Divider/Divider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.d.ts","sourceRoot":"","sources":["../../../src/layout/Divider/Divider.tsx"],"names":[],"mappings":"AAEA,MAAM,MAAM,kBAAkB,GAAG,YAAY,GAAG,UAAU,CAAA;AAC1D,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,QAAQ,GAAG,cAAc,CAAA;AAEhE,MAAM,WAAW,YAAY;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IAC3B,WAAW,CAAC,EAAE,kBAAkB,CAAA;IAChC,OAAO,CAAC,EAAE,cAAc,CAAA;IACxB,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;CACxC;AAED,wBAAgB,OAAO,CAAC,EACpB,SAAS,EACT,KAAK,EACL,WAA0B,EAC1B,OAAiB,EACjB,OAAc,GACjB,EAAE,YAAY,2CAUd;AAED,eAAe,OAAO,CAAA"}

package/dist/layout/Divider/Divider.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import cx from "classnames";
+export function Divider({ className, style, orientation = "horizontal", variant = "solid", spacing = "md", }) {
+    const classes = cx("bc-divider", `bc-divider--${orientation}`, `bc-divider--${variant}`, `bc-divider--spacing-${spacing}`, className);
+    return _jsx("hr", { className: classes, style: style });
+}
+export default Divider;