@base-framework/ui 1.0.1727 → 1.0.2001

package/copilot.md

@@ -0,0 +1,80 @@
+# Copilot instructions for this repo
+
+This repo is a UI component library for the Base Framework, organized with Atomic Design (atoms → molecules → organisms → pages/templates) and styled with Tailwind CSS v4. It builds to multiple entry points via Vite.
+
+## How things fit together
+- Runtime primitives come from external packages:
+  - `@base-framework/base` supplies Component, Atom, Data, Jot, Events, router, NavLink, etc.
+  - `@base-framework/atoms` supplies DOM tag helpers (Div, Button, Input, Ul, Li, etc.) and reactive helpers (On, OnState, UseParent, OnStateOpen).
+- Local exports aggregate in `src/ui.js` and sub-entries in `vite.config.js`:
+  - `@base-framework/ui` (index) exports everything from `components/*` and `utils/*`.
+  - Subpath imports are enabled: `@base-framework/ui/atoms`, `.../icons`, `.../molecules`, `.../organisms`, `.../pages`, `.../templates`, `.../utils`.
+- Styling is Tailwind 4 with custom CSS vars (see `tailwind.config.js`). Use existing design tokens like `text-muted-foreground`, `bg-muted/10`, `border`, `ring`.
+
+## Build and dev workflow
+- Install: npm i
+- Dev: npm run dev → Vite dev server with Tailwind plugin (@tailwindcss/vite)
+- Build: npm run build → Vite library build (ES modules only) + `tsc` to emit `.d.ts` from JS via JSDoc
+- Preview: npm run preview
+- Outputs land in `dist/*.es.js` and `dist/types/**`. Rollup marks `@base-framework/*` externals, so do not import those files directly.
+
+## Authoring components (project conventions)
+- Prefer functional atoms via `Atom((props, children) => ...)` for small UI pieces. Example: `AlertIcon`, `AlertTitle`, etc.
+- Use `Component` subclasses for stateful or composed widgets. Provide `declareProps()` to document/public props for tooling and `render()` to return markup.
+- Event handlers and props:
+  - Standard props merge pattern: `{ ...defaultProps, ...props, class: "base classes ${props.class || ''}" }`.
+  - For icon buttons: pass `icon` and optionally `position: 'right'`.
+  - Use `click` props for click handlers; follow patterns like back navigation in `buttons.js`.
+- Reactive/data patterns (from Base):
+  - `Data` for mutable view-models inside Components (e.g., `DataTable`, `Calendar`).
+  - `Jot(...)` HOC to create jot components (e.g., `SearchDropdown`, `Toggle`).
+  - Bindings: use `bind: 'path'` or arrays like `bind: [state, 'key']` on atom props to two-way bind values.
+  - Lists: map/repeat with `for: ['collectionKey', (item, i) => ...]` or `map: [array, fn]`.
+  - Subscriptions: `On('key', callback)` or `OnState/Open` utilities to react to state.
+  - Parent context: `UseParent(({ state, ... }) => ...)` to access parent component refs.
+
+## File layout to know
+- `src/components/atoms/**`: Base-level atoms and atom variants (e.g., buttons, icons, badges, tooltips, skeleton, veil).
+- `src/components/molecules/**`: Composition of atoms with light state (alerts, dropdowns, date/time pickers, theme toggle, counters, uploaders, etc.).
+- `src/components/organisms/**`: Heavier components with internal `Component` state (tables, navigation, overlays, signature, tabs, calendar, lists).
+- `src/components/pages/**`: Page/layout primitives (`Page`, `BasicPage`, `MainSection`, full-page layouts, sidebar layouts, templates).
+- `src/utils/**`: Utilities (formatting, image-scaler with pointer/zoom/drag helpers).
+- `src/ui.js`: Re-exports public surface used by `vite` lib entries.
+
+## Tailwind and theming
+- Tailwind scans `./src/ui.js` and `./src/**/*.{js,ts,jsx,tsx}`. If you add files, keep them under `src` and referenced by exports for purge to include classes.
+- Use semantic tokens configured in `tailwind.config.js`: `primary`, `secondary`, `destructive`, `warning`, `muted`, `accent`, `popover`, `card`, `border`, `foreground`, with `DEFAULT` and `foreground` pairs.
+- Dark mode is `media`. Prefer classes already used (`data-[state=active]:...`, rounded tokens via `--radius`).
+
+## Patterns by example
+- Functional Atom example (from `molecules/alert.js`):
+  - Compose small atoms: `Div` containers + `I` for icons + `H5/P` for text
+  - Type variants use lookup table → apply Tailwind classes from map
+- Variant pattern (from `atoms/buttons/buttons.js`):
+  - Define variant factories, then export a single `Button` Atom that dispatches by `props.variant`
+  - Icon handling via a shared `IconButton` Atom; support `position: 'right'`
+- Data-driven lists (from `molecules/dropdowns/dropdown.js`):
+  - `for: ['groups', (group) => ...]` to render nested collections
+- Stateful Component (from `organisms/panel.js`):
+  - `class Panel extends Component { declareProps() { this.class = '' } render() { return Div({ class: this.class }, this.children) } }`
+
+## Coding rules (do/don’t)
+- Do: import primitives from `@base-framework/atoms` and state tools from `@base-framework/base`; keep them as externals.
+- Do: export new public pieces from the appropriate barrel files (`components/*/atoms.js`, `.../molecules.js`, `.../organisms.js`, `pages.js`, `templates.js`, `utils.js`) so they are part of the library entry.
+- Do: keep Tailwind classes consistent with existing tokens; avoid raw hex colors.
+- Don’t: introduce React/Vue/JSX; this project uses Base’s declarative atoms/components.
+- Don’t: mutate DOM directly; use Atom/Component APIs and Data bindings.
+
+## Adding a new component (checklist)
+1) Decide Atom vs Component (stateless vs stateful/interactive)
+2) Place file under the correct layer folder and export it from that layer’s barrel (and from `src/ui.js` if needed via existing barrels)
+3) Use Tailwind utility classes aligned with theme tokens
+4) If it needs data/state, use `Data`/`Jot`, `On`, `bind`, `for` as seen in existing components
+5) Run dev server and verify render; run build to ensure types emit
+
+## Commands reference
+- Dev: `npm run dev`
+- Build: `npm run build`
+- Preview: `npm run preview`
+
+If anything seems unclear (e.g., preferred binding patterns or where to export), ask for confirmation before large changes.

package/dist/aside-template-sUm-F2f0.js

@@ -0,0 +1,44 @@
+import { Atom as t } from "@base-framework/base";
+import { Header as c, H1 as o } from "@base-framework/atoms";
+const x = t((l, e) => ({
+  tag: "section",
+  ...l,
+  children: e
+})), u = t((l, e) => x({
+  class: "body full-container flex flex-auto flex-col " + l.class,
+  ...l
+}, e)), n = t((l, e) => {
+  const a = l.flex ? l.flex : "flex flex-auto flex-col lg:flex-row";
+  return l.class = "row " + a + " " + (l.class || ""), {
+    ...l,
+    children: e
+  };
+}), m = t((l, e) => c([
+  o({ watch: l.watch }, l.text)
+], e)), f = t((l, e) => {
+  const a = l.flex ? "flex flex-none" : "flex flex-auto flex-col";
+  return l.class = "col " + a + " " + (l.class || ""), {
+    ...l,
+    children: e
+  };
+}), i = t((l, e) => x({ class: "body aside-container flex flex-auto flex-col max-w-[100vw] h-full" }, [
+  n([
+    f({
+      class: "drawer control w-full md:max-w-[320px]",
+      flex: "flex flex-none md:flex-auto flex-col"
+    }, [
+      l.left
+    ]),
+    f([
+      l.right
+    ])
+  ])
+]));
+export {
+  i as A,
+  u as F,
+  f as M,
+  n as R,
+  m as T,
+  x as a
+};

package/dist/atoms.es.js

@@ -1,37 +1,38 @@
-import { B as e, C as t, a as n, F as o, L as p, P as r, R as u, S as I, b as i, T as l } from "./tooltip-CESEqMCU.js";
-import { B as m, I as T, L as c } from "./buttons-Cm9etaEG.js";
-import { C as B, d as C, D as S, c as g, E as b, F as f, H as h, I as F, M as L, N as P, P as R, R as k, S as D, T as V, a as E, b as H, U as M, W as N } from "./inputs-Dmu4Z-7-.js";
-import { V as W, a as w } from "./veil-D4dRxILB.js";
+import { B as e, C as t, F as o, L as r, P as n, R as p, S as u, a as I, T as i } from "./tooltip-PupzYM1r.js";
+import { B as d, I as m, L as x } from "./buttons-CHEs54Wl.js";
+import { C as T, F as B } from "./form-group-CJzpq9Us.js";
+import { C as c, d as f, D as g, c as L, E as P, F as R, H as S, I as b, M as h, N as k, P as D, R as V, T as E, a as G, b as H, U as M, W as N } from "./inputs-9udyzkHR.js";
+import { V as W, a as w } from "./veil-CqnAmj-D.js";
 export {
   e as Badge,
-  m as Button,
-  t as Card,
-  B as Checkbox,
-  n as CircleGraph,
-  C as ColorInput,
-  S as DateInput,
-  g as DateTimeInput,
-  b as EmailInput,
+  d as Button,
+  T as Card,
+  c as Checkbox,
+  t as CircleGraph,
+  f as ColorInput,
+  g as DateInput,
+  L as DateTimeInput,
+  P as EmailInput,
   o as Fieldset,
-  f as FileInput,
-  h as HiddenInput,
-  T as Icon,
-  F as Input,
-  p as Legend,
-  c as LoadingButton,
-  L as MonthInput,
-  P as NumberInput,
-  R as PasswordInput,
-  r as ProgressBar,
-  k as Radio,
-  u as RangeSlider,
-  D as SearchInput,
-  I as Select,
-  i as Skeleton,
-  V as TelInput,
-  E as Textarea,
+  R as FileInput,
+  B as FormGroup,
+  S as HiddenInput,
+  m as Icon,
+  b as Input,
+  r as Legend,
+  x as LoadingButton,
+  h as MonthInput,
+  k as NumberInput,
+  D as PasswordInput,
+  n as ProgressBar,
+  V as Radio,
+  p as RangeSlider,
+  u as Select,
+  I as Skeleton,
+  E as TelInput,
+  G as Textarea,
   H as TimeInput,
-  l as Tooltip,
+  i as Tooltip,
   M as UrlInput,
   W as Veil,
   w as VeilJot,

package/dist/{bside-template-Du2m3rsE.js → bside-template-do_hXebn.js}

@@ -1,5 +1,5 @@
 import { Atom as t } from "@base-framework/base";
-import { a, R as l, M as o } from "./aside-template-McEj_Gxc.js";
+import { a, R as l, M as o } from "./aside-template-sUm-F2f0.js";
 const s = t((e, r) => a({ class: "body bside-container flex flex-auto flex-col" }, [
   l([
     o([

package/dist/{buttons-Cm9etaEG.js → buttons-CHEs54Wl.js}

@@ -1,7 +1,7 @@
-import { I as m, Button as r } from "@base-framework/atoms";
-import { Atom as s } from "@base-framework/base";
-import { Icons as u } from "./icons.es.js";
-const w = {
+import { I as u, Button as e } from "@base-framework/atoms";
+import { Atom as c } from "@base-framework/base";
+import { Icons as r } from "./icons.es.js";
+const m = {
   xs: "w-4 h-4",
   sm: "w-6 h-6",
   md: "w-8 h-8",
@@ -9,28 +9,27 @@ const w = {
   xl: "w-12 h-12",
   "2xl": "w-14 h-14",
   "3xl": "w-16 h-16"
-}, l = s((n, t) => {
-  var c;
-  const a = w[n.size || "sm"];
-  return m({
+}, s = c((n, t) => {
+  const a = m[n.size || "sm"];
+  return u({
     ...n,
     class: `stroke-current icon-size ${a} ${n.class || ""}`,
-    html: (c = t[0]) == null ? void 0 : c.textContent
+    html: t[0]?.textContent
   });
-}), i = (n) => s((t, a) => r({
+}), i = (n) => c((t, a) => e({
   ...n,
   ...t,
   class: `bttn ${n.class} ${t.class || ""}`
-}, a)), h = s(
-  (n, t) => r({
+}, a)), h = c(
+  (n, t) => e({
     ...n,
     class: n.class
   }, [
-    n.icon && n.position !== "right" ? l({ size: "sm", class: n.animation ?? null }, n.icon) : null,
+    n.icon && n.position !== "right" ? s({ size: "sm", class: n.animation ?? null }, n.icon) : null,
     ...t || [],
-    n.icon && n.position === "right" ? l({ size: "sm", class: n.animation ?? null }, n.icon) : null
+    n.icon && n.position === "right" ? s({ size: "sm", class: n.animation ?? null }, n.icon) : null
   ])
-), o = (n) => s((t, a) => h({
+), l = (n) => c((t, a) => h({
   ...n,
   ...t,
   class: `bttn ${n.class} ${t.class || ""}`
@@ -40,10 +39,10 @@ const w = {
     return;
   }
   n.backUrl && app.navigate(n.backUrl);
-}, k = (n) => s((t, a) => (t.icon = t.icon || u.arrows.left, t.click = t.click || g(t), h({
+}, w = (n) => c((t, a) => (t.icon = t.icon || r.chevron.single.left, t.click = t.click || g(t), h({
   ...n,
   ...t
-}, a))), e = {
+}, a))), o = {
   primary: i({ class: "primary" }),
   secondary: i({ class: "secondary" }),
   destructive: i({ class: "destructive" }),
@@ -51,12 +50,12 @@ const w = {
   outline: i({ class: "outline" }),
   ghost: i({ class: "ghost" }),
   link: i({ class: "link" }),
-  icon: o({ class: "icon" }),
-  withIcon: o({ class: "with-icon" }),
-  back: k({ class: "with-icon back-button" })
-}, b = s((n, t) => (e[n.variant] || e.primary)(n, t)), $ = s((n, t) => b({ ...n, variant: "withIcon", icon: u.loading, animation: "animate-spin" }, t));
+  icon: l({ class: "icon" }),
+  withIcon: l({ class: "with-icon" }),
+  back: w({ class: "with-icon back-button" })
+}, k = c((n, t) => (o[n.variant] || o.primary)(n, t)), y = c((n, t) => k({ ...n, variant: "withIcon", icon: r.loading, animation: "animate-spin" }, t));
 export {
-  b as B,
-  l as I,
-  $ as L
+  k as B,
+  s as I,
+  y as L
 };