@ticatec/topside-elements 1.0.0

package/dist/form/color_picker/ColorPickerPanel.svelte

@@ -0,0 +1,178 @@
+<script lang="ts">
+
+
+    import i18nRes from "../../i18nRes";
+
+    interface Props {
+        initialColor?: string;
+        showHex?: boolean;
+        showRgb?: boolean;
+        swatches?: Array<any>;
+        onchange?: (color: string) => void;
+    }
+
+    let {initialColor = "#ffffff", showHex = true, showRgb = false, swatches = [], onchange}: Props = $props();
+
+    // Neutral initial value + effect-driven sync (rather than $state(initialColor))
+    // avoids implying initialColor is captured only once; the effect keeps
+    // selectedColor in sync whenever the prop changes later.
+    let selectedColor = $state('#ffffff');
+    let rgbValues = $derived(hexToRgb(selectedColor));
+
+    $effect(() => {
+        selectedColor = initialColor;
+    });
+
+    // Convert hex to RGB
+    function hexToRgb(hex: string) {
+        const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+        return result ? {
+            r: parseInt(result[1], 16),
+            g: parseInt(result[2], 16),
+            b: parseInt(result[3], 16)
+        } : { r: 0, g: 0, b: 0 };
+    }
+
+    // selectedColor is already updated by bind:value before this fires
+    function handleColorChange(event: Event) {
+        onchange?.(selectedColor);
+    }
+
+    // Select a swatch
+    function selectSwatch(color: any) {
+        selectedColor = color;
+        onchange?.(selectedColor);
+    }
+</script>
+
+<div class="color-picker">
+    <label for="color-input">
+        {i18nRes.colorPicker()}
+    </label>
+
+    <div class="color-input-group">
+        <input
+                id="color-input"
+                type="color"
+                bind:value={selectedColor}
+                onchange={handleColorChange}
+        />
+        <div
+                class="color-preview"
+                style="background-color: {selectedColor};"
+        ></div>
+    </div>
+
+    {#if showHex}
+            <div class="color-value">
+                <span>HEX:</span> {selectedColor}
+            </div>
+        {/if}
+
+    {#if showRgb}
+            <div class="color-value">
+                <span>RGB:</span> rgb({rgbValues.r}, {rgbValues.g}, {rgbValues.b})
+            </div>
+        {/if}
+
+    {#if swatches && swatches.length > 0}
+            <div class="swatches">
+                {#each swatches as swatch}
+                        <button
+                                type="button"
+                                class="swatch"
+                                style="background-color: {swatch};"
+                                onclick={() => selectSwatch(swatch)}
+                                aria-label={`Select color ${swatch}`}
+                                class:selected={selectedColor === swatch}
+                        ></button>
+                    {/each}
+            </div>
+        {/if}
+</div>
+
+<style>
+    .color-picker {
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+        padding: 16px;
+        border-radius: 8px;
+        background-color: #f8f9fa;
+        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+        width: 100%;
+        max-width: 300px;
+    }
+
+    label {
+        display: block;
+        margin-bottom: 8px;
+        font-weight: 500;
+        color: #333;
+    }
+
+    .color-input-group {
+        display: flex;
+        align-items: center;
+        margin-bottom: 12px;
+    }
+
+    input[type="color"] {
+        width: 40px;
+        height: 40px;
+        border: none;
+        padding: 0;
+        background: none;
+        cursor: pointer;
+    }
+
+    input[type="color"]::-webkit-color-swatch-wrapper {
+        padding: 0;
+    }
+
+    input[type="color"]::-webkit-color-swatch {
+        border: 1px solid #ddd;
+        border-radius: 4px;
+    }
+
+    .color-preview {
+        width: 40px;
+        height: 40px;
+        margin-left: 12px;
+        border-radius: 4px;
+        border: 1px solid #ddd;
+    }
+
+    .color-value {
+        margin-bottom: 8px;
+        font-size: 14px;
+    }
+
+    .color-value span {
+        font-weight: 600;
+        margin-right: 4px;
+    }
+
+    .swatches {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 8px;
+        margin-top: 12px;
+    }
+
+    .swatch {
+        width: 24px;
+        height: 24px;
+        border-radius: 50%;
+        border: 1px solid #ddd;
+        cursor: pointer;
+        transition: transform 0.2s ease;
+    }
+
+    .swatch:hover {
+        transform: scale(1.1);
+    }
+
+    .swatch.selected {
+        border: 2px solid #333;
+        box-shadow: 0 0 0 2px white inset;
+    }
+</style>

package/dist/form/color_picker/ColorPickerPanel.svelte.d.ts

@@ -0,0 +1,10 @@
+interface Props {
+    initialColor?: string;
+    showHex?: boolean;
+    showRgb?: boolean;
+    swatches?: Array<any>;
+    onchange?: (color: string) => void;
+}
+declare const ColorPickerPanel: import("svelte").Component<Props, {}, "">;
+type ColorPickerPanel = ReturnType<typeof ColorPickerPanel>;
+export default ColorPickerPanel;

package/dist/form/color_picker/README.md

@@ -0,0 +1,296 @@
+# ColorPicker
+
+A color picker component that provides an intuitive interface for selecting colors. It combines a native HTML5 color input with a visual color swatch preview, making it easy to see the selected color at a glance. Perfect for themes, branding, design systems, and any scenario where color selection is needed.
+
+## Features
+
+- **Native color input** — uses the browser's native color picker for consistent UX across all platforms.
+- **Visual preview** — displays the selected color as a swatch next to the input.
+- **Compact mode** — available for dense layouts.
+- **Disabled and readonly** — full support for disabled and readonly states.
+- **Multiple variants** — supports plain, outlined, and filled variants.
+
+## Installation
+
+```bash
+npm install @ticatec/topside-elements
+```
+
+## Import
+
+```typescript
+import ColorPicker from "@ticatec/topside-elements/ColorPicker";
+```
+
+## Basic Usage
+
+```svelte
+<script lang="ts">
+  import ColorPicker from "@ticatec/topside-elements/ColorPicker";
+
+  let selectedColor = $state("#3b82f6");
+</script>
+
+<ColorPicker bind:value={selectedColor} />
+```
+
+## Props
+
+`ColorPicker` extends `CommonFieldProps`, so it inherits `variant`, `compact`, `disabled`, `readonly`, `style`, `error`, `tooltip`, `theme`, `placeholder`.
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `value` | `string` (bindable) | `"#000000"` | The selected color in `#RRGGBB` hex format (e.g., `#3b82f6`). `bind:value={...}` for two-way binding. |
+| `variant` | `'' \| 'plain' \| 'outlined' \| 'filled'` | `''` | Visual style variant. |
+| `compact` | `boolean` | `false` | Dense layout for table cells and inline forms. |
+| `disabled` | `boolean` | `false` | Fully disabled — the color picker is non-interactive. |
+| `readonly` | `boolean` | `false` | Read-only — the color picker is non-interactive but visible. |
+| `style` | `string` | — | Inline CSS on the editor root. |
+| `error` | `string` | — | Validation error text — triggers the editor's error state. |
+| `tooltip` | `string` | — | Hover tooltip on the editor. |
+| `theme` | `string` | — | Rendered as `data-theme` on the editor for scoped styling. |
+| `onchange` | `(value: string) => void` | — | Fires when the color changes. Receives the new hex color value. |
+| `onfocus` | `(event: FocusEvent) => void` | — | Input focus. |
+| `onblur` | `(event: FocusEvent) => void` | — | Input blur. |
+
+## Events
+
+| Event | Signature | Description |
+|-------|-----------|-------------|
+| `onchange` | `(value: string) => void` | Fires when the color changes. Receives the new hex color value. |
+| `onfocus` | `(event: FocusEvent) => void` | Input focus. |
+| `onblur` | `(event: FocusEvent) => void` | Input blur. |
+
+## Methods
+
+| Method | Signature | Description |
+|--------|-----------|-------------|
+| `focus()` | `() => void` | Moves focus to the color picker input. |
+
+```svelte
+<script lang="ts">
+  import ColorPicker from "@ticatec/topside-elements/ColorPicker";
+
+  let pickerRef;
+
+  function focusPicker() {
+    pickerRef.focus();
+  }
+</script>
+
+<ColorPicker bind:this={pickerRef} bind:value={selectedColor} />
+<button onclick={focusPicker}>Focus</button>
+```
+
+## Examples
+
+### Basic color picker
+
+```svelte
+<script lang="ts">
+  import ColorPicker from "@ticatec/topside-elements/ColorPicker";
+
+  let color = $state("#3b82f6");
+</script>
+
+<ColorPicker bind:value={color} />
+<p>Selected color: {color}</p>
+```
+
+### Color picker with preview box
+
+```svelte
+<script lang="ts">
+  import ColorPicker from "@ticatec/topside-elements/ColorPicker";
+
+  let primaryColor = $state("#3b82f6");
+  let secondaryColor = $state("#10b981");
+  let accentColor = $state("#f59e0b");
+</script>
+
+<div class="color-pickers">
+  <div class="color-item">
+    <ColorPicker bind:value={primaryColor} />
+    <div class="preview" style="background-color: {primaryColor}"></div>
+  </div>
+  <div class="color-item">
+    <ColorPicker bind:value={secondaryColor} />
+    <div class="preview" style="background-color: {secondaryColor}"></div>
+  </div>
+  <div class="color-item">
+    <ColorPicker bind:value={accentColor} />
+    <div class="preview" style="background-color: {accentColor}"></div>
+  </div>
+</div>
+
+<style>
+  .color-pickers {
+    display: flex;
+    gap: 24px;
+    margin: 20px;
+  }
+  .color-item {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+  .preview {
+    width: 48px;
+    height: 48px;
+    border-radius: 8px;
+    border: 1px solid #e5e7eb;
+  }
+</style>
+```
+
+### Disabled and readonly modes
+
+```svelte
+<script lang="ts">
+  import ColorPicker from "@ticatec/topside-elements/ColorPicker";
+
+  let disabledColor = $state("#ef4444");
+  let readonlyColor = $state("#8b5cf6");
+  let normalColor = $state("#3b82f6");
+</script>
+
+<div style="display: flex; flex-direction: column; gap: 16px;">
+  <ColorPicker bind:value={disabledColor} disabled />
+  <ColorPicker bind:value={readonlyColor} readonly />
+  <ColorPicker bind:value={normalColor} />
+</div>
+```
+
+### Compact mode
+
+```svelte
+<script lang="ts">
+  import ColorPicker from "@ticatec/topside-elements/ColorPicker";
+
+  let color = $state("#10b981");
+</script>
+
+<table>
+  <thead>
+    <tr>
+      <th>Name</th>
+      <th>Color</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Primary</td>
+      <td>
+        <ColorPicker bind:value={color} compact />
+      </td>
+    </tr>
+    <tr>
+      <td>Secondary</td>
+      <td>
+        <ColorPicker bind:value={color} compact />
+      </td>
+    </tr>
+  </tbody>
+</table>
+```
+
+### Theme customization
+
+```svelte
+<script lang="ts">
+  import ColorPicker from "@ticatec/topside-elements/ColorPicker";
+
+  let primaryColor = $state("#3b82f6");
+  let secondaryColor = $state("#10b981");
+  let accentColor = $state("#f59e0b");
+  let errorColor = $state("#ef4444");
+  let warningColor = $state("#f59e0b");
+  let successColor = $state("#10b981");
+</script>
+
+<div class="theme-customizer">
+  <h3>Theme Customizer</h3>
+  <div class="color-grid">
+    <div class="color-item">
+      <label>Primary</label>
+      <ColorPicker bind:value={primaryColor} />
+    </div>
+    <div class="color-item">
+      <label>Secondary</label>
+      <ColorPicker bind:value={secondaryColor} />
+    </div>
+    <div class="color-item">
+      <label>Accent</label>
+      <ColorPicker bind:value={accentColor} />
+    </div>
+    <div class="color-item">
+      <label>Error</label>
+      <ColorPicker bind:value={errorColor} />
+    </div>
+    <div class="color-item">
+      <label>Warning</label>
+      <ColorPicker bind:value={warningColor} />
+    </div>
+    <div class="color-item">
+      <label>Success</label>
+      <ColorPicker bind:value={successColor} />
+    </div>
+  </div>
+</div>
+
+<style>
+  .theme-customizer {
+    max-width: 600px;
+    margin: 20px;
+  }
+  .color-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 16px;
+    margin-top: 16px;
+  }
+  .color-item {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+  .color-item label {
+    font-weight: 500;
+    color: #374151;
+  }
+</style>
+```
+
+## Behavior Notes
+
+### Native color input + editable hex field
+
+The component shows two parts side by side: a native `<input type="color">` swatch (opens the browser's built-in color picker) and a text field showing the hex value. The text field is directly editable — typing a value and committing it (blur or Enter) updates `value` the same as picking a color from the swatch.
+
+There's no alpha/transparency support — `<input type="color">` has no concept of it, so `value` is always a plain 6-digit `#rrggbb`.
+
+### Hex format and validation
+
+`value` must be exactly `#RRGGBB` (6 hex digits after `#`, case-insensitive). When typing in the text field:
+
+- Only `#` and hex digits (`0-9a-fA-F`) can be typed, capped at 6 digits — anything else is blocked or truncated as you type.
+- The value is validated on commit (blur or Enter), not on every keystroke, so you can type through incomplete intermediate states.
+- A missing leading `#` is added automatically on commit (e.g. typing `ff0000` commits as `#ff0000`).
+- If the committed text isn't a valid `#RRGGBB` string, the field reverts to the last valid value — `onchange` is not called.
+
+### Disabled and readonly states
+
+- **Disabled**: The color picker is non-interactive. The visual swatch is dimmed, and the hex field is disabled.
+- **Readonly**: The color picker is non-interactive but fully visible — the swatch blocks clicks (it can't open the native picker) and the hex field becomes a non-editable (but not dimmed) readonly text field.
+
+## Accessibility
+
+- The native color input has proper ARIA attributes.
+- The visual swatch is decorative and marked with `aria-hidden="true"`.
+- For full ARIA, wrap with `<label>` or use `aria-label`.
+
+## Related Components
+
+- [TextEditor](../text_editor/README.md) — multi-line text area.
+- [NumberEditor](../number_editor/README.md) — numeric input.
+- [DatePicker](../date_picker/README.md) — date selection.