@divayth/brick-ui 0.0.0-stage → 0.0.2

package/dist/ui/Flex/constants.d.ts

@@ -0,0 +1,30 @@
+import { type Size } from "../../lib/sizes.js";
+export declare const ALIGN_ITEMS_SX: {
+    readonly stretch: "items-stretch";
+    readonly center: "items-center";
+    readonly start: "items-start";
+    readonly end: "items-end";
+};
+export declare const JUSTIFY_CONTENT_SX: {
+    readonly start: "justify-start";
+    readonly center: "justify-center";
+    readonly end: "justify-end";
+    readonly between: "justify-between";
+};
+export declare const DIRECTION_SX: {
+    readonly row: "flex-row";
+    readonly col: "flex-col";
+};
+export declare const GAP_SX: {
+    readonly none: "gap-0";
+    readonly xs: "gap-1";
+    readonly sm: "gap-2";
+    readonly md: "gap-4";
+    readonly lg: "gap-6";
+    readonly xl: "gap-8";
+};
+export type AlignItemsType = keyof typeof ALIGN_ITEMS_SX;
+export type JustifayContentType = keyof typeof JUSTIFY_CONTENT_SX;
+export type DirectionType = keyof typeof DIRECTION_SX;
+export type GapType = Size;
+//# sourceMappingURL=constants.d.ts.map

package/dist/ui/Flex/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/ui/Flex/constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAE/C,eAAO,MAAM,cAAc;;;;;CAKjB,CAAC;AAEX,eAAO,MAAM,kBAAkB;;;;;CAKrB,CAAC;AAEX,eAAO,MAAM,YAAY;;;CAGf,CAAC;AAEX,eAAO,MAAM,MAAM;;;;;;;CAOT,CAAC;AAEX,MAAM,MAAM,cAAc,GAAG,MAAM,OAAO,cAAc,CAAC;AAEzD,MAAM,MAAM,mBAAmB,GAAG,MAAM,OAAO,kBAAkB,CAAC;AAElE,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,YAAY,CAAC;AAEtD,MAAM,MAAM,OAAO,GAAG,IAAI,CAAC"}

package/dist/ui/Flex/constants.js

@@ -0,0 +1,27 @@
+const t = {
+  stretch: "items-stretch",
+  center: "items-center",
+  start: "items-start",
+  end: "items-end"
+}, e = {
+  start: "justify-start",
+  center: "justify-center",
+  end: "justify-end",
+  between: "justify-between"
+}, s = {
+  row: "flex-row",
+  col: "flex-col"
+}, n = {
+  none: "gap-0",
+  xs: "gap-1",
+  sm: "gap-2",
+  md: "gap-4",
+  lg: "gap-6",
+  xl: "gap-8"
+};
+export {
+  t as ALIGN_ITEMS_SX,
+  s as DIRECTION_SX,
+  n as GAP_SX,
+  e as JUSTIFY_CONTENT_SX
+};

package/dist/ui/Grid/Grid.d.ts

@@ -0,0 +1,6 @@
+export type { GridGap, GridItemProps, GridItemSize, GridRootProps, ResponsiveValue, } from "./Grid.types.js";
+export declare const Grid: {
+    Root: ({ columns, gap, rowGap, columnGap, align, justify, className, style, children, ...props }: import("./Grid.types.js").GridRootProps) => import("react").JSX.Element;
+    Item: ({ size, offset, order, align, className, style, children, ...props }: import("./Grid.types.js").GridItemProps) => import("react").JSX.Element;
+};
+//# sourceMappingURL=Grid.d.ts.map

package/dist/ui/Grid/Grid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../../src/ui/Grid/Grid.ts"],"names":[],"mappings":"AAGA,YAAY,EACV,OAAO,EACP,aAAa,EACb,YAAY,EACZ,aAAa,EACb,eAAe,GAChB,MAAM,iBAAiB,CAAC;AAEzB,eAAO,MAAM,IAAI;;;CAGhB,CAAC"}

package/dist/ui/Grid/Grid.js

@@ -0,0 +1,9 @@
+import { GridItem as o } from "./GridItem.js";
+import { GridRoot as r } from "./GridRoot.js";
+const i = {
+  Root: r,
+  Item: o
+};
+export {
+  i as Grid
+};

package/dist/ui/Grid/Grid.module.css.js

@@ -0,0 +1,11 @@
+const t = "_root_1l5eq_2", o = "_item_1l5eq_16", _ = "_fit_1l5eq_30", e = {
+  root: t,
+  item: o,
+  fit: _
+};
+export {
+  e as default,
+  _ as fit,
+  o as item,
+  t as root
+};

package/dist/ui/Grid/Grid.types.d.ts

@@ -0,0 +1,21 @@
+import type { ComponentProps } from "react";
+import type { AlignItemsType, JustifayContentType } from "../Flex/constants.js";
+import type { Size } from "../../lib/sizes.js";
+export type GridGap = Size | "none";
+export type ResponsiveValue<T> = T | Partial<Record<Size, T>>;
+export type GridItemSize = ResponsiveValue<number> | "fit" | "grow";
+export interface GridRootProps extends ComponentProps<"div"> {
+    columns?: number;
+    gap?: ResponsiveValue<GridGap>;
+    rowGap?: ResponsiveValue<GridGap>;
+    columnGap?: ResponsiveValue<GridGap>;
+    align?: AlignItemsType;
+    justify?: JustifayContentType;
+}
+export interface GridItemProps extends ComponentProps<"div"> {
+    size?: GridItemSize;
+    offset?: ResponsiveValue<number>;
+    order?: ResponsiveValue<number>;
+    align?: ResponsiveValue<AlignItemsType | "auto">;
+}
+//# sourceMappingURL=Grid.types.d.ts.map

package/dist/ui/Grid/Grid.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.types.d.ts","sourceRoot":"","sources":["../../../src/ui/Grid/Grid.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,KAAK,EAAE,cAAc,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAEhF,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAE/C,MAAM,MAAM,OAAO,GAAG,IAAI,GAAG,MAAM,CAAC;AAEpC,MAAM,MAAM,eAAe,CAAC,CAAC,IAAI,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC;AAE9D,MAAM,MAAM,YAAY,GAAG,eAAe,CAAC,MAAM,CAAC,GAAG,KAAK,GAAG,MAAM,CAAC;AAEpE,MAAM,WAAW,aAAc,SAAQ,cAAc,CAAC,KAAK,CAAC;IAC1D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,GAAG,CAAC,EAAE,eAAe,CAAC,OAAO,CAAC,CAAC;IAC/B,MAAM,CAAC,EAAE,eAAe,CAAC,OAAO,CAAC,CAAC;IAClC,SAAS,CAAC,EAAE,eAAe,CAAC,OAAO,CAAC,CAAC;IACrC,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,OAAO,CAAC,EAAE,mBAAmB,CAAC;CAC/B;AAED,MAAM,WAAW,aAAc,SAAQ,cAAc,CAAC,KAAK,CAAC;IAC1D,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,MAAM,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IACjC,KAAK,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IAChC,KAAK,CAAC,EAAE,eAAe,CAAC,cAAc,GAAG,MAAM,CAAC,CAAC;CAClD"}

package/dist/ui/Grid/GridItem.d.ts

@@ -0,0 +1,3 @@
+import type { GridItemProps } from "./Grid.types.js";
+export declare const GridItem: ({ size, offset, order, align, className, style, children, ...props }: GridItemProps) => import("react").JSX.Element;
+//# sourceMappingURL=GridItem.d.ts.map

package/dist/ui/Grid/GridItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GridItem.d.ts","sourceRoot":"","sources":["../../../src/ui/Grid/GridItem.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAarD,eAAO,MAAM,QAAQ,GAAI,sEAStB,aAAa,gCAyBf,CAAC"}

package/dist/ui/Grid/GridItem.js

@@ -0,0 +1,48 @@
+import { jsx as g } from "react/jsx-runtime";
+import p from "clsx";
+import { getResponsiveCssVariables as e } from "./utils.js";
+import o from "./Grid.module.css.js";
+const u = {
+  auto: "auto",
+  stretch: "stretch",
+  center: "center",
+  start: "flex-start",
+  end: "flex-end"
+}, G = ({
+  size: r = "grow",
+  offset: s = 0,
+  order: m = 0,
+  align: a = "auto",
+  className: c,
+  style: d,
+  children: f,
+  ...n
+}) => {
+  const i = r === "fit", l = i ? 1 : r;
+  return /* @__PURE__ */ g(
+    "div",
+    {
+      ...n,
+      className: p(o.item, i && o.fit, c),
+      style: {
+        ...e("grid-item-size", l),
+        ...e(
+          "grid-item-offset",
+          s,
+          (t) => t === 0 ? "auto" : t + 1
+        ),
+        ...e("grid-item-order", m),
+        ...e(
+          "grid-item-align",
+          a,
+          (t) => u[t]
+        ),
+        ...d
+      },
+      children: f
+    }
+  );
+};
+export {
+  G as GridItem
+};

package/dist/ui/Grid/GridRoot.d.ts

@@ -0,0 +1,3 @@
+import type { GridRootProps } from "./Grid.types.js";
+export declare const GridRoot: ({ columns, gap, rowGap, columnGap, align, justify, className, style, children, ...props }: GridRootProps) => import("react").JSX.Element;
+//# sourceMappingURL=GridRoot.d.ts.map

package/dist/ui/Grid/GridRoot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GridRoot.d.ts","sourceRoot":"","sources":["../../../src/ui/Grid/GridRoot.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAGV,aAAa,EACd,MAAM,iBAAiB,CAAC;AAgFzB,eAAO,MAAM,QAAQ,GAAI,2FAWtB,aAAa,gCA+Bf,CAAC"}

package/dist/ui/Grid/GridRoot.js

@@ -0,0 +1,71 @@
+import { jsx as h } from "react/jsx-runtime";
+import { Children as w, isValidElement as C, cloneElement as S } from "react";
+import b from "clsx";
+import { getResponsiveCssVariables as p, GRID_GAP_VALUES as d } from "./utils.js";
+import { GridItem as z } from "./GridItem.js";
+import I from "./Grid.module.css.js";
+const v = {
+  stretch: "stretch",
+  center: "center",
+  start: "flex-start",
+  end: "flex-end"
+}, y = {
+  start: "flex-start",
+  center: "center",
+  end: "flex-end",
+  between: "space-between"
+}, g = (t) => t === "grow" || t === "fit" ? 0 : typeof t == "number" ? t : t?.md ?? 1, G = (t, a) => {
+  const m = w.toArray(t), n = m.filter(
+    (e) => C(e) && e.type === z
+  );
+  if (!n.some(({ props: e }) => e.size === "fit" || e.size === "grow" ? !0 : !Number.isInteger(g(e.size))))
+    return { children: t, templateColumns: void 0 };
+  const s = n.filter(
+    ({ props: e }) => e.size === "grow"
+  ).length, u = n.reduce(
+    (e, { props: f }) => e + g(f.size),
+    0
+  ), o = Math.max(s, a - u), c = s > 0 ? o / s : 0, r = [], l = m.map((e) => !C(e) || e.type !== z ? e : (e.props.size === "fit" ? r.push("max-content") : e.props.size === "grow" ? r.push(`minmax(0, ${c}fr)`) : r.push(`minmax(0, ${g(e.props.size)}fr)`), S(e, { size: 1 })));
+  return s === 0 && o > 0 && r.push(`minmax(0, ${o}fr)`), {
+    children: l,
+    templateColumns: r.join(" ")
+  };
+}, j = ({
+  columns: t = 12,
+  gap: a = "sm",
+  rowGap: m,
+  columnGap: n,
+  align: x = "stretch",
+  justify: s = "start",
+  className: u,
+  style: o,
+  children: c,
+  ...r
+}) => {
+  const l = Math.max(1, t), e = G(c, l), f = {
+    "--grid-columns": l,
+    "--grid-align": v[x],
+    "--grid-justify": y[s],
+    gridTemplateColumns: e.templateColumns,
+    ...p(
+      "grid-gap",
+      a,
+      (i) => d[i]
+    ),
+    ...p(
+      "grid-row-gap",
+      m,
+      (i) => d[i]
+    ),
+    ...p(
+      "grid-column-gap",
+      n,
+      (i) => d[i]
+    ),
+    ...o
+  };
+  return /* @__PURE__ */ h("div", { ...r, className: b(I.root, u), style: f, children: e.children });
+};
+export {
+  j as GridRoot
+};

package/dist/ui/Grid/utils.d.ts

@@ -0,0 +1,6 @@
+import type { CSSProperties } from "react";
+import type { GridGap, ResponsiveValue } from "./Grid.types.js";
+export type GridCssVariables = CSSProperties & Record<`--${string}`, string | number | undefined>;
+export declare const GRID_GAP_VALUES: Record<GridGap, string>;
+export declare const getResponsiveCssVariables: <T>(name: string, value: ResponsiveValue<T> | undefined, transform?: (entry: T) => string | number) => GridCssVariables;
+//# sourceMappingURL=utils.d.ts.map

package/dist/ui/Grid/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/ui/Grid/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,OAAO,KAAK,EAAE,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAGhE,MAAM,MAAM,gBAAgB,GAAG,aAAa,GAC1C,MAAM,CAAC,KAAK,MAAM,EAAE,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC,CAAC;AAIrD,eAAO,MAAM,eAAe,EAAE,MAAM,CAAC,OAAO,EAAE,MAAM,CAOnD,CAAC;AAEF,eAAO,MAAM,yBAAyB,GAAI,CAAC,EACzC,MAAM,MAAM,EACZ,OAAO,eAAe,CAAC,CAAC,CAAC,GAAG,SAAS,EACrC,YAAW,CAAC,KAAK,EAAE,CAAC,KAAK,MAAM,GAAG,MAAiC,KAClE,gBAeF,CAAC"}

package/dist/ui/Grid/utils.js

@@ -0,0 +1,21 @@
+const c = ["xs", "sm", "md", "lg", "xl"], i = {
+  none: "0rem",
+  xs: "0.25rem",
+  sm: "0.5rem",
+  md: "1rem",
+  lg: "1.5rem",
+  xl: "2rem"
+}, d = (s, e, n = (r) => String(r)) => {
+  if (e === void 0) return {};
+  if (typeof e != "object" || e === null)
+    return { [`--${s}-base`]: n(e) };
+  const r = e;
+  return c.reduce((t, o) => {
+    const m = r[o];
+    return m !== void 0 && (t[`--${s}-${o}`] = n(m)), t;
+  }, {});
+};
+export {
+  i as GRID_GAP_VALUES,
+  d as getResponsiveCssVariables
+};

package/dist/ui/IconButton/IconButton.d.ts

@@ -0,0 +1,19 @@
+import type { AriaAttributes, ComponentPropsWithRef, ElementType, ReactNode } from 'react';
+import type { Size } from '../../lib/sizes.js';
+export type IconButtonColor = 'primary' | 'secondary' | 'danger';
+type IconButtonOwnProps<T extends ElementType> = {
+    color?: IconButtonColor;
+    size?: Size;
+    isLoading?: boolean;
+    disabled?: boolean;
+    type?: 'button' | 'submit' | 'reset';
+    component?: T;
+    children?: ReactNode;
+    className?: string;
+    'aria-disabled'?: AriaAttributes['aria-disabled'];
+    'aria-busy'?: AriaAttributes['aria-busy'];
+};
+export type IconButtonProps<T extends ElementType = 'button'> = IconButtonOwnProps<T> & Omit<ComponentPropsWithRef<T>, keyof IconButtonOwnProps<T>>;
+export declare const IconButton: <T extends ElementType = "button">({ color, size, disabled, isLoading, component, children, className, type, onClick, onKeyDown, tabIndex, "aria-disabled": ariaDisabled, "aria-busy": ariaBusy, ...props }: IconButtonProps<T>) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=IconButton.d.ts.map

package/dist/ui/IconButton/IconButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../src/ui/IconButton/IconButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,qBAAqB,EAAE,WAAW,EAA6B,SAAS,EAAE,MAAM,OAAO,CAAC;AAEtH,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAI/C,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,WAAW,GAAG,QAAQ,CAAC;AAEjE,KAAK,kBAAkB,CAAC,CAAC,SAAS,WAAW,IAAI;IAC/C,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC,SAAS,CAAC,EAAE,CAAC,CAAC;IACd,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,cAAc,CAAC,eAAe,CAAC,CAAC;IAClD,WAAW,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC,CAAC;CAC3C,CAAC;AACF,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,WAAW,GAAG,QAAQ,IAC1D,kBAAkB,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE,MAAM,kBAAkB,CAAC,CAAC,CAAC,CAAC,CAAC;AAEtF,eAAO,MAAM,UAAU,GAAI,CAAC,SAAS,WAAW,GAAG,QAAQ,EAAE,0KAI1D,eAAe,CAAC,CAAC,CAAC,gCA8BpB,CAAC"}

package/dist/ui/IconButton/IconButton.js

@@ -0,0 +1,56 @@
+"use client";
+import { jsxs as g, jsx as l } from "react/jsx-runtime";
+import k from "clsx";
+import { CircularLoading as N } from "../CircularLoading/CircularLoading.js";
+import a from "./IconButton.module.css.js";
+const P = ({
+  color: m = "primary",
+  size: n = "md",
+  disabled: p = !1,
+  isLoading: r = !1,
+  component: c,
+  children: d,
+  className: u,
+  type: b = "button",
+  onClick: f,
+  onKeyDown: y,
+  tabIndex: h,
+  "aria-disabled": x,
+  "aria-busy": C,
+  ...D
+}) => {
+  const s = c || "button", o = p || r, i = s === "button", e = typeof s != "string";
+  return /* @__PURE__ */ g(
+    s,
+    {
+      ...D,
+      type: i || e ? b : void 0,
+      disabled: i || e ? o : void 0,
+      "aria-disabled": o || x,
+      "aria-busy": r || C,
+      tabIndex: !i && o ? -1 : h,
+      className: k(a.root, a[m], a[n], { [a.disabled]: o }, u),
+      onClick: (t) => {
+        if (o) {
+          t.preventDefault(), t.stopPropagation();
+          return;
+        }
+        f?.(t);
+      },
+      onKeyDown: (t) => {
+        if (o && (t.key === "Enter" || t.key === " ")) {
+          t.preventDefault(), t.stopPropagation();
+          return;
+        }
+        y?.(t);
+      },
+      children: [
+        /* @__PURE__ */ l("span", { className: a.content, style: { opacity: r ? 0 : 1 }, children: d }),
+        r && /* @__PURE__ */ l(N, { size: n, style: { width: "1em", height: "1em" }, className: a.loading, "aria-hidden": "true" })
+      ]
+    }
+  );
+};
+export {
+  P as IconButton
+};

package/dist/ui/IconButton/IconButton.module.css.js

@@ -0,0 +1,29 @@
+const o = "_root_1o2bt_2", t = "_xs_1o2bt_21", _ = "_sm_1o2bt_25", n = "_md_1o2bt_29", s = "_lg_1o2bt_33", c = "_xl_1o2bt_37", d = "_primary_1o2bt_41", a = "_secondary_1o2bt_49", r = "_danger_1o2bt_58", b = "_disabled_1o2bt_67", e = "_content_1o2bt_72", l = "_loading_1o2bt_80", g = {
+  root: o,
+  xs: t,
+  sm: _,
+  md: n,
+  lg: s,
+  xl: c,
+  primary: d,
+  secondary: a,
+  danger: r,
+  disabled: b,
+  content: e,
+  loading: l
+};
+export {
+  e as content,
+  r as danger,
+  g as default,
+  b as disabled,
+  s as lg,
+  l as loading,
+  n as md,
+  d as primary,
+  o as root,
+  a as secondary,
+  _ as sm,
+  c as xl,
+  t as xs
+};

package/dist/ui/ProgressBar/ProgressBar.d.ts

@@ -0,0 +1,12 @@
+export interface ProgressBarProps {
+    current: {
+        value: number;
+        label?: string;
+    };
+    max: {
+        value: number;
+        label?: string;
+    };
+}
+export declare const ProgressBar: ({ current, max }: ProgressBarProps) => import("react").JSX.Element;
+//# sourceMappingURL=ProgressBar.d.ts.map

package/dist/ui/ProgressBar/ProgressBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../../src/ui/ProgressBar/ProgressBar.tsx"],"names":[],"mappings":"AAKA,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC3C,GAAG,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CACxC;AAED,eAAO,MAAM,WAAW,GAAI,kBAAkB,gBAAgB,gCA+B7D,CAAC"}

package/dist/ui/ProgressBar/ProgressBar.js

@@ -0,0 +1,34 @@
+import { jsxs as s, jsx as a } from "react/jsx-runtime";
+import t from "clsx";
+import { Flex as r } from "../Flex/Flex.js";
+import { Text as o } from "../Text/Text.js";
+const b = ({ current: e, max: l }) => {
+  const i = Number.isFinite(e.value) && Number.isFinite(l.value) && l.value > 0 ? Math.min(100, Math.max(0, e.value * 100 / l.value)) : 0;
+  return /* @__PURE__ */ s(r, { direction: "col", className: "w-full", gap: "xs", children: [
+    /* @__PURE__ */ s(r, { justifyContent: "between", children: [
+      e.label && /* @__PURE__ */ a(o, { size: "sm", className: "text-gray-1", children: e.label }),
+      l.label && /* @__PURE__ */ a(o, { size: "sm", className: "text-gray-1", children: l.label })
+    ] }),
+    /* @__PURE__ */ a(
+      r,
+      {
+        className: "gap-0 bg-gray-2 rounded-full overflow-hidden",
+        role: "progressbar",
+        "aria-label": e.label,
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        "aria-valuenow": Math.round(i),
+        children: /* @__PURE__ */ a(
+          r,
+          {
+            className: t("gap-0 h-1.5 rounded-full", e.value > l.value ? "bg-error-1" : "bg-primary-1"),
+            style: { width: `${i}%` }
+          }
+        )
+      }
+    )
+  ] });
+};
+export {
+  b as ProgressBar
+};

package/dist/ui/Skeleton/Skeleton.d.ts

@@ -0,0 +1,8 @@
+export interface SkeletonProps {
+    width?: string | number;
+    height?: string | number;
+    borderRadius?: string | number;
+    className?: string;
+}
+export declare const Skeleton: ({ width, height, borderRadius, className }: SkeletonProps) => import("react").JSX.Element;
+//# sourceMappingURL=Skeleton.d.ts.map

package/dist/ui/Skeleton/Skeleton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../src/ui/Skeleton/Skeleton.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,aAAa;IAC5B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,QAAQ,GAAI,4CAAqD,aAAa,gCAQ1F,CAAC"}

package/dist/ui/Skeleton/Skeleton.js

@@ -0,0 +1,14 @@
+import { jsx as m } from "react/jsx-runtime";
+import i from "clsx";
+import c from "./Skeleton.module.css.js";
+const p = ({ width: o, height: r = 16, borderRadius: t = 4, className: e }) => {
+  const s = {
+    width: o,
+    height: r,
+    borderRadius: t
+  };
+  return /* @__PURE__ */ m("div", { "aria-hidden": "true", className: i(c.root, e), style: s });
+};
+export {
+  p as Skeleton
+};

package/dist/ui/Skeleton/Skeleton.module.css.js

@@ -0,0 +1,7 @@
+const o = "_root_1rkuv_1", t = {
+  root: o
+};
+export {
+  t as default,
+  o as root
+};

package/dist/ui/Text/Text.d.ts

@@ -0,0 +1,30 @@
+import type { ComponentProps } from "react";
+declare const WEIGHTS_MAP: {
+    readonly thin: "font-thin";
+    readonly extralight: "font-extralight";
+    readonly light: "font-light";
+    readonly normal: "font-normal";
+    readonly medium: "font-medium";
+    readonly semibold: "font-semibold";
+    readonly bold: "font-bold";
+    readonly extrabold: "font-extrabold";
+    readonly black: "font-black";
+};
+declare const FONT_SIZES: {
+    readonly xs: "text-xs";
+    readonly sm: "text-sm";
+    readonly md: "text-base";
+    readonly lg: "text-lg";
+    readonly xl: "text-xl";
+    readonly "2xl": "text-2xl";
+    readonly "3xl": "text-3xl";
+    readonly "4xl": "text-4xl";
+    readonly inherit: "";
+};
+export interface TextProps extends ComponentProps<"span"> {
+    size?: keyof typeof FONT_SIZES;
+    weight?: keyof typeof WEIGHTS_MAP;
+}
+export declare const Text: ({ children, weight, size, className, ...props }: TextProps) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=Text.d.ts.map

package/dist/ui/Text/Text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../src/ui/Text/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAI5C,QAAA,MAAM,WAAW;;;;;;;;;;CAUP,CAAC;AAEX,QAAA,MAAM,UAAU;;;;;;;;;;CAUN,CAAC;AAEX,MAAM,WAAW,SAAU,SAAQ,cAAc,CAAC,MAAM,CAAC;IACvD,IAAI,CAAC,EAAE,MAAM,OAAO,UAAU,CAAC;IAC/B,MAAM,CAAC,EAAE,MAAM,OAAO,WAAW,CAAC;CACnC;AAED,eAAO,MAAM,IAAI,GAAI,iDAMlB,SAAS,gCASX,CAAC"}

package/dist/ui/Text/Text.js

@@ -0,0 +1,39 @@
+import { jsx as n } from "react/jsx-runtime";
+import { twMerge as m } from "tailwind-merge";
+const r = {
+  thin: "font-thin",
+  extralight: "font-extralight",
+  light: "font-light",
+  normal: "font-normal",
+  medium: "font-medium",
+  semibold: "font-semibold",
+  bold: "font-bold",
+  extrabold: "font-extrabold",
+  black: "font-black"
+}, i = {
+  xs: "text-xs",
+  sm: "text-sm",
+  md: "text-base",
+  lg: "text-lg",
+  xl: "text-xl",
+  "2xl": "text-2xl",
+  "3xl": "text-3xl",
+  "4xl": "text-4xl",
+  inherit: ""
+}, f = ({
+  children: t,
+  weight: l = "normal",
+  size: o = "md",
+  className: x,
+  ...e
+}) => /* @__PURE__ */ n(
+  "span",
+  {
+    className: m(i[o], r[l], x),
+    ...e,
+    children: t
+  }
+);
+export {
+  f as Text
+};

package/dist/ui/index.d.ts

@@ -0,0 +1,13 @@
+export { Text, type TextProps } from "./Text/Text.js";
+export { Flex, type FlexProps } from "./Flex/Flex.js";
+export { Button, type ButtonProps } from "./Button/Button.js";
+export { Card, type CardProps } from "./Card/Card.js";
+export { Chip, type ChipProps, type ChipColor, type ChipVariant, } from "./Chip/Chip.js";
+export { Skeleton, type SkeletonProps } from "./Skeleton/Skeleton.js";
+export { IconButton, type IconButtonProps, type IconButtonColor, } from "./IconButton/IconButton.js";
+export { CircularLoading, type CircularLoadingProps, } from "./CircularLoading/CircularLoading.js";
+export { ProgressBar, type ProgressBarProps, } from "./ProgressBar/ProgressBar.js";
+export { Accordion, type AccordionProps } from "./Accordion/Accordion.js";
+export { Alert, type AlertProps } from "./Alert/Alert.js";
+export { Grid, type GridGap, type GridItemProps, type GridItemSize, type GridRootProps, type ResponsiveValue, } from "./Grid/Grid.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/ui/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ui/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,gBAAgB,CAAC;AACtD,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,gBAAgB,CAAC;AACtD,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAC9D,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,gBAAgB,CAAC;AACtD,OAAO,EACL,IAAI,EACJ,KAAK,SAAS,EACd,KAAK,SAAS,EACd,KAAK,WAAW,GACjB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,wBAAwB,CAAC;AACtE,OAAO,EACL,UAAU,EACV,KAAK,eAAe,EACpB,KAAK,eAAe,GACrB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EACL,eAAe,EACf,KAAK,oBAAoB,GAC1B,MAAM,sCAAsC,CAAC;AAC9C,OAAO,EACL,WAAW,EACX,KAAK,gBAAgB,GACtB,MAAM,8BAA8B,CAAC;AACtC,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAC1E,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC1D,OAAO,EACL,IAAI,EACJ,KAAK,OAAO,EACZ,KAAK,aAAa,EAClB,KAAK,YAAY,EACjB,KAAK,aAAa,EAClB,KAAK,eAAe,GACrB,MAAM,gBAAgB,CAAC"}

package/package.json

@@ -1,6 +1,55 @@
 {
   "name": "@divayth/brick-ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.0.2",
+  "description": "React components for Brick UI",
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./styles.css": "./dist/styles.css"
+  },
+  "scripts": {
+    "build": "vite build && tsc -p tsconfig.build.json",
+    "typecheck": "tsc --noEmit",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "prepack": "npm run build"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "dependencies": {
+    "clsx": "^2.1.1",
+    "lucide-react": "^1.57.0",
+    "tailwind-merge": "^3.7.0"
+  },
+  "devDependencies": {
+    "@fontsource-variable/inter": "^5.3.0",
+    "@storybook/addon-docs": "^10.3.6",
+    "@storybook/react-vite": "^10.3.6",
+    "@tailwindcss/vite": "^4.0.0",
+    "@types/node": "^22.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vitejs/plugin-react": "^5.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "rollup-plugin-preserve-directives": "^0.4.0",
+    "storybook": "^10.3.6",
+    "tailwindcss": "^4.0.0",
+    "typescript": "^5.0.0",
+    "vite": "^7.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}