@forgedevstack/bear 1.0.0

package/README.md

@@ -0,0 +1,279 @@
+# @forgedevstack/bear
+
+Strong, reliable React UI components. Tailwind-powered, zero config required. The protective force of ForgeStack.
+
+## Portal
+
+Visit the [Bear UI Portal](https://bearui.com/) to explore all components, view live examples, and browse the documentation.
+
+## Features
+
+- **Tailwind-Powered**: Built with Tailwind CSS, zero config required
+- **React 18+**: Works with React 18 and above
+- **TypeScript**: Full type safety with comprehensive TypeScript definitions
+- **Comprehensive Component Library**: 50+ production-ready components
+- **Accessible**: ARIA attributes and keyboard navigation support
+- **Customizable**: Flexible theming and styling options
+- **Tree-Shakeable**: Import only what you need
+- **Zero Config**: Works out of the box with minimal setup
+
+## Installation
+
+```bash
+npm install @forgedevstack/bear
+# or
+pnpm add @forgedevstack/bear
+# or
+yarn add @forgedevstack/bear
+```
+
+### Import CSS (Required)
+
+Import the compiled CSS file once in your app:
+
+```tsx
+// In your main entry file (e.g., main.tsx, App.tsx, or index.css)
+import '@forgedevstack/bear/styles.css';
+```
+
+## Quick Start
+
+```tsx
+import { Button, Card, CardHeader, CardBody } from '@forgedevstack/bear';
+
+function App() {
+  return (
+    <Card>
+      <CardHeader>
+        <h2>Welcome to Bear</h2>
+      </CardHeader>
+      <CardBody>
+        <Button variant="primary">Get Started</Button>
+      </CardBody>
+    </Card>
+  );
+}
+```
+
+## Component Categories
+
+### Layout Components
+
+- `Container` - Responsive container with max-width constraints
+- `Flex` - Flexible box layout component
+- `Grid` / `GridItem` - CSS Grid layout system
+
+### UI Components
+
+- `Button` / `ButtonGroup` - Interactive button components
+- `Card` - Container for content with header, body, and footer
+- `Badge` - Status indicators and labels
+- `Paper` - Elevated surface component
+- `Divider` - Visual separator
+- `Typography` - Text styling component
+- `Link` - Styled link component
+
+### Form Components
+
+- `Input` - Text input field
+- `Select` / `MultiSelect` - Dropdown selection components
+- `Checkbox` - Checkbox input
+- `Radio` / `RadioGroup` - Radio button inputs
+- `Switch` - Toggle switch
+- `Autocomplete` - Autocomplete input
+- `TransferList` - Transfer items between lists
+- `FileUpload` - File upload component
+- `NumberInput` - Numeric input with controls
+- `OTPInput` - One-time password input
+- `ColorPicker` - Color selection component
+- `DatePicker` - Date selection component
+- `TimePicker` - Time selection component
+- `Slider` - Range slider input
+
+### Feedback Components
+
+- `Alert` - Alert messages
+- `Spinner` - Loading spinner
+- `Rating` - Star rating component
+- `Progress` - Progress indicator
+- `Skeleton` - Loading skeleton states
+- `Toast` / `useToast` - Toast notifications
+- `BearLoader` - Custom bear-themed loader
+
+### Overlay Components
+
+- `Modal` - Modal dialog
+- `Drawer` - Slide-out drawer
+- `Tooltip` - Tooltip component
+- `Popover` - Popover component
+- `Menu` / `MenuItem` - Context menu
+- `Dropdown` - Dropdown menu
+- `SpeedDial` - Floating action speed dial
+
+### Data Display
+
+- `DataTable` - Advanced data table with sorting, filtering, and pagination
+- `Carousel` - Image/content carousel
+- `Accordion` - Collapsible content sections
+- `Tabs` - Tabbed interface
+- `List` - List component with various item types
+- `Avatar` / `AvatarGroup` - User avatar display
+- `Chip` - Compact element for input, attribute, or action
+- `TreeView` - Hierarchical tree structure
+- `Timeline` - Timeline component
+- `Statistic` - Statistical display
+- `EmptyState` - Empty state placeholder
+- `Image` - Enhanced image component
+
+### Navigation Components
+
+- `Breadcrumbs` - Navigation breadcrumbs
+- `Stepper` - Step-by-step navigation
+- `BottomNavigation` - Bottom navigation bar
+- `AppBar` - Application bar/header
+- `Pagination` - Page navigation
+
+### Utility Components
+
+- `ScrollArea` - Custom scrollable area
+- `Collapsible` - Collapsible content wrapper
+- `Kbd` - Keyboard key display
+- `CopyButton` - Copy to clipboard button
+- `Icon` / `BearIcons` - Icon component library
+- `BearLogo` - Bear logo component
+
+## Examples
+
+### Button
+
+```tsx
+import { Button } from '@forgedevstack/bear';
+
+<Button variant="primary">Primary</Button>
+<Button variant="secondary">Secondary</Button>
+<Button variant="outline">Outline</Button>
+<Button variant="ghost">Ghost</Button>
+```
+
+### Card
+
+```tsx
+import { Card, CardHeader, CardBody, CardFooter } from '@forgedevstack/bear';
+
+<Card>
+  <CardHeader>Title</CardHeader>
+  <CardBody>Content goes here</CardBody>
+  <CardFooter>Footer content</CardFooter>
+</Card>
+```
+
+### Form
+
+```tsx
+import { Input, Select, Checkbox, Button } from '@forgedevstack/bear';
+
+function LoginForm() {
+  return (
+    <form>
+      <Input label="Email" type="email" required />
+      <Input label="Password" type="password" required />
+      <Select 
+        label="Country"
+        options={[
+          { value: 'us', label: 'United States' },
+          { value: 'uk', label: 'United Kingdom' },
+        ]}
+      />
+      <Checkbox label="Remember me" />
+      <Button type="submit">Submit</Button>
+    </form>
+  );
+}
+```
+
+### DataTable
+
+```tsx
+import { DataTable, createColumns } from '@forgedevstack/bear';
+
+interface User {
+  id: number;
+  name: string;
+  email: string;
+  role: string;
+}
+
+const columns = createColumns<User>([
+  { key: 'name', header: 'Name' },
+  { key: 'email', header: 'Email' },
+  { key: 'role', header: 'Role' },
+]);
+
+const data: User[] = [
+  { id: 1, name: 'John Doe', email: 'john@example.com', role: 'admin' },
+  { id: 2, name: 'Jane Smith', email: 'jane@example.com', role: 'user' },
+];
+
+<DataTable data={data} columns={columns} />
+```
+
+### Toast Notifications
+
+```tsx
+import { ToastProvider, useToast, Button } from '@forgedevstack/bear';
+
+function App() {
+  return (
+    <ToastProvider>
+      <MyComponent />
+    </ToastProvider>
+  );
+}
+
+function MyComponent() {
+  const toast = useToast();
+  
+  return (
+    <Button onClick={() => toast.success('Operation successful!')}>
+      Show Toast
+    </Button>
+  );
+}
+```
+
+## Theming
+
+Bear components support customization through Tailwind CSS. You can override default styles by configuring your Tailwind theme:
+
+```js
+// tailwind.config.js
+module.exports = {
+  theme: {
+    extend: {
+      colors: {
+        // Your custom colors
+      },
+    },
+  },
+}
+```
+
+## TypeScript Support
+
+All components are fully typed with TypeScript:
+
+```tsx
+import { Button, ButtonProps } from '@forgedevstack/bear';
+
+const buttonProps: ButtonProps = {
+  variant: 'primary',
+  size: 'md',
+  children: 'Click me',
+};
+
+<Button {...buttonProps} />
+```
+
+## License
+
+MIT

package/dist/components/Accordion/Accordion.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),u=require("react"),n=require("../../utils/cn.cjs"),g=u.createContext(null),m=({children:o,allowMultiple:s=!1,defaultOpen:i=[],className:t,testId:b})=>{const[d,c]=u.useState(i),l=r=>{c(a=>a.includes(r)?a.filter(x=>x!==r):s?[...a,r]:[r])};return e.jsx(g.Provider,{value:{openItems:d,toggleItem:l,allowMultiple:s},children:e.jsx("div",{className:n.cn("bear-divide-y bear-divide-gray-200 dark:bear-divide-gray-700 bear-border bear-border-gray-200 dark:bear-border-gray-700 bear-rounded-lg bear-overflow-hidden",t),"data-testid":b,children:o})})},y=({id:o,title:s,children:i,disabled:t=!1,icon:b,className:d})=>{const c=u.useContext(g);if(!c)throw new Error("AccordionItem must be used within an Accordion");const{openItems:l,toggleItem:r}=c,a=l.includes(o);return e.jsxs("div",{className:n.cn("bear-bg-white dark:bear-bg-gray-900",d),children:[e.jsxs("button",{onClick:()=>!t&&r(o),disabled:t,className:n.cn("bear-w-full bear-flex bear-items-center bear-justify-between bear-px-4 bear-py-3","bear-text-left bear-font-medium bear-text-gray-900 dark:bear-text-white","hover:bear-bg-gray-50 dark:hover:bear-bg-gray-800 bear-transition-colors",t&&"bear-opacity-50 bear-cursor-not-allowed"),children:[e.jsx("span",{children:s}),b||e.jsx("svg",{className:n.cn("bear-w-5 bear-h-5 bear-text-gray-500 bear-transition-transform bear-duration-200",a&&"bear-rotate-180"),fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M19 9l-7 7-7-7"})})]}),e.jsx("div",{className:n.cn("bear-overflow-hidden bear-transition-all bear-duration-200",a?"bear-max-h-96":"bear-max-h-0"),children:e.jsx("div",{className:"bear-px-4 bear-py-3 bear-text-gray-600 dark:bear-text-gray-300 bear-bg-gray-50 dark:bear-bg-gray-800/50",children:i})})]})};exports.Accordion=m;exports.AccordionItem=y;

package/dist/components/Accordion/Accordion.d.ts

@@ -0,0 +1,22 @@
+import { FC } from 'react';
+import { AccordionProps, AccordionItemProps } from './Accordion.types';
+/**
+ * Accordion - Collapsible content panels
+ *
+ * @example
+ * ```tsx
+ * <Accordion allowMultiple>
+ *   <AccordionItem id="1" title="Section 1">
+ *     Content for section 1
+ *   </AccordionItem>
+ *   <AccordionItem id="2" title="Section 2">
+ *     Content for section 2
+ *   </AccordionItem>
+ * </Accordion>
+ * ```
+ */
+export declare const Accordion: FC<AccordionProps>;
+/**
+ * AccordionItem - Individual accordion panel
+ */
+export declare const AccordionItem: FC<AccordionItemProps>;

package/dist/components/Accordion/Accordion.js

@@ -0,0 +1,79 @@
+import { jsx as e, jsxs as m } from "react/jsx-runtime";
+import { createContext as h, useState as x, useContext as f } from "react";
+import { cn as o } from "../../utils/cn.js";
+const g = h(null), k = ({
+  children: n,
+  allowMultiple: b = !1,
+  defaultOpen: s = [],
+  className: t,
+  testId: d
+}) => {
+  const [c, i] = x(s), l = (r) => {
+    i((a) => a.includes(r) ? a.filter((u) => u !== r) : b ? [...a, r] : [r]);
+  };
+  return /* @__PURE__ */ e(g.Provider, { value: { openItems: c, toggleItem: l, allowMultiple: b }, children: /* @__PURE__ */ e(
+    "div",
+    {
+      className: o("bear-divide-y bear-divide-gray-200 dark:bear-divide-gray-700 bear-border bear-border-gray-200 dark:bear-border-gray-700 bear-rounded-lg bear-overflow-hidden", t),
+      "data-testid": d,
+      children: n
+    }
+  ) });
+}, w = ({
+  id: n,
+  title: b,
+  children: s,
+  disabled: t = !1,
+  icon: d,
+  className: c
+}) => {
+  const i = f(g);
+  if (!i)
+    throw new Error("AccordionItem must be used within an Accordion");
+  const { openItems: l, toggleItem: r } = i, a = l.includes(n);
+  return /* @__PURE__ */ m("div", { className: o("bear-bg-white dark:bear-bg-gray-900", c), children: [
+    /* @__PURE__ */ m(
+      "button",
+      {
+        onClick: () => !t && r(n),
+        disabled: t,
+        className: o(
+          "bear-w-full bear-flex bear-items-center bear-justify-between bear-px-4 bear-py-3",
+          "bear-text-left bear-font-medium bear-text-gray-900 dark:bear-text-white",
+          "hover:bear-bg-gray-50 dark:hover:bear-bg-gray-800 bear-transition-colors",
+          t && "bear-opacity-50 bear-cursor-not-allowed"
+        ),
+        children: [
+          /* @__PURE__ */ e("span", { children: b }),
+          d || /* @__PURE__ */ e(
+            "svg",
+            {
+              className: o(
+                "bear-w-5 bear-h-5 bear-text-gray-500 bear-transition-transform bear-duration-200",
+                a && "bear-rotate-180"
+              ),
+              fill: "none",
+              viewBox: "0 0 24 24",
+              stroke: "currentColor",
+              children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" })
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ e(
+      "div",
+      {
+        className: o(
+          "bear-overflow-hidden bear-transition-all bear-duration-200",
+          a ? "bear-max-h-96" : "bear-max-h-0"
+        ),
+        children: /* @__PURE__ */ e("div", { className: "bear-px-4 bear-py-3 bear-text-gray-600 dark:bear-text-gray-300 bear-bg-gray-50 dark:bear-bg-gray-800/50", children: s })
+      }
+    )
+  ] });
+};
+export {
+  k as Accordion,
+  w as AccordionItem
+};

package/dist/components/Accordion/Accordion.types.d.ts

@@ -0,0 +1,32 @@
+import { ReactNode } from 'react';
+export interface AccordionContextValue {
+    openItems: string[];
+    toggleItem: (id: string) => void;
+    allowMultiple: boolean;
+}
+export interface AccordionProps {
+    /** Accordion items */
+    children: ReactNode;
+    /** Allow multiple items open at once */
+    allowMultiple?: boolean;
+    /** Default open items */
+    defaultOpen?: string[];
+    /** Custom class name */
+    className?: string;
+    /** Test ID */
+    testId?: string;
+}
+export interface AccordionItemProps {
+    /** Unique identifier */
+    id: string;
+    /** Item header */
+    title: ReactNode;
+    /** Item content */
+    children: ReactNode;
+    /** Whether item is disabled */
+    disabled?: boolean;
+    /** Icon to show (overrides default chevron) */
+    icon?: ReactNode;
+    /** Custom class name */
+    className?: string;
+}

package/dist/components/Accordion/index.d.ts

@@ -0,0 +1,2 @@
+export { Accordion, AccordionItem } from './Accordion';
+export type { AccordionProps, AccordionItemProps, AccordionContextValue } from './Accordion.types';

package/dist/components/Alert/Alert.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),y=require("react"),i=require("../../utils/cn.cjs"),k={success:e.jsxs("svg",{width:20,height:20,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:2,children:[e.jsx("path",{d:"M22 11.08V12a10 10 0 1 1-5.93-9.14"}),e.jsx("polyline",{points:"22 4 12 14.01 9 11.01"})]}),info:e.jsxs("svg",{width:20,height:20,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:2,children:[e.jsx("circle",{cx:"12",cy:"12",r:"10"}),e.jsx("line",{x1:"12",y1:"16",x2:"12",y2:"12"}),e.jsx("line",{x1:"12",y1:"8",x2:"12.01",y2:"8"})]}),warning:e.jsxs("svg",{width:20,height:20,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:2,children:[e.jsx("path",{d:"M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"}),e.jsx("line",{x1:"12",y1:"9",x2:"12",y2:"13"}),e.jsx("line",{x1:"12",y1:"17",x2:"12.01",y2:"17"})]}),error:e.jsxs("svg",{width:20,height:20,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:2,children:[e.jsx("circle",{cx:"12",cy:"12",r:"10"}),e.jsx("line",{x1:"15",y1:"9",x2:"9",y2:"15"}),e.jsx("line",{x1:"9",y1:"9",x2:"15",y2:"15"})]})},w=()=>e.jsxs("svg",{width:18,height:18,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:2,children:[e.jsx("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),e.jsx("line",{x1:"6",y1:"6",x2:"18",y2:"18"})]}),v={success:{bg:"rgba(34, 197, 94, 0.1)",border:"#22c55e",text:"#166534",icon:"#22c55e"},info:{bg:"rgba(59, 130, 246, 0.1)",border:"#3b82f6",text:"#1e40af",icon:"#3b82f6"},warning:{bg:"rgba(245, 158, 11, 0.1)",border:"#f59e0b",text:"#92400e",icon:"#f59e0b"},error:{bg:"rgba(239, 68, 68, 0.1)",border:"#ef4444",text:"#991b1b",icon:"#ef4444"}},p={filled:r=>i.cn("ember-text-white",r==="success"&&"ember-bg-green-500",r==="info"&&"ember-bg-blue-500",r==="warning"&&"ember-bg-amber-500",r==="error"&&"ember-bg-red-500"),outlined:()=>"ember-bg-transparent ember-border",standard:()=>""},C=({severity:r="info",variant:t="standard",title:c,icon:n=!0,action:b,closable:a=!1,onClose:o,children:x,className:m,testId:h,...u})=>{const[g,f]=y.useState(!0);if(!g)return null;const s=v[r],l=t==="filled",j=()=>{f(!1),o==null||o()},d=()=>n===!1?null:n!==!0?n:k[r];return e.jsxs("div",{role:"alert",className:i.cn("ember-flex ember-items-start ember-gap-3 ember-p-4 ember-rounded-lg",p[t](r),m),style:{backgroundColor:l?void 0:s.bg,borderColor:t==="outlined"?s.border:void 0,color:l?void 0:s.text},"data-testid":h,...u,children:[d()&&e.jsx("span",{className:"ember-flex-shrink-0 ember-mt-0.5",style:{color:l?"currentColor":s.icon},children:d()}),e.jsxs("div",{className:"ember-flex-1 ember-min-w-0",children:[c&&e.jsx("div",{className:"ember-font-semibold ember-mb-1",children:c}),x&&e.jsx("div",{className:"ember-text-sm",children:x})]}),b&&e.jsx("div",{className:"ember-flex-shrink-0",children:b}),a&&e.jsx("button",{type:"button",onClick:j,className:i.cn("ember-flex-shrink-0 ember-p-1 ember-rounded hover:ember-bg-black/10 ember-transition-colors","ember-bg-transparent ember-border-none ember-cursor-pointer"),"aria-label":"Close alert",children:e.jsx(w,{})})]})};exports.Alert=C;

package/dist/components/Alert/Alert.d.ts

@@ -0,0 +1,16 @@
+import { FC } from 'react';
+import { AlertProps } from './Alert.types';
+/**
+ * Alert component for displaying important messages
+ *
+ * @example
+ * ```tsx
+ * <Alert severity="success">Operation completed successfully!</Alert>
+ * <Alert severity="error" title="Error" closable onClose={() => {}}>
+ *   Something went wrong.
+ * </Alert>
+ * <Alert severity="warning" variant="filled">Warning message</Alert>
+ * ```
+ */
+export declare const Alert: FC<AlertProps>;
+export default Alert;

package/dist/components/Alert/Alert.js

@@ -0,0 +1,109 @@
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import { useState as p } from "react";
+import { cn as b } from "../../utils/cn.js";
+const w = {
+  success: /* @__PURE__ */ o("svg", { width: 20, height: 20, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, children: [
+    /* @__PURE__ */ e("path", { d: "M22 11.08V12a10 10 0 1 1-5.93-9.14" }),
+    /* @__PURE__ */ e("polyline", { points: "22 4 12 14.01 9 11.01" })
+  ] }),
+  info: /* @__PURE__ */ o("svg", { width: 20, height: 20, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, children: [
+    /* @__PURE__ */ e("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ e("line", { x1: "12", y1: "16", x2: "12", y2: "12" }),
+    /* @__PURE__ */ e("line", { x1: "12", y1: "8", x2: "12.01", y2: "8" })
+  ] }),
+  warning: /* @__PURE__ */ o("svg", { width: 20, height: 20, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, children: [
+    /* @__PURE__ */ e("path", { d: "M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" }),
+    /* @__PURE__ */ e("line", { x1: "12", y1: "9", x2: "12", y2: "13" }),
+    /* @__PURE__ */ e("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })
+  ] }),
+  error: /* @__PURE__ */ o("svg", { width: 20, height: 20, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, children: [
+    /* @__PURE__ */ e("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ e("line", { x1: "15", y1: "9", x2: "9", y2: "15" }),
+    /* @__PURE__ */ e("line", { x1: "9", y1: "9", x2: "15", y2: "15" })
+  ] })
+}, v = () => /* @__PURE__ */ o("svg", { width: 18, height: 18, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, children: [
+  /* @__PURE__ */ e("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+  /* @__PURE__ */ e("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+] }), C = {
+  success: { bg: "rgba(34, 197, 94, 0.1)", border: "#22c55e", text: "#166534", icon: "#22c55e" },
+  info: { bg: "rgba(59, 130, 246, 0.1)", border: "#3b82f6", text: "#1e40af", icon: "#3b82f6" },
+  warning: { bg: "rgba(245, 158, 11, 0.1)", border: "#f59e0b", text: "#92400e", icon: "#f59e0b" },
+  error: { bg: "rgba(239, 68, 68, 0.1)", border: "#ef4444", text: "#991b1b", icon: "#ef4444" }
+}, N = {
+  filled: (r) => b(
+    "ember-text-white",
+    r === "success" && "ember-bg-green-500",
+    r === "info" && "ember-bg-blue-500",
+    r === "warning" && "ember-bg-amber-500",
+    r === "error" && "ember-bg-red-500"
+  ),
+  outlined: () => "ember-bg-transparent ember-border",
+  standard: () => ""
+}, W = ({
+  severity: r = "info",
+  variant: n = "standard",
+  title: c,
+  icon: l = !0,
+  action: d,
+  closable: h = !1,
+  onClose: i,
+  children: a,
+  className: x,
+  testId: f,
+  ...g
+}) => {
+  const [u, y] = p(!0);
+  if (!u) return null;
+  const t = C[r], s = n === "filled", k = () => {
+    y(!1), i == null || i();
+  }, m = () => l === !1 ? null : l !== !0 ? l : w[r];
+  return /* @__PURE__ */ o(
+    "div",
+    {
+      role: "alert",
+      className: b(
+        "ember-flex ember-items-start ember-gap-3 ember-p-4 ember-rounded-lg",
+        N[n](r),
+        x
+      ),
+      style: {
+        backgroundColor: s ? void 0 : t.bg,
+        borderColor: n === "outlined" ? t.border : void 0,
+        color: s ? void 0 : t.text
+      },
+      "data-testid": f,
+      ...g,
+      children: [
+        m() && /* @__PURE__ */ e(
+          "span",
+          {
+            className: "ember-flex-shrink-0 ember-mt-0.5",
+            style: { color: s ? "currentColor" : t.icon },
+            children: m()
+          }
+        ),
+        /* @__PURE__ */ o("div", { className: "ember-flex-1 ember-min-w-0", children: [
+          c && /* @__PURE__ */ e("div", { className: "ember-font-semibold ember-mb-1", children: c }),
+          a && /* @__PURE__ */ e("div", { className: "ember-text-sm", children: a })
+        ] }),
+        d && /* @__PURE__ */ e("div", { className: "ember-flex-shrink-0", children: d }),
+        h && /* @__PURE__ */ e(
+          "button",
+          {
+            type: "button",
+            onClick: k,
+            className: b(
+              "ember-flex-shrink-0 ember-p-1 ember-rounded hover:ember-bg-black/10 ember-transition-colors",
+              "ember-bg-transparent ember-border-none ember-cursor-pointer"
+            ),
+            "aria-label": "Close alert",
+            children: /* @__PURE__ */ e(v, {})
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  W as Alert
+};

package/dist/components/Alert/Alert.types.d.ts

@@ -0,0 +1,23 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export type AlertSeverity = 'success' | 'info' | 'warning' | 'error';
+export type AlertVariant = 'filled' | 'outlined' | 'standard';
+export interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** Alert severity/type */
+    severity?: AlertSeverity;
+    /** Alert visual variant */
+    variant?: AlertVariant;
+    /** Alert title */
+    title?: ReactNode;
+    /** Whether to show default icon */
+    icon?: boolean | ReactNode;
+    /** Action buttons/elements */
+    action?: ReactNode;
+    /** Whether alert can be closed */
+    closable?: boolean;
+    /** Callback when close button is clicked */
+    onClose?: () => void;
+    /** Content of the alert */
+    children?: ReactNode;
+    /** Test ID */
+    testId?: string;
+}

package/dist/components/Alert/index.d.ts

@@ -0,0 +1,2 @@
+export { Alert, default } from './Alert';
+export type { AlertProps, AlertSeverity, AlertVariant } from './Alert.types';

package/dist/components/AppBar/AppBar.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),u=require("../../utils/cn.cjs"),f=({children:a,position:t="sticky",variant:r="default",color:b="default",className:s,leftContent:i,rightContent:c,centerContent:n,elevation:l=!0})=>{const d={fixed:"bear-fixed bear-top-0 bear-left-0 bear-right-0 bear-z-50",sticky:"bear-sticky bear-top-0 bear-z-50",static:"bear-static",relative:"bear-relative"},o={default:"bear-bg-zinc-900",transparent:"bear-bg-transparent",blur:"bear-bg-zinc-900/80 bear-backdrop-blur-md"},p={default:"",primary:"bear-bg-pink-600",dark:"bear-bg-black"};return e.jsx("header",{className:u.cn("bear-h-16 bear-px-4 bear-flex bear-items-center",d[t],r!=="transparent"&&o[r],p[b],l&&"bear-shadow-lg bear-border-b bear-border-zinc-800",s),children:a||e.jsxs(e.Fragment,{children:[e.jsx("div",{className:"bear-flex bear-items-center bear-gap-4",children:i}),e.jsx("div",{className:"bear-flex-1 bear-flex bear-items-center bear-justify-center",children:n}),e.jsx("div",{className:"bear-flex bear-items-center bear-gap-4",children:c})]})})};exports.AppBar=f;

package/dist/components/AppBar/AppBar.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { AppBarProps } from './AppBar.types';
+export declare const AppBar: FC<AppBarProps>;

package/dist/components/AppBar/AppBar.js

@@ -0,0 +1,49 @@
+import { jsx as e, jsxs as f, Fragment as m } from "react/jsx-runtime";
+import { cn as x } from "../../utils/cn.js";
+const u = ({
+  children: a,
+  position: b = "sticky",
+  variant: r = "default",
+  color: t = "default",
+  className: s,
+  leftContent: i,
+  rightContent: c,
+  centerContent: l,
+  elevation: n = !0
+}) => {
+  const d = {
+    fixed: "bear-fixed bear-top-0 bear-left-0 bear-right-0 bear-z-50",
+    sticky: "bear-sticky bear-top-0 bear-z-50",
+    static: "bear-static",
+    relative: "bear-relative"
+  }, o = {
+    default: "bear-bg-zinc-900",
+    transparent: "bear-bg-transparent",
+    blur: "bear-bg-zinc-900/80 bear-backdrop-blur-md"
+  }, p = {
+    default: "",
+    primary: "bear-bg-pink-600",
+    dark: "bear-bg-black"
+  };
+  return /* @__PURE__ */ e(
+    "header",
+    {
+      className: x(
+        "bear-h-16 bear-px-4 bear-flex bear-items-center",
+        d[b],
+        r !== "transparent" && o[r],
+        p[t],
+        n && "bear-shadow-lg bear-border-b bear-border-zinc-800",
+        s
+      ),
+      children: a || /* @__PURE__ */ f(m, { children: [
+        /* @__PURE__ */ e("div", { className: "bear-flex bear-items-center bear-gap-4", children: i }),
+        /* @__PURE__ */ e("div", { className: "bear-flex-1 bear-flex bear-items-center bear-justify-center", children: l }),
+        /* @__PURE__ */ e("div", { className: "bear-flex bear-items-center bear-gap-4", children: c })
+      ] })
+    }
+  );
+};
+export {
+  u as AppBar
+};

package/dist/components/AppBar/AppBar.types.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+export interface AppBarProps {
+    children?: ReactNode;
+    position?: 'fixed' | 'sticky' | 'static' | 'relative';
+    variant?: 'default' | 'transparent' | 'blur';
+    color?: 'default' | 'primary' | 'dark';
+    className?: string;
+    leftContent?: ReactNode;
+    rightContent?: ReactNode;
+    centerContent?: ReactNode;
+    elevation?: boolean;
+}

package/dist/components/AppBar/index.d.ts

@@ -0,0 +1,2 @@
+export { AppBar } from './AppBar';
+export type { AppBarProps } from './AppBar.types';