shkim4
126a35d60d
Components (new public exports, existing APIs unchanged) - SWPopupPropertyRow: the property window row (layer / color / line style pickers, Figma 26:12250 / 26:12170) for SWPopup content. The SWHeader field dropdowns stay header-only; Popup B and 도면 설정 now use the popup pickers. - SWSelect: native panel select (28px, 1px #948871, radius 4, #F1ECE1, 12px), used by Popup 도면 설정 단위 and Viewer 축척 지정 단위 (replaces the HM UI Select there and the story-only .sw-viewer-story-select CSS). - SWSlider: appearance "panel" (default, the gauge the popup used) or "property" (the property window gauge), same value / events. Shares the property gauge CSS; SWViewerSlider renders SWSlider panel with viewer tokens. Footer - --hm-sw-footer-gra-border-orange (Figma gra-border-orange; the aux selected border token now references it): Model selected / hover, Layout hover and Layout + hover surfaces; 보조기능 / 명령어 전체보기 hover lights both lines and an orange ring; category + hover in #FF5C00 (menu-add-hover.svg). - Model / Layout text stays the Default text (#161410, 12px, 400, no outline) on hover and on the orange surface: only the surface changes. - bg_vacant covers the slot row only: the open pocket of a category tab no longer splits where it crosses the last command (e.g. 수정 with one command). Viewer - Panel title art keeps 308px (max-width: none against host img resets), so panels under 312px (250 x auto, 300px) paint the title from the left edge. Storybook - SW/Footer: 기본 Footer (sw-footer--default) and States (sw-footer--states) removed; full-footer keeps the live composition only, responsive keeps the widths (reference / Figma image sections removed, image files kept); the aux Figma comparison moved to the verification Story figma-variants. - SW/Popup: unit SWSelect, SWSlider A / B section, popup pickers, Popup B state.
36 lines
1.5 KiB
TypeScript
36 lines
1.5 KiB
TypeScript
import { forwardRef, type ReactNode, type SelectHTMLAttributes } from "react"
|
|
|
|
export interface SWSelectOption {
|
|
value: string
|
|
/** Shown text. Default `value`. */
|
|
label?: string
|
|
disabled?: boolean
|
|
}
|
|
|
|
export interface SWSelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, "value" | "defaultValue" | "onChange"> {
|
|
/** Controlled value. */
|
|
value?: string
|
|
/** Uncontrolled initial value. */
|
|
defaultValue?: string
|
|
/** Options as data. `children` (`<option>` elements) can be used instead. */
|
|
options?: readonly SWSelectOption[]
|
|
/** The chosen value (native `change`: pointer, keyboard and the OS list). */
|
|
onValueChange?: (value: string) => void
|
|
children?: ReactNode
|
|
}
|
|
|
|
/**
|
|
* HMDesign SW select (2026-10-20): a native select with the panel field look of the SW popups (28px, 1px inner-border
|
|
* line, 4px radius, content surface, 12px text, the platform arrow and option list). For SWPopupRow (`field="none"`),
|
|
* SWViewerField and any SWTheme content; tokens `--hm-sw-select-*`.
|
|
*/
|
|
export const SWSelect = forwardRef<HTMLSelectElement, SWSelectProps>(function SWSelect(
|
|
{ options, onValueChange, className, children, ...rest }, ref,
|
|
) {
|
|
return (
|
|
<select ref={ref} className={`hm-sw-select${className ? ` ${className}` : ""}`} onChange={event => onValueChange?.(event.currentTarget.value)} {...rest}>
|
|
{options ? options.map(option => <option key={option.value} value={option.value} disabled={option.disabled}>{option.label ?? option.value}</option>) : children}
|
|
</select>
|
|
)
|
|
})
|