@aviala-design/spiral 2.8.1 → 2.9.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.
- package/dist/component-changelogs.json +18 -0
- package/dist/index.cjs +788 -579
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +73 -1
- package/dist/index.d.ts +73 -1
- package/dist/index.js +668 -466
- package/dist/index.js.map +1 -1
- package/dist/props.json +199 -0
- package/dist/styles.css +33 -0
- package/package.json +2 -2
package/dist/props.json
CHANGED
|
@@ -4024,6 +4024,205 @@
|
|
|
4024
4024
|
}
|
|
4025
4025
|
]
|
|
4026
4026
|
},
|
|
4027
|
+
"Drawer": {
|
|
4028
|
+
"displayName": "Drawer",
|
|
4029
|
+
"description": "",
|
|
4030
|
+
"props": [],
|
|
4031
|
+
"parts": [
|
|
4032
|
+
{
|
|
4033
|
+
"displayName": "DrawerTrigger",
|
|
4034
|
+
"description": "",
|
|
4035
|
+
"props": [
|
|
4036
|
+
{
|
|
4037
|
+
"name": "asChild",
|
|
4038
|
+
"type": "boolean",
|
|
4039
|
+
"required": false,
|
|
4040
|
+
"description": ""
|
|
4041
|
+
}
|
|
4042
|
+
]
|
|
4043
|
+
},
|
|
4044
|
+
{
|
|
4045
|
+
"displayName": "DrawerOverlay",
|
|
4046
|
+
"description": "",
|
|
4047
|
+
"props": [
|
|
4048
|
+
{
|
|
4049
|
+
"name": "asChild",
|
|
4050
|
+
"type": "boolean",
|
|
4051
|
+
"required": false,
|
|
4052
|
+
"description": ""
|
|
4053
|
+
}
|
|
4054
|
+
]
|
|
4055
|
+
},
|
|
4056
|
+
{
|
|
4057
|
+
"displayName": "DrawerContent",
|
|
4058
|
+
"description": "",
|
|
4059
|
+
"props": [
|
|
4060
|
+
{
|
|
4061
|
+
"name": "asChild",
|
|
4062
|
+
"type": "boolean",
|
|
4063
|
+
"required": false,
|
|
4064
|
+
"description": ""
|
|
4065
|
+
},
|
|
4066
|
+
{
|
|
4067
|
+
"name": "position",
|
|
4068
|
+
"type": "\"left\" | \"right\" | \"top\" | \"bottom\"",
|
|
4069
|
+
"values": [
|
|
4070
|
+
"left",
|
|
4071
|
+
"right",
|
|
4072
|
+
"top",
|
|
4073
|
+
"bottom"
|
|
4074
|
+
],
|
|
4075
|
+
"defaultValue": "right",
|
|
4076
|
+
"required": false,
|
|
4077
|
+
"description": ""
|
|
4078
|
+
},
|
|
4079
|
+
{
|
|
4080
|
+
"name": "portalled",
|
|
4081
|
+
"type": "boolean",
|
|
4082
|
+
"defaultValue": "true",
|
|
4083
|
+
"required": false,
|
|
4084
|
+
"description": "Render without Portal — use inside nested overlays."
|
|
4085
|
+
},
|
|
4086
|
+
{
|
|
4087
|
+
"name": "showOverlay",
|
|
4088
|
+
"type": "boolean",
|
|
4089
|
+
"defaultValue": "true",
|
|
4090
|
+
"required": false,
|
|
4091
|
+
"description": "Show the default overlay scrim."
|
|
4092
|
+
}
|
|
4093
|
+
]
|
|
4094
|
+
},
|
|
4095
|
+
{
|
|
4096
|
+
"displayName": "DrawerHeader",
|
|
4097
|
+
"description": "",
|
|
4098
|
+
"props": [
|
|
4099
|
+
{
|
|
4100
|
+
"name": "icon",
|
|
4101
|
+
"type": "ReactNode",
|
|
4102
|
+
"required": false,
|
|
4103
|
+
"description": "Optional leading status icon"
|
|
4104
|
+
},
|
|
4105
|
+
{
|
|
4106
|
+
"name": "showIcon",
|
|
4107
|
+
"type": "boolean",
|
|
4108
|
+
"defaultValue": "false",
|
|
4109
|
+
"required": false,
|
|
4110
|
+
"description": "Show the leading icon slot"
|
|
4111
|
+
},
|
|
4112
|
+
{
|
|
4113
|
+
"name": "showClose",
|
|
4114
|
+
"type": "boolean",
|
|
4115
|
+
"defaultValue": "true",
|
|
4116
|
+
"required": false,
|
|
4117
|
+
"description": "Show the header close control"
|
|
4118
|
+
},
|
|
4119
|
+
{
|
|
4120
|
+
"name": "closeLabel",
|
|
4121
|
+
"type": "string",
|
|
4122
|
+
"required": false,
|
|
4123
|
+
"description": ""
|
|
4124
|
+
}
|
|
4125
|
+
]
|
|
4126
|
+
},
|
|
4127
|
+
{
|
|
4128
|
+
"displayName": "DrawerHeaderText",
|
|
4129
|
+
"description": "",
|
|
4130
|
+
"props": [
|
|
4131
|
+
{
|
|
4132
|
+
"name": "icon",
|
|
4133
|
+
"type": "ReactNode",
|
|
4134
|
+
"required": false,
|
|
4135
|
+
"description": "Optional leading status icon"
|
|
4136
|
+
},
|
|
4137
|
+
{
|
|
4138
|
+
"name": "showIcon",
|
|
4139
|
+
"type": "boolean",
|
|
4140
|
+
"defaultValue": "false",
|
|
4141
|
+
"required": false,
|
|
4142
|
+
"description": "Show the leading icon slot"
|
|
4143
|
+
},
|
|
4144
|
+
{
|
|
4145
|
+
"name": "showClose",
|
|
4146
|
+
"type": "boolean",
|
|
4147
|
+
"defaultValue": "true",
|
|
4148
|
+
"required": false,
|
|
4149
|
+
"description": "Show the header close control"
|
|
4150
|
+
},
|
|
4151
|
+
{
|
|
4152
|
+
"name": "closeLabel",
|
|
4153
|
+
"type": "string",
|
|
4154
|
+
"required": false,
|
|
4155
|
+
"description": ""
|
|
4156
|
+
},
|
|
4157
|
+
{
|
|
4158
|
+
"name": "description",
|
|
4159
|
+
"type": "ReactNode",
|
|
4160
|
+
"required": false,
|
|
4161
|
+
"description": ""
|
|
4162
|
+
}
|
|
4163
|
+
]
|
|
4164
|
+
},
|
|
4165
|
+
{
|
|
4166
|
+
"displayName": "DrawerTitle",
|
|
4167
|
+
"description": "",
|
|
4168
|
+
"props": [
|
|
4169
|
+
{
|
|
4170
|
+
"name": "asChild",
|
|
4171
|
+
"type": "boolean",
|
|
4172
|
+
"required": false,
|
|
4173
|
+
"description": ""
|
|
4174
|
+
}
|
|
4175
|
+
]
|
|
4176
|
+
},
|
|
4177
|
+
{
|
|
4178
|
+
"displayName": "DrawerDescription",
|
|
4179
|
+
"description": "",
|
|
4180
|
+
"props": [
|
|
4181
|
+
{
|
|
4182
|
+
"name": "asChild",
|
|
4183
|
+
"type": "boolean",
|
|
4184
|
+
"required": false,
|
|
4185
|
+
"description": ""
|
|
4186
|
+
}
|
|
4187
|
+
]
|
|
4188
|
+
},
|
|
4189
|
+
{
|
|
4190
|
+
"displayName": "DrawerBody",
|
|
4191
|
+
"description": "",
|
|
4192
|
+
"props": [
|
|
4193
|
+
{
|
|
4194
|
+
"name": "layout",
|
|
4195
|
+
"type": "\"text\" | \"default\"",
|
|
4196
|
+
"values": [
|
|
4197
|
+
"text",
|
|
4198
|
+
"default"
|
|
4199
|
+
],
|
|
4200
|
+
"defaultValue": "default",
|
|
4201
|
+
"required": false,
|
|
4202
|
+
"description": "Figma `Content=Text` — title + body copy preset"
|
|
4203
|
+
},
|
|
4204
|
+
{
|
|
4205
|
+
"name": "description",
|
|
4206
|
+
"type": "ReactNode",
|
|
4207
|
+
"required": false,
|
|
4208
|
+
"description": ""
|
|
4209
|
+
}
|
|
4210
|
+
]
|
|
4211
|
+
},
|
|
4212
|
+
{
|
|
4213
|
+
"displayName": "DrawerClose",
|
|
4214
|
+
"description": "",
|
|
4215
|
+
"props": [
|
|
4216
|
+
{
|
|
4217
|
+
"name": "asChild",
|
|
4218
|
+
"type": "boolean",
|
|
4219
|
+
"required": false,
|
|
4220
|
+
"description": ""
|
|
4221
|
+
}
|
|
4222
|
+
]
|
|
4223
|
+
}
|
|
4224
|
+
]
|
|
4225
|
+
},
|
|
4027
4226
|
"Tooltip": {
|
|
4028
4227
|
"displayName": "Tooltip",
|
|
4029
4228
|
"description": "",
|
package/dist/styles.css
CHANGED
|
@@ -147,6 +147,9 @@
|
|
|
147
147
|
0 0 1px 0 rgb(0 0 0 / 18%),
|
|
148
148
|
0 6px 18px 0 rgba(0, 0, 0, 0.08);
|
|
149
149
|
|
|
150
|
+
/* Shared elevation — BasicShadow-Level5 */
|
|
151
|
+
--aviala-shadow-level5: 0 8px 24px 2px rgba(0, 0, 0, 0.06);
|
|
152
|
+
|
|
150
153
|
/* Shared interaction surfaces — Figma Components 1909:28593 matrix */
|
|
151
154
|
--aviala-interaction-ghost-hover: var(
|
|
152
155
|
--aviala-neutral-neutral-3,
|
|
@@ -705,6 +708,36 @@
|
|
|
705
708
|
--modal-close-fg: var(--text-text-normal-text-caption-black, #616060);
|
|
706
709
|
--modal-description-fg: var(--text-text-normal-text-caption-black, #616060);
|
|
707
710
|
|
|
711
|
+
/* Drawer — Figma Components → Drawer (2051:26823) */
|
|
712
|
+
--drawer-overlay-bg: rgba(0, 0, 0, 0.4);
|
|
713
|
+
--drawer-inset: var(--padding-large, 18px);
|
|
714
|
+
--drawer-content-width: 310px;
|
|
715
|
+
--drawer-content-max-width: calc(100vw - 36px);
|
|
716
|
+
--drawer-content-max-height-edge: 400px;
|
|
717
|
+
--drawer-content-bg: var(--box-box-normal-background-whiteonly, #ffffff);
|
|
718
|
+
--drawer-content-fg: var(--text-text-normal-text-black, #262525);
|
|
719
|
+
--drawer-content-border: var(--border-border-normal-1, #f0efef);
|
|
720
|
+
--drawer-content-radius: var(--border-radius-big, 12px);
|
|
721
|
+
--drawer-content-shadow: var(--aviala-shadow-level5);
|
|
722
|
+
--drawer-header-bg: var(--drawer-content-bg);
|
|
723
|
+
--drawer-header-pl: var(--padding-big, 14px);
|
|
724
|
+
--drawer-header-pr: var(--padding-small, 6px);
|
|
725
|
+
--drawer-header-py: var(--gap-none, 0);
|
|
726
|
+
--drawer-header-main-py: var(--padding-middle, 10px);
|
|
727
|
+
--drawer-header-gap: var(--gap-content-space, 10px);
|
|
728
|
+
--drawer-section-padding: var(--padding-big, 14px);
|
|
729
|
+
--drawer-section-border: var(--border-border-normal-1, #f0efef);
|
|
730
|
+
--drawer-body-bg: var(--drawer-content-bg);
|
|
731
|
+
--drawer-footer-bg: var(--drawer-content-bg);
|
|
732
|
+
--drawer-footer-actions-gap: var(--gap-component-space, 8px);
|
|
733
|
+
--drawer-icon-size: var(--size-semilarge, 1.375rem);
|
|
734
|
+
--drawer-icon-slot-size: var(--size-semilarge, 1.375rem);
|
|
735
|
+
--drawer-icon-py: var(--padding-min, 2px);
|
|
736
|
+
--drawer-icon-fg: var(--text-text-normal-text-black, #262525);
|
|
737
|
+
--drawer-close-icon-size: var(--size-middle, 1rem);
|
|
738
|
+
--drawer-close-fg: var(--text-text-normal-text-caption-black, #616060);
|
|
739
|
+
--drawer-description-fg: var(--text-text-normal-text-caption-black, #616060);
|
|
740
|
+
|
|
708
741
|
--tooltip-content-bg: var(--text-text-normal-text-black, var(--aviala-neutral-neutral-10, #262525));
|
|
709
742
|
--tooltip-content-fg: var(
|
|
710
743
|
--control-control-normal-background-whiteonly,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@aviala-design/spiral",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.9.0",
|
|
4
4
|
"description": "Spiral 2 ? Aviala Design React component library",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"repository": {
|
|
@@ -45,7 +45,7 @@
|
|
|
45
45
|
"colord": "^2.9.3",
|
|
46
46
|
"tailwind-merge": "^3.3.1",
|
|
47
47
|
"@aviala-design/icons": "2.4.0",
|
|
48
|
-
"@aviala-design/tokens": "2.5.
|
|
48
|
+
"@aviala-design/tokens": "2.5.5"
|
|
49
49
|
},
|
|
50
50
|
"peerDependencies": {
|
|
51
51
|
"react": ">=18",
|