@progressive-development/pd-forms 1.0.1 → 1.0.3

package/dist/pd-radio-group/pd-radio-group.stories.d.ts

@@ -1,39 +0,0 @@
-import { Meta, StoryObj } from '@storybook/web-components-vite';
-interface PdRadioGroupArgs {
-    label: string;
-    id: string;
-    valueName: string;
-    required: boolean;
-    direction: "row" | "column";
-    gap: string;
-}
-/**
- * ## pd-radio-group
- *
- * A radio group container for `pd-checkbox` elements with single-selection behavior.
- *
- * ### Features
- * - **Single Selection**: Only one option can be selected at a time
- * - **Flexible Layout**: Horizontal (row) or vertical (column) arrangement via CSS custom properties
- * - **Form Integration**: Works with `pd-form-container` for validation
- * - **Slot-based**: Uses slotted `pd-checkbox` elements as radio options
- * - **Keyboard Navigation**: Arrow keys, Home/End for option cycling
- */
-declare const meta: Meta<PdRadioGroupArgs>;
-export default meta;
-type Story = StoryObj<PdRadioGroupArgs>;
-/** Default horizontal radio group with three options. Interactive via Controls panel. */
-export declare const Default: Story;
-/** All visual states at a glance: default, preselected, required, and with many options. */
-export declare const AllVariants: Story;
-/** Vertical (column) layout for longer option labels. */
-export declare const VerticalLayout: Story;
-/** Visual difference between radio-style (checkType="RADIO") and checkbox-style children. */
-export declare const StyleComparison: Story;
-/** Required radio group inside a form — triggers validation on button click. */
-export declare const RequiredValidation: Story;
-/** Real-world form pattern with multiple radio groups and submit action. */
-export declare const CompleteFormExample: Story;
-/** CSS Custom Properties — Branded and Redesigned variants. */
-export declare const CustomStyling: Story;
-//# sourceMappingURL=pd-radio-group.stories.d.ts.map

package/dist/pd-radio-group/pd-radio-group.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"pd-radio-group.stories.d.ts","sourceRoot":"","sources":["../../src/pd-radio-group/pd-radio-group.stories.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAErE,OAAO,+BAA+B,CAAC;AACvC,OAAO,qBAAqB,CAAC;AAC7B,OAAO,2CAA2C,CAAC;AACnD,OAAO,+BAA+B,CAAC;AACvC,OAAO,2BAA2B,CAAC;AAMnC,UAAU,gBAAgB;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,KAAK,GAAG,QAAQ,CAAC;IAC5B,GAAG,EAAE,MAAM,CAAC;CACb;AAMD;;;;;;;;;;;GAWG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,gBAAgB,CA6EhC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,gBAAgB,CAAC,CAAC;AAMxC,yFAAyF;AACzF,eAAO,MAAM,OAAO,EAAE,KAoBrB,CAAC;AAMF,4FAA4F;AAC5F,eAAO,MAAM,WAAW,EAAE,KAoGzB,CAAC;AAMF,yDAAyD;AACzD,eAAO,MAAM,cAAc,EAAE,KAwB5B,CAAC;AAMF,6FAA6F;AAC7F,eAAO,MAAM,eAAe,EAAE,KAwC7B,CAAC;AAMF,gFAAgF;AAChF,eAAO,MAAM,kBAAkB,EAAE,KAoChC,CAAC;AAMF,4EAA4E;AAC5E,eAAO,MAAM,mBAAmB,EAAE,KAqFjC,CAAC;AAMF,+DAA+D;AAC/D,eAAO,MAAM,aAAa,EAAE,KAoH3B,CAAC"}

package/dist/pd-range/pd-range.stories.d.ts

@@ -1,51 +0,0 @@
-import { Meta, StoryObj } from '@storybook/web-components-vite';
-interface PdRangeArgs {
-    label: string;
-    min: number;
-    max: number;
-    step: number;
-    initValue: string;
-    helperTxt: string;
-    disabled: boolean;
-    required: boolean;
-    optionValueMapper: Record<string, string>;
-}
-/**
- * ## pd-range
- *
- * A styled range slider for selecting numeric values with optional label mapping.
- *
- * ### Features
- * - **Value Mapping**: Map numeric values to descriptive labels via `optionValueMapper`
- * - **Custom Range**: Configurable min, max, and step values
- * - **Visual Ticks**: Shows tick marks for each step on the slider
- * - **Form Integration**: Works with `pd-form-container` for validation
- *
- * ### Accessibility
- * - Native range input for keyboard navigation
- * - Label displays current mapped value
- * - Disabled state support
- *
- * ## Usage
- * ```html
- * <pd-range
- *   label="Satisfaction"
- *   min="1" max="5" initValue="3"
- *   .optionValueMapper=${{ 1: "Poor", 5: "Excellent" }}
- * ></pd-range>
- * ```
- */
-declare const meta: Meta<PdRangeArgs>;
-export default meta;
-type Story = StoryObj<PdRangeArgs>;
-/** Default range slider with value mapping. Interactive via Controls panel. */
-export declare const Default: Story;
-/** All range slider states at a glance: default, helper text, disabled, required. */
-export declare const AllStates: Story;
-/** Different value mappers and range configurations side by side. */
-export declare const ValueMappers: Story;
-/** Range slider within a pd-form-container for validation. */
-export declare const FormIntegration: Story;
-/** CSS Custom Properties -- Branded and Redesigned variants. */
-export declare const CustomStyling: Story;
-//# sourceMappingURL=pd-range.stories.d.ts.map

package/dist/pd-range/pd-range.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"pd-range.stories.d.ts","sourceRoot":"","sources":["../../src/pd-range/pd-range.stories.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAErE,OAAO,eAAe,CAAC;AACvB,OAAO,2CAA2C,CAAC;AACnD,OAAO,+BAA+B,CAAC;AAMvC,UAAU,WAAW;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,iBAAiB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAC3C;AA8CD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,WAAW,CA2F3B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,WAAW,CAAC,CAAC;AAMnC,+EAA+E;AAC/E,eAAO,MAAM,OAAO,EAAE,KAoBrB,CAAC;AAMF,qFAAqF;AACrF,eAAO,MAAM,SAAS,EAAE,KAqEvB,CAAC;AAMF,qEAAqE;AACrE,eAAO,MAAM,YAAY,EAAE,KAkE1B,CAAC;AAMF,8DAA8D;AAC9D,eAAO,MAAM,eAAe,EAAE,KA8B7B,CAAC;AAMF,gEAAgE;AAChE,eAAO,MAAM,aAAa,EAAE,KA6F3B,CAAC"}

package/dist/pd-select/pd-select.stories.d.ts

@@ -1,58 +0,0 @@
-import { Meta, StoryObj } from '@storybook/web-components-vite';
-import { PdSelectOption } from '../types.js';
-/**
- * Story arguments interface for pd-select component.
- * Defines all configurable properties available in Storybook controls.
- */
-interface PdSelectArgs {
-    /** Label text displayed above the select */
-    label: string;
-    /** Array of options to display in the select */
-    values: PdSelectOption[];
-    /** Initially selected value */
-    initValue: string;
-    /** Whether the select is disabled */
-    disabled: boolean;
-    /** Whether the select is read-only */
-    readonly: boolean;
-    /** Whether a selection is required */
-    required: boolean;
-    /** Helper text displayed below the select */
-    helperTxt: string;
-    /** Apply gradient background styling */
-    gradient: boolean;
-    /** The name attribute for form submission */
-    valueName: string;
-}
-/**
- * ## pd-select
- *
- * A styled select dropdown component for single-option selection.
- *
- * ### Features
- * - **Native Select**: Uses native HTML select for accessibility and mobile support
- * - **Custom Styling**: Styled dropdown arrow and consistent appearance across browsers
- * - **Gradient Option**: Optional gradient background styling
- * - **Form Integration**: Works with `pd-form-container` for validation
- * - **Label Support**: Optional label with required indicator
- * - **Helper Text**: Hover icon with additional information
- *
- * ### Accessibility
- * - Native select element for full keyboard and screen reader support
- * - Mobile-friendly with native picker on touch devices
- * - Required field indication with asterisk
- */
-declare const meta: Meta<PdSelectArgs>;
-export default meta;
-type Story = StoryObj<PdSelectArgs>;
-/** Default select with label. Interactive via Controls panel. */
-export declare const Default: Story;
-/** All select states at a glance. */
-export declare const AllVariants: Story;
-/** Required select with form validation — demonstrates error state on empty submit. */
-export declare const RequiredValidation: Story;
-/** Select with many options — demonstrates native scroll behavior. */
-export declare const ManyOptions: Story;
-/** CSS Custom Properties — Branded and Redesigned variants. */
-export declare const CustomStyling: Story;
-//# sourceMappingURL=pd-select.stories.d.ts.map

package/dist/pd-select/pd-select.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"pd-select.stories.d.ts","sourceRoot":"","sources":["../../src/pd-select/pd-select.stories.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAErE,OAAO,gBAAgB,CAAC;AACxB,OAAO,2CAA2C,CAAC;AACnD,OAAO,+BAA+B,CAAC;AACvC,OAAO,2BAA2B,CAAC;AACnC,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAM7C;;;GAGG;AACH,UAAU,YAAY;IACpB,4CAA4C;IAC5C,KAAK,EAAE,MAAM,CAAC;IACd,gDAAgD;IAChD,MAAM,EAAE,cAAc,EAAE,CAAC;IACzB,+BAA+B;IAC/B,SAAS,EAAE,MAAM,CAAC;IAClB,qCAAqC;IACrC,QAAQ,EAAE,OAAO,CAAC;IAClB,sCAAsC;IACtC,QAAQ,EAAE,OAAO,CAAC;IAClB,sCAAsC;IACtC,QAAQ,EAAE,OAAO,CAAC;IAClB,6CAA6C;IAC7C,SAAS,EAAE,MAAM,CAAC;IAClB,wCAAwC;IACxC,QAAQ,EAAE,OAAO,CAAC;IAClB,6CAA6C;IAC7C,SAAS,EAAE,MAAM,CAAC;CACnB;AAoBD;;;;;;;;;;;;;;;;;GAiBG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,YAAY,CA6F5B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,YAAY,CAAC,CAAC;AAMpC,iEAAiE;AACjE,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAMF,qCAAqC;AACrC,eAAO,MAAM,WAAW,EAAE,KAgEzB,CAAC;AAMF,uFAAuF;AACvF,eAAO,MAAM,kBAAkB,EAAE,KAiChC,CAAC;AAMF,sEAAsE;AACtE,eAAO,MAAM,WAAW,EAAE,KAsCzB,CAAC;AAMF,+DAA+D;AAC/D,eAAO,MAAM,aAAa,EAAE,KA0G3B,CAAC"}

package/dist/pd-suggestion-box/pd-suggestion-box.stories.d.ts

@@ -1,79 +0,0 @@
-import { Meta, StoryObj } from '@storybook/web-components-vite';
-/**
- * Story arguments interface for pd-suggestion-box component.
- * Defines all configurable properties available in Storybook controls.
- */
-interface PdSuggestionBoxArgs {
-    /** Label text displayed above the input */
-    label: string;
-    /** Placeholder text for the input field */
-    placeholder: string;
-    /** Minimum characters required before triggering search */
-    minCharsToSearch: number;
-    /** Delay in milliseconds before executing search */
-    delayTime: number;
-    /** Maximum number of results to display */
-    maxResult: number;
-    /** Whether the field is required */
-    required: boolean;
-    /** Whether to show "create new" option when no results found */
-    createNewEmptyItem: boolean;
-    /** Simulated API response delay for demos */
-    timeout: number;
-}
-/**
- * ## pd-suggestion-box
- *
- * An autocomplete/typeahead component that fetches suggestions from an async data source.
- *
- * ### Features
- * - **Async Search**: Fetches suggestions via a configurable async function
- * - **Debounced Input**: Configurable delay before triggering search
- * - **Minimum Characters**: Configurable minimum input length before searching
- * - **Local Filtering**: Filters cached results for faster subsequent searches
- * - **Create New Option**: Optional ability to create new entries when no match found
- * - **Loading State**: Shows loading indicator during async operations
- * - **Error Handling**: Displays error message on search failures
- *
- * ### Usage
- * ```html
- * <pd-suggestion-box
- *   label="Search Products"
- *   placeholder="Type to search..."
- *   minCharsToSearch="2"
- *   .callFunction="${async (input) => {
- *     const response = await fetch(`/api/search?q=${input}`);
- *     return response.json();
- *   }}"
- * ></pd-suggestion-box>
- * ```
- */
-declare const meta: Meta<PdSuggestionBoxArgs>;
-export default meta;
-type Story = StoryObj<PdSuggestionBoxArgs>;
-/**
- * Default suggestion box with product search.
- * Type at least 2 characters to see suggestions.
- */
-export declare const Default: Story;
-/**
- * Required suggestion box -- shows the required indicator (asterisk).
- */
-export declare const Required: Story;
-/**
- * Suggestion box with "create new" option enabled.
- * When no matches are found, offers to create a new entry.
- */
-export declare const WithCreateNew: Story;
-/**
- * Loading state (slow API) and error state side by side.
- * Demonstrates both async feedback states in one view.
- */
-export declare const LoadingAndError: Story;
-/**
- * Multiple suggestion boxes in a form -- real-world usage pattern.
- */
-export declare const FormIntegration: Story;
-/** CSS Custom Properties -- Branded and Redesigned variants. */
-export declare const CustomStyling: Story;
-//# sourceMappingURL=pd-suggestion-box.stories.d.ts.map

package/dist/pd-suggestion-box/pd-suggestion-box.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"pd-suggestion-box.stories.d.ts","sourceRoot":"","sources":["../../src/pd-suggestion-box/pd-suggestion-box.stories.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAErE,OAAO,wBAAwB,CAAC;AAChC,OAAO,2BAA2B,CAAC;AAOnC;;;GAGG;AACH,UAAU,mBAAmB;IAC3B,2CAA2C;IAC3C,KAAK,EAAE,MAAM,CAAC;IACd,2CAA2C;IAC3C,WAAW,EAAE,MAAM,CAAC;IACpB,2DAA2D;IAC3D,gBAAgB,EAAE,MAAM,CAAC;IACzB,oDAAoD;IACpD,SAAS,EAAE,MAAM,CAAC;IAClB,2CAA2C;IAC3C,SAAS,EAAE,MAAM,CAAC;IAClB,oCAAoC;IACpC,QAAQ,EAAE,OAAO,CAAC;IAClB,gEAAgE;IAChE,kBAAkB,EAAE,OAAO,CAAC;IAC5B,6CAA6C;IAC7C,OAAO,EAAE,MAAM,CAAC;CACjB;AA+FD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,mBAAmB,CAkFnC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,mBAAmB,CAAC,CAAC;AAM3C;;;GAGG;AACH,eAAO,MAAM,OAAO,EAAE,KA4BrB,CAAC;AAMF;;GAEG;AACH,eAAO,MAAM,QAAQ,EAAE,KA0BtB,CAAC;AAMF;;;GAGG;AACH,eAAO,MAAM,aAAa,EAAE,KA6B3B,CAAC;AAMF;;;GAGG;AACH,eAAO,MAAM,eAAe,EAAE,KA0C7B,CAAC;AAMF;;GAEG;AACH,eAAO,MAAM,eAAe,EAAE,KAkD7B,CAAC;AAMF,gEAAgE;AAChE,eAAO,MAAM,aAAa,EAAE,KA0H3B,CAAC"}

package/dist/stories/pd-forms-overview.stories.d.ts

@@ -1,48 +0,0 @@
-import { StoryObj } from '@storybook/web-components-vite';
-declare const meta: {
-    title: string;
-};
-export default meta;
-type Story = StoryObj;
-/**
- * User registration form with validation for common sign-up scenarios.
- * Demonstrates pd-select, pd-input (text, email, phone, secret),
- * pd-checkbox, and span-based responsive layout.
- */
-export declare const UserRegistrationForm: Story;
-/**
- * Contact form for customer inquiries with department/priority selection,
- * message textarea, and optional file attachment.
- * Demonstrates pd-input-area, pd-input-file, and pd-select.
- */
-export declare const ContactForm: Story;
-/**
- * Business application form with company information, contact person,
- * experience rating, and partnership type selection.
- * Demonstrates pd-range with optionValueMapper and pd-radio-group.
- */
-export declare const BusinessApplicationForm: Story;
-/**
- * Hotel booking form with check-in/out times, room selection,
- * and guest preferences. Demonstrates pd-input-time,
- * number inputs, and multiple checkboxes for options.
- */
-export declare const HotelBookingForm: Story;
-/**
- * Feedback form with satisfaction rating via pd-range,
- * recommendation via pd-radio-group, and detailed text feedback.
- * Demonstrates pd-range with SATISFACTION_MAPPER and optional fields.
- */
-export declare const FeedbackSurveyForm: Story;
-/**
- * Order form demonstrating pd-form-fieldset for structured data grouping.
- * Shows how fieldsets aggregate child values into nested objects
- * with billing and shipping address side-by-side using span="half".
- */
-export declare const OrderFormWithFieldsets: Story;
-/**
- * Three fieldsets side-by-side using span="third" for compact
- * multi-section forms. Demonstrates column-based fieldset layout.
- */
-export declare const ThreeColumnFieldsets: Story;
-//# sourceMappingURL=pd-forms-overview.stories.d.ts.map

package/dist/stories/pd-forms-overview.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"pd-forms-overview.stories.d.ts","sourceRoot":"","sources":["../../src/stories/pd-forms-overview.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAKrE,OAAO,2CAA2C,CAAC;AACnD,OAAO,+BAA+B,CAAC;AACvC,OAAO,yCAAyC,CAAC;AACjD,OAAO,yBAAyB,CAAC;AACjC,OAAO,mCAAmC,CAAC;AAC3C,OAAO,mCAAmC,CAAC;AAC3C,OAAO,mCAAmC,CAAC;AAC3C,OAAO,2BAA2B,CAAC;AACnC,OAAO,+BAA+B,CAAC;AACvC,OAAO,qCAAqC,CAAC;AAC7C,OAAO,yBAAyB,CAAC;AACjC,OAAO,2BAA2B,CAAC;AACnC,OAAO,uCAAuC,CAAC;AAC/C,OAAO,uCAAuC,CAAC;AAC/C,OAAO,2CAA2C,CAAC;AACnD,OAAO,iCAAiC,CAAC;AAmEzC,QAAA,MAAM,IAAI;;CAEM,CAAC;AAEjB,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAMtB;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,EAAE,KA+FlC,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,WAAW,EAAE,KAgFzB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,uBAAuB,EAAE,KAsKrC,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,EAAE,KA+H9B,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,EAAE,KAqFhC,CAAC;AAMF;;;;GAIG;AACH,eAAO,MAAM,sBAAsB,EAAE,KAoLpC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,oBAAoB,EAAE,KA8FlC,CAAC"}