doom-design-system 0.3.2 → 0.3.4

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/components/SplitButton/SplitButton.module.css

@@ -15,7 +15,7 @@
 }
 .container:hover {
   transform: translate(-2px, -2px);
-  box-shadow: var(--shadow-hover);
+  box-shadow: 6px 6px 0px 0px var(--border-strong);
 }
 .container[data-state=open] {
   transform: translate(-2px, -2px);

package/dist/index.d.ts

@@ -1,38 +1,40 @@
-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/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,40 @@
-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/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;

package/dist/styles/themes/definitions.d.ts

@@ -7,6 +7,7 @@ export declare const themes: {
             readonly "--card-bg": "#ffffff";
             readonly "--card-border": "#000000";
             readonly "--surface-accent": "#f1f5f9";
+            readonly "--border-strong": "#000000";
             readonly "--primary": "#a855f7";
             readonly "--primary-hover": "#9333ea";
             readonly "--primary-foreground": "#000000";
@@ -75,7 +76,6 @@ export declare const themes: {
             readonly "--size-touch-target": string;
             readonly "--common-black": "#000000";
             readonly "--common-white": "#ffffff";
-            readonly "--border-strong": "#000000";
             readonly "--border-width": string;
             readonly "--radius": string;
             readonly "--shadow-hard": string;
@@ -97,6 +97,7 @@ export declare const themes: {
             readonly "--foreground": "#e2e8f0";
             readonly "--card-bg": "#0f172a";
             readonly "--card-border": "#1e293b";
+            readonly "--border-strong": "#334155";
             readonly "--surface-accent": "#0f172a";
             readonly "--primary": "#10b981";
             readonly "--primary-hover": "#059669";
@@ -166,7 +167,6 @@ export declare const themes: {
             readonly "--size-touch-target": string;
             readonly "--common-black": "#000000";
             readonly "--common-white": "#ffffff";
-            readonly "--border-strong": "#000000";
             readonly "--border-width": string;
             readonly "--radius": string;
             readonly "--shadow-hard": string;
@@ -279,6 +279,7 @@ export declare const themes: {
             readonly "--foreground": "#E8E9ED";
             readonly "--card-bg": "#1A1F29";
             readonly "--card-border": "#2D3748";
+            readonly "--border-strong": "#111827";
             readonly "--surface-accent": "#111827";
             readonly "--primary": "#F7B731";
             readonly "--primary-hover": "#F5A623";
@@ -348,7 +349,6 @@ export declare const themes: {
             readonly "--size-touch-target": string;
             readonly "--common-black": "#000000";
             readonly "--common-white": "#ffffff";
-            readonly "--border-strong": "#000000";
             readonly "--border-width": string;
             readonly "--radius": string;
             readonly "--shadow-hard": string;

package/dist/styles/themes/definitions.js

@@ -2,11 +2,11 @@ import { palette, baseVariables } from "../tokens.js";
 export const themes = {
     default: {
         name: "Default",
-        variables: Object.assign(Object.assign({}, baseVariables), { "--background": palette.indigo[100], "--foreground": palette.common.black, "--card-bg": palette.common.white, "--card-border": palette.common.black, "--surface-accent": palette.slate[100], "--primary": palette.purple[500], "--primary-hover": palette.purple[600], "--primary-foreground": palette.common.black, "--shadow-primary": palette.purple[700], "--secondary": palette.yellow[400], "--secondary-foreground": palette.common.black, "--accent": palette.red[500], "--muted": palette.gray[400], "--muted-foreground": palette.gray[700], "--success": palette.green[500], "--success-foreground": palette.common.black, "--warning": palette.yellow[500], "--warning-foreground": palette.common.black, "--error": palette.red[500], "--error-foreground": palette.common.black, "--on-surface": palette.common.black, "--on-surface-muted": palette.gray[700], "--shadow-error": palette.red[600] }),
+        variables: Object.assign(Object.assign({}, baseVariables), { "--background": palette.indigo[100], "--foreground": palette.common.black, "--card-bg": palette.common.white, "--card-border": palette.common.black, "--surface-accent": palette.slate[100], "--border-strong": palette.common.black, "--primary": palette.purple[500], "--primary-hover": palette.purple[600], "--primary-foreground": palette.common.black, "--shadow-primary": palette.purple[700], "--secondary": palette.yellow[400], "--secondary-foreground": palette.common.black, "--accent": palette.red[500], "--muted": palette.gray[400], "--muted-foreground": palette.gray[700], "--success": palette.green[500], "--success-foreground": palette.common.black, "--warning": palette.yellow[500], "--warning-foreground": palette.common.black, "--error": palette.red[500], "--error-foreground": palette.common.black, "--on-surface": palette.common.black, "--on-surface-muted": palette.gray[700], "--shadow-error": palette.red[600] }),
     },
     doom: {
         name: "DOOMSDAY",
-        variables: Object.assign(Object.assign({}, baseVariables), { "--background": palette.slate[950], "--foreground": palette.slate[200], "--card-bg": palette.slate[900], "--card-border": palette.slate[800], "--surface-accent": palette.slate[900], "--primary": palette.green[600], "--primary-hover": palette.green[700], "--primary-foreground": palette.slate[950], "--shadow-primary": palette.common.black, "--secondary": palette.slate[600], "--secondary-foreground": palette.slate[50], "--accent": palette.red[500], "--muted": palette.slate[500], "--muted-foreground": palette.slate[400], "--success": palette.green[600], "--success-foreground": palette.slate[950], "--warning": palette.yellow[500], "--warning-foreground": palette.slate[950], "--error": palette.red[500], "--error-foreground": palette.common.black, "--on-surface": palette.slate[200], "--on-surface-muted": palette.slate[400], "--shadow-error": palette.common.black }),
+        variables: Object.assign(Object.assign({}, baseVariables), { "--background": palette.slate[950], "--foreground": palette.slate[200], "--card-bg": palette.slate[900], "--card-border": palette.slate[800], "--border-strong": palette.slate[700], "--surface-accent": palette.slate[900], "--primary": palette.green[600], "--primary-hover": palette.green[700], "--primary-foreground": palette.slate[950], "--shadow-primary": palette.common.black, "--secondary": palette.slate[600], "--secondary-foreground": palette.slate[50], "--accent": palette.red[500], "--muted": palette.slate[500], "--muted-foreground": palette.slate[400], "--success": palette.green[600], "--success-foreground": palette.slate[950], "--warning": palette.yellow[500], "--warning-foreground": palette.slate[950], "--error": palette.red[500], "--error-foreground": palette.common.black, "--on-surface": palette.slate[200], "--on-surface-muted": palette.slate[400], "--shadow-error": palette.common.black }),
     },
     neighbor: {
         name: "THE CAPTAIN",
@@ -14,6 +14,6 @@ export const themes = {
     },
     vigilante: {
         name: "DARK KNIGHT",
-        variables: Object.assign(Object.assign({}, baseVariables), { "--background": palette.gray[950], "--foreground": "#E8E9ED", "--card-bg": palette.gray[975], "--card-border": palette.gray[990], "--surface-accent": palette.gray[900], "--primary": palette.yellow[600], "--primary-hover": palette.yellow[700], "--primary-foreground": palette.gray[950], "--shadow-primary": palette.common.black, "--secondary": palette.gray[600], "--secondary-foreground": "#E8E9ED", "--accent": palette.blue[500], "--muted": palette.gray[500], "--muted-foreground": palette.gray[400], "--success": palette.green[400], "--success-foreground": palette.gray[950], "--warning": palette.yellow[700], "--warning-foreground": palette.gray[950], "--error": palette.red[700], "--error-foreground": palette.common.black, "--on-surface": "#E8E9ED", "--on-surface-muted": palette.gray[400], "--shadow-error": palette.common.black }),
+        variables: Object.assign(Object.assign({}, baseVariables), { "--background": palette.gray[950], "--foreground": "#E8E9ED", "--card-bg": palette.gray[975], "--card-border": palette.gray[990], "--border-strong": palette.gray[900], "--surface-accent": palette.gray[900], "--primary": palette.yellow[600], "--primary-hover": palette.yellow[700], "--primary-foreground": palette.gray[950], "--shadow-primary": palette.common.black, "--secondary": palette.gray[600], "--secondary-foreground": "#E8E9ED", "--accent": palette.blue[500], "--muted": palette.gray[500], "--muted-foreground": palette.gray[400], "--success": palette.green[400], "--success-foreground": palette.gray[950], "--warning": palette.yellow[700], "--warning-foreground": palette.gray[950], "--error": palette.red[700], "--error-foreground": palette.common.black, "--on-surface": "#E8E9ED", "--on-surface-muted": palette.gray[400], "--shadow-error": palette.common.black }),
     },
 };

package/dist/styles/tokens.js

@@ -183,7 +183,7 @@ export const baseVariables = {
     "--border-width": "2px",
     "--radius": "4px",
     "--shadow-hard": "4px 4px 0px 0px var(--border-strong)",
-    "--shadow-hover": "8px 8px 0px 0px var(--border-strong)",
+    "--shadow-hover": "6px 6px 0px 0px var(--border-strong)",
     // Typography Standards (Global)
     "--font-heading": "var(--font-montserrat)",
     "--heading-transform": "uppercase",