@lateralus-ai/shipping-ui 1.1.1 → 1.2.0

package/src/stories/SearchModal.tsx

@@ -0,0 +1,82 @@
+import { useState } from "react";
+import { SearchModal } from "../components/SearchModal";
+
+const mockResults = [
+  {
+    id: "1",
+    title: "Create React App",
+    description: "Set up a modern web app by running one command",
+    category: "Documentation",
+  },
+  {
+    id: "2",
+    title: "React Router",
+    description: "Declarative routing for React apps at any scale",
+    category: "Library",
+  },
+  {
+    id: "3",
+    title: "Redux Toolkit",
+    description:
+      "The official, opinionated, batteries-included toolset for efficient Redux development",
+    category: "State Management",
+  },
+  {
+    id: "4",
+    title: "Material Tailwind",
+    description:
+      "React components library that implements Google's Material Design",
+    category: "UI Library",
+  },
+  {
+    id: "5",
+    title: "Tailwind CSS",
+    description: "A utility-first CSS framework for rapid UI development",
+    category: "Styling",
+  },
+];
+
+export const SearchModals = () => {
+  const [open, setOpen] = useState(false);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [activeFilter, setActiveFilter] = useState<string>("");
+
+  const filteredResults = mockResults.filter((result) => {
+    const matchesQuery = result.title
+      .toLowerCase()
+      .includes(searchQuery.toLowerCase());
+    const matchesFilter = !activeFilter || result.category === activeFilter;
+    return matchesQuery && matchesFilter;
+  });
+
+  return (
+    <div className="p-8">
+      <button
+        onClick={() => setOpen(true)}
+        className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
+      >
+        Open Search Modal
+      </button>
+
+      <SearchModal
+        open={open}
+        onClose={() => setOpen(false)}
+        results={searchQuery ? filteredResults : []}
+        onSearch={setSearchQuery}
+        onResultClick={(result) => {
+          console.log("Selected:", result);
+          alert(`Selected: ${result.title}`);
+        }}
+        filters={[
+          "Documentation",
+          "Library",
+          "State Management",
+          "UI Library",
+          "Styling",
+        ]}
+        activeFilter={activeFilter}
+        onFilterChange={setActiveFilter}
+      />
+    </div>
+  );
+};

package/src/stories/Tabs.stories.tsx

@@ -0,0 +1,51 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+  Tabs,
+  TabsHeader,
+  Tab,
+  TabsBody,
+  TabPanel,
+} from "@material-tailwind/react";
+import { SettingsIcon } from "../components/icons/SettingsIcon";
+
+const TabsComponent = () => (
+  <Tabs value="chats" 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">
+        Chats panel orem ipsum dolor sit, amet consectetur adipisicing elit.
+        Saepe deserunt officiis tempora accusamus sunt illo quae placeat velit
+        eius maiores, iste ipsa alias quos similique dolores odio? Magnam, quia
+        deleniti?
+      </TabPanel>
+      <TabPanel value="issues">
+        Issues panel orem ipsum dolor sit, amet consectetur adipisicing elit.
+        Saepe deserunt officiis tempora accusamus sunt illo quae placeat velit
+        eius maiores, iste ipsa alias quos similique dolores odio? Magnam, quia
+        deleniti?
+      </TabPanel>
+    </TabsBody>
+  </Tabs>
+);
+
+const meta = {
+  title: "Design System/Tabs",
+  component: TabsComponent,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof TabsComponent>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/styles/tabs.css

@@ -0,0 +1,55 @@
+.tabs-container {
+  width: 100%;
+  min-width: 400px;
+}
+
+.tabs-header {
+  display: flex;
+  border-bottom: 2px solid #e5e7eb;
+  margin-bottom: 16px;
+}
+
+.tab-button {
+  padding: 12px 24px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 500;
+  color: #6b7280;
+  position: relative;
+  transition: color 0.2s;
+}
+
+.tab-button:hover {
+  color: #374151;
+}
+
+.tab-button.active {
+  color: #3b82f6;
+}
+
+.tab-button.active::after {
+  content: "";
+  position: absolute;
+  bottom: -2px;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background-color: #3b82f6;
+}
+
+.tab-content {
+  animation: fadeIn 0.3s ease-in-out;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

package/src/tailwind-theme.ts

@@ -93,6 +93,18 @@ export const theme = {
     "accordion-up": "accordion-up 0.2s ease-out",
   },
   colors: {
+    brand: {
+      50: "#e0fff2",
+      100: "#adf0d3",
+      200: "#8aeac1",
+      300: "#67e4ae",
+      400: "#45de9c",
+      500: "#26d489",
+      600: "#1da56a",
+      700: "#15754c",
+      800: "#0c452d",
+      900: "#04160e",
+    },
     gray: {
       50: "#fafafa",
       100: "#f0f0f0",