@eduboxpro/studio 0.1.6 → 0.1.7

package/index.d.ts

@@ -1,7 +1,7 @@
 import * as _angular_core from '@angular/core';
 import { InjectionToken, EnvironmentProviders, ElementRef, Signal } from '@angular/core';
-import { icons } from 'lucide-angular';
 import { ControlValueAccessor } from '@angular/forms';
+import { icons } from 'lucide-angular';
 
 /**
  * Theme mode: light or dark
@@ -174,6 +174,30 @@ interface InputDefaultsConfig {
     floatingLabel?: boolean;
     clearable?: boolean;
 }
+/**
+ * Checkbox component defaults configuration
+ */
+interface CheckboxDefaultsConfig {
+    size?: 'sm' | 'md' | 'lg';
+    color?: 'primary' | 'secondary' | 'success' | 'error';
+    variant?: 'default' | 'outlined' | 'filled';
+    radius?: 'none' | 'sm' | 'md' | 'lg' | 'full';
+    labelPosition?: 'left' | 'right';
+}
+/**
+ * Textarea component defaults configuration
+ */
+interface TextareaDefaultsConfig {
+    variant?: 'outline' | 'filled' | 'underline';
+    size?: 'sm' | 'md' | 'lg';
+    color?: 'primary' | 'secondary' | 'success' | 'error';
+    radius?: 'none' | 'sm' | 'md' | 'lg' | 'full';
+    rows?: number;
+    autoResize?: boolean;
+    resize?: 'none' | 'vertical' | 'horizontal' | 'both';
+    showCharCount?: boolean;
+    clearable?: boolean;
+}
 /**
  * Components defaults configuration
  */
@@ -182,6 +206,8 @@ interface ComponentsConfig {
     badge?: BadgeDefaultsConfig;
     switch?: SwitchDefaultsConfig;
     input?: InputDefaultsConfig;
+    checkbox?: CheckboxDefaultsConfig;
+    textarea?: TextareaDefaultsConfig;
 }
 /**
  * Main Studio configuration interface
@@ -324,6 +350,167 @@ declare class ButtonComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<ButtonComponent, "studio-button", never, { "variantInput": { "alias": "variant"; "required": false; "isSignal": true; }; "sizeInput": { "alias": "size"; "required": false; "isSignal": true; }; "colorInput": { "alias": "color"; "required": false; "isSignal": true; }; "radiusInput": { "alias": "radius"; "required": false; "isSignal": true; }; "shadowInput": { "alias": "shadow"; "required": false; "isSignal": true; }; "compactInput": { "alias": "compact"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "loadingText": { "alias": "loadingText"; "required": false; "isSignal": true; }; "fullWidth": { "alias": "fullWidth"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "iconPosition": { "alias": "iconPosition"; "required": false; "isSignal": true; }; "href": { "alias": "href"; "required": false; "isSignal": true; }; "target": { "alias": "target"; "required": false; "isSignal": true; }; "badge": { "alias": "badge"; "required": false; "isSignal": true; }; "badgeColor": { "alias": "badgeColor"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "clicked": "clicked"; }, never, ["*"], true, never>;
 }
 
+/**
+ * Checkbox component for selecting boolean values
+ *
+ * @example
+ * <studio-checkbox
+ *   [(ngModel)]="accepted"
+ *   label="I accept terms and conditions"
+ *   (changed)="onAccept($event)"
+ * />
+ */
+declare class CheckboxComponent implements ControlValueAccessor {
+    private readonly configService;
+    private readonly checkboxDefaults;
+    /**
+     * Size of the checkbox
+     */
+    size: _angular_core.InputSignal<CheckboxSize>;
+    /**
+     * Color scheme
+     */
+    color: _angular_core.InputSignal<CheckboxColor>;
+    /**
+     * Visual variant
+     */
+    variant: _angular_core.InputSignal<CheckboxVariant>;
+    /**
+     * Border radius
+     */
+    radius: _angular_core.InputSignal<CheckboxRadius>;
+    /**
+     * Label text
+     */
+    label: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Label position relative to checkbox
+     */
+    labelPosition: _angular_core.InputSignal<"left" | "right">;
+    /**
+     * Additional description text
+     */
+    description: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Helper text
+     */
+    hint: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Required field
+     */
+    required: _angular_core.InputSignal<boolean>;
+    /**
+     * Error state
+     */
+    error: _angular_core.InputSignal<boolean>;
+    /**
+     * Error message
+     */
+    errorMessage: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Disabled state
+     */
+    disabled: _angular_core.InputSignal<boolean>;
+    /**
+     * Readonly state
+     */
+    readonly: _angular_core.InputSignal<boolean>;
+    /**
+     * Indeterminate state (for "select all" checkboxes)
+     */
+    indeterminate: _angular_core.InputSignal<boolean>;
+    /**
+     * Name attribute for form control
+     */
+    name: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Tab index
+     */
+    tabIndex: _angular_core.InputSignal<number>;
+    /**
+     * Value for checkbox groups
+     */
+    value: _angular_core.InputSignal<any>;
+    /**
+     * Emitted when checkbox state changes
+     */
+    changed: _angular_core.OutputEmitterRef<boolean>;
+    /**
+     * Internal checked state
+     */
+    protected internalChecked: _angular_core.WritableSignal<boolean>;
+    /**
+     * Internal focus state
+     */
+    protected isFocused: _angular_core.WritableSignal<boolean>;
+    /**
+     * Unique ID for accessibility
+     */
+    protected checkboxId: _angular_core.WritableSignal<string>;
+    /**
+     * Host CSS classes
+     */
+    protected hostClasses: _angular_core.Signal<{
+        [x: string]: boolean;
+        'studio-checkbox-wrapper': boolean;
+        'studio-checkbox-wrapper--disabled': boolean;
+        'studio-checkbox-wrapper--error': boolean;
+        'studio-checkbox-wrapper--focused': boolean;
+        'studio-checkbox-wrapper--label-left': boolean;
+    }>;
+    /**
+     * Checkbox element CSS classes
+     */
+    protected checkboxClasses: _angular_core.Signal<{
+        [x: string]: boolean;
+        'studio-checkbox': boolean;
+        'studio-checkbox--checked': boolean;
+        'studio-checkbox--indeterminate': boolean;
+        'studio-checkbox--disabled': boolean;
+        'studio-checkbox--error': boolean;
+    }>;
+    /**
+     * Show error message
+     */
+    protected showError: _angular_core.Signal<string | false | undefined>;
+    /**
+     * Show hint
+     */
+    protected showHint: _angular_core.Signal<string | false | undefined>;
+    /**
+     * ARIA checked state
+     */
+    protected ariaChecked: _angular_core.Signal<"mixed" | "true" | "false">;
+    private onChange;
+    private onTouched;
+    writeValue(value: boolean): void;
+    registerOnChange(fn: (value: boolean) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    /**
+     * Handle checkbox toggle
+     */
+    protected handleChange(event: Event): void;
+    /**
+     * Handle focus
+     */
+    protected handleFocus(): void;
+    /**
+     * Handle blur
+     */
+    protected handleBlur(): void;
+    /**
+     * Handle label click
+     */
+    protected handleLabelClick(event: Event): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CheckboxComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CheckboxComponent, "studio-checkbox", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "radius": { "alias": "radius"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "labelPosition": { "alias": "labelPosition"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "indeterminate": { "alias": "indeterminate"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "tabIndex": { "alias": "tabIndex"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "changed": "changed"; }, never, never, true, never>;
+}
+type CheckboxSize = 'sm' | 'md' | 'lg';
+type CheckboxColor = 'primary' | 'secondary' | 'success' | 'error';
+type CheckboxVariant = 'default' | 'outlined' | 'filled';
+type CheckboxRadius = 'none' | 'sm' | 'md' | 'lg' | 'full';
+
 /**
  * Icon component with Lucide icons support
  *
@@ -491,6 +678,224 @@ declare class SwitchComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SwitchComponent, "studio-switch", never, { "checked": { "alias": "checked"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "labelPosition": { "alias": "labelPosition"; "required": false; "isSignal": true; }; "showIcons": { "alias": "showIcons"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "sizeInput": { "alias": "size"; "required": false; "isSignal": true; }; "colorInput": { "alias": "color"; "required": false; "isSignal": true; }; }, { "checked": "checkedChange"; "checkedChange": "checkedChange"; }, never, never, true, never>;
 }
 
+/**
+ * Textarea component for multi-line text input
+ *
+ * @example
+ * <studio-textarea
+ *   [(ngModel)]="message"
+ *   label="Your message"
+ *   placeholder="Enter your message..."
+ *   [rows]="4"
+ * />
+ */
+declare class TextareaComponent implements ControlValueAccessor {
+    private readonly configService;
+    private readonly textareaDefaults;
+    variant: _angular_core.InputSignal<TextareaVariant>;
+    size: _angular_core.InputSignal<TextareaSize>;
+    color: _angular_core.InputSignal<TextareaColor>;
+    radius: _angular_core.InputSignal<TextareaRadius>;
+    /**
+     * Label text
+     */
+    label: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Floating label (moves up when focused/filled)
+     */
+    floatingLabel: _angular_core.InputSignal<boolean>;
+    /**
+     * Placeholder text
+     */
+    placeholder: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Helper text
+     */
+    hint: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Number of visible text rows
+     */
+    rows: _angular_core.InputSignal<number>;
+    /**
+     * Minimum rows for auto-resize
+     */
+    minRows: _angular_core.InputSignal<number | undefined>;
+    /**
+     * Maximum rows for auto-resize
+     */
+    maxRows: _angular_core.InputSignal<number | undefined>;
+    /**
+     * Enable auto-resize based on content
+     */
+    autoResize: _angular_core.InputSignal<boolean>;
+    /**
+     * Resize behavior
+     */
+    resize: _angular_core.InputSignal<"none" | "vertical" | "horizontal" | "both">;
+    /**
+     * Maximum character length
+     */
+    maxLength: _angular_core.InputSignal<number | undefined>;
+    /**
+     * Show character counter
+     */
+    showCharCount: _angular_core.InputSignal<boolean>;
+    /**
+     * Character counter position
+     */
+    charCountPosition: _angular_core.InputSignal<"bottom-right" | "bottom-left">;
+    /**
+     * Required field
+     */
+    required: _angular_core.InputSignal<boolean>;
+    /**
+     * Minimum character length
+     */
+    minLength: _angular_core.InputSignal<number | undefined>;
+    /**
+     * Error state
+     */
+    error: _angular_core.InputSignal<boolean>;
+    /**
+     * Error message
+     */
+    errorMessage: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Disabled state
+     */
+    disabled: _angular_core.InputSignal<boolean>;
+    /**
+     * Readonly state
+     */
+    readonly: _angular_core.InputSignal<boolean>;
+    /**
+     * Full width (100% of parent)
+     */
+    fullWidth: _angular_core.InputSignal<boolean>;
+    /**
+     * Name attribute for form control
+     */
+    name: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Autocomplete attribute
+     */
+    autocomplete: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Spellcheck attribute
+     */
+    spellcheck: _angular_core.InputSignal<boolean>;
+    /**
+     * Show clear button
+     */
+    clearable: _angular_core.InputSignal<boolean>;
+    /**
+     * Loading state
+     */
+    loading: _angular_core.InputSignal<boolean>;
+    /**
+     * Emitted when value changes
+     */
+    changed: _angular_core.OutputEmitterRef<string>;
+    /**
+     * Emitted on focus
+     */
+    focused: _angular_core.OutputEmitterRef<FocusEvent>;
+    /**
+     * Emitted on blur
+     */
+    blurred: _angular_core.OutputEmitterRef<FocusEvent>;
+    /**
+     * Emitted on key press
+     */
+    keyPressed: _angular_core.OutputEmitterRef<KeyboardEvent>;
+    /**
+     * Internal value
+     */
+    protected internalValue: _angular_core.WritableSignal<string>;
+    /**
+     * Internal focus state
+     */
+    protected isFocused: _angular_core.WritableSignal<boolean>;
+    /**
+     * Unique ID for accessibility
+     */
+    protected textareaId: _angular_core.WritableSignal<string>;
+    /**
+     * Textarea element reference
+     */
+    protected textareaEl: _angular_core.Signal<ElementRef<HTMLTextAreaElement> | undefined>;
+    protected hostClasses: _angular_core.Signal<string>;
+    /**
+     * Textarea element CSS classes
+     */
+    protected textareaClasses: _angular_core.Signal<string>;
+    /**
+     * Show error message
+     */
+    protected showError: _angular_core.Signal<string | false | undefined>;
+    /**
+     * Show hint
+     */
+    protected showHint: _angular_core.Signal<string | false | undefined>;
+    /**
+     * Character count text
+     */
+    protected charCountText: _angular_core.Signal<string>;
+    /**
+     * Is character limit exceeded
+     */
+    protected isCharLimitExceeded: _angular_core.Signal<boolean>;
+    /**
+     * Computed placeholder (empty if floating label)
+     */
+    protected computedPlaceholder: _angular_core.Signal<string | undefined>;
+    /**
+     * Show floating label in "up" position
+     */
+    protected showFloatingLabelUp: _angular_core.Signal<boolean>;
+    private onChange;
+    private onTouched;
+    writeValue(value: string): void;
+    registerOnChange(fn: (value: string) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    constructor();
+    /**
+     * Handle textarea input
+     */
+    protected handleInput(event: Event): void;
+    /**
+     * Handle focus
+     */
+    protected handleFocus(event: FocusEvent): void;
+    /**
+     * Handle blur
+     */
+    protected handleBlur(event: FocusEvent): void;
+    /**
+     * Handle key press
+     */
+    protected handleKeyPress(event: KeyboardEvent): void;
+    /**
+     * Clear textarea value
+     */
+    protected handleClear(): void;
+    /**
+     * Adjust textarea height for auto-resize
+     */
+    private adjustHeightIfNeeded;
+    /**
+     * Adjust textarea height based on content
+     */
+    private adjustHeight;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TextareaComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TextareaComponent, "studio-textarea", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "radius": { "alias": "radius"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "floatingLabel": { "alias": "floatingLabel"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "rows": { "alias": "rows"; "required": false; "isSignal": true; }; "minRows": { "alias": "minRows"; "required": false; "isSignal": true; }; "maxRows": { "alias": "maxRows"; "required": false; "isSignal": true; }; "autoResize": { "alias": "autoResize"; "required": false; "isSignal": true; }; "resize": { "alias": "resize"; "required": false; "isSignal": true; }; "maxLength": { "alias": "maxLength"; "required": false; "isSignal": true; }; "showCharCount": { "alias": "showCharCount"; "required": false; "isSignal": true; }; "charCountPosition": { "alias": "charCountPosition"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "minLength": { "alias": "minLength"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "fullWidth": { "alias": "fullWidth"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "autocomplete": { "alias": "autocomplete"; "required": false; "isSignal": true; }; "spellcheck": { "alias": "spellcheck"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; }, { "changed": "changed"; "focused": "focused"; "blurred": "blurred"; "keyPressed": "keyPressed"; }, never, never, true, never>;
+}
+type TextareaVariant = 'outline' | 'filled' | 'underline';
+type TextareaSize = 'sm' | 'md' | 'lg';
+type TextareaColor = 'primary' | 'secondary' | 'success' | 'error';
+type TextareaRadius = 'none' | 'sm' | 'md' | 'lg' | 'full';
+
 /**
  * Theme toggle switch with sun/moon icons
  *
@@ -608,5 +1013,5 @@ declare function loadGoogleFonts(fonts: Array<{
     display?: 'auto' | 'block' | 'swap' | 'fallback' | 'optional';
 }>): void;
 
-export { BadgeComponent, ButtonComponent, IconComponent, InputComponent, STUDIO_CONFIG, StudioConfigService, SwitchComponent, ThemeSwitchComponent, classNames, isSafeUrl, loadGoogleFont, loadGoogleFonts, provideStudioConfig, provideStudioIcons, sanitizeUrl, withConfigDefault };
-export type { BadgeDefaultsConfig, ButtonDefaultsConfig, ColorConfig, ComponentsConfig, InputDefaultsConfig, InputMode, InputType, StudioConfig, StudioThemeConfig, SwitchDefaultsConfig, ThemeMode };
+export { BadgeComponent, ButtonComponent, CheckboxComponent, IconComponent, InputComponent, STUDIO_CONFIG, StudioConfigService, SwitchComponent, TextareaComponent, ThemeSwitchComponent, classNames, isSafeUrl, loadGoogleFont, loadGoogleFonts, provideStudioConfig, provideStudioIcons, sanitizeUrl, withConfigDefault };
+export type { BadgeDefaultsConfig, ButtonDefaultsConfig, CheckboxColor, CheckboxDefaultsConfig, CheckboxRadius, CheckboxSize, CheckboxVariant, ColorConfig, ComponentsConfig, InputDefaultsConfig, InputMode, InputType, StudioConfig, StudioThemeConfig, SwitchDefaultsConfig, TextareaColor, TextareaDefaultsConfig, TextareaRadius, TextareaSize, TextareaVariant, ThemeMode };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eduboxpro/studio",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "description": "Modern Angular UI library for educational platforms with customizable design system",
   "keywords": [
     "angular",

package/src/styles/studio.scss

@@ -20,10 +20,14 @@ studio-input,
 studio-badge,
 studio-switch,
 studio-theme-switch,
+studio-checkbox,
+studio-textarea,
 studio-button *,
 studio-input *,
 studio-badge *,
 studio-switch *,
-studio-theme-switch * {
+studio-theme-switch *,
+studio-checkbox *,
+studio-textarea * {
   font-family: var(--studio-font-family) !important;
 }