npm - @kuzenbo/core - Versions diffs - 0.0.1-alpha.0 - Mend

@kuzenbo/core 0.0.1-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (931) hide show

package/README.md ADDED Viewed

@@ -0,0 +1,274 @@
+# @kuzenbo/core 🎨
+Core React UI package for Kuzenbo.
+## Install 📦
+```bash
+# npm
+npm install @kuzenbo/core @kuzenbo/hooks react react-dom
+# pnpm
+pnpm add @kuzenbo/core @kuzenbo/hooks react react-dom
+# yarn
+yarn add @kuzenbo/core @kuzenbo/hooks react react-dom
+# bun
+bun add @kuzenbo/core @kuzenbo/hooks react react-dom
+```
+## Usage
+```tsx
+import { Button, Card } from "@kuzenbo/core";
+import "@kuzenbo/core/styles.css";
+export function App() {
+  return (
+    <Card>
+      <Button>Click me</Button>
+    </Card>
+  );
+}
+```
+### Theme bootstrap (SSR-safe) 🌗
+```tsx
+import {
+  DEFAULT_THEME_SETTING,
+  ThemeBootstrapScript,
+  ThemeProvider,
+} from "@kuzenbo/core";
+export function AppLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body>
+        <ThemeBootstrapScript defaultThemeSetting={DEFAULT_THEME_SETTING} />
+        <ThemeProvider defaultTheme={DEFAULT_THEME_SETTING}>
+          {children}
+        </ThemeProvider>
+      </body>
+    </html>
+  );
+}
+```
+Theme bootstrap precedence is `cookie -> localStorage -> system` and it
+normalizes storage drift before hydration to prevent first-paint flicker.
+### Container primitive 📐
+```tsx
+import { Container } from "@kuzenbo/core";
+export function LayoutExample() {
+  return (
+    <Container>
+      <h1>Centered content</h1>
+      <p>Uses a standard max-width with responsive horizontal padding.</p>
+    </Container>
+  );
+}
+```
+### Typography primitive ✍️
+```tsx
+import { Typography } from "@kuzenbo/core";
+export function TypographyExample() {
+  return (
+    <div className="space-y-3">
+      <Typography.H2>Build with typography primitives</Typography.H2>
+      <Typography.Lead>
+        Keep heading and body styles consistent across pages and components.
+      </Typography.Lead>
+      <Typography.P>
+        Inline code looks like{" "}
+        <Typography.Code>Typography.Code</Typography.Code>.
+      </Typography.P>
+      <Typography.Ul>
+        <Typography.Li>Use semantic entries (`H1`..`H6`, `P`).</Typography.Li>
+        <Typography.Li>
+          Use role aliases (`Lead`, `Muted`, `Caption`).
+        </Typography.Li>
+      </Typography.Ul>
+    </div>
+  );
+}
+```
+The `Typography` namespace includes:
+- base primitives: `Typography.Heading`, `Typography.Text`
+- semantic entries: `Typography.H1`..`Typography.H6`, `Typography.P`, `Typography.Blockquote`, `Typography.Ul`, `Typography.Ol`, `Typography.Li`, `Typography.Code`
+- role aliases: `Typography.Display`, `Typography.Subheading`, `Typography.Body`, `Typography.Lead`, `Typography.Muted`, `Typography.Small`, `Typography.Caption`, `Typography.Overline`, `Typography.Eyebrow`
+### Accordion variants 🪗
+```tsx
+import { Accordion } from "@kuzenbo/core";
+export function AccordionExample() {
+  return (
+    <Accordion variant="bordered">
+      <Accordion.Item value="1">
+        <Accordion.Trigger>What is Kuzenbo?</Accordion.Trigger>
+        <Accordion.Content>
+          Kuzenbo is a React UI component library.
+        </Accordion.Content>
+      </Accordion.Item>
+      <Accordion.Item value="2">
+        <Accordion.Trigger>Which variants are available?</Accordion.Trigger>
+        <Accordion.Content>
+          Use <code>default</code>, <code>bordered</code>, or <code>ghost</code>
+          .
+        </Accordion.Content>
+      </Accordion.Item>
+    </Accordion>
+  );
+}
+```
+```tsx
+import { Drawer } from "@kuzenbo/core";
+export function DrawerExample() {
+  return (
+    <Drawer.Root>
+      <Drawer.Trigger>Open Drawer</Drawer.Trigger>
+      <Drawer.Portal>
+        <Drawer.Backdrop />
+        <Drawer.Viewport>
+          <Drawer.Popup>
+            <Drawer.Content>
+              <Drawer.Title>Drawer Title</Drawer.Title>
+              <Drawer.Description>Drawer description.</Drawer.Description>
+              <Drawer.Close>Close</Drawer.Close>
+            </Drawer.Content>
+          </Drawer.Popup>
+        </Drawer.Viewport>
+      </Drawer.Portal>
+    </Drawer.Root>
+  );
+}
+```
+### Chart (Recharts v3) 📊
+```tsx
+import { Chart } from "@kuzenbo/core";
+import { Bar, BarChart, XAxis, YAxis } from "recharts";
+const data = [
+  { month: "Jan", sessions: 120 },
+  { month: "Feb", sessions: 145 },
+  { month: "Mar", sessions: 160 },
+];
+export function ChartExample() {
+  const config = {
+    sessions: { label: "Sessions", color: "hsl(var(--kb-chart-1))" },
+  };
+  return (
+    <Chart.Root className="h-80 w-full" config={config}>
+      <BarChart data={data}>
+        <XAxis dataKey="month" />
+        <YAxis />
+        <Chart.Tooltip
+          content={<Chart.TooltipContent />}
+          defaultIndex={1}
+          trigger="click"
+        />
+        <Chart.Legend content={<Chart.LegendContent />} />
+        <Bar dataKey="sessions" fill="var(--color-sessions)" />
+      </BarChart>
+    </Chart.Root>
+  );
+}
+```
+`ChartContainer` was replaced by the `Chart` namespace API:
+- `ChartContainer` -> `Chart.Root`
+- `ChartContainer.Tooltip` -> `Chart.Tooltip`
+- `ChartContainer.TooltipContent` -> `Chart.TooltipContent`
+- `ChartContainer.Legend` -> `Chart.Legend`
+- `ChartContainer.LegendContent` -> `Chart.LegendContent`
+For external overlay placement, use Recharts v3 `portal` support with
+`Chart.usePortalTarget()` + `Chart.PortalTarget`.
+### Calendar (Interactive) 🗓️
+```tsx
+import * as React from "react";
+import { Calendar } from "@kuzenbo/core";
+export function CalendarExample() {
+  const [date, setDate] = React.useState<Date | undefined>(new Date());
+  return (
+    <Calendar
+      mode="single"
+      selected={date}
+      onSelect={setDate}
+      className="rounded-lg border"
+    />
+  );
+}
+```
+`<Calendar />` without a selection `mode` renders a fully styled display calendar. Pass
+`mode` and selection props to enable interactive day buttons.
+Storybook calendar scenarios are split under `Components/Calendar/*` for
+baseline, selection modes, dropdown, week numbers, and locale/RTL coverage.
+### Advanced Drawer Styling 🧩
+`Drawer.Popup` ships with behavior defaults for swipe, snap points, directional
+transforms, and nested stacks. Vertical nested stacks are normalized to the
+frontmost popup height so background layers keep a visible peek. Use
+`className` for visual overrides and avoid re-declaring core behavior utilities
+unless you are intentionally replacing drawer behavior:
+```tsx
+import { Drawer } from "@kuzenbo/core";
+export function CustomDrawerPopup() {
+  return (
+    <Drawer.Root defaultOpen>
+      <Drawer.Portal>
+        <Drawer.Viewport>
+          <Drawer.Popup className="shadow-lg">
+            <Drawer.Content>
+              <Drawer.Title>Custom popup</Drawer.Title>
+              <Drawer.Description>
+                Popup visuals are customized while behavior defaults stay
+                intact.
+              </Drawer.Description>
+            </Drawer.Content>
+          </Drawer.Popup>
+        </Drawer.Viewport>
+      </Drawer.Portal>
+    </Drawer.Root>
+  );
+}
+```
+## Notes
+- This package depends on `@kuzenbo/hooks`.
+- Styles are distributed via `@kuzenbo/core/styles.css`.
+- `@kuzenbo/core/styles.css` only ships design tokens and component styles.
+- App-level globals (for example `html`, `body`, scrollbar, and browser behavior styles) should live in your app stylesheet.
+- Published package styles are compiled and shipped from `dist/styles.css`.
+## Development
+- Component authoring guide: [`../../docs/components.md`](../../docs/components.md)
+- Architecture and boundaries: [`../../docs/architecture.md`](../../docs/architecture.md)

package/dist/index.d.ts ADDED Viewed

@@ -0,0 +1,81 @@
+export * from "./ui/accordion/accordion";
+export * from "./ui/affix/affix";
+export * from "./ui/alert/alert";
+export * from "./ui/alert-dialog/alert-dialog";
+export * from "./ui/announcement/announcement";
+export * from "./ui/aspect-ratio/aspect-ratio";
+export * from "./ui/autocomplete/autocomplete";
+export * from "./ui/avatar/avatar";
+export * from "./ui/badge/badge";
+export * from "./ui/breadcrumb/breadcrumb";
+export * from "./ui/button/button";
+export * from "./ui/button-group/button-group";
+export * from "./ui/calendar/calendar";
+export * from "./ui/card/card";
+export * from "./ui/carousel/carousel";
+export * from "./ui/chart/chart";
+export * from "./ui/checkbox/checkbox";
+export * from "./ui/checkbox-group/checkbox-group";
+export * from "./ui/collapsible/collapsible";
+export { Combobox } from "./ui/combobox/combobox";
+export { ComboboxChip, ComboboxChipRemove, ComboboxChips, ComboboxChipsInput, ComboboxClear, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, useComboboxAnchor, } from "./ui/combobox/combobox";
+export type { ComboboxProps } from "./ui/combobox/combobox";
+export * from "./ui/container/container";
+export * from "./ui/command/command";
+export * from "./ui/context-menu/context-menu";
+export * from "./ui/country-flag/country-flag";
+export * from "./ui/dialog/dialog";
+export * from "./ui/drawer/drawer";
+export * from "./ui/dropdown-menu/dropdown-menu";
+export * from "./ui/dropzone/dropzone";
+export * from "./ui/emoji-picker/emoji-picker";
+export * from "./ui/empty/empty";
+export * from "./ui/form-field/form-field";
+export * from "./ui/google-logo/google-logo";
+export * from "./ui/hover-card/hover-card";
+export * from "./ui/input/input";
+export * from "./ui/input-group/input-group";
+export * from "./ui/input-otp/input-otp";
+export * from "./ui/item/item";
+export * from "./ui/kbd/kbd";
+export * from "./ui/label/label";
+export * from "./ui/marquee/marquee";
+export * from "./ui/menubar/menubar";
+export * from "./ui/meter/meter";
+export * from "./ui/navigation-menu/navigation-menu";
+export * from "./ui/number-field/number-field";
+export * from "./ui/pagination/pagination";
+export * from "./ui/pill/pill";
+export * from "./ui/popover/popover";
+export * from "./ui/portal/portal";
+export * from "./ui/progress/progress";
+export * from "./ui/qr-code/qr-code";
+export * from "./ui/radio-group/radio-group";
+export * from "./ui/rating/rating";
+export * from "./ui/resizable/resizable";
+export * from "./ui/scroll-area/scroll-area";
+export * from "./ui/select/select";
+export * from "./ui/separator/separator";
+export * from "./ui/sheet/sheet";
+export * from "./ui/sidebar/sidebar";
+export * from "./ui/skeleton/skeleton";
+export * from "./ui/slider/slider";
+export * from "./ui/spacer/spacer";
+export * from "./ui/spinner/spinner";
+export * from "./ui/switch/switch";
+export * from "./ui/table/table";
+export * from "./ui/tabs/tabs";
+export * from "./ui/textarea/textarea";
+export * from "./theme/theme-bootstrap";
+export * from "./theme/theme-bootstrap-script";
+export * from "./theme/theme-provider";
+export * from "./ui/theme-icon/theme-icon";
+export * from "./ui/timeline/timeline";
+export * from "./ui/toast/toast";
+export * from "./ui/toggle/toggle";
+export * from "./ui/toggle-group/toggle-group";
+export * from "./ui/toolbar/toolbar";
+export * from "./ui/tooltip/tooltip";
+export * from "./ui/typography/typography";
+export * from "./ui/video-player/video-player";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}