@ship-it-ui/shipit 0.0.2 → 0.0.3

package/dist/index.d.cts

@@ -1,7 +1,7 @@
-import { BadgeProps } from '@ship-it-ui/ui';
+import { BadgeProps, DataTableProps, DataTableColumn } from '@ship-it-ui/ui';
 export { cn } from '@ship-it-ui/ui';
 import * as react from 'react';
-import { HTMLAttributes, ReactNode, ButtonHTMLAttributes, MouseEventHandler, SVGAttributes } from 'react';
+import { HTMLAttributes, ReactNode, ButtonHTMLAttributes, MouseEventHandler, SVGAttributes, Ref } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 /**
@@ -456,14 +456,22 @@ declare const Hero: react.ForwardRefExoticComponent<HeroProps & react.RefAttribu
  * PricingCard — single tier in a pricing table. Shows tier name, price,
  * description, list of features (with ✓ markers), and an action button slot.
  *
+ * The card establishes a CSS container, so the price scales with the card's
+ * own inline-size rather than the viewport — when three cards crowd into a
+ * narrow column the price doesn't blow out the layout.
+ *
  * Pass `featured` to highlight the card with an accent border + tinted
- * background for the "recommended" tier.
+ * background for the "recommended" tier. Use `priceUnit` for per-period
+ * suffixes (e.g. `/ user / mo`) so the unit lays out next to the price
+ * baseline-aligned and wraps cleanly when there isn't room.
  */
 interface PricingCardProps extends HTMLAttributes<HTMLDivElement> {
     /** Tier name — e.g., `Pro`, `Team`. */
     tier: ReactNode;
-    /** Price. Pass JSX (`<span>$29</span><span> / mo</span>`) for layout. */
+    /** Headline price, e.g. `$29` or `Talk to us`. */
     price: ReactNode;
+    /** Optional small unit rendered next to the price, e.g. `/ user / mo`. */
+    priceUnit?: ReactNode;
     /** Short description below the tier name. */
     description?: ReactNode;
     /** Feature bullet list. */
@@ -491,4 +499,37 @@ interface TestimonialProps extends Omit<HTMLAttributes<HTMLElement>, 'cite' | 'r
 }
 declare const Testimonial: react.ForwardRefExoticComponent<TestimonialProps & react.RefAttributes<HTMLElement>>;
 
-export { AskBar, type AskBarProps, CTAStrip, type CTAStripProps, Citation, type CitationProps, ConfidenceIndicator, type ConfidenceIndicatorProps, type ConfidenceTier, CopilotMessage, type CopilotMessageProps, type CopilotRole, ENTITY_GLYPH, ENTITY_LABEL, ENTITY_TONE_BG, ENTITY_TONE_CLASS, EntityBadge, type EntityBadgeProps, EntityCard, type EntityCardProps, EntityListRow, EntityListRowButton, type EntityListRowButtonProps, EntityListRowDiv, type EntityListRowDivProps, type EntityListRowProps, type EntityStat, type EntityType, type Feature, FeatureGrid, type FeatureGridProps, Footer, type FooterColumn, type FooterLink, type FooterProps, GraphEdge, type GraphEdgeProps, type GraphEdgeStyle, GraphInspector, type GraphInspectorProps, GraphLegend, type GraphLegendEntry, type GraphLegendProps, GraphMinimap, type GraphMinimapProps, GraphNode, type GraphNodeProps, type GraphNodeState, Hero, type HeroProps, type InspectorProperty, type InspectorRelation, type MinimapPoint, type MinimapViewport, PathOverlay, type PathOverlayProps, type PathPoint, PricingCard, type PricingCardProps, ReasoningBlock, type ReasoningBlockProps, ReasoningStep, type ReasoningStepProps, SuggestionChip, type SuggestionChipProps, Testimonial, type TestimonialProps, ToolCallCard, type ToolCallCardProps };
+/**
+ * EntityTable — DataTable preset with two ShipIt-aware column helpers:
+ * `entityColumn(...)` for the typed name cell and `entityTypeColumn()` for a
+ * standalone type column. Everything else (sort, selection, sticky header)
+ * comes from `@ship-it-ui/ui` DataTable as-is.
+ */
+interface MinimalEntity {
+    id: string;
+    type: EntityType;
+    name: string;
+}
+type EntityTableProps<T extends MinimalEntity> = Omit<DataTableProps<T>, 'rowKey'> & {
+    rowKey?: (row: T) => string;
+};
+declare function EntityTable<T extends MinimalEntity>(props: EntityTableProps<T> & {
+    ref?: Ref<HTMLTableElement>;
+}): react_jsx_runtime.JSX.Element;
+/**
+ * Pre-built column for the entity name. Renders the type glyph (in the type's
+ * tone) followed by the name in mono. Sorts on `name`.
+ */
+declare function entityColumn<T extends MinimalEntity>(options?: {
+    key?: string;
+    header?: string;
+}): DataTableColumn<T>;
+/**
+ * Pre-built column rendering the canonical EntityBadge.
+ */
+declare function entityTypeColumn<T extends MinimalEntity>(options?: {
+    key?: string;
+    header?: string;
+}): DataTableColumn<T>;
+
+export { AskBar, type AskBarProps, CTAStrip, type CTAStripProps, Citation, type CitationProps, ConfidenceIndicator, type ConfidenceIndicatorProps, type ConfidenceTier, CopilotMessage, type CopilotMessageProps, type CopilotRole, ENTITY_GLYPH, ENTITY_LABEL, ENTITY_TONE_BG, ENTITY_TONE_CLASS, EntityBadge, type EntityBadgeProps, EntityCard, type EntityCardProps, EntityListRow, EntityListRowButton, type EntityListRowButtonProps, EntityListRowDiv, type EntityListRowDivProps, type EntityListRowProps, type EntityStat, EntityTable, type EntityTableProps, type EntityType, type Feature, FeatureGrid, type FeatureGridProps, Footer, type FooterColumn, type FooterLink, type FooterProps, GraphEdge, type GraphEdgeProps, type GraphEdgeStyle, GraphInspector, type GraphInspectorProps, GraphLegend, type GraphLegendEntry, type GraphLegendProps, GraphMinimap, type GraphMinimapProps, GraphNode, type GraphNodeProps, type GraphNodeState, Hero, type HeroProps, type InspectorProperty, type InspectorRelation, type MinimapPoint, type MinimapViewport, PathOverlay, type PathOverlayProps, type PathPoint, PricingCard, type PricingCardProps, ReasoningBlock, type ReasoningBlockProps, ReasoningStep, type ReasoningStepProps, SuggestionChip, type SuggestionChipProps, Testimonial, type TestimonialProps, ToolCallCard, type ToolCallCardProps, entityColumn, entityTypeColumn };

package/dist/index.d.ts

@@ -1,7 +1,7 @@
-import { BadgeProps } from '@ship-it-ui/ui';
+import { BadgeProps, DataTableProps, DataTableColumn } from '@ship-it-ui/ui';
 export { cn } from '@ship-it-ui/ui';
 import * as react from 'react';
-import { HTMLAttributes, ReactNode, ButtonHTMLAttributes, MouseEventHandler, SVGAttributes } from 'react';
+import { HTMLAttributes, ReactNode, ButtonHTMLAttributes, MouseEventHandler, SVGAttributes, Ref } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 /**
@@ -456,14 +456,22 @@ declare const Hero: react.ForwardRefExoticComponent<HeroProps & react.RefAttribu
  * PricingCard — single tier in a pricing table. Shows tier name, price,
  * description, list of features (with ✓ markers), and an action button slot.
  *
+ * The card establishes a CSS container, so the price scales with the card's
+ * own inline-size rather than the viewport — when three cards crowd into a
+ * narrow column the price doesn't blow out the layout.
+ *
  * Pass `featured` to highlight the card with an accent border + tinted
- * background for the "recommended" tier.
+ * background for the "recommended" tier. Use `priceUnit` for per-period
+ * suffixes (e.g. `/ user / mo`) so the unit lays out next to the price
+ * baseline-aligned and wraps cleanly when there isn't room.
  */
 interface PricingCardProps extends HTMLAttributes<HTMLDivElement> {
     /** Tier name — e.g., `Pro`, `Team`. */
     tier: ReactNode;
-    /** Price. Pass JSX (`<span>$29</span><span> / mo</span>`) for layout. */
+    /** Headline price, e.g. `$29` or `Talk to us`. */
     price: ReactNode;
+    /** Optional small unit rendered next to the price, e.g. `/ user / mo`. */
+    priceUnit?: ReactNode;
     /** Short description below the tier name. */
     description?: ReactNode;
     /** Feature bullet list. */
@@ -491,4 +499,37 @@ interface TestimonialProps extends Omit<HTMLAttributes<HTMLElement>, 'cite' | 'r
 }
 declare const Testimonial: react.ForwardRefExoticComponent<TestimonialProps & react.RefAttributes<HTMLElement>>;
 
-export { AskBar, type AskBarProps, CTAStrip, type CTAStripProps, Citation, type CitationProps, ConfidenceIndicator, type ConfidenceIndicatorProps, type ConfidenceTier, CopilotMessage, type CopilotMessageProps, type CopilotRole, ENTITY_GLYPH, ENTITY_LABEL, ENTITY_TONE_BG, ENTITY_TONE_CLASS, EntityBadge, type EntityBadgeProps, EntityCard, type EntityCardProps, EntityListRow, EntityListRowButton, type EntityListRowButtonProps, EntityListRowDiv, type EntityListRowDivProps, type EntityListRowProps, type EntityStat, type EntityType, type Feature, FeatureGrid, type FeatureGridProps, Footer, type FooterColumn, type FooterLink, type FooterProps, GraphEdge, type GraphEdgeProps, type GraphEdgeStyle, GraphInspector, type GraphInspectorProps, GraphLegend, type GraphLegendEntry, type GraphLegendProps, GraphMinimap, type GraphMinimapProps, GraphNode, type GraphNodeProps, type GraphNodeState, Hero, type HeroProps, type InspectorProperty, type InspectorRelation, type MinimapPoint, type MinimapViewport, PathOverlay, type PathOverlayProps, type PathPoint, PricingCard, type PricingCardProps, ReasoningBlock, type ReasoningBlockProps, ReasoningStep, type ReasoningStepProps, SuggestionChip, type SuggestionChipProps, Testimonial, type TestimonialProps, ToolCallCard, type ToolCallCardProps };
+/**
+ * EntityTable — DataTable preset with two ShipIt-aware column helpers:
+ * `entityColumn(...)` for the typed name cell and `entityTypeColumn()` for a
+ * standalone type column. Everything else (sort, selection, sticky header)
+ * comes from `@ship-it-ui/ui` DataTable as-is.
+ */
+interface MinimalEntity {
+    id: string;
+    type: EntityType;
+    name: string;
+}
+type EntityTableProps<T extends MinimalEntity> = Omit<DataTableProps<T>, 'rowKey'> & {
+    rowKey?: (row: T) => string;
+};
+declare function EntityTable<T extends MinimalEntity>(props: EntityTableProps<T> & {
+    ref?: Ref<HTMLTableElement>;
+}): react_jsx_runtime.JSX.Element;
+/**
+ * Pre-built column for the entity name. Renders the type glyph (in the type's
+ * tone) followed by the name in mono. Sorts on `name`.
+ */
+declare function entityColumn<T extends MinimalEntity>(options?: {
+    key?: string;
+    header?: string;
+}): DataTableColumn<T>;
+/**
+ * Pre-built column rendering the canonical EntityBadge.
+ */
+declare function entityTypeColumn<T extends MinimalEntity>(options?: {
+    key?: string;
+    header?: string;
+}): DataTableColumn<T>;
+
+export { AskBar, type AskBarProps, CTAStrip, type CTAStripProps, Citation, type CitationProps, ConfidenceIndicator, type ConfidenceIndicatorProps, type ConfidenceTier, CopilotMessage, type CopilotMessageProps, type CopilotRole, ENTITY_GLYPH, ENTITY_LABEL, ENTITY_TONE_BG, ENTITY_TONE_CLASS, EntityBadge, type EntityBadgeProps, EntityCard, type EntityCardProps, EntityListRow, EntityListRowButton, type EntityListRowButtonProps, EntityListRowDiv, type EntityListRowDivProps, type EntityListRowProps, type EntityStat, EntityTable, type EntityTableProps, type EntityType, type Feature, FeatureGrid, type FeatureGridProps, Footer, type FooterColumn, type FooterLink, type FooterProps, GraphEdge, type GraphEdgeProps, type GraphEdgeStyle, GraphInspector, type GraphInspectorProps, GraphLegend, type GraphLegendEntry, type GraphLegendProps, GraphMinimap, type GraphMinimapProps, GraphNode, type GraphNodeProps, type GraphNodeState, Hero, type HeroProps, type InspectorProperty, type InspectorRelation, type MinimapPoint, type MinimapViewport, PathOverlay, type PathOverlayProps, type PathPoint, PricingCard, type PricingCardProps, ReasoningBlock, type ReasoningBlockProps, ReasoningStep, type ReasoningStepProps, SuggestionChip, type SuggestionChipProps, Testimonial, type TestimonialProps, ToolCallCard, type ToolCallCardProps, entityColumn, entityTypeColumn };

package/dist/index.js

@@ -1024,26 +1024,29 @@ Hero.displayName = "Hero";
 import { forwardRef as forwardRef21 } from "react";
 import { cn as cn19 } from "@ship-it-ui/ui";
 import { jsx as jsx21, jsxs as jsxs20 } from "react/jsx-runtime";
-var PricingCard = forwardRef21(function PricingCard2({ tier, price, description, features, action, featured, className, ...props }, ref) {
+var PricingCard = forwardRef21(function PricingCard2({ tier, price, priceUnit, description, features, action, featured, className, ...props }, ref) {
   return /* @__PURE__ */ jsxs20(
     "div",
     {
       ref,
       className: cn19(
-        "bg-panel flex flex-col gap-5 rounded-lg border p-6",
+        "bg-panel @container flex flex-col gap-5 rounded-lg border p-5 @sm:p-6",
         featured ? "border-accent shadow-lg" : "border-border",
         className
       ),
       ...props,
       children: [
         /* @__PURE__ */ jsxs20("div", { children: [
-          /* @__PURE__ */ jsxs20("div", { className: "mb-1 flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxs20("div", { className: "mb-1 flex flex-wrap items-center gap-2", children: [
             /* @__PURE__ */ jsx21("span", { className: "text-[14px] font-medium", children: tier }),
             featured && /* @__PURE__ */ jsx21("span", { className: "bg-accent-dim text-accent rounded-full px-[6px] py-[1px] font-mono text-[10px]", children: "recommended" })
           ] }),
           description && /* @__PURE__ */ jsx21("div", { className: "text-text-muted text-[12px]", children: description })
         ] }),
-        /* @__PURE__ */ jsx21("div", { className: "font-mono text-[28px] font-medium tracking-[-0.5px]", children: price }),
+        /* @__PURE__ */ jsxs20("div", { className: "flex flex-wrap items-baseline justify-center gap-x-2 gap-y-1", children: [
+          /* @__PURE__ */ jsx21("span", { className: "font-mono text-[22px] font-medium tracking-[-0.5px] text-balance @sm:text-[28px]", children: price }),
+          priceUnit != null && /* @__PURE__ */ jsx21("span", { className: "text-text-dim text-[12px] whitespace-nowrap @sm:text-[13px]", children: priceUnit })
+        ] }),
         /* @__PURE__ */ jsx21("ul", { className: "m-0 flex list-none flex-col gap-2 p-0", children: features.map((f, i) => /* @__PURE__ */ jsxs20("li", { className: "flex items-start gap-2 text-[13px]", children: [
           /* @__PURE__ */ jsx21("span", { "aria-hidden": true, className: "text-accent", children: "\u2713" }),
           /* @__PURE__ */ jsx21("span", { children: f })
@@ -1082,6 +1085,34 @@ var Testimonial = forwardRef22(function Testimonial2({ quote, author, role, avat
   );
 });
 Testimonial.displayName = "Testimonial";
+
+// src/data/EntityTable.tsx
+import { DataTable } from "@ship-it-ui/ui";
+import "react";
+import { jsx as jsx23, jsxs as jsxs22 } from "react/jsx-runtime";
+function EntityTable(props) {
+  const { rowKey, ...rest } = props;
+  return /* @__PURE__ */ jsx23(DataTable, { ...rest, rowKey: rowKey ?? ((row) => row.id) });
+}
+function entityColumn(options = {}) {
+  return {
+    key: options.key ?? "name",
+    header: options.header ?? "Name",
+    accessor: (row) => row.name,
+    cell: (row) => /* @__PURE__ */ jsxs22("span", { className: "flex items-center gap-2 font-mono", children: [
+      /* @__PURE__ */ jsx23("span", { "aria-hidden": true, className: ENTITY_TONE_CLASS[row.type], children: ENTITY_GLYPH[row.type] }),
+      row.name
+    ] })
+  };
+}
+function entityTypeColumn(options = {}) {
+  return {
+    key: options.key ?? "type",
+    header: options.header ?? "Type",
+    accessor: (row) => row.type,
+    cell: (row) => /* @__PURE__ */ jsx23(EntityBadge, { type: row.type, size: "sm" })
+  };
+}
 export {
   AskBar,
   CTAStrip,
@@ -1097,6 +1128,7 @@ export {
   EntityListRow,
   EntityListRowButton,
   EntityListRowDiv,
+  EntityTable,
   FeatureGrid,
   Footer,
   GraphEdge,
@@ -1112,6 +1144,8 @@ export {
   SuggestionChip,
   Testimonial,
   ToolCallCard,
-  cn21 as cn
+  cn21 as cn,
+  entityColumn,
+  entityTypeColumn
 };
 //# sourceMappingURL=index.js.map