@drivy/cobalt 1.3.3 → 1.4.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/components/Alerter/index.js +0 -1
- package/components/Alerter/index.js.map +1 -1
- package/components/Form/Stepper.js +10 -2
- package/components/Form/Stepper.js.map +1 -1
- package/package.json +6 -6
- package/styles/components/Form/Autocomplete/index.scss +5 -1
- package/styles/components/Form/TagsInput.scss +78 -0
- package/styles/components/Form/form.scss +1 -1
- package/styles/components/Form/index.scss +1 -0
- package/types/src/components/Alerter/index.d.ts +1 -1
- package/types/src/components/Form/TagsInput.d.ts +39 -0
- package/utils/getCobaltTailwindcssConfig.js.map +1 -1
|
@@ -24,7 +24,6 @@ const useAlerts = () => {
|
|
|
24
24
|
sendAlert: ({ message, status, duration, }) => toaster.create({
|
|
25
25
|
description: message,
|
|
26
26
|
type: status,
|
|
27
|
-
placement: "bottom",
|
|
28
27
|
duration: duration !== null && duration !== void 0 ? duration : computeTimeDurationFromText(message),
|
|
29
28
|
}),
|
|
30
29
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/components/Alerter/index.tsx"],"sourcesContent":["import React, { type PropsWithChildren } from \"react\"\nimport { Toast, Toaster, createToaster, Portal } from \"@ark-ui/react\"\nimport {\n InfoFilledIcon,\n CheckCircleIcon,\n ContextualWarningCircleFilledIcon,\n IconColorsType,\n} from \"../Icon\"\nimport cx from \"classnames\"\n\nconst DEFAULT_TIMEOUT = 3000\nconst MAX_TEXT_TIMEOUT = 9000\n\nexport type AlertStatus = \"info\" | \"success\" | \"error\"\n\nconst computeTimeDurationFromText = (\n content: string | React.ReactNode\n): number => {\n if (typeof content !== \"string\") return DEFAULT_TIMEOUT\n return Math.min(\n Math.max(DEFAULT_TIMEOUT, content.length * 90),\n MAX_TEXT_TIMEOUT\n )\n}\n\nconst toaster = createToaster({\n overlap: true,\n gap: 12,\n placement: \"bottom\",\n max: 12,\n})\n\nexport const useAlerts = () => {\n return {\n sendAlert: ({\n message,\n status,\n duration,\n }: {\n message: React.ReactNode\n status: AlertStatus\n duration?: number\n }) =>\n toaster.create({\n description: message,\n type: status,\n
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/components/Alerter/index.tsx"],"sourcesContent":["import React, { type PropsWithChildren } from \"react\"\nimport { Toast, Toaster, createToaster, Portal } from \"@ark-ui/react\"\nimport {\n InfoFilledIcon,\n CheckCircleIcon,\n ContextualWarningCircleFilledIcon,\n IconColorsType,\n} from \"../Icon\"\nimport cx from \"classnames\"\n\nconst DEFAULT_TIMEOUT = 3000\nconst MAX_TEXT_TIMEOUT = 9000\n\nexport type AlertStatus = \"info\" | \"success\" | \"error\"\n\nconst computeTimeDurationFromText = (\n content: string | React.ReactNode\n): number => {\n if (typeof content !== \"string\") return DEFAULT_TIMEOUT\n return Math.min(\n Math.max(DEFAULT_TIMEOUT, content.length * 90),\n MAX_TEXT_TIMEOUT\n )\n}\n\nconst toaster = createToaster({\n overlap: true,\n gap: 12,\n placement: \"bottom\",\n max: 12,\n})\n\nexport const useAlerts = () => {\n return {\n sendAlert: ({\n message,\n status,\n duration,\n }: {\n message: React.ReactNode\n status: AlertStatus\n duration?: number\n }) =>\n toaster.create({\n description: message,\n type: status,\n duration: duration ?? computeTimeDurationFromText(message),\n }),\n }\n}\n\nconst STATUS_ICONS_MAP: { [k in AlertStatus]: typeof InfoFilledIcon } = {\n info: InfoFilledIcon,\n success: CheckCircleIcon,\n error: ContextualWarningCircleFilledIcon,\n}\n\nconst STATUS_ICON_COLOR_MAP: { [k in AlertStatus]: IconColorsType } = {\n info: \"infoAlt\",\n success: \"success\",\n error: \"error\",\n}\n\nconst Alerter = ({ children }: PropsWithChildren) => {\n return (\n <>\n {children}\n <Portal>\n <Toaster toaster={toaster} className=\"cobalt-alerter\">\n {(toast) => {\n const status = toast.type as AlertStatus\n const IconComp = STATUS_ICONS_MAP[status]\n return (\n <Toast.Root className={cx(\"cobalt-alert\")} key={toast.id}>\n <div className=\"cobalt-alert__wrapper\">\n <IconComp size={20} color={STATUS_ICON_COLOR_MAP[status]} />\n <Toast.Description>{toast.description}</Toast.Description>\n </div>\n </Toast.Root>\n )\n }}\n </Toaster>\n </Portal>\n </>\n )\n}\n\nexport default Alerter\n"],"names":[],"mappings":";;;;;;;;AAUA,MAAM,eAAe,GAAG,IAAI,CAAA;AAC5B,MAAM,gBAAgB,GAAG,IAAI,CAAA;AAI7B,MAAM,2BAA2B,GAAG,CAClC,OAAiC,KACvB;IACV,IAAI,OAAO,OAAO,KAAK,QAAQ;AAAE,QAAA,OAAO,eAAe,CAAA;AACvD,IAAA,OAAO,IAAI,CAAC,GAAG,CACb,IAAI,CAAC,GAAG,CAAC,eAAe,EAAE,OAAO,CAAC,MAAM,GAAG,EAAE,CAAC,EAC9C,gBAAgB,CACjB,CAAA;AACH,CAAC,CAAA;AAED,MAAM,OAAO,GAAG,aAAa,CAAC;AAC5B,IAAA,OAAO,EAAE,IAAI;AACb,IAAA,GAAG,EAAE,EAAE;AACP,IAAA,SAAS,EAAE,QAAQ;AACnB,IAAA,GAAG,EAAE,EAAE;AACR,CAAA,CAAC,CAAA;AAEK,MAAM,SAAS,GAAG,MAAK;IAC5B,OAAO;AACL,QAAA,SAAS,EAAE,CAAC,EACV,OAAO,EACP,MAAM,EACN,QAAQ,GAKT,KACC,OAAO,CAAC,MAAM,CAAC;AACb,YAAA,WAAW,EAAE,OAAO;AACpB,YAAA,IAAI,EAAE,MAAM;YACZ,QAAQ,EAAE,QAAQ,KAAA,IAAA,IAAR,QAAQ,KAAA,KAAA,CAAA,GAAR,QAAQ,GAAI,2BAA2B,CAAC,OAAO,CAAC;SAC3D,CAAC;KACL,CAAA;AACH,EAAC;AAED,MAAM,gBAAgB,GAAkD;AACtE,IAAA,IAAI,EAAE,cAAc;AACpB,IAAA,OAAO,EAAE,eAAe;AACxB,IAAA,KAAK,EAAE,iCAAiC;CACzC,CAAA;AAED,MAAM,qBAAqB,GAA2C;AACpE,IAAA,IAAI,EAAE,SAAS;AACf,IAAA,OAAO,EAAE,SAAS;AAClB,IAAA,KAAK,EAAE,OAAO;CACf,CAAA;AAED,MAAM,OAAO,GAAG,CAAC,EAAE,QAAQ,EAAqB,KAAI;AAClD,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA;QACG,QAAQ;AACT,QAAA,KAAA,CAAA,aAAA,CAAC,MAAM,EAAA,IAAA;AACL,YAAA,KAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EAAC,OAAO,EAAE,OAAO,EAAE,SAAS,EAAC,gBAAgB,EAAA,EAClD,CAAC,KAAK,KAAI;AACT,gBAAA,MAAM,MAAM,GAAG,KAAK,CAAC,IAAmB,CAAA;AACxC,gBAAA,MAAM,QAAQ,GAAG,gBAAgB,CAAC,MAAM,CAAC,CAAA;AACzC,gBAAA,QACE,KAAC,CAAA,aAAA,CAAA,KAAK,CAAC,IAAI,IAAC,SAAS,EAAE,EAAE,CAAC,cAAc,CAAC,EAAE,GAAG,EAAE,KAAK,CAAC,EAAE,EAAA;oBACtD,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,uBAAuB,EAAA;AACpC,wBAAA,KAAA,CAAA,aAAA,CAAC,QAAQ,EAAA,EAAC,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,qBAAqB,CAAC,MAAM,CAAC,EAAI,CAAA;wBAC5D,KAAC,CAAA,aAAA,CAAA,KAAK,CAAC,WAAW,EAAE,IAAA,EAAA,KAAK,CAAC,WAAW,CAAqB,CACtD,CACK,EACd;AACH,aAAC,CACO,CACH,CACR,EACJ;AACH;;;;"}
|
|
@@ -80,12 +80,20 @@ class Stepper extends PureComponent {
|
|
|
80
80
|
"cobalt-Stepper--error": status === "error",
|
|
81
81
|
}) },
|
|
82
82
|
React.createElement("div", { className: "cobalt-Stepper__Wrapper" },
|
|
83
|
-
React.createElement(DefaultButton, { className: "cobalt-Stepper__ActionButton", disabled: disabled || this.state.value === min,
|
|
83
|
+
React.createElement(DefaultButton, { className: "cobalt-Stepper__ActionButton", disabled: disabled || this.state.value === min, ...(!disabled && {
|
|
84
|
+
onPointerDown: () => this.onPointerDown(this.onDecrement),
|
|
85
|
+
onPointerUp: this.onPointerUp,
|
|
86
|
+
onPointerLeave: this.onPointerUp,
|
|
87
|
+
}), type: "button", "data-label": "stepper-minus" },
|
|
84
88
|
React.createElement(MinusIcon, null)),
|
|
85
89
|
React.createElement("div", { className: "cobalt-Stepper__ContentWrapper" },
|
|
86
90
|
children ? children(this.state.value) : this.state.value,
|
|
87
91
|
React.createElement("input", { type: "hidden", name: name, value: this.state.value })),
|
|
88
|
-
React.createElement(DefaultButton, { className: "cobalt-Stepper__ActionButton", disabled: disabled || this.state.value === max,
|
|
92
|
+
React.createElement(DefaultButton, { className: "cobalt-Stepper__ActionButton", disabled: disabled || this.state.value === max, ...(!disabled && {
|
|
93
|
+
onPointerDown: () => this.onPointerDown(this.onIncrement),
|
|
94
|
+
onPointerUp: this.onPointerUp,
|
|
95
|
+
onPointerLeave: this.onPointerUp,
|
|
96
|
+
}), type: "button", "data-label": "stepper-plus" },
|
|
89
97
|
React.createElement(PlusIcon, null)))));
|
|
90
98
|
}
|
|
91
99
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Stepper.js","sources":["../../../src/components/Form/Stepper.tsx"],"sourcesContent":["import React, { PureComponent } from \"react\"\nimport classNames from \"classnames\"\nimport { FormElement } from \"./form\"\nimport { withFieldLabelAndHint } from \"./field\"\nimport DefaultButton from \"../Buttons/DefaultButton\"\nimport { MinusIcon, PlusIcon } from \"../Icon\"\n\nconst AUTO_CHANGE_TIMEOUT_IN_MS = 750\nconst AUTO_CHANGE_INTERVAL_IN_MS = 150\n\nconst enforceInRange = (\n value: number,\n min: number | undefined,\n max: number | undefined\n) => {\n let enforcedValue = value\n if (typeof max !== \"undefined\") {\n enforcedValue = Math.min(enforcedValue, max)\n }\n if (typeof min !== \"undefined\") {\n enforcedValue = Math.max(enforcedValue, min)\n }\n return enforcedValue\n}\n\ntype Props = {\n value: number\n name?: string\n disabled?: boolean\n min?: number\n max?: number\n step: number\n onChange?: (value: number) => void\n children?: (value: number) => React.ReactNode\n} & FormElement\n\ntype State = {\n value: number\n}\n\nclass Stepper extends PureComponent<Props, State> {\n constructor(props: Props) {\n super(props)\n\n if (props.step < 0)\n throw new Error(\"Incorrect step value. Can't be below zero\")\n\n this.onDecrement = this.onDecrement.bind(this)\n this.onIncrement = this.onIncrement.bind(this)\n this.changeValue = this.changeValue.bind(this)\n this.onPointerDown = this.onPointerDown.bind(this)\n this.onPointerUp = this.onPointerUp.bind(this)\n\n this.state = {\n value: enforceInRange(props.value, props.min, props.max),\n }\n }\n\n timeout: ReturnType<typeof setTimeout> | null = null\n interval: ReturnType<typeof setInterval> | null = null\n\n componentDidUpdate(_prevProps: Props, prevState: State) {\n if (prevState.value !== this.state.value) {\n this.changeValue(this.state.value)\n } else if (this.props.value !== this.state.value) {\n this.changeValue(this.props.value)\n }\n }\n\n onDecrement = () => {\n ;(this.props.min !== null || this.state.value > this.props.min) &&\n this.changeValue(\n parseFloat((this.state.value - this.props.step).toFixed(10))\n )\n }\n\n onIncrement = () => {\n ;(this.props.max !== null || this.state.value < this.props.max) &&\n this.changeValue(\n parseFloat((this.state.value + this.props.step).toFixed(10))\n )\n }\n\n onPointerDown = (callback: () => void) => {\n callback()\n this.timeout && clearTimeout(this.timeout)\n this.timeout = setTimeout(() => {\n this.interval && clearInterval(this.interval)\n this.interval = setInterval(callback, AUTO_CHANGE_INTERVAL_IN_MS)\n }, AUTO_CHANGE_TIMEOUT_IN_MS)\n }\n\n onPointerUp = () => {\n if (this.interval) {\n clearInterval(this.interval)\n this.interval = null\n }\n this.timeout && clearTimeout(this.timeout)\n }\n\n changeValue = (value: number) => {\n this.setState(\n {\n value: enforceInRange(value, this.props.min, this.props.max),\n },\n () => {\n this.props.onChange && this.props.onChange(this.state.value)\n }\n )\n }\n\n render() {\n const { name, status, disabled, min, max, children } = this.props\n\n return (\n <div\n className={classNames(\"cobalt-Stepper\", {\n \"cobalt-Stepper--disabled\": disabled,\n \"cobalt-Stepper--success\": status === \"success\",\n \"cobalt-Stepper--error\": status === \"error\",\n })}\n >\n <div className=\"cobalt-Stepper__Wrapper\">\n <DefaultButton\n className=\"cobalt-Stepper__ActionButton\"\n disabled={disabled || this.state.value === min}\n
|
|
1
|
+
{"version":3,"file":"Stepper.js","sources":["../../../src/components/Form/Stepper.tsx"],"sourcesContent":["import React, { PureComponent } from \"react\"\nimport classNames from \"classnames\"\nimport { FormElement } from \"./form\"\nimport { withFieldLabelAndHint } from \"./field\"\nimport DefaultButton from \"../Buttons/DefaultButton\"\nimport { MinusIcon, PlusIcon } from \"../Icon\"\n\nconst AUTO_CHANGE_TIMEOUT_IN_MS = 750\nconst AUTO_CHANGE_INTERVAL_IN_MS = 150\n\nconst enforceInRange = (\n value: number,\n min: number | undefined,\n max: number | undefined\n) => {\n let enforcedValue = value\n if (typeof max !== \"undefined\") {\n enforcedValue = Math.min(enforcedValue, max)\n }\n if (typeof min !== \"undefined\") {\n enforcedValue = Math.max(enforcedValue, min)\n }\n return enforcedValue\n}\n\ntype Props = {\n value: number\n name?: string\n disabled?: boolean\n min?: number\n max?: number\n step: number\n onChange?: (value: number) => void\n children?: (value: number) => React.ReactNode\n} & FormElement\n\ntype State = {\n value: number\n}\n\nclass Stepper extends PureComponent<Props, State> {\n constructor(props: Props) {\n super(props)\n\n if (props.step < 0)\n throw new Error(\"Incorrect step value. Can't be below zero\")\n\n this.onDecrement = this.onDecrement.bind(this)\n this.onIncrement = this.onIncrement.bind(this)\n this.changeValue = this.changeValue.bind(this)\n this.onPointerDown = this.onPointerDown.bind(this)\n this.onPointerUp = this.onPointerUp.bind(this)\n\n this.state = {\n value: enforceInRange(props.value, props.min, props.max),\n }\n }\n\n timeout: ReturnType<typeof setTimeout> | null = null\n interval: ReturnType<typeof setInterval> | null = null\n\n componentDidUpdate(_prevProps: Props, prevState: State) {\n if (prevState.value !== this.state.value) {\n this.changeValue(this.state.value)\n } else if (this.props.value !== this.state.value) {\n this.changeValue(this.props.value)\n }\n }\n\n onDecrement = () => {\n ;(this.props.min !== null || this.state.value > this.props.min) &&\n this.changeValue(\n parseFloat((this.state.value - this.props.step).toFixed(10))\n )\n }\n\n onIncrement = () => {\n ;(this.props.max !== null || this.state.value < this.props.max) &&\n this.changeValue(\n parseFloat((this.state.value + this.props.step).toFixed(10))\n )\n }\n\n onPointerDown = (callback: () => void) => {\n callback()\n this.timeout && clearTimeout(this.timeout)\n this.timeout = setTimeout(() => {\n this.interval && clearInterval(this.interval)\n this.interval = setInterval(callback, AUTO_CHANGE_INTERVAL_IN_MS)\n }, AUTO_CHANGE_TIMEOUT_IN_MS)\n }\n\n onPointerUp = () => {\n if (this.interval) {\n clearInterval(this.interval)\n this.interval = null\n }\n this.timeout && clearTimeout(this.timeout)\n }\n\n changeValue = (value: number) => {\n this.setState(\n {\n value: enforceInRange(value, this.props.min, this.props.max),\n },\n () => {\n this.props.onChange && this.props.onChange(this.state.value)\n }\n )\n }\n\n render() {\n const { name, status, disabled, min, max, children } = this.props\n\n return (\n <div\n className={classNames(\"cobalt-Stepper\", {\n \"cobalt-Stepper--disabled\": disabled,\n \"cobalt-Stepper--success\": status === \"success\",\n \"cobalt-Stepper--error\": status === \"error\",\n })}\n >\n <div className=\"cobalt-Stepper__Wrapper\">\n <DefaultButton\n className=\"cobalt-Stepper__ActionButton\"\n disabled={disabled || this.state.value === min}\n {...(!disabled && {\n onPointerDown: () => this.onPointerDown(this.onDecrement),\n onPointerUp: this.onPointerUp,\n onPointerLeave: this.onPointerUp,\n })}\n type=\"button\"\n data-label=\"stepper-minus\"\n >\n <MinusIcon />\n </DefaultButton>\n <div className=\"cobalt-Stepper__ContentWrapper\">\n {children ? children(this.state.value) : this.state.value}\n <input type=\"hidden\" name={name} value={this.state.value} />\n </div>\n <DefaultButton\n className=\"cobalt-Stepper__ActionButton\"\n disabled={disabled || this.state.value === max}\n {...(!disabled && {\n onPointerDown: () => this.onPointerDown(this.onIncrement),\n onPointerUp: this.onPointerUp,\n onPointerLeave: this.onPointerUp,\n })}\n type=\"button\"\n data-label=\"stepper-plus\"\n >\n <PlusIcon />\n </DefaultButton>\n </div>\n </div>\n )\n }\n}\n\nconst wrappedComponent = withFieldLabelAndHint(Stepper)\nwrappedComponent.displayName = \"Stepper\"\n\nexport { wrappedComponent as Stepper }\n\ntype StepperMetaProps = {\n children: React.ReactNode\n}\nconst StepperMeta = ({ children }: StepperMetaProps) => {\n return <div className=\"cobalt-Stepper__Meta\">{children}</div>\n}\n\nexport { StepperMeta }\n"],"names":["classNames"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@drivy/cobalt",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.4.0",
|
|
4
4
|
"description": "Opinionated design system for Drivy's projects.",
|
|
5
5
|
"main": "src/index.js",
|
|
6
6
|
"types": "types/src/index.d.ts",
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
"url": "https://github.com/TimPetricola"
|
|
20
20
|
},
|
|
21
21
|
"dependencies": {
|
|
22
|
-
"@ark-ui/react": "
|
|
22
|
+
"@ark-ui/react": "5.9.0",
|
|
23
23
|
"@juggle/resize-observer": "3.4.0",
|
|
24
24
|
"@lottiefiles/react-lottie-player": "3.5.4",
|
|
25
25
|
"@react-spring/web": "9.7.5",
|
|
@@ -60,10 +60,10 @@
|
|
|
60
60
|
"@types/lodash.throttle": "4.1.9",
|
|
61
61
|
"@types/media-typer": "1.1.3",
|
|
62
62
|
"@types/node": "22.14.1",
|
|
63
|
-
"@types/react": "18.3.
|
|
64
|
-
"@types/react-dom": "18.3.
|
|
63
|
+
"@types/react": "18.3.21",
|
|
64
|
+
"@types/react-dom": "18.3.7",
|
|
65
65
|
"autoprefixer": "10.4.21",
|
|
66
|
-
"core-js": "3.
|
|
66
|
+
"core-js": "3.42.0",
|
|
67
67
|
"css-loader": "7.1.2",
|
|
68
68
|
"eslint": "8.57.1",
|
|
69
69
|
"eslint-plugin-storybook": "^0.12.0",
|
|
@@ -98,7 +98,7 @@
|
|
|
98
98
|
"svg2vectordrawable": "2.9.1",
|
|
99
99
|
"svgo": "3.3.2",
|
|
100
100
|
"ts-jest": "29.3.2",
|
|
101
|
-
"tsx": "4.19.
|
|
101
|
+
"tsx": "4.19.4",
|
|
102
102
|
"typescript": "5.4.5"
|
|
103
103
|
},
|
|
104
104
|
"keywords": [
|
|
@@ -3,6 +3,10 @@
|
|
|
3
3
|
|
|
4
4
|
position: relative;
|
|
5
5
|
|
|
6
|
+
[data-state="open"] {
|
|
7
|
+
border-radius: 8px 8px 0 0;
|
|
8
|
+
}
|
|
9
|
+
|
|
6
10
|
&__clear-button:not([hidden]) {
|
|
7
11
|
position: absolute;
|
|
8
12
|
right: 6px;
|
|
@@ -34,7 +38,7 @@
|
|
|
34
38
|
|
|
35
39
|
overflow: hidden;
|
|
36
40
|
|
|
37
|
-
border-radius: 0 0
|
|
41
|
+
border-radius: 0 0 8px 8px;
|
|
38
42
|
box-shadow:
|
|
39
43
|
0 2px 2px 0 rgba(0, 0, 0, 0.06),
|
|
40
44
|
0 6px 6px 0 rgba(0, 0, 0, 0.04),
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
@import "./form";
|
|
2
|
+
|
|
3
|
+
/* stylelint-disable max-nesting-depth */
|
|
4
|
+
.cobalt- {
|
|
5
|
+
&TagsField {
|
|
6
|
+
$self: &;
|
|
7
|
+
|
|
8
|
+
@include form-field-container;
|
|
9
|
+
|
|
10
|
+
position: relative;
|
|
11
|
+
|
|
12
|
+
&__InputContainer {
|
|
13
|
+
@apply c-text-base c-border c-border-strong c-bg-secondary c-rounded-lg;
|
|
14
|
+
box-sizing: border-box;
|
|
15
|
+
|
|
16
|
+
width: 100%;
|
|
17
|
+
padding: 10px 12px;
|
|
18
|
+
|
|
19
|
+
&:not([data-disabled]) {
|
|
20
|
+
@apply c-state-interactive c-transition-colors;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
&--success {
|
|
24
|
+
@apply c-border-success;
|
|
25
|
+
|
|
26
|
+
&:not([data-disabled]):hover,
|
|
27
|
+
&:not([data-disabled]):focus {
|
|
28
|
+
@apply c-border-success;
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
&--error {
|
|
33
|
+
@apply c-border-error;
|
|
34
|
+
|
|
35
|
+
&:not([data-disabled]):hover,
|
|
36
|
+
&:not([data-disabled]):focus {
|
|
37
|
+
@apply c-border-error;
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
&:not([data-disabled]):focus-within {
|
|
42
|
+
@apply c-border-accent;
|
|
43
|
+
|
|
44
|
+
outline: none;
|
|
45
|
+
box-shadow: inset 0 0 0 1px theme("semanticBorderColor.accent");
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
&[data-disabled] {
|
|
49
|
+
@apply c-border-base c-text-subdued c-bg-neutral c-cursor-not-allowed;
|
|
50
|
+
|
|
51
|
+
* {
|
|
52
|
+
@apply c-pointer-events-none;
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
&__Tags {
|
|
58
|
+
@apply c-flex c-flex-wrap c-gap-x-[4px] c-mb-2xs;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
&__Input {
|
|
62
|
+
@apply c-bg-transparent c-border-none c-font-base c-text-base;
|
|
63
|
+
width: 100%;
|
|
64
|
+
|
|
65
|
+
font-size: 16px;
|
|
66
|
+
font-weight: 400;
|
|
67
|
+
line-height: 24px;
|
|
68
|
+
|
|
69
|
+
outline: none;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
&__Input::placeholder {
|
|
73
|
+
@apply c-text-subdued;
|
|
74
|
+
opacity: 0.7;
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
/* stylelint-enable max-nesting-depth */
|
|
@@ -5,7 +5,7 @@ export declare const useAlerts: () => {
|
|
|
5
5
|
message: React.ReactNode;
|
|
6
6
|
status: AlertStatus;
|
|
7
7
|
duration?: number;
|
|
8
|
-
}) => string
|
|
8
|
+
}) => string;
|
|
9
9
|
};
|
|
10
10
|
declare const Alerter: ({ children }: PropsWithChildren) => React.JSX.Element;
|
|
11
11
|
export default Alerter;
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { TagsInput as TagsInputComponent, TagsInputRootProps } from "@ark-ui/react";
|
|
3
|
+
import { IconSources } from "../Icon";
|
|
4
|
+
import { FormElement } from "./form";
|
|
5
|
+
type Props = {
|
|
6
|
+
icon?: IconSources;
|
|
7
|
+
forwardedRef?: React.Ref<HTMLInputElement>;
|
|
8
|
+
value?: string;
|
|
9
|
+
onValueChange?: (value: string) => void;
|
|
10
|
+
tags?: string[];
|
|
11
|
+
onTagsChange?: (tags: string[]) => void;
|
|
12
|
+
defaultTags?: string[];
|
|
13
|
+
defaultValue?: string;
|
|
14
|
+
max?: number;
|
|
15
|
+
} & Omit<FormElement, "value" | "defaultValue" | "max" | "onChange" | "onInputChange"> & React.InputHTMLAttributes<HTMLInputElement> & Omit<TagsInputRootProps, "value" | "inputValue" | "onValueChange">;
|
|
16
|
+
export declare const TagsInputWrapper: ({ status, render, }: {
|
|
17
|
+
status?: FormElement["status"];
|
|
18
|
+
render: (className: string) => React.ReactNode;
|
|
19
|
+
}) => React.JSX.Element;
|
|
20
|
+
declare const wrappedComponent: React.ComponentClass<{
|
|
21
|
+
icon?: "download" | "search" | "document" | "slider" | "key" | "map" | "video" | "location" | "copy" | "loading" | "accountDetails" | "addPicture" | "airConditioning" | "airport" | "android" | "antique" | "arrowLeftCircleFilled" | "arrowLeft" | "arrowRightCircleFilled" | "arrowRightCircle" | "arrowRight" | "audioInput" | "babySeat" | "bank" | "battery" | "bell" | "bikeRack" | "bin" | "bluetooth" | "briefcase" | "bulb" | "cable" | "cabriolet" | "calendarCheck" | "calendarClock" | "calendarEnd" | "calendarStart" | "calendar" | "cameraAdd" | "camera" | "campervan" | "carAdd" | "carCheck" | "carDamages" | "carDrivyOpen" | "carGroup" | "carLock" | "carPlay" | "carReturn" | "carSearch" | "carTypeAntique" | "carTypeCabriolet" | "carTypeCampervan" | "carTypeCity" | "carTypeConvertible" | "carTypeCoupe" | "carTypeFamily" | "carTypeFourFour" | "carTypeMinibus" | "carTypeSedan" | "carTypeUtility" | "car" | "card" | "cdPlayer" | "certificate" | "chains" | "checkCircleFilled" | "checkCircle" | "check" | "checklist" | "chevronDown" | "chevronLeft" | "chevronRight" | "chevronUp" | "circledArrowLeft" | "circledArrowRight" | "city" | "cleaning" | "clockAlert" | "clockBackwards" | "clockForwards" | "clock" | "closeCircleFilled" | "close" | "collapse" | "connectCar" | "contactMail" | "contactPhone" | "contextualPaperclip" | "contextualQuestion" | "contextualWarningCircleFilled" | "contextualWarningCircle" | "contract" | "convertible" | "coupe" | "creditCardAdd" | "creditCardError" | "creditCard" | "cruiseControl" | "dashcam" | "directions" | "dotHorizontal" | "dotVertical" | "dotsHorizontal" | "dotsVertical" | "earning" | "earth" | "edit" | "electric" | "evBattery" | "evCable" | "evCharger" | "expand" | "externalLink" | "eyeClosed" | "eyeOpened" | "eye" | "faceRecognition" | "facebook" | "family" | "fileFilled" | "filepdf" | "filexls" | "filter" | "filters" | "flag" | "fourByFour" | "fourWheelDrive" | "fuelTank" | "geolocation" | "gift" | "gps" | "graphUp" | "healing" | "heart" | "hitch" | "home" | "idCard" | "incident" | "infoCircleFilled" | "infoCircle" | "infoFilled" | "info" | "instant" | "invoice" | "keyConnect" | "licenceCheck" | "licencePaper" | "licence" | "lifeBuoy" | "linkedin" | "locality" | "locationMap" | "locationParking" | "locationPin" | "lockCheck" | "locked" | "login" | "logout" | "mailCheck" | "mail" | "mapAlt" | "meetDriver" | "meetOwner" | "menuList" | "messages" | "mileage" | "minibus" | "minusCircleFilled" | "minus" | "miscGift" | "nearbyDevice" | "notification" | "number1Circle" | "number2Circle" | "number3Circle" | "number4Circle" | "number5Circle" | "okHand" | "optionAirConditioning" | "optionAndroidAuto" | "optionAppleCarplay" | "optionAudioInput" | "optionBabySeat" | "optionBikeRack" | "optionBluetoothAudio" | "optionCdPlayer" | "optionChains" | "optionCruiseControl" | "optionDashcam" | "optionGps" | "optionHasTrailer" | "optionHitch" | "optionRoofBox" | "optionSkiRack" | "optionSnowTire" | "optionWheelchairAccessible" | "paperclip" | "parking" | "passport" | "payments" | "pencil" | "peopleUser" | "percentage" | "performance" | "phoneLink" | "phone" | "photos" | "pickupTruck" | "pig" | "pin" | "plug" | "plusCircleFilled" | "plus" | "position" | "pricingFlat" | "pricingVariable" | "profilePicture" | "questionCircleFilled" | "questionCircle" | "question" | "raceFlag" | "recenter" | "refresh" | "reorder" | "replacementCar" | "reply" | "reset" | "ride" | "roofBox" | "rotate" | "sealCheck" | "searchCar" | "searchPeople" | "sedan" | "serviceBattery" | "serviceCleaning" | "serviceFuel" | "serviceHealing" | "serviceLocked" | "serviceTolls" | "serviceUnlocked" | "settings" | "shareAndroid" | "shareIos" | "share" | "shieldCheck" | "shield" | "shop" | "skiRack" | "smartphone" | "smilingFace" | "snowTire" | "socialFacebook" | "socialLinkedin" | "socialTwitter" | "socialWhatsapp" | "starHalf" | "star" | "stars" | "subway" | "suitcase" | "support" | "suv" | "synch" | "tag" | "timeAlert" | "timeBackwards" | "timeCalendar" | "timeForward" | "tolls" | "trailer" | "train" | "triangleDown" | "triangleRight" | "triangleUp" | "twitter" | "twoPeople" | "uber" | "unfold" | "unlocked" | "userCheck" | "userQuestion" | "userShield" | "userSwitch" | "user" | "utilityVanLarge" | "utilityVanMedium" | "utilityVanSmall" | "verifiedSeal" | "walk" | "wallet" | "warningCircleFilled" | "warningCircle" | "warning" | "whatsapp" | "wheel" | "wheelchair" | "wrench" | "yingyang" | undefined;
|
|
22
|
+
forwardedRef?: React.Ref<HTMLInputElement> | undefined;
|
|
23
|
+
value?: string | undefined;
|
|
24
|
+
onValueChange?: ((value: string) => void) | undefined;
|
|
25
|
+
tags?: string[] | undefined;
|
|
26
|
+
onTagsChange?: ((tags: string[]) => void) | undefined;
|
|
27
|
+
defaultTags?: string[] | undefined;
|
|
28
|
+
defaultValue?: string | undefined;
|
|
29
|
+
max?: number | undefined;
|
|
30
|
+
} & Omit<FormElement, "defaultValue" | "onChange" | "value" | "max" | "onInputChange"> & React.InputHTMLAttributes<HTMLInputElement> & Omit<TagsInputComponent.RootProps, "onValueChange" | "value" | "inputValue"> & {
|
|
31
|
+
id?: string | undefined;
|
|
32
|
+
label?: string | undefined;
|
|
33
|
+
hint?: string | undefined;
|
|
34
|
+
fieldClassName?: string | undefined;
|
|
35
|
+
fullWidth?: boolean | undefined;
|
|
36
|
+
} & FormElement, any> & {
|
|
37
|
+
Raw: React.ComponentType<Props>;
|
|
38
|
+
};
|
|
39
|
+
export { wrappedComponent as TagsInput };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"getCobaltTailwindcssConfig.js","sources":["../../utils/getCobaltTailwindcssConfig.js?commonjs-entry"],"sourcesContent":["import { getDefaultExportFromCjs } from \"\u0000commonjsHelpers.js\";\nimport { __require as requireGetCobaltTailwindcssConfig } from \"/Users/
|
|
1
|
+
{"version":3,"file":"getCobaltTailwindcssConfig.js","sources":["../../utils/getCobaltTailwindcssConfig.js?commonjs-entry"],"sourcesContent":["import { getDefaultExportFromCjs } from \"\u0000commonjsHelpers.js\";\nimport { __require as requireGetCobaltTailwindcssConfig } from \"/Users/cedric/Dev/drivy/cobalt/utils/getCobaltTailwindcssConfig.js\";\nvar getCobaltTailwindcssConfigExports = requireGetCobaltTailwindcssConfig();\nexport { getCobaltTailwindcssConfigExports as __moduleExports };\nexport default /*@__PURE__*/getDefaultExportFromCjs(getCobaltTailwindcssConfigExports);"],"names":[],"mappings":";;;AAEA,IAAI,iCAAiC,GAAG,iCAAiC,EAAE,CAAC;AAE5E,iCAAe,aAAa,uBAAuB,CAAC,iCAAiC,CAAC;;;;"}
|