@duskmoon-dev/components 0.4.0 → 0.4.1

package/dist/components/json-schema-form/json-form-widgets.d.ts

@@ -0,0 +1,26 @@
+import type { JsonValue, RenderableSchema } from "./json-schema-form";
+export declare const widgetNames: readonly ["input", "input-number", "checkbox", "radio", "radio-group", "checkbox-group", "color-picker", "date-picker", "dm-date-picker", "mentions", "otp-input", "rate", "segmented", "select", "slider", "switch", "time-picker", "transfer", "tree-select", "cascader", "upload"];
+export type WidgetName = (typeof widgetNames)[number];
+export type WidgetOption = {
+    value: string | number | boolean;
+    label: string;
+    children?: WidgetOption[];
+    disabled?: boolean;
+};
+export type OrientationWidgetConfig = {
+    orientation?: "horizontal" | "vertical";
+};
+export type WidgetConfig = OrientationWidgetConfig & {
+    length?: number;
+    count?: number;
+    allowHalf?: boolean;
+    min?: number;
+    max?: number;
+    step?: number;
+};
+export declare const flattenOptions: (options: WidgetOption[]) => WidgetOption[];
+export declare function widgetConfig(schema: RenderableSchema): WidgetConfig;
+export declare function naturalWidgetValue(schema: RenderableSchema): JsonValue | undefined;
+export declare function optionsFor(schema: RenderableSchema): WidgetOption[];
+export declare function inspectWidgets(input: Record<string, unknown>, location: string): void;
+export declare function widgetValueError(schema: RenderableSchema, value: JsonValue): string | undefined;

package/dist/components/json-schema-form/json-schema-form.d.ts

@@ -0,0 +1,50 @@
+import { type WidgetName, type WidgetOption, type WidgetConfig } from "./json-form-widgets";
+export type JsonValue = null | boolean | number | string | JsonValue[] | {
+    [key: string]: JsonValue;
+};
+export type FormValue = {
+    [key: string]: JsonValue;
+};
+export type RenderableSchema = {
+    type: "object" | "array" | "string" | "number" | "integer" | "boolean";
+    $schema?: "https://json-schema.org/draft/2020-12/schema";
+    $id?: string;
+    $comment?: string;
+    title?: string;
+    description?: string;
+    default?: JsonValue;
+    enum?: JsonValue[];
+    properties?: Record<string, RenderableSchema>;
+    required?: string[];
+    items?: RenderableSchema;
+    additionalProperties?: false;
+    minLength?: number;
+    maxLength?: number;
+    pattern?: string;
+    format?: string;
+    minItems?: number;
+    maxItems?: number;
+    uniqueItems?: boolean;
+    minProperties?: number;
+    maxProperties?: number;
+    exclusiveMinimum?: number;
+    exclusiveMaximum?: number;
+    minimum?: number;
+    maximum?: number;
+    multipleOf?: number;
+    "x-widget"?: WidgetName;
+    "x-options"?: WidgetOption[];
+    "x-widget-options"?: WidgetConfig;
+};
+/** Errors keyed by escaped JSON Pointer, with an empty key for form errors. */
+export type FormErrors = Record<string, string>;
+export type FormValidationResult = {
+    valid: boolean;
+    errors: FormErrors;
+};
+export type CompiledForm = {
+    schema: RenderableSchema;
+    initialValue: () => FormValue;
+    validate: (value: FormValue) => FormValidationResult;
+};
+export declare function compileForm(input: unknown): CompiledForm;

package/dist/components/select/index.js

@@ -172,11 +172,17 @@ var OptGroup = forwardRef(({ children, ...props }, ref) => /* @__PURE__ */ jsx("
 OptGroup.displayName = "Select.OptGroup";
 var SelectRoot = forwardRef(({
   allowClear,
+  "aria-describedby": ariaDescribedBy,
+  "aria-errormessage": ariaErrorMessage,
+  "aria-invalid": ariaInvalid,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
   children,
   className,
   defaultValue,
   disabled,
   filterOption,
+  id,
   loading,
   mode,
   onChange,
@@ -299,8 +305,14 @@ var SelectRoot = forwardRef(({
     children: [
       /* @__PURE__ */ jsxs("button", {
         type: "button",
+        id,
         className: getSelectClasses({ size, status, disabled }),
         disabled: disabled || loading,
+        "aria-describedby": ariaDescribedBy,
+        "aria-errormessage": ariaErrorMessage,
+        "aria-invalid": ariaInvalid,
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledBy,
         "aria-haspopup": "listbox",
         "aria-expanded": open,
         onClick: () => setOpen((current) => !current),

package/dist/generated/version.d.ts

@@ -1 +1 @@
-export declare const version = "0.4.0";
+export declare const version = "0.4.1";

package/dist/index.js

@@ -107,7 +107,7 @@ function duskmoonMerge(classes) {
 import { useCallback as useCallback2, useState as useState2 } from "react";
 
 // src/generated/version.ts
-var version = "0.4.0";
+var version = "0.4.1";
 
 // src/infrastructure.ts
 var theme = {
@@ -8535,11 +8535,17 @@ var OptGroup = forwardRef37(({ children, ...props }, ref) => /* @__PURE__ */ jsx
 OptGroup.displayName = "Select.OptGroup";
 var SelectRoot = forwardRef37(({
   allowClear,
+  "aria-describedby": ariaDescribedBy,
+  "aria-errormessage": ariaErrorMessage,
+  "aria-invalid": ariaInvalid,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
   children,
   className,
   defaultValue,
   disabled,
   filterOption,
+  id,
   loading,
   mode,
   onChange,
@@ -8662,8 +8668,14 @@ var SelectRoot = forwardRef37(({
     children: [
       /* @__PURE__ */ jsxs33("button", {
         type: "button",
+        id,
         className: getSelectClasses({ size, status, disabled }),
         disabled: disabled || loading,
+        "aria-describedby": ariaDescribedBy,
+        "aria-errormessage": ariaErrorMessage,
+        "aria-invalid": ariaInvalid,
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledBy,
         "aria-haspopup": "listbox",
         "aria-expanded": open,
         onClick: () => setOpen((current) => !current),

package/dist/infrastructure.js

@@ -4,7 +4,7 @@
 import { useCallback, useState } from "react";
 
 // src/generated/version.ts
-var version = "0.4.0";
+var version = "0.4.1";
 
 // src/infrastructure.ts
 var theme = {

package/dist/styles.css

@@ -25543,7 +25543,8 @@ html {
     overflow: hidden;
   }
 
-  :is(.modal-backdrop:not(dialog) > .modal:not(dialog), .react-modal-box) .modal-header {
+  :is(.modal-backdrop:not(dialog) > .modal:not(dialog), .react-modal-box)
+    .modal-header {
     display: flex;
     align-items: flex-start;
     gap: 16px;
@@ -25551,7 +25552,8 @@ html {
     border-block-end: 1px solid var(--color-outline-variant);
   }
 
-  :is(.modal-backdrop:not(dialog) > .modal:not(dialog), .react-modal-box) .modal-title {
+  :is(.modal-backdrop:not(dialog) > .modal:not(dialog), .react-modal-box)
+    .modal-title {
     margin: 0;
     color: var(--color-on-surface);
     font-size: 1rem;
@@ -25559,7 +25561,8 @@ html {
     line-height: 1.4;
   }
 
-  :is(.modal-backdrop:not(dialog) > .modal:not(dialog), .react-modal-box) .modal-body {
+  :is(.modal-backdrop:not(dialog) > .modal:not(dialog), .react-modal-box)
+    .modal-body {
     flex: 1 1 auto;
     min-height: 0;
     padding: 20px;
@@ -25568,7 +25571,8 @@ html {
     line-height: 1.5;
   }
 
-  :is(.modal-backdrop:not(dialog) > .modal:not(dialog), .react-modal-box) .modal-footer {
+  :is(.modal-backdrop:not(dialog) > .modal:not(dialog), .react-modal-box)
+    .modal-footer {
     display: flex;
     justify-content: flex-end;
     gap: 8px;
@@ -25580,7 +25584,9 @@ html {
     margin-top: 0;
   }
 
-  :is(.modal-backdrop:not(dialog) > .modal:not(dialog), .react-modal-box) .modal-footer > button {
+  :is(.modal-backdrop:not(dialog) > .modal:not(dialog), .react-modal-box)
+    .modal-footer
+    > button {
     min-height: 2.25rem;
     padding: 0 14px;
     color: var(--color-on-surface);
@@ -25592,18 +25598,23 @@ html {
     cursor: pointer;
   }
 
-  :is(.modal-backdrop:not(dialog) > .modal:not(dialog), .react-modal-box) .modal-footer > button:last-child {
+  :is(.modal-backdrop:not(dialog) > .modal:not(dialog), .react-modal-box)
+    .modal-footer
+    > button:last-child {
     color: var(--color-primary-content);
     background: var(--color-primary);
     border-color: var(--color-primary);
   }
 
-  :is(.modal-backdrop:not(dialog) > .modal:not(dialog), .react-modal-box) .modal-footer > button:disabled {
+  :is(.modal-backdrop:not(dialog) > .modal:not(dialog), .react-modal-box)
+    .modal-footer
+    > button:disabled {
     cursor: not-allowed;
     opacity: 0.55;
   }
 
-  :is(.modal-backdrop:not(dialog) > .modal:not(dialog), .react-modal-box) .modal-close {
+  :is(.modal-backdrop:not(dialog) > .modal:not(dialog), .react-modal-box)
+    .modal-close {
     position: absolute;
     top: 12px;
     right: 12px;
@@ -25622,8 +25633,10 @@ html {
     cursor: pointer;
   }
 
-  :is(.modal-backdrop:not(dialog) > .modal:not(dialog), .react-modal-box) .modal-close:hover,
-  :is(.modal-backdrop:not(dialog) > .modal:not(dialog), .react-modal-box) .modal-close:focus-visible {
+  :is(.modal-backdrop:not(dialog) > .modal:not(dialog), .react-modal-box)
+    .modal-close:hover,
+  :is(.modal-backdrop:not(dialog) > .modal:not(dialog), .react-modal-box)
+    .modal-close:focus-visible {
     color: var(--color-on-surface);
     background: var(--color-surface-container);
     outline: none;
@@ -29163,3 +29176,200 @@ html {
     );
   }
 }
+
+/* JSON Schema renderer layout. */
+.schema-form {
+  max-width: none;
+}
+
+.schema-form .schema-object,
+.schema-form .schema-array {
+  display: grid;
+  gap: 1rem;
+  min-width: 0;
+  margin: 0;
+  padding: 1rem;
+  border: 1px solid var(--color-outline, currentColor);
+  border-radius: 8px;
+}
+
+.schema-form > .schema-object {
+  padding: 0;
+  border: 0;
+}
+
+.schema-form .schema-object legend,
+.schema-form .schema-array legend {
+  padding: 0 0.25rem;
+  color: var(--color-on-surface);
+  font-weight: 700;
+}
+
+.schema-form .schema-choice-group {
+  display: grid;
+  gap: 0.5rem;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
+.schema-form .schema-choice-group legend {
+  margin-bottom: 0.5rem;
+  padding: 0;
+  color: var(--color-on-surface);
+  font-weight: 500;
+}
+
+.schema-form .schema-choice-options {
+  display: grid;
+  justify-items: start;
+  gap: 0.75rem;
+  min-width: 0;
+}
+
+.schema-form .schema-choice-horizontal .schema-choice-options {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.75rem 1rem;
+}
+
+.schema-form .schema-choice-options > label {
+  max-width: 100%;
+  overflow-wrap: anywhere;
+}
+
+.schema-form .schema-choice-group .schema-field-error {
+  margin: 0;
+  font-size: 0.75rem;
+}
+
+.schema-form .schema-required::before {
+  margin-right: 0.25rem;
+  color: var(--color-error);
+  content: "*";
+}
+
+.schema-form .schema-description,
+.schema-form .form-item-extra {
+  margin: 0;
+  color: var(--color-on-surface-variant);
+  font-size: 0.75rem;
+  line-height: 1.4;
+}
+
+.schema-form .form-item-extra p,
+.schema-form .form-item-help p {
+  margin: 0;
+}
+
+.schema-form .schema-array-item {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: start;
+  gap: 0.5rem;
+  min-width: 0;
+}
+
+.schema-form .schema-array-item > .schema-array-remove {
+  grid-column: 2;
+  grid-row: 1;
+  align-self: center;
+}
+
+.schema-form .schema-array-remove svg {
+  display: block;
+}
+
+/* Share the label and control rows so wrapped labels keep actions aligned. */
+.schema-form .schema-array-item:has(> .form-item) {
+  grid-template-rows: auto;
+  row-gap: 0.375rem;
+}
+
+.schema-form
+  .schema-array-item:has(
+    > .form-item > :is(.form-item-help, .form-item-extra)
+  ) {
+  grid-template-rows: auto auto;
+}
+
+.schema-form
+  .schema-array-item:has(> .form-item > .form-item-help):has(
+    > .form-item > .form-item-extra
+  ) {
+  grid-template-rows: auto auto auto;
+}
+
+.schema-form .schema-array-item:has(> .form-item > .form-item-label) {
+  grid-template-rows: auto auto;
+}
+
+.schema-form
+  .schema-array-item:has(> .form-item > .form-item-label):has(
+    > .form-item > :is(.form-item-help, .form-item-extra)
+  ) {
+  grid-template-rows: auto auto auto;
+}
+
+.schema-form
+  .schema-array-item:has(> .form-item > .form-item-label):has(
+    > .form-item > .form-item-help
+  ):has(> .form-item > .form-item-extra) {
+  grid-template-rows: auto auto auto auto;
+}
+
+.schema-form .schema-array-item > .form-item {
+  grid-column: 1;
+  grid-row: 1 / -1;
+  grid-template-rows: subgrid;
+}
+
+.schema-form .schema-array-item > .form-item > .form-item-control {
+  align-self: center;
+}
+
+.schema-form
+  .schema-array-item:has(> .form-item > .form-item-label)
+  > .schema-array-remove {
+  grid-row: 2;
+}
+
+.schema-form .schema-array > button {
+  justify-self: start;
+}
+
+.schema-form .schema-form-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+}
+
+.schema-form [role="alert"] {
+  color: var(--color-error, #b42318);
+}
+
+/* Schema fields own their labels, including composite workflow controls. */
+.schema-form .schema-specialized-field {
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+.schema-form .schema-specialized-field > legend {
+  margin-bottom: 0.5rem;
+  font-weight: 500;
+}
+.schema-form .schema-widget {
+  min-width: 0;
+}
+.schema-form .schema-widget-value {
+  margin: 0.5rem 0 0;
+  overflow-wrap: anywhere;
+  font-size: 0.75rem;
+  color: var(--color-on-surface-variant);
+}
+.schema-form .schema-widget > :is(.cascader-container, .tree-select) {
+  width: 100%;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duskmoon-dev/components",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -419,7 +419,11 @@
       "import": "./dist/components/swap/index.js",
       "types": "./dist/components/swap/index.d.ts"
     },
-    "./styles.css": "./dist/styles.css"
+    "./styles.css": "./dist/styles.css",
+    "./json-schema-form": {
+      "import": "./dist/components/json-schema-form/index.js",
+      "types": "./dist/components/json-schema-form/index.d.ts"
+    }
   },
   "files": [
     "dist",
@@ -476,7 +480,9 @@
     "clsx": "^2.1.1",
     "react-markdown": "^10.1.0",
     "remark-breaks": "^4.0.0",
-    "remark-gfm": "^4.0.1"
+    "remark-gfm": "^4.0.1",
+    "ajv": "^8.20.0",
+    "ajv-formats": "^3.0.1"
   },
   "devDependencies": {
     "@duskmoon-dev/core": "1.20.3",