@lateralus-ai/shipping-ui 1.4.13 → 1.4.14

package/src/components/Sidebar/Container.tsx

@@ -1,31 +1,31 @@
-import { useContext, type ReactNode } from "react"
-import { cn } from "../../utils/cn"
-import { collapsedContext } from "./Provider"
-
-export interface ContainerProps extends React.HTMLAttributes<HTMLDivElement> {
-  children?: ReactNode
-}
-
-export const Container = ({
-  className,
-  children,
-  ...props
-}: ContainerProps) => {
-  const { isCollapsed, isHovered, setIsHovered } = useContext(collapsedContext)!
-
-  return (
-    <div
-      className={cn(
-        className,
-        isCollapsed && "shadow-lg rounded-lg",
-        isCollapsed && !isHovered ? "w-auto" : "w-[280px]",
-        "bg-gray-50 p-2 flex flex-col justify-between items-center rounded-tr-lg rounded-br-lg"
-      )}
-      onMouseEnter={() => isCollapsed && setIsHovered(true)}
-      onMouseLeave={() => isCollapsed && setIsHovered(false)}
-      {...props}
-    >
-      {children}
-    </div>
-  )
-}
+import { useContext, type ReactNode } from "react"
+import { cn } from "../../utils/cn"
+import { collapsedContext } from "./Provider"
+
+export interface ContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+  children?: ReactNode
+}
+
+export const Container = ({
+  className,
+  children,
+  ...props
+}: ContainerProps) => {
+  const { isCollapsed, isHovered, setIsHovered } = useContext(collapsedContext)!
+
+  return (
+    <div
+      className={cn(
+        className,
+        isCollapsed && "shadow-lg rounded-lg",
+        isCollapsed && !isHovered ? "w-auto" : "w-[280px]",
+        "bg-gray-50 p-2 flex flex-col justify-between items-center rounded-tr-lg rounded-br-lg"
+      )}
+      onMouseEnter={() => isCollapsed && setIsHovered(true)}
+      onMouseLeave={() => isCollapsed && setIsHovered(false)}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}

package/src/components/Sidebar/Item.tsx

@@ -1,39 +1,39 @@
-import { useContext, type ReactNode } from "react";
-import { cn } from "../../utils/cn";
-import { collapsedContext } from "./Provider";
-
-interface ItemProps extends React.HTMLAttributes<HTMLDivElement> {
-  children?: ReactNode;
-  icon?: ReactNode;
-  isActive?: boolean;
-  trailing?: ReactNode;
-}
-
-export const Item = ({
-  children,
-  className,
-  icon,
-  isActive,
-  trailing,
-  ...props
-}: ItemProps) => {
-  const { isCollapsed, isHovered } = useContext(collapsedContext)!;
-
-  return (
-    <div
-      className={cn(
-        isActive ? "!text-gray-900" : "!text-gray-600",
-        "flex items-center justify-between w-full hover:bg-gray-100 text-caption-1-em hover:text-gray-900 h-[38px] rounded-lg px-2 cursor-pointer group",
-        className,
-      )}
-      {...props}
-    >
-      <div className="flex items-center gap-2">
-        {icon}
-        {(!isCollapsed || isHovered) && children}
-      </div>
-
-      {(!isCollapsed || isHovered) && trailing}
-    </div>
-  );
-};
+import { useContext, type ReactNode } from "react";
+import { cn } from "../../utils/cn";
+import { collapsedContext } from "./Provider";
+
+interface ItemProps extends React.HTMLAttributes<HTMLDivElement> {
+  children?: ReactNode;
+  icon?: ReactNode;
+  isActive?: boolean;
+  trailing?: ReactNode;
+}
+
+export const Item = ({
+  children,
+  className,
+  icon,
+  isActive,
+  trailing,
+  ...props
+}: ItemProps) => {
+  const { isCollapsed, isHovered } = useContext(collapsedContext)!;
+
+  return (
+    <div
+      className={cn(
+        isActive ? "!text-gray-900" : "!text-gray-600",
+        "flex items-center justify-between w-full hover:bg-gray-100 text-caption-1-em hover:text-gray-900 h-[38px] rounded-lg px-2 cursor-pointer group",
+        className,
+      )}
+      {...props}
+    >
+      <div className="flex items-center gap-2">
+        {icon}
+        {(!isCollapsed || isHovered) && children}
+      </div>
+
+      {(!isCollapsed || isHovered) && trailing}
+    </div>
+  );
+};

package/src/components/Sidebar/Layout.tsx

@@ -1,32 +1,32 @@
-import { Provider } from "./Provider"
-import { Container, type ContainerProps } from "./Container"
-import { ReactNode } from "react"
-import { SideContainer } from "./SideContainer"
-
-interface LayoutProps extends ContainerProps {
-  isCollapsed?: boolean
-  sideContainer?: ReactNode
-  sideClassName?: string
-  onSwitchLayout?: (isCollapsed: boolean) => void
-}
-
-export const Layout = ({
-  className,
-  children,
-  isCollapsed,
-  sideContainer,
-  sideClassName,
-  onSwitchLayout,
-  ...props
-}: LayoutProps) => {
-  return (
-    <Provider isCollapsed={isCollapsed} onSwitchLayout={onSwitchLayout}>
-      {sideContainer && (
-        <SideContainer className={sideClassName}>{sideContainer}</SideContainer>
-      )}
-      <Container className={className} {...props}>
-        {children}
-      </Container>
-    </Provider>
-  )
-}
+import { Provider } from "./Provider"
+import { Container, type ContainerProps } from "./Container"
+import { ReactNode } from "react"
+import { SideContainer } from "./SideContainer"
+
+interface LayoutProps extends ContainerProps {
+  isCollapsed?: boolean
+  sideContainer?: ReactNode
+  sideClassName?: string
+  onSwitchLayout?: (isCollapsed: boolean) => void
+}
+
+export const Layout = ({
+  className,
+  children,
+  isCollapsed,
+  sideContainer,
+  sideClassName,
+  onSwitchLayout,
+  ...props
+}: LayoutProps) => {
+  return (
+    <Provider isCollapsed={isCollapsed} onSwitchLayout={onSwitchLayout}>
+      {sideContainer && (
+        <SideContainer className={sideClassName}>{sideContainer}</SideContainer>
+      )}
+      <Container className={className} {...props}>
+        {children}
+      </Container>
+    </Provider>
+  )
+}

package/src/components/Sidebar/Provider.tsx

@@ -1,47 +1,47 @@
-import { createContext, useState, type ReactNode } from "react";
-
-export const collapsedContext = createContext<
-  | {
-      isCollapsed: boolean;
-      toggleCollapsed: () => void;
-      isHovered: boolean;
-      setIsHovered: (value: boolean) => void;
-    }
-  | undefined
->(undefined);
-
-interface ProviderProps {
-  children: ReactNode;
-  isCollapsed?: boolean;
-  onSwitchLayout?: (isCollapsed: boolean) => void;
-}
-
-export const Provider = ({
-  children,
-  isCollapsed: controlledIsCollapsed,
-  onSwitchLayout,
-}: ProviderProps) => {
-  const [internalIsCollapsed, setInternalIsCollapsed] = useState(false);
-  const [isHovered, setIsHovered] = useState(false);
-
-  const isCollapsed =
-    controlledIsCollapsed !== undefined
-      ? controlledIsCollapsed
-      : internalIsCollapsed;
-
-  const toggleCollapsed = (value?: boolean) => {
-    const newValue = value ?? !isCollapsed;
-    if (controlledIsCollapsed === undefined) {
-      setInternalIsCollapsed(newValue);
-    }
-    onSwitchLayout?.(newValue);
-  };
-
-  return (
-    <collapsedContext.Provider
-      value={{ isCollapsed, toggleCollapsed, isHovered, setIsHovered }}
-    >
-      {children}
-    </collapsedContext.Provider>
-  );
-};
+import { createContext, useState, type ReactNode } from "react";
+
+export const collapsedContext = createContext<
+  | {
+      isCollapsed: boolean;
+      toggleCollapsed: () => void;
+      isHovered: boolean;
+      setIsHovered: (value: boolean) => void;
+    }
+  | undefined
+>(undefined);
+
+interface ProviderProps {
+  children: ReactNode;
+  isCollapsed?: boolean;
+  onSwitchLayout?: (isCollapsed: boolean) => void;
+}
+
+export const Provider = ({
+  children,
+  isCollapsed: controlledIsCollapsed,
+  onSwitchLayout,
+}: ProviderProps) => {
+  const [internalIsCollapsed, setInternalIsCollapsed] = useState(false);
+  const [isHovered, setIsHovered] = useState(false);
+
+  const isCollapsed =
+    controlledIsCollapsed !== undefined
+      ? controlledIsCollapsed
+      : internalIsCollapsed;
+
+  const toggleCollapsed = (value?: boolean) => {
+    const newValue = value ?? !isCollapsed;
+    if (controlledIsCollapsed === undefined) {
+      setInternalIsCollapsed(newValue);
+    }
+    onSwitchLayout?.(newValue);
+  };
+
+  return (
+    <collapsedContext.Provider
+      value={{ isCollapsed, toggleCollapsed, isHovered, setIsHovered }}
+    >
+      {children}
+    </collapsedContext.Provider>
+  );
+};

package/src/components/Sidebar/SecondaryItem.tsx

@@ -1,39 +1,39 @@
-import { useContext, type ReactNode } from "react";
-import { cn } from "../../utils/cn";
-import { collapsedContext } from "./Provider";
-
-interface SecondaryItemProps extends React.HTMLAttributes<HTMLDivElement> {
-  children?: ReactNode;
-  icon?: ReactNode;
-  isActive?: boolean;
-  trailing?: ReactNode;
-}
-
-export const SecondaryItem = ({
-  children,
-  className,
-  isActive,
-  trailing,
-  icon,
-  ...props
-}: SecondaryItemProps) => {
-  const { isCollapsed, isHovered } = useContext(collapsedContext)!;
-
-  return (
-    <div
-      className={cn(
-        isActive ? "!text-gray-900" : "!text-gray-600",
-        "flex items-center justify-between w-full hover:bg-gray-100 text-caption-1-em hover:text-gray-900 h-[38px] rounded-lg pr-2 pl-3 cursor-pointer group text-sm",
-        className,
-      )}
-      {...props}
-    >
-      <div className="flex items-center gap-2 overflow-auto">
-        {(!isCollapsed || isHovered) && icon}{" "}
-        {(!isCollapsed || isHovered) && children}
-      </div>
-
-      {(!isCollapsed || isHovered) && trailing}
-    </div>
-  );
-};
+import { useContext, type ReactNode } from "react";
+import { cn } from "../../utils/cn";
+import { collapsedContext } from "./Provider";
+
+interface SecondaryItemProps extends React.HTMLAttributes<HTMLDivElement> {
+  children?: ReactNode;
+  icon?: ReactNode;
+  isActive?: boolean;
+  trailing?: ReactNode;
+}
+
+export const SecondaryItem = ({
+  children,
+  className,
+  isActive,
+  trailing,
+  icon,
+  ...props
+}: SecondaryItemProps) => {
+  const { isCollapsed, isHovered } = useContext(collapsedContext)!;
+
+  return (
+    <div
+      className={cn(
+        isActive ? "!text-gray-900" : "!text-gray-600",
+        "flex items-center justify-between w-full hover:bg-gray-100 text-caption-1-em hover:text-gray-900 h-[38px] rounded-lg pr-2 pl-3 cursor-pointer group text-sm",
+        className,
+      )}
+      {...props}
+    >
+      <div className="flex items-center gap-2 overflow-auto">
+        {(!isCollapsed || isHovered) && icon}{" "}
+        {(!isCollapsed || isHovered) && children}
+      </div>
+
+      {(!isCollapsed || isHovered) && trailing}
+    </div>
+  );
+};

package/src/components/Sidebar/SideContainer.tsx

@@ -1,31 +1,31 @@
-import { useContext, type ReactNode } from "react"
-import { cn } from "../../utils/cn"
-import { collapsedContext } from "./Provider"
-
-export interface SideContainerProps
-  extends React.HTMLAttributes<HTMLDivElement> {
-  children?: ReactNode
-}
-
-export const SideContainer = ({
-  className,
-  children,
-  ...props
-}: SideContainerProps) => {
-  const { isCollapsed, setIsHovered } = useContext(collapsedContext)!
-
-  return (
-    <div
-      className={cn(
-        className,
-        isCollapsed && "!hidden",
-        "p-2 flex flex-col gap-2 items-center rounded-tl-lg rounded-bl-lg w-16"
-      )}
-      onMouseEnter={() => isCollapsed && setIsHovered(true)}
-      onMouseLeave={() => isCollapsed && setIsHovered(false)}
-      {...props}
-    >
-      {children}
-    </div>
-  )
-}
+import { useContext, type ReactNode } from "react"
+import { cn } from "../../utils/cn"
+import { collapsedContext } from "./Provider"
+
+export interface SideContainerProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  children?: ReactNode
+}
+
+export const SideContainer = ({
+  className,
+  children,
+  ...props
+}: SideContainerProps) => {
+  const { isCollapsed, setIsHovered } = useContext(collapsedContext)!
+
+  return (
+    <div
+      className={cn(
+        className,
+        isCollapsed && "!hidden",
+        "p-2 flex flex-col gap-2 items-center rounded-tl-lg rounded-bl-lg w-16"
+      )}
+      onMouseEnter={() => isCollapsed && setIsHovered(true)}
+      onMouseLeave={() => isCollapsed && setIsHovered(false)}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}

package/src/components/Sidebar/ToggleCollapseButton.tsx

@@ -1,24 +1,24 @@
-import { useContext } from "react";
-import { IconButton } from "@material-tailwind/react";
-import { collapsedContext } from "./Provider";
-import CloseSidebarIcon from "../icons/CloseSidebarIcon";
-import CloseSidebarMidIcon from "../icons/CloseSidebarMidIcon";
-
-export const ToggleCollapseButton = () => {
-  const { isCollapsed, isHovered, toggleCollapsed } =
-    useContext(collapsedContext)!;
-
-  if (isCollapsed && !isHovered) {
-    return null;
-  }
-
-  return (
-    <IconButton variant="text" color="gray" onClick={() => toggleCollapsed()}>
-      {isCollapsed ? (
-        <CloseSidebarIcon className="size-4" />
-      ) : (
-        <CloseSidebarMidIcon className="size-4" />
-      )}
-    </IconButton>
-  );
-};
+import { useContext } from "react";
+import { IconButton } from "@material-tailwind/react";
+import { collapsedContext } from "./Provider";
+import CloseSidebarIcon from "../icons/CloseSidebarIcon";
+import CloseSidebarMidIcon from "../icons/CloseSidebarMidIcon";
+
+export const ToggleCollapseButton = () => {
+  const { isCollapsed, isHovered, toggleCollapsed } =
+    useContext(collapsedContext)!;
+
+  if (isCollapsed && !isHovered) {
+    return null;
+  }
+
+  return (
+    <IconButton variant="text" color="gray" onClick={() => toggleCollapsed()}>
+      {isCollapsed ? (
+        <CloseSidebarIcon className="size-4" />
+      ) : (
+        <CloseSidebarMidIcon className="size-4" />
+      )}
+    </IconButton>
+  );
+};

package/src/components/Sidebar/index.ts

@@ -1,8 +1,8 @@
-export { Provider } from "./Provider"
-export { Container } from "./Container"
-export { SideContainer } from "./SideContainer"
-export { Layout } from "./Layout"
-export { Button } from "./Button"
-export { ToggleCollapseButton } from "./ToggleCollapseButton"
-export { Item } from "./Item"
-export { SecondaryItem } from "./SecondaryItem"
+export { Provider } from "./Provider"
+export { Container } from "./Container"
+export { SideContainer } from "./SideContainer"
+export { Layout } from "./Layout"
+export { Button } from "./Button"
+export { ToggleCollapseButton } from "./ToggleCollapseButton"
+export { Item } from "./Item"
+export { SecondaryItem } from "./SecondaryItem"

package/src/components/Tabs.tsx

@@ -1,43 +1,43 @@
-import React, { useState } from "react";
-import "../styles/tabs.css";
-import {
-  Tabs,
-  TabPanel,
-  TabsBody,
-  TabsHeader,
-  Tab,
-} from "@material-tailwind/react";
-import { Icon } from "@iconify/react";
-import { cn } from "../utils/cn";
-import { SettingsIcon } from "./icons/SettingsIcon";
-
-interface Tab {
-  id: string;
-  label: string;
-  content: React.ReactNode;
-}
-
-interface TabsProps {
-  tabs: Tab[];
-  defaultTab?: string;
-}
-
-export const TabsContainer: React.FC<TabsProps> = () => {
-  return (
-    <Tabs className="w-[800px]">
-      <TabsHeader>
-        <Tab value="chats">Chats</Tab>
-        <Tab value="issues">Issues</Tab>
-
-        <button className="cursor-pointer mb-2 ml-auto rounded p-1 hover:bg-gray-100">
-          <SettingsIcon className="size-4" />
-        </button>
-      </TabsHeader>
-
-      <TabsBody>
-        <TabPanel value="chats">ChatsPanel</TabPanel>
-        <TabPanel value="issues">IssuesPanel</TabPanel>
-      </TabsBody>
-    </Tabs>
-  );
-};
+import React, { useState } from "react";
+import "../styles/tabs.css";
+import {
+  Tabs,
+  TabPanel,
+  TabsBody,
+  TabsHeader,
+  Tab,
+} from "@material-tailwind/react";
+import { Icon } from "@iconify/react";
+import { cn } from "../utils/cn";
+import { SettingsIcon } from "./icons/SettingsIcon";
+
+interface Tab {
+  id: string;
+  label: string;
+  content: React.ReactNode;
+}
+
+interface TabsProps {
+  tabs: Tab[];
+  defaultTab?: string;
+}
+
+export const TabsContainer: React.FC<TabsProps> = () => {
+  return (
+    <Tabs className="w-[800px]">
+      <TabsHeader>
+        <Tab value="chats">Chats</Tab>
+        <Tab value="issues">Issues</Tab>
+
+        <button className="cursor-pointer mb-2 ml-auto rounded p-1 hover:bg-gray-100">
+          <SettingsIcon className="size-4" />
+        </button>
+      </TabsHeader>
+
+      <TabsBody>
+        <TabPanel value="chats">ChatsPanel</TabPanel>
+        <TabPanel value="issues">IssuesPanel</TabPanel>
+      </TabsBody>
+    </Tabs>
+  );
+};

package/src/components/icons/CloseSidebarIcon.tsx

@@ -1,19 +1,19 @@
-import React from "react";
-
-export default function CloseSidebarIcon(props: React.SVGProps<SVGSVGElement>) {
-  return (
-    <svg
-      width="16"
-      height="16"
-      viewBox="0 0 16 16"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <path
-        d="M13 1C14.6569 1 16 2.34315 16 4V12L15.9961 12.1543C15.9158 13.7394 14.6051 15 13 15H3L2.8457 14.9961C1.31166 14.9184 0.0816253 13.6883 0.00390625 12.1543L0 12V4C1.28853e-07 2.34315 1.34315 1 3 1H13ZM3 2.5C2.17157 2.5 1.5 3.17157 1.5 4V12C1.5 12.8284 2.17157 13.5 3 13.5H13C13.8284 13.5 14.5 12.8284 14.5 12V4C14.5 3.17157 13.8284 2.5 13 2.5H3ZM3.75 3.5C4.16421 3.5 4.5 3.83579 4.5 4.25V11.75C4.5 12.1642 4.16421 12.5 3.75 12.5C3.33579 12.5 3 12.1642 3 11.75V4.25C3 3.83579 3.33579 3.5 3.75 3.5Z"
-        fill="currentColor"
-      />
-    </svg>
-  );
-}
+import React from "react";
+
+export default function CloseSidebarIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M13 1C14.6569 1 16 2.34315 16 4V12L15.9961 12.1543C15.9158 13.7394 14.6051 15 13 15H3L2.8457 14.9961C1.31166 14.9184 0.0816253 13.6883 0.00390625 12.1543L0 12V4C1.28853e-07 2.34315 1.34315 1 3 1H13ZM3 2.5C2.17157 2.5 1.5 3.17157 1.5 4V12C1.5 12.8284 2.17157 13.5 3 13.5H13C13.8284 13.5 14.5 12.8284 14.5 12V4C14.5 3.17157 13.8284 2.5 13 2.5H3ZM3.75 3.5C4.16421 3.5 4.5 3.83579 4.5 4.25V11.75C4.5 12.1642 4.16421 12.5 3.75 12.5C3.33579 12.5 3 12.1642 3 11.75V4.25C3 3.83579 3.33579 3.5 3.75 3.5Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}