@bigtablet/design-system 1.6.0 → 1.6.2

package/dist/index.css

@@ -50,6 +50,24 @@
 }
 
 /* src/ui/feedback/alert/style.scss */
+@keyframes fade_in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes slide_up {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
 .alert_overlay {
   position: fixed;
   inset: 0;
@@ -73,6 +91,7 @@
   font-size: 1.125rem;
   line-height: 1.5;
   font-weight: 600;
+  color: #3b82f6;
   padding: 0.75rem 1.25rem 0.25rem;
 }
 .alert_modal_message {
@@ -81,11 +100,12 @@
   line-height: 1.5;
   color: #666666;
   padding: 1.25rem;
-  line-height: 1.6;
+  line-height: 1.75;
 }
 .alert_modal_actions {
   display: flex;
   gap: 0.5rem;
+  align-items: center;
   padding: 0 1.25rem 1.25rem;
 }
 .alert_modal_actions_left {
@@ -104,47 +124,79 @@
   font-weight: 600;
   cursor: pointer;
   border: 1px solid transparent;
-  transition: 0.2s ease-out;
+  line-height: 1.5;
+  transition:
+    background 0.2s ease-out,
+    border-color 0.2s ease-out,
+    box-shadow 0.2s ease-out,
+    transform 0.2s ease-out;
 }
 .alert_modal_button:focus-visible {
-  outline: 2px solid rgba(0, 0, 0, 0.08);
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.15);
+}
+.alert_modal_button:active:not(:disabled) {
+  transform: scale(0.98);
+}
+.alert_modal_button:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
 }
 .alert_modal_button_cancel {
   background: #ffffff;
   border-color: #e5e5e5;
   color: #1a1a1a;
 }
-.alert_modal_button_cancel:hover {
+.alert_modal_button_cancel:hover:not(:disabled) {
   background: #fafafa;
+  border-color: rgba(0, 0, 0, 0.08);
 }
 .alert_modal_button_confirm {
   color: #ffffff;
 }
-.alert_modal {
-}
 .alert_modal_info .alert_modal_title {
   color: #3b82f6;
 }
 .alert_modal_info .alert_modal_button_confirm {
   background: #3b82f6;
+  border-color: #3b82f6;
+}
+.alert_modal_info .alert_modal_button_confirm:hover:not(:disabled) {
+  background: rgb(29.7434146341, 111.3414634146, 244.6565853659);
+  border-color: rgb(29.7434146341, 111.3414634146, 244.6565853659);
 }
 .alert_modal_success .alert_modal_title {
   color: #10b981;
 }
 .alert_modal_success .alert_modal_button_confirm {
   background: #10b981;
+  border-color: #10b981;
+}
+.alert_modal_success .alert_modal_button_confirm:hover:not(:disabled) {
+  background: rgb(13.5641791045, 156.8358208955, 109.3611940299);
+  border-color: rgb(13.5641791045, 156.8358208955, 109.3611940299);
 }
 .alert_modal_warning .alert_modal_title {
   color: #f59e0b;
 }
 .alert_modal_warning .alert_modal_button_confirm {
   background: #f59e0b;
+  border-color: #f59e0b;
+}
+.alert_modal_warning .alert_modal_button_confirm:hover:not(:disabled) {
+  background: rgb(216.525984252, 139.3220472441, 8.874015748);
+  border-color: rgb(216.525984252, 139.3220472441, 8.874015748);
 }
 .alert_modal_error .alert_modal_title {
   color: #ef4444;
 }
 .alert_modal_error .alert_modal_button_confirm {
   background: #ef4444;
+  border-color: #ef4444;
+}
+.alert_modal_error .alert_modal_button_confirm:hover:not(:disabled) {
+  background: rgb(236.5881773399, 39.8118226601, 39.8118226601);
+  border-color: rgb(236.5881773399, 39.8118226601, 39.8118226601);
 }
 
 /* src/ui/feedback/loading/style.scss */
@@ -879,6 +931,93 @@
   color: #999999;
 }
 
+/* src/ui/navigation/sidebar/style.scss */
+.sidebar {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  height: 100%;
+  background: #ffffff;
+  border-right: 1px solid #e5e5e5;
+  padding: 0.5rem;
+  gap: 0.5rem;
+}
+.sidebar_brand {
+  padding: 0.5rem;
+  margin-bottom: 0.5rem;
+  border-bottom: 1px solid #e5e5e5;
+}
+.sidebar_brand_link {
+  display: block;
+  width: 100%;
+}
+.sidebar_brand_img {
+  display: block;
+  width: 100%;
+  height: auto;
+  object-fit: contain;
+}
+.sidebar_nav {
+  display: grid;
+  gap: 0.25rem;
+  padding: 0.5rem 0;
+}
+.sidebar_item {
+  display: grid;
+  grid-template-columns: 24px 1fr;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  border-radius: 8px;
+  color: #3b3b3b;
+  background: transparent;
+  border: 1px solid transparent;
+  cursor: pointer;
+  font-size: 0.9375rem;
+  line-height: 1.5;
+  transition:
+    background-color 0.2s ease-out,
+    color 0.2s ease-out,
+    border-color 0.2s ease-out;
+}
+.sidebar_item:hover {
+  background: #fafafa;
+  color: #1f2937;
+}
+.sidebar_item:hover .sidebar_icon {
+  color: #1f2937;
+}
+.sidebar_item.is_active {
+  position: relative;
+  background: #ffffff;
+  border-color: #e5e5e5;
+  color: #1f2937;
+  box-shadow: inset 0 0 0 1px #e5e5e5;
+}
+.sidebar_item.is_active::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 6px;
+  bottom: 6px;
+  width: 3px;
+  border-radius: 9999px;
+  background: #000000;
+}
+.sidebar_item.is_active .sidebar_icon {
+  color: #1f2937;
+}
+.sidebar_icon {
+  display: inline-grid;
+  place-items: center;
+  color: #6b7280;
+  transition: color 0.2s ease-out;
+}
+.sidebar_label {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
 /* src/ui/overlay/modal/style.scss */
 .modal {
   position: fixed;

package/dist/index.d.ts

@@ -31,23 +31,6 @@ declare const useAlert: () => AlertContextValue;
 declare const AlertProvider: React.FC<{
     children: React.ReactNode;
 }>;
-interface AlertProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
-    variant?: AlertVariant;
-    title?: React.ReactNode;
-    icon?: React.ReactNode;
-    closable?: boolean;
-    onClose?: () => void;
-    showActions?: boolean;
-    onConfirm?: () => void;
-    onCancel?: () => void;
-    confirmText?: string;
-    cancelText?: string;
-    actionsAlign?: AlertActionsAlign;
-}
-/**
- * @deprecated Use useAlert hook with AlertProvider instead
- */
-declare const Alert: ({ variant, title, icon, closable, onClose, showActions, onConfirm, onCancel, confirmText, cancelText, actionsAlign, className, children, ...props }: AlertProps) => react_jsx_runtime.JSX.Element;
 
 interface LoadingProps {
     size?: number;
@@ -147,6 +130,26 @@ interface PaginationProps {
 }
 declare const Pagination: ({ page, totalPages, onChange }: PaginationProps) => react_jsx_runtime.JSX.Element;
 
+interface SidebarItem {
+    href: string;
+    label: React.ReactNode;
+    icon?: React.ComponentType<{
+        size?: number;
+    }>;
+}
+type MatchMode = "startsWith" | "exact";
+interface SidebarProps {
+    items?: SidebarItem[];
+    activePath?: string;
+    onItemSelect?: (href: string) => void;
+    width?: number;
+    className?: string;
+    style?: React.CSSProperties;
+    match?: MatchMode;
+    brandHref?: string;
+}
+declare const Sidebar: ({ items, activePath, onItemSelect, width, className, style, match, brandHref, }: SidebarProps) => react_jsx_runtime.JSX.Element;
+
 interface ModalProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
     open: boolean;
     onClose?: () => void;
@@ -156,4 +159,4 @@ interface ModalProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title">
 }
 declare const Modal: ({ open, onClose, closeOnOverlay, width, title, children, className, ...props }: ModalProps) => react_jsx_runtime.JSX.Element | null;
 
-export { Alert, AlertProvider, Button, Card, Checkbox, FileInput, Loading, Modal, Pagination, Radio, Select, type SelectOption, Switch, TextField, ToastProvider, useAlert, useToast };
+export { AlertProvider, Button, Card, Checkbox, FileInput, Loading, Modal, Pagination, Radio, Select, type SelectOption, Sidebar, Switch, TextField, ToastProvider, useAlert, useToast };