@tonyarbor/components 0.2.1 → 0.6.0

package/dist/chunk-YJ36ZZJQ.mjs

@@ -0,0 +1,36 @@
+// src/Section/Section.tsx
+import * as React from "react";
+import { clsx } from "clsx";
+import { jsx } from "react/jsx-runtime";
+var sectionStyles = {
+  container: {
+    display: "flex",
+    flexDirection: "column",
+    width: "100%",
+    padding: "8px",
+    borderRadius: "8px",
+    backgroundColor: "#ffffff",
+    boxSizing: "border-box",
+    fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
+  }
+};
+var Section = React.forwardRef(
+  ({ children, className, style, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: clsx("arbor-section", className),
+        style: { ...sectionStyles.container, ...style },
+        ...props,
+        children
+      }
+    );
+  }
+);
+Section.displayName = "Section";
+
+export {
+  Section
+};
+//# sourceMappingURL=chunk-YJ36ZZJQ.mjs.map

package/dist/chunk-YJ36ZZJQ.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Section/Section.tsx"],"sourcesContent":["import * as React from 'react';\nimport { clsx } from 'clsx';\n\nexport interface SectionProps {\n  /**\n   * Content to display inside the section\n   */\n  children?: React.ReactNode;\n  /**\n   * Additional CSS class name\n   */\n  className?: string;\n  /**\n   * Additional inline styles\n   */\n  style?: React.CSSProperties;\n}\n\n// Arbor Design System section container styles\nconst sectionStyles = {\n  container: {\n    display: 'flex',\n    flexDirection: 'column' as const,\n    width: '100%',\n    padding: '8px',\n    borderRadius: '8px',\n    backgroundColor: '#ffffff',\n    boxSizing: 'border-box' as const,\n    fontFamily: \"'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif\",\n  },\n};\n\n/**\n * Section component - Arbor Design System\n *\n * A container component that provides consistent styling for content sections.\n * Has 8px padding, 8px border radius, and white background.\n * Used to wrap SectionHeadings, SubSectionHeadings, ListRows, and other content.\n *\n * @example\n * ```tsx\n * // Basic section with heading and list rows\n * <Section>\n *   <SectionHeading title=\"Contact Information\" />\n *   <ListRow label=\"Email\" value=\"john@example.com\" />\n *   <ListRow label=\"Phone\" value=\"+44 123 456 7890\" />\n * </Section>\n *\n * // Section with interactive heading\n * <Section>\n *   <SectionHeadingInteractive title=\"Personal Details\">\n *     <SubSectionInteractive title=\"Profile\">\n *       <ListRow label=\"Name\" value=\"John Smith\" />\n *     </SubSectionInteractive>\n *   </SectionHeadingInteractive>\n * </Section>\n *\n * // Multiple sections on a page\n * <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>\n *   <Section>\n *     <SectionHeading title=\"Section 1\" />\n *     <ListRow label=\"Field\" value=\"Value\" />\n *   </Section>\n *   <Section>\n *     <SectionHeading title=\"Section 2\" />\n *     <ListRow label=\"Field\" value=\"Value\" />\n *   </Section>\n * </div>\n * ```\n */\nexport const Section = React.forwardRef<HTMLDivElement, SectionProps>(\n  ({ children, className, style, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={clsx('arbor-section', className)}\n        style={{ ...sectionStyles.container, ...style }}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n\nSection.displayName = 'Section';\n"],"mappings":";AAAA,YAAY,WAAW;AACvB,SAAS,YAAY;AAwEf;AAtDN,IAAM,gBAAgB;AAAA,EACpB,WAAW;AAAA,IACT,SAAS;AAAA,IACT,eAAe;AAAA,IACf,OAAO;AAAA,IACP,SAAS;AAAA,IACT,cAAc;AAAA,IACd,iBAAiB;AAAA,IACjB,WAAW;AAAA,IACX,YAAY;AAAA,EACd;AACF;AAwCO,IAAM,UAAgB;AAAA,EAC3B,CAAC,EAAE,UAAU,WAAW,OAAO,GAAG,MAAM,GAAG,QAAQ;AACjD,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,KAAK,iBAAiB,SAAS;AAAA,QAC1C,OAAO,EAAE,GAAG,cAAc,WAAW,GAAG,MAAM;AAAA,QAC7C,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,QAAQ,cAAc;","names":[]}

package/dist/index.d.mts

@@ -17,6 +17,20 @@ export { Pagination, PaginationProps } from './Pagination.mjs';
 export { TableFooterPagination, TableFooterPaginationProps } from './TableFooterPagination.mjs';
 export { TableControls, TableControlsProps } from './TableControls.mjs';
 export { Table, TableColumn, TableProps, TableRow } from './Table.mjs';
+export { Avatar, AvatarProps, AvatarSize } from './Avatar.mjs';
+export { SearchGlobal, SearchGlobalProps } from './SearchGlobal.mjs';
+export { SearchOnPage, SearchOnPageProps } from './SearchOnPage.mjs';
+export { BreadcrumbItem, Breadcrumbs, BreadcrumbsProps } from './Breadcrumbs.mjs';
+export { Logo, LogoProps } from './Logo.mjs';
+export { ButtonSegmented, ButtonSegmentedItem, ButtonSegmentedProps } from './ButtonSegmented.mjs';
+export { SectionHeading, SectionHeadingButton, SectionHeadingButtonGroupItem, SectionHeadingProps } from './SectionHeading.mjs';
+export { SectionIcon, SectionIconProps, SectionIconVariant } from './SectionIcon.mjs';
+export { ListRow, ListRowProps } from './ListRow.mjs';
+export { ListRowMultiLine, ListRowMultiLineProps } from './ListRowMultiLine.mjs';
+export { SubSectionHeading, SubSectionHeadingProps } from './SubSectionHeading.mjs';
+export { SubSectionInteractive, SubSectionInteractiveProps } from './SubSectionInteractive.mjs';
+export { SectionHeadingInteractive, SectionHeadingInteractiveProps } from './SectionHeadingInteractive.mjs';
+export { Section, SectionProps } from './Section.mjs';
 import 'react';
 
 /**

package/dist/index.d.ts

@@ -17,6 +17,20 @@ export { Pagination, PaginationProps } from './Pagination.js';
 export { TableFooterPagination, TableFooterPaginationProps } from './TableFooterPagination.js';
 export { TableControls, TableControlsProps } from './TableControls.js';
 export { Table, TableColumn, TableProps, TableRow } from './Table.js';
+export { Avatar, AvatarProps, AvatarSize } from './Avatar.js';
+export { SearchGlobal, SearchGlobalProps } from './SearchGlobal.js';
+export { SearchOnPage, SearchOnPageProps } from './SearchOnPage.js';
+export { BreadcrumbItem, Breadcrumbs, BreadcrumbsProps } from './Breadcrumbs.js';
+export { Logo, LogoProps } from './Logo.js';
+export { ButtonSegmented, ButtonSegmentedItem, ButtonSegmentedProps } from './ButtonSegmented.js';
+export { SectionHeading, SectionHeadingButton, SectionHeadingButtonGroupItem, SectionHeadingProps } from './SectionHeading.js';
+export { SectionIcon, SectionIconProps, SectionIconVariant } from './SectionIcon.js';
+export { ListRow, ListRowProps } from './ListRow.js';
+export { ListRowMultiLine, ListRowMultiLineProps } from './ListRowMultiLine.js';
+export { SubSectionHeading, SubSectionHeadingProps } from './SubSectionHeading.js';
+export { SubSectionInteractive, SubSectionInteractiveProps } from './SubSectionInteractive.js';
+export { SectionHeadingInteractive, SectionHeadingInteractiveProps } from './SectionHeadingInteractive.js';
+export { Section, SectionProps } from './Section.js';
 import 'react';
 
 /**