@usefragments/ui 1.0.0

package/dist/components/Tabs/Tabs.module.scss.cjs

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const root = "_root_lf42g_1";
+const list = "_list_lf42g_10";
+const listPills = "_listPills_lf42g_26";
+const tab = "_tab_lf42g_37";
+const tabSm = "_tabSm_lf42g_84";
+const tabMd = "_tabMd_lf42g_89";
+const tabLg = "_tabLg_lf42g_94";
+const tabUnderline = "_tabUnderline_lf42g_100";
+const tabPills = "_tabPills_lf42g_108";
+const indicator = "_indicator_lf42g_122";
+const panel = "_panel_lf42g_143";
+const panelFlush = "_panelFlush_lf42g_156";
+const styles = {
+  root,
+  list,
+  listPills,
+  tab,
+  tabSm,
+  tabMd,
+  tabLg,
+  tabUnderline,
+  tabPills,
+  indicator,
+  panel,
+  panelFlush
+};
+exports.default = styles;
+exports.indicator = indicator;
+exports.list = list;
+exports.listPills = listPills;
+exports.panel = panel;
+exports.panelFlush = panelFlush;
+exports.root = root;
+exports.tab = tab;
+exports.tabLg = tabLg;
+exports.tabMd = tabMd;
+exports.tabPills = tabPills;
+exports.tabSm = tabSm;
+exports.tabUnderline = tabUnderline;

package/dist/components/Tabs/Tabs.module.scss.js

@@ -0,0 +1,41 @@
+const root = "_root_lf42g_1";
+const list = "_list_lf42g_10";
+const listPills = "_listPills_lf42g_26";
+const tab = "_tab_lf42g_37";
+const tabSm = "_tabSm_lf42g_84";
+const tabMd = "_tabMd_lf42g_89";
+const tabLg = "_tabLg_lf42g_94";
+const tabUnderline = "_tabUnderline_lf42g_100";
+const tabPills = "_tabPills_lf42g_108";
+const indicator = "_indicator_lf42g_122";
+const panel = "_panel_lf42g_143";
+const panelFlush = "_panelFlush_lf42g_156";
+const styles = {
+  root,
+  list,
+  listPills,
+  tab,
+  tabSm,
+  tabMd,
+  tabLg,
+  tabUnderline,
+  tabPills,
+  indicator,
+  panel,
+  panelFlush
+};
+export {
+  styles as default,
+  indicator,
+  list,
+  listPills,
+  panel,
+  panelFlush,
+  root,
+  tab,
+  tabLg,
+  tabMd,
+  tabPills,
+  tabSm,
+  tabUnderline
+};

package/dist/components/Tabs/index.cjs

@@ -0,0 +1,93 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const tabs = require("@base-ui/react/tabs");
+const index = require("../ComponentDefaults/index.cjs");
+const Tabs_module = require("./Tabs.module.scss.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const TabsVariantContext = React__namespace.createContext("underline");
+const TabsSizeContext = React__namespace.createContext("sm");
+function TabsRoot({
+  children,
+  defaultValue,
+  value,
+  onValueChange,
+  orientation = "horizontal",
+  variant = "underline",
+  size: sizeProp,
+  className,
+  ...htmlProps
+}) {
+  const size = index.useResolvedControlSize(sizeProp, "sm");
+  const classes = [Tabs_module.default.root, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsx(TabsVariantContext.Provider, { value: variant, children: /* @__PURE__ */ jsxRuntime.jsx(TabsSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsxRuntime.jsx(
+    tabs.Tabs.Root,
+    {
+      ...htmlProps,
+      defaultValue,
+      value,
+      onValueChange,
+      orientation,
+      className: classes,
+      children
+    }
+  ) }) });
+}
+function TabsList({ children, variant, size: sizeProp, className, ...htmlProps }) {
+  const rootVariant = React__namespace.useContext(TabsVariantContext);
+  const rootSize = React__namespace.useContext(TabsSizeContext);
+  const size = sizeProp ?? rootSize;
+  const resolvedVariant = variant ?? rootVariant;
+  const variantClass = resolvedVariant === "pills" ? Tabs_module.default.listPills : Tabs_module.default.listUnderline;
+  const classes = [Tabs_module.default.list, variantClass, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsx(TabsVariantContext.Provider, { value: resolvedVariant, children: /* @__PURE__ */ jsxRuntime.jsx(TabsSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsxRuntime.jsxs(tabs.Tabs.List, { ...htmlProps, className: classes, children: [
+    children,
+    resolvedVariant === "underline" && /* @__PURE__ */ jsxRuntime.jsx(tabs.Tabs.Indicator, { className: Tabs_module.default.indicator })
+  ] }) }) });
+}
+function Tab({ children, value, disabled, className }) {
+  const variant = React__namespace.useContext(TabsVariantContext);
+  const size = React__namespace.useContext(TabsSizeContext);
+  const variantClass = variant === "pills" ? Tabs_module.default.tabPills : Tabs_module.default.tabUnderline;
+  const sizeClass = size === "sm" ? Tabs_module.default.tabSm : size === "lg" ? Tabs_module.default.tabLg : Tabs_module.default.tabMd;
+  const classes = [Tabs_module.default.tab, sizeClass, variantClass, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsx(tabs.Tabs.Tab, { value, disabled, className: classes, children });
+}
+function TabsPanel({
+  children,
+  value,
+  keepMounted = false,
+  flush = false,
+  className,
+  ...htmlProps
+}) {
+  const classes = [Tabs_module.default.panel, flush && Tabs_module.default.panelFlush, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsx(tabs.Tabs.Panel, { ...htmlProps, value, keepMounted, className: classes, children });
+}
+const Tabs = Object.assign(TabsRoot, {
+  List: TabsList,
+  Tab,
+  Panel: TabsPanel
+});
+exports.Tab = Tab;
+exports.Tabs = Tabs;
+exports.TabsList = TabsList;
+exports.TabsPanel = TabsPanel;
+exports.TabsRoot = TabsRoot;

package/dist/components/Tabs/index.d.ts

@@ -0,0 +1,58 @@
+import * as React from "react";
+import { Tabs as BaseTabs } from "@base-ui/react/tabs";
+import { type ControlSize } from "../ComponentDefaults";
+export type TabValue = string;
+export type TabsChangeEventDetails = Parameters<NonNullable<React.ComponentProps<typeof BaseTabs.Root>["onValueChange"]>>[1];
+/**
+ * Tabbed navigation for switching between content panels.
+ * @see https://usefragments.com/components/tabs
+ */
+export interface TabsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "defaultValue"> {
+    children: React.ReactNode;
+    /** Default active tab value (uncontrolled) */
+    defaultValue?: TabValue;
+    /** Controlled active tab value */
+    value?: TabValue;
+    /** Called when the active tab changes */
+    onValueChange?: (value: TabValue, eventDetails: TabsChangeEventDetails) => void;
+    /** Tab layout direction.
+     * @default "horizontal" */
+    orientation?: "horizontal" | "vertical";
+    /** Tab list visual style (default for Tabs.List).
+     * @default "underline" */
+    variant?: "underline" | "pills";
+    /** Tab control size. Defaults to the component-default control size. */
+    size?: ControlSize;
+}
+export interface TabsListProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    /** Tab list visual style.
+     * @default "underline"
+     * @see https://usefragments.com/components/tabs#variants */
+    variant?: "underline" | "pills";
+    /** Tab control size. Defaults to the nearest Tabs root or provider default. */
+    size?: ControlSize;
+}
+export interface TabProps {
+    children: React.ReactNode;
+    value: TabValue;
+    disabled?: boolean;
+    className?: string;
+}
+export interface TabsPanelProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    value: TabValue;
+    keepMounted?: boolean;
+    flush?: boolean;
+}
+declare function TabsRoot({ children, defaultValue, value, onValueChange, orientation, variant, size: sizeProp, className, ...htmlProps }: TabsProps): import("react/jsx-runtime").JSX.Element;
+declare function TabsList({ children, variant, size: sizeProp, className, ...htmlProps }: TabsListProps): import("react/jsx-runtime").JSX.Element;
+declare function Tab({ children, value, disabled, className }: TabProps): import("react/jsx-runtime").JSX.Element;
+declare function TabsPanel({ children, value, keepMounted, flush, className, ...htmlProps }: TabsPanelProps): import("react/jsx-runtime").JSX.Element;
+export declare const Tabs: typeof TabsRoot & {
+    List: typeof TabsList;
+    Tab: typeof Tab;
+    Panel: typeof TabsPanel;
+};
+export { TabsRoot, TabsList, Tab, TabsPanel };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Tabs/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,IAAI,IAAI,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,EAA0B,KAAK,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAOhF,MAAM,MAAM,QAAQ,GAAG,MAAM,CAAC;AAC9B,MAAM,MAAM,sBAAsB,GAAG,UAAU,CAC7C,WAAW,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,IAAI,CAAC,CAAC,eAAe,CAAC,CAAC,CACzE,CAAC,CAAC,CAAC,CAAC;AAEL;;;GAGG;AACH,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,cAAc,CAAC;IAC3F,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,8CAA8C;IAC9C,YAAY,CAAC,EAAE,QAAQ,CAAC;IACxB,kCAAkC;IAClC,KAAK,CAAC,EAAE,QAAQ,CAAC;IACjB,yCAAyC;IACzC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,EAAE,YAAY,EAAE,sBAAsB,KAAK,IAAI,CAAC;IAChF;+BAC2B;IAC3B,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC;8BAC0B;IAC1B,OAAO,CAAC,EAAE,WAAW,GAAG,OAAO,CAAC;IAChC,wEAAwE;IACxE,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB;AAED,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACzE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;gEAE4D;IAC5D,OAAO,CAAC,EAAE,WAAW,GAAG,OAAO,CAAC;IAChC,+EAA+E;IAC/E,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB;AAED,MAAM,WAAW,QAAQ;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,EAAE,QAAQ,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC1E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,EAAE,QAAQ,CAAC;IAChB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAaD,iBAAS,QAAQ,CAAC,EAChB,QAAQ,EACR,YAAY,EACZ,KAAK,EACL,aAAa,EACb,WAA0B,EAC1B,OAAqB,EACrB,IAAI,EAAE,QAAQ,EACd,SAAS,EACT,GAAG,SAAS,EACb,EAAE,SAAS,2CAoBX;AAED,iBAAS,QAAQ,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,EAAE,aAAa,2CAkB9F;AAED,iBAAS,GAAG,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,QAAQ,2CAY9D;AAED,iBAAS,SAAS,CAAC,EACjB,QAAQ,EACR,KAAK,EACL,WAAmB,EACnB,KAAa,EACb,SAAS,EACT,GAAG,SAAS,EACb,EAAE,cAAc,2CAQhB;AAMD,eAAO,MAAM,IAAI;;;;CAIf,CAAC;AAGH,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,EAAE,SAAS,EAAE,CAAC"}

package/dist/components/Tabs/index.js

@@ -0,0 +1,76 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Tabs as Tabs$1 } from "@base-ui/react/tabs";
+import { useResolvedControlSize } from "../ComponentDefaults/index.js";
+import styles from "./Tabs.module.scss.js";
+const TabsVariantContext = React.createContext("underline");
+const TabsSizeContext = React.createContext("sm");
+function TabsRoot({
+  children,
+  defaultValue,
+  value,
+  onValueChange,
+  orientation = "horizontal",
+  variant = "underline",
+  size: sizeProp,
+  className,
+  ...htmlProps
+}) {
+  const size = useResolvedControlSize(sizeProp, "sm");
+  const classes = [styles.root, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx(TabsVariantContext.Provider, { value: variant, children: /* @__PURE__ */ jsx(TabsSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsx(
+    Tabs$1.Root,
+    {
+      ...htmlProps,
+      defaultValue,
+      value,
+      onValueChange,
+      orientation,
+      className: classes,
+      children
+    }
+  ) }) });
+}
+function TabsList({ children, variant, size: sizeProp, className, ...htmlProps }) {
+  const rootVariant = React.useContext(TabsVariantContext);
+  const rootSize = React.useContext(TabsSizeContext);
+  const size = sizeProp ?? rootSize;
+  const resolvedVariant = variant ?? rootVariant;
+  const variantClass = resolvedVariant === "pills" ? styles.listPills : styles.listUnderline;
+  const classes = [styles.list, variantClass, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx(TabsVariantContext.Provider, { value: resolvedVariant, children: /* @__PURE__ */ jsx(TabsSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsxs(Tabs$1.List, { ...htmlProps, className: classes, children: [
+    children,
+    resolvedVariant === "underline" && /* @__PURE__ */ jsx(Tabs$1.Indicator, { className: styles.indicator })
+  ] }) }) });
+}
+function Tab({ children, value, disabled, className }) {
+  const variant = React.useContext(TabsVariantContext);
+  const size = React.useContext(TabsSizeContext);
+  const variantClass = variant === "pills" ? styles.tabPills : styles.tabUnderline;
+  const sizeClass = size === "sm" ? styles.tabSm : size === "lg" ? styles.tabLg : styles.tabMd;
+  const classes = [styles.tab, sizeClass, variantClass, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx(Tabs$1.Tab, { value, disabled, className: classes, children });
+}
+function TabsPanel({
+  children,
+  value,
+  keepMounted = false,
+  flush = false,
+  className,
+  ...htmlProps
+}) {
+  const classes = [styles.panel, flush && styles.panelFlush, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx(Tabs$1.Panel, { ...htmlProps, value, keepMounted, className: classes, children });
+}
+const Tabs = Object.assign(TabsRoot, {
+  List: TabsList,
+  Tab,
+  Panel: TabsPanel
+});
+export {
+  Tab,
+  Tabs,
+  TabsList,
+  TabsPanel,
+  TabsRoot
+};

package/dist/components/Text/Text.module.scss.cjs

@@ -0,0 +1,112 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const text = "_text_1noyh_1";
+const variantSectionLabel = "_variant-section-label_1noyh_7";
+const size2Xs = "_size-2xs_1noyh_17";
+const sizeXs = "_size-xs_1noyh_21";
+const sizeSm = "_size-sm_1noyh_25";
+const sizeBase = "_size-base_1noyh_29";
+const sizeMd = "_size-md_1noyh_33";
+const sizeLg = "_size-lg_1noyh_37";
+const sizeXl = "_size-xl_1noyh_41";
+const size2Xl = "_size-2xl_1noyh_45";
+const size3Xl = "_size-3xl_1noyh_49";
+const size4Xl = "_size-4xl_1noyh_55";
+const weightNormal = "_weight-normal_1noyh_61";
+const weightMedium = "_weight-medium_1noyh_65";
+const weightSemibold = "_weight-semibold_1noyh_69";
+const weightBold = "_weight-bold_1noyh_73";
+const colorPrimary = "_color-primary_1noyh_77";
+const colorSecondary = "_color-secondary_1noyh_81";
+const colorTertiary = "_color-tertiary_1noyh_85";
+const colorMuted = "_color-muted_1noyh_86";
+const mono = "_mono_1noyh_90";
+const truncate = "_truncate_1noyh_94";
+const lineClamp = "_lineClamp_1noyh_100";
+const trackingNormal = "_tracking-normal_1noyh_108";
+const trackingTight = "_tracking-tight_1noyh_112";
+const trackingTighter = "_tracking-tighter_1noyh_116";
+const trackingTightest = "_tracking-tightest_1noyh_120";
+const tabularNums = "_tabularNums_1noyh_124";
+const styles = {
+  text,
+  "variant-section-label": "_variant-section-label_1noyh_7",
+  variantSectionLabel,
+  "size-2xs": "_size-2xs_1noyh_17",
+  size2Xs,
+  "size-xs": "_size-xs_1noyh_21",
+  sizeXs,
+  "size-sm": "_size-sm_1noyh_25",
+  sizeSm,
+  "size-base": "_size-base_1noyh_29",
+  sizeBase,
+  "size-md": "_size-md_1noyh_33",
+  sizeMd,
+  "size-lg": "_size-lg_1noyh_37",
+  sizeLg,
+  "size-xl": "_size-xl_1noyh_41",
+  sizeXl,
+  "size-2xl": "_size-2xl_1noyh_45",
+  size2Xl,
+  "size-3xl": "_size-3xl_1noyh_49",
+  size3Xl,
+  "size-4xl": "_size-4xl_1noyh_55",
+  size4Xl,
+  "weight-normal": "_weight-normal_1noyh_61",
+  weightNormal,
+  "weight-medium": "_weight-medium_1noyh_65",
+  weightMedium,
+  "weight-semibold": "_weight-semibold_1noyh_69",
+  weightSemibold,
+  "weight-bold": "_weight-bold_1noyh_73",
+  weightBold,
+  "color-primary": "_color-primary_1noyh_77",
+  colorPrimary,
+  "color-secondary": "_color-secondary_1noyh_81",
+  colorSecondary,
+  "color-tertiary": "_color-tertiary_1noyh_85",
+  colorTertiary,
+  "color-muted": "_color-muted_1noyh_86",
+  colorMuted,
+  mono,
+  truncate,
+  lineClamp,
+  "tracking-normal": "_tracking-normal_1noyh_108",
+  trackingNormal,
+  "tracking-tight": "_tracking-tight_1noyh_112",
+  trackingTight,
+  "tracking-tighter": "_tracking-tighter_1noyh_116",
+  trackingTighter,
+  "tracking-tightest": "_tracking-tightest_1noyh_120",
+  trackingTightest,
+  tabularNums
+};
+exports.colorMuted = colorMuted;
+exports.colorPrimary = colorPrimary;
+exports.colorSecondary = colorSecondary;
+exports.colorTertiary = colorTertiary;
+exports.default = styles;
+exports.lineClamp = lineClamp;
+exports.mono = mono;
+exports.size2Xl = size2Xl;
+exports.size2Xs = size2Xs;
+exports.size3Xl = size3Xl;
+exports.size4Xl = size4Xl;
+exports.sizeBase = sizeBase;
+exports.sizeLg = sizeLg;
+exports.sizeMd = sizeMd;
+exports.sizeSm = sizeSm;
+exports.sizeXl = sizeXl;
+exports.sizeXs = sizeXs;
+exports.tabularNums = tabularNums;
+exports.text = text;
+exports.trackingNormal = trackingNormal;
+exports.trackingTight = trackingTight;
+exports.trackingTighter = trackingTighter;
+exports.trackingTightest = trackingTightest;
+exports.truncate = truncate;
+exports.variantSectionLabel = variantSectionLabel;
+exports.weightBold = weightBold;
+exports.weightMedium = weightMedium;
+exports.weightNormal = weightNormal;
+exports.weightSemibold = weightSemibold;

package/dist/components/Text/Text.module.scss.js

@@ -0,0 +1,112 @@
+const text = "_text_1noyh_1";
+const variantSectionLabel = "_variant-section-label_1noyh_7";
+const size2Xs = "_size-2xs_1noyh_17";
+const sizeXs = "_size-xs_1noyh_21";
+const sizeSm = "_size-sm_1noyh_25";
+const sizeBase = "_size-base_1noyh_29";
+const sizeMd = "_size-md_1noyh_33";
+const sizeLg = "_size-lg_1noyh_37";
+const sizeXl = "_size-xl_1noyh_41";
+const size2Xl = "_size-2xl_1noyh_45";
+const size3Xl = "_size-3xl_1noyh_49";
+const size4Xl = "_size-4xl_1noyh_55";
+const weightNormal = "_weight-normal_1noyh_61";
+const weightMedium = "_weight-medium_1noyh_65";
+const weightSemibold = "_weight-semibold_1noyh_69";
+const weightBold = "_weight-bold_1noyh_73";
+const colorPrimary = "_color-primary_1noyh_77";
+const colorSecondary = "_color-secondary_1noyh_81";
+const colorTertiary = "_color-tertiary_1noyh_85";
+const colorMuted = "_color-muted_1noyh_86";
+const mono = "_mono_1noyh_90";
+const truncate = "_truncate_1noyh_94";
+const lineClamp = "_lineClamp_1noyh_100";
+const trackingNormal = "_tracking-normal_1noyh_108";
+const trackingTight = "_tracking-tight_1noyh_112";
+const trackingTighter = "_tracking-tighter_1noyh_116";
+const trackingTightest = "_tracking-tightest_1noyh_120";
+const tabularNums = "_tabularNums_1noyh_124";
+const styles = {
+  text,
+  "variant-section-label": "_variant-section-label_1noyh_7",
+  variantSectionLabel,
+  "size-2xs": "_size-2xs_1noyh_17",
+  size2Xs,
+  "size-xs": "_size-xs_1noyh_21",
+  sizeXs,
+  "size-sm": "_size-sm_1noyh_25",
+  sizeSm,
+  "size-base": "_size-base_1noyh_29",
+  sizeBase,
+  "size-md": "_size-md_1noyh_33",
+  sizeMd,
+  "size-lg": "_size-lg_1noyh_37",
+  sizeLg,
+  "size-xl": "_size-xl_1noyh_41",
+  sizeXl,
+  "size-2xl": "_size-2xl_1noyh_45",
+  size2Xl,
+  "size-3xl": "_size-3xl_1noyh_49",
+  size3Xl,
+  "size-4xl": "_size-4xl_1noyh_55",
+  size4Xl,
+  "weight-normal": "_weight-normal_1noyh_61",
+  weightNormal,
+  "weight-medium": "_weight-medium_1noyh_65",
+  weightMedium,
+  "weight-semibold": "_weight-semibold_1noyh_69",
+  weightSemibold,
+  "weight-bold": "_weight-bold_1noyh_73",
+  weightBold,
+  "color-primary": "_color-primary_1noyh_77",
+  colorPrimary,
+  "color-secondary": "_color-secondary_1noyh_81",
+  colorSecondary,
+  "color-tertiary": "_color-tertiary_1noyh_85",
+  colorTertiary,
+  "color-muted": "_color-muted_1noyh_86",
+  colorMuted,
+  mono,
+  truncate,
+  lineClamp,
+  "tracking-normal": "_tracking-normal_1noyh_108",
+  trackingNormal,
+  "tracking-tight": "_tracking-tight_1noyh_112",
+  trackingTight,
+  "tracking-tighter": "_tracking-tighter_1noyh_116",
+  trackingTighter,
+  "tracking-tightest": "_tracking-tightest_1noyh_120",
+  trackingTightest,
+  tabularNums
+};
+export {
+  colorMuted,
+  colorPrimary,
+  colorSecondary,
+  colorTertiary,
+  styles as default,
+  lineClamp,
+  mono,
+  size2Xl,
+  size2Xs,
+  size3Xl,
+  size4Xl,
+  sizeBase,
+  sizeLg,
+  sizeMd,
+  sizeSm,
+  sizeXl,
+  sizeXs,
+  tabularNums,
+  text,
+  trackingNormal,
+  trackingTight,
+  trackingTighter,
+  trackingTightest,
+  truncate,
+  variantSectionLabel,
+  weightBold,
+  weightMedium,
+  weightNormal,
+  weightSemibold
+};

package/dist/components/Text/index.cjs

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const Text_module = require("./Text.module.scss.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const TextRoot = React__namespace.forwardRef(
+  function Text2({
+    children,
+    as: Component = "span",
+    variant,
+    size,
+    weight,
+    color,
+    font = "sans",
+    truncate,
+    lineClamp,
+    letterSpacing,
+    tabularNums,
+    className,
+    style,
+    ...htmlProps
+  }, ref) {
+    const classes = [
+      Text_module.default.text,
+      variant && Text_module.default[`variant-${variant}`],
+      size && Text_module.default[`size-${size}`],
+      weight && Text_module.default[`weight-${weight}`],
+      color && Text_module.default[`color-${color}`],
+      font === "mono" && Text_module.default.mono,
+      truncate && Text_module.default.truncate,
+      lineClamp && Text_module.default.lineClamp,
+      letterSpacing && Text_module.default[`tracking-${letterSpacing}`],
+      tabularNums && Text_module.default.tabularNums,
+      className
+    ].filter(Boolean).join(" ");
+    const lineClampStyle = lineClamp ? { "--fui-line-clamp": lineClamp, ...style } : style;
+    return /* @__PURE__ */ jsxRuntime.jsx(Component, { ref, className: classes, style: lineClampStyle, ...htmlProps, children });
+  }
+);
+const Text = Object.assign(TextRoot, {
+  Root: TextRoot
+});
+exports.Text = Text;

package/dist/components/Text/index.d.ts

@@ -0,0 +1,41 @@
+import * as React from 'react';
+/**
+ * Typography component for rendering text with consistent styling.
+ * @see https://usefragments.com/components/text
+ */
+export interface TextProps extends Omit<React.HTMLAttributes<HTMLElement>, 'color'> {
+    children: React.ReactNode;
+    /** HTML element to render.
+     * @default "span" */
+    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'label' | 'div' | 'strong' | 'em' | 'small' | 'mark' | 'del' | 'ins' | 'sub' | 'sup' | 'time' | 'address' | 'blockquote' | 'cite' | 'code' | 'abbr';
+    /** Preset text variant */
+    variant?: 'section-label';
+    /** Font size. Steps up the scale: 2xs (10), xs (12), sm/base (14), md (15 prose body),
+     * lg (20), xl (24), 2xl (30), 3xl (36 page title), 4xl (48 hero).
+     * @see https://usefragments.com/components/text#sizes */
+    size?: '2xs' | 'xs' | 'sm' | 'base' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
+    /** Font weight.
+     * @default "normal" */
+    weight?: 'normal' | 'medium' | 'semibold' | 'bold';
+    /** Text color. `"muted"` is an alias for `"tertiary"`.
+     * @default "primary" */
+    color?: 'primary' | 'secondary' | 'tertiary' | 'muted';
+    /** Font family.
+     * @default "sans" */
+    font?: 'sans' | 'mono';
+    /** Truncate text with ellipsis when it overflows */
+    truncate?: boolean;
+    /** Number of lines before truncating (requires truncate=true) */
+    lineClamp?: number;
+    /** Letter-spacing preset. `"tight"` suits dense UI chrome labels (-0.01em);
+     * `"tighter"` suits headings and stat values (-0.02em); `"tightest"` suits
+     * display numerics (-0.025em). Omit for the font's default tracking. */
+    letterSpacing?: 'normal' | 'tight' | 'tighter' | 'tightest';
+    /** Use tabular (fixed-width) numerals so digits align in columns. Ideal for
+     * stat values, tables, timestamps, and any updating number. */
+    tabularNums?: boolean;
+}
+export declare const Text: React.ForwardRefExoticComponent<TextProps & React.RefAttributes<HTMLElement>> & {
+    Root: React.ForwardRefExoticComponent<TextProps & React.RefAttributes<HTMLElement>>;
+};
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Text/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Text/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B;;;GAGG;AACH,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC;IACjF,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;yBACqB;IACrB,EAAE,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,GAAG,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,IAAI,GAAG,OAAO,GAAG,MAAM,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,MAAM,GAAG,SAAS,GAAG,YAAY,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;IAClN,0BAA0B;IAC1B,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B;;6DAEyD;IACzD,IAAI,CAAC,EAAE,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;IACjF;2BACuB;IACvB,MAAM,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,UAAU,GAAG,MAAM,CAAC;IACnD;4BACwB;IACxB,KAAK,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,OAAO,CAAC;IACvD;yBACqB;IACrB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,oDAAoD;IACpD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iEAAiE;IACjE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;4EAEwE;IACxE,aAAa,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,UAAU,CAAC;IAC5D;mEAC+D;IAC/D,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAkDD,eAAO,MAAM,IAAI;;CAEf,CAAC"}