@wallarm-org/design-system 0.74.0 → 0.75.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "0.
|
|
3
|
-
"generatedAt": "2026-07-
|
|
2
|
+
"version": "0.74.0",
|
|
3
|
+
"generatedAt": "2026-07-15T08:43:00.664Z",
|
|
4
4
|
"components": [
|
|
5
5
|
{
|
|
6
6
|
"name": "Accordion",
|
|
@@ -34352,6 +34352,11 @@
|
|
|
34352
34352
|
"code": "args => {\n const [dateTime, setDateTime] = useState<CalendarDateTime | null>(\n new CalendarDateTime(2026, 6, 15, 14, 30),\n );\n const dateTimeLabel = dateTime\n ? format(\n new Date(dateTime.year, dateTime.month - 1, dateTime.day, dateTime.hour, dateTime.minute),\n 'd MMM, yyyy h:mm a',\n )\n : '—';\n return (\n <div className='w-[320px]'>\n <DateFormatProvider order='day-first' hourCycle={12}>\n <Attribute>\n <AttributeLabel>Date & Time</AttributeLabel>\n <AttributeValue>\n <InlineEdit\n {...args}\n value={dateTime}\n onValueCommit={v => setDateTime(v as CalendarDateTime | null)}\n data-testid='datetime'\n >\n <InlineEditPreview>\n <InlineEditPreviewValue>{dateTimeLabel}</InlineEditPreviewValue>\n <InlineEditPreviewIcon>\n <Calendar size='md' />\n </InlineEditPreviewIcon>\n </InlineEditPreview>\n <InlineEditControl>\n <InlineEditDateTime>\n <CalendarTrigger>\n <DateInputTrigger granularity='minute' />\n </CalendarTrigger>\n <CalendarContent>\n <CalendarBody>\n <CalendarInputHeader />\n <CalendarGrids />\n </CalendarBody>\n </CalendarContent>\n </InlineEditDateTime>\n </InlineEditControl>\n </InlineEdit>\n </AttributeValue>\n </Attribute>\n </DateFormatProvider>\n </div>\n );\n}",
|
|
34353
34353
|
"description": "`InlineEditDateTime` in isolation."
|
|
34354
34354
|
},
|
|
34355
|
+
{
|
|
34356
|
+
"name": "HorizontalLayout",
|
|
34357
|
+
"code": "args => {\n const [name, setName] = useState('Checkout API');\n const [role, setRole] = useState<string[]>(['editor']);\n const roleLabel = roleItems.find(i => i.value === (role[0] ?? ''))?.label ?? '';\n return (\n <div className='flex w-[420px] flex-col gap-8'>\n <Attribute orientation='horizontal'>\n <AttributeLabel>Name</AttributeLabel>\n <AttributeValue>\n <InlineEdit\n {...args}\n value={name}\n onValueCommit={v => setName(v as string)}\n data-testid='horizontal-text'\n >\n <InlineEditPreview>{name}</InlineEditPreview>\n <InlineEditControl>\n <InlineEditInput aria-label='Name' />\n </InlineEditControl>\n <InlineEditError />\n </InlineEdit>\n </AttributeValue>\n </Attribute>\n\n <Attribute orientation='horizontal'>\n <AttributeLabel>Role</AttributeLabel>\n <AttributeValue>\n <InlineEdit\n {...args}\n value={role}\n onValueCommit={v => setRole(v as string[])}\n data-testid='horizontal-select'\n >\n <InlineEditPreview>\n <InlineEditPreviewValue>{roleLabel}</InlineEditPreviewValue>\n <InlineEditPreviewIcon>\n <ChevronDown size='md' />\n </InlineEditPreviewIcon>\n </InlineEditPreview>\n <InlineEditControl>\n <InlineEditSelect items={roleItems}>\n <SelectButton size='inline-edit' />\n <SelectPositioner>\n <SelectContent>{renderSelectOptions(roleItems)}</SelectContent>\n </SelectPositioner>\n </InlineEditSelect>\n </InlineEditControl>\n </InlineEdit>\n </AttributeValue>\n </Attribute>\n </div>\n );\n}",
|
|
34358
|
+
"description": "`InlineEdit` inside a horizontal `Attribute` — label on the left, value/editor on the right."
|
|
34359
|
+
},
|
|
34355
34360
|
{
|
|
34356
34361
|
"name": "States",
|
|
34357
34362
|
"code": "args => (\n <div className='flex w-[420px] flex-col gap-12'>\n <Attribute>\n <AttributeLabel>Name</AttributeLabel>\n <AttributeValue>\n <InlineEdit\n {...args}\n defaultValue='Checkout API and ABC'\n status='loading'\n data-testid='loading'\n >\n <InlineEditPreview>Checkout API and ABC</InlineEditPreview>\n <InlineEditControl>\n <InlineEditInput />\n </InlineEditControl>\n </InlineEdit>\n </AttributeValue>\n </Attribute>\n\n <Attribute>\n <AttributeLabel>Name</AttributeLabel>\n <AttributeValue>\n <InlineEdit\n {...args}\n defaultValue='Checkout API and ABC'\n status='saved'\n data-testid='saved'\n >\n <InlineEditPreview>Checkout API and ABC</InlineEditPreview>\n <InlineEditControl>\n <InlineEditInput />\n </InlineEditControl>\n </InlineEdit>\n </AttributeValue>\n </Attribute>\n\n <Attribute>\n <AttributeLabel>Name</AttributeLabel>\n <AttributeValue>\n <InlineEdit\n {...args}\n defaultValue='Checkout API and ABC'\n defaultEdit\n status='error'\n data-testid='error'\n >\n <InlineEditPreview>Checkout API and ABC</InlineEditPreview>\n <InlineEditControl>\n <InlineEditInput />\n </InlineEditControl>\n <InlineEditError>An error message.</InlineEditError>\n </InlineEdit>\n </AttributeValue>\n </Attribute>\n </div>\n)",
|