@offlinemediainc/offline-ui 0.1.2 → 0.1.3

package/README.md

@@ -19,15 +19,29 @@ Add the theme CSS to your app's entry point:
 import '@offlinemediainc/offline-ui/styles.css';
 ```
 
-### 2. Configure Tailwind (if using Tailwind CSS v4)
+### 2. Configure Tailwind
 
-Add the package to your CSS source scanning:
+The package uses Tailwind CSS classes that need to be generated by your app's Tailwind build.
+
+**Tailwind CSS v4** - Add to your CSS:
 
 ```css
 @import "tailwindcss";
 @source "../node_modules/@offlinemediainc/offline-ui/dist/**/*.js";
 ```
 
+**Tailwind CSS v3** - Add to your `tailwind.config.ts`:
+
+```ts
+export default {
+  content: [
+    // ... your existing content paths
+    "./node_modules/@offlinemediainc/offline-ui/dist/**/*.{js,cjs}",
+  ],
+  // ...
+}
+```
+
 ### 3. Use components
 
 ```tsx
@@ -104,6 +118,17 @@ export default function Layout({ children }) {
 
 View the component documentation: [Storybook](https://your-chromatic-url.chromatic.com)
 
+## AI/LLM Usage
+
+When implementing with this design system, refer to the [Storybook documentation](https://your-chromatic-url.chromatic.com) for:
+
+- **Component usage patterns** - Each component has stories showing correct implementation
+- **Design decisions** - Story descriptions document constraints and guidelines
+- **Variants and props** - Interactive examples of all component options
+- **Composition patterns** - How components work together (e.g., Sidebar + Breadcrumb)
+
+The Storybook is the source of truth for how components should be used.
+
 ---
 
 ## Development

package/dist/index.cjs

@@ -1101,7 +1101,7 @@ var SidebarTrigger = React12__namespace.forwardRef((_a, ref) => {
       }
     }, props), {
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PanelLeft, {}),
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PanelLeft, { "aria-hidden": "true" }),
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Toggle Sidebar" })
       ]
     })
@@ -1414,9 +1414,7 @@ var SidebarMenuBadge = React12__namespace.forwardRef((_a, ref) => {
 SidebarMenuBadge.displayName = "SidebarMenuBadge";
 var SidebarMenuSkeleton = React12__namespace.forwardRef((_a, ref) => {
   var _b = _a, { className, showIcon = false } = _b, props = __objRest(_b, ["className", "showIcon"]);
-  const width = React12__namespace.useMemo(() => {
-    return `${Math.floor(Math.random() * 40) + 50}%`;
-  }, []);
+  const width = "70%";
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     __spreadProps(__spreadValues({