@golemui/gui-shared 0.0.2

package/CHANGELOG.md

@@ -0,0 +1,11 @@
+## 0.19.0 (2026-03-02)
+
+### 🩹 Fixes
+
+- ammend imports ([1ba7690a](https://github.com/golemui/formforge/commit/1ba7690a))
+- ammend imports ([fc285e13](https://github.com/golemui/formforge/commit/fc285e13))
+- gui-shared library ([e70470d9](https://github.com/golemui/formforge/commit/e70470d9))
+
+### ❤️ Thank You
+
+- joanllenas

package/README.md

@@ -0,0 +1,11 @@
+# gui-shared
+
+This library was generated with [Nx](https://nx.dev).
+
+## Building
+
+Run `nx build gui-shared` to build the library.
+
+## Running unit tests
+
+Run `nx test gui-shared` to execute the unit tests via [Vitest](https://vitest.dev/).

package/index.d.ts

@@ -0,0 +1,6 @@
+export * from './lib/golem-form';
+export * from './lib/widget.props';
+export * from './lib/widgets';
+export * from './lib/widget.factory';
+export * from './lib/middleware/json-schema-vanilla';
+export * from './lib/utils';

package/index.js

@@ -0,0 +1,179 @@
+class a {
+  create(e) {
+    return {
+      states: e.states,
+      form: {
+        uid: "gui-root-uid",
+        type: "flex",
+        kind: "layout",
+        children: e.form
+      }
+    };
+  }
+}
+function s() {
+  return new a();
+}
+const r = [
+  "calendar",
+  "checkbox",
+  "currency",
+  "dateInput",
+  "datePicker",
+  "dropdown",
+  "list",
+  "number",
+  "password",
+  "radiogroup",
+  "rangeCalendar",
+  "repeater",
+  "select",
+  "textarea",
+  "textinput",
+  "toggle"
+], l = ["accordion", "flex", "tabs"], u = ["alert", "renderer"], o = ["button"], p = [
+  ...r,
+  ...l,
+  ...u,
+  ...o
+], i = {
+  //
+  // Input widgets
+  //
+  textinput: ({
+    config: t,
+    props: e,
+    validator: n
+  }) => ({
+    uid: "",
+    kind: "input",
+    type: "textinput",
+    // The `props` key only exists in the returned object when `props` is actually provided
+    ...e && { props: e },
+    ...n && { validator: n },
+    ...t
+  }),
+  password: ({
+    config: t,
+    props: e,
+    validator: n
+  }) => ({
+    uid: "",
+    kind: "input",
+    type: "password",
+    // The `props` key only exists in the returned object when `props` is actually provided
+    ...e && { props: e },
+    ...n && { validator: n },
+    ...t
+  }),
+  numberinput: ({
+    config: t,
+    props: e,
+    validator: n
+  }) => ({
+    uid: "",
+    kind: "input",
+    type: "numberinput",
+    ...e && { props: e },
+    ...n && { validator: n },
+    ...t
+  }),
+  checkbox: ({
+    config: t,
+    props: e,
+    validator: n
+  }) => ({
+    uid: "",
+    kind: "input",
+    type: "checkbox",
+    ...e && { props: e },
+    ...n && { validator: n },
+    ...t
+  }),
+  select: ({
+    config: t,
+    props: e,
+    validator: n
+  }) => ({
+    uid: "",
+    kind: "input",
+    type: "select",
+    ...e && { props: e },
+    ...n && { validator: n },
+    ...t
+  }),
+  //
+  // Layout widgets
+  //
+  flex: (t, e) => ({
+    uid: "",
+    kind: "layout",
+    type: "flex",
+    ...e && { props: e },
+    ...t
+  }),
+  tabs: (t, e) => ({
+    uid: "",
+    kind: "layout",
+    type: "tabs",
+    ...e && { props: e },
+    ...t
+  }),
+  //
+  // Display widgets
+  //
+  alert: (t, e) => ({
+    uid: "",
+    kind: "display",
+    type: "alert",
+    ...e && { props: e },
+    ...t
+  })
+}, c = (t) => t !== null && typeof t == "object" && Object.prototype.hasOwnProperty.call(t, "label") && Object.prototype.hasOwnProperty.call(t, "value");
+function d(t) {
+  return c(t) ? t : { label: t, value: t };
+}
+const b = (t) => ({
+  string: (e, n) => i.textinput({ config: { path: n } }),
+  enum: (e, n) => i.select({
+    config: { path: n },
+    props: { options: e.enum?.map(d) ?? [] },
+    validator: t.stringValidator()
+  }),
+  boolean: (e, n) => i.checkbox({ config: { path: n }, validator: t.booleanValidator() }),
+  number: (e, n) => i.numberinput({ config: { path: n }, validator: t.numberValidator() }),
+  integer: (e, n) => i.numberinput({ config: { path: n }, validator: t.integerValidator() }),
+  object: (e, n) => i.flex({ children: n }),
+  // one or the other must be valid .
+  // - remove data when tabs change.
+  // - don't generate all tabs initially.
+  oneOf: (e, n) => i.tabs(
+    { children: n }
+    /* TODO: , props: {logic: 'XOR'} as TabsProps*/
+  ),
+  // one or more must be valid.
+  // - don't remove data when tabs change.
+  // - generate all tabs initially, there might be a defaultValue to populate initial values.
+  anyOf: (e, n) => i.tabs(
+    { children: n }
+    /* TODO: , props: {logic: 'OR'} as TabsProps*/
+  ),
+  fallback: (e) => i.alert(
+    {},
+    {
+      text: `❌ Unsupported Json Schema field ${JSON.stringify(e)}`,
+      level: "error"
+    }
+  )
+});
+export {
+  i as Vanilla,
+  o as actionWidgets,
+  u as displayWidgets,
+  s as golemForm,
+  r as inputWidgets,
+  c as isOption,
+  l as layoutWidgets,
+  b as vanillaSchemaToFieldMap,
+  p as vanillaWidgets
+};

package/index.umd.cjs

@@ -0,0 +1 @@
+(function(i,l){typeof exports=="object"&&typeof module<"u"?l(exports):typeof define=="function"&&define.amd?define(["exports"],l):(i=typeof globalThis<"u"?globalThis:i||self,l(i["gui-shared"]={}))})(this,(function(i){"use strict";class l{create(e){return{states:e.states,form:{uid:"gui-root-uid",type:"flex",kind:"layout",children:e.form}}}}function s(){return new l}const u=["calendar","checkbox","currency","dateInput","datePicker","dropdown","list","number","password","radiogroup","rangeCalendar","repeater","select","textarea","textinput","toggle"],o=["accordion","flex","tabs"],d=["alert","renderer"],c=["button"],f=[...u,...o,...d,...c],a={textinput:({config:t,props:e,validator:n})=>({uid:"",kind:"input",type:"textinput",...e&&{props:e},...n&&{validator:n},...t}),password:({config:t,props:e,validator:n})=>({uid:"",kind:"input",type:"password",...e&&{props:e},...n&&{validator:n},...t}),numberinput:({config:t,props:e,validator:n})=>({uid:"",kind:"input",type:"numberinput",...e&&{props:e},...n&&{validator:n},...t}),checkbox:({config:t,props:e,validator:n})=>({uid:"",kind:"input",type:"checkbox",...e&&{props:e},...n&&{validator:n},...t}),select:({config:t,props:e,validator:n})=>({uid:"",kind:"input",type:"select",...e&&{props:e},...n&&{validator:n},...t}),flex:(t,e)=>({uid:"",kind:"layout",type:"flex",...e&&{props:e},...t}),tabs:(t,e)=>({uid:"",kind:"layout",type:"tabs",...e&&{props:e},...t}),alert:(t,e)=>({uid:"",kind:"display",type:"alert",...e&&{props:e},...t})},r=t=>t!==null&&typeof t=="object"&&Object.prototype.hasOwnProperty.call(t,"label")&&Object.prototype.hasOwnProperty.call(t,"value");function m(t){return r(t)?t:{label:t,value:t}}const b=t=>({string:(e,n)=>a.textinput({config:{path:n}}),enum:(e,n)=>a.select({config:{path:n},props:{options:e.enum?.map(m)??[]},validator:t.stringValidator()}),boolean:(e,n)=>a.checkbox({config:{path:n},validator:t.booleanValidator()}),number:(e,n)=>a.numberinput({config:{path:n},validator:t.numberValidator()}),integer:(e,n)=>a.numberinput({config:{path:n},validator:t.integerValidator()}),object:(e,n)=>a.flex({children:n}),oneOf:(e,n)=>a.tabs({children:n}),anyOf:(e,n)=>a.tabs({children:n}),fallback:e=>a.alert({},{text:`❌ Unsupported Json Schema field ${JSON.stringify(e)}`,level:"error"})});i.Vanilla=a,i.actionWidgets=c,i.displayWidgets=d,i.golemForm=s,i.inputWidgets=u,i.isOption=r,i.layoutWidgets=o,i.vanillaSchemaToFieldMap=b,i.vanillaWidgets=f,Object.defineProperty(i,Symbol.toStringTag,{value:"Module"})}));

package/lib/golem-form.d.ts

@@ -0,0 +1,160 @@
+import { Validator } from '@golemui/gui-validators';
+import * as Core from '@golemui/core';
+import * as Props from './widget.props';
+type ExtractStates<S> = S extends Record<string, Core.ReactiveExpression> ? keyof S : never;
+/**
+ * Make the uid propery optional on all widgets
+ */
+type DeepPartialUid<T> = T extends (...args: infer A) => infer R ? (...args: A) => DeepPartialUid<R> : T extends any[] ? DeepPartialUidArray<T> : T extends object ? {
+    [K in keyof T as K extends 'uid' ? never : K]: DeepPartialUid<T[K]>;
+} & {
+    uid?: string;
+} : T;
+type DeepPartialUidArray<T extends any[]> = {
+    [P in keyof T]: DeepPartialUid<T[P]>;
+};
+declare class GolemFormBuilder<FormType extends Record<string, any>, CustomWidget extends Core.FormWidget<any, FormType> = never> {
+    create<States extends Record<string, Core.ReactiveExpression>>(config: {
+        states?: States;
+        form: DeepPartialUid<GolemWidget<FormType, ExtractStates<States>, Validator, CustomWidget>>[];
+    }): Core.Form<ExtractStates<States>, FormType>;
+}
+/**
+ * Creates a new GolemFormBuilder instance for building type-safe forms.
+ *
+ * @template FormType - The shape of the form data object
+ * @template CustomWidget - Custom form widget type that extends Core.FormWidget, defaults to never
+ *
+ * @returns {GolemFormBuilder<FormType, CustomWidget>} A new GolemFormBuilder instance configured for the specified form type and custom widgets
+ *
+ * @example
+ * ```typescript
+ * type CustomHeadingWidget = {
+ *   uid: string;
+ *   kind: 'display';
+ *   type: 'heading';
+ *   props: {
+ *     text: string;
+ *     level?: number;
+ *   };
+ * };
+ *
+ * type FormType = { name: string; registerMode: boolean };
+ *
+ * // 1. Pass CustomHeadingWidget here.
+ * // 2. Do NOT pass anything for States (it will be inferred in .create)
+ * export const myDemoForm = golemForm<FormType, CustomHeadingWidget>().create({
+ *   states: {
+ *     registering: '$form.register === true',
+ *   },
+ *   form: [
+ *     {
+ *       kind: 'input',
+ *       type: 'textinput',
+ *       path: 'name',
+ *       label: 'Label',
+ *       'label.registering': '',
+ *       props: { placeholder: (api) => api.$form.name, 'placeholder.registering': 'asas' },
+ *     },
+ *     // Custom widget usage
+ *     {
+ *       kind: 'display',
+ *       type: 'heading',
+ *       props: { text: 'User Details', level: 1 },
+ *     },
+ *     (api) => ({
+ *       kind: 'input',
+ *       type: 'textinput',
+ *       path: 'something',
+ *       label: api?.$form.name ? api?.$form.name : 'No name yet',
+ *     }),
+ *     {
+ *       kind: 'layout',
+ *       type: 'flex',
+ *       props: { direction: 'horizontal' },
+ *       children: [
+ *         {
+ *           kind: 'input',
+ *           type: 'textinput',
+ *           path: 'surname',
+ *           props: { hint: 'not type safe' },
+ *         },
+ *         // Nested custom widget
+ *         {
+ *           kind: 'display',
+ *           type: 'heading',
+ *           props: { text: 'Nested Heading', level: 2 },
+ *         },
+ *       ],
+ *     },
+ *   ],
+ * });
+ * ```
+ */
+export declare function golemForm<FormType extends Record<string, any>, CustomWidget extends Core.FormWidget<any, FormType> = never>(): GolemFormBuilder<FormType, CustomWidget>;
+type GolemWidget<FormType extends Record<string, any>, States extends string, V, CustomWidget extends Core.FormWidget<any, FormType> = never> = GuiAccordion<FormType, States, V, CustomWidget> | GuiAlert<FormType, States> | GuiButton<FormType, States> | GuiCalendar<FormType, States, V> | GuiCheckbox<FormType, States, V> | GuiCurrency<FormType, States, V> | GuiDateinput<FormType, States, V> | GuiDatePicker<FormType, States, V> | GuiDropdown<FormType, States, V> | GuiFunctionWidget<FormType, States, V, CustomWidget> | GuiList<FormType, States, V> | GuiNumberinput<FormType, States, V> | GuiPassword<FormType, States, V> | GuiRadiogroup<FormType, States, V> | GuiRangeCalendar<FormType, States, V> | GuiRepeater<FormType, States, V, CustomWidget> | GuiSelect<FormType, States, V> | GuiFlex<FormType, States, V, CustomWidget> | GuiTabs<FormType, States, V, CustomWidget> | GuiTextarea<FormType, States, V> | GuiTextInput<FormType, States, V> | GuiToggle<FormType, States, V> | CustomWidget;
+type GuiAccordion<FormType extends Record<string, any>, States extends string, V, CustomWidget extends Core.FormWidget<any, FormType>> = Core.LayoutWidget<States, FormType, Props.AccordionProps, GolemWidget<FormType, States, V, CustomWidget>[]> & {
+    type: 'accordion';
+};
+type GuiAlert<FormType extends Record<string, any>, States extends string> = Core.DisplayWidget<States, FormType, Props.AlertProps> & {
+    type: 'alert';
+};
+type GuiButton<FormType extends Record<string, any>, States extends string> = Core.ActionWidget<States, FormType, never> & {
+    type: 'button';
+};
+type GuiCalendar<FormType extends Record<string, any>, States extends string, V> = Core.InputWidget<string, States, FormType, Props.CalendarProps, V> & {
+    type: 'calendar';
+};
+type GuiCheckbox<FormType extends Record<string, any>, States extends string, V> = Core.InputWidget<boolean, States, FormType, Props.CheckboxProps, V> & {
+    type: 'checkbox';
+};
+type GuiCurrency<FormType extends Record<string, any>, States extends string, V> = Core.InputWidget<number, States, FormType, Props.CurrencyProps, V> & {
+    type: 'currency';
+};
+type GuiDateinput<FormType extends Record<string, any>, States extends string, V> = Core.InputWidget<string, States, FormType, Props.DateinputProps, V> & {
+    type: 'dateInput';
+};
+type GuiDatePicker<FormType extends Record<string, any>, States extends string, V> = Core.InputWidget<string, States, FormType, Props.DatePickerProps, V> & {
+    type: 'datePicker';
+};
+type GuiDropdown<FormType extends Record<string, any>, States extends string, V> = Core.InputWidget<Props.OptionValue, States, FormType, Props.DropdownProps<unknown>, V> & {
+    type: 'dropdown';
+};
+type GuiFunctionWidget<FormType extends Record<string, any>, States extends string, V, CustomWidget extends Core.FormWidget<any, FormType>> = (api?: Core.FunctionWidgetParams<FormType>) => Exclude<GolemWidget<FormType, States, V, CustomWidget>, () => any>;
+type GuiList<FormType extends Record<string, any>, States extends string, V> = Core.InputWidget<Props.OptionValue, States, FormType, Props.ListProps<unknown>, V> & {
+    type: 'list';
+};
+type GuiNumberinput<FormType extends Record<string, any>, States extends string, V> = Core.InputWidget<number, States, FormType, Props.NumberinputProps, V> & {
+    type: 'number';
+};
+type GuiRadiogroup<FormType extends Record<string, any>, States extends string, V> = Core.InputWidget<Props.OptionValue, States, FormType, Props.RadiogroupProps, V> & {
+    type: 'radiogroup';
+};
+type GuiRangeCalendar<FormType extends Record<string, any>, States extends string, V> = Core.InputWidget<string, States, FormType, Props.RangeCalendarProps, V> & {
+    type: 'rangeCalendar';
+};
+type GuiRepeater<FormType extends Record<string, any>, States extends string, V, CustomWidget extends Core.FormWidget<any, FormType>> = Core.InputWidget<Record<string, unknown>[], States, FormType, Props.RepeaterProps<Core.LayoutWidget<States, FormType, Props.AccordionProps, GolemWidget<FormType, States, V, CustomWidget>[]>>, V> & {
+    type: 'repeater';
+};
+type GuiSelect<FormType extends Record<string, any>, States extends string, V> = Core.InputWidget<Props.OptionValue, States, FormType, Props.SelectProps, V> & {
+    type: 'select';
+};
+type GuiFlex<FormType extends Record<string, any>, States extends string, V, CustomWidget extends Core.FormWidget<any, FormType>> = Core.LayoutWidget<States, FormType, Props.FlexProps, GolemWidget<FormType, States, V, CustomWidget>[]> & {
+    type: 'flex';
+};
+type GuiTabs<FormType extends Record<string, any>, States extends string, V, CustomWidget extends Core.FormWidget<any, FormType>> = Core.LayoutWidget<States, FormType, Props.TabsProps, GolemWidget<FormType, States, V, CustomWidget>[]> & {
+    type: 'tabs';
+};
+type GuiTextarea<FormType extends Record<string, any>, States extends string, V> = Core.InputWidget<string, States, FormType, Props.TextareaProps, V> & {
+    type: 'textarea';
+};
+type GuiTextInput<FormType extends Record<string, any>, States extends string, V> = Core.InputWidget<string, States, FormType, Props.TextinputProps, V> & {
+    type: 'textinput';
+};
+type GuiPassword<FormType extends Record<string, any>, States extends string, V> = Core.InputWidget<string, States, FormType, Props.PasswordProps, V> & {
+    type: 'password';
+};
+type GuiToggle<FormType extends Record<string, any>, States extends string, V> = Core.InputWidget<boolean, States, FormType, Props.ToggleProps, V> & {
+    type: 'toggle';
+};
+export {};

package/lib/middleware/json-schema-vanilla.d.ts

@@ -0,0 +1,2 @@
+import * as Core from '@golemui/core';
+export declare const vanillaSchemaToFieldMap: <V>(validators: Core.JsonSchemaValidators<V>) => Core.SchemaToWidgetMap;

package/lib/utils/index.d.ts

@@ -0,0 +1 @@
+export * from './one-of';

package/lib/utils/one-of.d.ts

@@ -0,0 +1,5 @@
+import { Option } from '../widget.props';
+/**
+ * Checks whether a value is a fully compliant Option (with label and value fields)
+ */
+export declare const isOption: (opt: unknown) => opt is Option;

package/lib/widget.factory.d.ts

@@ -0,0 +1,39 @@
+import * as Core from '@golemui/core';
+import * as Props from './widget.props';
+type InputWidgetConfig<T> = Omit<Core.InputWidget<T>, 'kind' | 'type' | 'uid' | 'props' | 'validator'>;
+type LayoutWidgetConfig = Omit<Core.LayoutWidget, 'kind' | 'type' | 'uid' | 'props'>;
+type DisplayWidgetConfig = Omit<Core.BaseWidget, 'kind' | 'type' | 'uid' | 'props'>;
+/**
+ * Vanilla widget factory
+ */
+export declare const Vanilla: {
+    textinput: <StateKeys extends Core.UiState = string, V = any>({ config, props, validator, }: {
+        config: InputWidgetConfig<string>;
+        props?: Props.TextinputProps;
+        validator?: V;
+    }) => Core.InputWidget<string, StateKeys>;
+    password: <StateKeys extends Core.UiState = string, V = any>({ config, props, validator, }: {
+        config: InputWidgetConfig<string>;
+        props?: Props.PasswordProps;
+        validator?: V;
+    }) => Core.InputWidget<string, StateKeys>;
+    numberinput: <StateKeys extends Core.UiState = string, V = any>({ config, props, validator, }: {
+        config: InputWidgetConfig<number>;
+        props?: Props.NumberinputProps;
+        validator?: V;
+    }) => Core.InputWidget<number, StateKeys>;
+    checkbox: <StateKeys extends Core.UiState = string, V = any>({ config, props, validator, }: {
+        config: InputWidgetConfig<boolean>;
+        props?: Props.CheckboxProps;
+        validator?: V;
+    }) => Core.InputWidget<boolean, StateKeys>;
+    select: <StateKeys extends Core.UiState = string, V = any>({ config, props, validator, }: {
+        config: InputWidgetConfig<string>;
+        props?: Props.SelectProps;
+        validator?: V;
+    }) => Core.InputWidget<string, StateKeys>;
+    flex: <StateKeys extends Core.UiState = string>(config: LayoutWidgetConfig, props?: Props.FlexProps) => Core.LayoutWidget<StateKeys>;
+    tabs: <StateKeys extends Core.UiState = string>(config: LayoutWidgetConfig, props?: Props.TabsProps) => Core.LayoutWidget<StateKeys>;
+    alert: <StateKeys extends Core.UiState = string>(config: DisplayWidgetConfig, props?: Props.AlertProps) => Core.DisplayWidget<StateKeys>;
+};
+export {};

package/lib/widget.props.d.ts

@@ -0,0 +1,348 @@
+import { Localizable, WidgetPropertyFunctionParams } from '@golemui/core';
+export interface DateRange {
+    start: string;
+    end?: string;
+}
+export type AccordionProps = {
+    singleOpen?: boolean;
+    defaultOpen?: {
+        [key: string]: boolean;
+    };
+    renderMode?: 'all' | 'activeOnly';
+    sections: {
+        label: Localizable;
+        uid: string;
+    }[];
+};
+export type ButtonProps = {
+    variant?: 'filled' | 'outlined';
+};
+export type TextinputProps = {
+    hint?: string;
+    placeholder?: string;
+    icon?: string;
+};
+export type PasswordProps = {
+    hint?: string;
+    placeholder?: string;
+    icon?: string;
+    showPasswordIcon?: string;
+    hidePasswordIcon?: string;
+    showPasswordLabel?: string;
+    hidePasswordLabel?: string;
+};
+export type CurrencyProps = {
+    currency?: string;
+    step?: number;
+    maximumFractionDigits?: number;
+    minimumFractionDigits?: number;
+    hint?: string;
+    placeholder?: string;
+    icon?: string;
+};
+export type TextareaProps = {
+    hint?: string;
+    placeholder?: string;
+    icon?: string;
+    counterMode?: 'remaining' | 'current';
+    minimumHeight?: number;
+    autoGrow?: boolean;
+    maxLength?: number;
+};
+export type CalendarProps = {
+    /**
+     * An optional descriptive text providing guidance or information about the associated field or functionality.
+     */
+    hint?: string;
+    /**
+     * A string representing the icon for navigating to the previous month.
+     * This variable is optional and may define a custom icon as a CSS class
+     * that will be used to visually represent the "previous month" navigation button.
+     */
+    prevMonthIcon?: string;
+    /**
+     * A string representing the icon for navigating to the previous month.
+     * This variable is optional and may define a custom icon as a CSS class
+     * that will be used to visually represent the "next month" navigation button.
+     */
+    nextMonthIcon?: string;
+    /**
+     * An optional string that represents the ARIA label for the previous month's navigation button.
+     * This label is used to improve accessibility by providing screen readers with descriptive text.
+     */
+    prevMonthAriaLabel?: string;
+    /**
+     * An optional string that represents the ARIA label for the next month's navigation button.
+     * This label is used to improve accessibility by providing screen readers with descriptive text.
+     */
+    nextMonthAriaLabel?: string;
+    /**
+     * Specifies the formatting style for displaying the day portion of a date.
+     *
+     * The variable `dayFormat` can accept one of the following values:
+     * - 'numeric': Displays the day as a numeric value without leading zeros (e.g., 1, 15, 31).
+     * - '2-digit': Displays the day as a two-digit value with leading zeros if necessary (e.g., 01, 15, 31).
+     *
+     * This is typically used to configure date formatting options for internationalization purposes.
+     */
+    dayFormat?: 'numeric' | '2-digit';
+    /**
+     * Specifies the format of the weekday to be used.
+     * Acceptable values are:
+     * - 'short': Abbreviated format of the weekday (e.g., Mon, Tue).
+     * - 'long': Full name of the weekday (e.g., Monday, Tuesday).
+     * - 'narrow': Minimal format of the weekday, typically a single letter (e.g., M, T).
+     * This property is typically used to customize the presentation of weekday names.
+     */
+    weekdayFormat?: 'short' | 'long' | 'narrow';
+    /**
+     * Specifies the format style to use when displaying month values.
+     *
+     * The accepted formats are:
+     * - 'numeric': Displays the month as a number without leading zeros (e.g., "1" for January).
+     * - '2-digit': Displays the month as a two-digit number with leading zeros as necessary (e.g., "01" for January).
+     * - 'long': Displays the month as a full name (e.g., "January").
+     * - 'short': Displays the month as an abbreviated name (e.g., "Jan").
+     * - 'narrow': Displays a single letter representation of the month (e.g., "J" for January).
+     *
+     * This property is optional. When not specified, the default formatting behavior may depend on the context or implementation.
+     */
+    monthFormat?: 'numeric' | '2-digit' | 'long' | 'short' | 'narrow';
+    /**
+     * Represents the earliest allowable date in the calendar.
+     * The value is optional and can be assigned as a string in an ISO date format.
+     */
+    minDate?: string;
+    /**
+     * Represents the latest allowable date in the calendar.
+     * The value is optional and can be assigned as a string in an ISO date format.
+     */
+    maxDate?: string;
+    /**
+     * Represents an optional property that defines a set of date ranges
+     * which are disabled or unavailable for selection.
+     *
+     * @type {DateRange[] | undefined}
+     */
+    disabledRanges?: DateRange[];
+    /**
+     * Specifies the number of months to be displayed in the calendar.
+     * Default is 1.
+     */
+    numberOfMonths?: number;
+};
+export type RangeCalendarProps = {
+    /**
+     * An optional descriptive text providing guidance or information about the associated widget or functionality.
+     */
+    hint?: string;
+    /**
+     * A string representing the icon for navigating to the previous month.
+     * This variable is optional and may define a custom icon as a CSS class
+     * that will be used to visually represent the "previous month" navigation button.
+     */
+    prevMonthIcon?: string;
+    /**
+     * A string representing the icon for navigating to the previous month.
+     * This variable is optional and may define a custom icon as a CSS class
+     * that will be used to visually represent the "next month" navigation button.
+     */
+    nextMonthIcon?: string;
+    /**
+     * An optional string that represents the ARIA label for the previous month's navigation button.
+     * This label is used to improve accessibility by providing screen readers with descriptive text.
+     */
+    prevMonthAriaLabel?: string;
+    /**
+     * An optional string that represents the ARIA label for the next month's navigation button.
+     * This label is used to improve accessibility by providing screen readers with descriptive text.
+     */
+    nextMonthAriaLabel?: string;
+    /**
+     * Specifies the formatting style for displaying the day portion of a date.
+     *
+     * The variable `dayFormat` can accept one of the following values:
+     * - 'numeric': Displays the day as a numeric value without leading zeros (e.g., 1, 15, 31).
+     * - '2-digit': Displays the day as a two-digit value with leading zeros if necessary (e.g., 01, 15, 31).
+     *
+     * This is typically used to configure date formatting options for internationalization purposes.
+     */
+    dayFormat?: 'numeric' | '2-digit';
+    /**
+     * Specifies the format of the weekday to be used.
+     * Acceptable values are:
+     * - 'short': Abbreviated format of the weekday (e.g., Mon, Tue).
+     * - 'long': Full name of the weekday (e.g., Monday, Tuesday).
+     * - 'narrow': Minimal format of the weekday, typically a single letter (e.g., M, T).
+     * This property is typically used to customize the presentation of weekday names.
+     */
+    weekdayFormat?: 'short' | 'long' | 'narrow';
+    /**
+     * Specifies the format style to use when displaying month values.
+     *
+     * The accepted formats are:
+     * - 'numeric': Displays the month as a number without leading zeros (e.g., "1" for January).
+     * - '2-digit': Displays the month as a two-digit number with leading zeros as necessary (e.g., "01" for January).
+     * - 'long': Displays the month as a full name (e.g., "January").
+     * - 'short': Displays the month as an abbreviated name (e.g., "Jan").
+     * - 'narrow': Displays a single letter representation of the month (e.g., "J" for January).
+     *
+     * This property is optional. When not specified, the default formatting behavior may depend on the context or implementation.
+     */
+    monthFormat?: 'numeric' | '2-digit' | 'long' | 'short' | 'narrow';
+    /**
+     * Represents the earliest allowable date in the calendar.
+     * The value is optional and can be assigned as a string in an ISO date format.
+     */
+    minDate?: string;
+    /**
+     * Represents the latest allowable date in the calendar.
+     * The value is optional and can be assigned as a string in an ISO date format.
+     */
+    maxDate?: string;
+    /**
+     * Represents an optional property that defines a set of date ranges
+     * which are disabled or unavailable for selection.
+     *
+     * @type {DateRange[] | undefined}
+     */
+    disabledRanges?: DateRange[];
+    /**
+     * Specifies the number of months to be displayed in the calendar.
+     * Default is 1.
+     */
+    numberOfMonths?: number;
+};
+export type DateinputProps = {
+    hint?: string;
+    icon?: string;
+};
+export type DatePickerProps = {
+    hint?: string;
+    placeholder?: string;
+    icon?: string;
+    prevMonthIcon?: string;
+    nextMonthIcon?: string;
+    prevMonthAriaLabel?: string;
+    nextMonthAriaLabel?: string;
+    dayFormat?: 'numeric' | '2-digit';
+    weekdayFormat?: 'short' | 'long' | 'narrow';
+    monthFormat?: 'numeric' | '2-digit' | 'long' | 'short' | 'narrow';
+};
+export type NumberinputProps = {
+    placeholder?: string;
+    hint?: string;
+    step?: number;
+    minimum?: number;
+    maximum?: number;
+    autoGrow?: true;
+};
+export type CheckboxProps = {
+    checkboxPosition?: 'left' | 'right';
+    hint?: string;
+};
+export type ToggleProps = {
+    togglePosition?: 'left' | 'right';
+    hint?: string;
+};
+export type AlertProps = {
+    text: string;
+    level?: 'default' | 'info' | 'success' | 'warning' | 'error';
+};
+/**
+ * Non-serializable component props. Used to render the provided component.
+ * @template ComponentType Framework-dependent type for the component. e.g. ReactNode, Type<any>
+ */
+export type RendererProps<ComponentType = unknown> = {
+    render: ComponentType;
+};
+/**
+ * Non-serializable component props for Angular. Used to render the provided component.
+ * @template ComponentType Framework-dependent type for the component. e.g. ReactNode, Type<any>
+ */
+export type ComponentRendererProps<ComponentType = unknown> = {
+    render: {
+        component: ComponentType;
+        api: WidgetPropertyFunctionParams<any>;
+    };
+};
+export type RepeaterProps<Template> = {
+    addLabel?: string;
+    removeLabel?: string;
+    limit?: number;
+    template: Template;
+};
+export type OptionValue = string | number;
+export type Option = {
+    label: string;
+    value: OptionValue;
+};
+export type SelectProps = {
+    hint?: string;
+    icon?: string;
+    options: Option[];
+    placeholder?: string;
+    labelField?: string;
+    valueField?: string;
+};
+export type ListItem<T> = {
+    template: T;
+    value: OptionValue;
+};
+type ItemKeys<T> = T extends Record<string, any> ? keyof T : string;
+export type DropdownProps<T> = {
+    placeholder?: string;
+    hint?: string;
+    items: ListItem<T>[];
+    /**
+     * Property widget used to display in the input when an item option is selected
+     */
+    labelField?: ItemKeys<T>;
+    valueField?: ItemKeys<T>;
+    searchFields?: ItemKeys<T>[];
+    height?: number;
+    itemHeight?: number;
+    /**
+     * Should match with one of the provided itemRenderer keys
+     */
+    itemRenderer?: string;
+    /**
+     * Time in milliseconds to wait on each keystroke to trigger the input event. Default: 500
+     */
+    inputDebounce?: number;
+};
+export type ListProps<T> = {
+    hint?: string;
+    items: ListItem<T>[];
+    valueField?: string;
+    height?: number;
+    itemHeight?: number;
+    /**
+     * Should match with one of the provided itemRenderer keys
+     */
+    itemRenderer?: string;
+};
+export type RadiogroupProps = {
+    hint?: string;
+    options: Option[];
+    labelField?: string;
+    valueField?: string;
+};
+export type OneOfProps = {
+    labelField?: string;
+    valueField?: string;
+};
+export type FlexProps = {
+    direction?: 'horizontal' | 'vertical';
+    align?: 'center' | 'start' | 'end' | 'space-between' | 'space-around';
+    gap?: number;
+};
+export type TabsProps = {
+    defaultOpen?: string;
+    renderMode: 'all' | 'activeOnly';
+    tabs: {
+        label: string;
+        uid: string;
+    }[];
+};
+export {};

package/lib/widgets.d.ts

@@ -0,0 +1,10 @@
+export declare const inputWidgets: readonly ["calendar", "checkbox", "currency", "dateInput", "datePicker", "dropdown", "list", "number", "password", "radiogroup", "rangeCalendar", "repeater", "select", "textarea", "textinput", "toggle"];
+export declare const layoutWidgets: readonly ["accordion", "flex", "tabs"];
+export declare const displayWidgets: readonly ["alert", "renderer"];
+export declare const actionWidgets: readonly ["button"];
+export declare const vanillaWidgets: ("number" | "flex" | "repeater" | "accordion" | "alert" | "button" | "calendar" | "checkbox" | "currency" | "dateInput" | "datePicker" | "dropdown" | "list" | "password" | "radiogroup" | "rangeCalendar" | "select" | "tabs" | "textarea" | "textinput" | "toggle" | "renderer")[];
+export type VanillaInputWidget = (typeof inputWidgets)[number];
+export type VanillaLayoutWidget = (typeof layoutWidgets)[number];
+export type VanillaDisplayWidget = (typeof displayWidgets)[number];
+export type VanillaActionWidget = (typeof actionWidgets)[number];
+export type VanillaWidget = (typeof vanillaWidgets)[number];

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@golemui/gui-shared",
+  "version": "0.0.2",
+  "type": "module",
+  "main": "./index.umd.cjs",
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./index.js",
+      "require": "./index.umd.cjs"
+    }
+  },
+  "files": [
+    "lib",
+    "index.d.ts",
+    "index.js",
+    "index.umd.cjs",
+    "*.md"
+  ],
+  "dependencies": {
+    "@golemui/core": "*",
+    "@golemui/gui-validators": "*"
+  }
+}