@kahitsan/ksui 0.4.0 → 0.5.0

package/README.md

@@ -1,7 +1,14 @@
 # @kahitsan/ksui
 
+[![npm version](https://img.shields.io/npm/v/@kahitsan/ksui.svg)](https://www.npmjs.com/package/@kahitsan/ksui)
+[![npm downloads](https://img.shields.io/npm/dm/@kahitsan/ksui.svg)](https://www.npmjs.com/package/@kahitsan/ksui)
+[![license](https://img.shields.io/npm/l/@kahitsan/ksui.svg)](./LICENSE)
+
 A set of UI components for SolidJS apps, built and used by the KahitSan team.
 
+On npm: [@kahitsan/ksui](https://www.npmjs.com/package/@kahitsan/ksui). Docs:
+[ksui.kahitsan.com](https://ksui.kahitsan.com/).
+
 ## What this is
 
 `@kahitsan/ksui` is a small library of ready-made user interface pieces for
@@ -15,7 +22,7 @@ the docs (see below), so this README stays short on purpose.
 
 ## Where you can use it
 
-There are two ways to use ksui.
+There are two ways to use KSUI.
 
 1. **In your own SolidJS project.** Install it from npm and use the components
    like any other dependency. It is MIT licensed, so you are free to use it in
@@ -46,7 +53,7 @@ We do not list every component here on purpose, so this README does not fall out
 of date as the set grows. The complete, current catalog, with a live example and
 the props for each one, is in the docs:
 
-**https://kahitsan.github.io/ksui/**
+**https://ksui.kahitsan.com/**
 
 ## Install
 
@@ -114,7 +121,7 @@ to mock the host kit and stub those calls so you can see every component render.
 The full documentation site, with a component-by-component guide and setup steps,
 will be at:
 
-https://kahitsan.github.io/ksui/
+https://ksui.kahitsan.com/
 
 ## Contributing
 
@@ -123,6 +130,11 @@ up the repo, the code style we follow, and how to send a change.
 
 ## License
 
-MIT. See [LICENSE](./LICENSE). You are free to use ksui in your own personal or
+MIT. See [LICENSE](./LICENSE). You are free to use KSUI in your own personal or
 commercial SolidJS projects, as long as you keep the MIT license notice. Source
 lives at https://github.com/KahitSan/ksui.
+
+---
+
+Created with ♥ by [Luis Edward Miranda](https://github.com/llupRisinglll) for
+KahitSan Corp.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kahitsan/ksui",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "ksui is a set of shared SolidJS UI components plus the @kserp/host-ui type contract for KahitSan/Hilinga plugins. Published to the public npm registry and consumed as a normal dependency. Ships source under a `solid` export condition so the consumer's vite-plugin-solid compiles it with solid-js + @kserp/host-ui externalized to the host runtime.",
   "type": "module",
   "main": "./src/index.ts",

package/src/components/base/DateTile.tsx

@@ -0,0 +1,84 @@
+// DateTile — a compact calendar day cell.
+//
+// A 60x68 tile with three stacked parts: a small top band (e.g. a month
+// label), a big primary value (e.g. the day-of-month), and an optional
+// muted sub-label (e.g. hours worked, a count, a short note). It is the
+// visual unit a caller repeats into a ledger-style row of days — scanned
+// like a register, not rendered as a full month grid.
+//
+// Domain-free by design: it knows nothing about timesheets, payroll, or any
+// data shape. The caller formats every string it shows (`topLabel`,
+// `value`, `subLabel`) and owns selection state. Pass `onToggle` to make the
+// tile an interactive, selectable button (with `aria-pressed`); omit it for a
+// static, read-only cell that renders dimmed so a row can show which tiles are
+// "in" vs "out" of a selection at a glance.
+
+import { Show, type JSX } from "solid-js";
+import { Dynamic } from "solid-js/web";
+
+export interface DateTileProps {
+  /** The big primary value — typically a day-of-month number, but any short
+   *  string works (the caller formats it). */
+  value: number | string;
+  /** Small uppercase band above the value, e.g. a month label ("MAY"). */
+  topLabel?: string;
+  /** Muted line below the value, e.g. "10h" or a short count. */
+  subLabel?: string;
+  /** Selected state. For interactive tiles this drives the amber accent +
+   *  `aria-pressed`; ignored for read-only tiles (they always render "on"). */
+  selected?: boolean;
+  /** Make the tile a selectable button. When omitted the tile is a static,
+   *  non-interactive cell. */
+  onToggle?: () => void;
+  /** Optional test id, applied only to interactive tiles. */
+  testId?: string;
+}
+
+export default function DateTile(props: DateTileProps): JSX.Element {
+  const interactive = (): boolean => !!props.onToggle;
+  const on = (): boolean => (interactive() ? props.selected ?? false : true);
+  return (
+    <Dynamic
+      component={interactive() ? "button" : "div"}
+      type={interactive() ? "button" : undefined}
+      onClick={props.onToggle}
+      aria-pressed={interactive() ? on() : undefined}
+      data-testid={interactive() ? props.testId : undefined}
+      style={{ width: "60px", height: "68px", flex: "0 0 auto" }}
+      class={`${interactive() ? "cursor-pointer" : ""} flex flex-col rounded-md overflow-hidden border transition-colors`}
+      classList={{
+        "border-amber-500/25 bg-zinc-800/40": on(),
+        "border-zinc-800/60 bg-zinc-900/40 opacity-50 hover:opacity-80": !on(),
+      }}
+    >
+      <div
+        style={{ height: "18px" }}
+        class="flex items-center justify-center text-[9px] font-semibold uppercase tracking-[0.15em] bg-zinc-800/70 text-zinc-500"
+      >
+        {props.topLabel ?? ""}
+      </div>
+      <div class="flex-1 flex flex-col items-center justify-center">
+        <div
+          class="text-xl font-semibold leading-none tabular-nums"
+          classList={{
+            "text-amber-400/90": on(),
+            "text-zinc-500": !on(),
+          }}
+        >
+          {props.value}
+        </div>
+        <Show when={props.subLabel != null && props.subLabel !== ""}>
+          <div
+            class="text-[9px] mt-0.5 tabular-nums"
+            classList={{
+              "text-zinc-500": on(),
+              "text-zinc-700": !on(),
+            }}
+          >
+            {props.subLabel}
+          </div>
+        </Show>
+      </div>
+    </Dynamic>
+  );
+}

package/src/index.ts

@@ -63,6 +63,7 @@ export { default as KpiCard, type KpiCardProps, type KpiTone } from "./component
 export { default as RadioCardGroup } from "./components/base/RadioCardGroup";
 export { default as FormErrorBanner } from "./components/base/FormErrorBanner";
 export { default as TagPill } from "./components/base/TagPill";
+export { default as DateTile, type DateTileProps } from "./components/base/DateTile";
 
 // ---------------------------------------------------------------------------
 // Composite components