@lateralus-ai/shipping-ui 1.4.16 → 2.0.0-dev.0

package/src/components/icons/SendArrowIconGreen.tsx

@@ -1,17 +0,0 @@
-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/SettingsIcon.tsx

@@ -1,33 +0,0 @@
-export const SettingsIcon = ({ ...props }) => {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="16"
-      height="16"
-      viewBox="0 0 16 16"
-      fill="none"
-      {...props}
-    >
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M3.16699 7.7334C4.91574 7.73357 6.33301 9.1516 6.33301 10.9004C6.33283 12.3905 5.30337 13.6386 3.91699 13.9756V15.25C3.91685 15.664 3.58098 15.9998 3.16699 16C2.75287 16 2.41713 15.6641 2.41699 15.25V13.9756C1.0303 13.6387 0.000177983 12.3906 0 10.9004C0 9.15149 1.41809 7.7334 3.16699 7.7334ZM3.16699 9.2334C2.24652 9.2334 1.5 9.97992 1.5 10.9004C1.50021 11.8207 2.24665 12.5664 3.16699 12.5664C4.08719 12.5662 4.8328 11.8206 4.83301 10.9004C4.83301 9.98002 4.08732 9.23357 3.16699 9.2334Z"
-        fill="currentColor"
-      />
-      <path
-        d="M11.8662 9.66699C12.2804 9.66699 12.6162 10.0028 12.6162 10.417V15.25C12.616 15.6641 12.2803 16 11.8662 16C11.4523 15.9998 11.1164 15.6639 11.1162 15.25V10.417C11.1162 10.0029 11.4522 9.66722 11.8662 9.66699Z"
-        fill="currentColor"
-      />
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M11.8662 0C12.2804 0 12.6162 0.335786 12.6162 0.75V2.02344C14.0032 2.36025 15.0332 3.60999 15.0332 5.10059C15.0329 6.84904 13.6157 8.26633 11.8672 8.2666C10.1185 8.2666 8.70052 6.84921 8.7002 5.10059C8.7002 3.6104 9.7297 2.36066 11.1162 2.02344V0.75C11.1162 0.335929 11.4522 0.000230806 11.8662 0ZM11.8672 3.43359C10.9467 3.43359 10.2002 4.18011 10.2002 5.10059C10.2005 6.02078 10.9469 6.7666 11.8672 6.7666C12.7872 6.76633 13.5329 6.02062 13.5332 5.10059C13.5332 4.18028 12.7874 3.43387 11.8672 3.43359Z"
-        fill="currentColor"
-      />
-      <path
-        d="M3.16699 0C3.58107 0.000164881 3.91699 0.335888 3.91699 0.75V5.58301C3.91699 5.99712 3.58107 6.33284 3.16699 6.33301C2.75278 6.33301 2.41699 5.99722 2.41699 5.58301V0.75C2.41699 0.335786 2.75278 0 3.16699 0Z"
-        fill="currentColor"
-      />
-    </svg>
-  );
-};

package/src/components/icons/XIcon.tsx

@@ -1,21 +0,0 @@
-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/material-theme.ts

@@ -1,477 +0,0 @@
-import { tabPanel } from "@material-tailwind/react";
-
-export const materialTheme = {
-  button: {
-    defaultProps: {
-      className:
-        "items-center normal-case shadow-none hover:shadow-none text-caption-1 font-medium h-10 rounded-lg flex gap-2 px-3 truncate tracking-[0.16px] justify-center",
-      ripple: false,
-      color: "green",
-    },
-    styles: {
-      sizes: {
-        md: {
-          fontSize: "text-md",
-          className: "py-2",
-        },
-      },
-      variants: {
-        filled: {
-          blue: {
-            color: "!text-white",
-            background: "bg-blue-400",
-            hover: "hover:bg-blue-500",
-            disabled:
-              "disabled:bg-blue-200 disabled:!text-blue-600 !opacity-100",
-          },
-          green: {
-            color: "!text-white",
-            background: "bg-green-600",
-            hover: "hover:bg-green-700",
-            disabled:
-              "disabled:bg-green-200 disabled:!text-green-600 !opacity-100",
-          },
-          red: {
-            color: "!text-white",
-            background: "bg-red-600",
-            hover: "hover:bg-red-700",
-            disabled: "disabled:bg-red-200 disabled:!text-red-600 !opacity-100",
-          },
-          gray: {
-            color: "text-black",
-            background: "bg-gray-50",
-            hover: "hover:bg-gray-100",
-            disabled:
-              "disabled:bg-gray-50 disabled:!text-gray-200 !opacity-100",
-          },
-          orange: {
-            color: "!text-orange-600",
-            background: "bg-orange-50",
-            hover: "hover:bg-orange-100",
-            disabled:
-              "disabled:bg-orange-50 disabled:!text-orange-200 !opacity-100",
-          },
-        },
-        outlined: {
-          gray: {
-            background: "bg-white",
-            color: "text-gray-700 border-gray-100",
-            hover: "!text-gray-900 hover:bg-gray-100",
-            disabled: "disabled:text-gray-500",
-          },
-        },
-        text: {
-          green: {
-            color: "!text-green-600",
-            hover: "hover:bg-gray-100",
-            disabled: "disabled:!text-gray-500",
-          },
-          gray: {
-            color: "!text-gray-700",
-            hover: "hover:bg-gray-100",
-            disabled: "disabled:!text-gray-500",
-          },
-        },
-      },
-    },
-  },
-  iconButton: {
-    defaultProps: {
-      className:
-        "items-center justify-center normal-case shadow-none hover:shadow-none text-caption-1 font-medium h-10 rounded-lg flex gap-2 px-3 truncate",
-      ripple: false,
-      color: "green",
-    },
-    styles: {
-      sizes: {
-        md: {
-          fontSize: "text-md",
-          className: "py-2",
-        },
-      },
-      variants: {
-        filled: {
-          blue: {
-            color: "!text-white",
-            background: "bg-blue-400",
-            hover: "hover:bg-blue-500",
-            disabled:
-              "disabled:bg-blue-200 disabled:!text-blue-600 !opacity-100",
-          },
-          green: {
-            color: "!text-white",
-            background: "bg-green-600",
-            hover: "hover:bg-green-700",
-            disabled:
-              "disabled:bg-green-200 disabled:!text-green-600 !opacity-100",
-          },
-          red: {
-            color: "!text-white",
-            background: "bg-red-600",
-            hover: "hover:bg-red-700",
-            disabled: "disabled:bg-red-200 disabled:!text-red-600 !opacity-100",
-          },
-          gray: {
-            color: "text-black",
-            background: "bg-gray-50",
-            hover: "hover:bg-gray-100",
-            disabled:
-              "disabled:bg-gray-50 disabled:!text-gray-200 !opacity-100",
-          },
-          orange: {
-            color: "!text-orange-600",
-            background: "bg-orange-50",
-            hover: "hover:bg-orange-100",
-            disabled:
-              "disabled:bg-orange-50 disabled:!text-orange-200 !opacity-100",
-          },
-        },
-        outlined: {
-          gray: {
-            background: "bg-white",
-            color: "text-gray-700 border-gray-100",
-            hover: "!text-gray-900 hover:bg-gray-100",
-            disabled: "disabled:text-gray-500",
-          },
-        },
-        text: {
-          green: {
-            color: "!text-green-600",
-            hover: "hover:bg-gray-100",
-            disabled: "disabled:!text-gray-500",
-          },
-          gray: {
-            color: "!text-gray-700",
-            hover: "hover:bg-gray-100",
-            disabled: "disabled:!text-gray-500",
-          },
-        },
-      },
-    },
-  },
-  progress: {
-    defaultProps: {
-      className: "bg-gray-100",
-      barProps: {
-        className: "transform transition-all duration-300",
-      },
-    },
-    styles: {
-      sizes: {
-        sm: {
-          container: {
-            initial: { height: "h-1" },
-          },
-        },
-      },
-    },
-  },
-  menu: {
-    styles: {
-      base: {
-        menu: {
-          border: "border border-gray-100",
-          borderRadius: "rounded-xl",
-          boxShadow: "shadow-sm",
-          p: "p-2",
-        },
-        item: {
-          initial: {
-            display:
-              "flex gap-2 items-center focus-within:outline-none text-gray-900",
-            bg: "hover:bg-gray-100",
-            p: "p-2",
-          },
-        },
-      },
-    },
-  },
-  dialog: {
-    defaultProps: {
-      size: "sm",
-      dismiss: {},
-      animate: {
-        mount: {},
-        unmount: {},
-      },
-      className: "",
-    },
-    valid: {
-      sizes: ["xs", "sm", "md", "lg", "xl", "xxl"],
-    },
-    styles: {
-      base: {
-        backdrop: {
-          width: "w-full",
-          display: "grid",
-          placeItems: "place-items-center",
-          position: "fixed",
-          top: 0,
-          left: 0,
-          height: "h-screen",
-          backgroundColor: "bg-[rgba(0,0,0,0.16)]",
-          backgroundOpacity: "bg-opacity-100",
-          backdropFilter: "backdrop-blur-none",
-        },
-        container: {
-          height: "h-[450px]",
-          position: "relative",
-          bg: "bg-white",
-          m: "m-4",
-          borderRadius: "rounded-xl",
-          boxShadow:
-            "shadow-[0px_2px_8px_0px_#00000029,0px_2px_2px_0px_#0000000A,0px_8px_8px_-8px_#0000000A]",
-          fontSmoothing: "antialiased",
-        },
-      },
-      sizes: {
-        sm: {
-          maxWidth: "!max-w-[550px]",
-        },
-        lg: {
-          maxWidth: "!max-w-[700px]",
-        },
-      },
-    },
-  },
-  dialogHeader: {
-    styles: {
-      base: {
-        display: "text-gray-900 font-normal",
-      },
-    },
-  },
-  checkbox: {
-    defaultProps: {
-      color: "custom",
-      ripple: false,
-    },
-    valid: {
-      colors: ["blue-gray", "gray", "red", "green", "custom"],
-    },
-    styles: {
-      base: {
-        root: {
-          display: "inline-flex",
-          alignItems: "items-center",
-        },
-        container: {
-          position: "relative",
-          display: "flex",
-          alignItems: "items-center",
-          cursor: "cursor-pointer",
-          p: "!p-0",
-          borderRadius: "rounded-full",
-        },
-        input: {
-          peer: "peer",
-          position: "relative",
-          appearance: "appearance-none",
-          width: "w-5",
-          height: "h-5",
-          borderWidth: "border-[1.5px]",
-          borderRadius: "rounded-md",
-          borderColor: "border-gray-100",
-          cursor: "cursor-pointer",
-          transition: "transition-all",
-          before: {
-            content: "before:content-['']",
-            display: "before:block",
-            bg: "before:bg-transparent",
-            width: "before:w-12",
-            height: "before:h-12",
-            borderRadius: "before:rounded-full",
-            position: "before:absolute",
-            opacity: "before:opacity-0 hover:before:opacity-10",
-          },
-        },
-        label: {
-          color: "text-gray-700",
-          fontWeight: "font-light",
-          userSelect: "select-none",
-          cursor: "cursor-pointer",
-          mt: "mt-px",
-          px: "px-2",
-        },
-        icon: {
-          display: "flex",
-          alignItems: "items-center",
-          justifyContent: "justify-center",
-          width: "w-5",
-          height: "h-5",
-          color: "text-green-600",
-          position: "absolute",
-          pointerEvents: "pointer-events-none",
-          opacity: "opacity-0 peer-checked:opacity-100",
-          transition: "transition-opacity",
-        },
-        disabled: {
-          opacity: "opacity-50",
-          pointerEvents: "pointer-events-none",
-        },
-      },
-      colors: {
-        custom: {
-          border: "checked:border-green-600",
-        },
-      },
-    },
-  },
-  popover: {
-    defaultProps: {
-      placement: "top",
-      offset: 5,
-      dismiss: {},
-      animate: {
-        unmount: {},
-        mount: {},
-      },
-      className: "",
-    },
-    styles: {
-      base: {
-        bg: "bg-white",
-        p: "p-4",
-        borderWidth: "border",
-        borderColor: "border-gray-200",
-        borderRadius: "rounded-lg",
-        boxShadow:
-          "[box-shadow:0px_2px_2px_0px_#0000000A,_0px_8px_8px_-8px_#0000000A]",
-        fontSize: "text-sm",
-        fontWeight: "font-normal",
-        color: "text-blue-gray-500",
-        outline: "focus:outline-none",
-        overflowWrap: "break-words",
-        whiteSpace: "whitespace-normal",
-      },
-    },
-  },
-  switch: {
-    defaultProps: {
-      color: "blue",
-      label: "",
-      ripple: true,
-      className: "",
-      disabled: false,
-      containerProps: undefined,
-      labelProps: undefined,
-      circleProps: undefined,
-    },
-    valid: {
-      colors: [
-        "blue-gray",
-        "gray",
-        "brown",
-        "deep-orange",
-        "orange",
-        "amber",
-        "yellow",
-        "lime",
-        "light-green",
-        "green",
-        "teal",
-        "cyan",
-        "light-blue",
-        "blue",
-        "indigo",
-        "deep-purple",
-        "purple",
-        "pink",
-        "red",
-      ],
-    },
-    styles: {
-      base: {
-        input: {
-          background: "bg-gray-500",
-        },
-        circle: {
-          borderColor: "border-gray-500",
-          borderRadius: "rounded-full",
-          boxShadow: "shadow-md",
-          position: "absolute",
-          top: "top-2/4",
-          left: "-left-1",
-          transform: "-translate-y-2/4 peer-checked:translate-x-full",
-          transition: "transition-all duration-300",
-          cursor: "cursor-pointer",
-          before: {
-            content: "before:content['']",
-            display: "before:block",
-            bg: "before:bg-blue-gray-500",
-            width: "before:w-10",
-            height: "before:h-10",
-            borderRadius: "before:rounded-full",
-            position: "before:absolute",
-            top: "before:top-2/4",
-            left: "before:left-2/4",
-            transform: "before:-translate-y-2/4 before:-translate-x-2/4",
-            transition: "before:transition-opacity",
-            opacity: "before:opacity-0 hover:before:opacity-10",
-          },
-        },
-        ripple: {
-          display: "inline-block",
-          top: "top-2/4",
-          left: "left-2/4",
-          transform: "-translate-x-2/4 -translate-y-2/4",
-          p: "p-5",
-          borderRadius: "rounded-full",
-        },
-        label: {
-          color: "text-gray-700",
-          fontWeight: "font-light",
-          userSelect: "select-none",
-          cursor: "cursor-pointer",
-          mt: "mt-px",
-          ml: "ml-3",
-          mb: "mb-0",
-        },
-        disabled: {
-          opacity: "opacity-50",
-          pointerEvents: "pointer-events-none",
-        },
-      },
-      colors: {
-        gray: {
-          input: "checked:bg-blue-gray-100",
-          circle: "peer-checked:border-blue-gray-100",
-          before: "peer-checked:before:bg-gray-500",
-        },
-        green: {
-          input: "checked:bg-green-600",
-          circle: "peer-checked:border-green-600",
-          before: "peer-checked:before:bg-green-600",
-        },
-      },
-    },
-  },
-  tabsHeader: {
-    defaultProps: {
-      className:
-        "grow gap-6 rounded-none bg-transparent !p-0 border-b border-b-gray-100 flex items-end px-0 w-full mb-6",
-    },
-  },
-  tab: {
-    defaultProps: {
-      className:
-        "min-w-fit max-w-fit justify-start font-medium text-gray-600 pl-0 pr-2 h-12",
-    },
-    styles: {
-      base: {
-        indicator: {
-          bg: "bg-transparent border-b-2 border-gray-900 !transform-none",
-          borderRadius: "radius-none",
-          boxShadow: "shadow-none",
-        },
-      },
-    },
-  },
-  tabPanel: {
-    styles: {
-      base: {
-        p: "px-0",
-      },
-    },
-  },
-};

package/src/stories/Buttons.stories.tsx

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

package/src/stories/Buttons.tsx

@@ -1,52 +0,0 @@
-import { Button, IconButton } from "@material-tailwind/react";
-import { Icon } from "@iconify/react";
-
-export const Buttons = () => (
-  <div className="p-8 grid gap-4">
-    <div className="flex gap-4">
-      <IconButton color="blue">
-        <Icon icon="lucide:ship" />
-      </IconButton>
-
-      <IconButton color="green">
-        <Icon icon="lucide:ship" />
-      </IconButton>
-
-      <IconButton color="gray" variant="text">
-        <Icon icon="lucide:ship" />
-      </IconButton>
-
-      <IconButton color="orange">
-        <Icon icon="lucide:ship" />
-      </IconButton>
-
-      <IconButton color="red">
-        <Icon icon="lucide:ship" />
-      </IconButton>
-
-      <IconButton variant="outlined" color="gray">
-        <Icon icon="lucide:ship" />
-      </IconButton>
-    </div>
-
-    <div className="flex gap-4">
-      <Button color="blue" className="tracking-[0.16px]">
-        Lorem ipsum
-      </Button>
-
-      <Button color="green">Lorem ipsum</Button>
-
-      <Button color="gray" variant="text">
-        Lorem ipsum
-      </Button>
-
-      <Button color="orange">Lorem ipsum</Button>
-
-      <Button color="red">Lorem ipsum</Button>
-
-      <Button variant="outlined" color="gray">
-        Lorem ipsum
-      </Button>
-    </div>
-  </div>
-);

package/src/stories/Checkbox.stories.tsx

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

package/src/stories/Checkbox.tsx

@@ -1,56 +0,0 @@
-import { Checkbox } from "@material-tailwind/react";
-import { Icon } from "@iconify/react";
-import { useState } from "react";
-
-export const CheckboxItem = () => {
-  const [isChecked, setIsChecked] = useState(false);
-
-  return (
-    <div className="p-8 grid gap-4">
-      <div className="flex flex-col gap-2">
-        <div className="font-medium text-lg">Default</div>
-        <Checkbox
-          checked={isChecked}
-          icon={<Icon icon="lucide:check" className="w-3.5 h-3.5" />}
-          onChange={() => {
-            setIsChecked(!isChecked);
-          }}
-          containerProps={{
-            className: "pl-1 pr-2 pb-0 pt-1",
-          }}
-        />
-      </div>
-
-      <div className="flex flex-col gap-2">
-        <div className="font-medium text-lg">With label</div>
-        <Checkbox
-          label="Remember Me"
-          checked={isChecked}
-          icon={<Icon icon="lucide:check" className="w-3.5 h-3.5" />}
-          onChange={() => {
-            setIsChecked(!isChecked);
-          }}
-          containerProps={{
-            className: "pl-1 pr-2 pb-0 pt-1",
-          }}
-        />
-      </div>
-
-      <div className="flex flex-col gap-2">
-        <div className="font-medium text-lg">Disabled</div>
-        <Checkbox
-          label="Remember Me"
-          checked={isChecked}
-          disabled={true}
-          icon={<Icon icon="lucide:check" className="w-3.5 h-3.5" />}
-          onChange={() => {
-            setIsChecked(!isChecked);
-          }}
-          containerProps={{
-            className: "pl-1 pr-2 pb-0 pt-1",
-          }}
-        />
-      </div>
-    </div>
-  );
-};