@bigtablet/design-system 1.6.1 → 1.6.2

package/dist/index.css

@@ -931,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 };