@jackbernnie/hiyf 0.1.0

package/dist/primitives/createText.d.ts

@@ -0,0 +1,103 @@
+import { type VariantProps } from 'class-variance-authority';
+import { type ComponentPropsWithoutRef, type JSX, type ReactNode } from 'react';
+type TextTag = 'p' | 'span' | 'label' | 'strong' | 'em' | 'small' | 'code' | 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+declare const textVariants: (props?: ({
+    variant?: "default" | "label" | "body" | "caption" | "heading-2xl" | "heading-xl" | "heading-l" | "heading-m" | "heading-s" | "heading-xs" | "heading-xxs" | null | undefined;
+    color?: "default" | "inherit" | "disabled" | "black" | "white" | "error" | "muted" | "accent" | "danger" | "warning" | "success" | "inverse" | null | undefined;
+    align?: "left" | "right" | "center" | "justify" | null | undefined;
+    wrap?: "balance" | "nowrap" | "wrap" | "pretty" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type TextVariant = NonNullable<VariantProps<typeof textVariants>['variant']>;
+export type TextColor = NonNullable<VariantProps<typeof textVariants>['color']>;
+export type TextStyleProps = VariantProps<typeof textVariants>;
+/**
+ * How to render the value passed as children. A named preset keeps the common
+ * cases discoverable; the function form is the escape hatch for the long tail
+ * (currency, units, locale-specific rules). Either way the output is a string,
+ * so no visual decision leaks out of the component.
+ */
+export type TextFormatter = 'number' | 'compact' | ((value: string | number) => string);
+type TextProps<E extends TextTag = 'p'> = TextStyleProps & {
+    /**
+     * The role this text plays, which decides its size, weight and font family.
+     * Headings use the display scale; `body`/`default`/`label`/`caption` cover
+     * supporting copy. Pick the role, never a raw size.
+     */
+    variant?: TextStyleProps['variant'];
+    /**
+     * Semantic foreground color that resolves for light and dark automatically.
+     * Use `inherit` to adopt the color of a parent Box.
+     */
+    color?: TextStyleProps['color'];
+    /**
+     * Underlying DOM element. Defaults to a sensible element per variant (heading
+     * variants render `h1`–`h6`, everything else `p`). Override to keep a correct
+     * document outline. DOM props for the element are typed and forwarded.
+     */
+    as?: E;
+    /**
+     * Horizontal text alignment.
+     */
+    align?: TextStyleProps['align'];
+    /**
+     * Line-wrapping behavior. Defaults are baked per role (headings `balance`,
+     * body `pretty`); set this to override. Ignored while truncating.
+     */
+    wrap?: TextStyleProps['wrap'];
+    /**
+     * The text to render. Prefer plain strings and numbers; inline elements are
+     * allowed where you genuinely need them (a `<br>`, an inline link), but reach
+     * for Box to compose layout rather than nesting containers inside Text.
+     */
+    children?: ReactNode;
+    /**
+     * Render a pulsing skeleton placeholder instead of children, for content that
+     * is still loading.
+     */
+    loading?: boolean;
+    /**
+     * Sizes the single-line loading skeleton. Falls back to children, then to
+     * "Loading...".
+     */
+    placeholderText?: string;
+    /**
+     * When greater than 1, renders a multi-line loading skeleton with that many
+     * lines.
+     */
+    placeholderNumberOfLines?: number;
+    /**
+     * Apply a line-through decoration, e.g. for a struck-out previous price.
+     */
+    lineThrough?: boolean;
+    /**
+     * Render in the monospace font family while keeping the variant's size and
+     * weight. Orthogonal to `variant`, so any text can be monospaced.
+     */
+    monospace?: boolean;
+    /**
+     * Align figures for vertical scanning in tables and stat readouts. Pairs well
+     * with a numeric `formatter`.
+     */
+    tabularNums?: boolean;
+    /**
+     * Truncate overflow. `true` clamps to a single line with an ellipsis; a
+     * number clamps to that many lines. The component owns the CSS, so callers
+     * never hand-roll line-clamp utilities.
+     */
+    truncate?: boolean | number;
+    /**
+     * Format the children value for display. 'number' adds grouping separators
+     * (3290033 → "3,290,033"), 'compact' shortens (3290033 → "3.3M"), or pass a
+     * function for full control. Pass the raw value as children, not a
+     * pre-formatted string.
+     */
+    formatter?: TextFormatter;
+} & Omit<ComponentPropsWithoutRef<E>, keyof TextStyleProps | 'className' | 'loading' | 'children'>;
+declare function Text<E extends TextTag = 'p'>({ as, variant, color, align, wrap, children, style, loading, placeholderText, placeholderNumberOfLines, lineThrough, monospace, tabularNums, truncate, formatter, ...props }: TextProps<E> & {
+    style?: React.CSSProperties;
+}): JSX.Element;
+declare namespace Text {
+    var displayName: string;
+}
+export declare function createText(): typeof Text;
+export { Text };

package/dist/primitives/createText.js

@@ -0,0 +1,183 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { cva } from 'class-variance-authority';
+import { twMerge } from 'tailwind-merge';
+
+const textVariants = cva("", {
+  variants: {
+    variant: {
+      default: "text-sm",
+      body: "text-base",
+      label: "text-xs font-medium",
+      caption: "text-xs leading-snug",
+      "heading-2xl": `font-display text-6xl md:text-8xl`,
+      "heading-xl": `font-display text-5xl md:text-7xl`,
+      "heading-l": `font-display text-4xl md:text-5xl`,
+      "heading-m": `text-3xl md:text-4xl`,
+      "heading-s": `text-2xl md:text-3xl`,
+      "heading-xs": `text-xl  md:text-2xl`,
+      "heading-xxs": `text-lg  md:text-xl`
+    },
+    color: {
+      default: "text-black dark:text-white",
+      muted: "text-gray-500 dark:text-polar-500",
+      disabled: "text-gray-400 dark:text-polar-600",
+      accent: "text-indigo-500 dark:text-indigo-500",
+      danger: "text-red-500 dark:text-red-500",
+      error: "text-red-500 dark:text-red-500",
+      warning: "text-amber-500 dark:text-amber-500",
+      success: "text-emerald-500 dark:text-emerald-500",
+      inverse: "text-white dark:text-black",
+      white: "text-white dark:text-white",
+      black: "text-black dark:text-black",
+      inherit: ""
+    },
+    align: {
+      left: "text-left",
+      center: "text-center",
+      right: "text-right",
+      justify: "text-justify"
+    },
+    wrap: {
+      wrap: "text-wrap",
+      nowrap: "text-nowrap",
+      balance: "text-balance",
+      pretty: "text-pretty"
+    }
+  },
+  defaultVariants: {
+    variant: "default",
+    color: "default"
+  }
+});
+const VARIANT_DEFAULT_TAG = {
+  default: "p",
+  body: "p",
+  label: "p",
+  caption: "p",
+  "heading-2xl": "h1",
+  "heading-xl": "h2",
+  "heading-l": "h3",
+  "heading-m": "h4",
+  "heading-s": "h5",
+  "heading-xs": "h6",
+  "heading-xxs": "h6"
+};
+const VARIANT_DEFAULT_WRAP = {
+  body: "pretty",
+  "heading-2xl": "balance",
+  "heading-xl": "balance",
+  "heading-l": "balance"
+};
+const numberFormatter = new Intl.NumberFormat("en-US");
+const compactFormatter = new Intl.NumberFormat("en-US", { notation: "compact" });
+function applyFormatter(formatter, value) {
+  if (typeof formatter === "function") return formatter(value);
+  const n = typeof value === "number" ? value : Number(value);
+  if (Number.isNaN(n)) return String(value);
+  return formatter === "compact" ? compactFormatter.format(n) : numberFormatter.format(n);
+}
+const HEADING_FONT_FEATURES = "'ss07' 1, 'ss08' 1, 'zero' 1, 'liga' 0";
+const SKELETON_CLASSES = "dark:bg-polar-700 animate-pulse rounded-sm bg-gray-100";
+const renderMultiLineSkeleton = (lines) => Array.from({ length: lines }, (_, i) => /* @__PURE__ */ jsx(
+  "span",
+  {
+    "aria-hidden": true,
+    style: {
+      display: "flex",
+      alignItems: "center",
+      height: "1lh"
+    },
+    children: /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: SKELETON_CLASSES,
+        style: {
+          display: "block",
+          height: "1em",
+          width: i === lines - 1 ? "60%" : "100%"
+        }
+      }
+    )
+  },
+  i
+));
+const renderSingleLineSkeleton = (placeholder) => /* @__PURE__ */ jsxs(Fragment, { children: [
+  /* @__PURE__ */ jsx("span", { style: { visibility: "hidden" }, children: placeholder }),
+  /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": true,
+      className: SKELETON_CLASSES,
+      style: { position: "absolute", inset: 0 }
+    }
+  )
+] });
+function Text({
+  as,
+  variant,
+  color,
+  align,
+  wrap,
+  children,
+  style,
+  loading,
+  placeholderText,
+  placeholderNumberOfLines,
+  lineThrough,
+  monospace,
+  tabularNums,
+  truncate,
+  formatter,
+  ...props
+}) {
+  const resolvedVariant = variant ?? "default";
+  const Tag = as ?? VARIANT_DEFAULT_TAG[resolvedVariant];
+  const isHeading = resolvedVariant.startsWith("heading-");
+  const resolvedWrap = wrap ?? (truncate ? void 0 : VARIANT_DEFAULT_WRAP[resolvedVariant]);
+  let content = formatter !== void 0 && (typeof children === "string" || typeof children === "number") ? applyFormatter(formatter, children) : children;
+  let loadingStyle;
+  if (loading) {
+    const lines = placeholderNumberOfLines ?? 1;
+    if (lines > 1) {
+      content = renderMultiLineSkeleton(lines);
+      loadingStyle = void 0;
+    } else {
+      content = renderSingleLineSkeleton(
+        placeholderText ?? children ?? "Loading..."
+      );
+      loadingStyle = { position: "relative", display: "inline-block" };
+    }
+  }
+  const mergedStyle = {
+    ...isHeading && { fontFeatureSettings: HEADING_FONT_FEATURES },
+    ...lineThrough ? { textDecoration: "line-through" } : {},
+    ...typeof truncate === "number" ? {
+      display: "-webkit-box",
+      WebkitLineClamp: truncate,
+      WebkitBoxOrient: "vertical",
+      overflow: "hidden"
+    } : {},
+    ...style,
+    ...loadingStyle
+  };
+  return /* @__PURE__ */ jsx(
+    Tag,
+    {
+      className: twMerge(
+        textVariants({ variant, color, align, wrap: resolvedWrap }),
+        monospace && "font-mono",
+        tabularNums && "tabular-nums",
+        truncate === true && "truncate"
+      ),
+      style: mergedStyle,
+      ...props,
+      children: content
+    }
+  );
+}
+Text.displayName = "Text";
+function createText() {
+  return Text;
+}
+
+export { Text, createText };

package/dist/primitives/resolveProperties.d.ts

@@ -0,0 +1,17 @@
+export type Breakpoint = 'default' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+export type Responsive<T> = T | Partial<Record<Breakpoint, T>>;
+export type FlexContainerProps = {
+    display?: Responsive<'flex' | 'block' | 'inline-flex' | 'grid' | 'inline-grid' | 'hidden'>;
+    flexDirection?: Responsive<'row' | 'column' | 'row-reverse' | 'column-reverse'>;
+    alignItems?: Responsive<'start' | 'end' | 'center' | 'stretch' | 'baseline'>;
+    justifyContent?: Responsive<'start' | 'end' | 'center' | 'between' | 'around' | 'evenly'>;
+    flexWrap?: Responsive<'wrap' | 'nowrap' | 'wrap-reverse'>;
+};
+export type FlexChildProps = {
+    flex?: Responsive<'1' | 'auto' | 'none' | 'initial'>;
+    alignSelf?: Responsive<'auto' | 'start' | 'end' | 'center' | 'stretch' | 'baseline'>;
+    flexGrow?: '0' | '1';
+    flexShrink?: '0' | '1';
+};
+export declare function resolveContainerClasses(props: FlexContainerProps): string;
+export declare function resolveFlexChildClasses(props: FlexChildProps): string;