@lateralus-ai/shipping-ui 1.0.4

package/src/components/Sidebar/Provider.tsx

@@ -0,0 +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>
+  );
+};

package/src/components/Sidebar/SecondaryItem.tsx

@@ -0,0 +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>
+  );
+};

package/src/components/Sidebar/ToggleCollapseButton.tsx

@@ -0,0 +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>
+  );
+};

package/src/components/Sidebar/index.ts

@@ -0,0 +1,7 @@
+export { Provider } from "./Provider";
+export { Container } from "./Container";
+export { Layout } from "./Layout";
+export { Button } from "./Button";
+export { ToggleCollapseButton } from "./ToggleCollapseButton";
+export { Item } from "./Item";
+export { SecondaryItem } from "./SecondaryItem";

package/src/components/icons/CloseSidebarIcon.tsx

@@ -0,0 +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>
+  );
+}

package/src/components/icons/CloseSidebarMidIcon.tsx

@@ -0,0 +1,19 @@
+export default function CloseSidebarMidIcon(
+  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.5H3ZM7.5 4C7.77614 4 8 4.22386 8 4.5V11.5C8 11.7761 7.77614 12 7.5 12H3.5C3.22386 12 3 11.7761 3 11.5V4.5C3 4.22386 3.22386 4 3.5 4H7.5Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}

package/src/components/icons/ExpandIcon.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+const ExpandIcon = (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="M2.25 5.5C2.66421 5.5 3 5.83579 3 6.25C3 6.66421 2.66421 7 2.25 7H2C1.72386 7 1.5 7.22386 1.5 7.5V13.5C1.5 13.7761 1.72386 14 2 14H8C8.27614 14 8.5 13.7761 8.5 13.5V13.25C8.5 12.8358 8.83579 12.5 9.25 12.5C9.66421 12.5 10 12.8358 10 13.25V13.5C10 14.5357 9.21278 15.387 8.2041 15.4893L8 15.5H2L1.7959 15.4893C0.854346 15.3938 0.1062 14.6457 0.0107422 13.7041L0 13.5V7.5C0 6.39543 0.895431 5.5 2 5.5H2.25ZM13.75 0C14.7165 1.28853e-07 15.5 0.783502 15.5 1.75V9.75C15.5 10.7165 14.7165 11.5 13.75 11.5H5.75C4.7835 11.5 4 10.7165 4 9.75V1.75C4 0.783502 4.7835 8.0532e-09 5.75 0H13.75ZM5.75 1.5C5.61193 1.5 5.5 1.61193 5.5 1.75V9.75C5.5 9.88807 5.61193 10 5.75 10H13.75C13.8881 10 14 9.88807 14 9.75V1.75C14 1.61193 13.8881 1.5 13.75 1.5H5.75ZM11.75 3C11.795 3 11.839 3.00413 11.8818 3.01172C11.8874 3.0127 11.8929 3.01354 11.8984 3.01465C11.9118 3.01733 11.9244 3.02298 11.9375 3.02637C11.9707 3.03495 12.0041 3.04344 12.0361 3.05664C12.0653 3.06868 12.092 3.08512 12.1191 3.10059C12.1763 3.1331 12.2316 3.171 12.2803 3.21973C12.3287 3.26812 12.366 3.3232 12.3984 3.37988C12.414 3.40703 12.4303 3.43375 12.4424 3.46289C12.4631 3.51289 12.4779 3.56459 12.4873 3.61719C12.495 3.66035 12.5 3.70462 12.5 3.75V7.75C12.5 8.16421 12.1642 8.5 11.75 8.5C11.3358 8.5 11 8.16421 11 7.75V5.56055L8.28027 8.28027C7.98738 8.57317 7.51262 8.57317 7.21973 8.28027C6.92683 7.98738 6.92683 7.51262 7.21973 7.21973L9.93945 4.5H7.75C7.33579 4.5 7 4.16421 7 3.75C7 3.33579 7.33579 3 7.75 3H11.75Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export default ExpandIcon;

package/src/components/icons/SendArrowIcon.tsx

@@ -0,0 +1,23 @@
+export default function SendArrowIcon({ className = "", size = "1em" }) {
+  return (
+    <svg
+      width="24"
+      height="25"
+      viewBox="0 0 24 25"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path
+        d="M12.001 7.7395C12.2367 7.73978 12.4591 7.85076 12.6006 8.03931L15.376 11.7395C15.5459 11.9666 15.5731 12.2708 15.4463 12.5247C15.3193 12.7785 15.0592 12.9395 14.7754 12.9397H12.75V17.2766C12.7499 17.6907 12.4142 18.0266 12 18.0266C11.5858 18.0266 11.2501 17.6907 11.25 17.2766V12.9397H9.22559C8.94169 12.9397 8.68182 12.7785 8.55469 12.5247C8.42778 12.2706 8.45558 11.9667 8.62598 11.7395L11.4004 8.03931L11.457 7.97192C11.5977 7.82422 11.7945 7.7395 12.001 7.7395Z"
+        fill="currentColor"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M12 2.65161C17.5228 2.65161 22 7.12876 22 12.6516C22 18.1744 17.5228 22.6516 12 22.6516C6.47715 22.6516 2 18.1744 2 12.6516C2 7.12876 6.47715 2.65161 12 2.65161ZM12 4.15161C7.30558 4.15161 3.5 7.95719 3.5 12.6516C3.5 17.346 7.30558 21.1516 12 21.1516C16.6944 21.1516 20.5 17.346 20.5 12.6516C20.5 7.95719 16.6944 4.15161 12 4.15161Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}

package/src/components/icons/SendArrowIconGreen.tsx

@@ -0,0 +1,17 @@
+export default function SendArrowIconGreen({ className = "", size = "1em" }) {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path
+        d="M12 2C10.0222 2 8.08879 2.58649 6.4443 3.6853C4.79981 4.78412 3.51809 6.3459 2.76121 8.17316C2.00433 10.0004 1.8063 12.0111 2.19215 13.9509C2.578 15.8907 3.53041 17.6725 4.92894 19.0711C6.32746 20.4696 8.10929 21.422 10.0491 21.8078C11.9889 22.1937 13.9996 21.9957 15.8268 21.2388C17.6541 20.4819 19.2159 19.2002 20.3147 17.5557C21.4135 15.9112 22 13.9778 22 12C21.9971 9.34871 20.9426 6.80684 19.0679 4.9321C17.1932 3.05736 14.6513 2.00287 12 2ZM15.7092 11.7642C15.6751 11.8349 15.6217 11.8945 15.5553 11.9363C15.4888 11.978 15.4118 12.0001 15.3333 12H12.8333V16.1667C12.8333 16.3877 12.7455 16.5996 12.5893 16.7559C12.433 16.9122 12.221 17 12 17C11.779 17 11.567 16.9122 11.4107 16.7559C11.2545 16.5996 11.1667 16.3877 11.1667 16.1667V12H8.66667C8.58819 12 8.5113 11.9779 8.44484 11.9362C8.37839 11.8945 8.32507 11.8348 8.29102 11.7641C8.25697 11.6934 8.24359 11.6145 8.2524 11.5365C8.26121 11.4586 8.29187 11.3847 8.34084 11.3233L11.6742 7.15667C11.7146 7.10991 11.7646 7.07241 11.8209 7.04671C11.8771 7.021 11.9382 7.0077 12 7.0077C12.0618 7.0077 12.1229 7.021 12.1791 7.04671C12.2354 7.07241 12.2854 7.10991 12.3258 7.15667L15.6592 11.3233C15.7082 11.3846 15.7389 11.4585 15.7477 11.5365C15.7566 11.6145 15.7432 11.6934 15.7092 11.7642Z"
+        fill="#1DA56A"
+      />
+    </svg>
+  );
+}

package/src/components/icons/XIcon.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+const XIcon = (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="M12.7197 2.21954C13.0125 1.92683 13.4874 1.92694 13.7803 2.21954C14.073 2.51241 14.073 2.98722 13.7803 3.28008L9.05955 7.99981L13.7803 12.7205L13.832 12.7772C14.0721 13.0717 14.0548 13.5065 13.7803 13.7811C13.5057 14.0555 13.0709 14.0729 12.7764 13.8328L12.7197 13.7811L7.99901 9.06036L3.27928 13.7811C2.9864 14.0737 2.51156 14.0738 2.21873 13.7811C1.92618 13.4882 1.92616 13.0133 2.21873 12.7205L6.93846 7.99981L2.21873 3.28008C1.92615 2.98722 1.92607 2.51235 2.21873 2.21954C2.51154 1.92673 2.98637 1.92691 3.27928 2.21954L7.99901 6.93926L12.7197 2.21954Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export default XIcon;

package/src/components/index.ts

@@ -0,0 +1,3 @@
+export * from "./HelloWorld";
+export * as InputPrompt from "./InputPrompt";
+export * as Sidebar from "./Sidebar";

package/src/index.ts

@@ -0,0 +1,4 @@
+export { theme as tailwindTheme } from "../src/tailwind-theme";
+export { materialTheme } from "../src/material-theme";
+
+export * from "../src/components";