@wallarm-org/design-system 1.2.0 → 1.3.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/components/Indicator/Indicator.d.ts +12 -0
- package/dist/components/Indicator/Indicator.js +14 -0
- package/dist/components/Indicator/classes.d.ts +4 -0
- package/dist/components/Indicator/classes.js +22 -0
- package/dist/components/Indicator/index.d.ts +1 -0
- package/dist/components/Indicator/index.js +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -0
- package/dist/metadata/components.json +318 -2
- package/package.json +1 -1
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import type { FC, HTMLAttributes, Ref } from 'react';
|
|
2
|
+
import type { VariantProps } from 'class-variance-authority';
|
|
3
|
+
import type { TestableProps } from '../../utils/testId';
|
|
4
|
+
import { indicatorVariants } from './classes';
|
|
5
|
+
type IndicatorNativeProps = HTMLAttributes<HTMLSpanElement>;
|
|
6
|
+
type IndicatorVariantProps = VariantProps<typeof indicatorVariants>;
|
|
7
|
+
interface IndicatorBaseProps {
|
|
8
|
+
ref?: Ref<HTMLSpanElement>;
|
|
9
|
+
}
|
|
10
|
+
export type IndicatorProps = IndicatorNativeProps & IndicatorVariantProps & IndicatorBaseProps & TestableProps;
|
|
11
|
+
export declare const Indicator: FC<IndicatorProps>;
|
|
12
|
+
export {};
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { cn } from "../../utils/cn.js";
|
|
3
|
+
import { indicatorVariants } from "./classes.js";
|
|
4
|
+
const Indicator = ({ ref, className, size = 'md', color = 'info', ...props })=>/*#__PURE__*/ jsx("span", {
|
|
5
|
+
...props,
|
|
6
|
+
ref: ref,
|
|
7
|
+
className: cn(indicatorVariants({
|
|
8
|
+
size,
|
|
9
|
+
color
|
|
10
|
+
}), className),
|
|
11
|
+
"data-slot": "indicator"
|
|
12
|
+
});
|
|
13
|
+
Indicator.displayName = 'Indicator';
|
|
14
|
+
export { Indicator };
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { cva } from "class-variance-authority";
|
|
2
|
+
const indicatorVariants = cva('inline-block shrink-0 rounded-2', {
|
|
3
|
+
variants: {
|
|
4
|
+
size: {
|
|
5
|
+
sm: 'size-6',
|
|
6
|
+
md: 'size-8'
|
|
7
|
+
},
|
|
8
|
+
color: {
|
|
9
|
+
info: 'bg-icon-info',
|
|
10
|
+
brand: 'bg-icon-brand',
|
|
11
|
+
warning: 'bg-icon-warning',
|
|
12
|
+
success: 'bg-icon-success',
|
|
13
|
+
ai: 'bg-icon-ai',
|
|
14
|
+
danger: 'bg-icon-danger'
|
|
15
|
+
}
|
|
16
|
+
},
|
|
17
|
+
defaultVariants: {
|
|
18
|
+
size: 'md',
|
|
19
|
+
color: 'info'
|
|
20
|
+
}
|
|
21
|
+
});
|
|
22
|
+
export { indicatorVariants };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { Indicator, type IndicatorProps } from './Indicator';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { Indicator } from "./Indicator.js";
|
package/dist/index.d.ts
CHANGED
|
@@ -38,6 +38,7 @@ export { Flex, type FlexProps } from './components/Flex';
|
|
|
38
38
|
export { FormatDateTime, type FormatDateTimeProps } from './components/FormatDateTime';
|
|
39
39
|
export { Heading, type HeadingProps } from './components/Heading';
|
|
40
40
|
export { HTTP_METHOD_COLOR, HTTP_METHODS, HttpMethod, type HttpMethodName, type HttpMethodProps, } from './components/HttpMethod';
|
|
41
|
+
export { Indicator, type IndicatorProps } from './components/Indicator';
|
|
41
42
|
export { InlineEdit, type InlineEditActivationMode, type InlineEditContextValue, InlineEditControl, type InlineEditControlProps, InlineEditDate, type InlineEditDateProps, InlineEditDateTime, type InlineEditDateTimeProps, InlineEditError, type InlineEditErrorProps, InlineEditInput, type InlineEditInputProps, InlineEditNumber, type InlineEditNumberProps, InlineEditPreview, InlineEditPreviewIcon, type InlineEditPreviewIconProps, type InlineEditPreviewProps, InlineEditPreviewValue, type InlineEditPreviewValueProps, type InlineEditProps, InlineEditSelect, type InlineEditSelectProps, type InlineEditStatus, type InlineEditSubmitMode, InlineEditTextarea, type InlineEditTextareaProps, InlineEditTime, type InlineEditTimeProps, toCalendarDateValue, toReactAriaDateValue, useInlineEdit, useInlineEditSubmitMode, withMinuteGranularity, } from './components/InlineEdit';
|
|
42
43
|
export { Input, type InputProps } from './components/Input';
|
|
43
44
|
export { InputGroup, InputGroupAddon, InputGroupText, } from './components/InputGroup';
|
package/dist/index.js
CHANGED
|
@@ -27,6 +27,7 @@ export { Flex } from "./components/Flex/index.js";
|
|
|
27
27
|
export { FormatDateTime } from "./components/FormatDateTime/index.js";
|
|
28
28
|
export { Heading } from "./components/Heading/index.js";
|
|
29
29
|
export { HTTP_METHODS, HTTP_METHOD_COLOR, HttpMethod } from "./components/HttpMethod/index.js";
|
|
30
|
+
export { Indicator } from "./components/Indicator/index.js";
|
|
30
31
|
export { InlineEdit, InlineEditControl, InlineEditDate, InlineEditDateTime, InlineEditError, InlineEditInput, InlineEditNumber, InlineEditPreview, InlineEditPreviewIcon, InlineEditPreviewValue, InlineEditSelect, InlineEditTextarea, InlineEditTime, toCalendarDateValue, toReactAriaDateValue, useInlineEdit, useInlineEditSubmitMode, withMinuteGranularity } from "./components/InlineEdit/index.js";
|
|
31
32
|
export { Input } from "./components/Input/index.js";
|
|
32
33
|
export { InputGroup, InputGroupAddon, InputGroupText } from "./components/InputGroup/index.js";
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "1.
|
|
3
|
-
"generatedAt": "2026-08-
|
|
2
|
+
"version": "1.2.0",
|
|
3
|
+
"generatedAt": "2026-08-20T20:04:41.723Z",
|
|
4
4
|
"components": [
|
|
5
5
|
{
|
|
6
6
|
"name": "Accordion",
|
|
@@ -31959,6 +31959,322 @@
|
|
|
31959
31959
|
}
|
|
31960
31960
|
]
|
|
31961
31961
|
},
|
|
31962
|
+
{
|
|
31963
|
+
"name": "Indicator",
|
|
31964
|
+
"importPath": "@wallarm-org/design-system/Indicator",
|
|
31965
|
+
"props": [
|
|
31966
|
+
{
|
|
31967
|
+
"name": "defaultChecked",
|
|
31968
|
+
"type": "boolean | undefined",
|
|
31969
|
+
"required": false
|
|
31970
|
+
},
|
|
31971
|
+
{
|
|
31972
|
+
"name": "defaultValue",
|
|
31973
|
+
"type": "string | number | readonly string[] | undefined",
|
|
31974
|
+
"required": false
|
|
31975
|
+
},
|
|
31976
|
+
{
|
|
31977
|
+
"name": "suppressContentEditableWarning",
|
|
31978
|
+
"type": "boolean | undefined",
|
|
31979
|
+
"required": false
|
|
31980
|
+
},
|
|
31981
|
+
{
|
|
31982
|
+
"name": "suppressHydrationWarning",
|
|
31983
|
+
"type": "boolean | undefined",
|
|
31984
|
+
"required": false
|
|
31985
|
+
},
|
|
31986
|
+
{
|
|
31987
|
+
"name": "accessKey",
|
|
31988
|
+
"type": "string | undefined",
|
|
31989
|
+
"required": false
|
|
31990
|
+
},
|
|
31991
|
+
{
|
|
31992
|
+
"name": "autoCapitalize",
|
|
31993
|
+
"type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined",
|
|
31994
|
+
"required": false
|
|
31995
|
+
},
|
|
31996
|
+
{
|
|
31997
|
+
"name": "autoFocus",
|
|
31998
|
+
"type": "boolean | undefined",
|
|
31999
|
+
"required": false
|
|
32000
|
+
},
|
|
32001
|
+
{
|
|
32002
|
+
"name": "contentEditable",
|
|
32003
|
+
"type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined",
|
|
32004
|
+
"required": false
|
|
32005
|
+
},
|
|
32006
|
+
{
|
|
32007
|
+
"name": "contextMenu",
|
|
32008
|
+
"type": "string | undefined",
|
|
32009
|
+
"required": false
|
|
32010
|
+
},
|
|
32011
|
+
{
|
|
32012
|
+
"name": "dir",
|
|
32013
|
+
"type": "string | undefined",
|
|
32014
|
+
"required": false
|
|
32015
|
+
},
|
|
32016
|
+
{
|
|
32017
|
+
"name": "draggable",
|
|
32018
|
+
"type": "Booleanish | undefined",
|
|
32019
|
+
"required": false
|
|
32020
|
+
},
|
|
32021
|
+
{
|
|
32022
|
+
"name": "enterKeyHint",
|
|
32023
|
+
"type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined",
|
|
32024
|
+
"required": false
|
|
32025
|
+
},
|
|
32026
|
+
{
|
|
32027
|
+
"name": "hidden",
|
|
32028
|
+
"type": "boolean | undefined",
|
|
32029
|
+
"required": false
|
|
32030
|
+
},
|
|
32031
|
+
{
|
|
32032
|
+
"name": "id",
|
|
32033
|
+
"type": "string | undefined",
|
|
32034
|
+
"required": false
|
|
32035
|
+
},
|
|
32036
|
+
{
|
|
32037
|
+
"name": "lang",
|
|
32038
|
+
"type": "string | undefined",
|
|
32039
|
+
"required": false
|
|
32040
|
+
},
|
|
32041
|
+
{
|
|
32042
|
+
"name": "nonce",
|
|
32043
|
+
"type": "string | undefined",
|
|
32044
|
+
"required": false
|
|
32045
|
+
},
|
|
32046
|
+
{
|
|
32047
|
+
"name": "slot",
|
|
32048
|
+
"type": "string | undefined",
|
|
32049
|
+
"required": false
|
|
32050
|
+
},
|
|
32051
|
+
{
|
|
32052
|
+
"name": "spellCheck",
|
|
32053
|
+
"type": "Booleanish | undefined",
|
|
32054
|
+
"required": false
|
|
32055
|
+
},
|
|
32056
|
+
{
|
|
32057
|
+
"name": "tabIndex",
|
|
32058
|
+
"type": "number | undefined",
|
|
32059
|
+
"required": false
|
|
32060
|
+
},
|
|
32061
|
+
{
|
|
32062
|
+
"name": "title",
|
|
32063
|
+
"type": "string | undefined",
|
|
32064
|
+
"required": false
|
|
32065
|
+
},
|
|
32066
|
+
{
|
|
32067
|
+
"name": "translate",
|
|
32068
|
+
"type": "\"yes\" | \"no\" | undefined",
|
|
32069
|
+
"required": false
|
|
32070
|
+
},
|
|
32071
|
+
{
|
|
32072
|
+
"name": "radioGroup",
|
|
32073
|
+
"type": "string | undefined",
|
|
32074
|
+
"required": false
|
|
32075
|
+
},
|
|
32076
|
+
{
|
|
32077
|
+
"name": "role",
|
|
32078
|
+
"type": "AriaRole | undefined",
|
|
32079
|
+
"required": false
|
|
32080
|
+
},
|
|
32081
|
+
{
|
|
32082
|
+
"name": "about",
|
|
32083
|
+
"type": "string | undefined",
|
|
32084
|
+
"required": false
|
|
32085
|
+
},
|
|
32086
|
+
{
|
|
32087
|
+
"name": "content",
|
|
32088
|
+
"type": "string | undefined",
|
|
32089
|
+
"required": false
|
|
32090
|
+
},
|
|
32091
|
+
{
|
|
32092
|
+
"name": "datatype",
|
|
32093
|
+
"type": "string | undefined",
|
|
32094
|
+
"required": false
|
|
32095
|
+
},
|
|
32096
|
+
{
|
|
32097
|
+
"name": "inlist",
|
|
32098
|
+
"type": "any",
|
|
32099
|
+
"required": false
|
|
32100
|
+
},
|
|
32101
|
+
{
|
|
32102
|
+
"name": "prefix",
|
|
32103
|
+
"type": "string | undefined",
|
|
32104
|
+
"required": false
|
|
32105
|
+
},
|
|
32106
|
+
{
|
|
32107
|
+
"name": "property",
|
|
32108
|
+
"type": "string | undefined",
|
|
32109
|
+
"required": false
|
|
32110
|
+
},
|
|
32111
|
+
{
|
|
32112
|
+
"name": "rel",
|
|
32113
|
+
"type": "string | undefined",
|
|
32114
|
+
"required": false
|
|
32115
|
+
},
|
|
32116
|
+
{
|
|
32117
|
+
"name": "resource",
|
|
32118
|
+
"type": "string | undefined",
|
|
32119
|
+
"required": false
|
|
32120
|
+
},
|
|
32121
|
+
{
|
|
32122
|
+
"name": "rev",
|
|
32123
|
+
"type": "string | undefined",
|
|
32124
|
+
"required": false
|
|
32125
|
+
},
|
|
32126
|
+
{
|
|
32127
|
+
"name": "typeof",
|
|
32128
|
+
"type": "string | undefined",
|
|
32129
|
+
"required": false
|
|
32130
|
+
},
|
|
32131
|
+
{
|
|
32132
|
+
"name": "vocab",
|
|
32133
|
+
"type": "string | undefined",
|
|
32134
|
+
"required": false
|
|
32135
|
+
},
|
|
32136
|
+
{
|
|
32137
|
+
"name": "autoCorrect",
|
|
32138
|
+
"type": "string | undefined",
|
|
32139
|
+
"required": false
|
|
32140
|
+
},
|
|
32141
|
+
{
|
|
32142
|
+
"name": "autoSave",
|
|
32143
|
+
"type": "string | undefined",
|
|
32144
|
+
"required": false
|
|
32145
|
+
},
|
|
32146
|
+
{
|
|
32147
|
+
"name": "color",
|
|
32148
|
+
"type": "string | undefined",
|
|
32149
|
+
"required": false,
|
|
32150
|
+
"defaultValue": "info"
|
|
32151
|
+
},
|
|
32152
|
+
{
|
|
32153
|
+
"name": "itemProp",
|
|
32154
|
+
"type": "string | undefined",
|
|
32155
|
+
"required": false
|
|
32156
|
+
},
|
|
32157
|
+
{
|
|
32158
|
+
"name": "itemScope",
|
|
32159
|
+
"type": "boolean | undefined",
|
|
32160
|
+
"required": false
|
|
32161
|
+
},
|
|
32162
|
+
{
|
|
32163
|
+
"name": "itemType",
|
|
32164
|
+
"type": "string | undefined",
|
|
32165
|
+
"required": false
|
|
32166
|
+
},
|
|
32167
|
+
{
|
|
32168
|
+
"name": "itemID",
|
|
32169
|
+
"type": "string | undefined",
|
|
32170
|
+
"required": false
|
|
32171
|
+
},
|
|
32172
|
+
{
|
|
32173
|
+
"name": "itemRef",
|
|
32174
|
+
"type": "string | undefined",
|
|
32175
|
+
"required": false
|
|
32176
|
+
},
|
|
32177
|
+
{
|
|
32178
|
+
"name": "results",
|
|
32179
|
+
"type": "number | undefined",
|
|
32180
|
+
"required": false
|
|
32181
|
+
},
|
|
32182
|
+
{
|
|
32183
|
+
"name": "security",
|
|
32184
|
+
"type": "string | undefined",
|
|
32185
|
+
"required": false
|
|
32186
|
+
},
|
|
32187
|
+
{
|
|
32188
|
+
"name": "unselectable",
|
|
32189
|
+
"type": "\"off\" | \"on\" | undefined",
|
|
32190
|
+
"required": false
|
|
32191
|
+
},
|
|
32192
|
+
{
|
|
32193
|
+
"name": "popover",
|
|
32194
|
+
"type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined",
|
|
32195
|
+
"required": false
|
|
32196
|
+
},
|
|
32197
|
+
{
|
|
32198
|
+
"name": "popoverTargetAction",
|
|
32199
|
+
"type": "\"toggle\" | \"show\" | \"hide\" | undefined",
|
|
32200
|
+
"required": false
|
|
32201
|
+
},
|
|
32202
|
+
{
|
|
32203
|
+
"name": "popoverTarget",
|
|
32204
|
+
"type": "string | undefined",
|
|
32205
|
+
"required": false
|
|
32206
|
+
},
|
|
32207
|
+
{
|
|
32208
|
+
"name": "inert",
|
|
32209
|
+
"type": "boolean | undefined",
|
|
32210
|
+
"required": false,
|
|
32211
|
+
"description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert}"
|
|
32212
|
+
},
|
|
32213
|
+
{
|
|
32214
|
+
"name": "inputMode",
|
|
32215
|
+
"type": "\"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined",
|
|
32216
|
+
"required": false,
|
|
32217
|
+
"description": "Hints at the type of data that might be entered by the user while editing the element or its contents"
|
|
32218
|
+
},
|
|
32219
|
+
{
|
|
32220
|
+
"name": "is",
|
|
32221
|
+
"type": "string | undefined",
|
|
32222
|
+
"required": false,
|
|
32223
|
+
"description": "Specify that a standard HTML element should behave like a defined custom built-in element"
|
|
32224
|
+
},
|
|
32225
|
+
{
|
|
32226
|
+
"name": "exportparts",
|
|
32227
|
+
"type": "string | undefined",
|
|
32228
|
+
"required": false,
|
|
32229
|
+
"description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}"
|
|
32230
|
+
},
|
|
32231
|
+
{
|
|
32232
|
+
"name": "part",
|
|
32233
|
+
"type": "string | undefined",
|
|
32234
|
+
"required": false,
|
|
32235
|
+
"description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}"
|
|
32236
|
+
},
|
|
32237
|
+
{
|
|
32238
|
+
"name": "size",
|
|
32239
|
+
"type": "{ sm: string; md: string; }",
|
|
32240
|
+
"required": false,
|
|
32241
|
+
"defaultValue": "md"
|
|
32242
|
+
}
|
|
32243
|
+
],
|
|
32244
|
+
"variants": [
|
|
32245
|
+
{
|
|
32246
|
+
"name": "size",
|
|
32247
|
+
"options": [
|
|
32248
|
+
"sm",
|
|
32249
|
+
"md"
|
|
32250
|
+
],
|
|
32251
|
+
"defaultValue": "md"
|
|
32252
|
+
},
|
|
32253
|
+
{
|
|
32254
|
+
"name": "color",
|
|
32255
|
+
"options": [
|
|
32256
|
+
"info",
|
|
32257
|
+
"brand",
|
|
32258
|
+
"warning",
|
|
32259
|
+
"success",
|
|
32260
|
+
"ai",
|
|
32261
|
+
"danger"
|
|
32262
|
+
],
|
|
32263
|
+
"defaultValue": "info"
|
|
32264
|
+
}
|
|
32265
|
+
],
|
|
32266
|
+
"subComponents": [],
|
|
32267
|
+
"examples": [
|
|
32268
|
+
{
|
|
32269
|
+
"name": "Basic",
|
|
32270
|
+
"code": "({ ...args }) => <Indicator {...args} />"
|
|
32271
|
+
},
|
|
32272
|
+
{
|
|
32273
|
+
"name": "AllVariants",
|
|
32274
|
+
"code": "() => (\n <VStack gap={12}>\n <HStack align='center' gap={8}>\n <Text size='sm'>sm</Text>\n <Text size='sm'>md</Text>\n </HStack>\n {colors.map(color => (\n <HStack key={color} align='center' gap={24}>\n <Indicator size='sm' color={color} />\n <Indicator size='md' color={color} />\n <Text size='sm'>{color}</Text>\n </HStack>\n ))}\n </VStack>\n)"
|
|
32275
|
+
}
|
|
32276
|
+
]
|
|
32277
|
+
},
|
|
31962
32278
|
{
|
|
31963
32279
|
"name": "InlineEdit",
|
|
31964
32280
|
"importPath": "@wallarm-org/design-system/InlineEdit",
|