@lateralus-ai/shipping-ui 1.0.4

package/src/stories/Dropdowns.tsx

@@ -0,0 +1,52 @@
+import {
+  Button,
+  IconButton,
+  Menu,
+  MenuHandler,
+  MenuItem,
+  MenuList,
+} from "@material-tailwind/react";
+import { Icon } from "@iconify/react";
+
+export const Dropdowns = () => (
+  <div className="p-8 grid gap-4">
+    <div className="flex gap-4">
+      <Menu>
+        <MenuHandler>
+          <Button>Menu</Button>
+        </MenuHandler>
+        <MenuList>
+          <MenuItem>Menu Item 1</MenuItem>
+          <MenuItem>Menu Item 2</MenuItem>
+          <MenuItem>Menu Item 3</MenuItem>
+        </MenuList>
+      </Menu>
+
+      <Menu>
+        <MenuHandler>
+          <Button color="blue">
+            <Icon icon="hugeicons:menu-01" /> Menu
+          </Button>
+        </MenuHandler>
+        <MenuList>
+          <MenuItem>Menu Item 1</MenuItem>
+          <MenuItem>Menu Item 2</MenuItem>
+          <MenuItem>Menu Item 3</MenuItem>
+        </MenuList>
+      </Menu>
+
+      <Menu>
+        <MenuHandler>
+          <IconButton color="neutral" variant="outlined">
+            <Icon icon="hugeicons:menu-01" />
+          </IconButton>
+        </MenuHandler>
+        <MenuList>
+          <MenuItem>Menu Item 1</MenuItem>
+          <MenuItem>Menu Item 2</MenuItem>
+          <MenuItem>Menu Item 3</MenuItem>
+        </MenuList>
+      </Menu>
+    </div>
+  </div>
+);

package/src/stories/InputPrompt.stories.tsx

@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { InputPrompts } from "./InputPrompt";
+
+const meta = {
+  title: "Design System/InputPrompts",
+  component: InputPrompts,
+  parameters: {
+    layout: "fullscreen",
+  },
+} satisfies Meta<typeof InputPrompts>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/stories/InputPrompt.tsx

@@ -0,0 +1,63 @@
+import { Button, IconButton } from "@material-tailwind/react";
+import { InputPrompt } from "../components/";
+import { Icon } from "@iconify/react";
+
+export const InputPrompts = () => {
+  const bottomButtons = (
+    <div>
+      <Button variant="text" color="gray">
+        Select ship
+      </Button>
+    </div>
+  );
+
+  const rightButtons = (
+    <div className="flex gap-2">
+      <IconButton variant="text" color="gray">
+        <Icon icon="material-symbols:attach-file-rounded" className="size-6" />
+      </IconButton>
+      <InputPrompt.SubmitButton onClick={() => alert("Click")} />
+    </div>
+  );
+
+  const topContent = (
+    <div className="p-2 mt-2 mx-2 rounded bg-orange-50">
+      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ex minima hic
+      qui! Ipsum et, perferendis molestias ut voluptatum laborum id similique.
+    </div>
+  );
+
+  const textArea = (
+    <InputPrompt.Textarea placeholder="Write your message here" />
+  );
+
+  return (
+    <div className="w-[650px] grid gap-8 p-4">
+      <InputPrompt.Container right={rightButtons} textArea={textArea} />
+      <InputPrompt.Container
+        right={rightButtons}
+        bottom={bottomButtons}
+        textArea={textArea}
+      />
+      <InputPrompt.Container
+        right={rightButtons}
+        top={topContent}
+        textArea={textArea}
+      />
+
+      <div className="border rounded-lg">
+        <div className="border-b p-4">Lorem Ipsum dorcet sit amet</div>
+        <div className="p-4 border-b">
+          <div className="h-[650px] text-gray-400 font-semibold bg-gray-100 rounded-2xl items-center justify-center flex">
+            Content placeholder
+          </div>
+        </div>
+        <InputPrompt.Container
+          right={rightButtons}
+          textArea={textArea}
+          className="border-none shadow-none"
+        />
+      </div>
+    </div>
+  );
+};

package/src/stories/PDFViewer.stories.tsx

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { ImageViewer, PdfViewer } from "../components/PdfViewer";
+
+const StoryPage = () => {
+  return (
+    <div className="flex gap-16">
+      <div className="w-[600px] h-[800px] p-8">
+        <ImageViewer
+          totalPages={100}
+          title="Image Viewer"
+          getImageSrc={(page) =>
+            `https://placehold.co/600x400?text=page-${page}`
+          }
+        />
+      </div>
+      <div className="w-[600px] h-[800px] p-8" title="Document Viewer">
+        <PdfViewer
+          totalPages={100}
+          src="https://www.antennahouse.com/hubfs/xsl-fo-sample/pdf/basic-link-1.pdf"
+        />
+      </div>
+    </div>
+  );
+};
+
+const meta = {
+  title: "Design System/PDFViewer",
+  component: StoryPage,
+  parameters: {
+    layout: "fullscreen",
+  },
+} satisfies Meta<typeof StoryPage>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/stories/Sidebar.stories.tsx

@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { SidebarScreen as Sidebar } from "./Sidebar";
+
+const meta = {
+  title: "Design System/Sidebar",
+  component: Sidebar,
+  parameters: {
+    layout: "fullscreen",
+  },
+} satisfies Meta<typeof Sidebar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/stories/Sidebar.tsx

@@ -0,0 +1,94 @@
+import { Icon } from "@iconify/react";
+import { Sidebar } from "../components";
+import {
+  IconButton,
+  Menu,
+  MenuHandler,
+  MenuItem,
+  MenuList,
+} from "@material-tailwind/react";
+
+const menuExample = (
+  <div className="opacity-0 group-hover:opacity-100">
+    <Menu placement="right" offset={{ mainAxis: -40 }}>
+      <MenuHandler>
+        <IconButton color="gray" size="sm" variant="text">
+          <Icon icon="lucide:ellipsis" className="size-4" />
+        </IconButton>
+      </MenuHandler>
+      <MenuList>
+        <MenuItem>Menu Item 1</MenuItem>
+        <MenuItem>Menu Item 2</MenuItem>
+        <MenuItem className="text-red-500">Menu Item 3</MenuItem>
+      </MenuList>
+    </Menu>
+  </div>
+);
+
+const arrowExample = (
+  <button>
+    <Icon icon="mage:caret-right" className="size-4" />
+  </button>
+);
+
+export const SidebarScreen = () => (
+  <div className="p-8 gap-4 flex ">
+    <Sidebar.Layout className="h-[800px]">
+      <div className="w-full flex flex-col gap-2">
+        <div className="flex justify-between pr-1">
+          <Sidebar.Button
+            onClick={() => alert("click")}
+            icon={<Icon icon="mage:box-check" className="size-6" />}
+          >
+            {" "}
+            Lorem ipsum
+          </Sidebar.Button>
+
+          <Sidebar.ToggleCollapseButton />
+        </div>
+
+        <Sidebar.Item
+          icon={<Icon icon="mage:book" className="size-6" />}
+          trailing={arrowExample}
+        >
+          Dorcet sit amet
+        </Sidebar.Item>
+
+        <Sidebar.Item
+          icon={<Icon icon="mage:calendar" className="size-6" />}
+          isActive
+        >
+          Tempore ipsa
+        </Sidebar.Item>
+
+        <Sidebar.Item icon={<Icon icon="mage:email" className="size-6" />}>
+          {" "}
+          Duis ditarcher
+        </Sidebar.Item>
+
+        <div className="w-full flex flex-col gap-1 relative">
+          <Sidebar.SecondaryItem
+            trailing={menuExample}
+            icon={
+              <Icon icon="mage:message" className="size-5 text-orange-400" />
+            }
+          >
+            {" "}
+            Dolore eu fugiat nulla
+          </Sidebar.SecondaryItem>
+
+          <Sidebar.SecondaryItem
+            trailing={menuExample}
+            icon={<Icon icon="mage:message" className="size-5" />}
+          >
+            Lorem ipsum dorcet sit
+          </Sidebar.SecondaryItem>
+
+          <Sidebar.SecondaryItem>Show all</Sidebar.SecondaryItem>
+        </div>
+      </div>
+
+      <div className="h-20 bg-gray-100 w-full rounded-xl"></div>
+    </Sidebar.Layout>
+  </div>
+);

package/src/stories/Typography.stories.tsx

@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Typography } from "./Typography";
+
+const meta = {
+  title: "Design System/Typography",
+  component: Typography,
+  parameters: {
+    layout: "fullscreen",
+  },
+} satisfies Meta<typeof Typography>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/stories/Typography.tsx

@@ -0,0 +1,110 @@
+import React from "react";
+
+export const Typography = () => {
+  return (
+    <div className="p-8 space-y-8">
+      <section>
+        <h2 className="text-2xl font-bold mb-4">Typography Styles</h2>
+
+        <div className="space-y-4">
+          <div className="border-b pb-2">
+            <p className="text-caption-2 text-gray-500 mb-1">Subheader</p>
+            <p className="text-subheader">This is subheader text (18px/28px)</p>
+          </div>
+
+          <div className="border-b pb-2">
+            <p className="text-caption-2 text-gray-500 mb-1">
+              Subheader Emphasized
+            </p>
+            <p className="text-subheader-em">
+              This is emphasized subheader text (18px/28px, 500 weight)
+            </p>
+          </div>
+
+          <div className="border-b pb-2">
+            <p className="text-caption-2 text-gray-500 mb-1">Body</p>
+            <p className="text-body">This is body text (16px/28px)</p>
+          </div>
+
+          <div className="border-b pb-2">
+            <p className="text-caption-2 text-gray-500 mb-1">Body Emphasized</p>
+            <p className="text-body-em">
+              This is emphasized body text (16px/28px, 500 weight)
+            </p>
+          </div>
+
+          <div className="border-b pb-2">
+            <p className="text-caption-2 text-gray-500 mb-1">Caption 1</p>
+            <p className="text-caption-1">This is caption-1 text (16px/22px)</p>
+          </div>
+
+          <div className="border-b pb-2">
+            <p className="text-caption-2 text-gray-500 mb-1">
+              Caption 1 Emphasized
+            </p>
+            <p className="text-caption-1-em">
+              This is emphasized caption-1 text (16px/22px, 500 weight)
+            </p>
+          </div>
+
+          <div className="border-b pb-2">
+            <p className="text-caption-2 text-gray-500 mb-1">Caption 2</p>
+            <p className="text-caption-2">This is caption-2 text (14px/20px)</p>
+          </div>
+
+          <div className="border-b pb-2">
+            <p className="text-caption-2 text-gray-500 mb-1">
+              Caption 2 Emphasized
+            </p>
+            <p className="text-caption-2-em">
+              This is emphasized caption-2 text (14px/20px, 500 weight)
+            </p>
+          </div>
+
+          <div className="border-b pb-2">
+            <p className="text-caption-2 text-gray-500 mb-1">Footnote</p>
+            <p className="text-footnote">This is footnote text (13px/17px)</p>
+          </div>
+
+          <div className="border-b pb-2">
+            <p className="text-caption-2 text-gray-500 mb-1">
+              Footnote Emphasized
+            </p>
+            <p className="text-footnote-em">
+              This is emphasized footnote text (13px/17px, 500 weight)
+            </p>
+          </div>
+        </div>
+      </section>
+
+      <section>
+        <h2 className="text-2xl font-bold mb-4">Font Families</h2>
+
+        <div className="space-y-4">
+          <div className="border-b pb-2">
+            <p className="text-caption-2 text-gray-500 mb-1">
+              Sans (Work Sans)
+            </p>
+            <p className="font-sans text-body">
+              The quick brown fox jumps over the lazy dog
+            </p>
+          </div>
+
+          <div className="border-b pb-2">
+            <p className="text-caption-2 text-gray-500 mb-1">
+              Mono (Roboto Mono)
+            </p>
+            <p className="font-mono text-body">const code = "Hello, World!";</p>
+          </div>
+
+          <div className="border-b pb-2">
+            <p className="text-caption-2 text-gray-500 mb-1">
+              Signature (Cursive)
+            </p>
+            <p className="font-signature text-body">John Doe</p>
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+};

package/src/style.css

@@ -0,0 +1,2 @@
+@import url(https://tools-static.wmflabs.org/fontcdn/css?family=Work+Sans:400,500,600);
+@import url(https://tools-static.wmflabs.org/fontcdn/css?family=Alex+Brush);

package/src/tailwind-theme.ts

@@ -0,0 +1,219 @@
+export const theme = {
+  fontFamily: {
+    sans: ["Work Sans", "sans-serif"],
+    mono: ["Roboto Mono", "monospace"],
+    signature: ["Alex Brush", "Lucida Handwriting", "cursive"],
+  },
+  fontSize: {
+    subheader: [
+      "18px",
+      {
+        lineHeight: "28px",
+        letterSpacing: "-0.01em",
+      },
+    ],
+    "subheader-em": [
+      "18px",
+      {
+        lineHeight: "28px",
+        letterSpacing: "-0.01em",
+        fontWeight: "500",
+      },
+    ],
+    body: [
+      "16px",
+      {
+        lineHeight: "28px",
+        letterSpacing: "-0.01em",
+      },
+    ],
+    "body-em": [
+      "16px",
+      {
+        lineHeight: "28px",
+        letterSpacing: "-0.01em",
+        fontWeight: "500",
+      },
+    ],
+    "caption-1": [
+      "16px",
+      {
+        lineHeight: "22px",
+      },
+    ],
+    "caption-1-em": [
+      "16px",
+      {
+        lineHeight: "22px",
+        fontWeight: "500",
+      },
+    ],
+    "caption-2": [
+      "14px",
+      {
+        lineHeight: "20px",
+      },
+    ],
+    "caption-2-em": [
+      "14px",
+      {
+        lineHeight: "20px",
+        fontWeight: "500",
+      },
+    ],
+    footnote: [
+      "13px",
+      {
+        lineHeight: "17px",
+      },
+    ],
+    "footnote-em": [
+      "13px",
+      {
+        lineHeight: "17px",
+        fontWeight: "500",
+      },
+    ],
+  },
+  width: {
+    authPageWidth: "370px",
+  },
+  keyframes: {
+    "accordion-down": {
+      from: { height: 0 },
+      to: { height: "var(--radix-accordion-content-height)" },
+    },
+    "accordion-up": {
+      from: { height: "var(--radix-accordion-content-height)" },
+      to: { height: 0 },
+    },
+  },
+  animation: {
+    "accordion-down": "accordion-down 0.2s ease-out",
+    "accordion-up": "accordion-up 0.2s ease-out",
+  },
+  colors: {
+    gray: {
+      50: "#fafafa",
+      100: "#f0f0f0",
+      200: "#d6d6d6",
+      300: "#bdbdbd",
+      400: "#a3a3a3",
+      500: "#8a8a8a",
+      600: "#6e6e6e",
+      700: "#525252",
+      800: "#363636",
+      900: "#1a1a1a",
+    },
+    green: {
+      50: "#e0fff2",
+      100: "#adf0d3",
+      200: "#8aeac1",
+      300: "#67e4ae",
+      400: "#45de9c",
+      500: "#26d489",
+      600: "#1da56a",
+      700: "#15754c",
+      800: "#0c452d",
+      900: "#04160e",
+    },
+    blue: {
+      50: "#cae8f7",
+      100: "#b8e0f4",
+      200: "#95d1ef",
+      300: "#71c1ea",
+      400: "#4eb2e4",
+      500: "#2aa2df",
+      600: "#1b82b6",
+      700: "#145f85",
+      800: "#0d3c54",
+      900: "#051923",
+    },
+    red: {
+      50: "#f9dcdc",
+      100: "#f6cbcb",
+      200: "#f0a8a8",
+      300: "#ea8686",
+      400: "#e36363",
+      500: "#dd4040",
+      600: "#c32222",
+      700: "#931a1a",
+      800: "#641212",
+      900: "#340909",
+    },
+    orange: {
+      50: "#fff7eb",
+      100: "#f8e0bf",
+      200: "#f4cf9a",
+      300: "#f0bd75",
+      400: "#ecab51",
+      500: "#e89a2c",
+      600: "#C77C0A",
+      700: "#935d10",
+      800: "#603d0b",
+      900: "#2e1d05",
+    },
+    "brand-purple": "#ab68ff",
+    presentation: "var(--presentation)",
+    "text-primary": "var(--text-primary)",
+    "text-secondary": "var(--text-secondary)",
+    "text-secondary-alt": "var(--text-secondary-alt)",
+    "text-tertiary": "var(--text-tertiary)",
+    "ring-primary": "var(--ring-primary)",
+    "header-primary": "var(--header-primary)",
+    "header-hover": "var(--header-hover)",
+    "header-button-hover": "var(--header-button-hover)",
+    "surface-active": "var(--surface-active)",
+    "surface-active-alt": "var(--surface-active-alt)",
+    "surface-hover": "var(--surface-hover)",
+    "surface-primary": "var(--surface-primary)",
+    "surface-primary-alt": "var(--surface-primary-alt)",
+    "surface-primary-contrast": "var(--surface-primary-contrast)",
+    "surface-secondary": "var(--surface-secondary)",
+    "surface-secondary-alt": "var(--surface-secondary-alt)",
+    "surface-tertiary": "var(--surface-tertiary)",
+    "surface-tertiary-alt": "var(--surface-tertiary-alt)",
+    "surface-dialog": "var(--surface-dialog)",
+    "surface-submit": "var(--surface-submit)",
+    "border-light": "var(--border-light)",
+    "border-medium": "var(--border-medium)",
+    "border-medium-alt": "var(--border-medium-alt)",
+    "border-heavy": "var(--border-heavy)",
+    "border-xheavy": "var(--border-xheavy)",
+    border: "hsl(var(--border))",
+    input: "hsl(var(--input))",
+    ["switch-unchecked"]: "hsl(var(--switch-unchecked))",
+    ring: "hsl(var(--ring))",
+    background: "hsl(var(--background))",
+    foreground: "hsl(var(--foreground))",
+    primary: {
+      DEFAULT: "hsl(var(--primary))",
+      foreground: "hsl(var(--primary-foreground))",
+    },
+    secondary: {
+      DEFAULT: "hsl(var(--secondary))",
+      foreground: "hsl(var(--secondary-foreground))",
+    },
+    destructive: {
+      DEFAULT: "hsl(var(--destructive))",
+      foreground: "hsl(var(--destructive-foreground))",
+    },
+    muted: {
+      DEFAULT: "hsl(var(--muted))",
+      foreground: "hsl(var(--muted-foreground))",
+    },
+    accent: {
+      DEFAULT: "hsl(var(--accent))",
+      foreground: "hsl(var(--accent-foreground))",
+    },
+    card: {
+      DEFAULT: "hsl(var(--card))",
+      foreground: "hsl(var(--card-foreground))",
+    },
+  },
+  borderRadius: {
+    lg: "8px",
+    md: "calc(8px - 2px)",
+    sm: "calc(8px - 4px)",
+  },
+};

package/src/utils/cn.ts

@@ -0,0 +1,11 @@
+import { twMerge } from "tailwind-merge";
+import { type ClassValue, clsx } from "clsx";
+
+/**
+ * Merges the tailwind clases (using twMerge). Conditionally removes false values
+ * @param inputs The tailwind classes to merge
+ * @returns className string to apply to an element or HOC
+ */
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}