tawuniya 0.6.0 → 0.7.0

package/README.md

@@ -1,3 +1,91 @@
+# Tawuniya Component Library
+
+React component library, published as tree-shakeable ES modules.
+
+## Installation
+
+```bash
+npm install tawuniya
+```
+
+## Usage
+
+```tsx
+// Styles are opt-in — import them once, at your app entry.
+import "tawuniya/styles.css";
+
+import { Button, Typography } from "tawuniya";
+import { useDebounce } from "tawuniya/hooks";
+```
+
+Only what you import is bundled. Deep imports are also available if you prefer
+to bypass the barrel entirely:
+
+```tsx
+import Button from "tawuniya/components/ui/button";
+import useDebounce from "tawuniya/hooks/use-debounce";
+```
+
+## ⚠️ Breaking change in 0.7.0
+
+**`tawuniya/styles.css` is no longer imported for you.** Previously the
+component barrel did `import "@/styles.css"` at the top, so the stylesheet
+arrived as a side effect of importing any component. That single line marked the
+barrel as side-effectful and prevented bundlers from tree-shaking it at all.
+
+Add this once at your application entry point:
+
+```tsx
+import "tawuniya/styles.css";
+```
+
+Without it, components render unstyled. Nothing else in the public API changed.
+
+## Import cost
+
+Measured as the gzipped payload a consumer downloads, with `react`/`react-dom`
+external:
+
+| You import | 0.6.0 | 0.7.0 | Change |
+| --- | --- | --- | --- |
+| `Button` | 1,035 kB | 10.9 kB | **−98.9%** |
+| `Button` + `Typography` | 1,035 kB | 11.2 kB | **−98.9%** |
+| `Icon` | 1,035 kB | 18.8 kB | **−98.2%** |
+| the entire barrel | 1,113 kB | 404 kB | **−63.7%** |
+
+Three things get you there:
+
+1. **Dependencies are external.** `recharts`, `moment`, `framer-motion`,
+   `embla`, Radix and friends are no longer inlined into the published bundle,
+   so your bundler dedupes and tree-shakes them itself.
+2. **One output module per source module** (`preserveModules`), plus
+   `"sideEffects"` in `package.json`, so a bundler can drop everything you don't
+   reference.
+3. **Icons load on demand.** The ~1,180 bundled SVGs used to be eagerly inlined
+   (~2.3 MB) into a runtime `icons[name]` lookup, which no bundler can shake.
+   They are now separate chunks fetched only when an icon actually renders.
+
+### Icons render asynchronously
+
+`<Icon />` resolves its SVG through a dynamic import, so an icon appears on the
+tick after its chunk arrives. Pass `fallback` to reserve space while it loads:
+
+```tsx
+<Icon name="document-download" fallback={<span className="size-6" />} />
+```
+
+## Guarding against regressions
+
+```bash
+npm run size
+```
+
+Bundles representative entry points against `dist/` and fails if the gzipped
+import cost exceeds budget — this is what catches a new eager glob or a
+top-level side effect before it ships.
+
+---
+
 # React + TypeScript + Vite
 
 This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

package/dist/components/base/alert-dialog.d.ts

@@ -0,0 +1,15 @@
+import { ButtonProps } from '../ui/button';
+import * as React from "react";
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+declare function AlertDialog({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Root>): React.JSX.Element;
+declare function AlertDialogTrigger({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>): React.JSX.Element;
+declare function AlertDialogPortal({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Portal>): React.JSX.Element;
+declare function AlertDialogOverlay({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>): React.JSX.Element;
+declare function AlertDialogContent({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Content>): React.JSX.Element;
+declare function AlertDialogHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function AlertDialogFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function AlertDialogTitle({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Title>): React.JSX.Element;
+declare function AlertDialogDescription({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Description>): React.JSX.Element;
+declare function AlertDialogAction({ className, variant, size, rounded, shadow, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Action> & ButtonProps): React.JSX.Element;
+declare function AlertDialogCancel({ className, variant, size, rounded, shadow, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Cancel> & ButtonProps): React.JSX.Element;
+export { AlertDialog, AlertDialogPortal, AlertDialogOverlay, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, };

package/dist/components/base/alert-dialog.js

@@ -0,0 +1,166 @@
+import { jsx as e, jsxs as c } from "react/jsx-runtime";
+import "react";
+import * as o from "@radix-ui/react-alert-dialog";
+import { cn as l } from "../../lib/utils.js";
+import { buttonVariants as d } from "../../lib/variants.js";
+function A({
+  ...t
+}) {
+  return /* @__PURE__ */ e(o.Root, { "data-slot": "alert-dialog", ...t });
+}
+function D({
+  ...t
+}) {
+  return /* @__PURE__ */ e(o.Trigger, { "data-slot": "alert-dialog-trigger", ...t });
+}
+function g({
+  ...t
+}) {
+  return /* @__PURE__ */ e(o.Portal, { "data-slot": "alert-dialog-portal", ...t });
+}
+function u({
+  className: t,
+  ...a
+}) {
+  return /* @__PURE__ */ e(
+    o.Overlay,
+    {
+      "data-slot": "alert-dialog-overlay",
+      className: l(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        t
+      ),
+      ...a
+    }
+  );
+}
+function b({
+  className: t,
+  ...a
+}) {
+  return /* @__PURE__ */ c(g, { children: [
+    /* @__PURE__ */ e(u, {}),
+    /* @__PURE__ */ e(
+      o.Content,
+      {
+        "data-slot": "alert-dialog-content",
+        className: l(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border border-transparent p-6 shadow-lg duration-200 sm:max-w-lg",
+          t
+        ),
+        ...a
+      }
+    )
+  ] });
+}
+function v({
+  className: t,
+  ...a
+}) {
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      "data-slot": "alert-dialog-header",
+      className: l("flex flex-col gap-2 text-center sm:text-left", t),
+      ...a
+    }
+  );
+}
+function N({
+  className: t,
+  ...a
+}) {
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      "data-slot": "alert-dialog-footer",
+      className: l(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        t
+      ),
+      ...a
+    }
+  );
+}
+function w({
+  className: t,
+  ...a
+}) {
+  return /* @__PURE__ */ e(
+    o.Title,
+    {
+      "data-slot": "alert-dialog-title",
+      className: l("text-lg font-semibold", t),
+      ...a
+    }
+  );
+}
+function y({
+  className: t,
+  ...a
+}) {
+  return /* @__PURE__ */ e(
+    o.Description,
+    {
+      "data-slot": "alert-dialog-description",
+      className: l("text-muted-foreground text-sm", t),
+      ...a
+    }
+  );
+}
+function z({
+  className: t,
+  variant: a,
+  size: r,
+  rounded: n,
+  shadow: i,
+  ...s
+}) {
+  return /* @__PURE__ */ e(
+    o.Action,
+    {
+      className: l(
+        d({ variant: a, size: r, rounded: n, shadow: i }),
+        t
+      ),
+      ...s
+    }
+  );
+}
+function C({
+  className: t,
+  variant: a,
+  size: r,
+  rounded: n,
+  shadow: i,
+  ...s
+}) {
+  return /* @__PURE__ */ e(
+    o.Cancel,
+    {
+      className: l(
+        d({
+          variant: a ?? "outline",
+          size: r,
+          rounded: n,
+          shadow: i
+        }),
+        t
+      ),
+      ...s
+    }
+  );
+}
+export {
+  A as AlertDialog,
+  z as AlertDialogAction,
+  C as AlertDialogCancel,
+  b as AlertDialogContent,
+  y as AlertDialogDescription,
+  N as AlertDialogFooter,
+  v as AlertDialogHeader,
+  u as AlertDialogOverlay,
+  g as AlertDialogPortal,
+  w as AlertDialogTitle,
+  D as AlertDialogTrigger
+};

package/dist/components/base/calendar.d.ts

@@ -0,0 +1,8 @@
+import { DayButton, DayPicker } from 'react-day-picker';
+import { default as Button } from '../ui/button';
+import * as React from "react";
+declare const Calendar: ({ className, classNames, showOutsideDays, captionLayout, buttonVariant, formatters, components, ...props }: React.ComponentProps<typeof DayPicker> & {
+    buttonVariant?: React.ComponentProps<typeof Button>["variant"];
+}) => React.JSX.Element;
+declare function CalendarDayButton({ className, day, modifiers, ...props }: React.ComponentProps<typeof DayButton>): React.JSX.Element;
+export { Calendar, CalendarDayButton };

package/dist/components/base/calendar.js

@@ -0,0 +1,176 @@
+import { jsx as n } from "react/jsx-runtime";
+import * as g from "react";
+import { ChevronLeftIcon as b, ChevronRightIcon as w, ChevronDownIcon as _ } from "lucide-react";
+import { getDefaultClassNames as f, DayPicker as h } from "react-day-picker";
+import { cn as e } from "../../lib/utils.js";
+import y from "../ui/button.js";
+import { buttonVariants as m } from "../../lib/variants.js";
+const R = ({
+  className: c,
+  classNames: i,
+  showOutsideDays: r = !0,
+  captionLayout: l = "label",
+  buttonVariant: s = "ghost",
+  formatters: u,
+  components: p,
+  ...x
+}) => {
+  const t = f();
+  return /* @__PURE__ */ n(
+    h,
+    {
+      showOutsideDays: r,
+      className: e(
+        "bg-card group/calendar p-3 [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
+        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
+        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
+        c
+      ),
+      captionLayout: l,
+      formatters: {
+        formatMonthDropdown: (a) => a.toLocaleString("default", { month: "short" }),
+        ...u
+      },
+      classNames: {
+        root: e("w-fit", t.root),
+        months: e(
+          "flex gap-4 flex-col md:flex-row relative",
+          t.months
+        ),
+        month: e("flex flex-col w-full gap-4", t.month),
+        nav: e(
+          "flex items-center gap-1 w-full absolute top-0 z-10 inset-x-0 justify-between",
+          t.nav
+        ),
+        button_previous: e(
+          m({ variant: s }),
+          "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
+          t.button_previous
+        ),
+        button_next: e(
+          m({ variant: s }),
+          "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
+          t.button_next
+        ),
+        month_caption: e(
+          "flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)",
+          t.month_caption
+        ),
+        dropdowns: e(
+          "w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5",
+          t.dropdowns
+        ),
+        dropdown_root: e(
+          "relative z-10 has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md",
+          t.dropdown_root
+        ),
+        dropdown: e("absolute inset-0 opacity-0", t.dropdown),
+        caption_label: e(
+          "select-none font-medium",
+          l === "label" ? "text-sm" : "rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5",
+          t.caption_label
+        ),
+        table: "w-full border-collapse",
+        weekdays: e("flex", t.weekdays),
+        weekday: e(
+          "text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none",
+          t.weekday
+        ),
+        week: e("flex w-full mt-2", t.week),
+        week_number_header: e(
+          "select-none w-(--cell-size)",
+          t.week_number_header
+        ),
+        week_number: e(
+          "text-[0.8rem] select-none text-muted-foreground",
+          t.week_number
+        ),
+        day: e(
+          "relative w-full h-full p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none",
+          t.day
+        ),
+        range_start: e(
+          "rounded-l-md bg-accent",
+          t.range_start
+        ),
+        range_middle: e("rounded-none", t.range_middle),
+        range_end: e("rounded-r-md bg-accent", t.range_end),
+        today: e(
+          "bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none",
+          t.today
+        ),
+        outside: e(
+          "text-muted-foreground aria-selected:text-muted-foreground",
+          t.outside
+        ),
+        disabled: e(
+          "text-muted-foreground opacity-50",
+          t.disabled
+        ),
+        hidden: e("invisible", t.hidden),
+        ...i
+      },
+      components: {
+        Root: ({ className: a, rootRef: d, ...o }) => /* @__PURE__ */ n(
+          "div",
+          {
+            "data-slot": "calendar",
+            ref: d,
+            className: e(a),
+            ...o
+          }
+        ),
+        Chevron: ({ className: a, orientation: d, ...o }) => d === "left" ? /* @__PURE__ */ n(
+          b,
+          {
+            className: e("size-4 rtl:rotate-180", a),
+            ...o
+          }
+        ) : d === "right" ? /* @__PURE__ */ n(
+          w,
+          {
+            className: e("size-4 rtl:rotate-180", a),
+            ...o
+          }
+        ) : /* @__PURE__ */ n(_, { className: e("size-4", a), ...o }),
+        DayButton: v,
+        WeekNumber: ({ children: a, ...d }) => /* @__PURE__ */ n("td", { ...d, children: /* @__PURE__ */ n("div", { className: "flex size-(--cell-size) items-center justify-center text-center", children: a }) }),
+        ...p
+      },
+      ...x
+    }
+  );
+};
+function v({
+  className: c,
+  day: i,
+  modifiers: r,
+  ...l
+}) {
+  const s = f(), u = g.useRef(null);
+  return g.useEffect(() => {
+    r.focused && u.current?.focus();
+  }, [r.focused]), /* @__PURE__ */ n(
+    y,
+    {
+      ref: u,
+      variant: "ghost",
+      size: "icon",
+      "data-day": i.date.toLocaleDateString(),
+      "data-selected-single": r.selected && !r.range_start && !r.range_end && !r.range_middle,
+      "data-range-start": r.range_start,
+      "data-range-end": r.range_end,
+      "data-range-middle": r.range_middle,
+      className: e(
+        "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70",
+        s.day,
+        c
+      ),
+      ...l
+    }
+  );
+}
+export {
+  R as Calendar,
+  v as CalendarDayButton
+};

package/dist/components/base/chart.d.ts

@@ -0,0 +1,44 @@
+import { TooltipValueType } from 'recharts';
+import * as React from "react";
+import * as RechartsPrimitive from "recharts";
+declare const THEMES: {
+    readonly light: "";
+    readonly dark: ".dark";
+};
+type TooltipNameType = number | string;
+export type ChartConfig = Record<string, {
+    label?: React.ReactNode;
+    icon?: React.ComponentType;
+} & ({
+    color?: string;
+    theme?: never;
+} | {
+    color?: never;
+    theme: Record<keyof typeof THEMES, string>;
+})>;
+declare function ChartContainer({ id, className, children, config, initialDimension, ...props }: React.ComponentProps<"div"> & {
+    config: ChartConfig;
+    children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>["children"];
+    initialDimension?: {
+        width: number;
+        height: number;
+    };
+}): React.JSX.Element;
+declare const ChartStyle: ({ id, config }: {
+    id: string;
+    config: ChartConfig;
+}) => React.JSX.Element | null;
+declare const ChartTooltip: typeof RechartsPrimitive.Tooltip;
+declare function ChartTooltipContent({ active, payload, className, indicator, hideLabel, hideIndicator, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey, }: React.ComponentProps<typeof RechartsPrimitive.Tooltip> & React.ComponentProps<"div"> & {
+    hideLabel?: boolean;
+    hideIndicator?: boolean;
+    indicator?: "line" | "dot" | "dashed";
+    nameKey?: string;
+    labelKey?: string;
+} & Omit<RechartsPrimitive.DefaultTooltipContentProps<TooltipValueType, TooltipNameType>, "accessibilityLayer">): React.JSX.Element | null;
+declare const ChartLegend: React.MemoExoticComponent<(outsideProps: RechartsPrimitive.LegendProps) => React.ReactPortal | null>;
+declare function ChartLegendContent({ className, hideIcon, payload, verticalAlign, nameKey, }: React.ComponentProps<"div"> & {
+    hideIcon?: boolean;
+    nameKey?: string;
+} & RechartsPrimitive.DefaultLegendContentProps): React.JSX.Element | null;
+export { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent, ChartStyle, };