@usefragments/ui 1.0.0

package/dist/components/Badge/index.cjs

@@ -0,0 +1,78 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const button = require("@base-ui/react/button");
+const Badge_module = require("./Badge.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 BadgeRoot = React__namespace.forwardRef(function Badge2({
+  children,
+  variant = "default",
+  size = "md",
+  dot = false,
+  dotColor,
+  icon,
+  active = false,
+  onRemove,
+  announce = false,
+  className,
+  style,
+  "aria-label": ariaLabel,
+  role,
+  ...htmlProps
+}, ref) {
+  const classes = [
+    Badge_module.default.badge,
+    Badge_module.default[size],
+    Badge_module.default[variant],
+    active && variant === "dim" && Badge_module.default.active,
+    className
+  ].filter(Boolean).join(" ");
+  const resolvedStyle = dotColor ? { ...style, "--fui-badge-dot-color": dotColor } : style;
+  const effectiveAriaLabel = ariaLabel || (announce && variant !== "default" && variant !== "outline" ? `${variant}: ${typeof children === "string" ? children : ""}` : void 0);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      ref,
+      ...htmlProps,
+      className: classes,
+      style: resolvedStyle,
+      role: role ?? (announce ? "status" : void 0),
+      "aria-label": effectiveAriaLabel,
+      children: [
+        dot && /* @__PURE__ */ jsxRuntime.jsx("span", { className: Badge_module.default.dot, "aria-hidden": "true" }),
+        icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: Badge_module.default.icon, "aria-hidden": "true", children: icon }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children }),
+        onRemove && /* @__PURE__ */ jsxRuntime.jsx(
+          button.Button,
+          {
+            onClick: onRemove,
+            "aria-label": `Remove ${typeof children === "string" ? children : "badge"}`,
+            className: Badge_module.default.remove,
+            children: "×"
+          }
+        )
+      ]
+    }
+  );
+});
+const Badge = Object.assign(BadgeRoot, {
+  Root: BadgeRoot
+});
+exports.Badge = Badge;

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

@@ -0,0 +1,41 @@
+import * as React from "react";
+/**
+ * Badge for status indicators, labels, and counts.
+ * @see https://usefragments.com/components/badge
+ */
+export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+    children: React.ReactNode;
+    /** Visual style variant.
+     *
+     * - `default` / semantic / `outline`: pill-shaped status badges for
+     *   tags, counts, or state.
+     * - `label`: hairline-bordered label on the shared control floor for
+     *   metadata pills inside dense dashboard rows. Pair with `dotColor`.
+     * - `dim`: transparent 32px filter-pill chrome used
+     *   for toolbar filter chips. Pair with `active` to mark the selected one.
+     * @default "default"
+     * @see https://usefragments.com/components/badge#variants */
+    variant?: "default" | "success" | "warning" | "error" | "info" | "outline" | "label" | "dim";
+    /** Badge size.
+     * @default "md" */
+    size?: "sm" | "md" | "lg";
+    /** Show a status dot before the label */
+    dot?: boolean;
+    /** Color for the leading status dot. Applies to `variant="label"` (and the
+     * generic `dot` prop). Accepts any CSS color including CSS custom properties. */
+    dotColor?: string;
+    /** Icon element rendered before the label */
+    icon?: React.ReactNode;
+    /** Marks `variant="dim"` as the currently selected filter. Has no effect on
+     * other variants. */
+    active?: boolean;
+    /** Makes the badge removable. Called when dismiss button is clicked. */
+    onRemove?: () => void;
+    /** Announce badge content as status to assistive tech (opt-in).
+     * @default false */
+    announce?: boolean;
+}
+export declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>> & {
+    Root: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;
+};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B;;;GAGG;AACH,MAAM,WAAW,UAAW,SAAQ,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;IACvE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;;;;;;iEAS6D;IAC7D,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,GAAG,KAAK,CAAC;IAC7F;uBACmB;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,yCAAyC;IACzC,GAAG,CAAC,EAAE,OAAO,CAAC;IACd;qFACiF;IACjF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,6CAA6C;IAC7C,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;yBACqB;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,wEAAwE;IACxE,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB;wBACoB;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAuED,eAAO,MAAM,KAAK;;CAEhB,CAAC"}

package/dist/components/Badge/index.js

@@ -0,0 +1,61 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Button } from "@base-ui/react/button";
+import styles from "./Badge.module.scss.js";
+const BadgeRoot = React.forwardRef(function Badge2({
+  children,
+  variant = "default",
+  size = "md",
+  dot = false,
+  dotColor,
+  icon,
+  active = false,
+  onRemove,
+  announce = false,
+  className,
+  style,
+  "aria-label": ariaLabel,
+  role,
+  ...htmlProps
+}, ref) {
+  const classes = [
+    styles.badge,
+    styles[size],
+    styles[variant],
+    active && variant === "dim" && styles.active,
+    className
+  ].filter(Boolean).join(" ");
+  const resolvedStyle = dotColor ? { ...style, "--fui-badge-dot-color": dotColor } : style;
+  const effectiveAriaLabel = ariaLabel || (announce && variant !== "default" && variant !== "outline" ? `${variant}: ${typeof children === "string" ? children : ""}` : void 0);
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ref,
+      ...htmlProps,
+      className: classes,
+      style: resolvedStyle,
+      role: role ?? (announce ? "status" : void 0),
+      "aria-label": effectiveAriaLabel,
+      children: [
+        dot && /* @__PURE__ */ jsx("span", { className: styles.dot, "aria-hidden": "true" }),
+        icon && /* @__PURE__ */ jsx("span", { className: styles.icon, "aria-hidden": "true", children: icon }),
+        /* @__PURE__ */ jsx("span", { children }),
+        onRemove && /* @__PURE__ */ jsx(
+          Button,
+          {
+            onClick: onRemove,
+            "aria-label": `Remove ${typeof children === "string" ? children : "badge"}`,
+            className: styles.remove,
+            children: "×"
+          }
+        )
+      ]
+    }
+  );
+});
+const Badge = Object.assign(BadgeRoot, {
+  Root: BadgeRoot
+});
+export {
+  Badge
+};

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

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const grid = "_grid_1fcte_1";
+const columns2 = "_columns2_1fcte_7";
+const columns3 = "_columns3_1fcte_11";
+const columns4 = "_columns4_1fcte_15";
+const gapNone = "_gapNone_1fcte_32";
+const gapXs = "_gapXs_1fcte_36";
+const gapSm = "_gapSm_1fcte_40";
+const gapMd = "_gapMd_1fcte_44";
+const gapLg = "_gapLg_1fcte_48";
+const gapXl = "_gapXl_1fcte_52";
+const item = "_item_1fcte_56";
+const subgridRows = "_subgridRows_1fcte_132";
+const subgridColumns = "_subgridColumns_1fcte_137";
+const subgridBoth = "_subgridBoth_1fcte_142";
+const styles = {
+  grid,
+  columns2,
+  columns3,
+  columns4,
+  gapNone,
+  gapXs,
+  gapSm,
+  gapMd,
+  gapLg,
+  gapXl,
+  item,
+  subgridRows,
+  subgridColumns,
+  subgridBoth
+};
+exports.columns2 = columns2;
+exports.columns3 = columns3;
+exports.columns4 = columns4;
+exports.default = styles;
+exports.gapLg = gapLg;
+exports.gapMd = gapMd;
+exports.gapNone = gapNone;
+exports.gapSm = gapSm;
+exports.gapXl = gapXl;
+exports.gapXs = gapXs;
+exports.grid = grid;
+exports.item = item;
+exports.subgridBoth = subgridBoth;
+exports.subgridColumns = subgridColumns;
+exports.subgridRows = subgridRows;

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

@@ -0,0 +1,47 @@
+const grid = "_grid_1fcte_1";
+const columns2 = "_columns2_1fcte_7";
+const columns3 = "_columns3_1fcte_11";
+const columns4 = "_columns4_1fcte_15";
+const gapNone = "_gapNone_1fcte_32";
+const gapXs = "_gapXs_1fcte_36";
+const gapSm = "_gapSm_1fcte_40";
+const gapMd = "_gapMd_1fcte_44";
+const gapLg = "_gapLg_1fcte_48";
+const gapXl = "_gapXl_1fcte_52";
+const item = "_item_1fcte_56";
+const subgridRows = "_subgridRows_1fcte_132";
+const subgridColumns = "_subgridColumns_1fcte_137";
+const subgridBoth = "_subgridBoth_1fcte_142";
+const styles = {
+  grid,
+  columns2,
+  columns3,
+  columns4,
+  gapNone,
+  gapXs,
+  gapSm,
+  gapMd,
+  gapLg,
+  gapXl,
+  item,
+  subgridRows,
+  subgridColumns,
+  subgridBoth
+};
+export {
+  columns2,
+  columns3,
+  columns4,
+  styles as default,
+  gapLg,
+  gapMd,
+  gapNone,
+  gapSm,
+  gapXl,
+  gapXs,
+  grid,
+  item,
+  subgridBoth,
+  subgridColumns,
+  subgridRows
+};

package/dist/components/BentoGrid/index.cjs

@@ -0,0 +1,87 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const BentoGrid_module = require("./BentoGrid.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 gapClasses = {
+  none: BentoGrid_module.default.gapNone,
+  xs: BentoGrid_module.default.gapXs,
+  sm: BentoGrid_module.default.gapSm,
+  md: BentoGrid_module.default.gapMd,
+  lg: BentoGrid_module.default.gapLg,
+  xl: BentoGrid_module.default.gapXl
+};
+function getSpanVars(span, prefix) {
+  if (!span || span === 1) return {};
+  if (typeof span === "number") return { [`--${prefix}`]: span };
+  const vars = {};
+  if (span.base && span.base > 1) vars[`--${prefix}`] = span.base;
+  if (span.sm) vars[`--${prefix}-sm`] = span.sm;
+  if (span.md) vars[`--${prefix}-md`] = span.md;
+  if (span.lg) vars[`--${prefix}-lg`] = span.lg;
+  if (span.xl) vars[`--${prefix}-xl`] = span.xl;
+  return vars;
+}
+const BentoGrid = React__namespace.forwardRef(
+  function BentoGrid2({
+    children,
+    columns = 3,
+    gap = "md",
+    className,
+    style,
+    ...htmlProps
+  }, ref) {
+    const classes = [
+      BentoGrid_module.default.grid,
+      BentoGrid_module.default[`columns${columns}`],
+      gapClasses[gap],
+      className
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, ...htmlProps, className: classes, style, children });
+  }
+);
+const subgridClasses = {
+  rows: BentoGrid_module.default.subgridRows,
+  columns: BentoGrid_module.default.subgridColumns,
+  both: BentoGrid_module.default.subgridBoth
+};
+const BentoGridItem = React__namespace.forwardRef(
+  function BentoGridItem2({
+    children,
+    colSpan,
+    rowSpan,
+    subgrid,
+    className,
+    style,
+    ...htmlProps
+  }, ref) {
+    const spanVars = {
+      ...getSpanVars(colSpan, "bento-col-span"),
+      ...getSpanVars(rowSpan, "bento-row-span")
+    };
+    const hasVars = Object.keys(spanVars).length > 0;
+    const inlineStyle = hasVars ? { ...spanVars, ...style } : style;
+    const subgridClass = subgrid ? subgridClasses[subgrid === true ? "rows" : subgrid] : void 0;
+    const classes = [BentoGrid_module.default.item, subgridClass, className].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, ...htmlProps, className: classes, style: inlineStyle, children });
+  }
+);
+BentoGrid.Item = BentoGridItem;
+exports.BentoGrid = BentoGrid;

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

@@ -0,0 +1,43 @@
+import * as React from 'react';
+type SpanValue = 1 | 2 | 3;
+export interface ResponsiveSpan {
+    /** Default (mobile-first) */
+    base?: SpanValue;
+    /** ≥640px */
+    sm?: SpanValue;
+    /** ≥768px */
+    md?: SpanValue;
+    /** ≥1024px */
+    lg?: SpanValue;
+    /** ≥1280px */
+    xl?: SpanValue;
+}
+export interface BentoGridProps extends React.HTMLAttributes<HTMLDivElement> {
+    children?: React.ReactNode;
+    /** Number of columns (default: 3) — auto-collapses responsively */
+    columns?: 2 | 3 | 4;
+    /** Gap between grid items */
+    gap?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+}
+export interface BentoGridItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    children?: React.ReactNode;
+    /** Columns to span — number for all breakpoints, object for per-breakpoint */
+    colSpan?: SpanValue | ResponsiveSpan;
+    /** Rows to span — number for all breakpoints, object for per-breakpoint */
+    rowSpan?: SpanValue | ResponsiveSpan;
+    /**
+     * Enable CSS subgrid so children align to parent grid tracks.
+     * - `true` or `"rows"` — children align to parent row tracks
+     * - `"columns"` — children align to parent column tracks
+     * - `"both"` — children align to both row and column tracks
+     * Requires the item to span multiple rows/columns for visible effect.
+     */
+    subgrid?: boolean | 'rows' | 'columns' | 'both';
+}
+export declare const BentoGrid: BentoGridComponent;
+declare const BentoGridItem: React.ForwardRefExoticComponent<BentoGridItemProps & React.RefAttributes<HTMLDivElement>>;
+interface BentoGridComponent extends React.ForwardRefExoticComponent<BentoGridProps & React.RefAttributes<HTMLDivElement>> {
+    Item: typeof BentoGridItem;
+}
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/BentoGrid/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,KAAK,SAAS,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAE3B,MAAM,WAAW,cAAc;IAC7B,6BAA6B;IAC7B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,aAAa;IACb,EAAE,CAAC,EAAE,SAAS,CAAC;IACf,aAAa;IACb,EAAE,CAAC,EAAE,SAAS,CAAC;IACf,cAAc;IACd,EAAE,CAAC,EAAE,SAAS,CAAC;IACf,cAAc;IACd,EAAE,CAAC,EAAE,SAAS,CAAC;CAChB;AAED,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC1E,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,mEAAmE;IACnE,OAAO,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACpB,6BAA6B;IAC7B,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CACjD;AAED,MAAM,WAAW,kBAAmB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC9E,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,8EAA8E;IAC9E,OAAO,CAAC,EAAE,SAAS,GAAG,cAAc,CAAC;IACrC,2EAA2E;IAC3E,OAAO,CAAC,EAAE,SAAS,GAAG,cAAc,CAAC;IACrC;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,CAAC;CACjD;AAkCD,eAAO,MAAM,SAAS,EA2BjB,kBAAkB,CAAC;AAYxB,QAAA,MAAM,aAAa,2FAmClB,CAAC;AAMF,UAAU,kBACR,SAAQ,KAAK,CAAC,yBAAyB,CAAC,cAAc,GAAG,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;IAC7F,IAAI,EAAE,OAAO,aAAa,CAAC;CAC5B"}

package/dist/components/BentoGrid/index.js

@@ -0,0 +1,70 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import styles from "./BentoGrid.module.scss.js";
+const gapClasses = {
+  none: styles.gapNone,
+  xs: styles.gapXs,
+  sm: styles.gapSm,
+  md: styles.gapMd,
+  lg: styles.gapLg,
+  xl: styles.gapXl
+};
+function getSpanVars(span, prefix) {
+  if (!span || span === 1) return {};
+  if (typeof span === "number") return { [`--${prefix}`]: span };
+  const vars = {};
+  if (span.base && span.base > 1) vars[`--${prefix}`] = span.base;
+  if (span.sm) vars[`--${prefix}-sm`] = span.sm;
+  if (span.md) vars[`--${prefix}-md`] = span.md;
+  if (span.lg) vars[`--${prefix}-lg`] = span.lg;
+  if (span.xl) vars[`--${prefix}-xl`] = span.xl;
+  return vars;
+}
+const BentoGrid = React.forwardRef(
+  function BentoGrid2({
+    children,
+    columns = 3,
+    gap = "md",
+    className,
+    style,
+    ...htmlProps
+  }, ref) {
+    const classes = [
+      styles.grid,
+      styles[`columns${columns}`],
+      gapClasses[gap],
+      className
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsx("div", { ref, ...htmlProps, className: classes, style, children });
+  }
+);
+const subgridClasses = {
+  rows: styles.subgridRows,
+  columns: styles.subgridColumns,
+  both: styles.subgridBoth
+};
+const BentoGridItem = React.forwardRef(
+  function BentoGridItem2({
+    children,
+    colSpan,
+    rowSpan,
+    subgrid,
+    className,
+    style,
+    ...htmlProps
+  }, ref) {
+    const spanVars = {
+      ...getSpanVars(colSpan, "bento-col-span"),
+      ...getSpanVars(rowSpan, "bento-row-span")
+    };
+    const hasVars = Object.keys(spanVars).length > 0;
+    const inlineStyle = hasVars ? { ...spanVars, ...style } : style;
+    const subgridClass = subgrid ? subgridClasses[subgrid === true ? "rows" : subgrid] : void 0;
+    const classes = [styles.item, subgridClass, className].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsx("div", { ref, ...htmlProps, className: classes, style: inlineStyle, children });
+  }
+);
+BentoGrid.Item = BentoGridItem;
+export {
+  BentoGrid
+};