doom-design-system 0.3.3 → 0.4.0

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";

package/dist/components/Slat/Slat.module.css

@@ -0,0 +1,101 @@
+.slat {
+  background-color: var(--card-bg);
+  border: var(--border-width) solid var(--border-strong);
+  border-radius: var(--radius);
+  padding: var(--spacing-sm) var(--spacing-md);
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  user-select: none;
+  width: 100%;
+}
+@media (max-width: 640px) {
+  .slat {
+    padding: var(--spacing-sm);
+  }
+}
+@media (max-width: 360px) {
+  .slat {
+    padding: var(--spacing-sm) var(--spacing-md);
+  }
+}
+.slat.danger {
+  background-color: var(--error);
+  color: var(--error-foreground);
+  border-color: var(--border-strong);
+}
+.slat.danger > * {
+  --primary: var(--primary-foreground);
+  --primary-foreground: var(--primary);
+  --foreground: var(--primary-foreground);
+  --muted-foreground: var(--primary-foreground);
+}
+.slat.success {
+  background-color: var(--success);
+  color: var(--success-foreground);
+  border-color: var(--border-strong);
+}
+.slat.success > * {
+  --primary: var(--primary-foreground);
+  --primary-foreground: var(--primary);
+  --foreground: var(--primary-foreground);
+  --muted-foreground: var(--primary-foreground);
+}
+.slat.hoverable {
+  cursor: pointer;
+}
+.slat.hoverable:hover {
+  background-color: var(--surface-accent);
+  color: var(--foreground);
+  transform: translate(-2px, -2px);
+  box-shadow: 4px 4px 0px 0px var(--border-strong);
+}
+.slat.hoverable:active {
+  transform: translate(0, 0);
+  box-shadow: none;
+}
+.slat.hoverable.danger:hover {
+  background-color: var(--error);
+  filter: brightness(1.1);
+}
+.slat.hoverable.success:hover {
+  background-color: var(--success);
+  filter: brightness(1.1);
+}
+
+.label {
+  font-weight: 500;
+  font-family: var(--font-mono);
+  font-size: var(--text-sm);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: inherit;
+}
+@media (max-width: 640px) {
+  .label {
+    white-space: normal;
+    word-break: break-all;
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+  }
+}
+@media (max-width: 360px) {
+  .label {
+    -webkit-line-clamp: 2;
+  }
+}
+
+.secondaryLabel {
+  color: inherit;
+  opacity: 0.8;
+  font-size: 10px;
+  font-family: var(--font-mono);
+}
+
+.prepend,
+.append {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}

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

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

package/dist/components/Slat/index.js

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

package/dist/index.d.ts

@@ -1,38 +1,41 @@
-export * from './components/Badge';
-export * from './components/Button';
-export * from './components/Card';
-export * from './components/Dropdown';
-export * from './components/Form';
-export * from './components/Input';
-export * from './components/Layout';
-export * from './components/Link';
-export * from './components/Modal';
-export * from './components/Page';
-export * from './components/Popover';
-export * from './components/ProgressBar';
-export * from './components/Select';
-export * from './components/SplitButton';
-export * from './components/Table';
-export * from './components/Tabs';
-export * from './components/Text';
-export * from './components/Textarea';
-export * from './components/Toast';
-export * from './components/ActionRow';
-export * from './components/Skeleton';
-export * from './components/Switch';
-export * from './components/Alert';
-export * from './components/Tooltip';
-export * from './components/Avatar';
-export * from './components/Label';
-export * from './components/Accordion';
-export * from './components/Breadcrumbs';
-export * from './components/Pagination';
-export * from './components/RadioGroup';
-export * from './components/Slider';
-export * from './components/Drawer';
-export * from './components/Sheet';
-export * from './DesignSystemProvider';
-export * from './components/Icon';
-export * from './components/Checkbox';
-export * from './components/Spinner';
-export * from './styles/themes';
+export * from "./components/Badge";
+export * from "./components/Button";
+export * from "./components/Card";
+export * from "./components/Dropdown";
+export * from "./components/Form";
+export * from "./components/Input";
+export * from "./components/Image";
+export * from "./components/Layout";
+export * from "./components/Link";
+export * from "./components/Modal";
+export * from "./components/Page";
+export * from "./components/Popover";
+export * from "./components/ProgressBar";
+export * from "./components/Select";
+export * from "./components/SplitButton";
+export * from "./components/Table";
+export * from "./components/Tabs";
+export * from "./components/Text";
+export * from "./components/Textarea";
+export * from "./components/Toast";
+export * from "./components/ActionRow";
+export * from "./components/Skeleton";
+export * from "./components/Switch";
+export * from "./components/Alert";
+export * from "./components/Tooltip";
+export * from "./components/Avatar";
+export * from "./components/Label";
+export * from "./components/Accordion";
+export * from "./components/Breadcrumbs";
+export * from "./components/Pagination";
+export * from "./components/RadioGroup";
+export * from "./components/Slider";
+export * from "./components/Drawer";
+export * from "./components/Sheet";
+export * from "./DesignSystemProvider";
+export * from "./components/Icon";
+export * from "./components/Checkbox";
+export * from "./components/FileUpload";
+export * from "./components/Slat";
+export * from "./components/Spinner";
+export * from "./styles/themes";

package/dist/index.js

@@ -1,38 +1,41 @@
-export * from './components/Badge/index.js';
-export * from './components/Button/index.js';
-export * from './components/Card/index.js';
-export * from './components/Dropdown/index.js';
-export * from './components/Form/index.js';
-export * from './components/Input/index.js';
-export * from './components/Layout/index.js';
-export * from './components/Link/index.js';
-export * from './components/Modal/index.js';
-export * from './components/Page/index.js';
-export * from './components/Popover/index.js';
-export * from './components/ProgressBar/index.js';
-export * from './components/Select/index.js';
-export * from './components/SplitButton/index.js';
-export * from './components/Table/index.js';
-export * from './components/Tabs/index.js';
-export * from './components/Text/index.js';
-export * from './components/Textarea/index.js';
-export * from './components/Toast/index.js';
-export * from './components/ActionRow/index.js';
-export * from './components/Skeleton/index.js';
-export * from './components/Switch/index.js';
-export * from './components/Alert/index.js';
-export * from './components/Tooltip/index.js';
-export * from './components/Avatar/index.js';
-export * from './components/Label/index.js';
-export * from './components/Accordion/index.js';
-export * from './components/Breadcrumbs/index.js';
-export * from './components/Pagination/index.js';
-export * from './components/RadioGroup/index.js';
-export * from './components/Slider/index.js';
-export * from './components/Drawer/index.js';
-export * from './components/Sheet/index.js';
-export * from './DesignSystemProvider.js';
-export * from './components/Icon/index.js';
-export * from './components/Checkbox/index.js';
-export * from './components/Spinner/index.js';
-export * from './styles/themes/index.js';
+export * from "./components/Badge/index.js";
+export * from "./components/Button/index.js";
+export * from "./components/Card/index.js";
+export * from "./components/Dropdown/index.js";
+export * from "./components/Form/index.js";
+export * from "./components/Input/index.js";
+export * from "./components/Image/index.js";
+export * from "./components/Layout/index.js";
+export * from "./components/Link/index.js";
+export * from "./components/Modal/index.js";
+export * from "./components/Page/index.js";
+export * from "./components/Popover/index.js";
+export * from "./components/ProgressBar/index.js";
+export * from "./components/Select/index.js";
+export * from "./components/SplitButton/index.js";
+export * from "./components/Table/index.js";
+export * from "./components/Tabs/index.js";
+export * from "./components/Text/index.js";
+export * from "./components/Textarea/index.js";
+export * from "./components/Toast/index.js";
+export * from "./components/ActionRow/index.js";
+export * from "./components/Skeleton/index.js";
+export * from "./components/Switch/index.js";
+export * from "./components/Alert/index.js";
+export * from "./components/Tooltip/index.js";
+export * from "./components/Avatar/index.js";
+export * from "./components/Label/index.js";
+export * from "./components/Accordion/index.js";
+export * from "./components/Breadcrumbs/index.js";
+export * from "./components/Pagination/index.js";
+export * from "./components/RadioGroup/index.js";
+export * from "./components/Slider/index.js";
+export * from "./components/Drawer/index.js";
+export * from "./components/Sheet/index.js";
+export * from "./DesignSystemProvider.js";
+export * from "./components/Icon/index.js";
+export * from "./components/Checkbox/index.js";
+export * from "./components/FileUpload/index.js";
+export * from "./components/Slat/index.js";
+export * from "./components/Spinner/index.js";
+export * from "./styles/themes/index.js";

package/dist/styles/globals.css

@@ -1043,6 +1043,244 @@ body .left-10 {
 body .right-10 {
   right: 2.5rem;
 }
+@media (min-width: 360px) {
+  body .xxs\:hidden {
+    display: none;
+  }
+  body .xxs\:block {
+    display: block;
+  }
+  body .xxs\:flex {
+    display: flex;
+  }
+  body .xxs\:grid {
+    display: grid;
+  }
+  body .xxs\:flex-row {
+    flex-direction: row;
+  }
+  body .xxs\:flex-col {
+    flex-direction: column;
+  }
+  body .xxs\:grid-cols-1 {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
+  body .xxs\:grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  body .xxs\:grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+  body .xxs\:grid-cols-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+  body .xxs\:w-full {
+    width: 100%;
+  }
+  body .xxs\:w-auto {
+    width: auto;
+  }
+  body .xxs\:p-0 {
+    padding: 0;
+  }
+  body .xxs\:m-0 {
+    margin: 0;
+  }
+  body .xxs\:gap-0 {
+    gap: 0;
+  }
+  body .xxs\:p-1 {
+    padding: 0.25rem;
+  }
+  body .xxs\:m-1 {
+    margin: 0.25rem;
+  }
+  body .xxs\:gap-1 {
+    gap: 0.25rem;
+  }
+  body .xxs\:p-2 {
+    padding: 0.5rem;
+  }
+  body .xxs\:m-2 {
+    margin: 0.5rem;
+  }
+  body .xxs\:gap-2 {
+    gap: 0.5rem;
+  }
+  body .xxs\:p-3 {
+    padding: 0.75rem;
+  }
+  body .xxs\:m-3 {
+    margin: 0.75rem;
+  }
+  body .xxs\:gap-3 {
+    gap: 0.75rem;
+  }
+  body .xxs\:p-4 {
+    padding: 1rem;
+  }
+  body .xxs\:m-4 {
+    margin: 1rem;
+  }
+  body .xxs\:gap-4 {
+    gap: 1rem;
+  }
+  body .xxs\:p-5 {
+    padding: 1.25rem;
+  }
+  body .xxs\:m-5 {
+    margin: 1.25rem;
+  }
+  body .xxs\:gap-5 {
+    gap: 1.25rem;
+  }
+  body .xxs\:p-6 {
+    padding: 1.5rem;
+  }
+  body .xxs\:m-6 {
+    margin: 1.5rem;
+  }
+  body .xxs\:gap-6 {
+    gap: 1.5rem;
+  }
+  body .xxs\:p-7 {
+    padding: 1.75rem;
+  }
+  body .xxs\:m-7 {
+    margin: 1.75rem;
+  }
+  body .xxs\:gap-7 {
+    gap: 1.75rem;
+  }
+  body .xxs\:p-8 {
+    padding: 2rem;
+  }
+  body .xxs\:m-8 {
+    margin: 2rem;
+  }
+  body .xxs\:gap-8 {
+    gap: 2rem;
+  }
+}
+@media (min-width: 480px) {
+  body .xs\:hidden {
+    display: none;
+  }
+  body .xs\:block {
+    display: block;
+  }
+  body .xs\:flex {
+    display: flex;
+  }
+  body .xs\:grid {
+    display: grid;
+  }
+  body .xs\:flex-row {
+    flex-direction: row;
+  }
+  body .xs\:flex-col {
+    flex-direction: column;
+  }
+  body .xs\:grid-cols-1 {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
+  body .xs\:grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  body .xs\:grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+  body .xs\:grid-cols-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+  body .xs\:w-full {
+    width: 100%;
+  }
+  body .xs\:w-auto {
+    width: auto;
+  }
+  body .xs\:p-0 {
+    padding: 0;
+  }
+  body .xs\:m-0 {
+    margin: 0;
+  }
+  body .xs\:gap-0 {
+    gap: 0;
+  }
+  body .xs\:p-1 {
+    padding: 0.25rem;
+  }
+  body .xs\:m-1 {
+    margin: 0.25rem;
+  }
+  body .xs\:gap-1 {
+    gap: 0.25rem;
+  }
+  body .xs\:p-2 {
+    padding: 0.5rem;
+  }
+  body .xs\:m-2 {
+    margin: 0.5rem;
+  }
+  body .xs\:gap-2 {
+    gap: 0.5rem;
+  }
+  body .xs\:p-3 {
+    padding: 0.75rem;
+  }
+  body .xs\:m-3 {
+    margin: 0.75rem;
+  }
+  body .xs\:gap-3 {
+    gap: 0.75rem;
+  }
+  body .xs\:p-4 {
+    padding: 1rem;
+  }
+  body .xs\:m-4 {
+    margin: 1rem;
+  }
+  body .xs\:gap-4 {
+    gap: 1rem;
+  }
+  body .xs\:p-5 {
+    padding: 1.25rem;
+  }
+  body .xs\:m-5 {
+    margin: 1.25rem;
+  }
+  body .xs\:gap-5 {
+    gap: 1.25rem;
+  }
+  body .xs\:p-6 {
+    padding: 1.5rem;
+  }
+  body .xs\:m-6 {
+    margin: 1.5rem;
+  }
+  body .xs\:gap-6 {
+    gap: 1.5rem;
+  }
+  body .xs\:p-7 {
+    padding: 1.75rem;
+  }
+  body .xs\:m-7 {
+    margin: 1.75rem;
+  }
+  body .xs\:gap-7 {
+    gap: 1.75rem;
+  }
+  body .xs\:p-8 {
+    padding: 2rem;
+  }
+  body .xs\:m-8 {
+    margin: 2rem;
+  }
+  body .xs\:gap-8 {
+    gap: 2rem;
+  }
+}
 @media (min-width: 640px) {
   body .sm\:hidden {
     display: none;