@mbao01/common 0.0.48 → 0.0.50

package/src/components/Sidebar/types.ts

@@ -0,0 +1,74 @@
+import type { TooltipProviderProps } from "@radix-ui/react-tooltip";
+import type { HTMLAttributes } from "react";
+import type { VariantProps } from "../../libs";
+import type { TooltipContentProps } from "../Tooltip/types";
+import { getSidebarMenuButtonClasses } from "./constants";
+
+export type SidebarContextProps = {
+  state: "expanded" | "collapsed";
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  openMobile: boolean;
+  setOpenMobile: (open: boolean) => void;
+  isMobile: boolean;
+  toggleSidebar: () => void;
+};
+
+export type SidebarProps = HTMLAttributes<HTMLDivElement> &
+  Partial<{
+    side: "left" | "right";
+    variant: "sidebar" | "floating" | "inset";
+    collapsible: "offcanvas" | "icon" | "none";
+  }>;
+
+export type SidebarProviderProps = HTMLAttributes<HTMLDivElement> & {
+  defaultOpen?: boolean;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  tooltipProvider?: TooltipProviderProps;
+};
+
+export type SidebarGroupProps = HTMLAttributes<HTMLDivElement>;
+
+export type SidebarGroupLabelProps = HTMLAttributes<HTMLDivElement> & Partial<{ asChild: boolean }>;
+
+export type SidebarGroupActionProps = HTMLAttributes<HTMLButtonElement> &
+  Partial<{ asChild: boolean }>;
+
+export type SidebarGroupContentProps = HTMLAttributes<HTMLDivElement>;
+
+export type SidebarMenuProps = HTMLAttributes<HTMLUListElement>;
+
+export type SidebarMenuItemProps = HTMLAttributes<HTMLLIElement>;
+
+export type SidebarMenuButtonProps = HTMLAttributes<HTMLButtonElement> &
+  Partial<{
+    asChild: boolean;
+    isActive: boolean;
+    tooltip: string | TooltipContentProps;
+  }> &
+  VariantProps<typeof getSidebarMenuButtonClasses>;
+
+export type SidebarMenuActionProps = HTMLAttributes<HTMLButtonElement> &
+  Partial<{
+    asChild: boolean;
+    showOnHover: boolean;
+  }>;
+
+export type SidebarMenuBadgeProps = HTMLAttributes<HTMLDivElement>;
+
+export type SidebarMenuSkeletonProps = HTMLAttributes<HTMLDivElement> &
+  Partial<{
+    showIcon: boolean;
+  }>;
+
+export type SidebarMenuSubProps = HTMLAttributes<HTMLUListElement>;
+
+export type SidebarMenuSubItemProps = HTMLAttributes<HTMLLIElement>;
+
+export type SidebarMenuSubButtonProps = HTMLAttributes<HTMLAnchorElement> &
+  Partial<{
+    asChild: boolean;
+    size: "sm" | "md";
+    isActive: boolean;
+  }>;

package/src/components/Widget/Widgets.example.tsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { MoveIcon, TrashIcon } from "@radix-ui/react-icons";
+import { MoveIcon, OctagonXIcon } from "lucide-react";
 import { Draggable } from "../DragAndDrop";
 import { useWidgets } from "./hooks/useWidgets/useWidgets";
 import { Widget } from "./Widget";
@@ -103,7 +103,7 @@ const Widgets = () => {
                   aria-label={`Delete widget ${widget.id}`}
                   className="transition-all hover:text-error"
                 >
-                  <TrashIcon />
+                  <OctagonXIcon />
                 </Draggable.Action>
               </div>
             )}

package/src/hooks/index.ts

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

package/src/hooks/useIsMobile/index.ts

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

package/src/hooks/useIsMobile/useIsMobile.ts

@@ -0,0 +1,19 @@
+import { useEffect, useState } from "react";
+
+const MOBILE_BREAKPOINT = 768;
+
+export const useIsMobile = () => {
+  const [isMobile, setIsMobile] = useState<boolean | undefined>(undefined);
+
+  useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    };
+    mql.addEventListener("change", onChange);
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
+
+  return Boolean(isMobile);
+};

package/src/index.ts

@@ -1,7 +1,7 @@
 /** actions */
 export * from "./components/Anchor";
 export * from "./components/Button";
-export * from "./components/Breadcrumbs";
+export * from "./components/Breadcrumb";
 export * from "./components/Menu";
 export * from "./components/Pagination";
 export * from "./components/ThemeSwitch";
@@ -46,3 +46,6 @@ export * from "./components/HoverCard";
 export * from "./components/Popover";
 export * from "./components/Slot";
 export * from "./components/Widget";
+
+/** molecules */
+export * from "./components/Sidebar";

package/dist/types/components/Breadcrumbs/Breadcrumbs.d.ts

@@ -1,3 +0,0 @@
-import { BreadcrumbProps, BreadcrumbsProps } from './types';
-export declare const Breadcrumbs: (props: BreadcrumbsProps) => import("react/jsx-runtime").JSX.Element;
-export declare const Breadcrumb: (props: BreadcrumbProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Breadcrumbs/index.d.ts

@@ -1 +0,0 @@
-export { Breadcrumbs } from './Breadcrumbs';

package/dist/types/components/Breadcrumbs/types.d.ts

@@ -1,2 +0,0 @@
-export type BreadcrumbProps = React.HTMLAttributes<HTMLLIElement>;
-export type BreadcrumbsProps = React.HTMLAttributes<HTMLUListElement>;

package/src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -1,13 +0,0 @@
-import type { BreadcrumbProps, BreadcrumbsProps } from "./types";
-
-export const Breadcrumbs = (props: BreadcrumbsProps) => {
-  return (
-    <div className="breadcrumbs -ml-1 w-fit px-1 text-sm">
-      <ul {...props} />
-    </div>
-  );
-};
-
-export const Breadcrumb = (props: BreadcrumbProps) => {
-  return <li {...props} />;
-};

package/src/components/Breadcrumbs/index.ts

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

package/src/components/Breadcrumbs/types.ts

@@ -1,3 +0,0 @@
-export type BreadcrumbProps = React.HTMLAttributes<HTMLLIElement>;
-
-export type BreadcrumbsProps = React.HTMLAttributes<HTMLUListElement>;