@pithyjs/ui-kit 0.1.0-beta.0

package/dist/structural/NavLink.js

@@ -0,0 +1,37 @@
+/** @codex
+{
+  "id": "pithy.ui-kit.nav-link",
+  "title": "<NavLink> Structural Component",
+  "category": "feature"
+}
+*/
+import { html } from '@pithyjs/core';
+/**
+ * Router-aware anchor that delegates to the @routerLink directive.
+ *
+ * Named NavLink (not Link) to avoid collision with the HTML <link>
+ * void element — parse5 treats <link> as self-closing, so children
+ * would be lost.
+ *
+ * @example
+ * ```html
+ * <NavLink to="'/about'">About</NavLink>
+ *
+ * <NavLink to="'/dashboard'" prefetch="'hover'" activeClass="'is-active'" exactActive="true">
+ *   Dashboard
+ * </NavLink>
+ * ```
+ */
+/** @codexApi {"parent":"pithy.ui-kit.nav-link","name":"NavLink","stability":"stable","signature":"(props: NavLinkProps) => { el: HTMLElement | DocumentFragment; destroy: () => void }"} */
+export function NavLink({ to, prefetch = 'none', activeClass = 'router-link-active', exactActive = false, replace = false, linkClass = '', }) {
+    // Split linkClass into an array so [classes] uses classList.add() (additive).
+    // [class]="linkClass" would use setAttribute("class", ...) which replaces
+    // the entire class attribute, wiping out the active class set by @routerLink.
+    const linkClasses = linkClass ? linkClass.split(/\s+/).filter(Boolean) : [];
+    return html `
+    <a class="ui-nav-link" [href]="to" @routerLink [data-prefetch]="prefetch" [active-class]="activeClass" [exact-match]="exactActive" [replace]="replace" [classes]="linkClasses">
+      <slot></slot>
+    </a>
+  `;
+}
+//# sourceMappingURL=NavLink.js.map

package/dist/structural/NavLink.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavLink.js","sourceRoot":"","sources":["../../src/structural/NavLink.ts"],"names":[],"mappings":"AAAA;;;;;;EAME;AAEF,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAmBrC;;;;;;;;;;;;;;;GAeG;AACH,4LAA4L;AAC5L,MAAM,UAAU,OAAO,CAAC,EACtB,EAAE,EACF,QAAQ,GAAG,MAAM,EACjB,WAAW,GAAG,oBAAoB,EAClC,WAAW,GAAG,KAAK,EACnB,OAAO,GAAG,KAAK,EACf,SAAS,GAAG,EAAE,GACD;IACb,8EAA8E;IAC9E,0EAA0E;IAC1E,8EAA8E;IAC9E,MAAM,WAAW,GAAG,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IAE5E,OAAO,IAAI,CAAA;;;;GAIV,CAAC;AACJ,CAAC"}

package/dist/structural/Show.d.ts

@@ -0,0 +1,35 @@
+/** @codex
+{
+  "id": "pithy.ui-kit.show",
+  "title": "<Show> Structural Component",
+  "category": "feature"
+}
+*/
+import { type Signal } from '@pithyjs/signals';
+/** @codexApi {"parent":"pithy.ui-kit.show","name":"ShowProps","stability":"stable","signature":"interface ShowProps"} */
+export interface ShowProps {
+    /** Reactive signal or static boolean controlling visibility */
+    when: Signal<unknown> | unknown;
+}
+/**
+ * Conditionally renders children when `when` is truthy.
+ * Renders `slot="fallback"` children when falsy.
+ *
+ * Delegates entirely to @if/@else and content projection —
+ * the existing framework handles reactivity, teardown, rebuild,
+ * and cleanup.
+ *
+ * @example
+ * ```html
+ * <Show when="isVisible">
+ *   <p>Visible content</p>
+ *   <p slot="fallback">Hidden — fallback content</p>
+ * </Show>
+ * ```
+ */
+/** @codexApi {"parent":"pithy.ui-kit.show","name":"Show","stability":"stable","signature":"(props: ShowProps) => { el: HTMLElement | DocumentFragment; destroy: () => void }"} */
+export declare function Show({ when }: ShowProps): {
+    el: HTMLElement | DocumentFragment;
+    destroy: () => void;
+};
+//# sourceMappingURL=Show.d.ts.map

package/dist/structural/Show.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Show.d.ts","sourceRoot":"","sources":["../../src/structural/Show.ts"],"names":[],"mappings":"AAAA;;;;;;EAME;AAEF,OAAO,EAAY,KAAK,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAGzD,yHAAyH;AACzH,MAAM,WAAW,SAAS;IACxB,+DAA+D;IAC/D,IAAI,EAAE,MAAM,CAAC,OAAO,CAAC,GAAG,OAAO,CAAC;CACjC;AAED;;;;;;;;;;;;;;;GAeG;AACH,kLAAkL;AAClL,wBAAgB,IAAI,CAAC,EAAE,IAAI,EAAE,EAAE,SAAS,GAAG;IACzC,EAAE,EAAE,WAAW,GAAG,gBAAgB,CAAC;IACnC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAOA"}

package/dist/structural/Show.js

@@ -0,0 +1,34 @@
+/** @codex
+{
+  "id": "pithy.ui-kit.show",
+  "title": "<Show> Structural Component",
+  "category": "feature"
+}
+*/
+import { isSignal } from '@pithyjs/signals';
+import { html } from '@pithyjs/core';
+/**
+ * Conditionally renders children when `when` is truthy.
+ * Renders `slot="fallback"` children when falsy.
+ *
+ * Delegates entirely to @if/@else and content projection —
+ * the existing framework handles reactivity, teardown, rebuild,
+ * and cleanup.
+ *
+ * @example
+ * ```html
+ * <Show when="isVisible">
+ *   <p>Visible content</p>
+ *   <p slot="fallback">Hidden — fallback content</p>
+ * </Show>
+ * ```
+ */
+/** @codexApi {"parent":"pithy.ui-kit.show","name":"Show","stability":"stable","signature":"(props: ShowProps) => { el: HTMLElement | DocumentFragment; destroy: () => void }"} */
+export function Show({ when }) {
+    const condition = isSignal(when) ? when : () => !!when;
+    return html `
+    <div @if="condition()"><slot></slot></div>
+    <div @else><slot name="fallback"></slot></div>
+  `;
+}
+//# sourceMappingURL=Show.js.map

package/dist/structural/Show.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Show.js","sourceRoot":"","sources":["../../src/structural/Show.ts"],"names":[],"mappings":"AAAA;;;;;;EAME;AAEF,OAAO,EAAE,QAAQ,EAAe,MAAM,kBAAkB,CAAC;AACzD,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAQrC;;;;;;;;;;;;;;;GAeG;AACH,kLAAkL;AAClL,MAAM,UAAU,IAAI,CAAC,EAAE,IAAI,EAAa;IAItC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;IAEvD,OAAO,IAAI,CAAA;;;GAGV,CAAC;AACJ,CAAC"}

package/dist/structural/nav-link.scss

@@ -0,0 +1,54 @@
+@use '@pithyjs/design-system/a11y/styles/mixins' as a11y;
+
+.ui-nav-link {
+  // Overridable base/hover/active colors — sections can set these to inherit
+  // contextual colors (e.g. --color-text-muted in footer, --color-text in contact)
+  --_nav-color: var(--color-primary);
+  --_nav-color-hover: var(--color-primary-hover);
+  --_nav-color-active: var(--color-primary-active);
+
+  color: var(--_nav-color);
+  text-decoration: underline;
+  text-decoration-color: var(--_nav-color);
+  text-decoration-thickness: var(--border-width-hairline);
+  text-underline-offset: 0.15em;
+  text-decoration-skip-ink: auto;
+
+  // Allow utility classes to opt out of underline (e.g. card NavLinks)
+  &.u-no-underline {
+    text-decoration: none;
+  }
+
+  &:hover {
+    color: var(--_nav-color-hover);
+    text-decoration: none;
+  }
+
+  &:active {
+    color: var(--_nav-color-active);
+  }
+
+  &:focus-visible {
+    color: var(--_nav-color-hover);
+    @include a11y.focus-ring;
+  }
+
+  @include a11y.motion-safe {
+    transition:
+      var(--motion-transition-color),
+      text-decoration-color var(--motion-duration-normal)
+        var(--motion-easing-standard);
+  }
+
+  @include a11y.forced-colors {
+    color: LinkText;
+    text-decoration-color: LinkText;
+
+    &:hover,
+    &:focus-visible,
+    &:active {
+      color: LinkText;
+      text-decoration: underline;
+    }
+  }
+}

package/dist/styles/index.scss

@@ -0,0 +1,58 @@
+/// UI Kit Component Styles
+/// Aggregates all component SCSS files.
+/// Import once in your app: `import '@pithyjs/ui-kit/styles'`
+
+// Design-system base — provides [hidden]{display:none!important} and other resets
+@use '@pithyjs/design-system/a11y/styles/utilities';
+
+// Atoms
+@use '../atoms/actions/button/button';
+@use '../atoms/actions/segmented-control/segmented-control';
+@use '../atoms/actions/icon-group/icon-group';
+@use '../atoms/actions/icon-button/icon-button';
+@use '../atoms/feedback/tooltip/tooltip';
+@use '../atoms/content/text/text';
+@use '../atoms/content/heading/heading';
+@use '../atoms/content/image/image';
+@use '../atoms/content/icon/icon';
+@use '../atoms/content/badge/badge';
+@use '../atoms/content/tile/tile';
+@use '../atoms/content/action-tile/action-tile';
+
+// Atoms — forms
+@use '../atoms/forms/input/input';
+@use '../atoms/forms/select/select';
+@use '../atoms/forms/textarea/textarea';
+@use '../atoms/forms/checkbox/checkbox';
+@use '../atoms/forms/radio/radio';
+@use '../atoms/forms/toggle/toggle';
+@use '../atoms/forms/form-field/form-field';
+@use '../atoms/forms/file-picker/file-picker';
+
+// Organisms — forms
+@use '../organisms/forms/form';
+@use '../organisms/forms/dynamic-form';
+
+// Organisms — navigation
+@use '../organisms/navigation/navbar';
+
+// Organisms — content
+@use '../organisms/content/card';
+
+// Organisms — feedback
+@use '../organisms/feedback/modal';
+@use '../organisms/feedback/popover';
+
+// Shared — slot media sizing (data-media-fit)
+@use '../shared/media-fit';
+
+// Structural
+@use '../structural/nav-link';
+
+// Sections
+@use '../sections/section-base';
+@use '../sections/hero/hero-section';
+@use '../sections/features/features-section';
+@use '../sections/cta/cta-section';
+@use '../sections/contact/contact-section';
+@use '../sections/footer/footer-section';

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@pithyjs/ui-kit",
+  "version": "0.1.0-beta.0",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./compiler": {
+      "types": "./dist/compiler.d.ts",
+      "import": "./dist/compiler.js"
+    },
+    "./registry": {
+      "types": "./dist/registry/index.d.ts",
+      "import": "./dist/registry/index.js"
+    },
+    "./registry/components": {
+      "types": "./dist/registry/components.d.ts",
+      "import": "./dist/registry/components.js"
+    },
+    "./registry/renderer": {
+      "types": "./dist/registry/renderer.d.ts",
+      "import": "./dist/registry/renderer.js"
+    },
+    "./icons": {
+      "types": "./dist/icons/index.d.ts",
+      "import": "./dist/icons/index.js"
+    },
+    "./styles": "./dist/styles/index.scss"
+  },
+  "dependencies": {
+    "@pithyjs/core": "0.1.0-beta.0",
+    "@pithyjs/design-system": "0.1.0-beta.0",
+    "@pithyjs/router": "0.1.0-beta.0",
+    "@pithyjs/shared": "0.1.0-beta.0",
+    "@pithyjs/signals": "0.1.0-beta.0"
+  },
+  "devDependencies": {
+    "happy-dom": "^20.0.3",
+    "jsdom": "^29.0.1",
+    "parse5": "^7.3.0",
+    "typescript": "^5.0.0",
+    "vitest": "^3.2.4",
+    "vitest-axe": "^0.1.0",
+    "@pithyjs/compiler": "0.1.0-beta.0",
+    "@pithyjs/vite-plugin": "0.1.0-beta.0"
+  },
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public",
+    "tag": "beta"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.json && node scripts/copy-scss.mjs",
+    "test": "vitest",
+    "sync-registry": "tsx scripts/sync-registry.ts"
+  }
+}