@businessdash/sdk 0.9.60

package/src/static.ts

@@ -0,0 +1,21 @@
+/**
+ * `@businessdash/sdk/static` — static data utilities and type helpers.
+ *
+ * Use this entrypoint for type‑safe enum / choice declarations and any other
+ * compile‑time static data definitions that ship with your collections.
+ *
+ * ```ts
+ * import { Enums } from "@businessdash/sdk/static";
+ *
+ * const Status = Enums(["active", "inactive"] as const);
+ * ```
+ */
+
+export {
+	type DefineEnums,
+	type Enum,
+	type EnumEntry,
+	Enums,
+	type InferEnum,
+	type InferEnumValues,
+} from "./enums.js";

package/src/styles/biab-forms.css

@@ -0,0 +1,484 @@
+/*
+ * @businessdash/sdk — optional form styles.
+ *
+ * Styles the parts of `<BiabForm>` that benefit from non-trivial layout: the
+ * date-range / slot pickers, the file-upload field, and the multi-step progress
+ * header (numbered-steps and bar variants). Base field/label/input chrome is
+ * left to the host app so the form adopts your design. Import once:
+ *
+ *     import "@businessdash/sdk/biab-forms.css";
+ *
+ * It is theme-aware: it reads the standard shadcn/COSS CSS variables
+ * (--primary, --muted, --border, --radius-md, …) and falls back to the COSS
+ * light-theme defaults when they aren't defined, so it looks right out of the box
+ * and adopts your theme when present. Containers are intentionally
+ * background-LESS — add a surface fill in your own app if you want one.
+ */
+
+.biab-daterange {
+	--biab-cell-size: 2rem;
+	--biab-radius: var(--radius-md, 0.375rem);
+	--biab-primary: var(--primary, oklch(0.205 0 0));
+	--biab-primary-fg: var(--primary-foreground, oklch(0.985 0 0));
+	--biab-muted: var(--muted, oklch(0.97 0 0));
+	--biab-muted-fg: var(--muted-foreground, oklch(0.556 0 0));
+	--biab-border: var(--border, oklch(0.922 0 0));
+	--biab-popover: var(--popover, oklch(1 0 0));
+	--biab-popover-fg: var(--popover-foreground, oklch(0.145 0 0));
+	--biab-accent: var(--accent, oklch(0.97 0 0));
+	position: relative;
+}
+
+/* Trigger — mirrors the COSS outline button (w-full justify-start). */
+.biab-daterange__trigger {
+	display: flex;
+	width: 100%;
+	align-items: center;
+	gap: 0.5rem;
+	height: 2.25rem;
+	padding: 0 0.75rem;
+	border: 1px solid var(--biab-border);
+	border-radius: var(--biab-radius);
+	background: transparent;
+	color: inherit;
+	font-size: 0.875rem;
+	text-align: left;
+	cursor: pointer;
+}
+.biab-daterange__trigger:hover {
+	background: var(--biab-accent);
+}
+
+/* Popover card — matches the COSS popover (bg-popover, border, rounded, shadow). */
+.biab-daterange__popover {
+	top: calc(100% + 4px);
+	left: 0;
+	width: max-content;
+	padding: 0.75rem;
+	border: 1px solid var(--biab-border);
+	border-radius: calc(var(--biab-radius) + 0.25rem);
+	background: var(--biab-popover);
+	color: var(--biab-popover-fg);
+	box-shadow:
+		0 4px 6px -1px rgb(0 0 0 / 0.1),
+		0 2px 4px -2px rgb(0 0 0 / 0.1);
+}
+
+/* Month nav — ghost prev/next flanking a centered caption. */
+.biab-daterange__nav {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 0.25rem;
+	margin-bottom: 0.5rem;
+}
+.biab-daterange__navbtn {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: var(--biab-cell-size);
+	height: var(--biab-cell-size);
+	padding: 0;
+	border: none;
+	border-radius: var(--biab-radius);
+	background: transparent;
+	color: inherit;
+	font-size: 1rem;
+	line-height: 1;
+	cursor: pointer;
+}
+.biab-daterange__navbtn:hover {
+	background: var(--biab-accent);
+}
+.biab-daterange__title {
+	flex: 1;
+	text-align: center;
+	font-size: 0.875rem;
+	font-weight: 500;
+	user-select: none;
+}
+
+/* Day grid. */
+.biab-daterange__grid {
+	display: grid;
+	grid-template-columns: repeat(7, var(--biab-cell-size));
+	gap: 0;
+}
+.biab-daterange__dow {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	height: var(--biab-cell-size);
+	font-size: 0.8rem;
+	font-weight: 400;
+	color: var(--biab-muted-fg);
+	user-select: none;
+}
+.biab-daterange__blank {
+	width: var(--biab-cell-size);
+	height: var(--biab-cell-size);
+}
+.biab-daterange__day {
+	width: var(--biab-cell-size);
+	height: var(--biab-cell-size);
+	border: none;
+	border-radius: var(--biab-radius);
+	background: transparent;
+	color: inherit;
+	font-size: 0.875rem;
+	line-height: 1;
+	cursor: pointer;
+	user-select: none;
+}
+.biab-daterange__day:hover {
+	background: var(--biab-accent);
+}
+
+/* today (when not selected) — matches COSS `today` (bg-muted). */
+.biab-daterange__day[data-today]:not([data-selected-single]):not(
+	[data-range-start]
+):not([data-range-end]):not([data-range-middle]) {
+	background: var(--biab-muted);
+	font-weight: 500;
+}
+
+/* Range middle — muted fill, square corners (connects the pill). */
+.biab-daterange__day[data-range-middle] {
+	background: var(--biab-muted);
+	color: var(--biab-popover-fg);
+	border-radius: 0;
+}
+
+/* Range start / end + single selection — solid primary, rounded on the outer
+ * edge so start→end reads as one connected pill (exactly like COSS). */
+.biab-daterange__day[data-range-start],
+.biab-daterange__day[data-range-end],
+.biab-daterange__day[data-selected-single] {
+	background: var(--biab-primary);
+	color: var(--biab-primary-fg);
+}
+.biab-daterange__day[data-range-start] {
+	border-top-right-radius: 0;
+	border-bottom-right-radius: 0;
+}
+.biab-daterange__day[data-range-end] {
+	border-top-left-radius: 0;
+	border-bottom-left-radius: 0;
+}
+.biab-daterange__day[data-range-start]:hover,
+.biab-daterange__day[data-range-end]:hover,
+.biab-daterange__day[data-selected-single]:hover {
+	background: var(--biab-primary);
+}
+
+/* ── Auto-schedule (instant booking) slot picker ─────────────────────────── */
+.biab-field__schedule-auto {
+	display: flex;
+	flex-direction: column;
+	gap: 0.75rem;
+	max-height: 18rem;
+	overflow-y: auto;
+}
+.biab-field__schedule-day-label {
+	margin: 0 0 0.25rem;
+	font-size: 0.8125rem;
+	font-weight: 600;
+}
+.biab-field__schedule-times {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0.375rem;
+}
+.biab-field__schedule-slot {
+	border: 1px solid var(--biab-border, #d4d4d8);
+	background: var(--biab-card, #fff);
+	border-radius: 9999px;
+	padding: 0.25rem 0.75rem;
+	font-size: 0.875rem;
+	cursor: pointer;
+}
+.biab-field__schedule-slot:hover {
+	background: var(--biab-muted, #f4f4f5);
+}
+.biab-field__schedule-slot[data-selected="true"] {
+	background: var(--biab-primary);
+	color: var(--biab-primary-fg);
+	border-color: var(--biab-primary);
+}
+.biab-field__schedule-hint {
+	font-size: 0.875rem;
+	color: var(--biab-muted-fg, #71717a);
+}
+
+/* ── Shared theme tokens for the components below ─────────────────────────── */
+/* Same theme-aware pattern as `.biab-daterange`: read the host's shadcn/COSS
+ * vars, fall back to neutral light defaults. Containers are intentionally
+ * background-LESS — the host app adds a surface fill if it wants one. */
+.biab-field__files,
+.biab-field__schedule,
+.biab-progress {
+	--biab-radius: var(--radius-md, 0.5rem);
+	--biab-primary: var(--primary, oklch(0.205 0 0));
+	--biab-primary-fg: var(--primary-foreground, oklch(0.985 0 0));
+	--biab-muted: var(--muted, oklch(0.97 0 0));
+	--biab-muted-fg: var(--muted-foreground, oklch(0.556 0 0));
+	--biab-border: var(--border, oklch(0.922 0 0));
+	--biab-accent: var(--accent, oklch(0.97 0 0));
+}
+
+/* ── File upload ─────────────────────────────────────────────────────────── */
+.biab-field__files {
+	display: flex;
+	flex-direction: column;
+	gap: 0.5rem;
+}
+/* The picker — a dashed drop-zone box. No background fill by default.
+ * `appearance: auto` + the text resets defend the NATIVE file control against a
+ * host app's global input styling (e.g. `appearance: none` / letter-spacing),
+ * which otherwise glitches the "Choose file" text and its layout in Safari. */
+.biab-field__fileinput {
+	-webkit-appearance: auto;
+	appearance: auto;
+	box-sizing: border-box;
+	display: block;
+	width: 100%;
+	max-width: 100%;
+	padding: 0.75rem;
+	border: 1.5px dashed var(--biab-border);
+	border-radius: var(--biab-radius);
+	background: transparent;
+	color: var(--biab-muted-fg);
+	font-size: 0.875rem;
+	line-height: normal;
+	letter-spacing: normal;
+	cursor: pointer;
+	transition: border-color 0.15s ease;
+}
+.biab-field__fileinput:hover:not(:disabled) {
+	border-color: var(--biab-primary);
+}
+.biab-field__fileinput:disabled {
+	opacity: 0.55;
+	cursor: not-allowed;
+}
+/* The native "choose file" control — styled as an obvious button (it's a
+ * control, not a container, so it carries a fill). */
+.biab-field__fileinput::file-selector-button {
+	margin-right: 0.75rem;
+	padding: 0.35rem 0.75rem;
+	border: none;
+	border-radius: calc(var(--biab-radius) - 0.15rem);
+	background: var(--biab-primary);
+	color: var(--biab-primary-fg);
+	font-size: 0.8125rem;
+	font-weight: 600;
+	cursor: pointer;
+}
+/* Selected-file rows — bordered, no fill. */
+.biab-field__filelist {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+	display: flex;
+	flex-direction: column;
+	gap: 0.375rem;
+}
+.biab-field__fileitem {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+	padding: 0.4rem 0.625rem;
+	border: 1px solid var(--biab-border);
+	border-radius: var(--biab-radius);
+	background: transparent;
+	font-size: 0.8125rem;
+}
+.biab-field__filename {
+	flex: 1;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+.biab-field__filepending {
+	flex-shrink: 0;
+	color: var(--biab-muted-fg);
+	font-size: 0.75rem;
+	white-space: nowrap;
+}
+.biab-field__fileremove {
+	flex-shrink: 0;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 1.25rem;
+	height: 1.25rem;
+	border: none;
+	border-radius: 9999px;
+	background: transparent;
+	color: var(--biab-muted-fg);
+	font-size: 1.1rem;
+	line-height: 1;
+	cursor: pointer;
+	transition: color 0.15s ease;
+}
+.biab-field__fileremove:hover {
+	color: var(--biab-primary);
+}
+
+/* ── Progress header — steps ─────────────────────────────────────────────── */
+.biab-progress {
+	margin-bottom: 1.25rem;
+}
+.biab-progress--steps {
+	display: flex;
+	align-items: center;
+	gap: 0.25rem;
+}
+.biab-progress__line {
+	flex: 1;
+	height: 2px;
+	border-radius: 1px;
+	background: var(--biab-border);
+}
+.biab-progress__line--done {
+	background: var(--biab-primary);
+}
+.biab-progress__step {
+	display: inline-flex;
+	align-items: center;
+	gap: 0.4rem;
+	padding: 0.25rem 0.4rem;
+	border: none;
+	background: transparent;
+	color: var(--biab-muted-fg);
+	font-size: 0.8125rem;
+	cursor: pointer;
+}
+/* The step number/check — a small indicator circle (filled only once done). */
+.biab-progress__num {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	flex-shrink: 0;
+	width: 1.5rem;
+	height: 1.5rem;
+	border-radius: 9999px;
+	border: 1.5px solid var(--biab-border);
+	background: transparent;
+	color: var(--biab-muted-fg);
+	font-size: 0.8125rem;
+	font-weight: 600;
+}
+.biab-progress__step--current .biab-progress__num {
+	border-color: var(--biab-primary);
+	color: var(--biab-primary);
+}
+.biab-progress__step--done .biab-progress__num {
+	border-color: var(--biab-primary);
+	background: var(--biab-primary);
+	color: var(--biab-primary-fg);
+}
+.biab-progress__title {
+	white-space: nowrap;
+}
+.biab-progress__step--current .biab-progress__title {
+	color: var(--biab-primary);
+	font-weight: 600;
+}
+/* Compact: drop step labels on narrow viewports so the row doesn't wrap. */
+@media (max-width: 520px) {
+	.biab-progress__title {
+		display: none;
+	}
+}
+
+/* ── Progress header — bar ───────────────────────────────────────────────── */
+.biab-progress--bar {
+	display: flex;
+	flex-direction: column;
+	gap: 0.375rem;
+}
+.biab-progress__count {
+	font-size: 0.8125rem;
+	font-weight: 500;
+	color: var(--biab-muted-fg);
+}
+/* The track is intrinsic to a progress bar (it shows the unfilled portion), so
+ * it keeps a muted fill — it's the control, not a layout container. */
+.biab-progress__track {
+	width: 100%;
+	height: 0.5rem;
+	border-radius: 9999px;
+	background: var(--biab-muted);
+	overflow: hidden;
+}
+.biab-progress__fill {
+	height: 100%;
+	border-radius: 9999px;
+	background: var(--biab-primary);
+	transition: width 0.3s ease;
+}
+
+/* ── Availability (capture mode) — ASAP + day/time chips ──────────────────── */
+.biab-field__schedule {
+	display: flex;
+	flex-direction: column;
+	gap: 0.875rem;
+}
+.biab-field__schedule-asap {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+	cursor: pointer;
+}
+.biab-field__schedule-asap input {
+	width: 1rem;
+	height: 1rem;
+	accent-color: var(--biab-primary);
+}
+.biab-field__schedule-group {
+	display: flex;
+	flex-direction: column;
+	gap: 0.4rem;
+}
+.biab-field__schedule-label {
+	font-size: 0.8125rem;
+	font-weight: 600;
+	color: var(--biab-muted-fg);
+}
+.biab-field__schedule-chips {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0.4rem;
+}
+
+/* Toggle chips (day/time choices, and any `biab-field__chip` elsewhere). The
+ * selected state (`--on`) is a solid primary fill so a pick is unmistakable. */
+.biab-field__chip {
+	-webkit-appearance: none;
+	appearance: none;
+	padding: 0.35rem 0.85rem;
+	border: 1px solid var(--biab-border);
+	border-radius: 9999px;
+	background: transparent;
+	color: inherit;
+	font-size: 0.875rem;
+	line-height: 1.2;
+	cursor: pointer;
+	transition:
+		background 0.15s ease,
+		border-color 0.15s ease,
+		color 0.15s ease;
+}
+.biab-field__chip:hover {
+	border-color: var(--biab-primary);
+	background: var(--biab-accent);
+}
+.biab-field__chip--on {
+	border-color: var(--biab-primary);
+	background: var(--biab-primary);
+	color: var(--biab-primary-fg);
+}
+.biab-field__chip--on:hover {
+	background: var(--biab-primary);
+}