@bspk/ui 1.1.32 → 1.1.33

package/dist/components/Button/Button.d.ts

@@ -0,0 +1,95 @@
+import { ElementType, ReactNode } from 'react';
+import { ButtonSize, CommonProps, ElementProps, SetRef } from '../../index.js';
+import './button.scss';
+export type ButtonVariant = 'primary' | 'secondary' | 'tertiary';
+export type ButtonProps<As extends ElementType = 'button'> = CommonProps<'disabled'> & {
+    /**
+     * The label of the button.
+     *
+     * @required
+     */
+    label: string;
+    /**
+     * The icon of the button.
+     *
+     * @type BspkIcon
+     */
+    icon?: ReactNode;
+    /**
+     * Shows the button label. When label isn't showing it is used in a tooltip and as the aria-label prop.
+     *
+     * @default true
+     */
+    showLabel?: boolean;
+    /**
+     * The element type to render as.
+     *
+     * @default button
+     * @type ElementType
+     */
+    as?: As;
+    /**
+     * The function of the button is destructive.
+     *
+     * @default false
+     */
+    destructive?: boolean;
+    /**
+     * The size of the button.
+     *
+     * @default medium
+     */
+    size?: ButtonSize;
+    /**
+     * The color variant of the button.
+     *
+     * @default primary
+     */
+    variant?: ButtonVariant;
+    /**
+     * The width of the button.
+     *
+     * @default hug
+     */
+    width?: 'fill' | 'hug';
+    /**
+     * If `string` is passed, it will be used as the label.
+     *
+     * If `ReactNode` is passed, it will override the default button content. (Not recommended)
+     */
+    children?: ReactNode;
+    /** The tool tip text that appears when hovered. */
+    toolTip?: string;
+    /** The function to call when the button is clicked. */
+    onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    /** A ref to the Button element. */
+    innerRef?: SetRef<HTMLButtonElement>;
+};
+/**
+ * A clickable component that allows users to perform an action, make a choice or trigger a change in state.
+ *
+ * @example
+ *     import { Button } from '@bspk/ui/Button';
+ *     import { SvgPerson } from '@bspk/icons/Person';
+ *
+ *     function Example() {
+ *         return (
+ *             <Button
+ *                 label="Click Me"
+ *                 size="medium"
+ *                 variant="primary"
+ *                 onClick={() => console.log('Button clicked')}
+ *                 icon={<SvgPerson />}
+ *             />
+ *         );
+ *     }
+ *
+ * @name Button
+ * @phase DesignReview
+ */
+declare function Button<As extends ElementType = 'button'>(props: ElementProps<ButtonProps<As>, As>): JSX.Element;
+declare namespace Button {
+    var bspkName: string;
+}
+export { Button };
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Button/Button.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { isValidElement } from 'react';
+import { Tooltip } from '../Tooltip';
+import { isValidIcon } from '../../utils/children';
+import { useErrorLogger } from '../../utils/errors';
+import './button.css.js';
+/**
+ * A clickable component that allows users to perform an action, make a choice or trigger a change in state.
+ *
+ * @example
+ *     import { Button } from '@bspk/ui/Button';
+ *     import { SvgPerson } from '@bspk/icons/Person';
+ *
+ *     function Example() {
+ *         return (
+ *             <Button
+ *                 label="Click Me"
+ *                 size="medium"
+ *                 variant="primary"
+ *                 onClick={() => console.log('Button clicked')}
+ *                 icon={<SvgPerson />}
+ *             />
+ *         );
+ *     }
+ *
+ * @name Button
+ * @phase DesignReview
+ */
+function Button(props) {
+    const { size = 'medium', variant = 'primary', destructive = false, width = 'hug', as: As = 'button', disabled = false, label: labelProp, icon, 
+    // showLabel: showLabelProp = true,
+    showLabel = true, toolTip: toolTipProp, children, innerRef, ...containerProps } = props;
+    const label = typeof children === 'string' ? children : labelProp || '';
+    // ignore showLabel=false if there is no icon
+    const hideLabel = showLabel === false && icon;
+    const toolTip = toolTipProp || (hideLabel ? label : undefined);
+    const { logError } = useErrorLogger();
+    logError(!!icon && !isValidIcon(icon), 'Button - The icon prop must be a valid icon element.');
+    logError(!label, 'Button - The button must have a label.');
+    const button = (_jsxs(As, { ...containerProps, "aria-label": label, "data-bspk": "button", "data-destructive": destructive || undefined, "data-size": size, "data-touch-target-parent": true, "data-variant": variant, "data-width": width, disabled: disabled || undefined, ref: innerRef, children: [children && typeof children !== 'string' ? (children) : (_jsxs(_Fragment, { children: [!!icon && isValidElement(icon) && _jsx("span", { "data-button-icon": true, children: icon }), !hideLabel && _jsx("span", { "data-button-label": true, children: label })] })), _jsx("span", { "data-touch-target": true })] }));
+    if (toolTip) {
+        return (_jsx(Tooltip, { label: toolTip, placement: "top", children: button }));
+    }
+    return button;
+}
+Button.bspkName = 'Button';
+export { Button };
+//# sourceMappingURL=Button.js.map

package/dist/components/Button/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":";AAAA,OAAO,EAA0B,cAAc,EAAE,MAAM,OAAO,CAAC;AAG/D,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,eAAe,CAAC;AAoEvB;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,SAAS,MAAM,CAAoC,KAAwC;IACvF,MAAM,EACF,IAAI,GAAG,QAAQ,EACf,OAAO,GAAG,SAAS,EACnB,WAAW,GAAG,KAAK,EACnB,KAAK,GAAG,KAAK,EACb,EAAE,EAAE,EAAE,GAAG,QAAQ,EACjB,QAAQ,GAAG,KAAK,EAChB,KAAK,EAAE,SAAS,EAChB,IAAI;IACJ,mCAAmC;IACnC,SAAS,GAAG,IAAI,EAChB,OAAO,EAAE,WAAW,EACpB,QAAQ,EACR,QAAQ,EACR,GAAG,cAAc,EACpB,GAAG,KAAK,CAAC;IACV,MAAM,KAAK,GAAG,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,IAAI,EAAE,CAAC;IAExE,6CAA6C;IAC7C,MAAM,SAAS,GAAG,SAAS,KAAK,KAAK,IAAI,IAAI,CAAC;IAC9C,MAAM,OAAO,GAAG,WAAW,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;IAC/D,MAAM,EAAE,QAAQ,EAAE,GAAG,cAAc,EAAE,CAAC;IACtC,QAAQ,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,sDAAsD,CAAC,CAAC;IAC/F,QAAQ,CAAC,CAAC,KAAK,EAAE,wCAAwC,CAAC,CAAC;IAE3D,MAAM,MAAM,GAAG,CACX,MAAC,EAAE,OACK,cAAc,gBACN,KAAK,eACP,QAAQ,sBACA,WAAW,IAAI,SAAS,eAC/B,IAAI,oDAED,OAAO,gBACT,KAAK,EACjB,QAAQ,EAAE,QAAQ,IAAI,SAAS,EAC/B,GAAG,EAAE,QAAQ,aAEZ,QAAQ,IAAI,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,CACxC,QAAQ,CACX,CAAC,CAAC,CAAC,CACA,8BACK,CAAC,CAAC,IAAI,IAAI,cAAc,CAAC,IAAI,CAAC,IAAI,mDAAwB,IAAI,GAAQ,EACtE,CAAC,SAAS,IAAI,oDAAyB,KAAK,GAAQ,IACtD,CACN,EACD,2CAA0B,IACzB,CACR,CAAC;IAEF,IAAI,OAAO,EAAE,CAAC;QACV,OAAO,CACH,KAAC,OAAO,IAAC,KAAK,EAAE,OAAO,EAAE,SAAS,EAAC,KAAK,YACnC,MAAM,GACD,CACb,CAAC;IACN,CAAC;IAED,OAAO,MAAM,CAAC;AAClB,CAAC;AAED,MAAM,CAAC,QAAQ,GAAG,QAAQ,CAAC;AAE3B,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/dist/components/Button/ButtonExample.d.ts

@@ -0,0 +1,3 @@
+import { ComponentExample } from '../../utils/demo';
+import { ButtonProps } from '.';
+export declare const ButtonExample: ComponentExample<ButtonProps>;

package/dist/components/Button/ButtonExample.js

@@ -0,0 +1,27 @@
+export const ButtonExample = {
+    presets: [
+        {
+            label: 'Icon & Text',
+            propState: {
+                icon: 'Add',
+                label: 'Add',
+            },
+        },
+        {
+            label: 'Text only',
+            propState: {
+                label: 'Add',
+                icon: undefined,
+            },
+        },
+        {
+            label: 'Icon only',
+            propState: {
+                showLabel: false,
+                icon: 'Add',
+                label: 'Add',
+            },
+        },
+    ],
+};
+//# sourceMappingURL=ButtonExample.js.map

package/dist/components/Button/ButtonExample.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonExample.js","sourceRoot":"","sources":["../../../src/components/Button/ButtonExample.tsx"],"names":[],"mappings":"AAIA,MAAM,CAAC,MAAM,aAAa,GAAkC;IACxD,OAAO,EAAE;QACL;YACI,KAAK,EAAE,aAAa;YACpB,SAAS,EAAE;gBACP,IAAI,EAAE,KAAK;gBACX,KAAK,EAAE,KAAK;aACf;SACJ;QACD;YACI,KAAK,EAAE,WAAW;YAClB,SAAS,EAAE;gBACP,KAAK,EAAE,KAAK;gBACZ,IAAI,EAAE,SAAS;aAClB;SACJ;QACD;YACI,KAAK,EAAE,WAAW;YAClB,SAAS,EAAE;gBACP,SAAS,EAAE,KAAK;gBAChB,IAAI,EAAE,KAAK;gBACX,KAAK,EAAE,KAAK;aACf;SACJ;KACJ;CACJ,CAAC"}

package/dist/components/Button/button.css

@@ -0,0 +1,153 @@
+[data-bspk=button] {
+  flex-direction: row;
+  gap: var(--spacing-sizing-02);
+  border: none;
+  cursor: pointer;
+  background: transparent;
+  text-decoration: none;
+  width: fit-content;
+  font-family: var(--typeface);
+}
+[data-bspk=button] [data-touch-target] {
+  min-width: var(--spacing-sizing-12);
+  min-height: var(--spacing-sizing-12);
+}
+[data-bspk=button][data-width=hug] {
+  width: fit-content;
+}
+[data-bspk=button][data-width=fill] {
+  width: 100%;
+}
+[data-bspk=button][data-size=x-small] {
+  font-size: var(--typography-size-xs);
+  line-height: var(--typography-line-height-lh-1);
+  height: var(--spacing-sizing-06);
+  min-width: var(--spacing-sizing-06);
+  gap: var(--spacing-sizing-02);
+}
+[data-bspk=button][data-size=x-small]:has([data-button-label]), [data-bspk=button][data-size=x-small][data-override] {
+  padding: 0 var(--spacing-sizing-02);
+}
+[data-bspk=button][data-size=x-small] [data-button-icon] {
+  width: var(--spacing-sizing-04);
+  height: var(--spacing-sizing-04);
+}
+[data-bspk=button][data-size=small] {
+  font-size: var(--typography-size-sm);
+  line-height: var(--typography-line-height-lh-2);
+  height: var(--spacing-sizing-08);
+  min-width: var(--spacing-sizing-08);
+}
+[data-bspk=button][data-size=small]:has([data-button-label]), [data-bspk=button][data-size=small][data-override] {
+  padding: 6px var(--spacing-sizing-04);
+}
+[data-bspk=button][data-size=small] [data-button-icon] {
+  width: var(--spacing-sizing-05);
+  height: var(--spacing-sizing-05);
+}
+[data-bspk=button][data-size=medium] {
+  font-size: var(--typography-size-base);
+  line-height: var(--typography-line-height-lh-2);
+  height: var(--spacing-sizing-10);
+  min-width: var(--spacing-sizing-10);
+}
+[data-bspk=button][data-size=medium]:has([data-button-label]), [data-bspk=button][data-size=medium][data-override] {
+  padding: var(--spacing-sizing-02) var(--spacing-sizing-04);
+}
+[data-bspk=button][data-size=medium] [data-button-icon] {
+  width: var(--spacing-sizing-05);
+  height: var(--spacing-sizing-05);
+}
+[data-bspk=button][data-size=large] {
+  font-size: var(--typography-size-bp-md);
+  line-height: var(--typography-line-height-lh-4);
+  height: var(--spacing-sizing-12);
+  min-width: var(--spacing-sizing-12);
+}
+[data-bspk=button][data-size=large]:has([data-button-label]), [data-bspk=button][data-size=large][data-override] {
+  padding: var(--spacing-sizing-03) var(--spacing-sizing-04);
+}
+[data-bspk=button][data-size=large] [data-button-icon] {
+  width: var(--spacing-sizing-06);
+  height: var(--spacing-sizing-06);
+}
+[data-bspk=button][disabled] {
+  cursor: not-allowed;
+}
+[data-bspk=button] [data-button-icon] {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+[data-bspk=button] [data-button-label] {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+[data-bspk=button][data-variant=primary] {
+  --primary-background: var(--surface-brand-primary);
+  background: linear-gradient(var(--primary-background), var(--primary-background));
+  color: var(--foreground-brand-on-primary);
+  border-radius: var(--radius-small);
+}
+[data-bspk=button][data-variant=primary][disabled] {
+  color: var(--foreground-neutral-disabled-on-surface);
+  background: var(--interactions-disabled-opacity);
+}
+[data-pseudo=hover] > [data-bspk=button][data-variant=primary]:not([disabled]), [data-bspk=button][data-variant=primary]:not([disabled]):hover {
+  background: linear-gradient(var(--interactions-brand-hover-opacity), var(--interactions-brand-hover-opacity)), linear-gradient(var(--primary-background), var(--primary-background));
+}
+[data-pseudo=active] > [data-bspk=button][data-variant=primary]:not([disabled]), [data-bspk=button][data-variant=primary]:not([disabled]):active {
+  background: linear-gradient(var(--interactions-brand-press-opacity), var(--interactions-brand-press-opacity)), linear-gradient(var(--primary-background), var(--primary-background));
+}
+[data-pseudo=focus] > [data-bspk=button][data-variant=primary]:not([disabled]), [data-bspk=button][data-variant=primary]:not([disabled]):focus-visible {
+  outline: solid 2px var(--stroke-neutral-focus);
+}
+[data-bspk=button][data-variant=primary][data-destructive] {
+  --primary-background: var(--status-error);
+  color: var(--foreground-brand-on-primary);
+}
+[data-bspk=button][data-variant=secondary] {
+  border: solid 1px var(--stroke-neutral-base);
+  border-radius: var(--radius-small);
+  color: var(--foreground-neutral-on-surface-variant-01);
+}
+[data-bspk=button][data-variant=secondary][disabled] {
+  color: var(--foreground-neutral-disabled-on-surface);
+  border: solid 1px var(--stroke-neutral-disabled-light);
+}
+[data-pseudo=hover] > [data-bspk=button][data-variant=secondary]:not([disabled]), [data-bspk=button][data-variant=secondary]:not([disabled]):hover {
+  background-color: var(--interactions-neutral-hover-opacity);
+}
+[data-pseudo=active] > [data-bspk=button][data-variant=secondary]:not([disabled]), [data-bspk=button][data-variant=secondary]:not([disabled]):active {
+  background-color: var(--interactions-neutral-press-opacity);
+}
+[data-pseudo=focus] > [data-bspk=button][data-variant=secondary]:not([disabled]), [data-bspk=button][data-variant=secondary]:not([disabled]):focus-visible {
+  outline: solid 2px var(--stroke-neutral-focus);
+}
+[data-bspk=button][data-variant=secondary][data-destructive] {
+  background: transparent;
+  color: var(--status-error);
+  border: solid 1px var(--status-error);
+}
+[data-bspk=button][data-variant=tertiary] {
+  background: transparent;
+  color: var(--foreground-neutral-on-surface-variant-01);
+}
+[data-bspk=button][data-variant=tertiary][disabled] {
+  color: var(--foreground-neutral-disabled-on-surface);
+}
+[data-pseudo=hover] > [data-bspk=button][data-variant=tertiary]:not([disabled]), [data-bspk=button][data-variant=tertiary]:not([disabled]):hover {
+  background: var(--interactions-neutral-hover-opacity);
+}
+[data-pseudo=active] > [data-bspk=button][data-variant=tertiary]:not([disabled]), [data-bspk=button][data-variant=tertiary]:not([disabled]):active {
+  background: var(--interactions-neutral-press-opacity);
+}
+[data-pseudo=focus] > [data-bspk=button][data-variant=tertiary]:not([disabled]), [data-bspk=button][data-variant=tertiary]:not([disabled]):focus-visible {
+  outline: solid 2px var(--stroke-neutral-focus);
+}
+[data-bspk=button][data-variant=tertiary][data-destructive] {
+  color: var(--status-error);
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Button/button.css.js

@@ -0,0 +1,159 @@
+/** * This file is generated by the build script.
+* Do not edit this file directly. */
+const style = document.createElement('style');
+style.appendChild(document.createTextNode(`[data-bspk=button] {
+  flex-direction: row;
+  gap: var(--spacing-sizing-02);
+  border: none;
+  cursor: pointer;
+  background: transparent;
+  text-decoration: none;
+  width: fit-content;
+  font-family: var(--typeface);
+}
+[data-bspk=button] [data-touch-target] {
+  min-width: var(--spacing-sizing-12);
+  min-height: var(--spacing-sizing-12);
+}
+[data-bspk=button][data-width=hug] {
+  width: fit-content;
+}
+[data-bspk=button][data-width=fill] {
+  width: 100%;
+}
+[data-bspk=button][data-size=x-small] {
+  font-size: var(--typography-size-xs);
+  line-height: var(--typography-line-height-lh-1);
+  height: var(--spacing-sizing-06);
+  min-width: var(--spacing-sizing-06);
+  gap: var(--spacing-sizing-02);
+}
+[data-bspk=button][data-size=x-small]:has([data-button-label]), [data-bspk=button][data-size=x-small][data-override] {
+  padding: 0 var(--spacing-sizing-02);
+}
+[data-bspk=button][data-size=x-small] [data-button-icon] {
+  width: var(--spacing-sizing-04);
+  height: var(--spacing-sizing-04);
+}
+[data-bspk=button][data-size=small] {
+  font-size: var(--typography-size-sm);
+  line-height: var(--typography-line-height-lh-2);
+  height: var(--spacing-sizing-08);
+  min-width: var(--spacing-sizing-08);
+}
+[data-bspk=button][data-size=small]:has([data-button-label]), [data-bspk=button][data-size=small][data-override] {
+  padding: 6px var(--spacing-sizing-04);
+}
+[data-bspk=button][data-size=small] [data-button-icon] {
+  width: var(--spacing-sizing-05);
+  height: var(--spacing-sizing-05);
+}
+[data-bspk=button][data-size=medium] {
+  font-size: var(--typography-size-base);
+  line-height: var(--typography-line-height-lh-2);
+  height: var(--spacing-sizing-10);
+  min-width: var(--spacing-sizing-10);
+}
+[data-bspk=button][data-size=medium]:has([data-button-label]), [data-bspk=button][data-size=medium][data-override] {
+  padding: var(--spacing-sizing-02) var(--spacing-sizing-04);
+}
+[data-bspk=button][data-size=medium] [data-button-icon] {
+  width: var(--spacing-sizing-05);
+  height: var(--spacing-sizing-05);
+}
+[data-bspk=button][data-size=large] {
+  font-size: var(--typography-size-bp-md);
+  line-height: var(--typography-line-height-lh-4);
+  height: var(--spacing-sizing-12);
+  min-width: var(--spacing-sizing-12);
+}
+[data-bspk=button][data-size=large]:has([data-button-label]), [data-bspk=button][data-size=large][data-override] {
+  padding: var(--spacing-sizing-03) var(--spacing-sizing-04);
+}
+[data-bspk=button][data-size=large] [data-button-icon] {
+  width: var(--spacing-sizing-06);
+  height: var(--spacing-sizing-06);
+}
+[data-bspk=button][disabled] {
+  cursor: not-allowed;
+}
+[data-bspk=button] [data-button-icon] {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+[data-bspk=button] [data-button-label] {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+[data-bspk=button][data-variant=primary] {
+  --primary-background: var(--surface-brand-primary);
+  background: linear-gradient(var(--primary-background), var(--primary-background));
+  color: var(--foreground-brand-on-primary);
+  border-radius: var(--radius-small);
+}
+[data-bspk=button][data-variant=primary][disabled] {
+  color: var(--foreground-neutral-disabled-on-surface);
+  background: var(--interactions-disabled-opacity);
+}
+[data-pseudo=hover] > [data-bspk=button][data-variant=primary]:not([disabled]), [data-bspk=button][data-variant=primary]:not([disabled]):hover {
+  background: linear-gradient(var(--interactions-brand-hover-opacity), var(--interactions-brand-hover-opacity)), linear-gradient(var(--primary-background), var(--primary-background));
+}
+[data-pseudo=active] > [data-bspk=button][data-variant=primary]:not([disabled]), [data-bspk=button][data-variant=primary]:not([disabled]):active {
+  background: linear-gradient(var(--interactions-brand-press-opacity), var(--interactions-brand-press-opacity)), linear-gradient(var(--primary-background), var(--primary-background));
+}
+[data-pseudo=focus] > [data-bspk=button][data-variant=primary]:not([disabled]), [data-bspk=button][data-variant=primary]:not([disabled]):focus-visible {
+  outline: solid 2px var(--stroke-neutral-focus);
+}
+[data-bspk=button][data-variant=primary][data-destructive] {
+  --primary-background: var(--status-error);
+  color: var(--foreground-brand-on-primary);
+}
+[data-bspk=button][data-variant=secondary] {
+  border: solid 1px var(--stroke-neutral-base);
+  border-radius: var(--radius-small);
+  color: var(--foreground-neutral-on-surface-variant-01);
+}
+[data-bspk=button][data-variant=secondary][disabled] {
+  color: var(--foreground-neutral-disabled-on-surface);
+  border: solid 1px var(--stroke-neutral-disabled-light);
+}
+[data-pseudo=hover] > [data-bspk=button][data-variant=secondary]:not([disabled]), [data-bspk=button][data-variant=secondary]:not([disabled]):hover {
+  background-color: var(--interactions-neutral-hover-opacity);
+}
+[data-pseudo=active] > [data-bspk=button][data-variant=secondary]:not([disabled]), [data-bspk=button][data-variant=secondary]:not([disabled]):active {
+  background-color: var(--interactions-neutral-press-opacity);
+}
+[data-pseudo=focus] > [data-bspk=button][data-variant=secondary]:not([disabled]), [data-bspk=button][data-variant=secondary]:not([disabled]):focus-visible {
+  outline: solid 2px var(--stroke-neutral-focus);
+}
+[data-bspk=button][data-variant=secondary][data-destructive] {
+  background: transparent;
+  color: var(--status-error);
+  border: solid 1px var(--status-error);
+}
+[data-bspk=button][data-variant=tertiary] {
+  background: transparent;
+  color: var(--foreground-neutral-on-surface-variant-01);
+}
+[data-bspk=button][data-variant=tertiary][disabled] {
+  color: var(--foreground-neutral-disabled-on-surface);
+}
+[data-pseudo=hover] > [data-bspk=button][data-variant=tertiary]:not([disabled]), [data-bspk=button][data-variant=tertiary]:not([disabled]):hover {
+  background: var(--interactions-neutral-hover-opacity);
+}
+[data-pseudo=active] > [data-bspk=button][data-variant=tertiary]:not([disabled]), [data-bspk=button][data-variant=tertiary]:not([disabled]):active {
+  background: var(--interactions-neutral-press-opacity);
+}
+[data-pseudo=focus] > [data-bspk=button][data-variant=tertiary]:not([disabled]), [data-bspk=button][data-variant=tertiary]:not([disabled]):focus-visible {
+  outline: solid 2px var(--stroke-neutral-focus);
+}
+[data-bspk=button][data-variant=tertiary][data-destructive] {
+  color: var(--status-error);
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
+`));
+document.head.appendChild(style);
+

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

@@ -0,0 +1 @@
+export * from './Button';

package/dist/components/Button/index.js

@@ -0,0 +1,2 @@
+export * from './Button';
+//# sourceMappingURL=index.js.map

package/dist/components/Button/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Button/index.tsx"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC"}

package/dist/components/Card/Card.d.ts

@@ -0,0 +1,50 @@
+import { ReactNode } from 'react';
+import './card.scss';
+export type CardProps = {
+    /**
+     * The content of the card.
+     *
+     * @required
+     */
+    children: ReactNode;
+    /**
+     * Determines if the padding should be hidden.
+     *
+     * @default true
+     */
+    showPadding?: boolean;
+    /**
+     * Determines how the card border will appear.
+     *
+     * @default elevated
+     */
+    variant?: 'elevated' | 'filled' | 'outlined';
+};
+/**
+ * Cards are often rectangular and contain various content, such as text, images, icons, multimedia, and interactive
+ * elements.
+ *
+ * They are similar in size and shape to playing cards and are intended to encourage users to click or tap to view more
+ * details.
+ *
+ * @example
+ *     import { Card } from '@bspk/ui/card';
+ *
+ *     function Example() {
+ *         return (
+ *             <Card variant="elevated" showPadding={false}>
+ *                 <h3>Card Title</h3>
+ *                 <p>This is some content inside the card.</p>
+ *             </Card>
+ *         );
+ *     }
+ *
+ * @name Card
+ * @phase DesignReview
+ */
+declare function Card({ children, showPadding, variant }: CardProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Card {
+    var bspkName: string;
+}
+export { Card };
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Card/Card.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import './card.css.js';
+/**
+ * Cards are often rectangular and contain various content, such as text, images, icons, multimedia, and interactive
+ * elements.
+ *
+ * They are similar in size and shape to playing cards and are intended to encourage users to click or tap to view more
+ * details.
+ *
+ * @example
+ *     import { Card } from '@bspk/ui/card';
+ *
+ *     function Example() {
+ *         return (
+ *             <Card variant="elevated" showPadding={false}>
+ *                 <h3>Card Title</h3>
+ *                 <p>This is some content inside the card.</p>
+ *             </Card>
+ *         );
+ *     }
+ *
+ * @name Card
+ * @phase DesignReview
+ */
+function Card({ children, showPadding, variant = 'elevated' }) {
+    return (_jsx("div", { "data-bspk": "card", "data-hide-padding": showPadding === false || undefined, "data-variant": variant, children: children }));
+}
+Card.bspkName = 'Card';
+export { Card };
+//# sourceMappingURL=Card.js.map

package/dist/components/Card/Card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":";AACA,OAAO,aAAa,CAAC;AAuBrB;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,SAAS,IAAI,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,OAAO,GAAG,UAAU,EAAa;IACpE,OAAO,CACH,2BAAe,MAAM,uBAAoB,WAAW,KAAK,KAAK,IAAI,SAAS,kBAAgB,OAAO,YAC7F,QAAQ,GACP,CACT,CAAC;AACN,CAAC;AAED,IAAI,CAAC,QAAQ,GAAG,MAAM,CAAC;AAEvB,OAAO,EAAE,IAAI,EAAE,CAAC"}

package/dist/components/Card/CardExample.d.ts

@@ -0,0 +1,2 @@
+import { ComponentExample } from '../../utils/demo';
+export declare const CardExample: ComponentExample;

package/dist/components/Card/CardExample.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ExamplePlaceholder } from '../ExamplePlaceholder';
+export const CardExample = {
+    render: ({ props, Component }) => (_jsx(Component, { ...props, children: _jsx(ExamplePlaceholder, { style: {
+                height: '200px',
+                width: '100%',
+                minWidth: '250px',
+            } }) })),
+};
+//# sourceMappingURL=CardExample.js.map

package/dist/components/Card/CardExample.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardExample.js","sourceRoot":"","sources":["../../../src/components/Card/CardExample.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AAGrE,MAAM,CAAC,MAAM,WAAW,GAAqB;IACzC,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,CAC9B,KAAC,SAAS,OAAK,KAAK,YAChB,KAAC,kBAAkB,IACf,KAAK,EAAE;gBACH,MAAM,EAAE,OAAO;gBACf,KAAK,EAAE,MAAM;gBACb,QAAQ,EAAE,OAAO;aACpB,GACH,GACM,CACf;CACJ,CAAC"}

package/dist/components/Card/card.css

@@ -0,0 +1,18 @@
+[data-bspk=card] {
+  display: block;
+  background: var(--surface-neutral-t1-base);
+  padding: var(--spacing-sizing-03);
+  border-radius: var(--radius-medium);
+  overflow: hidden;
+}
+[data-bspk=card][data-hide-padding] {
+  padding: 0;
+}
+[data-bspk=card][data-variant=outlined] {
+  border: solid 1px var(--stroke-neutral-low);
+}
+[data-bspk=card][data-variant=elevated] {
+  box-shadow: 0 1px 2px 0 var(--shadow-32), 0 1px 3px 1px var(--shadow-15);
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Card/card.css.js

@@ -0,0 +1,24 @@
+/** * This file is generated by the build script.
+* Do not edit this file directly. */
+const style = document.createElement('style');
+style.appendChild(document.createTextNode(`[data-bspk=card] {
+  display: block;
+  background: var(--surface-neutral-t1-base);
+  padding: var(--spacing-sizing-03);
+  border-radius: var(--radius-medium);
+  overflow: hidden;
+}
+[data-bspk=card][data-hide-padding] {
+  padding: 0;
+}
+[data-bspk=card][data-variant=outlined] {
+  border: solid 1px var(--stroke-neutral-low);
+}
+[data-bspk=card][data-variant=elevated] {
+  box-shadow: 0 1px 2px 0 var(--shadow-32), 0 1px 3px 1px var(--shadow-15);
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
+`));
+document.head.appendChild(style);
+

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

@@ -0,0 +1 @@
+export * from './Card';

package/dist/components/Card/index.js

@@ -0,0 +1,2 @@
+export * from './Card';
+//# sourceMappingURL=index.js.map

package/dist/components/Card/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Card/index.tsx"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC"}