@drivy/cobalt 1.0.1 → 1.0.3
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.
|
@@ -3,13 +3,13 @@ import cx from 'classnames';
|
|
|
3
3
|
import '../Icon/index.js';
|
|
4
4
|
import CloseIcon from '../Icon/__generated__/CloseIcon.js';
|
|
5
5
|
|
|
6
|
-
const Callout = ({ title, children, status = "info", close, }) => (React.createElement("div", { className: cx("cobalt-Callout
|
|
6
|
+
const Callout = ({ title, children, status = "info", close, }) => (React.createElement("div", { className: cx("cobalt-Callout", {
|
|
7
7
|
"cobalt-Callout--info": status === "info",
|
|
8
8
|
"cobalt-Callout--error": status === "error",
|
|
9
9
|
"cobalt-Callout--success": status === "success",
|
|
10
10
|
}) },
|
|
11
11
|
title && React.createElement("div", { className: "cobalt-Callout__Title" }, title),
|
|
12
|
-
React.createElement("
|
|
12
|
+
React.createElement("div", null, children),
|
|
13
13
|
close && (React.createElement("button", { className: "cobalt-Callout__Close", onClick: close, type: "button" },
|
|
14
14
|
React.createElement(CloseIcon, { color: "subduedInteractive", contained: true, size: 16 })))));
|
|
15
15
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/components/Callout/index.tsx"],"sourcesContent":["import React from \"react\"\nimport cx from \"classnames\"\nimport { CloseIcon } from \"../Icon\"\n\nexport interface CalloutProps {\n children: React.ReactNode\n title?: string\n status: \"info\" | \"error\" | \"success\"\n close?: () => void\n}\n\nexport const Callout = ({\n title,\n children,\n status = \"info\",\n close,\n}: CalloutProps) => (\n <div\n className={cx(\"cobalt-Callout
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/components/Callout/index.tsx"],"sourcesContent":["import React from \"react\"\nimport cx from \"classnames\"\nimport { CloseIcon } from \"../Icon\"\n\nexport interface CalloutProps {\n children: React.ReactNode\n title?: string\n status: \"info\" | \"error\" | \"success\"\n close?: () => void\n}\n\nexport const Callout = ({\n title,\n children,\n status = \"info\",\n close,\n}: CalloutProps) => (\n <div\n className={cx(\"cobalt-Callout\", {\n \"cobalt-Callout--info\": status === \"info\",\n \"cobalt-Callout--error\": status === \"error\",\n \"cobalt-Callout--success\": status === \"success\",\n })}\n >\n {title && <div className=\"cobalt-Callout__Title\">{title}</div>}\n <div>{children}</div>\n {close && (\n <button className=\"cobalt-Callout__Close\" onClick={close} type=\"button\">\n <CloseIcon color=\"subduedInteractive\" contained size={16} />\n </button>\n )}\n </div>\n)\n\nexport default Callout\n"],"names":[],"mappings":";;;;;AAWa,MAAA,OAAO,GAAG,CAAC,EACtB,KAAK,EACL,QAAQ,EACR,MAAM,GAAG,MAAM,EACf,KAAK,GACQ,MACb,KACE,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,EAAE,CAAC,gBAAgB,EAAE;QAC9B,sBAAsB,EAAE,MAAM,KAAK,MAAM;QACzC,uBAAuB,EAAE,MAAM,KAAK,OAAO;QAC3C,yBAAyB,EAAE,MAAM,KAAK,SAAS;KAChD,CAAC,EAAA;AAED,IAAA,KAAK,IAAI,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,uBAAuB,EAAA,EAAE,KAAK,CAAO;AAC9D,IAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,IAAA,EAAM,QAAQ,CAAO;AACpB,IAAA,KAAK,KACJ,KAAQ,CAAA,aAAA,CAAA,QAAA,EAAA,EAAA,SAAS,EAAC,uBAAuB,EAAC,OAAO,EAAE,KAAK,EAAE,IAAI,EAAC,QAAQ,EAAA;AACrE,QAAA,KAAA,CAAA,aAAA,CAAC,SAAS,EAAC,EAAA,KAAK,EAAC,oBAAoB,EAAC,SAAS,EAAA,IAAA,EAAC,IAAI,EAAE,EAAE,EAAI,CAAA,CACrD,CACV,CACG;;;;"}
|
|
@@ -3,7 +3,7 @@ import { Slider as Slider$1 } from '@ark-ui/react';
|
|
|
3
3
|
import cx from 'classnames';
|
|
4
4
|
import { FieldWrapper } from './field.js';
|
|
5
5
|
|
|
6
|
-
const Slider = ({ defaultValue: _defaultValue, value: _value, min, max, disabled, onValueChange, renderValue, ariaLabel, hint, label, status, ...restProps }) => {
|
|
6
|
+
const Slider = ({ defaultValue: _defaultValue, value: _value, min, max, disabled, onValueChange, renderValue, ariaLabel, hint, label, status, className, ...restProps }) => {
|
|
7
7
|
const value = Array.isArray(_value)
|
|
8
8
|
? _value
|
|
9
9
|
: _value !== undefined && !isNaN(_value)
|
|
@@ -25,7 +25,7 @@ const Slider = ({ defaultValue: _defaultValue, value: _value, min, max, disabled
|
|
|
25
25
|
}
|
|
26
26
|
const [sliderValue, setSliderValue] = useState(() => initValue());
|
|
27
27
|
return (React.createElement(FieldWrapper, { ...restProps, status: status, label: label, hint: hint },
|
|
28
|
-
React.createElement(Slider$1.Root, { ...restProps, className: cx("cobalt-slider", {
|
|
28
|
+
React.createElement(Slider$1.Root, { ...restProps, className: cx("cobalt-slider", className, {
|
|
29
29
|
"cobalt-slider--disabled": disabled,
|
|
30
30
|
"cobalt-slider--withHint": hint,
|
|
31
31
|
}), thumbAlignment: "contain", disabled: disabled, "aria-label": [ariaLabel], value: sliderValue, min: min, max: max,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Slider.js","sources":["../../../src/components/Form/Slider.tsx"],"sourcesContent":["import React, { PropsWithChildren, useState } from \"react\"\nimport { Slider as ArkSlider, SliderRootProps } from \"@ark-ui/react\"\nimport cx from \"classnames\"\nimport { FieldWrapper, FieldWrapperProps } from \"./field\"\n\nexport type SliderPropsType<T extends number | number[]> = {\n /**\n * mandatory for A11y\n */\n value?: T\n defaultValue?: T\n ariaLabel: string\n /**\n * values interval\n */\n step?: number\n disabled?: boolean\n /**\n * Listener called when the value is changed\n */\n onValueChange?: (newValue: T) => void\n /**\n * Function used to visually display the slider value\n */\n renderValue?: (\n value: T,\n status: FieldWrapperProps[\"status\"]\n ) => React.ReactElement\n\n onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void\n} & FieldWrapperProps &\n Omit<SliderRootProps, \"value\" | \"defaultValue\" | \"onValueChange\">\n\nconst Slider = <T extends number | number[]>({\n defaultValue: _defaultValue,\n value: _value,\n min,\n max,\n disabled,\n onValueChange,\n renderValue,\n ariaLabel,\n hint,\n label,\n status,\n ...restProps\n}: SliderPropsType<T>) => {\n const value: number[] | undefined = Array.isArray(_value)\n ? _value\n : _value !== undefined && !isNaN(_value)\n ? [_value]\n : undefined\n const defaultValue: number[] | undefined = Array.isArray(_defaultValue)\n ? _defaultValue\n : _defaultValue !== undefined && !isNaN(_defaultValue)\n ? [_defaultValue]\n : undefined\n function initValue(): number[] {\n if (value !== undefined) return value\n if (defaultValue !== undefined) return defaultValue\n if (min !== undefined) return [min]\n return [0]\n }\n\n const [sliderValue, setSliderValue] = useState(() => initValue())\n\n return (\n <FieldWrapper {...restProps} status={status} label={label} hint={hint}>\n <ArkSlider.Root\n {...restProps}\n className={cx(\"cobalt-slider\", {\n \"cobalt-slider--disabled\": disabled,\n \"cobalt-slider--withHint\": hint,\n })}\n thumbAlignment=\"contain\"\n disabled={disabled}\n aria-label={[ariaLabel]}\n value={sliderValue}\n min={min}\n max={max}\n // Need to force disbplaying in smaller spaces like popovers\n thumbSize={{\n width: 24,\n height: 24,\n }}\n onValueChange={({ value: newValueArr }) => {\n setSliderValue(newValueArr)\n const newValue =\n newValueArr.length === 1 ? newValueArr[0] : newValueArr\n onValueChange && onValueChange(newValue as T)\n }}\n >\n <ArkSlider.Label className={FieldWrapper.labelClassName}>\n {label}\n </ArkSlider.Label>\n {renderValue && (\n <div className=\"cobalt-slider__value-container\">\n {renderValue(\n (sliderValue.length === 1 ? sliderValue[0] : sliderValue) as T,\n status\n )}\n </div>\n )}\n <ArkSlider.Control>\n <ArkSlider.Track>\n <ArkSlider.Range />\n </ArkSlider.Track>\n {sliderValue.map((_v, i) => (\n <ArkSlider.Thumb key={i} index={i}>\n <ArkSlider.HiddenInput />\n </ArkSlider.Thumb>\n ))}\n </ArkSlider.Control>\n </ArkSlider.Root>\n </FieldWrapper>\n )\n}\n\nexport default Slider\n\nexport const SliderValueMeta = ({ children }: PropsWithChildren) => {\n return <span className=\"cobalt-slider__value-meta\">{children}</span>\n}\n"],"names":["ArkSlider"],"mappings":";;;;;AAiCA,MAAM,MAAM,GAAG,CAA8B,EAC3C,YAAY,EAAE,aAAa,EAC3B,KAAK,EAAE,MAAM,EACb,GAAG,EACH,GAAG,EACH,QAAQ,EACR,aAAa,EACb,WAAW,EACX,SAAS,EACT,IAAI,EACJ,KAAK,EACL,MAAM,EACN,GAAG,SAAS,EACO,KAAI;AACvB,IAAA,MAAM,KAAK,GAAyB,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC;AACvD,UAAE,MAAM;UACN,MAAM,KAAK,SAAS,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;cACpC,CAAC,MAAM,CAAC;cACR,SAAS,CAAA;AACf,IAAA,MAAM,YAAY,GAAyB,KAAK,CAAC,OAAO,CAAC,aAAa,CAAC;AACrE,UAAE,aAAa;UACb,aAAa,KAAK,SAAS,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC;cAClD,CAAC,aAAa,CAAC;cACf,SAAS,CAAA;AACf,IAAA,SAAS,SAAS,GAAA;QAChB,IAAI,KAAK,KAAK,SAAS;AAAE,YAAA,OAAO,KAAK,CAAA;QACrC,IAAI,YAAY,KAAK,SAAS;AAAE,YAAA,OAAO,YAAY,CAAA;QACnD,IAAI,GAAG,KAAK,SAAS;YAAE,OAAO,CAAC,GAAG,CAAC,CAAA;QACnC,OAAO,CAAC,CAAC,CAAC,CAAA;KACX;AAED,IAAA,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,MAAM,SAAS,EAAE,CAAC,CAAA;AAEjE,IAAA,QACE,KAAC,CAAA,aAAA,CAAA,YAAY,EAAK,EAAA,GAAA,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAA;
|
|
1
|
+
{"version":3,"file":"Slider.js","sources":["../../../src/components/Form/Slider.tsx"],"sourcesContent":["import React, { PropsWithChildren, useState } from \"react\"\nimport { Slider as ArkSlider, SliderRootProps } from \"@ark-ui/react\"\nimport cx from \"classnames\"\nimport { FieldWrapper, FieldWrapperProps } from \"./field\"\n\nexport type SliderPropsType<T extends number | number[]> = {\n /**\n * mandatory for A11y\n */\n value?: T\n defaultValue?: T\n ariaLabel: string\n /**\n * values interval\n */\n step?: number\n disabled?: boolean\n /**\n * Listener called when the value is changed\n */\n onValueChange?: (newValue: T) => void\n /**\n * Function used to visually display the slider value\n */\n renderValue?: (\n value: T,\n status: FieldWrapperProps[\"status\"]\n ) => React.ReactElement\n\n onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void\n} & FieldWrapperProps &\n Omit<SliderRootProps, \"value\" | \"defaultValue\" | \"onValueChange\">\n\nconst Slider = <T extends number | number[]>({\n defaultValue: _defaultValue,\n value: _value,\n min,\n max,\n disabled,\n onValueChange,\n renderValue,\n ariaLabel,\n hint,\n label,\n status,\n className,\n ...restProps\n}: SliderPropsType<T>) => {\n const value: number[] | undefined = Array.isArray(_value)\n ? _value\n : _value !== undefined && !isNaN(_value)\n ? [_value]\n : undefined\n const defaultValue: number[] | undefined = Array.isArray(_defaultValue)\n ? _defaultValue\n : _defaultValue !== undefined && !isNaN(_defaultValue)\n ? [_defaultValue]\n : undefined\n function initValue(): number[] {\n if (value !== undefined) return value\n if (defaultValue !== undefined) return defaultValue\n if (min !== undefined) return [min]\n return [0]\n }\n\n const [sliderValue, setSliderValue] = useState(() => initValue())\n\n return (\n <FieldWrapper {...restProps} status={status} label={label} hint={hint}>\n <ArkSlider.Root\n {...restProps}\n className={cx(\"cobalt-slider\", className, {\n \"cobalt-slider--disabled\": disabled,\n \"cobalt-slider--withHint\": hint,\n })}\n thumbAlignment=\"contain\"\n disabled={disabled}\n aria-label={[ariaLabel]}\n value={sliderValue}\n min={min}\n max={max}\n // Need to force disbplaying in smaller spaces like popovers\n thumbSize={{\n width: 24,\n height: 24,\n }}\n onValueChange={({ value: newValueArr }) => {\n setSliderValue(newValueArr)\n const newValue =\n newValueArr.length === 1 ? newValueArr[0] : newValueArr\n onValueChange && onValueChange(newValue as T)\n }}\n >\n <ArkSlider.Label className={FieldWrapper.labelClassName}>\n {label}\n </ArkSlider.Label>\n {renderValue && (\n <div className=\"cobalt-slider__value-container\">\n {renderValue(\n (sliderValue.length === 1 ? sliderValue[0] : sliderValue) as T,\n status\n )}\n </div>\n )}\n <ArkSlider.Control>\n <ArkSlider.Track>\n <ArkSlider.Range />\n </ArkSlider.Track>\n {sliderValue.map((_v, i) => (\n <ArkSlider.Thumb key={i} index={i}>\n <ArkSlider.HiddenInput />\n </ArkSlider.Thumb>\n ))}\n </ArkSlider.Control>\n </ArkSlider.Root>\n </FieldWrapper>\n )\n}\n\nexport default Slider\n\nexport const SliderValueMeta = ({ children }: PropsWithChildren) => {\n return <span className=\"cobalt-slider__value-meta\">{children}</span>\n}\n"],"names":["ArkSlider"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@drivy/cobalt",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.3",
|
|
4
4
|
"description": "Opinionated design system for Drivy's projects.",
|
|
5
5
|
"main": "src/index.js",
|
|
6
6
|
"types": "types/src/index.d.ts",
|
|
@@ -89,7 +89,7 @@
|
|
|
89
89
|
"rollup-plugin-copy": "3.5.0",
|
|
90
90
|
"rollup-plugin-svgo": "2.0.0",
|
|
91
91
|
"rollup-plugin-typescript2": "0.36.0",
|
|
92
|
-
"sass": "1.
|
|
92
|
+
"sass": "1.84.0",
|
|
93
93
|
"sass-loader": "13.3.3",
|
|
94
94
|
"sharp": "0.33.5",
|
|
95
95
|
"sharp-cli": "5.1.0",
|
|
@@ -23,6 +23,6 @@ export type SliderPropsType<T extends number | number[]> = {
|
|
|
23
23
|
renderValue?: (value: T, status: FieldWrapperProps["status"]) => React.ReactElement;
|
|
24
24
|
onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
|
|
25
25
|
} & FieldWrapperProps & Omit<SliderRootProps, "value" | "defaultValue" | "onValueChange">;
|
|
26
|
-
declare const Slider: <T extends number | number[]>({ defaultValue: _defaultValue, value: _value, min, max, disabled, onValueChange, renderValue, ariaLabel, hint, label, status, ...restProps }: SliderPropsType<T>) => React.JSX.Element;
|
|
26
|
+
declare const Slider: <T extends number | number[]>({ defaultValue: _defaultValue, value: _value, min, max, disabled, onValueChange, renderValue, ariaLabel, hint, label, status, className, ...restProps }: SliderPropsType<T>) => React.JSX.Element;
|
|
27
27
|
export default Slider;
|
|
28
28
|
export declare const SliderValueMeta: ({ children }: PropsWithChildren) => React.JSX.Element;
|