@jsfour/root-ui 0.0.1

package/src/components/input/input.scss

@@ -0,0 +1,156 @@
+.root-input {
+    &--full-width {
+        width: 100%;
+    }
+    
+    .root-input-field {
+        display: flex;
+        align-items: center;
+        width: 100%;
+        border-radius: 0.75rem;
+        background-color: var(--rootsdk-input);
+        border: 0.03125rem solid var(--rootsdk-highlight-normal);
+        color: var(--rootsdk-text-primary);
+        min-height: 2em;
+        outline: transparent;
+        box-shadow: none;
+        padding: 1rem;
+        box-sizing: border-box;
+        cursor: text;
+
+        &.root-input-field--textarea {
+            align-items: flex-start;
+        }
+
+        &.root-input-field--file {
+            position: relative;
+            cursor: pointer;
+        }
+
+        &.root-input-field--color {
+            position: relative;
+            cursor: pointer;
+        }
+
+        &:focus-within {
+            border: 0.03125rem solid var(--rootsdk-brand-primary);
+        }
+
+        &.root-input-field--error {
+            border-color: var(--rootsdk-error, #e53935);
+        }
+    }
+
+    .root-input-icon {
+        margin-right: 0.5rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 1em;
+    }
+
+    input {
+        flex: 1;
+        border: none;
+        background: transparent;
+        color: inherit;
+        font-family: inherit;
+        outline: none;
+        padding: 0;
+        margin: 0;
+        text-overflow: ellipsis;
+        cursor: text;
+
+        &[type='file'] {
+            position: absolute;
+            inset: 0;
+            opacity: 0;
+            cursor: pointer;
+        }
+
+        &[type='color'] {
+            position: absolute;
+            inset: 0;
+            opacity: 0;
+            cursor: pointer;
+        }
+        &::-webkit-calendar-picker-indicator {
+            display: none;
+        }
+
+        &::-webkit-outer-spin-button,
+        &::-webkit-inner-spin-button {
+            -webkit-appearance: none;
+            margin: 0;
+        }
+    }
+
+    textarea {
+        flex: 1;
+        border: none;
+        background: transparent;
+        color: inherit;
+        font-family: inherit;
+        outline: none;
+        padding: 0;
+        margin: 0;
+        resize: vertical;
+        min-height: 6rem;
+    }
+
+    .root-input-number-controls {
+        display: flex;
+        flex-direction: column;
+        gap: 0;
+        margin-left: 0;
+        margin-right: 0.5rem;
+        height: 1em;
+        line-height: 0.5;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+    }
+
+    .root-input-file-label {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 0.5rem;
+        width: 100%;
+        pointer-events: none;
+    }
+
+    .root-input-color-label {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        width: 100%;
+        pointer-events: none;
+    }
+
+    .root-input-color-swatch {
+        width: 1rem;
+        height: 1rem;
+        border-radius: 4px;
+        border: 0.03125rem solid var(--rootsdk-highlight-normal);
+    }
+
+    .root-input-color-text {
+        font-family: inherit;
+        color: inherit;
+    }
+
+    label {
+        font-size: 0.875rem;
+        color: var(--rootsdk-text-tertiary);
+        text-transform: capitalize;
+        margin-bottom: .5rem;
+        display: block;
+    }
+
+    .root-input-error {
+        margin-top: 0.35rem;
+        color: var(--rootsdk-error, #e53935);
+        font-size: 0.75rem;
+    }
+}

package/src/components/input/input.tsx

@@ -0,0 +1,264 @@
+import { Component, h, Prop, Event, EventEmitter, Watch, State, Element } from '@stencil/core';
+import { randomIdGenerator } from '../../global/utils/randomIdGenerator';
+import { RootInputType } from './input-type.enum';
+
+@Component({
+    tag: 'root-input',
+    styleUrl: 'input.scss',
+    shadow: true
+})
+export class RootInput {
+    @Element() hostElement: HTMLElement;
+
+    private inputRef?: HTMLInputElement | HTMLTextAreaElement;
+
+    @Prop() inputId: string = randomIdGenerator('root-input');
+
+    @Prop() type: RootInputType = RootInputType.TEXT;
+
+    @Prop() label!: string;
+
+    @Prop() inputName: string;
+
+    @Prop() placeholder: string = '';
+
+    @Prop({ mutable: true }) value: string = '';
+
+    @Watch('value')
+    onValueChanged(newValue: string) {
+        this.inputValue = newValue;
+    }
+
+    @Prop() maxlength: number;
+
+    @Prop() fullWidth: boolean = false;
+
+    @Prop() multiline: boolean = false;
+
+    @Prop() icon: boolean = true;
+
+    @State() showPassword: boolean = false;
+
+    @State() inputValue: string = '';
+
+    @State() error: string = '';
+
+    @State() touched: boolean = false;
+
+    @State() hasIcon: boolean = false;
+
+    @State() fileLabel: string = 'Select file';
+
+    @Event() rootInputChange: EventEmitter<string>;
+
+    @Event() rootInputBlur: EventEmitter<FocusEvent>;
+
+    componentWillLoad() {
+        this.setHasIcon();
+        this.inputValue = this.value;
+    }
+
+    setHasIcon() {
+        const icon = !!this.hostElement.querySelector('[slot="icon"]');
+
+        if (icon) {
+            this.hasIcon = icon;
+        }
+
+    }
+
+
+    private openPicker = () => {
+        if (!this.inputRef) return;
+
+        const el = this.inputRef;
+        if (el instanceof HTMLInputElement && (el as any).showPicker) {
+            (el as any).showPicker();
+        } else {
+            el.focus();
+            if (el instanceof HTMLInputElement) {
+                el.click();
+            }
+        }
+    }
+
+    private togglePasswordVisibility = () => {
+        this.showPassword = !this.showPassword;
+    }
+
+    private incrementNumber = () => {
+        if (this.inputRef instanceof HTMLInputElement) {
+            this.inputRef.stepUp();
+            this.inputValue = this.inputRef.value;
+            this.rootInputChange.emit(this.inputValue);
+        }
+    }
+
+    private decrementNumber = () => {
+        if (this.inputRef instanceof HTMLInputElement) {
+            this.inputRef.stepDown();
+            this.inputValue = this.inputRef.value;
+            this.rootInputChange.emit(this.inputValue);
+        }
+    }
+
+    private validate = (val: string): string => {
+        if (!val) return '';
+        
+        if (this.type === RootInputType.EMAIL) {
+            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+            return emailRegex.test(val) ? '' : 'Please enter a valid email address.';
+        }
+
+        if (this.type === RootInputType.TEL) {
+            const phoneRegex = /^[+]?[- 0-9()]{7,}$/;
+            return phoneRegex.test(val) ? '' : 'Please enter a valid phone number.';
+        }
+
+        return '';
+    }
+
+    private handleBlur = (e: FocusEvent) => {
+        this.touched = true;
+        this.error = this.validate(this.inputValue);
+        this.rootInputBlur.emit(e);
+    }
+
+    private handleChange = (e: Event) => {
+        const target = e.target as HTMLInputElement | HTMLTextAreaElement;
+        const nextValue = target.value;
+        this.inputValue = nextValue;
+        this.rootInputChange.emit(nextValue);
+        
+        if (this.touched) {
+            this.error = this.validate(nextValue);
+        }
+    }
+
+    private handleFileChange = (e: Event) => {
+        const target = e.target as HTMLInputElement;
+        const file = target.files?.[0];
+        
+        if (file) {
+            this.fileLabel = file.name;
+        } else {
+            this.fileLabel = 'Select file';
+        }
+        
+        this.rootInputChange.emit(target.value);
+    }
+
+    private handleFieldClick = () => {
+        if (!this.inputRef) return;
+        
+        if (this.multiline) {
+            this.inputRef.focus();
+            return;
+        }
+        
+        if (this.inputRef instanceof HTMLInputElement) {
+            if (this.inputRef.type === 'color') {
+                this.inputRef.click();
+                return;
+            }
+            if (this.inputRef.type !== 'date') {
+                this.inputRef.focus();
+            }
+        }
+    }
+
+    render() {
+        const inputType = this.type === RootInputType.PASSWORD 
+            ? (this.showPassword ? 'text' : 'password') 
+            : this.type;
+        
+        const colorValue = this.type === RootInputType.COLOR 
+            ? (this.inputValue || '#000000') 
+            : this.inputValue;
+
+        const classes = {
+            'root-input': true,
+            'root-input--full-width': this.fullWidth,
+        };
+
+        const fieldClasses = {
+            'root-input-field': true,
+            'root-input-field--error': !!this.error,
+            'root-input-field--file': this.type === RootInputType.FILE,
+            'root-input-field--color': this.type === RootInputType.COLOR,
+            'root-input-field--textarea': this.multiline,
+        };
+
+        return (
+            <div class={classes}>
+                <label htmlFor={this.inputId}>
+                    {this.label}
+                </label>
+                <div class={fieldClasses} onClick={this.handleFieldClick}>
+                    {this.hasIcon && (
+                        <div class="root-input-icon" onClick={this.openPicker}>
+                            <slot name="icon"></slot>
+                        </div>
+                    )}
+                    {this.multiline ? (
+                        <textarea
+                            ref={(el) => this.inputRef = el}
+                            placeholder={this.placeholder}
+                            id={this.inputId}
+                            name={this.inputName}
+                            maxLength={this.maxlength}
+                            value={this.inputValue}
+                            onBlur={this.handleBlur}
+                            onInput={this.handleChange}
+                            aria-invalid={!!this.error ? 'true' : 'false'}
+                            rows={3}
+                        />
+                    ) : (
+                        <input
+                            ref={(el) => this.inputRef = el}
+                            placeholder={this.placeholder}
+                            id={this.inputId}
+                            name={this.inputName}
+                            maxLength={this.maxlength}
+                            type={inputType}
+                            value={colorValue}
+                            onBlur={this.handleBlur}
+                            onInput={this.type === RootInputType.FILE ? this.handleFileChange : this.handleChange}
+                            aria-invalid={!!this.error ? 'true' : 'false'}
+                        />
+                    )}
+                    {this.type === RootInputType.COLOR && (
+                        <div class="root-input-color-label">
+                            <span class="root-input-color-swatch" style={{ backgroundColor: colorValue }}></span>
+                            <span class="root-input-color-text">{colorValue}</span>
+                        </div>
+                    )}
+                    {this.type === RootInputType.FILE && !this.multiline && (
+                        <div class="root-input-file-label">
+                            <span>{this.fileLabel}</span>
+                            <slot name="file-icon"></slot>
+                        </div>
+                    )}
+                    {this.type === RootInputType.PASSWORD && !this.multiline && (
+                        <div class="root-input-icon" onClick={this.togglePasswordVisibility}>
+                            <slot name="password-icon"></slot>
+                        </div>
+                    )}
+                    {this.type === RootInputType.NUMBER && !this.multiline && (
+                        <div class="root-input-number-controls">
+                            <div class="root-input-icon" onClick={this.incrementNumber}>
+                                <slot name="number-up-icon"></slot>
+                            </div>
+                            <div class="root-input-icon" onClick={this.decrementNumber}>
+                                <slot name="number-down-icon"></slot>
+                            </div>
+                        </div>
+                    )}
+                </div>
+                {this.error && this.touched && (
+                    <div class="root-input-error">{this.error}</div>
+                )}
+            </div>
+        );
+    }
+}

package/src/components/input/readme.md

@@ -0,0 +1,34 @@
+# root-input
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property             | Attribute     | Description | Type                                                                                                                                                                                                                                                                                                                                                 | Default                           |
+| -------------------- | ------------- | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- |
+| `fullWidth`          | `full-width`  |             | `boolean`                                                                                                                                                                                                                                                                                                                                            | `false`                           |
+| `icon`               | `icon`        |             | `boolean`                                                                                                                                                                                                                                                                                                                                            | `true`                            |
+| `inputId`            | `input-id`    |             | `string`                                                                                                                                                                                                                                                                                                                                             | `randomIdGenerator('root-input')` |
+| `inputName`          | `input-name`  |             | `string`                                                                                                                                                                                                                                                                                                                                             | `undefined`                       |
+| `label` _(required)_ | `label`       |             | `string`                                                                                                                                                                                                                                                                                                                                             | `undefined`                       |
+| `maxlength`          | `maxlength`   |             | `number`                                                                                                                                                                                                                                                                                                                                             | `undefined`                       |
+| `multiline`          | `multiline`   |             | `boolean`                                                                                                                                                                                                                                                                                                                                            | `false`                           |
+| `placeholder`        | `placeholder` |             | `string`                                                                                                                                                                                                                                                                                                                                             | `''`                              |
+| `type`               | `type`        |             | `RootInputType.COLOR \| RootInputType.DATE \| RootInputType.EMAIL \| RootInputType.FILE \| RootInputType.IMAGE \| RootInputType.MONTH \| RootInputType.NUMBER \| RootInputType.PASSWORD \| RootInputType.SEARCH \| RootInputType.SUBMIT \| RootInputType.TEL \| RootInputType.TEXT \| RootInputType.TIME \| RootInputType.URL \| RootInputType.WEEK` | `RootInputType.TEXT`              |
+| `value`              | `value`       |             | `string`                                                                                                                                                                                                                                                                                                                                             | `''`                              |
+
+
+## Events
+
+| Event             | Description | Type                      |
+| ----------------- | ----------- | ------------------------- |
+| `rootInputBlur`   |             | `CustomEvent<FocusEvent>` |
+| `rootInputChange` |             | `CustomEvent<string>`     |
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

package/src/components/list/list.scss

@@ -0,0 +1,21 @@
+.root-list {
+    margin: 0;
+    padding-left: 1.5rem;
+    color: var(--rootsdk-text-primary);
+    font-size: 1rem;
+    line-height: 1.6;
+    list-style-position: inside;
+
+    &--bullet {
+        list-style-type: disc; 
+    }
+
+    &--numbered {
+        list-style-type: decimal;
+    }
+
+    li {
+        margin-bottom: 0.5rem;
+        padding-left: 0.25rem;
+    }
+}

package/src/components/list/list.tsx

@@ -0,0 +1,24 @@
+import { Component, h, Prop } from '@stencil/core';
+
+@Component({
+    tag: 'root-list',
+    styleUrl: 'list.scss',
+    shadow: true
+})
+export class RootList {
+    /** 
+     * The type of list: bullet or numbered
+     */
+    @Prop() type: 'bullet' | 'numbered' = 'bullet';
+
+    render() {
+        const isNumbered = this.type === 'numbered';
+        const Tag = isNumbered ? 'ol' : 'ul';
+
+        return (
+            <Tag class={{ 'root-list': true, [`root-list--${this.type}`]: true }}>
+                <slot></slot>
+            </Tag>
+        );
+    }
+}

package/src/components/list/readme.md

@@ -0,0 +1,17 @@
+# root-list
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property | Attribute | Description                          | Type                     | Default    |
+| -------- | --------- | ------------------------------------ | ------------------------ | ---------- |
+| `type`   | `type`    | The type of list: bullet or numbered | `"bullet" \| "numbered"` | `'bullet'` |
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*