adjacent-ui 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,15 @@
+# Changelog
+
+## Unpublished
+
+### 🛠 Breaking changes
+
+### 🎉 New features
+
+### 🐛 Bug fixes
+
+### 💡 Others
+
+## 0.1.0 - 2026-08-29
+
+_This version does not introduce any user-facing changes._

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Eric Kweyunga
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,41 @@
+# adjacent-ui
+
+Mobile-first components, navigation, and measurement hooks that theme from your own design tokens.
+
+## Documentation
+
+- [Adjacent UI](https://github.com/erickweyunga/adjacent-framework/blob/main/docs/ui.md)
+- [All the documentation](https://github.com/erickweyunga/adjacent-framework/blob/main/docs/README.md)
+
+## Installation
+
+```bash
+npm install adjacent-ui
+```
+
+Most projects get this through the CLI instead, which installs and wires it up:
+
+```bash
+npx adjacent-cli init
+```
+
+Around twenty components with no colour or typography of their own: they read
+the design tokens you already define, under the names Tailwind v4 and shadcn/ui
+use, and fall back to system colours when you define none. Three hooks report
+what only the browser can answer, and the navigation publishes the room it takes
+so a page never hardcodes a height.
+
+## Issues
+
+If you hit a problem using this package, please
+[report it here](https://github.com/erickweyunga/adjacent-framework/issues/new).
+
+## Contributing
+
+Issues and pull requests are welcome. Please read the
+[contributing guide](https://github.com/erickweyunga/adjacent-framework/blob/main/CONTRIBUTING.md)
+first.
+
+## License
+
+MIT

package/dist/button/button.css

@@ -0,0 +1,177 @@
+@layer components {
+.adj-button {
+  display: inline-flex;
+  gap: var(--adj-button-icon-gap, 0.5rem);
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  min-width: max-content;
+  margin: 0;
+  color: inherit;
+  font: inherit;
+  font-weight: 500;
+  line-height: 1;
+  white-space: nowrap;
+  appearance: none;
+  cursor: pointer;
+  border: 0;
+  outline: none;
+  transition:
+    color 140ms ease,
+    background-color 140ms ease,
+    border-color 140ms ease;
+  user-select: none;
+}
+
+.adj-button[data-shape="round"] {
+  border-radius: var(--radius-full, 9999px);
+}
+
+.adj-button[data-shape="square"] {
+  border-radius: var(--radius-lg, var(--radius, 0.625rem));
+}
+
+.adj-button[data-size="xs"] {
+  height: 2rem;
+  padding-inline: 0.75rem;
+  font-size: 0.75rem;
+}
+
+.adj-button[data-size="sm"] {
+  height: 2.5rem;
+  padding-inline: 1rem;
+  font-size: 0.875rem;
+}
+
+.adj-button[data-size="md"] {
+  height: 3.5rem;
+  padding-inline: 1.5rem;
+  font-size: 1rem;
+}
+
+.adj-button[data-size="lg"] {
+  height: 6rem;
+  padding-inline: 3rem;
+  font-size: 1.5rem;
+}
+
+.adj-button[data-size="xl"] {
+  height: 8.5rem;
+  padding-inline: 4rem;
+  font-size: 2rem;
+}
+
+.adj-button[data-variant="filled"] {
+  color: var(--adj-button-filled-color, var(--primary-foreground, Canvas));
+  background: var(--adj-button-filled-background, var(--primary, CanvasText));
+}
+
+.adj-button[data-variant="tonal"] {
+  color: var(--adj-button-tonal-color, var(--foreground, CanvasText));
+  background: var(--adj-button-tonal-background, color-mix(in srgb, CanvasText 12%, Canvas));
+}
+
+.adj-button[data-variant="outlined"] {
+  color: var(--adj-button-outlined-color, var(--foreground, CanvasText));
+  background: transparent;
+  border: 1px solid var(--adj-button-outline-color, color-mix(in srgb, CanvasText 42%, transparent));
+}
+
+.adj-button[data-variant="text"] {
+  color: var(--adj-button-text-color, var(--foreground, CanvasText));
+  background: transparent;
+}
+
+.adj-button[data-variant="text"]:hover:not(:disabled) {
+  background: var(
+    --adj-button-ghost-hover-background,
+    var(--accent, color-mix(in srgb, currentColor 8%, transparent))
+  );
+  filter: none;
+}
+
+.adj-button[data-variant="text"]:active:not(:disabled) {
+  background: var(
+    --adj-button-ghost-active-background,
+    color-mix(in srgb, var(--accent, currentColor) 72%, currentColor 8%)
+  );
+  filter: none;
+}
+
+.adj-button:hover:not(:disabled) {
+  filter: brightness(0.94);
+}
+
+.adj-button:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+}
+
+.adj-button:disabled {
+  cursor: default;
+  opacity: 0.38;
+}
+
+.adj-button[data-pressed="true"] {
+  color: var(--adj-button-pressed-color, var(--primary-foreground, Canvas));
+  background: var(--adj-button-pressed-background, var(--primary, CanvasText));
+}
+
+.adj-button > svg {
+  flex: none;
+}
+
+.adj-icon-button {
+  width: var(--adj-icon-button-width);
+  min-width: var(--adj-icon-button-width);
+  padding-inline: 0;
+}
+
+.adj-icon-button[data-size="xs"] {
+  --adj-icon-button-size: 2rem;
+}
+
+.adj-icon-button[data-size="sm"] {
+  --adj-icon-button-size: 2.5rem;
+}
+
+.adj-icon-button[data-size="md"] {
+  --adj-icon-button-size: 3.5rem;
+}
+
+.adj-icon-button[data-size="lg"] {
+  --adj-icon-button-size: 6rem;
+}
+
+.adj-icon-button[data-size="xl"] {
+  --adj-icon-button-size: 8.5rem;
+}
+
+.adj-icon-button[data-width="narrow"] {
+  --adj-icon-button-width: calc(var(--adj-icon-button-size) * 0.8);
+}
+
+.adj-icon-button[data-width="default"] {
+  --adj-icon-button-width: var(--adj-icon-button-size);
+}
+
+.adj-icon-button[data-width="wide"] {
+  --adj-icon-button-width: calc(var(--adj-icon-button-size) * 1.5);
+}
+
+/*
+ * Not while pressed. This rule ties with the pressed one on specificity and
+ * comes after it, so without the exclusion it wins and a selected standard
+ * icon button draws its icon in the page's foreground colour on the primary
+ * background: two colours never meant to pair, and at their worst the icon is
+ * the same colour as the surface behind it and cannot be seen at all.
+ */
+.adj-icon-button[data-icon-variant="standard"]:not([data-pressed="true"]) {
+  color: var(--adj-icon-button-standard-color, var(--foreground, CanvasText));
+}
+
+.adj-icon-button > svg {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+}

package/dist/button/button.d.ts

@@ -0,0 +1,25 @@
+import type { ButtonHTMLAttributes, ReactNode } from "react";
+import "./button.css";
+export type ButtonVariant = "filled" | "tonal" | "outlined" | "text";
+export type ButtonSize = "xs" | "sm" | "md" | "lg" | "xl";
+export type ButtonShape = "round" | "square";
+export type IconButtonVariant = "filled" | "tonal" | "outlined" | "standard";
+export type IconButtonWidth = "narrow" | "default" | "wide";
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    readonly pressed?: boolean;
+    readonly shape?: ButtonShape;
+    readonly size?: ButtonSize;
+    readonly variant?: ButtonVariant;
+}
+export declare function Button({ className, pressed, shape, size, type, variant, ...props }: ButtonProps): import("react").JSX.Element;
+export interface IconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "aria-label" | "children"> {
+    readonly "aria-label": string;
+    readonly children: ReactNode;
+    readonly selected?: boolean;
+    readonly shape?: ButtonShape;
+    readonly size?: ButtonSize;
+    readonly variant?: IconButtonVariant;
+    readonly width?: IconButtonWidth;
+}
+export declare function IconButton({ "aria-label": ariaLabel, children, className, selected, shape, size, variant, width, ...props }: IconButtonProps): import("react").JSX.Element;
+//# sourceMappingURL=button.d.ts.map

package/dist/button/button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/button/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE7D,OAAO,cAAc,CAAC;AAEtB,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,OAAO,GAAG,UAAU,GAAG,MAAM,CAAC;AACrE,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC1D,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,QAAQ,CAAC;AAC7C,MAAM,MAAM,iBAAiB,GAAG,QAAQ,GAAG,OAAO,GAAG,UAAU,GAAG,UAAU,CAAC;AAC7E,MAAM,MAAM,eAAe,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAC;AAE5D,MAAM,WAAW,WAAY,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC1E,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,KAAK,CAAC,EAAE,WAAW,CAAC;IAC7B,QAAQ,CAAC,IAAI,CAAC,EAAE,UAAU,CAAC;IAC3B,QAAQ,CAAC,OAAO,CAAC,EAAE,aAAa,CAAC;CAClC;AAED,wBAAgB,MAAM,CAAC,EACrB,SAAS,EACT,OAAO,EACP,KAAgB,EAChB,IAAW,EACX,IAAe,EACf,OAAkB,EAClB,GAAG,KAAK,EACT,EAAE,WAAW,+BAeb;AAED,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IAChF,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAC;IAC9B,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAC;IAC7B,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,KAAK,CAAC,EAAE,WAAW,CAAC;IAC7B,QAAQ,CAAC,IAAI,CAAC,EAAE,UAAU,CAAC;IAC3B,QAAQ,CAAC,OAAO,CAAC,EAAE,iBAAiB,CAAC;IACrC,QAAQ,CAAC,KAAK,CAAC,EAAE,eAAe,CAAC;CAClC;AAED,wBAAgB,UAAU,CAAC,EACzB,YAAY,EAAE,SAAS,EACvB,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,KAAgB,EAChB,IAAW,EACX,OAAoB,EACpB,KAAiB,EACjB,GAAG,KAAK,EACT,EAAE,eAAe,+BAkBjB"}

package/dist/button/button.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "./button.css";
+export function Button({ className, pressed, shape = "square", size = "sm", type = "button", variant = "filled", ...props }) {
+    const classes = ["adj-button", className].filter(Boolean).join(" ");
+    return (_jsx("button", { "aria-pressed": pressed, className: classes, "data-pressed": pressed === undefined ? undefined : String(pressed), "data-shape": shape, "data-size": size, "data-variant": variant, type: type, ...props }));
+}
+export function IconButton({ "aria-label": ariaLabel, children, className, selected, shape = "square", size = "sm", variant = "standard", width = "default", ...props }) {
+    const classes = ["adj-icon-button", className].filter(Boolean).join(" ");
+    return (_jsx(Button, { "aria-label": ariaLabel, className: classes, "data-icon-variant": variant, "data-width": width, pressed: selected, shape: shape, size: size, variant: variant === "standard" ? "text" : variant, ...props, children: children }));
+}
+//# sourceMappingURL=button.js.map

package/dist/button/button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../../src/button/button.tsx"],"names":[],"mappings":";AAEA,OAAO,cAAc,CAAC;AAetB,MAAM,UAAU,MAAM,CAAC,EACrB,SAAS,EACT,OAAO,EACP,KAAK,GAAG,QAAQ,EAChB,IAAI,GAAG,IAAI,EACX,IAAI,GAAG,QAAQ,EACf,OAAO,GAAG,QAAQ,EAClB,GAAG,KAAK,EACI;IACZ,MAAM,OAAO,GAAG,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAEpE,OAAO,CACL,iCACgB,OAAO,EACrB,SAAS,EAAE,OAAO,kBACJ,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,gBACrD,KAAK,eACN,IAAI,kBACD,OAAO,EACrB,IAAI,EAAE,IAAI,KACN,KAAK,GACT,CACH,CAAC;AACJ,CAAC;AAaD,MAAM,UAAU,UAAU,CAAC,EACzB,YAAY,EAAE,SAAS,EACvB,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,KAAK,GAAG,QAAQ,EAChB,IAAI,GAAG,IAAI,EACX,OAAO,GAAG,UAAU,EACpB,KAAK,GAAG,SAAS,EACjB,GAAG,KAAK,EACQ;IAChB,MAAM,OAAO,GAAG,CAAC,iBAAiB,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAEzE,OAAO,CACL,KAAC,MAAM,kBACO,SAAS,EACrB,SAAS,EAAE,OAAO,uBACC,OAAO,gBACd,KAAK,EACjB,OAAO,EAAE,QAAQ,EACjB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,KAAK,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,KAC9C,KAAK,YAER,QAAQ,GACF,CACV,CAAC;AACJ,CAAC"}

package/dist/card/card.css

@@ -0,0 +1,126 @@
+@layer components {
+.adj-card {
+  position: relative;
+  box-sizing: border-box;
+  overflow: hidden;
+  color: var(--adj-card-color, var(--foreground, CanvasText));
+  border-radius: var(--adj-card-radius, var(--radius, 0.625rem));
+  transition:
+    background-color 160ms ease,
+    border-color 160ms ease;
+}
+
+.adj-card[data-variant="outlined"] {
+  background: var(--adj-card-outlined-background, var(--background, Canvas));
+  border: 1px solid var(--adj-card-outline-color, var(--border, color-mix(in srgb, CanvasText 25%, transparent)));
+}
+
+.adj-card[data-variant="filled"] {
+  background: var(--adj-card-filled-background, var(--muted, color-mix(in srgb, CanvasText 8%, Canvas)));
+  border: 1px solid transparent;
+}
+
+.adj-card[data-dragged="true"] {
+  background: var(--adj-card-dragged-background, var(--muted, color-mix(in srgb, CanvasText 8%, Canvas)));
+  border-color: var(--adj-card-dragged-outline, var(--foreground, CanvasText));
+}
+
+.adj-card[data-selected="true"] {
+  background: var(--adj-card-selected-background, color-mix(in srgb, var(--primary, CanvasText) 12%, var(--background, Canvas)));
+  border-color: var(--adj-card-selected-outline, var(--primary, CanvasText));
+}
+
+.adj-card__media {
+  overflow: hidden;
+}
+
+.adj-card__media > img,
+.adj-card__media > picture,
+.adj-card__media > video {
+  display: block;
+  width: 100%;
+}
+
+.adj-card__content {
+  padding: var(--adj-card-content-padding, 1rem);
+}
+
+/*
+ * Padded like the content it sits above, because every part of a card is a
+ * direct child of it: a header without padding puts the title against the edge.
+ */
+.adj-card__header {
+  display: grid;
+  gap: 0.25rem;
+  padding: var(--adj-card-content-padding, 1rem);
+}
+
+/* The header already padded the top of the card, so what follows does not. */
+.adj-card__header + .adj-card__content,
+.adj-card__header + .adj-card__actions {
+  padding-block-start: 0;
+}
+
+.adj-card__title,
+.adj-card__subtitle,
+.adj-card__description {
+  margin: 0;
+}
+
+.adj-card__title {
+  font-size: 1rem;
+  font-weight: 500;
+  line-height: 1.5rem;
+}
+
+.adj-card__subtitle,
+.adj-card__description {
+  color: var(--adj-card-supporting-color, var(--muted-foreground, color-mix(in srgb, CanvasText 70%, Canvas)));
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
+/*
+ * Only when it follows the title directly. Inside the header the grid gap
+ * already separates it from a subtitle, and doubling the two reads as a gap
+ * nobody asked for.
+ */
+.adj-card__title + .adj-card__description {
+  margin-top: 0.5rem;
+}
+
+.adj-card__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  align-items: center;
+  justify-content: flex-end;
+  /* Inline padding matches the content above, so an action lines up with it. */
+  padding: 0 var(--adj-card-content-padding, 1rem) var(--adj-card-content-padding, 1rem);
+}
+
+.adj-card__selection-indicator {
+  position: absolute;
+  inset-block-start: 0.5rem;
+  inset-inline-end: 0.5rem;
+  display: grid;
+  width: 1.5rem;
+  height: 1.5rem;
+  color: var(--adj-card-selection-indicator-color, var(--primary-foreground, Canvas));
+  background: var(--adj-card-selection-indicator-background, var(--primary, CanvasText));
+  border-radius: var(--radius-lg, var(--radius, 0.625rem));
+  place-items: center;
+}
+
+.adj-card__selection-indicator > svg {
+  width: 1rem;
+  height: 1rem;
+  fill: currentColor;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .adj-card {
+    transition: none;
+  }
+}
+}

package/dist/card/card.d.ts

@@ -0,0 +1,18 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import "./card.css";
+export type CardVariant = "filled" | "outlined";
+export interface CardProps extends HTMLAttributes<HTMLDivElement> {
+    readonly dragged?: boolean;
+    readonly selected?: boolean;
+    readonly selectionIndicator?: ReactNode;
+    readonly variant?: CardVariant;
+}
+export declare function Card({ children, className, dragged, selected, selectionIndicator, variant, ...props }: CardProps): import("react").JSX.Element;
+export declare function CardMedia({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
+export declare function CardContent({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
+export declare function CardHeader({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
+export declare function CardTitle({ className, ...props }: HTMLAttributes<HTMLHeadingElement>): import("react").JSX.Element;
+export declare function CardSubtitle({ className, ...props }: HTMLAttributes<HTMLParagraphElement>): import("react").JSX.Element;
+export declare function CardDescription({ className, ...props }: HTMLAttributes<HTMLParagraphElement>): import("react").JSX.Element;
+export declare function CardActions({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
+//# sourceMappingURL=card.d.ts.map

package/dist/card/card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../src/card/card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,OAAO,YAAY,CAAC;AAEpB,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,UAAU,CAAC;AAEhD,MAAM,WAAW,SAAU,SAAQ,cAAc,CAAC,cAAc,CAAC;IAC/D,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,kBAAkB,CAAC,EAAE,SAAS,CAAC;IACxC,QAAQ,CAAC,OAAO,CAAC,EAAE,WAAW,CAAC;CAChC;AAED,wBAAgB,IAAI,CAAC,EACnB,QAAQ,EACR,SAAS,EACT,OAAe,EACf,QAAgB,EAChB,kBAAkB,EAClB,OAAoB,EACpB,GAAG,KAAK,EACT,EAAE,SAAS,+BAmBX;AAED,wBAAgB,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,cAAc,CAAC,+BAGhF;AAED,wBAAgB,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,cAAc,CAAC,+BAGlF;AAED,wBAAgB,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,cAAc,CAAC,+BAGjF;AAED,wBAAgB,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,kBAAkB,CAAC,+BAGpF;AAED,wBAAgB,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,oBAAoB,CAAC,+BAGzF;AAED,wBAAgB,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,oBAAoB,CAAC,+BAG5F;AAED,wBAAgB,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,cAAc,CAAC,+BAGlF"}

package/dist/card/card.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "./card.css";
+export function Card({ children, className, dragged = false, selected = false, selectionIndicator, variant = "outlined", ...props }) {
+    const classes = ["adj-card", className].filter(Boolean).join(" ");
+    return (_jsxs("div", { className: classes, "data-dragged": String(dragged), "data-selected": String(selected), "data-variant": variant, ...props, children: [children, selected ? (_jsx("span", { "aria-hidden": "true", className: "adj-card__selection-indicator", children: selectionIndicator ?? _jsx(DefaultSelectionIndicator, {}) })) : null] }));
+}
+export function CardMedia({ className, ...props }) {
+    const classes = ["adj-card__media", className].filter(Boolean).join(" ");
+    return _jsx("div", { className: classes, ...props });
+}
+export function CardContent({ className, ...props }) {
+    const classes = ["adj-card__content", className].filter(Boolean).join(" ");
+    return _jsx("div", { className: classes, ...props });
+}
+export function CardHeader({ className, ...props }) {
+    const classes = ["adj-card__header", className].filter(Boolean).join(" ");
+    return _jsx("div", { className: classes, ...props });
+}
+export function CardTitle({ className, ...props }) {
+    const classes = ["adj-card__title", className].filter(Boolean).join(" ");
+    return _jsx("h3", { className: classes, ...props });
+}
+export function CardSubtitle({ className, ...props }) {
+    const classes = ["adj-card__subtitle", className].filter(Boolean).join(" ");
+    return _jsx("p", { className: classes, ...props });
+}
+export function CardDescription({ className, ...props }) {
+    const classes = ["adj-card__description", className].filter(Boolean).join(" ");
+    return _jsx("p", { className: classes, ...props });
+}
+export function CardActions({ className, ...props }) {
+    const classes = ["adj-card__actions", className].filter(Boolean).join(" ");
+    return _jsx("div", { className: classes, ...props });
+}
+function DefaultSelectionIndicator() {
+    return (_jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", children: _jsx("path", { d: "m9.55 17.6-5.7-5.7 1.4-1.4 4.3 4.3 9.2-9.2 1.4 1.4-10.6 10.6Z" }) }));
+}
+//# sourceMappingURL=card.js.map

package/dist/card/card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.js","sourceRoot":"","sources":["../../src/card/card.tsx"],"names":[],"mappings":"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"}

package/dist/checkbox/checkbox.css

@@ -0,0 +1,116 @@
+@layer components {
+.adj-checkbox {
+  position: relative;
+  display: inline-flex;
+  gap: 0.75rem;
+  align-items: center;
+  min-width: 3rem;
+  min-height: 3rem;
+  color: var(--adj-checkbox-label-color, var(--foreground, CanvasText));
+  font: inherit;
+  cursor: pointer;
+  user-select: none;
+}
+
+.adj-checkbox[data-labeled="false"] {
+  justify-content: center;
+  width: 3rem;
+}
+
+.adj-checkbox__input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+.adj-checkbox__control {
+  display: grid;
+  width: 1.125rem;
+  height: 1.125rem;
+  flex: none;
+  color: var(--adj-checkbox-icon-color, var(--primary-foreground, Canvas));
+  background: transparent;
+  border: 2px solid var(--adj-checkbox-outline-color, var(--foreground, CanvasText));
+  border-radius: var(
+    --radius-sm,
+    max(0px, calc(var(--radius, 0.625rem) - 4px))
+  );
+  transition:
+    background-color 120ms ease,
+    border-color 120ms ease;
+  place-items: center;
+}
+
+.adj-checkbox__check,
+.adj-checkbox__indeterminate {
+  display: none;
+  width: 1rem;
+  height: 1rem;
+  fill: none;
+  stroke: currentColor;
+  stroke-linecap: square;
+  stroke-linejoin: miter;
+  stroke-width: 2;
+}
+
+.adj-checkbox__input:checked + .adj-checkbox__control,
+.adj-checkbox__input:indeterminate + .adj-checkbox__control {
+  background: var(--adj-checkbox-selected-background, var(--primary, CanvasText));
+  border-color: var(--adj-checkbox-selected-background, var(--primary, CanvasText));
+}
+
+.adj-checkbox__input:checked + .adj-checkbox__control .adj-checkbox__check,
+.adj-checkbox__input:indeterminate + .adj-checkbox__control .adj-checkbox__indeterminate {
+  display: block;
+}
+
+.adj-checkbox[data-error="true"] .adj-checkbox__control {
+  color: var(--adj-checkbox-error-icon-color, var(--background, Canvas));
+  border-color: var(--adj-checkbox-error-color, var(--destructive, #b3261e));
+}
+
+.adj-checkbox[data-error="true"] .adj-checkbox__input:checked + .adj-checkbox__control,
+.adj-checkbox[data-error="true"] .adj-checkbox__input:indeterminate + .adj-checkbox__control {
+  background: var(--adj-checkbox-error-color, var(--destructive, #b3261e));
+}
+
+.adj-checkbox:hover .adj-checkbox__control {
+  background-color: color-mix(in srgb, currentColor 8%, transparent);
+}
+
+.adj-checkbox:hover .adj-checkbox__input:checked + .adj-checkbox__control,
+.adj-checkbox:hover .adj-checkbox__input:indeterminate + .adj-checkbox__control {
+  background-color: color-mix(in srgb, var(--adj-checkbox-selected-background, var(--primary, CanvasText)) 88%, CanvasText);
+}
+
+.adj-checkbox[data-error="true"]:hover .adj-checkbox__input:checked + .adj-checkbox__control,
+.adj-checkbox[data-error="true"]:hover .adj-checkbox__input:indeterminate + .adj-checkbox__control {
+  background-color: color-mix(in srgb, var(--adj-checkbox-error-color, var(--destructive, #b3261e)) 88%, CanvasText);
+}
+
+.adj-checkbox__input:focus-visible + .adj-checkbox__control {
+  outline: 2px solid var(--ring, currentColor);
+  outline-offset: 3px;
+}
+
+.adj-checkbox:has(.adj-checkbox__input:disabled) {
+  cursor: default;
+  opacity: 0.38;
+}
+
+.adj-checkbox__label {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .adj-checkbox__control {
+    transition: none;
+  }
+}
+}

package/dist/checkbox/checkbox.d.ts

@@ -0,0 +1,13 @@
+import { type ChangeEvent, type ComponentPropsWithRef, type ReactNode } from "react";
+import "./checkbox.css";
+export type CheckboxState = boolean | "indeterminate";
+export interface CheckboxProps extends Omit<ComponentPropsWithRef<"input">, "checked" | "children" | "defaultChecked" | "onChange" | "type"> {
+    readonly checked?: CheckboxState;
+    readonly defaultChecked?: boolean;
+    readonly error?: boolean;
+    readonly label?: ReactNode;
+    readonly onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+    readonly onCheckedChange?: (checked: boolean) => void;
+}
+export declare function Checkbox({ checked, className, defaultChecked, disabled, error, label, onChange, onCheckedChange, ref, ...props }: CheckboxProps): import("react").JSX.Element;
+//# sourceMappingURL=checkbox.d.ts.map

package/dist/checkbox/checkbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../src/checkbox/checkbox.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGL,KAAK,WAAW,EAChB,KAAK,qBAAqB,EAC1B,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,gBAAgB,CAAC;AAExB,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,eAAe,CAAC;AAEtD,MAAM,WAAW,aACf,SAAQ,IAAI,CACV,qBAAqB,CAAC,OAAO,CAAC,EAC9B,SAAS,GAAG,UAAU,GAAG,gBAAgB,GAAG,UAAU,GAAG,MAAM,CAChE;IACD,QAAQ,CAAC,OAAO,CAAC,EAAE,aAAa,CAAC;IACjC,QAAQ,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAClC,QAAQ,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC;IAC3B,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACnE,QAAQ,CAAC,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CACvD;AAED,wBAAgB,QAAQ,CAAC,EACvB,OAAO,EACP,SAAS,EACT,cAAc,EACd,QAAQ,EACR,KAAa,EACb,KAAK,EACL,QAAQ,EACR,eAAe,EACf,GAAG,EACH,GAAG,KAAK,EACT,EAAE,aAAa,+BAsDf"}

package/dist/checkbox/checkbox.js

@@ -0,0 +1,32 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLayoutEffect, useRef, } from "react";
+import "./checkbox.css";
+export function Checkbox({ checked, className, defaultChecked, disabled, error = false, label, onChange, onCheckedChange, ref, ...props }) {
+    const inputRef = useRef(null);
+    const classes = ["adj-checkbox", className].filter(Boolean).join(" ");
+    const indeterminate = checked === "indeterminate";
+    useLayoutEffect(() => {
+        if (inputRef.current) {
+            inputRef.current.indeterminate = indeterminate;
+        }
+    }, [indeterminate]);
+    function setInputRef(node) {
+        inputRef.current = node;
+        if (typeof ref === "function") {
+            ref(node);
+        }
+        else if (ref) {
+            ref.current = node;
+        }
+    }
+    function handleChange(event) {
+        onChange?.(event);
+        onCheckedChange?.(event.currentTarget.checked);
+        if (indeterminate) {
+            event.currentTarget.indeterminate = true;
+        }
+    }
+    return (_jsxs("label", { className: classes, "data-error": String(error), "data-labeled": String(label !== undefined), children: [_jsx("input", { "aria-invalid": error || undefined, checked: checked === undefined ? undefined : checked === true, className: "adj-checkbox__input", defaultChecked: defaultChecked, disabled: disabled, onChange: handleChange, ref: setInputRef, type: "checkbox", ...props }), _jsxs("span", { "aria-hidden": "true", className: "adj-checkbox__control", children: [_jsx("svg", { className: "adj-checkbox__check", viewBox: "0 0 18 18", children: _jsx("path", { d: "m4 9 3.1 3.1L14 5.5" }) }), _jsx("svg", { className: "adj-checkbox__indeterminate", viewBox: "0 0 18 18", children: _jsx("path", { d: "M4 9h10" }) })] }), label !== undefined ? _jsx("span", { className: "adj-checkbox__label", children: label }) : null] }));
+}
+//# sourceMappingURL=checkbox.js.map