@schandlergarcia/sf-web-components 1.0.0

package/.a4drules/webapp-data.md

@@ -0,0 +1,353 @@
+# Salesforce Data Access
+
+- **Fetch or display Salesforce data** — Query records (Account, Contact, Opportunity, custom objects) to show in a component
+- **Create, update, or delete records** — Perform mutations on Salesforce data
+- **Add data fetching to a component** — Wire up a React component to Salesforce data
+- **Call REST APIs** — Use Connect REST, Apex REST, or UI API endpoints
+- **Explore the org schema** — Discover available objects, fields, or relationships
+
+## Data SDK Requirement
+
+> **All Salesforce data access MUST use the Data SDK** (`@salesforce/sdk-data`). The SDK handles authentication, CSRF, and base URL resolution. Never use `fetch()` or `axios` directly.
+
+```typescript
+import { createDataSDK, gql } from "@salesforce/sdk-data";
+
+const sdk = await createDataSDK();
+
+// GraphQL for record queries/mutations (PREFERRED)
+const response = await sdk.graphql?.<ResponseType>(query, variables);
+
+// REST for Connect REST, Apex REST, UI API (when GraphQL insufficient)
+const res = await sdk.fetch?.("/services/apexrest/my-resource");
+```
+
+**Always use optional chaining** (`sdk.graphql?.()`, `sdk.fetch?.()`) — these methods may be undefined in some surfaces.
+
+## Supported APIs
+
+**Only the following APIs are permitted.** Any endpoint not listed here must not be used.
+
+| API | Method | Endpoints / Use Case |
+|-----|--------|----------------------|
+| GraphQL | `sdk.graphql` | All record queries and mutations via `uiapi { }` namespace |
+| UI API REST | `sdk.fetch` | `/services/data/v{ver}/ui-api/records/{id}` — record metadata when GraphQL is insufficient |
+| Apex REST | `sdk.fetch` | `/services/apexrest/{resource}` — custom server-side logic, aggregates, multi-step transactions |
+| Connect REST | `sdk.fetch` | `/services/data/v{ver}/connect/file/upload/config` — file upload config |
+| Einstein LLM | `sdk.fetch` | `/services/data/v{ver}/einstein/llm/prompt/generations` — AI text generation |
+
+**Not supported:**
+
+- **Enterprise REST query endpoint** (`/services/data/v*/query` with SOQL) — blocked at the proxy level. Use GraphQL for record reads; use Apex REST if server-side SOQL aggregates are required.
+- **Aura-enabled Apex** (`@AuraEnabled`) — an LWC/Aura pattern with no invocation path from React webapps.
+- **Chatter API** (`/chatter/users/me`) — use `uiapi { currentUser { ... } }` in a GraphQL query instead.
+- **Any other Salesforce REST endpoint** not listed in the supported table above.
+
+## Decision: GraphQL vs REST
+
+| Need | Method | Example |
+|------|--------|---------|
+| Query/mutate records | `sdk.graphql` | Account, Contact, custom objects |
+| Current user info | `sdk.graphql` | `uiapi { currentUser { Id Name { value } } }` |
+| UI API record metadata | `sdk.fetch` | `/ui-api/records/{id}` |
+| Connect REST | `sdk.fetch` | `/connect/file/upload/config` |
+| Apex REST | `sdk.fetch` | `/services/apexrest/auth/login` |
+| Einstein LLM | `sdk.fetch` | `/einstein/llm/prompt/generations` |
+
+**GraphQL is preferred** for record operations. Use REST only when GraphQL doesn't cover the use case.
+
+---
+
+## GraphQL Workflow
+
+### Step 1: Acquire Schema
+
+The `schema.graphql` file (265K+ lines) is the source of truth. **Never open or parse it directly.**
+
+1. Check if `schema.graphql` exists at the SFDX project root
+2. If missing, run from the **webapp dir**: `npm run graphql:schema`
+3. Custom objects appear only after metadata is deployed
+
+### Step 2: Look Up Entity Schema
+
+Map user intent to PascalCase names ("accounts" → `Account`), then **run the search script from the project root**:
+
+```bash
+# From project root — look up all relevant schema info for one or more entities
+bash .a4drules/skills/using-salesforce-data/graphql-search.sh Account
+
+# Multiple entities at once
+bash .a4drules/skills/using-salesforce-data/graphql-search.sh Account Contact Opportunity
+```
+
+The script outputs five sections per entity:
+1. **Type definition** — all queryable fields and relationships
+2. **Filter options** — available fields for `where:` conditions
+3. **Sort options** — available fields for `orderBy:`
+4. **Create input** — fields accepted by create mutations
+5. **Update input** — fields accepted by update mutations
+
+Use this output to determine exact field names before writing any query or mutation. **Maximum 2 script runs.** If the entity still can't be found, ask the user — the object may not be deployed.
+
+### Step 3: Generate Query
+
+Use the templates below. Every field name **must** be verified from the script output in Step 2.
+
+#### Read Query Template
+
+```graphql
+query GetAccounts {
+  uiapi {
+    query {
+      Account(where: { Industry: { eq: "Technology" } }, first: 10) {
+        edges {
+          node {
+            Id
+            Name @optional { value }
+            Industry @optional { value }
+            # Parent relationship
+            Owner @optional { Name { value } }
+            # Child relationship
+            Contacts @optional {
+              edges { node { Name @optional { value } } }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+```
+
+**FLS Resilience**: Apply `@optional` to all record fields. The server omits inaccessible fields instead of failing. Consuming code must use optional chaining:
+
+```typescript
+const name = node.Name?.value ?? "";
+```
+
+#### Mutation Template
+
+```graphql
+mutation CreateAccount($input: AccountCreateInput!) {
+  uiapi {
+    AccountCreate(input: $input) {
+      Record { Id Name { value } }
+    }
+  }
+}
+```
+
+**Mutation constraints:**
+- Create: Include required fields, only `createable` fields, no child relationships
+- Update: Include `Id`, only `updateable` fields
+- Delete: Include `Id` only
+
+#### Object Metadata & Picklist Values
+
+Use `uiapi { objectInfos(...) }` to fetch field metadata or picklist values. Pass **either** `apiNames` or `objectInfoInputs` — never both in the same query.
+
+**Object metadata** (field labels, data types, CRUD flags):
+
+```typescript
+const GET_OBJECT_INFO = gql`
+  query GetObjectInfo($apiNames: [String!]!) {
+    uiapi {
+      objectInfos(apiNames: $apiNames) {
+        ApiName
+        label
+        labelPlural
+        fields {
+          ApiName
+          label
+          dataType
+          updateable
+          createable
+        }
+      }
+    }
+  }
+`;
+
+const sdk = await createDataSDK();
+const response = await sdk.graphql?.(GET_OBJECT_INFO, { apiNames: ["Account"] });
+const objectInfos = response?.data?.uiapi?.objectInfos ?? [];
+```
+
+**Picklist values** (use `objectInfoInputs` + `... on PicklistField` inline fragment):
+
+```typescript
+const GET_PICKLIST_VALUES = gql`
+  query GetPicklistValues($objectInfoInputs: [ObjectInfoInput!]!) {
+    uiapi {
+      objectInfos(objectInfoInputs: $objectInfoInputs) {
+        ApiName
+        fields {
+          ApiName
+          ... on PicklistField {
+            picklistValuesByRecordTypeIDs {
+              recordTypeID
+              picklistValues {
+                label
+                value
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+`;
+
+const response = await sdk.graphql?.(GET_PICKLIST_VALUES, {
+  objectInfoInputs: [{ objectApiName: "Account" }],
+});
+const fields = response?.data?.uiapi?.objectInfos?.[0]?.fields ?? [];
+```
+
+### Step 4: Validate & Test
+
+1. **Lint**: `npx eslint <file>` from webapp dir
+2. **Test**: Ask user before testing. For mutations, request input values — never fabricate data.
+
+**If ESLint reports a GraphQL error** (e.g. `Cannot query field`, `Unknown type`, `Unknown argument`), the field or type name is wrong. Re-run the schema search script to find the correct name — do not guess:
+
+```bash
+# From project root — re-check the entity that caused the error
+bash .a4drules/skills/using-salesforce-data/graphql-search.sh <EntityName>
+```
+
+Then fix the query using the exact names from the script output.
+
+---
+
+## Webapp Integration (React)
+
+```typescript
+import { createDataSDK, gql } from "@salesforce/sdk-data";
+
+const GET_ACCOUNTS = gql`
+  query GetAccounts {
+    uiapi {
+      query {
+        Account(first: 10) {
+          edges {
+            node {
+              Id
+              Name @optional { value }
+              Industry @optional { value }
+            }
+          }
+        }
+      }
+    }
+  }
+`;
+
+const sdk = await createDataSDK();
+const response = await sdk.graphql?.(GET_ACCOUNTS);
+
+if (response?.errors?.length) {
+  throw new Error(response.errors.map(e => e.message).join("; "));
+}
+
+const accounts = response?.data?.uiapi?.query?.Account?.edges?.map(e => e.node) ?? [];
+
+---
+
+## REST API Patterns
+
+Use `sdk.fetch` when GraphQL is insufficient. See the [Supported APIs](#supported-apis) table for the full allowlist.
+
+```typescript
+declare const __SF_API_VERSION__: string;
+const API_VERSION = typeof __SF_API_VERSION__ !== "undefined" ? __SF_API_VERSION__ : "65.0";
+
+// Connect — file upload config
+const res = await sdk.fetch?.(`/services/data/v${API_VERSION}/connect/file/upload/config`);
+
+// Apex REST (no version in path)
+const res = await sdk.fetch?.("/services/apexrest/auth/login", {
+  method: "POST",
+  body: JSON.stringify({ email, password }),
+  headers: { "Content-Type": "application/json" },
+});
+
+// UI API — record with metadata (prefer GraphQL for simple reads)
+const res = await sdk.fetch?.(`/services/data/v${API_VERSION}/ui-api/records/${recordId}`);
+
+// Einstein LLM
+const res = await sdk.fetch?.(`/services/data/v${API_VERSION}/einstein/llm/prompt/generations`, {
+  method: "POST",
+  body: JSON.stringify({ promptTextorId: prompt }),
+});
+```
+
+**Current user**: Do not use Chatter (`/chatter/users/me`). Use GraphQL instead:
+
+```typescript
+const GET_CURRENT_USER = gql`
+  query CurrentUser {
+    uiapi { currentUser { Id Name { value } } }
+  }
+`;
+const response = await sdk.graphql?.(GET_CURRENT_USER);
+```
+
+---
+
+## Directory Structure
+
+```
+<project-root>/                              ← SFDX project root
+├── schema.graphql                           ← grep target (lives here)
+├── sfdx-project.json
+└── force-app/main/default/webapplications/<app-name>/  ← webapp dir
+    ├── package.json                         ← npm scripts
+    └── src/
+```
+
+| Command | Run From | Why |
+|---------|----------|-----|
+| `npm run graphql:schema` | webapp dir | Script in webapp's package.json |
+| `npx eslint <file>` | webapp dir | Reads eslint.config.js |
+| `bash .a4drules/skills/using-salesforce-data/graphql-search.sh <Entity>` | project root | Schema lookup |
+| `sf api request rest` | project root | Needs sfdx-project.json |
+
+---
+
+## Quick Reference
+
+### Schema Lookup (from project root)
+
+Run the search script to get all relevant schema info in one step:
+
+```bash
+bash .a4drules/skills/using-salesforce-data/graphql-search.sh <EntityName>
+```
+
+| Script Output Section | Used For |
+|-----------------------|----------|
+| Type definition | Field names, parent/child relationships |
+| Filter options | `where:` conditions |
+| Sort options | `orderBy:` |
+| CreateRepresentation | Create mutation field list |
+| UpdateRepresentation | Update mutation field list |
+
+### Error Categories
+
+| Error Contains | Resolution |
+|----------------|------------|
+| `Cannot query field` | Field name is wrong — run `graphql-search.sh <Entity>` and use the exact name from the Type definition section |
+| `Unknown type` | Type name is wrong — run `graphql-search.sh <Entity>` to confirm the correct PascalCase entity name |
+| `Unknown argument` | Argument name is wrong — run `graphql-search.sh <Entity>` and check Filter or OrderBy sections |
+| `invalid syntax` | Fix syntax per error message |
+| `validation error` | Field name is wrong — run `graphql-search.sh <Entity>` to verify |
+| `VariableTypeMismatch` | Correct argument type from schema |
+| `invalid cross reference id` | Entity deleted — ask for valid Id |
+
+### Checklist
+
+- [ ] All field names verified via search script (Step 2)
+- [ ] `@optional` applied to record fields (reads)
+- [ ] Optional chaining in consuming code
+- [ ] Lint passes: `npx eslint <file>`

package/.a4drules/webapp-ui.md

@@ -0,0 +1,16 @@
+# UI Platform Rule
+
+**All new UI must be built as a Salesforce Web Application.**
+
+When any task involves creating a new UI, frontend, page, dashboard, form, or user-facing feature:
+
+1. Use `sf webapp generate` to scaffold the web app inside the SFDX project — do not use `create-react-app`, standalone Vite, or any other scaffold.
+2. The app must live under `<sfdx-source>/webapplications/<AppName>/` as a WebApplication bundle.
+3. Do not build new UIs as LWC components, Aura components, or Visualforce pages.
+
+Invoke the `creating-webapp` skill (`.a4drules/skills/creating-webapp/`) for the full setup workflow.
+
+## Data Access (MUST FOLLOW)
+
+- **Never hardcode data in the app.** All data displayed in the UI must come from live Salesforce data fetching — no static arrays, mock objects, or placeholder values in production code.
+- **Always invoke the `using-salesforce-data` skill** (`.a4drules/skills/using-salesforce-data/`) before writing any data access code. All implementation must be derived from that skill.

package/README.md

@@ -0,0 +1,124 @@
+# @salesforce/sf-web-components
+
+Reusable Salesforce web components library with Tailwind CSS v4 and shadcn/ui components.
+
+## Installation
+
+```bash
+npm install @salesforce/sf-web-components
+```
+
+## Peer Dependencies
+
+This package requires:
+- React 18+ or 19+
+- Tailwind CSS v4
+- @tailwindcss/vite
+
+## Usage
+
+### Import Components
+
+```tsx
+import { Button, Card } from '@salesforce/sf-web-components';
+import { cn } from '@salesforce/sf-web-components/lib';
+
+function App() {
+  return (
+    <Card className={cn('p-4')}>
+      <Button>Click me</Button>
+    </Card>
+  );
+}
+```
+
+### Import Styles
+
+Add to your main CSS file:
+
+```css
+@import '@salesforce/sf-web-components/styles';
+```
+
+### Tailwind Configuration
+
+Extend your `tailwind.config.ts`:
+
+```ts
+import type { Config } from 'tailwindcss';
+
+export default {
+  content: [
+    './src/**/*.{js,ts,jsx,tsx}',
+    './node_modules/@salesforce/sf-web-components/dist/**/*.{js,jsx}'
+  ],
+  theme: {
+    extend: {}
+  }
+} satisfies Config;
+```
+
+## Components
+
+This library includes:
+- UI components (Button, Card, Input, etc.)
+- Data components (Tables, Lists)
+- Chart components (via Recharts)
+- Form components
+- Filter components
+- Layout components
+
+## Utilities
+
+```tsx
+import { cn } from '@salesforce/sf-web-components/lib';
+
+// Merge Tailwind classes with conflict resolution
+const className = cn('px-2 py-1', 'px-4'); // Result: 'py-1 px-4'
+```
+
+## Development
+
+```bash
+# Install dependencies
+npm install
+
+# Build the library
+npm run build
+
+# Build types only
+npm run build:types
+```
+
+## Publishing
+
+```bash
+npm publish
+```
+
+
+## 🤖 AI Agent Skills
+
+This package includes Claude Code agent skills that teach AI how to work with these components.
+
+The `.a4drules/` directory contains:
+- **Skills**: Step-by-step guides for building with this library
+- **Features**: Feature-specific implementation rules
+- **Docs**: Data access patterns and UI conventions
+
+### Using with Claude Code
+
+When you install this package, Claude Code automatically discovers the skills and uses them to:
+- Build components correctly
+- Follow your architectural patterns
+- Use the right data access methods
+- Apply consistent styling
+
+### Available Skills
+
+Check `.a4drules/skills/` for the full list of included agent skills.
+
+
+## License
+
+MIT

package/dist/components/library/cards/ActionList.js

@@ -0,0 +1,27 @@
+import { jsxs as i, jsx as r } from "react/jsx-runtime";
+import "react";
+import m from "../ui/Button.js";
+function x({
+  actions: s = [],
+  title: t,
+  onAction: l,
+  className: d = ""
+}) {
+  return /* @__PURE__ */ i("div", { className: `rounded-2xl border border-slate-200 bg-white p-4 dark:border-slate-800 dark:bg-slate-900 ${d}`, children: [
+    t && /* @__PURE__ */ r("div", { className: "mb-3 text-sm font-medium text-slate-900 dark:text-slate-50", children: t }),
+    /* @__PURE__ */ r("div", { className: "flex flex-wrap gap-2", children: s.map((e, a) => /* @__PURE__ */ r(
+      m,
+      {
+        size: "sm",
+        variant: a === 0 ? "primary" : "outline",
+        onClick: () => l?.(e),
+        children: typeof e == "string" ? e : e.label
+      },
+      a
+    )) })
+  ] });
+}
+export {
+  x as default
+};
+//# sourceMappingURL=ActionList.js.map

package/dist/components/library/cards/ActionList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionList.js","sources":["../../../../src/components/library/cards/ActionList.jsx"],"sourcesContent":["import React from \"react\";\nimport UIButton from \"../ui/Button\";\n\n/**\n * Row of action buttons — typically used at the bottom of a dashboard section.\n *\n * @param {{ label: string, [key]: any }[] | string[]} actions\n * @param {string}     title\n * @param {Function}   onAction  Called with the action object/string when clicked\n */\nexport default function ActionList({\n  actions = [],\n  title,\n  onAction,\n  className = \"\",\n}) {\n  return (\n    <div className={`rounded-2xl border border-slate-200 bg-white p-4 dark:border-slate-800 dark:bg-slate-900 ${className}`}>\n      {title && (\n        <div className=\"mb-3 text-sm font-medium text-slate-900 dark:text-slate-50\">\n          {title}\n        </div>\n      )}\n      <div className=\"flex flex-wrap gap-2\">\n        {actions.map((action, i) => (\n          <UIButton\n            key={i}\n            size=\"sm\"\n            variant={i === 0 ? \"primary\" : \"outline\"}\n            onClick={() => onAction?.(action)}\n          >\n            {typeof action === \"string\" ? action : action.label}\n          </UIButton>\n        ))}\n      </div>\n    </div>\n  );\n}\n"],"names":["ActionList","actions","title","onAction","className","jsxs","jsx","action","i","UIButton"],"mappings":";;;AAUA,SAAwBA,EAAW;AAAA,EACjC,SAAAC,IAAU,CAAA;AAAA,EACV,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC,IAAY;AACd,GAAG;AACD,SACE,gBAAAC,EAAC,OAAA,EAAI,WAAW,4FAA4FD,CAAS,IAClH,UAAA;AAAA,IAAAF,KACC,gBAAAI,EAAC,OAAA,EAAI,WAAU,8DACZ,UAAAJ,GACH;AAAA,IAEF,gBAAAI,EAAC,SAAI,WAAU,wBACZ,YAAQ,IAAI,CAACC,GAAQC,MACpB,gBAAAF;AAAA,MAACG;AAAA,MAAA;AAAA,QAEC,MAAK;AAAA,QACL,SAASD,MAAM,IAAI,YAAY;AAAA,QAC/B,SAAS,MAAML,IAAWI,CAAM;AAAA,QAE/B,UAAA,OAAOA,KAAW,WAAWA,IAASA,EAAO;AAAA,MAAA;AAAA,MALzCC;AAAA,IAAA,CAOR,EAAA,CACH;AAAA,EAAA,GACF;AAEJ;"}

package/dist/components/library/cards/ActivityCard.js

@@ -0,0 +1,40 @@
+import { jsxs as i, jsx as t } from "react/jsx-runtime";
+import "react";
+import { AnimatePresence as n, motion as o } from "framer-motion";
+import { ExclamationCircleIcon as c, CheckCircleIcon as d, ClockIcon as m, ArrowPathIcon as p } from "@heroicons/react/24/outline";
+import x from "../ui/Text.js";
+const l = {
+  working: { Icon: p, color: "text-indigo-500", spin: !0 },
+  pending: { Icon: m, color: "text-slate-400", spin: !1 },
+  complete: { Icon: d, color: "text-emerald-500", spin: !1 },
+  error: { Icon: c, color: "text-red-500", spin: !1 }
+};
+function u({ action: e }) {
+  const r = l[e.status] ?? l.pending;
+  return /* @__PURE__ */ t(
+    o.div,
+    {
+      initial: { y: 12, opacity: 0 },
+      animate: { y: 0, opacity: 1 },
+      exit: { y: -12, opacity: 0 },
+      className: "rounded-lg border border-slate-100 bg-slate-50 p-3 dark:border-slate-800 dark:bg-slate-950/40",
+      children: /* @__PURE__ */ i("div", { className: "flex items-start gap-2", children: [
+        /* @__PURE__ */ t(r.Icon, { className: `mt-0.5 h-4 w-4 shrink-0 ${r.color} ${r.spin ? "animate-spin" : ""}` }),
+        /* @__PURE__ */ i("div", { className: "min-w-0", children: [
+          /* @__PURE__ */ t("div", { className: "text-xs font-medium text-slate-700 dark:text-slate-200", children: e.title ?? e.action }),
+          (e.subtitle ?? e.traveler ?? e.timestamp ?? e.startedAt) && /* @__PURE__ */ t("div", { className: "mt-0.5 text-[10px] text-slate-400", children: [e.subtitle, e.traveler, e.timestamp ?? e.startedAt].filter(Boolean).join(" · ") })
+        ] })
+      ] })
+    }
+  );
+}
+function b({ title: e = "Activity", actions: r = [], className: a = "" }) {
+  return r.length === 0 ? null : /* @__PURE__ */ i("div", { className: a, children: [
+    e && /* @__PURE__ */ t(x, { as: "div", size: "xs", weight: "semibold", muted: !0, className: "mb-2 uppercase tracking-wider", children: e }),
+    /* @__PURE__ */ t("div", { className: "space-y-2", children: /* @__PURE__ */ t(n, { children: r.map((s) => /* @__PURE__ */ t(u, { action: s }, s.id)) }) })
+  ] });
+}
+export {
+  b as default
+};
+//# sourceMappingURL=ActivityCard.js.map

package/dist/components/library/cards/ActivityCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActivityCard.js","sources":["../../../../src/components/library/cards/ActivityCard.jsx"],"sourcesContent":["import React from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport { ArrowPathIcon, CheckCircleIcon, ExclamationCircleIcon, ClockIcon } from \"@heroicons/react/24/outline\";\nimport UIText from \"../ui/Text\";\n\nconst STATUS_ICON = {\n  working:  { Icon: ArrowPathIcon,        color: \"text-indigo-500\",  spin: true },\n  pending:  { Icon: ClockIcon,            color: \"text-slate-400\",   spin: false },\n  complete: { Icon: CheckCircleIcon,      color: \"text-emerald-500\", spin: false },\n  error:    { Icon: ExclamationCircleIcon, color: \"text-red-500\",     spin: false },\n};\n\nfunction ActionItem({ action }) {\n  const s = STATUS_ICON[action.status] ?? STATUS_ICON.pending;\n  return (\n    <motion.div\n      initial={{ y: 12, opacity: 0 }}\n      animate={{ y: 0, opacity: 1 }}\n      exit={{ y: -12, opacity: 0 }}\n      className=\"rounded-lg border border-slate-100 bg-slate-50 p-3 dark:border-slate-800 dark:bg-slate-950/40\"\n    >\n      <div className=\"flex items-start gap-2\">\n        <s.Icon className={`mt-0.5 h-4 w-4 shrink-0 ${s.color} ${s.spin ? \"animate-spin\" : \"\"}`} />\n        <div className=\"min-w-0\">\n          <div className=\"text-xs font-medium text-slate-700 dark:text-slate-200\">{action.title ?? action.action}</div>\n          {(action.subtitle ?? action.traveler ?? action.timestamp ?? action.startedAt) && (\n            <div className=\"mt-0.5 text-[10px] text-slate-400\">\n              {[action.subtitle, action.traveler, action.timestamp ?? action.startedAt].filter(Boolean).join(\" · \")}\n            </div>\n          )}\n        </div>\n      </div>\n    </motion.div>\n  );\n}\n\nexport default function ActivityCard({ title = \"Activity\", actions = [], className = \"\" }) {\n  if (actions.length === 0) return null;\n\n  return (\n    <div className={className}>\n      {title && (\n        <UIText as=\"div\" size=\"xs\" weight=\"semibold\" muted className=\"mb-2 uppercase tracking-wider\">\n          {title}\n        </UIText>\n      )}\n      <div className=\"space-y-2\">\n        <AnimatePresence>\n          {actions.map(a => (\n            <ActionItem key={a.id} action={a} />\n          ))}\n        </AnimatePresence>\n      </div>\n    </div>\n  );\n}\n"],"names":["STATUS_ICON","ArrowPathIcon","ClockIcon","CheckCircleIcon","ExclamationCircleIcon","ActionItem","action","s","jsx","motion","jsxs","ActivityCard","title","actions","className","UIText","AnimatePresence","a"],"mappings":";;;;;AAKA,MAAMA,IAAc;AAAA,EAClB,SAAU,EAAE,MAAMC,GAAsB,OAAO,mBAAoB,MAAM,GAAA;AAAA,EACzE,SAAU,EAAE,MAAMC,GAAsB,OAAO,kBAAoB,MAAM,GAAA;AAAA,EACzE,UAAU,EAAE,MAAMC,GAAsB,OAAO,oBAAoB,MAAM,GAAA;AAAA,EACzE,OAAU,EAAE,MAAMC,GAAuB,OAAO,gBAAoB,MAAM,GAAA;AAC5E;AAEA,SAASC,EAAW,EAAE,QAAAC,KAAU;AAC9B,QAAMC,IAAIP,EAAYM,EAAO,MAAM,KAAKN,EAAY;AACpD,SACE,gBAAAQ;AAAA,IAACC,EAAO;AAAA,IAAP;AAAA,MACC,SAAS,EAAE,GAAG,IAAI,SAAS,EAAA;AAAA,MAC3B,SAAS,EAAE,GAAG,GAAG,SAAS,EAAA;AAAA,MAC1B,MAAM,EAAE,GAAG,KAAK,SAAS,EAAA;AAAA,MACzB,WAAU;AAAA,MAEV,UAAA,gBAAAC,EAAC,OAAA,EAAI,WAAU,0BACb,UAAA;AAAA,QAAA,gBAAAF,EAACD,EAAE,MAAF,EAAO,WAAW,2BAA2BA,EAAE,KAAK,IAAIA,EAAE,OAAO,iBAAiB,EAAE,GAAA,CAAI;AAAA,QACzF,gBAAAG,EAAC,OAAA,EAAI,WAAU,WACb,UAAA;AAAA,UAAA,gBAAAF,EAAC,SAAI,WAAU,0DAA0D,UAAAF,EAAO,SAASA,EAAO,QAAO;AAAA,WACrGA,EAAO,YAAYA,EAAO,YAAYA,EAAO,aAAaA,EAAO,cACjE,gBAAAE,EAAC,OAAA,EAAI,WAAU,qCACZ,UAAA,CAACF,EAAO,UAAUA,EAAO,UAAUA,EAAO,aAAaA,EAAO,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,KAAK,EAAA,CACtG;AAAA,QAAA,EAAA,CAEJ;AAAA,MAAA,EAAA,CACF;AAAA,IAAA;AAAA,EAAA;AAGN;AAEA,SAAwBK,EAAa,EAAE,OAAAC,IAAQ,YAAY,SAAAC,IAAU,IAAI,WAAAC,IAAY,MAAM;AACzF,SAAID,EAAQ,WAAW,IAAU,OAG/B,gBAAAH,EAAC,SAAI,WAAAI,GACF,UAAA;AAAA,IAAAF,KACC,gBAAAJ,EAACO,GAAA,EAAO,IAAG,OAAM,MAAK,MAAK,QAAO,YAAW,OAAK,IAAC,WAAU,iCAC1D,UAAAH,GACH;AAAA,sBAED,OAAA,EAAI,WAAU,aACb,UAAA,gBAAAJ,EAACQ,KACE,UAAAH,EAAQ,IAAI,CAAAI,MACX,gBAAAT,EAACH,KAAsB,QAAQY,EAAA,GAAdA,EAAE,EAAe,CACnC,GACH,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;"}

package/dist/components/library/cards/BaseCard.js

@@ -0,0 +1,89 @@
+import { jsx as a, jsxs as e, Fragment as z } from "react/jsx-runtime";
+import "react";
+const c = {
+  default: "",
+  metric: "",
+  chart: "",
+  table: "",
+  widget: "",
+  status: ""
+}, u = {
+  xs: "",
+  sm: "min-h-[80px]",
+  md: "min-h-[120px]",
+  lg: "min-h-[160px]",
+  xl: "min-h-[220px]",
+  full: ""
+}, m = {
+  none: "p-0",
+  xs: "p-2",
+  sm: "p-3",
+  default: "p-4",
+  lg: "p-6",
+  xl: "p-8"
+};
+function M({
+  header: t,
+  body: n,
+  footer: d,
+  children: p,
+  variant: h = "default",
+  size: f = "md",
+  padding: v = "default",
+  shadow: g = !0,
+  radius: s = "2xl",
+  border: x = !0,
+  isHoverable: b = !1,
+  isPressable: l = !1,
+  isLoading: N = !1,
+  isDisabled: S = !1,
+  isSelected: C = !1,
+  className: w = "",
+  headerClassName: k = "",
+  bodyClassName: r = "",
+  footerClassName: A = "",
+  onPress: i,
+  onHover: E,
+  ...j
+}) {
+  const B = l ? "button" : "div", I = s ? `rounded-${s}` : "rounded-2xl", L = m[v] ?? m.default, _ = u[f] ?? u.md, y = c[h] ?? c.default, D = b || l, o = S || l && !i;
+  return /* @__PURE__ */ a(
+    B,
+    {
+      type: l ? "button" : void 0,
+      onClick: l ? i : void 0,
+      onMouseEnter: E,
+      disabled: l ? o : void 0,
+      className: [
+        "w-full text-left",
+        I,
+        x ? "border border-slate-200 dark:border-slate-800" : "border border-transparent",
+        "bg-white dark:bg-slate-900",
+        g ? "shadow-sm" : "",
+        _,
+        y,
+        D ? "transition hover:-translate-y-[1px] hover:shadow-md" : "",
+        C ? "ring-2 ring-brand-500" : "",
+        o ? "opacity-60" : "",
+        w
+      ].filter(Boolean).join(" "),
+      ...j,
+      children: /* @__PURE__ */ e("div", { className: L, children: [
+        t != null ? /* @__PURE__ */ a("div", { className: k, children: t }) : null,
+        N ? /* @__PURE__ */ e("div", { className: ["mt-3 space-y-3", r].filter(Boolean).join(" "), children: [
+          /* @__PURE__ */ a("div", { className: "h-4 w-1/3 animate-pulse rounded bg-slate-200 dark:bg-slate-800" }),
+          /* @__PURE__ */ a("div", { className: "h-4 w-2/3 animate-pulse rounded bg-slate-200 dark:bg-slate-800" }),
+          /* @__PURE__ */ a("div", { className: "h-4 w-1/2 animate-pulse rounded bg-slate-200 dark:bg-slate-800" })
+        ] }) : /* @__PURE__ */ e(z, { children: [
+          n != null ? /* @__PURE__ */ a("div", { className: r, children: n }) : null,
+          p
+        ] }),
+        d != null ? /* @__PURE__ */ a("div", { className: A, children: d }) : null
+      ] })
+    }
+  );
+}
+export {
+  M as default
+};
+//# sourceMappingURL=BaseCard.js.map

package/dist/components/library/cards/BaseCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseCard.js","sources":["../../../../src/components/library/cards/BaseCard.jsx"],"sourcesContent":["import React from \"react\";\n\nconst VARIANT_CLASSES = {\n  default: \"\",\n  metric: \"\",\n  chart: \"\",\n  table: \"\",\n  widget: \"\",\n  status: \"\"\n};\n\nconst SIZE_CLASSES = {\n  xs: \"\",\n  sm: \"min-h-[80px]\",\n  md: \"min-h-[120px]\",\n  lg: \"min-h-[160px]\",\n  xl: \"min-h-[220px]\",\n  full: \"\"\n};\n\nconst PADDING_CLASSES = {\n  none: \"p-0\",\n  xs: \"p-2\",\n  sm: \"p-3\",\n  default: \"p-4\",\n  lg: \"p-6\",\n  xl: \"p-8\"\n};\n\nexport default function BaseCard({\n  header,\n  body,\n  footer,\n  children,\n  variant = \"default\",\n  size = \"md\",\n  padding = \"default\",\n  shadow = true,\n  radius = \"2xl\",\n  border = true,\n  isHoverable = false,\n  isPressable = false,\n  isLoading = false,\n  isDisabled = false,\n  isSelected = false,\n  className = \"\",\n  headerClassName = \"\",\n  bodyClassName = \"\",\n  footerClassName = \"\",\n  onPress,\n  onHover,\n  ...rest\n}) {\n  const Comp = isPressable ? \"button\" : \"div\";\n\n  const radiusClass = radius ? `rounded-${radius}` : \"rounded-2xl\";\n  const paddingClass = PADDING_CLASSES[padding] ?? PADDING_CLASSES.default;\n  const sizeClass = SIZE_CLASSES[size] ?? SIZE_CLASSES.md;\n  const variantClass = VARIANT_CLASSES[variant] ?? VARIANT_CLASSES.default;\n\n  const interactive = isHoverable || isPressable;\n  const disabled = isDisabled || (isPressable && !onPress);\n\n  return (\n    <Comp\n      type={isPressable ? \"button\" : undefined}\n      onClick={isPressable ? onPress : undefined}\n      onMouseEnter={onHover}\n      disabled={isPressable ? disabled : undefined}\n      className={[\n        \"w-full text-left\",\n        radiusClass,\n        border ? \"border border-slate-200 dark:border-slate-800\" : \"border border-transparent\",\n        \"bg-white dark:bg-slate-900\",\n        shadow ? \"shadow-sm\" : \"\",\n        sizeClass,\n        variantClass,\n        interactive ? \"transition hover:-translate-y-[1px] hover:shadow-md\" : \"\",\n        isSelected ? \"ring-2 ring-brand-500\" : \"\",\n        disabled ? \"opacity-60\" : \"\",\n        className\n      ]\n        .filter(Boolean)\n        .join(\" \")}\n      {...rest}\n    >\n      <div className={paddingClass}>\n        {header != null ? <div className={headerClassName}>{header}</div> : null}\n\n        {isLoading ? (\n          <div className={[\"mt-3 space-y-3\", bodyClassName].filter(Boolean).join(\" \")}>\n            <div className=\"h-4 w-1/3 animate-pulse rounded bg-slate-200 dark:bg-slate-800\" />\n            <div className=\"h-4 w-2/3 animate-pulse rounded bg-slate-200 dark:bg-slate-800\" />\n            <div className=\"h-4 w-1/2 animate-pulse rounded bg-slate-200 dark:bg-slate-800\" />\n          </div>\n        ) : (\n          <>\n            {body != null ? <div className={bodyClassName}>{body}</div> : null}\n            {children}\n          </>\n        )}\n\n        {footer != null ? <div className={footerClassName}>{footer}</div> : null}\n      </div>\n    </Comp>\n  );\n}\n\n\n"],"names":["VARIANT_CLASSES","SIZE_CLASSES","PADDING_CLASSES","BaseCard","header","body","footer","children","variant","size","padding","shadow","radius","border","isHoverable","isPressable","isLoading","isDisabled","isSelected","className","headerClassName","bodyClassName","footerClassName","onPress","onHover","rest","Comp","radiusClass","paddingClass","sizeClass","variantClass","interactive","disabled","jsx","jsxs","Fragment"],"mappings":"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"}