@multiplatform.one/components 6.1.0 → 6.4.0

package/README.md

@@ -0,0 +1,70 @@
+# @multiplatform.one/components
+
+Cross-platform catalog UI for multiplatform.one — surfaces, feedback, navigation,
+media, and layout components built on [Tamagui](https://tamagui.dev), themed
+through the knobs system.
+
+## Install
+
+```bash
+pnpm add @multiplatform.one/components
+```
+
+Requires `react` (and `react-native` / `react-dom` for the target platform) as peers.
+
+## What it owns
+
+- **Surfaces** — `Card`, `CardHeader`, `CardFooter`, `Panel`, `DialogContent`,
+  `PopoverContent`, `SheetFrame` (knob-aware, shadowing the raw Tamagui primitives)
+- **Feedback** — `Alert`, `Toast` / `useToast`, `Skeleton`, `ProgressSteps`, `DotIndicator`
+- **Navigation & disclosure** — `Tabs`, `Accordion`, `DropdownMenu`, `Pagination`, `SkipLink`
+- **Display** — `Avatar`, `Badge`, `Chip`, `Quote`, `Tooltip`, `Carousel`, `Video`,
+  `Image`, code blocks, icons, layouts, `ErrorBoundary`
+- **Charts** — `BarChart`, `LineChart`, `AreaChart`, `PieChart`, `Sparkline`:
+  one universal codebase (headless d3 math + SVG) on web, iOS, and Android;
+  series colors come from the canonical `useChartPalette()` in
+  `@multiplatform.one/theme`, explicit data colors pass through untouched.
+  `react-native-svg` is an optional peer, needed only on native
+- A full re-export of `tamagui` (`YStack`, `XStack`, `Text`, …), so this package is
+  the **only** UI import apps and features need
+
+## What it must not do
+
+- No Frappe or API assumptions — data-aware wrappers live in
+  `@multiplatform.one/frappe-ui`
+- No form fields — fields, `Form`, and input parts live in `@multiplatform.one/forms`
+- No data tables — `DataTable` lives in `@multiplatform.one/table`
+
+Per house rules, apps and features import this package instead of raw `tamagui`.
+
+## Usage
+
+```tsx
+import { Avatar, Card, CardHeader, Chip, Text, YStack } from "@multiplatform.one/components";
+
+export function UserCard() {
+  return (
+    <Card>
+      <CardHeader>
+        <Avatar name="Ada Lovelace" src="https://example.com/ada.png" />
+      </CardHeader>
+      <YStack>
+        <Text>Ada Lovelace</Text>
+        <Chip>Admin</Chip>
+      </YStack>
+    </Card>
+  );
+}
+```
+
+## Styling
+
+Components resolve structural styling (radius, spacing, elevation, typography)
+through the **knobs system** in `@multiplatform.one/theme` — wrap screens in a
+`<Preset>` and flip knobs instead of hardcoding style props. See
+`agent-os/standards/frontend/knobs-system.md` in the
+[multiplatform.one repo](https://gitlab.com/bitspur/frappe/multiplatform.one).
+
+## License
+
+Apache-2.0

package/dist/cjs/Accordion/index.cjs

@@ -0,0 +1,332 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var Accordion_exports = {};
+__export(Accordion_exports, {
+  Accordion: () => Accordion2
+});
+module.exports = __toCommonJS(Accordion_exports);
+var import_react = require("@phosphor-icons/react");
+var import_platform = require("@multiplatform.one/platform");
+var import_theme = require("@multiplatform.one/theme");
+var import_react2 = require("react");
+var import_tamagui = require("tamagui");
+var import_react3 = require("react");
+var import_componentColors = require("../componentColors.cjs");
+var import_themed = require("../icons/themed.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+const AccordionCtx = (0, import_react2.createContext)({
+  variant: "plain",
+  openValues: []
+});
+const AccordionItemCtx = (0, import_react2.createContext)({
+  open: false,
+  triggerId: "",
+  contentId: ""
+});
+const cardElevationShadow = {
+  $1: {
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 0,
+      height: 1
+    },
+    shadowOpacity: 0.12,
+    // house light angle: blur = 2 x y-offset on every tier (Axiom 14)
+    shadowRadius: 2,
+    elevation: 2
+  },
+  $2: {
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 0,
+      height: 3
+    },
+    shadowOpacity: 0.15,
+    shadowRadius: 6,
+    elevation: 4
+  },
+  $4: {
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 0,
+      height: 10
+    },
+    shadowOpacity: 0.15,
+    shadowRadius: 20,
+    elevation: 8
+  }
+};
+const elevationKeyAlias = {
+  "20": "$1",
+  "28": "$2",
+  "44": "$4"
+};
+function getCardElevationProps(token) {
+  if (token == null) return {};
+  const key = elevationKeyAlias[String(token)] ?? String(token);
+  const shadow = cardElevationShadow[key] ?? cardElevationShadow.$2;
+  if (import_platform.isWeb) {
+    const {
+      elevation: _elevation,
+      ...webShadow
+    } = shadow;
+    return webShadow;
+  }
+  return shadow;
+}
+const ThemedCaretDown = (0, import_themed.themed)(import_react.CaretDownIcon);
+function Chevron({
+  open
+}) {
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+    alignItems: "center",
+    justifyContent: "center",
+    rotate: open ? "180deg" : "0deg",
+    ...(knobProps.transition ? {
+      transition: knobProps.transition
+    } : {}),
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(ThemedCaretDown, {
+      color: import_componentColors.componentColors.text.secondary,
+      size: 16
+    })
+  });
+}
+const AccordionRoot = (0, import_react3.forwardRef)(function Accordion(props, ref) {
+  const {
+    type = "single",
+    value: valueProp,
+    defaultValue,
+    onValueChange,
+    variant = "plain",
+    disabled,
+    children,
+    ...stackProps
+  } = props;
+  const collapsible = type === "single" ? props.collapsible ?? true : true;
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  const isControlled = valueProp !== void 0;
+  const [internalValue, setInternalValue] = (0, import_react2.useState)(defaultValue ?? (type === "multiple" ? [] : ""));
+  const current = isControlled ? valueProp : internalValue;
+  const handleValueChange = (0, import_react2.useCallback)(next => {
+    if (!isControlled) setInternalValue(next);
+    onValueChange?.(next);
+  }, [isControlled, onValueChange]);
+  const openValues = (0, import_react2.useMemo)(() => Array.isArray(current) ? current : current ? [current] : [], [current]);
+  const ctx = (0, import_react2.useMemo)(() => ({
+    variant,
+    openValues,
+    disabled
+  }), [variant, openValues, disabled]);
+  const cardProps = variant === "card" ? {
+    gap: knobProps.gap.gap
+  } : {};
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(AccordionCtx.Provider, {
+    value: ctx,
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Accordion, {
+      ref,
+      ...{
+        type,
+        value: current,
+        onValueChange: handleValueChange,
+        ...(type === "single" ? {
+          collapsible
+        } : {})
+      },
+      disabled,
+      width: "100%",
+      ...cardProps,
+      ...stackProps,
+      children
+    })
+  });
+});
+const AccordionItem = (0, import_react3.forwardRef)(function AccordionItem2({
+  value,
+  disabled: disabledProp,
+  children,
+  ...props
+}, ref) {
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  const {
+    variant,
+    openValues,
+    disabled: rootDisabled
+  } = (0, import_react2.useContext)(AccordionCtx);
+  const open = openValues.includes(value);
+  const disabled = rootDisabled || disabledProp;
+  const uid = (0, import_react2.useId)();
+  const itemCtx = (0, import_react2.useMemo)(() => ({
+    open,
+    disabled,
+    triggerId: `mp1-accordion-trigger-${uid}`,
+    contentId: `mp1-accordion-content-${uid}`
+  }), [open, disabled, uid]);
+  const {
+    elevation: elevationToken,
+    ...elevatedSurfaceRest
+  } = knobProps.elevatedSurface;
+  const variantProps = variant === "card" ? {
+    // card surface honoring radius/elevation/border knobs
+    ...elevatedSurfaceRest,
+    ...getCardElevationProps(elevationToken)
+  } : {
+    // plain: edge-to-edge divider rows (SP-EDGE)
+    borderBottomWidth: 1,
+    borderColor: import_componentColors.componentColors.surface.border
+  };
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(AccordionItemCtx.Provider, {
+    value: itemCtx,
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Accordion.Item, {
+      ref,
+      value,
+      disabled,
+      ...variantProps,
+      ...props,
+      children
+    })
+  });
+});
+const AccordionTrigger = (0, import_react3.forwardRef)(function AccordionTrigger2({
+  children,
+  description,
+  icon,
+  ...props
+}, ref) {
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  const {
+    variant
+  } = (0, import_react2.useContext)(AccordionCtx);
+  const item = (0, import_react2.useContext)(AccordionItemCtx);
+  const paddingToken = knobProps.panelPadding.padding;
+  return (
+    // Heading wrapper for the ARIA accordion pattern. NOT tamagui's
+    // Accordion.Header — that renders a styled H1 whose 64px font/line
+    // height cascades into the row texts (and an h1 per section is wrong
+    // outline semantics anyway). View ignores `tag`, so use explicit
+    // role="heading" + aria-level for AT parity with an h3.
+    /* @__PURE__ */
+    (0, import_jsx_runtime.jsx)(import_tamagui.View, {
+      role: "heading",
+      "aria-level": 3,
+      margin: 0,
+      width: "100%",
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Accordion.Trigger, {
+        ref,
+        unstyled: true,
+        id: item.triggerId,
+        "aria-controls": item.contentId,
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "space-between",
+        width: "100%",
+        gap: "$3",
+        minHeight: 44,
+        paddingHorizontal: paddingToken,
+        paddingVertical: "$3",
+        backgroundColor: "transparent",
+        borderWidth: 0,
+        cursor: item.disabled ? "auto" : "pointer",
+        opacity: item.disabled ? 0.5 : 1,
+        outlineStyle: "none",
+        borderRadius: knobProps.borderRadius.borderRadius,
+        ...(!item.disabled && {
+          hoverStyle: {
+            backgroundColor: import_componentColors.componentColors.interactive.background
+          },
+          pressStyle: {
+            backgroundColor: import_componentColors.componentColors.interactive.hover
+          }
+        }),
+        focusVisibleStyle: {
+          outlineColor: "$outlineColor",
+          outlineWidth: 2,
+          outlineStyle: "solid",
+          outlineOffset: -2
+        },
+        ...(knobProps.transition ? {
+          transition: knobProps.transition
+        } : {}),
+        ...props,
+        children: [icon ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+          alignItems: "center",
+          justifyContent: "center",
+          children: icon
+        }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+          flex: 1,
+          gap: "$1",
+          children: [typeof children === "string" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+            ...knobProps.body,
+            fontWeight: "600",
+            fontSize: knobProps.sizeToken,
+            lineHeight: knobProps.sizeToken,
+            color: import_componentColors.componentColors.text.primary,
+            children
+          }) : children, description != null && (typeof description === "string" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+            ...knobProps.body,
+            fontSize: "$2",
+            lineHeight: "$2",
+            color: import_componentColors.componentColors.text.secondary,
+            children: description
+          }) : description)]
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(Chevron, {
+          open: item.open
+        })]
+      })
+    })
+  );
+});
+const AccordionContent = (0, import_react3.forwardRef)(function AccordionContent2({
+  children,
+  ...props
+}, ref) {
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  const item = (0, import_react2.useContext)(AccordionItemCtx);
+  const paddingToken = knobProps.panelPadding.padding;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Accordion.Content, {
+    ref,
+    unstyled: true,
+    id: item.contentId,
+    "aria-labelledby": item.triggerId,
+    paddingHorizontal: paddingToken,
+    paddingBottom: paddingToken,
+    paddingTop: "$1",
+    ...props,
+    children
+  });
+});
+const Accordion2 = (0, import_tamagui.withStaticProperties)(AccordionRoot, {
+  Item: AccordionItem,
+  Trigger: AccordionTrigger,
+  Content: AccordionContent
+});