@tonycodes-ui/mortar 0.0.0-stage → 0.12.0

package/src/index.ts

@@ -0,0 +1,233 @@
+export { ThemeProvider, AppearanceControl } from "./foundation.js";
+export type { BrandDefinition, BrandAppearanceTokens } from "./brand.js";
+export type {
+  ThemeProviderProps,
+  Appearance,
+  Brand,
+  Density,
+} from "./foundation.js";
+export {
+  Button,
+  ButtonGroup,
+  ActionLink,
+  Input,
+  Select,
+  TextArea,
+  Checkbox,
+  Fieldset,
+  RadioGroup,
+  Switch,
+  Badge,
+  Tabs,
+  Modal,
+  Dropdown,
+  Notice,
+  EmptyState,
+  ErrorSummary,
+} from "./primitives.js";
+export type {
+  ButtonProps,
+  ButtonGroupItem,
+  DropdownItem,
+  ErrorSummaryItem,
+  InputProps,
+  LinkAction,
+  Tone,
+} from "./primitives.js";
+export {
+  AppShell,
+  PageHeading,
+  MetricGroup,
+  DataTable,
+  Table,
+  Pagination,
+  SettingsSection,
+  ActivityFeed,
+  SignInPanel,
+  Sidebar,
+  Navbar,
+  StackedShell,
+  Breadcrumbs,
+  ProgressSteps,
+  TabNav,
+  ActionPanel,
+} from "./application.js";
+export type {
+  AppShellProps,
+  NavigationItem,
+  DataTableProps,
+  DataTableColumn,
+  TableSort,
+  SortDirection,
+  SignInProvider,
+  SidebarProps,
+  BreadcrumbItem,
+  ProgressStep,
+  TabNavItem,
+  StackedShellProps,
+  NavbarProps,
+  BreadcrumbsProps,
+  TabNavProps,
+  ProgressStepsProps,
+  ActionPanelProps,
+  PageHeadingProps,
+  MetricGroupProps,
+  TableProps,
+  PaginationProps,
+  SettingsSectionProps,
+  ActivityFeedProps,
+  SignInPanelProps,
+} from "./application.js";
+export {
+  AuthLayout,
+  ProviderButtons,
+  PasswordInput,
+  CodeInput,
+} from "./auth.js";
+export type {
+  AuthLayoutProps,
+  ProviderButtonsProps,
+  PasswordInputProps,
+  PasswordRequirement,
+  PasswordStrength,
+  CodeInputProps,
+} from "./auth.js";
+export {
+  MarketingHeader,
+  MarketingPage,
+  Hero,
+  FeatureGrid,
+  FeatureSection,
+  ProcessSteps,
+  Testimonial,
+  LogoCloud,
+  Pricing,
+  FAQ,
+  CallToAction,
+  Footer,
+  HeaderSection,
+  ContentSection,
+} from "./marketing.js";
+export type {
+  PricingPlan,
+  PricingExtra,
+  HeaderLink,
+  FlyoutItem,
+} from "./marketing.js";
+export { SegmentedControl, CodeBlock, PreviewFrame } from "./inspection.js";
+export {
+  Avatar,
+  AvatarGroup,
+  Kbd,
+  ProgressBar,
+  FilterChip,
+  CheckList,
+  DescriptionList,
+  GridList,
+  AttachmentList,
+} from "./display.js";
+export type {
+  GridListItem,
+  Attachment,
+  AvatarProps,
+  AvatarGroupProps,
+  KbdProps,
+  ProgressBarProps,
+  FilterChipProps,
+  CheckListProps,
+  DescriptionListProps,
+  GridListProps,
+  AttachmentListProps,
+} from "./display.js";
+export {
+  Stack,
+  Container,
+  Text,
+  Section,
+  Divider,
+  Card,
+  MediaObject,
+  SectionHeading,
+  Prose,
+} from "./layout.js";
+export type {
+  SectionTone,
+  StackProps,
+  ContainerProps,
+  TextProps,
+  SectionProps,
+  DividerProps,
+  CardProps,
+  MediaObjectProps,
+  SectionHeadingProps,
+  ProseProps,
+} from "./layout.js";
+export { MockWindow, ChatPreview } from "./showcase.js";
+export type { ChatMessage } from "./showcase.js";
+export { Toast, Toaster, ConfirmDialog, SaveBar, Banner } from "./feedback.js";
+export type { ToastItem, ToastAction } from "./feedback.js";
+export { SlideOver, CommandPalette, StackedList } from "./workspace.js";
+export type {
+  CommandItem,
+  StackedListItem,
+  SlideOverProps,
+  CommandPaletteProps,
+  StackedListProps,
+} from "./workspace.js";
+export {
+  BentoGrid,
+  StatGroup,
+  TestimonialGrid,
+  PlanComparison,
+  PostList,
+  TeamGrid,
+  ContactSection,
+  Newsletter,
+  NotFound,
+} from "./marketing-sections.js";
+export {
+  DocsShell,
+  SearchTrigger,
+  SearchDialog,
+  Steps,
+  Callout,
+  FileTree,
+  CodeTabs,
+  Release,
+  ApiEndpoint,
+  PageFeedback,
+  PagerLinks,
+  LinkCards,
+} from "./docs.js";
+export type { DocsShellProps, FileNode } from "./docs.js";
+export { Listbox, Combobox } from "./choice.js";
+export type { ChoiceOption } from "./choice.js";
+export { Calendar } from "./calendar.js";
+export type { CalendarEvent, CalendarView, CalendarProps } from "./calendar.js";
+export {
+  ProductList,
+  ProductOverview,
+  ShoppingCart,
+  OrderSummary,
+  ProductQuickView,
+  ProductFilters,
+  ProductReviews,
+  OrderHistory,
+} from "./ecommerce.js";
+export type {
+  ProductImage,
+  ProductCard,
+  ProductOption,
+  CartItem,
+  FilterFacet,
+  Review,
+  Order,
+  ProductListProps,
+  ProductOverviewProps,
+  ShoppingCartProps,
+} from "./ecommerce.js";
+export { CommentComposer } from "./composer.js";
+export type { LinkItem, ItemGroup } from "./navigation.js";
+export type { HeadingLevel } from "./heading.js";
+export { NetworkIllustration } from "./illustration.js";
+export type { NetworkNode, NetworkConnection } from "./illustration.js";

package/src/inspection.tsx

@@ -0,0 +1,91 @@
+import { KitLink } from "./navigation.js";
+import { componentRoot, cx, useComponentName } from "./internal.js";
+export function SegmentedControl({
+  label,
+  value,
+  options,
+  onChange,
+  className,
+}: {
+  label: string;
+  value: string;
+  options: { value: string; label: string }[];
+  onChange: (value: string) => void;
+  className?: string;
+}) {
+  const name = useComponentName("SegmentedControl");
+  return (
+    <div
+      {...componentRoot(name)}
+      className={cx("m-segmented", className)}
+      role="group"
+      aria-label={label}
+    >
+      {options.map((option) => (
+        <button
+          key={option.value}
+          type="button"
+          aria-pressed={value === option.value}
+          onClick={() => onChange(option.value)}
+        >
+          {option.label}
+        </button>
+      ))}
+    </div>
+  );
+}
+/** A scrollable code sample in a figure; the caption names the figure. */
+export function CodeBlock({
+  code,
+  label = "Code",
+  className,
+}: {
+  code: string;
+  /** Visible caption, and the figure's accessible name. */
+  label?: string;
+  className?: string;
+}) {
+  return (
+    <figure
+      {...componentRoot("CodeBlock")}
+      className={cx("m-code-block", className)}
+    >
+      <figcaption>{label}</figcaption>
+      {/* Focusable so keyboard users can scroll long samples. */}
+      <pre tabIndex={0}>
+        <code>{code}</code>
+      </pre>
+    </figure>
+  );
+}
+export function PreviewFrame({
+  label,
+  src,
+  id,
+  className,
+}: {
+  /** Accessible name of the section and the frame. */
+  label: string;
+  src: string;
+  id?: string;
+  className?: string;
+}) {
+  return (
+    <section
+      id={id}
+      {...componentRoot("PreviewFrame")}
+      className={cx("m-preview-frame", className)}
+      aria-label={label}
+    >
+      <KitLink href={src} target="_blank" rel="noopener noreferrer">
+        Open full preview
+      </KitLink>
+      <iframe
+        title={label}
+        src={src}
+        sandbox="allow-scripts"
+        referrerPolicy="no-referrer"
+      />
+    </section>
+  );
+}