doom-design-system 0.3.3 → 0.3.4

package/dist/components/FileUpload/FileUpload.module.css

@@ -0,0 +1,335 @@
+.window {
+  background-color: var(--card-bg);
+  border: var(--border-width) solid var(--card-border);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow-hard);
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  position: relative;
+  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+  width: 100%;
+  max-width: 100%;
+  min-width: 280px;
+}
+.window.disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+  cursor: not-allowed !important;
+  background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(0, 0, 0, 0.05) 10px, rgba(0, 0, 0, 0.05) 20px) !important;
+}
+.window.disabled:hover {
+  transform: none !important;
+  filter: none !important;
+}
+.window.disabled {
+  /* 
+     .window should be able to override all children css and this is an example of that
+  */
+}
+.window.disabled * {
+  pointer-events: none;
+}
+.window.disabled::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: 20;
+}
+.window.void {
+  border-color: transparent;
+  box-shadow: 0 0 0 4px var(--foreground);
+  transform: scale(1.01);
+  cursor: wait;
+}
+.window.void .header {
+  background-color: var(--common-black);
+  color: var(--background);
+  border-bottom: none;
+}
+.window.void .header > * {
+  --primary: var(--common-white);
+  --primary-foreground: var(--common-black);
+}
+.window.void .body {
+  background-color: var(--common-black);
+  cursor: wait;
+  margin-top: -1px;
+  position: relative;
+  z-index: 1;
+  overflow: hidden;
+}
+.window.void .body::before, .window.void .body::after {
+  content: "";
+  position: absolute;
+  inset: -50%;
+  width: 200%;
+  height: 200%;
+  background-image: radial-gradient(1px 1px at 20% 30%, #fff 100%, transparent), radial-gradient(1px 1px at 40% 70%, #fff 100%, transparent), radial-gradient(1px 1px at 60% 40%, #fff 100%, transparent), radial-gradient(1px 1px at 80% 80%, #fff 100%, transparent), radial-gradient(1px 1px at 10% 10%, #fff 100%, transparent), radial-gradient(1px 1px at 30% 50%, #fff 100%, transparent), radial-gradient(1px 1px at 50% 20%, #fff 100%, transparent), radial-gradient(1px 1px at 70% 90%, #fff 100%, transparent), radial-gradient(1px 1px at 90% 30%, #fff 100%, transparent), radial-gradient(1.5px 1.5px at 15% 75%, #fff 100%, transparent), radial-gradient(1px 1px at 85% 15%, #fff 100%, transparent), radial-gradient(1px 1px at 55% 65%, #fff 100%, transparent);
+  background-size: 50% 50%;
+  opacity: 0.5;
+  z-index: 0;
+  animation: consume-stars 6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  pointer-events: none;
+}
+.window.void .body::after {
+  animation-name: consume-stars-alt;
+  animation-delay: -3s;
+  background-position: 33% 33%;
+  opacity: 0.3;
+}
+.window.void .body .starField {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: 0;
+  overflow: hidden;
+}
+.window.void .body .starField::before, .window.void .body .starField::after {
+  content: "";
+  position: absolute;
+  inset: -50%;
+  width: 200%;
+  height: 200%;
+  background-image: radial-gradient(1px 1px at 25% 35%, #fff 100%, transparent), radial-gradient(1px 1px at 45% 75%, #fff 100%, transparent), radial-gradient(1px 1px at 65% 45%, #fff 100%, transparent), radial-gradient(1px 1px at 85% 85%, #fff 100%, transparent), radial-gradient(1px 1px at 15% 15%, #fff 100%, transparent), radial-gradient(1px 1px at 35% 55%, #fff 100%, transparent), radial-gradient(1px 1px at 55% 25%, #fff 100%, transparent), radial-gradient(1px 1px at 75% 95%, #fff 100%, transparent), radial-gradient(1px 1px at 95% 35%, #fff 100%, transparent), radial-gradient(1.5px 1.5px at 20% 80%, #fff 100%, transparent), radial-gradient(1px 1px at 90% 20%, #fff 100%, transparent), radial-gradient(1px 1px at 60% 70%, #fff 100%, transparent);
+  background-size: 50% 50%;
+  opacity: 0.5;
+  animation: consume-stars 6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  animation-delay: -1.5s;
+}
+.window.void .body .starField::after {
+  animation-name: consume-stars-alt;
+  animation-delay: -4.5s;
+  background-position: 40% 40%;
+  opacity: 0.3;
+}
+.window.void .headerContent,
+.window.void .headerTitle {
+  opacity: 0;
+  visibility: hidden;
+}
+.window.void .voidIconWrapper,
+.window.void .voidText,
+.window.void .secondary,
+.window.void .helperText {
+  opacity: 0;
+  transform: scale(0.9);
+  pointer-events: none;
+}
+
+.header {
+  background-color: var(--primary);
+  color: var(--primary-foreground);
+  padding: var(--spacing-sm) var(--spacing-md);
+  border-bottom: var(--border-width) solid var(--border-strong);
+  user-select: none;
+  min-height: 56px;
+  transition: all 0.4s ease;
+}
+@media (max-width: 480px) {
+  .header {
+    padding: var(--spacing-sm);
+    min-height: 48px;
+  }
+}
+@media (max-width: 360px) {
+  .header {
+    padding: var(--spacing-md);
+  }
+}
+.header > * {
+  --primary: var(--primary-foreground);
+  --primary-foreground: var(--primary);
+  --foreground: var(--primary-foreground);
+  --muted-foreground: var(--primary-foreground);
+}
+.header.errorHeader {
+  background-color: var(--error);
+  color: var(--error-foreground);
+}
+.header.disabledHeader {
+  background-color: var(--muted);
+  color: var(--muted-foreground);
+  opacity: 0.6;
+  cursor: not-allowed !important;
+  background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(0, 0, 0, 0.05) 10px, rgba(0, 0, 0, 0.05) 20px) !important;
+}
+.header.disabledHeader:hover {
+  transform: none !important;
+  filter: none !important;
+}
+.header.disabledHeader {
+  opacity: 1;
+}
+
+.headerContent {
+  flex: 1;
+  min-width: 0;
+}
+
+.headerTitle {
+  font-family: var(--font-heading);
+  font-weight: 800;
+  font-size: var(--text-sm);
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  line-height: 1.2;
+  display: block;
+}
+
+.requiredMark {
+  display: inline-flex;
+  vertical-align: middle;
+  margin-left: 2px;
+  color: inherit;
+  transform: translateY(-2px);
+}
+
+.body {
+  padding: var(--spacing-lg);
+  background-color: var(--card-bg);
+  min-height: 200px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+  position: relative;
+}
+@media (max-width: 640px) {
+  .body {
+    padding: var(--spacing-md);
+    min-height: 160px;
+  }
+}
+@media (max-width: 360px) {
+  .body {
+    padding: var(--spacing-sm) var(--spacing-md);
+  }
+}
+.body.hasFiles {
+  justify-content: flex-start;
+  align-items: stretch;
+  cursor: default;
+}
+.body.dragging, .body.error {
+  background-color: var(--surface-accent);
+}
+
+.emptyState {
+  width: 100%;
+  cursor: pointer;
+  outline: none;
+  border-radius: var(--radius);
+  transition: background-color 0.2s ease;
+}
+.emptyState:focus-visible {
+  box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--primary);
+}
+.void .emptyState:hover {
+  background-color: transparent;
+  cursor: wait;
+}
+.emptyState {
+  text-align: center;
+}
+
+.voidIconWrapper {
+  transition: all 0.3s ease;
+  padding: var(--spacing-md);
+  margin-bottom: var(--spacing-sm);
+}
+
+.icon {
+  color: var(--muted-foreground);
+  transition: all 0.3s ease;
+}
+@media (max-width: 480px) {
+  .icon {
+    width: 32px;
+    height: 32px;
+  }
+}
+
+.secondary {
+  color: var(--muted-foreground);
+  opacity: 0.8;
+}
+
+.hiddenInput {
+  display: none;
+}
+
+.fileList {
+  width: 100%;
+  flex: 1;
+}
+
+.removeButton {
+  width: 32px;
+  height: 32px;
+  padding: 0 !important;
+  flex-shrink: 0;
+}
+
+@keyframes consume-stars {
+  0% {
+    transform: scale(2.5) rotate(0deg);
+    opacity: 0;
+  }
+  5% {
+    opacity: 1;
+  }
+  95% {
+    opacity: 1;
+  }
+  100% {
+    transform: scale(0) rotate(360deg);
+    opacity: 0;
+  }
+}
+@keyframes consume-stars-alt {
+  0% {
+    transform: scale(3) rotate(45deg);
+    opacity: 0;
+  }
+  5% {
+    opacity: 1;
+  }
+  95% {
+    opacity: 1;
+  }
+  100% {
+    transform: scale(0) rotate(405deg);
+    opacity: 0;
+  }
+}
+.previewWrapper {
+  width: 64px;
+  height: 64px;
+  border-radius: var(--radius);
+  overflow: hidden;
+  border: var(--border-width) solid var(--border-strong);
+  position: relative;
+  background: var(--surface-accent);
+  flex-shrink: 0;
+}
+
+.previewImg {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+.previewImg.loaded {
+  opacity: 1;
+}
+
+.previewSkeleton {
+  position: absolute;
+  inset: 0;
+}

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

@@ -0,0 +1,2 @@
+export { FileUpload } from "./FileUpload";
+export type { FileUploadProps } from "./FileUpload";

package/dist/components/FileUpload/index.js

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

package/dist/components/Layout/Layout.d.ts

@@ -1,4 +1,4 @@
-import React, { ElementType } from 'react';
+import React, { ElementType } from "react";
 interface LayoutProps extends React.HTMLAttributes<HTMLElement> {
     children?: React.ReactNode;
     as?: ElementType;
@@ -9,19 +9,23 @@ export interface GridProps extends LayoutProps {
 }
 export declare function Grid({ children, columns, gap, className, style, as: Component, ...props }: GridProps): import("react/jsx-runtime").JSX.Element;
 export interface FlexProps extends LayoutProps {
-    direction?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
-    justify?: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
-    align?: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
+    direction?: "row" | "column" | "row-reverse" | "column-reverse";
+    justify?: "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly";
+    align?: "flex-start" | "flex-end" | "center" | "stretch" | "baseline";
     gap?: string | number;
-    wrap?: boolean | 'wrap' | 'nowrap' | 'wrap-reverse';
+    wrap?: boolean | "wrap" | "nowrap" | "wrap-reverse";
 }
 export declare function Flex({ children, direction, justify, align, gap, wrap, className, style, as: Component, ...props }: FlexProps): import("react/jsx-runtime").JSX.Element;
-export interface StackProps extends Omit<FlexProps, 'direction'> {
-    direction?: 'column' | 'column-reverse' | 'row' | 'row-reverse';
+export interface StackProps extends Omit<FlexProps, "direction"> {
+    direction?: "column" | "column-reverse" | "row" | "row-reverse";
 }
 export declare function Stack({ children, direction, gap, align, ...props }: StackProps): import("react/jsx-runtime").JSX.Element;
+export interface SwitcherProps extends FlexProps {
+    threshold?: "xxs" | "xs" | "sm" | "md";
+}
+export declare function Switcher({ children, threshold, className, ...props }: SwitcherProps): import("react/jsx-runtime").JSX.Element;
 export interface ContainerProps extends LayoutProps {
-    maxWidth?: 'sm' | 'md' | 'lg' | 'xl' | 'fluid';
+    maxWidth?: "sm" | "md" | "lg" | "xl" | "fluid";
 }
 export declare function Container({ children, maxWidth, className, as: Component, ...props }: ContainerProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Layout/Layout.js

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -11,27 +11,29 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import clsx from 'clsx';
-import styles from './Layout.module.css';
+import clsx from "clsx";
+import styles from "./Layout.module.css";
 export function Grid(_a) {
-    var { children, columns = '1fr', gap = '1rem', className, style, as: Component = 'div' } = _a, props = __rest(_a, ["children", "columns", "gap", "className", "style", "as"]);
-    const gridTemplateColumns = typeof columns === 'number' ? `repeat(${columns}, 1fr)` : columns;
+    var { children, columns = "1fr", gap = "1rem", className, style, as: Component = "div" } = _a, props = __rest(_a, ["children", "columns", "gap", "className", "style", "as"]);
+    const gridTemplateColumns = typeof columns === "number" ? `repeat(${columns}, 1fr)` : columns;
     return (_jsx(Component, Object.assign({ className: clsx(styles.grid, className), style: Object.assign({ gridTemplateColumns,
             gap }, style) }, props, { children: children })));
 }
 export function Flex(_a) {
-    var { children, direction = 'row', justify = 'flex-start', align = 'stretch', gap = '0', wrap = false, className, style, as: Component = 'div' } = _a, props = __rest(_a, ["children", "direction", "justify", "align", "gap", "wrap", "className", "style", "as"]);
-    const flexWrap = typeof wrap === 'boolean'
-        ? (wrap ? 'wrap' : 'nowrap')
-        : wrap;
+    var { children, direction = "row", justify = "flex-start", align = "stretch", gap = "0", wrap = false, className, style, as: Component = "div" } = _a, props = __rest(_a, ["children", "direction", "justify", "align", "gap", "wrap", "className", "style", "as"]);
+    const flexWrap = typeof wrap === "boolean" ? (wrap ? "wrap" : "nowrap") : wrap;
     return (_jsx(Component, Object.assign({ className: clsx(styles.flex, className), style: Object.assign({ flexDirection: direction, justifyContent: justify, alignItems: align, gap,
             flexWrap }, style) }, props, { children: children })));
 }
 export function Stack(_a) {
-    var { children, direction = 'column', gap = '1rem', align = 'stretch' } = _a, props = __rest(_a, ["children", "direction", "gap", "align"]);
+    var { children, direction = "column", gap = "1rem", align = "stretch" } = _a, props = __rest(_a, ["children", "direction", "gap", "align"]);
     return (_jsx(Flex, Object.assign({ direction: direction, gap: gap, align: align }, props, { children: children })));
 }
+export function Switcher(_a) {
+    var { children, threshold = "xs", className } = _a, props = __rest(_a, ["children", "threshold", "className"]);
+    return (_jsx(Flex, Object.assign({ className: clsx(styles.switcher, styles[`switch-${threshold}`], className) }, props, { children: children })));
+}
 export function Container(_a) {
-    var { children, maxWidth = 'xl', className, as: Component = 'div' } = _a, props = __rest(_a, ["children", "maxWidth", "className", "as"]);
+    var { children, maxWidth = "xl", className, as: Component = "div" } = _a, props = __rest(_a, ["children", "maxWidth", "className", "as"]);
     return (_jsx(Component, Object.assign({ className: clsx(styles.container, styles[maxWidth], className) }, props, { children: children })));
 }

package/dist/components/Layout/Layout.module.css

@@ -28,3 +28,32 @@
 .container.fluid {
   max-width: 100%;
 }
+
+.switcher {
+  display: flex;
+  flex-direction: row;
+}
+@media (max-width: 360px) {
+  .switcher.switch-xxs {
+    flex-direction: column;
+    align-items: flex-start !important;
+  }
+}
+@media (max-width: 480px) {
+  .switcher.switch-xs {
+    flex-direction: column;
+    align-items: flex-start !important;
+  }
+}
+@media (max-width: 640px) {
+  .switcher.switch-sm {
+    flex-direction: column;
+    align-items: flex-start !important;
+  }
+}
+@media (max-width: 768px) {
+  .switcher.switch-md {
+    flex-direction: column;
+    align-items: flex-start !important;
+  }
+}

package/dist/components/Link/Link.module.css

@@ -8,13 +8,20 @@
   cursor: pointer;
 }
 .link.default {
-  color: var(--foreground);
-  border-bottom: 2px solid transparent;
+  color: var(--primary);
+  text-decoration: underline;
+  text-decoration-thickness: 2px;
+  text-underline-offset: 2px;
 }
 .link.default:hover {
-  color: var(--primary);
-  border-bottom-color: var(--primary);
-  transform: translateY(-1px);
+  filter: brightness(1.2);
+}
+.link.default:visited {
+  color: var(--primary-dark, var(--primary));
+  filter: brightness(0.8);
+}
+.link.default:active {
+  filter: brightness(0.9);
 }
 .link.subtle {
   color: var(--muted-foreground);

package/dist/components/Modal/Modal.js

@@ -25,7 +25,7 @@ const ModalContext = React.createContext({
 });
 export function ModalHeader({ children, className, id }) {
     const { onClose, titleId } = React.useContext(ModalContext);
-    return (_jsxs(Flex, { align: "center", justify: "space-between", className: clsx(styles.header, className), children: [_jsx("div", { id: id || titleId, className: styles.headerContent, children: children }), _jsx(Button, { variant: "ghost", size: "sm", onClick: onClose, "aria-label": "Close modal", className: styles.closeButton, children: _jsx(X, { size: 20, strokeWidth: 2.5 }) })] }));
+    return (_jsxs(Flex, { align: "center", justify: "space-between", className: clsx(styles.header, className), children: [_jsx("div", { id: id || titleId, className: styles.headerContent, children: children }), _jsx(Button, { variant: "danger", size: "sm", onClick: onClose, "aria-label": "Close modal", className: styles.closeButton, children: _jsx(X, { size: 20, strokeWidth: 2.5 }) })] }));
 }
 export function ModalBody({ children, className, }) {
     return _jsx("div", { className: clsx(styles.body, className), children: children });

package/dist/components/Modal/Modal.module.css

@@ -69,14 +69,6 @@
   border-color: var(--border-strong) !important;
   box-shadow: var(--shadow-hard) !important;
 }
-.modalCard.solid .closeButton:hover {
-  transform: translate(-2px, -2px);
-  box-shadow: var(--shadow-hover) !important;
-}
-.modalCard.solid .closeButton:active {
-  transform: translate(2px, 2px);
-  box-shadow: none !important;
-}
 
 .header {
   padding: var(--spacing-lg);
@@ -93,34 +85,6 @@
   max-width: 85%;
 }
 
-.closeButton {
-  flex-shrink: 0;
-  background-color: var(--error) !important;
-  color: var(--error-foreground) !important;
-  border: var(--border-width) solid var(--card-border) !important;
-  border-radius: var(--radius) !important;
-  height: 36px !important;
-  width: 36px !important;
-  min-width: 36px !important;
-  display: flex !important;
-  align-items: center;
-  justify-content: center;
-  padding: 0 !important;
-  /* Use standardized shadow-error mixed with black for depth */
-  box-shadow: var(--shadow-hard) !important;
-  transition: all 0.2s ease;
-  cursor: pointer;
-}
-.closeButton:hover {
-  filter: brightness(1.1);
-  transform: translate(-2px, -2px);
-  box-shadow: var(--shadow-hover) !important;
-}
-.closeButton:active {
-  transform: translate(2px, 2px);
-  box-shadow: none !important;
-}
-
 .modalContent {
   background-color: var(--card-bg);
   padding-top: 1px;

package/dist/components/Sheet/Sheet.js

@@ -34,5 +34,5 @@ export function Sheet({ isOpen, onClose, title, children, footer, variant = "def
     }, [isOpen, onClose]);
     if (!mounted)
         return null;
-    return createPortal(_jsxs(_Fragment, { children: [_jsx("div", { className: clsx(styles.overlay, isOpen && styles.isOpen), onClick: onClose, "aria-hidden": "true" }), _jsxs("div", { className: clsx(styles.panel, styles[variant], isOpen && styles.isOpen, className), role: "dialog", "aria-modal": "true", "aria-labelledby": title ? titleId : undefined, "aria-label": !title ? "Sheet" : undefined, children: [_jsxs("div", { className: styles.header, children: [_jsx("div", { className: styles.handleBar }), _jsxs(Flex, { align: "center", justify: "space-between", className: styles.headerBody, children: [title && (_jsx("h2", { id: titleId, className: styles.title, children: title })), _jsx(Button, { variant: "ghost", size: "sm", onClick: onClose, "aria-label": "Close sheet", children: _jsx(X, { size: 24 }) })] })] }), _jsx("div", { className: styles.content, children: children }), footer && _jsx("div", { className: styles.footer, children: footer })] })] }), document.body);
+    return createPortal(_jsxs(_Fragment, { children: [_jsx("div", { className: clsx(styles.overlay, isOpen && styles.isOpen), onClick: onClose, "aria-hidden": "true" }), _jsxs("div", { className: clsx(styles.panel, styles[variant], isOpen && styles.isOpen, className), role: "dialog", "aria-modal": "true", "aria-labelledby": title ? titleId : undefined, "aria-label": !title ? "Sheet" : undefined, children: [_jsxs("div", { className: styles.header, children: [_jsx("div", { className: styles.handleBar }), _jsxs(Flex, { align: "center", justify: "space-between", className: styles.headerBody, children: [title && (_jsx("h2", { id: titleId, className: styles.title, children: title })), _jsx(Button, { variant: "danger", size: "sm", onClick: onClose, "aria-label": "Close sheet", children: _jsx(X, { size: 24 }) })] })] }), _jsx("div", { className: styles.content, children: children }), footer && _jsx("div", { className: styles.footer, children: footer })] })] }), document.body);
 }

package/dist/components/Sheet/Sheet.module.css

@@ -62,11 +62,6 @@
   background-color: transparent !important;
   color: var(--solid-fg);
 }
-.panel.solid .header button {
-  background-color: var(--error) !important;
-  color: var(--error-foreground) !important;
-  border-color: var(--border-strong) !important;
-}
 .panel.solid .handleBar {
   background-color: var(--solid-fg);
   opacity: 0.8;
@@ -103,23 +98,6 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  /* Match Modal/Drawer's Close Button Styling */
-}
-.headerBody button {
-  background-color: var(--error) !important;
-  color: var(--error-foreground) !important;
-  border: var(--border-width) solid var(--border-strong) !important;
-  box-shadow: var(--shadow-sm) !important;
-}
-.headerBody button:hover {
-  background-color: var(--error) !important;
-  filter: brightness(1.1);
-  transform: translate(-2px, -2px);
-  box-shadow: var(--shadow-sm-hover) !important;
-}
-.headerBody button:active {
-  transform: translate(2px, 2px);
-  box-shadow: var(--shadow-sm-checked) !important;
 }
 
 .title {

package/dist/components/Slat/Slat.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+export interface SlatProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Main label (e.g. filename) */
+    label: React.ReactNode;
+    /** Secondary label (e.g. filesize) */
+    secondaryLabel?: React.ReactNode;
+    /** Icon/Graphics to display on the left */
+    prependContent?: React.ReactNode;
+    /** Content to display on the right (actions) */
+    appendContent?: React.ReactNode;
+    /** Variant of the slat */
+    variant?: "default" | "danger" | "success";
+}
+export declare const Slat: React.ForwardRefExoticComponent<SlatProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Slat/Slat.js

@@ -0,0 +1,27 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import styles from "./Slat.module.css";
+import { Text } from "../Text/Text.js";
+import { Stack, Flex } from "../Layout/Layout.js";
+import clsx from "clsx";
+export const Slat = React.forwardRef((_a, ref) => {
+    var { label, secondaryLabel, prependContent, appendContent, variant = "default", className, onClick } = _a, props = __rest(_a, ["label", "secondaryLabel", "prependContent", "appendContent", "variant", "className", "onClick"]);
+    return (_jsx("div", Object.assign({ ref: ref, role: onClick ? "button" : undefined, tabIndex: onClick ? 0 : undefined, className: clsx(styles.slat, styles[variant], { [styles.hoverable]: onClick }, className), onClick: onClick, onKeyDown: (e) => {
+            if (onClick && (e.key === "Enter" || e.key === " ")) {
+                e.preventDefault();
+                onClick(e);
+            }
+        } }, props, { children: _jsxs(Flex, { justify: "space-between", align: "center", gap: "var(--spacing-sm)", children: [_jsxs(Flex, { gap: "var(--spacing-sm)", align: "center", style: { flex: 1, minWidth: 0 }, children: [prependContent && (_jsx("div", { className: styles.prepend, children: prependContent })), _jsxs(Stack, { gap: 0, style: { flex: 1, minWidth: 0 }, children: [_jsx(Text, { className: styles.label, children: label }), secondaryLabel && (_jsx(Text, { variant: "small", className: styles.secondaryLabel, children: secondaryLabel }))] })] }), _jsx(Flex, { align: "center", gap: "var(--spacing-sm)", children: appendContent && (_jsx("div", { className: styles.append, children: appendContent })) })] }) })));
+});
+Slat.displayName = "Slat";