@fewangsit/wangsvue-gsts 2.0.0-alpha.24 → 2.0.0-alpha.28

package/dropdown/Dropdown.fm.md

@@ -0,0 +1,34 @@
+# Dropdown
+type reference: ./index.d.ts
+
+Append a `Dropdown` component when the figma context contains:
+
+- A figma component or instance named "Dropdown" or similar, consisting of a select input field optionally paired with a label, required asterisk, info icon, and a dropdown arrow icon.
+
+## Metadata Shape (Component)
+
+Append this component to the `components` array of the returned JSON.
+
+## Metadata Shape (Properties)
+
+Append these properties to the `props` object of this component.
+
+### Properties definitions
+
+- `label` (string)
+  The text of the label displayed above the dropdown.
+
+- `placeholder` (string | undefined)
+  The placeholder text inside the dropdown (e.g. "Select"). When a value is selected, the placeholder is replaced with the selected option text. Omit if no placeholder text is visible.
+
+- `mandatory` (boolean | undefined)
+  Whether a red asterisk `*` is present next to the label, indicating the field is required. Omit if absent.
+
+- `fieldInfo` (string | undefined)
+  Whether an info icon (`information-line`) is present next to the label. Omit if absent.
+
+- `invalid` (boolean | undefined)
+  Whether the dropdown shows an error state (red border, red caption text). Omit if the field is not in error state.
+
+- `disabled` (boolean | undefined)
+  Whether the dropdown shows a disabled state (gray background, gray text). Omit if the field is not disabled.

package/fileupload/FileUpload.fm.md

@@ -0,0 +1,31 @@
+# FileUpload
+type reference: ./index.d.ts
+
+Append a `FileUpload` component when the figma context contains:
+
+- A figma component or instance named "File Upload" or similar, consisting of a file selector input with a "Browse" button addon on the left, a selected file name or placeholder text, and an optional file requirement note below, optionally paired with a label, required asterisk, and info icon.
+
+## Metadata Shape (Component)
+
+Append this component to the `components` array of the returned JSON.
+
+## Metadata Shape (Properties)
+
+Append these properties to the `props` object of this component.
+
+### Properties definitions
+
+- `label` (string)
+  The text of the label displayed above the file upload input.
+
+- `placeholder` (string | undefined)
+  The placeholder text in the file name field (e.g. "Select File"). When a file is selected, the placeholder is replaced with the file name (e.g. "document.pdf"). Omit if no placeholder text is visible.
+
+- `fileRequirements` (string | undefined)
+  The requirement note displayed below the input (e.g. "Max. file 1 MB"). Omit if no requirement text is visible.
+
+- `mandatory` (boolean | undefined)
+  Whether a red asterisk `*` is present next to the label, indicating the field is required. Omit if absent.
+
+- `invalid` (boolean | undefined)
+  Whether the file upload shows an error state (red border, red caption text). Omit if the field is not in error state.

package/icon/index.d.ts

@@ -14,11 +14,11 @@ export type WangsIconseverities =
 export type WangsIcons =
   | 'admin-line'
   | 'arrow-down-fill'
-  | 'arrow-go-back'
-  | 'arrow-left-right'
-  | 'arrow-right'
+  | 'arrow-go-back-line'
+  | 'arrow-left-right-line'
+  | 'arrow-right-line'
   | 'arrow-right-circle-line'
-  | 'arrow-right-double'
+  | 'arrow-right-double-line'
   | 'arrow-right-fill'
   | 'apps-2-line'
   | 'asset-view'
@@ -27,100 +27,98 @@ export type WangsIcons =
   | 'attachment-2'
   | 'audit'
   | 'bank-card-line'
-  | 'barcode'
+  | 'barcode-line'
   | 'barricade-line'
   | 'bell'
   | 'bell-alert'
   | 'borrow'
-  | 'building'
-  | 'building-2'
-  | 'building-4'
-  | 'calculator'
-  | 'calendar-event'
-  | 'calendar-todo'
-  | 'chat-check'
+  | 'building-line'
+  | 'building-2-line'
+  | 'building-4-line'
+  | 'calculator-line'
+  | 'calendar-event-line'
+  | 'calendar-todo-line'
+  | 'chat-check-line'
   | 'change-tag'
   | 'checkout'
   | 'check-double-fill'
   | 'checkbox-circle-fill'
-  | 'checkbox-blank-circle'
+  | 'checkbox-blank-circle-line'
   | 'checkbox-blank-circle-fill'
-  | 'checkbox-multiple'
+  | 'checkbox-multiple-line'
   | 'close-circle-fill'
   | 'cloud-line'
-  | 'coins'
+  | 'coins-line'
   | 'completion'
-  | 'dashboard'
-  | 'database'
-  | 'delete-bin-7'
-  | 'device'
+  | 'dashboard-line'
+  | 'database-line'
+  | 'delete-bin-7-line'
+  | 'device-line'
   | 'disposal'
-  | 'dropbox'
+  | 'dropbox-line'
   | 'dragable-menu'
   | 'ellipsis-h'
   | 'emotion-happy-fill'
   | 'emotion-unhappy-fill'
   | 'expired'
   | 'extension-borrow'
-  | 'eye'
-  | 'flag'
-  | 'file-add'
+  | 'eye-line'
+  | 'flag-line'
+  | 'file-add-line'
   | 'file-copy-2-line'
-  | 'file-history'
+  | 'file-history-line'
   | 'file-history-fill'
   | 'files'
   | 'file-lines'
-  | 'file-list-3'
-  | 'file-list'
+  | 'file-list-3-line'
+  | 'file-list-line'
   | 'file-shield-line'
-  | 'file-shield-2'
-  | 'file-up'
-  | 'file-user'
+  | 'file-shield-2-line'
+  | 'file-upload-line'
+  | 'file-user-line'
   | 'filter-fill'
-  | 'filter'
+  | 'filter-line'
   | 'fingerprint-line'
-  | 'folder'
   | 'folder-add-line'
   | 'gate'
   | 'handheld'
   | 'indeterminate-circle-fill'
   | 'information-line'
-  | 'infrared-thermometer'
+  | 'infrared-thermometer-line'
   | 'link'
-  | 'luggage-cart'
+  | 'luggage-cart-line'
   | 'csv'
   | 'xls'
   | 'doc'
   | 'data'
-  | 'line-chart'
+  | 'line-chart-line'
   | 'link-unlink-m'
-  | 'list-settings'
   | 'lock-line'
-  | 'logout-box-r'
-  | 'mail-open'
+  | 'logout-box-r-line'
+  | 'mail-open-line'
   | 'magic-line'
-  | 'map-2'
-  | 'map-pin'
-  | 'menu'
-  | 'menu-unfold'
+  | 'map-2-line'
+  | 'map-pin-line'
+  | 'menu-line'
+  | 'menu-unfold-fill'
   | 'mind-map'
   | 'minus'
-  | 'money-cny-box'
-  | 'money-dollar-circle'
+  | 'money-cny-box-line'
+  | 'money-dollar-circle-line'
   | 'move-to'
   | 'nfc'
   | 'node-tree'
   | 'note'
-  | 'notification'
+  | 'notification-line'
   | 'organization-chart'
   | 'pdf'
   | 'pair-tag'
-  | 'phone'
-  | 'printer-cloud'
-  | 'price-tag-3'
+  | 'phone-line'
+  | 'printer-cloud-line'
+  | 'price-tag-3-line'
   | 'profile'
   | 'qr'
-  | 'qr-scan'
+  | 'qr-scan-line'
   | 'reception'
   | 'recycle-bin'
   | 'replace-tag'
@@ -133,33 +131,32 @@ export type WangsIcons =
   | 'round-keyboard-double-arrow-right'
   | 'search-line'
   | 'send-plane-line'
-  | 'shopping-cart-2'
-  | 'smartphone'
+  | 'shopping-cart-2-line'
+  | 'smartphone-line'
   | 'sort-asc'
   | 'sort-desc'
   | 'supplier-return'
   | 'internal-return'
   | 'spinner'
-  | 'stack'
-  | 'store'
-  | 'table'
-  | 'time'
-  | 'ticket'
-  | 'tools'
-  | 'tracking'
+  | 'stack-line'
+  | 'store-line'
+  | 'table-line'
+  | 'time-line'
+  | 'ticket-line'
+  | 'tools-line'
+  | 'file-search-line'
   | 'truck-line'
   | 'unassign'
-  | 'upload-2'
-  | 'upload-cloud-2'
-  | 'user'
-  | 'user-add'
-  | 'user-follow'
+  | 'upload-2-line'
+  | 'upload-cloud-2-line'
+  | 'user-line'
+  | 'user-add-line'
+  | 'user-follow-line'
   | 'user-received-2-line'
   | 'user-shared-2-line'
-  | 'user-star'
-  | 'user-unfollow'
+  | 'user-star-line'
   | 'verification'
-  | 'timer'
+  | 'timer-line'
   | 'format-clear'
   | 'code-line'
   | 'link-m'
@@ -195,7 +192,7 @@ export type WangsIcons =
   | 'arrow-up-down-line' // Preferred
   | 'arrow-up-s-line' // Preferred
   | 'calendar-line' // Preferred
-  | 'chat-1' // Preferred
+  | 'chat-1-line' // Preferred
   | 'chat-3-line' // Preferred
   | 'check-line' // Preferred
   | 'checkbox-circle-line' // Preferred

package/imagecompressor/ImageCompressor.fm.md

@@ -0,0 +1,44 @@
+# ImageCompressor
+type reference: ./index.d.ts
+
+Append a `ImageCompressor` component when the figma context contains:
+
+- A figma component or instance named "Image Compressor" or similar, consisting of an image upload area with a square preview box (showing either an `image-add-line` icon placeholder or an actual image), Edit/Delete action buttons, requirement info text, and optionally paired with a label, required asterisk, and info icon.
+
+## Metadata Shape (Component)
+
+Append this component to the `components` array of the returned JSON.
+
+## Metadata Shape (Properties)
+
+Append these properties to the `props` object of this component.
+
+### Properties definitions
+
+- `label` (string)
+  The text of the label displayed above the image input.
+
+- `fieldInfo` (string | undefined)
+  Whether an info icon (`information-line`) is present next to the label. Omit if absent.
+
+- `imagePreviewSize` ('small' | 'medium' | 'big' | undefined)
+  Infer from the image preview frame dimensions:
+  - `125px` → `'big'`
+  - `80px` → `'medium'`
+  - `30px` → `'small'`
+  - Omit if ambiguous.
+
+- `rounded` (boolean | undefined)
+  Whether the image preview is displayed as a full circle. Omit if the preview is squared.
+
+- `multiple` (boolean | undefined)
+  Whether "Add Photo" and "Remove" action buttons alongside a "Set as default" radio button are present below the image, indicating multiple image support. Omit if absent.
+
+- `mandatory` (boolean | undefined)
+  Whether a red asterisk `*` is present next to the label, indicating the field is required. Omit if absent.
+
+- `invalid` (boolean | undefined)
+  Whether the image input shows an error state (red border, caption text like "Photo must not be empty"). Omit if not in error state.
+
+- `disabled` (boolean | undefined)
+  Whether the image input shows a disabled state (grayed out placeholder). Omit if not disabled.

package/inputbadge/InputBadge.fm.md

@@ -0,0 +1,34 @@
+# InputBadge
+type reference: ./index.d.ts
+
+Append a `InputBadge` component when the figma context contains:
+
+- A figma component or instance named "Input Badge" or similar, consisting of a text input area containing multiple badge chips (with close buttons), optionally paired with a label, required asterisk, and info icon.
+
+## Metadata Shape (Component)
+
+Append this component to the `components` array of the returned JSON.
+
+## Metadata Shape (Properties)
+
+Append these properties to the `props` object of this component.
+
+### Properties definitions
+
+- `label` (string)
+  The text of the label displayed above the input badge area.
+
+- `placeholder` (string | undefined)
+  The placeholder text inside the input (e.g. "Enter"). When badges are present, the placeholder is replaced by badge chips. Omit if no placeholder text is visible.
+
+- `mandatory` (boolean | undefined)
+  Whether a red asterisk `*` is present next to the label, indicating the field is required. Omit if absent.
+
+- `fieldInfo` (string | undefined)
+  Whether an info icon (`information-line`) is present next to the label. Omit if absent.
+
+- `invalid` (boolean | undefined)
+  Whether the input shows an error state (red border, red caption text). Omit if the field is not in error state.
+
+- `disabled` (boolean | undefined)
+  Whether the input shows a disabled state (gray background, gray text). Omit if the field is not disabled.

package/inputnumber/InputNumber.fm.md

@@ -0,0 +1,39 @@
+# InputNumber
+type reference: ./index.d.ts
+
+Append a `InputNumber` component when the figma context contains:
+
+- A figma component or instance named "Input Number" or similar, consisting of a numeric input field optionally paired with a label, required asterisk, info icon, increment/decrement buttons, and addon slots.
+
+## Metadata Shape (Component)
+
+Append this component to the `components` array of the returned JSON.
+
+## Metadata Shape (Properties)
+
+Append these properties to the `props` object of this component.
+
+### Properties definitions
+
+- `label` (string)
+  The text of the label displayed above the input field.
+
+- `placeholder` (string | undefined)
+  The placeholder text inside the input field (e.g. "Enter number" or "0"). Omit if no placeholder text is visible.
+
+- `mandatory` (boolean | undefined)
+  Whether a red asterisk `*` is present next to the label. Omit if absent.
+
+- `fieldInfo` (string | undefined)
+  Whether an info icon (`information-line`) is present next to the label. Omit if absent.
+
+- `invalid` (boolean | undefined)
+  Whether the input field shows an error state (red border, red caption text). Omit if the field is not in error state.
+
+- `disabled` (boolean | undefined)
+  Whether the input field shows a disabled state (gray background, gray text). Omit if the field is not disabled.
+
+- `showButtons` (boolean | undefined)
+  Whether increment (`add-line`) and decrement (`subtract-line`) icons are present on the left and right sides of the input. Infer from the Figma type:
+  - Type `"Button Horizontal"` or `"Button Vertical"` → `true`
+  - Types without buttons (`"Default"`, `"Double Field"`, `"Addon Right"`, `"Addon Left"`, etc.) → omit this field

package/inputpassword/InputPassword.fm.md

@@ -0,0 +1,28 @@
+# InputPassword
+type reference: ./index.d.ts
+
+Append a `InputPassword` component when the figma context contains:
+
+- A figma component or instance named "Input Password" or similar, consisting of a password input field showing masked dots (e.g. "**********") and an `eye-line` icon for toggling visibility, optionally paired with a label, required asterisk, and info icon.
+
+## Metadata Shape (Component)
+
+Append this component to the `components` array of the returned JSON.
+
+## Metadata Shape (Properties)
+
+Append these properties to the `props` object of this component.
+
+### Properties definitions
+
+- `label` (string)
+  The text of the label displayed above the password input.
+
+- `placeholder` (string | undefined)
+  The placeholder text inside the password input (e.g. "Enter password"). When a password is entered, the placeholder is replaced with masked dots. Omit if no placeholder text is visible.
+
+- `mandatory` (boolean | undefined)
+  Whether a red asterisk `*` is present next to the label, indicating the field is required. Omit if absent.
+
+- `invalid` (boolean | undefined)
+  Whether the password input shows an error state (red border, red caption text). Omit if the field is not in error state.

package/inputphonenumber/InputPhoneNumber.fm.md

@@ -0,0 +1,34 @@
+# InputPhoneNumber
+type reference: ./index.d.ts
+
+Append a `InputPhoneNumber` component when the figma context contains:
+
+- A figma component or instance named "Input Phone Number" or similar, consisting of a two-part segmented input: a dial code dropdown (e.g. "+62" with a dropdown arrow) on the left and a phone number text field on the right, optionally paired with a label, required asterisk, and info icon.
+
+## Metadata Shape (Component)
+
+Append this component to the `components` array of the returned JSON.
+
+## Metadata Shape (Properties)
+
+Append these properties to the `props` object of this component.
+
+### Properties definitions
+
+- `label` (string)
+  The text of the label displayed above the phone number input.
+
+- `placeholder` (string | undefined)
+  The placeholder text inside the phone number field (e.g. "Enter phone number"). When a number is entered, the placeholder is replaced with the phone digits. Omit if no placeholder text is visible.
+
+- `mandatory` (boolean | undefined)
+  Whether a red asterisk `*` is present next to the label, indicating the field is required. Omit if absent.
+
+- `fieldInfo` (string | undefined)
+  Whether an info icon (`information-line`) is present next to the label. Omit if absent.
+
+- `invalid` (boolean | undefined)
+  Whether the input shows an error state (red border, red caption text). Omit if the field is not in error state.
+
+- `disabled` (boolean | undefined)
+  Whether the input shows a disabled state (gray background, gray text). Omit if the field is not disabled.

package/inputrangenumber/InputRangeNumber.fm.md

@@ -0,0 +1,31 @@
+# InputRangeNumber
+type reference: ./index.d.ts
+
+Append a `InputRangeNumber` component when the figma context contains:
+
+- A figma component or instance named "Input Range Number" or similar, consisting of two number input fields separated by a dash (`--`) separator, optionally paired with a label, required asterisk, and info icon.
+
+## Metadata Shape (Component)
+
+Append this component to the `components` array of the returned JSON.
+
+## Metadata Shape (Properties)
+
+Append these properties to the `props` object of this component.
+
+### Properties definitions
+
+- `label` (string)
+  The text of the label displayed above the range inputs.
+
+- `placeholder` (string | undefined)
+  The placeholder text inside both number inputs (e.g. "Enter"). When a value is entered, the placeholder is replaced with the number. Omit if no placeholder text is visible.
+
+- `mandatory` (boolean | undefined)
+  Whether a red asterisk `*` is present next to the label, indicating the field is required. Omit if absent.
+
+- `invalid` (boolean | undefined)
+  Whether the range inputs show an error state (red borders, red caption text). Omit if the field is not in error state.
+
+- `disabled` (boolean | undefined)
+  Whether the range inputs show a disabled state (gray background, gray text). Omit if the field is not disabled.

package/inputtext/InputText.fm.md

@@ -0,0 +1,34 @@
+# InputText
+type reference: ./index.d.ts
+
+Append a `InputText` component when the figma context contains:
+
+- A figma component or instance named "Input Text" or similar, consisting of a text input field optionally paired with a label, required asterisk, and info icon.
+
+## Metadata Shape (Component)
+
+Append this component to the `components` array of the returned JSON.
+
+## Metadata Shape (Properties)
+
+Append these properties to the `props` object of this component.
+
+### Properties definitions
+
+- `label` (string)
+  The text of the label displayed above the input field.
+
+- `placeholder` (string | undefined)
+  The placeholder text inside the input field. In the default state, the field shows a placeholder like "Enter". When a value is present, the placeholder is replaced with the filled text. Omit if no placeholder text is visible.
+
+- `mandatory` (boolean | undefined)
+  Whether a red asterisk `*` is present next to the label, indicating the field is required. Omit if absent.
+
+- `fieldInfo` (string | undefined)
+  Whether an info icon (`information-line`) is present next to the label. Omit if absent.
+
+- `invalid` (boolean | undefined)
+  Whether the input field shows an error state (red border, red caption text). Omit if the field is not in error state.
+
+- `disabled` (boolean | undefined)
+  Whether the input field shows a disabled state (gray background, gray text). Omit if the field is not disabled.