@lateralus-ai/shipping-ui 1.4.13 → 1.4.14

package/src/stories/Tabs.stories.tsx

@@ -1,51 +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 = {};
+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/stories/Typography.stories.tsx

@@ -1,15 +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 = {};
+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

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

@@ -1,2 +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);
+@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/styles/tabs.css

@@ -1,55 +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);
-  }
-}
+.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);
+  }
+}