@proyecto-viviana/solidaria-components 0.5.0 → 0.7.0-rc.0

package/src/VirtualizerLayouts.ts

@@ -1,7 +1,40 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/src/layout/GridLayout.ts
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/src/layout/ListLayout.ts
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/src/layout/TableLayout.ts
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/src/layout/WaterfallLayout.ts
+
 /**
  * Layout primitives for solidaria-components Virtualizer.
  *
- * These are lightweight parity contracts inspired by RAC virtualizer layout APIs.
+ * These layout contracts are based on:
+ * - packages/react-stately/src/layout/ListLayout.ts
+ * - packages/react-stately/src/layout/GridLayout.ts
+ * - packages/react-stately/src/layout/TableLayout.ts
+ * - packages/react-stately/src/layout/WaterfallLayout.ts
  */
 
 export interface Point {
@@ -32,6 +65,8 @@ export interface LayoutInfo {
   key: string | number;
   index: number;
   rect: Rect;
+  /** True while this rect still uses `estimatedRowHeight` / `estimatedRowSize`. */
+  estimatedSize?: boolean;
 }
 
 export interface VirtualizerVisibleRange {
@@ -60,12 +95,43 @@ export interface DefaultVirtualizerLayoutOptions {
    * @default 'vertical'
    */
   orientation?: Orientation;
+  /**
+   * Fixed row size along the primary axis. Alias of RAC `rowSize` / `rowHeight`.
+   * Takes precedence over `estimatedRowHeight`.
+   */
+  rowSize?: number;
+  /** @deprecated Use `rowSize`. */
+  rowHeight?: number;
+  /**
+   * Estimated row size when heights are variable. RAC `estimatedRowSize` /
+   * `estimatedRowHeight` — ComboBox/Picker pass `estimatedRowHeight: 32`.
+   */
+  estimatedRowSize?: number;
+  /** @deprecated Use `estimatedRowSize`. */
+  estimatedRowHeight?: number;
+  /**
+   * Padding around the list along both axes. RAC `ListLayoutOptions.padding`.
+   * ComboBox/Picker pass `padding: 8`; the listbox element itself is `padding: 0`.
+   */
+  padding?: number;
+  /** Gap between items along the primary axis. */
+  gap?: number;
+  estimatedHeadingSize?: number;
+  estimatedHeadingHeight?: number;
+  loaderSize?: number;
+  loaderHeight?: number;
 }
 
 export interface GridLayoutOptions extends DefaultVirtualizerLayoutOptions {
   rowHeight?: number;
   columnCount?: number;
   viewportWidth?: number;
+  /** Minimum card/item width used to derive `columnCount` when it is omitted. */
+  minItemSize?: number;
+  /** Maximum card/item width. Consumed by CardView packing. */
+  maxItemSize?: number;
+  /** Gutter between items. */
+  minSpace?: number;
 }
 
 export interface WaterfallLayoutOptions extends GridLayoutOptions {
@@ -103,28 +169,59 @@ function clampRange(
   return {
     start: safeStart,
     end: safeEnd,
+    // Layout padding lives in layoutInfo / contentSize, not in these spacers.
+    // RAC CollectionRoot has no CSS padding; items are absolutely inset.
     offsetTop: safeStart * itemSize,
     offsetBottom: Math.max(0, (itemCount - safeEnd) * itemSize),
   };
 }
 
+/**
+ * Resolve the primary-axis row size. Fixed `rowSize` / `rowHeight` / `itemSize`
+ * win over `estimatedRowHeight`. Default 40 matches the existing Solid fallback
+ * (RAC ListLayout defaults to 48 only when neither fixed nor estimated is set).
+ */
+export function resolveListRowSizeInfo(options?: DefaultVirtualizerLayoutOptions): {
+  size: number;
+  estimated: boolean;
+} {
+  const fixed = options?.rowSize ?? options?.rowHeight ?? options?.itemSize;
+  if (fixed != null && Number.isFinite(fixed)) {
+    return { size: Math.max(1, fixed), estimated: false };
+  }
+  const estimated = options?.estimatedRowSize ?? options?.estimatedRowHeight;
+  if (estimated != null && Number.isFinite(estimated)) {
+    return { size: Math.max(1, estimated), estimated: true };
+  }
+  return { size: 40, estimated: false };
+}
+
+export function resolveListRowSize(options?: DefaultVirtualizerLayoutOptions): number {
+  return resolveListRowSizeInfo(options).size;
+}
+
 export function calculateLinearVisibleRange(
   itemCount: number,
   scrollOffset: number,
   viewportSize: number,
   itemSize: number,
   overscan: number,
+  padding = 0,
 ): VirtualizerVisibleRange {
   if (itemCount <= 0) return { start: 0, end: 0, offsetTop: 0, offsetBottom: 0 };
   const safeItemSize = Math.max(1, itemSize);
   const safeViewport = Math.max(1, viewportSize);
   const safeOverscan = Math.max(0, overscan);
-  const start = Math.floor(scrollOffset / safeItemSize) - safeOverscan;
+  const safePadding = Math.max(0, padding);
+  const start = Math.floor((scrollOffset - safePadding) / safeItemSize) - safeOverscan;
   const visibleCount = Math.ceil(safeViewport / safeItemSize) + safeOverscan * 2;
   return clampRange(itemCount, start, start + visibleCount, safeItemSize);
 }
 
 export class ListLayout {
+  /** Measured primary-axis size per index, filled by VirtualizerItem. */
+  private measuredMain = new Map<number, number>();
+
   getVisibleRange(
     ctx: VirtualizerRangeContext,
     options?: DefaultVirtualizerLayoutOptions,
@@ -133,39 +230,77 @@ export class ListLayout {
       ctx.itemCount,
       ctx.scrollOffset,
       ctx.viewportSize,
-      options?.itemSize ?? 40,
+      resolveListRowSize(options),
       options?.overscan ?? ctx.overscan,
+      Math.max(0, options?.padding ?? 0),
     );
   }
 
+  updateItemSize(index: number, mainSize: number): boolean {
+    if (!(mainSize > 0)) return false;
+    if (this.measuredMain.get(index) === mainSize) return false;
+    this.measuredMain.set(index, mainSize);
+    return true;
+  }
+
+  getContentSize(
+    itemCount: number,
+    context: VirtualizerLayoutInfoContext,
+    options?: DefaultVirtualizerLayoutOptions,
+  ): Size {
+    const { size: rowSize } = resolveListRowSizeInfo(options);
+    const padding = Math.max(0, options?.padding ?? 0);
+    const gap = Math.max(0, options?.gap ?? 0);
+    const horizontal = (options?.orientation ?? "vertical") === "horizontal";
+    let main = 0;
+    if (itemCount > 0) {
+      main = padding;
+      for (let i = 0; i < itemCount; i++) {
+        main += this.measuredMain.get(i) ?? rowSize;
+        if (i < itemCount - 1) main += gap;
+      }
+      main += padding;
+    }
+    if (horizontal) {
+      return { width: main, height: Math.max(0, context.viewportHeight ?? 0) };
+    }
+    return { width: Math.max(0, context.viewportWidth), height: main };
+  }
+
   getLayoutInfo(
     index: number,
     context: VirtualizerLayoutInfoContext,
     options?: DefaultVirtualizerLayoutOptions,
   ): LayoutInfo {
-    const itemSize = Math.max(1, options?.itemSize ?? 40);
+    const { size: rowSize, estimated } = resolveListRowSizeInfo(options);
+    const padding = Math.max(0, options?.padding ?? 0);
+    const gap = Math.max(0, options?.gap ?? 0);
+    const measured = this.measuredMain.get(index);
+    const main = measured ?? rowSize;
+    const estimatedSize = measured == null && estimated;
+    const origin = this.offsetForIndex(index, rowSize, padding, gap);
     if ((options?.orientation ?? "vertical") === "horizontal") {
-      // Items stack along the x axis; the cross axis (height) fills the viewport.
       return {
         key: String(index),
         index,
+        estimatedSize,
         rect: {
-          x: index * itemSize,
-          y: 0,
-          width: itemSize,
-          height: Math.max(0, context.viewportHeight ?? 0),
+          x: origin,
+          y: padding,
+          width: main,
+          height: Math.max(0, (context.viewportHeight ?? 0) - padding * 2),
         },
       };
     }
-    // Items stack along the y axis; the cross axis (width) fills the viewport.
     return {
       key: String(index),
       index,
+      estimatedSize,
       rect: {
-        x: 0,
-        y: index * itemSize,
-        width: Math.max(0, context.viewportWidth),
-        height: itemSize,
+        x: padding,
+        y: origin,
+        width: Math.max(0, context.viewportWidth - padding * 2),
+        height: main,
       },
     };
   }
@@ -176,36 +311,63 @@ export class ListLayout {
     options?: DefaultVirtualizerLayoutOptions,
   ): VirtualizerDropTarget | null {
     if (itemCount <= 0) return { type: "root", index: -1, position: "on" };
-    const itemSize = Math.max(1, options?.itemSize ?? 40);
-    // Measure the drop point along the primary (scroll) axis.
-    const offset = (options?.orientation ?? "vertical") === "horizontal" ? point.x : point.y;
+    const itemSize = resolveListRowSize(options);
+    const padding = Math.max(0, options?.padding ?? 0);
+    const gap = Math.max(0, options?.gap ?? 0);
+    const stride = itemSize + gap;
+    const offset =
+      ((options?.orientation ?? "vertical") === "horizontal" ? point.x : point.y) - padding;
     if (offset < 0) {
       return { type: "item", index: 0, position: "before" };
     }
-    const totalSize = itemCount * itemSize;
+    const totalSize = itemCount * stride - (itemCount > 0 ? gap : 0);
     if (offset >= totalSize) {
       return { type: "item", index: itemCount - 1, position: "after" };
     }
-    const rawIndex = Math.floor(offset / itemSize);
+    const rawIndex = Math.floor(offset / stride);
     const index = Math.max(0, Math.min(rawIndex, itemCount - 1));
-    const offsetWithinItem = Math.max(0, offset - index * itemSize);
+    const offsetWithinItem = Math.max(0, offset - index * stride);
     const threshold = itemSize / 3;
     const position: VirtualizerDropTarget["position"] =
       offsetWithinItem < threshold ? "before" : offsetWithinItem > threshold * 2 ? "after" : "on";
     return { type: "item", index, position };
   }
+
+  private offsetForIndex(index: number, rowSize: number, padding: number, gap: number): number {
+    if (this.measuredMain.size === 0) {
+      return padding + index * (rowSize + gap);
+    }
+    let offset = padding;
+    for (let i = 0; i < index; i++) {
+      offset += (this.measuredMain.get(i) ?? rowSize) + gap;
+    }
+    return offset;
+  }
 }
 
 export class TableLayout extends ListLayout {}
 
+function resolveGridColumnCount(ctxWidth: number | undefined, options?: GridLayoutOptions): number {
+  if (options?.columnCount != null && options.columnCount > 0) {
+    return Math.max(1, options.columnCount);
+  }
+  const width = Math.max(1, options?.viewportWidth ?? ctxWidth ?? 320);
+  const minItem = Math.max(1, options?.minItemSize ?? options?.itemSize ?? 150);
+  const minSpace = Math.max(0, options?.minSpace ?? 0);
+  return Math.max(1, Math.floor((width + minSpace) / (minItem + minSpace)));
+}
+
 export class GridLayout {
   getVisibleRange(
     ctx: VirtualizerRangeContext,
     options?: GridLayoutOptions,
   ): VirtualizerVisibleRange {
     if (ctx.itemCount <= 0) return { start: 0, end: 0, offsetTop: 0, offsetBottom: 0 };
-    const rowHeight = Math.max(1, options?.rowHeight ?? options?.itemSize ?? 40);
-    const columns = Math.max(1, options?.columnCount ?? 1);
+    const rowHeight = Math.max(
+      1,
+      options?.rowHeight ?? options?.itemSize ?? options?.minItemSize ?? 40,
+    );
+    const columns = resolveGridColumnCount(ctx.viewportWidth, options);
     const safeViewport = Math.max(1, ctx.viewportSize);
     const safeOverscan = Math.max(0, options?.overscan ?? ctx.overscan);
 
@@ -225,13 +387,33 @@ export class GridLayout {
     return { start, end, offsetTop, offsetBottom };
   }
 
+  getContentSize(
+    itemCount: number,
+    context: VirtualizerLayoutInfoContext,
+    options?: GridLayoutOptions,
+  ): Size {
+    const rowHeight = Math.max(
+      1,
+      options?.rowHeight ?? options?.itemSize ?? options?.minItemSize ?? 40,
+    );
+    const columns = resolveGridColumnCount(context.viewportWidth, options);
+    const totalRows = itemCount <= 0 ? 0 : Math.ceil(itemCount / columns);
+    return {
+      width: Math.max(0, context.viewportWidth),
+      height: totalRows * rowHeight,
+    };
+  }
+
   getLayoutInfo(
     index: number,
     context: VirtualizerLayoutInfoContext,
     options?: GridLayoutOptions,
   ): LayoutInfo {
-    const rowHeight = Math.max(1, options?.rowHeight ?? options?.itemSize ?? 40);
-    const columns = Math.max(1, options?.columnCount ?? 1);
+    const rowHeight = Math.max(
+      1,
+      options?.rowHeight ?? options?.itemSize ?? options?.minItemSize ?? 40,
+    );
+    const columns = resolveGridColumnCount(context.viewportWidth, options);
     const row = Math.floor(index / columns);
     const col = index % columns;
     const width = Math.max(1, context.viewportWidth);
@@ -254,8 +436,11 @@ export class GridLayout {
     options?: GridLayoutOptions,
   ): VirtualizerDropTarget | null {
     if (itemCount <= 0) return { type: "root", index: -1, position: "on" };
-    const rowHeight = Math.max(1, options?.rowHeight ?? options?.itemSize ?? 40);
-    const columns = Math.max(1, options?.columnCount ?? 1);
+    const rowHeight = Math.max(
+      1,
+      options?.rowHeight ?? options?.itemSize ?? options?.minItemSize ?? 40,
+    );
+    const columns = resolveGridColumnCount(options?.viewportWidth, options);
     const totalRows = Math.ceil(itemCount / columns);
     const totalHeight = totalRows * rowHeight;
     if (point.y < 0) {

package/src/VisuallyHidden.tsx

@@ -1,15 +1,32 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/visually-hidden/VisuallyHidden.tsx
+
 /**
  * VisuallyHidden component for solidaria-components
  *
  * Hides content visually but keeps it accessible to screen readers.
- * Port of react-aria's VisuallyHidden.
+ * Solid adaptation of the pinned VisuallyHidden component.
  */
 
-import { type JSX, type ParentProps, splitProps } from "solid-js";
+import type { ParentProps } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import { ElementTag } from "./ElementTag";
 import { createVisuallyHidden, mergeProps } from "@proyecto-viviana/solidaria";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 
-export interface VisuallyHiddenProps extends ParentProps, JSX.HTMLAttributes<HTMLElement> {
+export interface VisuallyHiddenProps
+  extends ParentProps, Omit<JSX.HTMLAttributes<HTMLElement>, "children"> {
   /** The element type to render. @default 'span' */
   elementType?: keyof JSX.IntrinsicElements;
   /** Whether the element should be focusable when focused. */
@@ -36,11 +53,8 @@ export function VisuallyHidden(props: VisuallyHiddenProps): JSX.Element {
       visuallyHiddenProps() as unknown as Record<string, unknown>,
     );
 
-  // elementType is read once (structural, not reactive). `ElementTag` renders it
-  // as a statically compiled element; `<Dynamic component={string}>` desyncs
-  // Solid's hydration markers, leaving the registry dirty so a later sibling
-  // re-render throws "template is not a function" in prod (and a hard hydration
-  // crash under solid-refresh in dev). See ElementTag.tsx for the mechanism.
+  // elementType is read once (structural, not reactive). ElementTag delegates
+  // element creation and hydration adoption to Solid 2's native dynamic helper.
   const tag = local.elementType ?? "span";
   return (
     <ElementTag tag={tag} {...mergedProps()}>

package/src/contexts.ts

@@ -3,6 +3,9 @@
  *
  * These are separated to avoid circular dependencies between
  * Dialog, Modal, Popover, and Button components.
+ *
+ * This is a local Solid module split. The owning overlay components record
+ * their upstream sources.
  */
 
 import { createContext, useContext } from "solid-js";
@@ -13,6 +16,9 @@ export interface OverlayTriggerState {
   open: () => void;
   close: () => void;
   toggle: () => void;
+  setOpen: (isOpen: boolean) => void;
+  point: { x: number; y: number } | null;
+  setPoint: (point: { x: number; y: number }) => void;
 }
 
 export const OverlayTriggerStateContext = createContext<OverlayTriggerState | null>(null);
@@ -48,6 +54,9 @@ export interface PopoverTriggerContextValue {
     open: () => void;
     close: () => void;
     toggle: () => void;
+    setOpen?: (isOpen: boolean) => void;
+    point?: () => { x: number; y: number } | null;
+    setPoint?: (point: { x: number; y: number }) => void;
   };
   triggerRef: () => HTMLElement | null;
   setTriggerRef: (el: HTMLElement | null) => void;
@@ -55,6 +64,10 @@ export interface PopoverTriggerContextValue {
   triggerProps?: Record<string, unknown>;
   overlayProps?: Record<string, unknown>;
   trigger: string;
+  /** Lets a trigger capture the popover element (PreviewTrigger safe-area). */
+  setOverlayRef?: (el: HTMLElement | null) => void;
+  /** RAC PreviewTrigger skips enter/exit when swapping previews during warmup. */
+  shouldSkipAnimation?: () => boolean;
 }
 
 export const PopoverTriggerContext = createContext<PopoverTriggerContextValue | null>(null);

package/src/index.ts

@@ -1,10 +1,9 @@
 /**
- * solidaria-components
+ * solidaria-components.
  *
- * Pre-wired headless components for SolidJS.
- * Port of react-aria-components.
- *
- * These components combine state management + accessibility hooks into
+ * This is the local package barrel. Each exported module owns its upstream
+ * source mapping.
+ * The components combine state management and accessibility hooks into
  * ready-to-style components using the render props pattern and data attributes.
  */
 
@@ -138,6 +137,19 @@ export {
   type TextAreaProps,
 } from "./TextField";
 
+export {
+  TokenField,
+  TokenInput,
+  Token,
+  TokenFieldContext,
+  type TokenFieldProps,
+  type TokenFieldRenderProps,
+  type TokenInputProps,
+  type TokenInputRenderProps,
+  type TokenProps,
+  type TokenRenderProps,
+} from "./TokenField";
+
 export { Text, TextContext, type TextProps } from "./Text";
 
 export { Link, LinkContext, type LinkProps, type LinkRenderProps } from "./Link";
@@ -155,6 +167,8 @@ export {
 
 export { FileTrigger, type FileTriggerProps } from "./FileTrigger";
 
+export { PreviewTrigger, type PreviewTriggerProps } from "./PreviewTrigger";
+
 export {
   DropZone,
   DropZoneContext,
@@ -240,8 +254,8 @@ export {
 
 export {
   ListBox,
+  ListBoxItem,
   ListBoxOption,
-  ListBoxOption as ListBoxItem,
   ListBoxSection,
   ListBoxLoadMoreItem,
   ListBoxContext,
@@ -249,10 +263,10 @@ export {
   ListStateContext,
   type ListBoxProps,
   type ListBoxRenderProps,
+  type ListBoxItemProps,
+  type ListBoxItemRenderProps,
   type ListBoxOptionProps,
   type ListBoxOptionRenderProps,
-  type ListBoxOptionProps as ListBoxItemProps,
-  type ListBoxOptionRenderProps as ListBoxItemRenderProps,
   type ListBoxSectionProps,
   type ListBoxLoadMoreItemProps,
 } from "./ListBox";
@@ -260,10 +274,10 @@ export {
 export {
   Menu,
   MenuItem,
+  MenuLoadMoreItem,
   MenuSection,
   MenuTrigger,
   SubmenuTrigger,
-  MenuButton,
   MenuContext,
   MenuStateContext,
   MenuTriggerContext,
@@ -272,11 +286,11 @@ export {
   type MenuRenderProps,
   type MenuItemProps,
   type MenuItemRenderProps,
+  type MenuLoadMoreItemProps,
   type MenuSectionProps,
   type MenuTriggerProps,
   type SubmenuTriggerProps,
   type MenuTriggerRenderProps,
-  type MenuButtonProps,
 } from "./Menu";
 
 export {
@@ -458,6 +472,7 @@ export {
   ComboBoxErrorMessage,
   ComboBoxButton,
   ComboBoxListBox,
+  ComboBoxItem,
   ComboBoxOption,
   ComboBoxTagGroup,
   ComboBoxTag,
@@ -478,6 +493,8 @@ export {
   type ComboBoxButtonRenderProps,
   type ComboBoxListBoxProps,
   type ComboBoxListBoxRenderProps,
+  type ComboBoxItemProps,
+  type ComboBoxItemRenderProps,
   type ComboBoxOptionProps,
   type ComboBoxOptionRenderProps,
   type ComboBoxTagGroupProps,
@@ -529,7 +546,8 @@ export {
   Toast as UNSTABLE_Toast,
   ToastRegion as UNSTABLE_ToastRegion,
   ToastRegion as UNSTABLE_ToastList,
-  Toast as UNSTABLE_ToastContent,
+  ToastContent as UNSTABLE_ToastContent,
+  ToastContentContext,
   ToastRegion,
   ToastProvider,
   ToastContext,
@@ -542,6 +560,7 @@ export {
   globalToastQueue,
   addToast,
   type ToastContent,
+  type ToastContentProps as UNSTABLE_ToastContentProps,
   type ToastProps,
   type ToastRenderProps,
   type ToastRegionProps,
@@ -993,6 +1012,8 @@ export { SSRProvider } from "@proyecto-viviana/solidaria";
 
 export { parseColor, FormValidationContext } from "@proyecto-viviana/solid-stately";
 
+export { setInteractionModality } from "@proyecto-viviana/solidaria";
+
 export { ToastQueue as UNSTABLE_ToastQueue } from "@proyecto-viviana/solid-stately";
 
 // Data hooks (aliased to match RAC's useXxx naming)

package/src/intl/ar-AE.json

@@ -0,0 +1,6 @@
+{
+  "colorSwatchPicker": "تغييرات الألوان",
+  "dropzoneLabel": "DropZone",
+  "selectPlaceholder": "حدد عنصرًا",
+  "tableResizer": "أداة تغيير الحجم"
+}

package/src/intl/bg-BG.json

@@ -0,0 +1,6 @@
+{
+  "colorSwatchPicker": "Цветови мостри",
+  "dropzoneLabel": "DropZone",
+  "selectPlaceholder": "Изберете предмет",
+  "tableResizer": "Преоразмерител"
+}

package/src/intl/cs-CZ.json

@@ -0,0 +1,6 @@
+{
+  "colorSwatchPicker": "Vzorky barev",
+  "dropzoneLabel": "Místo pro přetažení",
+  "selectPlaceholder": "Vyberte položku",
+  "tableResizer": "Změna velikosti"
+}

package/src/intl/da-DK.json

@@ -0,0 +1,6 @@
+{
+  "colorSwatchPicker": "Farveprøver",
+  "dropzoneLabel": "DropZone",
+  "selectPlaceholder": "Vælg et element",
+  "tableResizer": "Størrelsesændring"
+}

package/src/intl/de-DE.json

@@ -0,0 +1,6 @@
+{
+  "colorSwatchPicker": "Farbfelder",
+  "dropzoneLabel": "Ablegebereich",
+  "selectPlaceholder": "Element wählen",
+  "tableResizer": "Größenanpassung"
+}

package/src/intl/el-GR.json

@@ -0,0 +1,6 @@
+{
+  "colorSwatchPicker": "Χρωματικά δείγματα",
+  "dropzoneLabel": "DropZone",
+  "selectPlaceholder": "Επιλέξτε ένα αντικείμενο",
+  "tableResizer": "Αλλαγή μεγέθους"
+}

package/src/intl/en-US.json

@@ -0,0 +1,6 @@
+{
+  "selectPlaceholder": "Select an item",
+  "tableResizer": "Resizer",
+  "dropzoneLabel": "DropZone",
+  "colorSwatchPicker": "Color swatches"
+}

package/src/intl/es-ES.json

@@ -0,0 +1,6 @@
+{
+  "colorSwatchPicker": "Muestras de colores",
+  "dropzoneLabel": "DropZone",
+  "selectPlaceholder": "Seleccionar un artículo",
+  "tableResizer": "Cambiador de tamaño"
+}

package/src/intl/et-EE.json

@@ -0,0 +1,6 @@
+{
+  "colorSwatchPicker": "Värvinäidised",
+  "dropzoneLabel": "DropZone",
+  "selectPlaceholder": "Valige üksus",
+  "tableResizer": "Suuruse muutja"
+}

package/src/intl/fi-FI.json

@@ -0,0 +1,6 @@
+{
+  "colorSwatchPicker": "Värimallit",
+  "dropzoneLabel": "DropZone",
+  "selectPlaceholder": "Valitse kohde",
+  "tableResizer": "Koon muuttaja"
+}

package/src/intl/fr-FR.json

@@ -0,0 +1,6 @@
+{
+  "colorSwatchPicker": "Échantillons de couleurs",
+  "dropzoneLabel": "DropZone",
+  "selectPlaceholder": "Sélectionner un élément",
+  "tableResizer": "Redimensionneur"
+}