@highpixel-co/palda-design-system 0.4.1

package/dist/chunk-Q4UXASZH.js

@@ -0,0 +1,170 @@
+import {
+  Button
+} from "./chunk-GPCPGABI.js";
+import {
+  ChevronRightIcon
+} from "./chunk-TWYJ2UTC.js";
+
+// ../../patterns/src/AppShell/AppShell.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function AppShell({
+  children,
+  footer,
+  sidebar,
+  sidebarFooter,
+  statusBar,
+  topRow
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "palda-app-shell", children: [
+    sidebar || sidebarFooter ? /* @__PURE__ */ jsxs("aside", { className: "palda-app-shell__sidebar", children: [
+      sidebar ? /* @__PURE__ */ jsx("div", { className: "palda-app-shell__sidebar-main", children: sidebar }) : null,
+      sidebarFooter ? /* @__PURE__ */ jsx("div", { className: "palda-app-shell__sidebar-footer", children: sidebarFooter }) : null
+    ] }) : null,
+    /* @__PURE__ */ jsxs("div", { className: "palda-app-shell__content", children: [
+      topRow ? /* @__PURE__ */ jsx("header", { className: "palda-app-shell__top-row", children: /* @__PURE__ */ jsx("div", { className: "palda-app-shell__band palda-app-shell__band--inset", children: topRow }) }) : null,
+      statusBar ? /* @__PURE__ */ jsx("div", { className: "palda-app-shell__status-bar", children: /* @__PURE__ */ jsx("div", { className: "palda-app-shell__band palda-app-shell__band--inset", children: statusBar }) }) : null,
+      /* @__PURE__ */ jsx("main", { className: "palda-app-shell__body", children: /* @__PURE__ */ jsx("div", { className: "palda-app-shell__band palda-app-shell__band--body", children }) }),
+      footer ? /* @__PURE__ */ jsx("div", { className: "palda-app-shell__footer", children: footer }) : null
+    ] })
+  ] });
+}
+
+// ../../patterns/src/BottomBar/BottomBar.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var STATUS_TYPOGRAPHY_CLASS = "palda-text-body2-regular-medium";
+function BottomBar({ children, status }) {
+  return /* @__PURE__ */ jsx2("div", { className: "palda-bottom-bar", children: /* @__PURE__ */ jsxs2("div", { className: "palda-bottom-bar__band", children: [
+    status ? /* @__PURE__ */ jsx2("span", { className: `palda-bottom-bar__status ${STATUS_TYPOGRAPHY_CLASS}`, children: status }) : null,
+    /* @__PURE__ */ jsx2("div", { className: "palda-bottom-bar__actions", children })
+  ] }) });
+}
+
+// ../../patterns/src/Card/Card.tsx
+import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var TITLE_TYPOGRAPHY_CLASS = "palda-text-body1-regular-semibold";
+var DESCRIPTION_TYPOGRAPHY_CLASS = "palda-text-body2-reading-medium";
+function Card({
+  action,
+  children,
+  description,
+  footer,
+  onClick,
+  selected = false,
+  title,
+  tone = "plain"
+}) {
+  const classes = ["palda-card", `palda-card--${tone}`, selected ? "palda-card--selected" : ""].filter(Boolean).join(" ");
+  const content = /* @__PURE__ */ jsxs3(Fragment, { children: [
+    title || action ? /* @__PURE__ */ jsxs3("header", { className: "palda-card__header", children: [
+      /* @__PURE__ */ jsxs3("div", { className: "palda-card__heading", children: [
+        title ? /* @__PURE__ */ jsx3("h2", { className: TITLE_TYPOGRAPHY_CLASS, children: title }) : null,
+        description ? /* @__PURE__ */ jsx3("p", { className: DESCRIPTION_TYPOGRAPHY_CLASS, children: description }) : null
+      ] }),
+      action ? /* @__PURE__ */ jsx3("div", { className: "palda-card__action", children: action }) : null
+    ] }) : null,
+    /* @__PURE__ */ jsx3("div", { className: "palda-card__body", children }),
+    footer ? /* @__PURE__ */ jsx3("footer", { className: "palda-card__footer", children: footer }) : null
+  ] });
+  if (!onClick) {
+    return /* @__PURE__ */ jsx3("section", { className: classes, children: content });
+  }
+  return /* @__PURE__ */ jsx3("button", { "aria-pressed": selected, className: classes, onClick, type: "button", children: content });
+}
+
+// ../../patterns/src/EmptyState/EmptyState.tsx
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var TITLE_TYPOGRAPHY_CLASS2 = "palda-text-title";
+var DESCRIPTION_TYPOGRAPHY_CLASS2 = "palda-text-body2-reading-medium";
+function EmptyState({ actionLabel, description, icon, onAction, title }) {
+  return /* @__PURE__ */ jsxs4("section", { className: "palda-empty-state", children: [
+    icon ? /* @__PURE__ */ jsx4("div", { className: "palda-empty-state__icon", children: icon }) : null,
+    /* @__PURE__ */ jsxs4("div", { className: "palda-empty-state__copy", children: [
+      /* @__PURE__ */ jsx4("h2", { className: TITLE_TYPOGRAPHY_CLASS2, children: title }),
+      /* @__PURE__ */ jsx4("p", { className: DESCRIPTION_TYPOGRAPHY_CLASS2, children: description })
+    ] }),
+    actionLabel ? /* @__PURE__ */ jsx4(Button, { onClick: onAction, children: actionLabel }) : null
+  ] });
+}
+
+// ../../patterns/src/FormSection/FormSection.tsx
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var TITLE_TYPOGRAPHY_CLASS3 = "palda-text-body1-regular-semibold";
+var DESCRIPTION_TYPOGRAPHY_CLASS3 = "palda-text-body2-reading-medium";
+var ERROR_TYPOGRAPHY_CLASS = "palda-text-label-reading-medium";
+function FormSection({ children, description, error, footer, title }) {
+  return /* @__PURE__ */ jsxs5("section", { className: "palda-form-section", children: [
+    /* @__PURE__ */ jsxs5("header", { className: "palda-form-section__header", children: [
+      /* @__PURE__ */ jsx5("h2", { className: TITLE_TYPOGRAPHY_CLASS3, children: title }),
+      description ? /* @__PURE__ */ jsx5("p", { className: DESCRIPTION_TYPOGRAPHY_CLASS3, children: description }) : null
+    ] }),
+    error ? /* @__PURE__ */ jsx5("p", { className: `palda-form-section__error ${ERROR_TYPOGRAPHY_CLASS}`, role: "alert", children: error }) : null,
+    /* @__PURE__ */ jsx5("div", { className: "palda-form-section__fields", children }),
+    footer ? /* @__PURE__ */ jsx5("footer", { className: "palda-form-section__footer", children: footer }) : null
+  ] });
+}
+
+// ../../patterns/src/ListRow/ListRow.tsx
+import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+var TITLE_TYPOGRAPHY_CLASS4 = "palda-text-body2-regular-semibold";
+var DESCRIPTION_TYPOGRAPHY_CLASS4 = "palda-text-label-reading-medium";
+function ListRow({
+  chevron,
+  children,
+  description,
+  leading,
+  loading = false,
+  onClick,
+  selected = false,
+  title,
+  tone = "plain",
+  trailing
+}) {
+  const classes = [
+    "palda-list-row",
+    `palda-list-row--${tone}`,
+    selected ? "palda-list-row--selected" : "",
+    loading ? "palda-list-row--loading" : ""
+  ].filter(Boolean).join(" ");
+  if (loading) {
+    return /* @__PURE__ */ jsxs6("div", { "aria-hidden": "true", className: classes, children: [
+      /* @__PURE__ */ jsx6("span", { className: "palda-list-row__skeleton palda-list-row__skeleton--title" }),
+      /* @__PURE__ */ jsx6("span", { className: "palda-list-row__skeleton palda-list-row__skeleton--description" })
+    ] });
+  }
+  const showChevron = chevron ?? Boolean(onClick);
+  const content = /* @__PURE__ */ jsxs6(Fragment2, { children: [
+    leading ? /* @__PURE__ */ jsx6("span", { "aria-hidden": "true", className: "palda-list-row__leading", children: leading }) : null,
+    /* @__PURE__ */ jsxs6("span", { className: "palda-list-row__copy", children: [
+      /* @__PURE__ */ jsx6("span", { className: TITLE_TYPOGRAPHY_CLASS4, children: title }),
+      description ? /* @__PURE__ */ jsx6("span", { className: `palda-list-row__description ${DESCRIPTION_TYPOGRAPHY_CLASS4}`, children: description }) : null,
+      children
+    ] }),
+    trailing ? /* @__PURE__ */ jsx6("span", { className: "palda-list-row__trailing", children: trailing }) : null,
+    showChevron ? /* @__PURE__ */ jsx6("span", { "aria-hidden": "true", className: "palda-list-row__chevron", children: /* @__PURE__ */ jsx6(ChevronRightIcon, {}) }) : null
+  ] });
+  if (!onClick) {
+    return /* @__PURE__ */ jsx6("div", { className: classes, children: content });
+  }
+  return /* @__PURE__ */ jsx6("button", { "aria-pressed": selected, className: classes, onClick, type: "button", children: content });
+}
+
+// ../../patterns/src/LivePreview/LivePreview.tsx
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+var TITLE_TYPOGRAPHY_CLASS5 = "palda-text-body2-regular-semibold";
+var MESSAGE_TYPOGRAPHY_CLASS = "palda-text-body2-reading-medium";
+function LivePreview({ children, message, status = "ready", title }) {
+  return /* @__PURE__ */ jsxs7("section", { className: `palda-live-preview palda-live-preview--${status}`, children: [
+    /* @__PURE__ */ jsx7("header", { className: "palda-live-preview__header", children: /* @__PURE__ */ jsx7("h2", { className: TITLE_TYPOGRAPHY_CLASS5, children: title }) }),
+    /* @__PURE__ */ jsx7("div", { "aria-live": "polite", className: "palda-live-preview__body", children: status === "ready" ? children : status === "loading" ? /* @__PURE__ */ jsx7("span", { className: "palda-live-preview__skeleton" }) : /* @__PURE__ */ jsx7("p", { className: `palda-live-preview__message ${MESSAGE_TYPOGRAPHY_CLASS}`, children: message }) })
+  ] });
+}
+
+export {
+  AppShell,
+  BottomBar,
+  Card,
+  EmptyState,
+  FormSection,
+  ListRow,
+  LivePreview
+};