doom-design-system 0.1.7 → 0.1.8

package/dist/components/Toast/Toast.module.css

@@ -0,0 +1,87 @@
+@keyframes slideIn {
+  from {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+@keyframes slideOut {
+  from {
+    transform: translateX(0);
+    opacity: 1;
+  }
+  to {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+}
+.container {
+  position: fixed;
+  bottom: 2rem;
+  right: 2rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  z-index: var(--z-tooltip);
+  pointer-events: none; /* Allow clicking through the container area */
+}
+
+.toast {
+  min-width: 300px;
+  background: var(--card-bg);
+  border: var(--border-width) solid var(--card-border);
+  color: var(--foreground);
+  box-shadow: var(--shadow-hard);
+  padding: var(--spacing-md);
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  animation: slideIn 0.3s ease-out forwards;
+  position: relative;
+  overflow: hidden;
+  pointer-events: auto; /* Re-enable pointer events for the toast itself */
+  border-radius: var(--radius);
+}
+.toast.exiting {
+  animation: slideOut 0.3s ease-in forwards;
+}
+.toast {
+  /* Left Accent Bar */
+}
+.toast::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 6px;
+}
+.toast.success::before {
+  background-color: var(--success);
+}
+.toast.error::before {
+  background-color: var(--error);
+}
+.toast.warning::before {
+  background-color: var(--warning);
+}
+.toast.info::before {
+  background-color: var(--primary);
+}
+
+.closeButton {
+  background: none;
+  border: none;
+  margin-left: auto;
+  cursor: pointer;
+  font-size: 1.25rem;
+  color: var(--foreground);
+  opacity: 0.5;
+  transition: opacity 0.2s;
+}
+.closeButton:hover {
+  opacity: 1;
+}

package/dist/components/Tooltip/Tooltip.js

@@ -1,24 +1,8 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Popover } from '../Popover/Popover';
+import styles from './Tooltip.module.css';
 import { useState } from 'react';
-import styled from '@emotion/styled';
-import { Popover } from '../Popover';
-const TooltipTriggerWrapper = styled.div `
-  display: inline-block;
-  cursor: help; /* Optional hint */
-`;
-const TooltipBody = styled.div `
-  padding: 0.5rem 0.75rem;
-  background-color: var(--foreground);
-  color: var(--background);
-  font-size: var(--text-sm);
-  font-weight: 500;
-  white-space: nowrap;
-  border-radius: var(--radius);
-  border: var(--border-width) solid var(--card-border);
-  box-shadow: var(--shadow-sm);
-  z-index: var(--z-tooltip);
-`;
 export function Tooltip({ content, children, delay = 200, placement = 'top' }) {
     const [isVisible, setIsVisible] = useState(false);
     const [timeoutId, setTimeoutId] = useState(null);
@@ -33,5 +17,5 @@ export function Tooltip({ content, children, delay = 200, placement = 'top' }) {
     };
     // Map simplified placement to Popover placement
     const popoverPlacement = placement === 'top' ? 'top-center' : 'bottom-center';
-    return (_jsx(Popover, { isOpen: isVisible, onClose: hide, placement: popoverPlacement, offset: 8, trigger: _jsx(TooltipTriggerWrapper, { onMouseEnter: show, onMouseLeave: hide, onFocus: show, onBlur: hide, children: children }), content: _jsx(TooltipBody, { role: "tooltip", children: content }) }));
+    return (_jsx(Popover, { isOpen: isVisible, onClose: hide, placement: popoverPlacement, offset: 8, trigger: _jsx("div", { className: styles.triggerWrapper, onMouseEnter: show, onMouseLeave: hide, onFocus: show, onBlur: hide, children: children }), content: _jsx("div", { className: styles.tooltipBody, role: "tooltip", children: content }) }));
 }

package/dist/components/Tooltip/Tooltip.module.css

@@ -0,0 +1,17 @@
+.triggerWrapper {
+  display: inline-block;
+  cursor: help;
+}
+
+.tooltipBody {
+  padding: 0.5rem 0.75rem;
+  background-color: var(--foreground);
+  color: var(--background);
+  font-size: var(--text-sm);
+  font-weight: 500;
+  white-space: nowrap;
+  border-radius: var(--radius);
+  border: var(--border-width) solid var(--card-border);
+  box-shadow: var(--shadow-sm);
+  z-index: var(--z-tooltip);
+}