@ketvietlab/design-system 0.1.6 → 0.1.7
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/README.md +111 -11
- package/dist/catalogue/catalogue.css +41 -34
- package/dist/catalogue/index.d.ts.map +1 -1
- package/dist/catalogue/index.js +413 -55
- package/dist/catalogue/index.js.map +1 -1
- package/dist/catalogue/page-surfaces.d.ts.map +1 -1
- package/dist/catalogue/page-surfaces.js +8 -6
- package/dist/catalogue/page-surfaces.js.map +1 -1
- package/dist/contract/index.d.ts.map +1 -1
- package/dist/contract/index.js +4 -0
- package/dist/contract/index.js.map +1 -1
- package/dist/foundations/tokens.css +2 -1
- package/dist/index.d.ts +3 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -0
- package/dist/index.js.map +1 -1
- package/dist/layouts/flat.css +74 -0
- package/dist/layouts/grouped.css +126 -0
- package/dist/layouts/index.d.ts +3 -1
- package/dist/layouts/index.d.ts.map +1 -1
- package/dist/layouts/index.js +5 -2
- package/dist/layouts/index.js.map +1 -1
- package/dist/layouts/layouts.css +44 -7
- package/dist/layouts/shell.css +16 -2
- package/dist/layouts/shell.d.ts.map +1 -1
- package/dist/layouts/shell.js +1 -1
- package/dist/layouts/shell.js.map +1 -1
- package/dist/patterns/data-table.d.ts +50 -2
- package/dist/patterns/data-table.d.ts.map +1 -1
- package/dist/patterns/data-table.js +57 -3
- package/dist/patterns/data-table.js.map +1 -1
- package/dist/patterns/list-chrome.d.ts +80 -0
- package/dist/patterns/list-chrome.d.ts.map +1 -0
- package/dist/patterns/list-chrome.js +45 -0
- package/dist/patterns/list-chrome.js.map +1 -0
- package/dist/patterns/modal-sheet.d.ts +6 -1
- package/dist/patterns/modal-sheet.d.ts.map +1 -1
- package/dist/patterns/modal-sheet.js +5 -1
- package/dist/patterns/modal-sheet.js.map +1 -1
- package/dist/patterns/patterns.css +937 -131
- package/dist/patterns/record-page.d.ts +2 -2
- package/dist/patterns/record-page.d.ts.map +1 -1
- package/dist/patterns/record-page.js +1 -1
- package/dist/patterns/record-page.js.map +1 -1
- package/dist/primitives/actions.d.ts.map +1 -1
- package/dist/primitives/actions.js +1 -1
- package/dist/primitives/actions.js.map +1 -1
- package/dist/primitives/field.d.ts +16 -3
- package/dist/primitives/field.d.ts.map +1 -1
- package/dist/primitives/field.js +18 -5
- package/dist/primitives/field.js.map +1 -1
- package/dist/primitives/navigation.css +1 -1
- package/dist/primitives/primitives.css +82 -6
- package/dist/primitives/progress.js +1 -1
- package/dist/primitives/progress.js.map +1 -1
- package/dist/styles.css +2 -0
- package/package.json +2 -2
|
@@ -23,8 +23,8 @@ export type RecordPageProps = {
|
|
|
23
23
|
asideLabel?: string | null;
|
|
24
24
|
slots?: RecordPageSlots;
|
|
25
25
|
};
|
|
26
|
-
type
|
|
27
|
-
export declare const recordPage: (props: RecordPageProps, compatibilityKind?:
|
|
26
|
+
type RecordPageKind = Extract<PageIdentityKind, 'record-page' | 'form-page'>;
|
|
27
|
+
export declare const recordPage: (props: RecordPageProps, compatibilityKind?: RecordPageKind) => TemplateResult;
|
|
28
28
|
/** One durable subject: create, edit, inspect or advance its workflow. */
|
|
29
29
|
export declare const RecordPage: (props: RecordPageProps) => TemplateResult;
|
|
30
30
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"record-page.d.ts","sourceRoot":"","sources":["../../../../../packages/design-system/src/patterns/record-page.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AACtE,OAAO,EAAuB,KAAK,gBAAgB,EAAE,MAAM,kBAAkB,CAAA;AAE7E,eAAO,MAAM,KAAK,YAChB,aAAa,EACb,qBAAqB,EACrB,oBAAoB,EACpB,uBAAuB,EACvB,qBAAqB,EACrB,mBAAmB,EACnB,qBAAqB,EACrB,oBAAoB,EACpB,yBAAyB,EACzB,qBAAqB,EACrB,kBAAkB,EAClB,wBAAwB,EACxB,wBAAwB,EACxB,oBAAoB,EACpB,kBAAkB,EAClB,mBAAmB,CACX,CAAA;AAEV,MAAM,MAAM,eAAe,GAAG;IAC5B,MAAM,EAAE,MAAM,CAAA;IACd,IAAI,EAAE,MAAM,CAAA;IACZ,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA;AAED,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,QAAQ,CAAA;IACd,OAAO,CAAC,EAAE,QAAQ,CAAA;IAClB,OAAO,CAAC,EAAE,aAAa,CAAA;IACvB,KAAK,CAAC,EAAE,SAAS,GAAG,MAAM,CAAA;IAC1B,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,MAAM,CAAC,EAAE,QAAQ,CAAA;IACjB,OAAO,CAAC,EAAE,QAAQ,CAAA;IAClB,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,UAAU,CAAC,EAAE,QAAQ,CAAA;IACrB,UAAU,CAAC,EAAE,QAAQ,CAAA;IACrB,KAAK,CAAC,EAAE,QAAQ,CAAA;IAChB,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC1B,KAAK,CAAC,EAAE,eAAe,CAAA;CACxB,CAAA;AAED,KAAK,
|
|
1
|
+
{"version":3,"file":"record-page.d.ts","sourceRoot":"","sources":["../../../../../packages/design-system/src/patterns/record-page.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AACtE,OAAO,EAAuB,KAAK,gBAAgB,EAAE,MAAM,kBAAkB,CAAA;AAE7E,eAAO,MAAM,KAAK,YAChB,aAAa,EACb,qBAAqB,EACrB,oBAAoB,EACpB,uBAAuB,EACvB,qBAAqB,EACrB,mBAAmB,EACnB,qBAAqB,EACrB,oBAAoB,EACpB,yBAAyB,EACzB,qBAAqB,EACrB,kBAAkB,EAClB,wBAAwB,EACxB,wBAAwB,EACxB,oBAAoB,EACpB,kBAAkB,EAClB,mBAAmB,CACX,CAAA;AAEV,MAAM,MAAM,eAAe,GAAG;IAC5B,MAAM,EAAE,MAAM,CAAA;IACd,IAAI,EAAE,MAAM,CAAA;IACZ,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA;AAED,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,QAAQ,CAAA;IACd,OAAO,CAAC,EAAE,QAAQ,CAAA;IAClB,OAAO,CAAC,EAAE,aAAa,CAAA;IACvB,KAAK,CAAC,EAAE,SAAS,GAAG,MAAM,CAAA;IAC1B,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,MAAM,CAAC,EAAE,QAAQ,CAAA;IACjB,OAAO,CAAC,EAAE,QAAQ,CAAA;IAClB,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,UAAU,CAAC,EAAE,QAAQ,CAAA;IACrB,UAAU,CAAC,EAAE,QAAQ,CAAA;IACrB,KAAK,CAAC,EAAE,QAAQ,CAAA;IAChB,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC1B,KAAK,CAAC,EAAE,eAAe,CAAA;CACxB,CAAA;AAED,KAAK,cAAc,GAAG,OAAO,CAAC,gBAAgB,EAAE,aAAa,GAAG,WAAW,CAAC,CAAA;AAE5E,eAAO,MAAM,UAAU,UAAW,eAAe,sBAAsB,cAAc,KAAG,cAsCvF,CAAA;AAED,0EAA0E;AAC1E,eAAO,MAAM,UAAU,UAAW,eAAe,KAAG,cAAmC,CAAA"}
|
|
@@ -19,7 +19,7 @@ export const HOOKS = [
|
|
|
19
19
|
'record-page-aside',
|
|
20
20
|
];
|
|
21
21
|
export const recordPage = (props, compatibilityKind) => {
|
|
22
|
-
const kind = compatibilityKind ?? '
|
|
22
|
+
const kind = compatibilityKind ?? 'record-page';
|
|
23
23
|
if (props.slots?.fragmentTitle !== undefined)
|
|
24
24
|
return (_jsxs("ket-fragments", { "data-title": props.slots.fragmentTitle, children: [_jsx("template", { "data-ket-slot": props.slots.header, children: pageIdentityContent(kind, { ...props, groupDescription: true }) }), _jsx("template", { "data-ket-slot": props.slots.body, children: props.body })] }));
|
|
25
25
|
return (_jsxs("section", { "data-ui": kind, "data-scope": props.scope ?? null, "data-has-aside": String(props.aside !== undefined), "data-variant": props.variant ?? null, "data-width": props.width ?? 'default', "data-pattern": "record", children: [props.context !== undefined && _jsx("div", { "data-ui": `${kind}-context`, children: props.context }), _jsx("header", { "data-ui": `${kind}-header`, "data-ket-slot": props.slots?.header, children: pageIdentityContent(kind, { ...props, groupDescription: true }) }), props.controller !== undefined && _jsx("div", { "data-ui": `${kind}-controller`, children: props.controller }), props.navigation !== undefined && _jsx("div", { "data-ui": `${kind}-navigation`, children: props.navigation }), _jsxs("div", { "data-ui": `${kind}-layout`, children: [_jsx("div", { "data-ui": `${kind}-body`, "data-ket-slot": props.slots?.body, children: props.body }), props.aside !== undefined && (_jsx("aside", { "data-ui": `${kind}-aside`, "aria-label": props.asideLabel ?? null, children: props.aside }))] })] }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"record-page.js","sourceRoot":"","sources":["../../../../../../packages/design-system/src/patterns/record-page.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,mBAAmB,EAAyB,MAAM,iBAAkB,CAAA;AAE7E,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,aAAa;IACb,qBAAqB;IACrB,oBAAoB;IACpB,uBAAuB;IACvB,qBAAqB;IACrB,mBAAmB;IACnB,qBAAqB;IACrB,oBAAoB;IACpB,yBAAyB;IACzB,qBAAqB;IACrB,kBAAkB;IAClB,wBAAwB;IACxB,wBAAwB;IACxB,oBAAoB;IACpB,kBAAkB;IAClB,mBAAmB;CACX,CAAA;AA4BV,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,KAAsB,EAAE,
|
|
1
|
+
{"version":3,"file":"record-page.js","sourceRoot":"","sources":["../../../../../../packages/design-system/src/patterns/record-page.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,mBAAmB,EAAyB,MAAM,iBAAkB,CAAA;AAE7E,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,aAAa;IACb,qBAAqB;IACrB,oBAAoB;IACpB,uBAAuB;IACvB,qBAAqB;IACrB,mBAAmB;IACnB,qBAAqB;IACrB,oBAAoB;IACpB,yBAAyB;IACzB,qBAAqB;IACrB,kBAAkB;IAClB,wBAAwB;IACxB,wBAAwB;IACxB,oBAAoB;IACpB,kBAAkB;IAClB,mBAAmB;CACX,CAAA;AA4BV,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,KAAsB,EAAE,iBAAkC,EAAkB,EAAE;IACvG,MAAM,IAAI,GAAG,iBAAiB,IAAI,aAAa,CAAA;IAC/C,IAAI,KAAK,CAAC,KAAK,EAAE,aAAa,KAAK,SAAS;QAC1C,OAAO,CACL,uCAA2B,KAAK,CAAC,KAAK,CAAC,aAAa,aAClD,oCAAyB,KAAK,CAAC,KAAK,CAAC,MAAM,YACxC,mBAAmB,CAAC,IAAI,EAAE,EAAE,GAAG,KAAK,EAAE,gBAAgB,EAAE,IAAI,EAAE,CAAC,GACvD,EACX,oCAAyB,KAAK,CAAC,KAAK,CAAC,IAAI,YAAG,KAAK,CAAC,IAAI,GAAY,IACpD,CACjB,CAAA;IACH,OAAO,CACL,8BACW,IAAI,gBACD,KAAK,CAAC,KAAK,IAAI,IAAI,oBACf,MAAM,CAAC,KAAK,CAAC,KAAK,KAAK,SAAS,CAAC,kBACnC,KAAK,CAAC,OAAO,IAAI,IAAI,gBACvB,KAAK,CAAC,KAAK,IAAI,SAAS,kBACvB,QAAQ,aAEpB,KAAK,CAAC,OAAO,KAAK,SAAS,IAAI,yBAAc,GAAG,IAAI,UAAU,YAAG,KAAK,CAAC,OAAO,GAAO,EACtF,4BAAiB,GAAG,IAAI,SAAS,mBAAiB,KAAK,CAAC,KAAK,EAAE,MAAM,YAClE,mBAAmB,CAAC,IAAI,EAAE,EAAE,GAAG,KAAK,EAAE,gBAAgB,EAAE,IAAI,EAAE,CAAC,GACzD,EACR,KAAK,CAAC,UAAU,KAAK,SAAS,IAAI,yBAAc,GAAG,IAAI,aAAa,YAAG,KAAK,CAAC,UAAU,GAAO,EAC9F,KAAK,CAAC,UAAU,KAAK,SAAS,IAAI,yBAAc,GAAG,IAAI,aAAa,YAAG,KAAK,CAAC,UAAU,GAAO,EAC/F,0BAAc,GAAG,IAAI,SAAS,aAC5B,yBAAc,GAAG,IAAI,OAAO,mBAAiB,KAAK,CAAC,KAAK,EAAE,IAAI,YAC3D,KAAK,CAAC,IAAI,GACP,EACL,KAAK,CAAC,KAAK,KAAK,SAAS,IAAI,CAC5B,2BAAgB,GAAG,IAAI,QAAQ,gBAAc,KAAK,CAAC,UAAU,IAAI,IAAI,YAClE,KAAK,CAAC,KAAK,GACN,CACT,IACG,IACE,CACX,CAAA;AACH,CAAC,CAAA;AAED,0EAA0E;AAC1E,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,KAAsB,EAAkB,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"actions.d.ts","sourceRoot":"","sources":["../../../../../packages/design-system/src/primitives/actions.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAEtE,eAAO,MAAM,KAAK,YAAI,QAAQ,EAAE,gBAAgB,EAAE,cAAc,EAAE,gBAAgB,EAAE,cAAc,CAAU,CAAA;AAE5G,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,aAAa,CAAA;AAChF,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,SAAS,GAAG,WAAW,CAAA;AAE5D,KAAK,UAAU,GAAG;IAChB,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,aAAa,CAAA;IACvB,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,OAAO,CAAC,EAAE,QAAQ,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CAC5B,CAAA;AAED,MAAM,MAAM,WAAW,GAAG,UAAU,GAAG;IACrC,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAA;IACpC,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CACrB,CAAA;AAED,MAAM,MAAM,eAAe,GAAG,UAAU,GAAG;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,CAAA;AAC3D,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,GAAG;IAC3D,IAAI,EAAE,QAAQ,CAAA;IACd,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AAcD,eAAO,MAAM,MAAM,UAAW,WAAW,KAAG,cAe3C,CAAA;AAED,sEAAsE;AACtE,eAAO,MAAM,UAAU,UAAW,eAAe,KAAG,cAmBnD,CAAA;AAED,eAAO,MAAM,UAAU,UAAW,eAAe,KAAG,
|
|
1
|
+
{"version":3,"file":"actions.d.ts","sourceRoot":"","sources":["../../../../../packages/design-system/src/primitives/actions.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAEtE,eAAO,MAAM,KAAK,YAAI,QAAQ,EAAE,gBAAgB,EAAE,cAAc,EAAE,gBAAgB,EAAE,cAAc,CAAU,CAAA;AAE5G,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,aAAa,CAAA;AAChF,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,SAAS,GAAG,WAAW,CAAA;AAE5D,KAAK,UAAU,GAAG;IAChB,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,aAAa,CAAA;IACvB,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,OAAO,CAAC,EAAE,QAAQ,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CAC5B,CAAA;AAED,MAAM,MAAM,WAAW,GAAG,UAAU,GAAG;IACrC,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAA;IACpC,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CACrB,CAAA;AAED,MAAM,MAAM,eAAe,GAAG,UAAU,GAAG;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,CAAA;AAC3D,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,GAAG;IAC3D,IAAI,EAAE,QAAQ,CAAA;IACd,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AAcD,eAAO,MAAM,MAAM,UAAW,WAAW,KAAG,cAe3C,CAAA;AAED,sEAAsE;AACtE,eAAO,MAAM,UAAU,UAAW,eAAe,KAAG,cAmBnD,CAAA;AAED,eAAO,MAAM,UAAU,UAAW,eAAe,KAAG,cAuBjD,CAAA;AAEH,eAAO,MAAM,WAAW,UAAW;IACjC,OAAO,EAAE,SAAS,QAAQ,EAAE,CAAA;IAC5B,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CACtB,KAAG,cAUH,CAAA"}
|
|
@@ -5,6 +5,6 @@ const ActionContent = (props) => (_jsxs(_Fragment, { children: [props.loading ==
|
|
|
5
5
|
export const Button = (props) => (_jsx("button", { "data-ui": "action", "data-variant": props.variant ?? 'secondary', "data-size": props.size ?? 'default', type: props.type ?? 'button', name: props.name ?? null, value: props.value ?? null, form: props.form ?? null, disabled: props.disabled === true || props.loading === true, "aria-busy": props.loading === true ? 'true' : null, "aria-describedby": props.describedBy ?? null, children: _jsx(ActionContent, { ...props }) }));
|
|
6
6
|
/** An icon-only action with a visible tooltip and accessible name. */
|
|
7
7
|
export const IconButton = (props) => (_jsx("button", { "data-ui": "action", "data-icon-only": "true", "data-variant": props.variant ?? 'tertiary', "data-size": props.size ?? 'default', type: props.type ?? 'button', name: props.name ?? null, value: props.value ?? null, form: props.form ?? null, disabled: props.disabled === true || props.loading === true, "aria-label": props.label, "aria-pressed": props.pressed === undefined ? null : String(props.pressed), "aria-busy": props.loading === true ? 'true' : null, "aria-describedby": props.describedBy ?? null, title: props.label, children: _jsx(ActionContent, { ...props, leading: props.icon, iconOnly: true }) }));
|
|
8
|
-
export const LinkButton = (props) => props.disabled ? (_jsx("button", { "data-ui": "action", "data-variant": props.variant ?? 'secondary', "data-size": props.size ?? 'default', type: "button", disabled: true, "aria-describedby": props.describedBy ?? null, children: _jsx(ActionContent, { ...props }) })) : (_jsx("a", { "data-ui": "action", "data-variant": props.variant ?? 'secondary', "data-size": props.size ?? 'default', href: props.href, "aria-describedby": props.describedBy ?? null, children: _jsx(ActionContent, { ...props }) }));
|
|
8
|
+
export const LinkButton = (props) => props.disabled || props.loading ? (_jsx("button", { "data-ui": "action", "data-variant": props.variant ?? 'secondary', "data-size": props.size ?? 'default', type: "button", disabled: true, "aria-busy": props.loading === true ? 'true' : null, "aria-describedby": props.describedBy ?? null, children: _jsx(ActionContent, { ...props }) })) : (_jsx("a", { "data-ui": "action", "data-variant": props.variant ?? 'secondary', "data-size": props.size ?? 'default', href: props.href, "aria-describedby": props.describedBy ?? null, children: _jsx(ActionContent, { ...props }) }));
|
|
9
9
|
export const ActionGroup = (props) => (_jsx("div", { "data-ui": "action-group", role: "group", "aria-label": props.label ?? null, children: each(props.actions, (_, index) => index, (action) => (_jsx(_Fragment, { children: action }))) }));
|
|
10
10
|
//# sourceMappingURL=actions.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"actions.js","sourceRoot":"","sources":["../../../../../../packages/design-system/src/primitives/actions.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAA;AAG7C,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,QAAQ,EAAE,gBAAgB,EAAE,cAAc,EAAE,gBAAgB,EAAE,cAAc,CAAU,CAAA;AA4B5G,MAAM,aAAa,GAAG,CAAC,KAA0C,EAAkB,EAAE,CAAC,CACpF,8BACG,KAAK,CAAC,OAAO,KAAK,IAAI,IAAI,0BAAc,gBAAgB,iBAAa,MAAM,GAAG,EAC9E,KAAK,CAAC,OAAO,KAAK,IAAI,IAAI,KAAK,CAAC,OAAO,KAAK,SAAS,IAAI,CACxD,0BAAc,gBAAgB,iBAAa,MAAM,YAC9C,KAAK,CAAC,OAAO,GACT,CACR,EACA,CAAC,KAAK,CAAC,QAAQ,IAAI,0BAAc,cAAc,YAAE,KAAK,CAAC,KAAK,GAAQ,IACpE,CACJ,CAAA;AAED,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,KAAkB,EAAkB,EAAE,CAAC,CAC5D,4BACU,QAAQ,kBACF,KAAK,CAAC,OAAO,IAAI,WAAW,eAC/B,KAAK,CAAC,IAAI,IAAI,SAAS,EAClC,IAAI,EAAE,KAAK,CAAC,IAAI,IAAI,QAAQ,EAC5B,IAAI,EAAE,KAAK,CAAC,IAAI,IAAI,IAAI,EACxB,KAAK,EAAE,KAAK,CAAC,KAAK,IAAI,IAAI,EAC1B,IAAI,EAAE,KAAK,CAAC,IAAI,IAAI,IAAI,EACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ,KAAK,IAAI,IAAI,KAAK,CAAC,OAAO,KAAK,IAAI,eAChD,KAAK,CAAC,OAAO,KAAK,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,sBAC/B,KAAK,CAAC,WAAW,IAAI,IAAI,YAE3C,KAAC,aAAa,OAAK,KAAK,GAAI,GACrB,CACV,CAAA;AAED,sEAAsE;AACtE,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,KAAsB,EAAkB,EAAE,CAAC,CACpE,4BACU,QAAQ,oBACD,MAAM,kBACP,KAAK,CAAC,OAAO,IAAI,UAAU,eAC9B,KAAK,CAAC,IAAI,IAAI,SAAS,EAClC,IAAI,EAAE,KAAK,CAAC,IAAI,IAAI,QAAQ,EAC5B,IAAI,EAAE,KAAK,CAAC,IAAI,IAAI,IAAI,EACxB,KAAK,EAAE,KAAK,CAAC,KAAK,IAAI,IAAI,EAC1B,IAAI,EAAE,KAAK,CAAC,IAAI,IAAI,IAAI,EACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ,KAAK,IAAI,IAAI,KAAK,CAAC,OAAO,KAAK,IAAI,gBAC/C,KAAK,CAAC,KAAK,kBACT,KAAK,CAAC,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,eAC7D,KAAK,CAAC,OAAO,KAAK,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,sBAC/B,KAAK,CAAC,WAAW,IAAI,IAAI,EAC3C,KAAK,EAAE,KAAK,CAAC,KAAK,YAElB,KAAC,aAAa,OAAK,KAAK,EAAE,OAAO,EAAE,KAAK,CAAC,IAAI,EAAE,QAAQ,SAAG,GACnD,CACV,CAAA;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,KAAsB,EAAkB,EAAE,CACnE,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,
|
|
1
|
+
{"version":3,"file":"actions.js","sourceRoot":"","sources":["../../../../../../packages/design-system/src/primitives/actions.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,22 +1,35 @@
|
|
|
1
|
-
import type { TemplateResult } from '@ketvietlab/ketjs-view';
|
|
2
|
-
export declare const HOOKS: readonly ['field', 'field-label', 'field-required', 'field-control', 'field-options', 'field-option', 'field-help', 'field-error'];
|
|
1
|
+
import type { JSXChild, TemplateResult } from '@ketvietlab/ketjs-view';
|
|
2
|
+
export declare const HOOKS: readonly ['field', 'field-label', 'field-required', 'field-control', 'field-options', 'field-option', 'field-option-input', 'field-help', 'field-error'];
|
|
3
3
|
export type FieldOption = {
|
|
4
4
|
value: string;
|
|
5
5
|
label: string;
|
|
6
|
+
name?: string;
|
|
7
|
+
checked?: boolean;
|
|
8
|
+
disabled?: boolean;
|
|
6
9
|
};
|
|
7
10
|
export type FieldProps = {
|
|
11
|
+
/** Nested fields for a collapsible group inside a larger record form. */
|
|
12
|
+
fields?: readonly FieldProps[];
|
|
13
|
+
open?: boolean;
|
|
8
14
|
id: string;
|
|
9
15
|
name: string;
|
|
10
16
|
label: string;
|
|
11
|
-
|
|
17
|
+
/** A trusted, progressively enhanced control such as a relation selector. */
|
|
18
|
+
control?: JSXChild;
|
|
19
|
+
type?: 'text' | 'email' | 'tel' | 'number' | 'decimal' | 'password' | 'time' | 'color' | 'date' | 'datetime-local' | 'month' | 'week' | 'select' | 'textarea' | 'checkbox' | 'checkbox-group' | 'radio';
|
|
12
20
|
value?: string | number | boolean | null;
|
|
13
21
|
placeholder?: string | null;
|
|
14
22
|
required?: boolean;
|
|
15
23
|
disabled?: boolean;
|
|
24
|
+
readOnly?: boolean;
|
|
25
|
+
min?: string | number;
|
|
26
|
+
max?: string | number;
|
|
16
27
|
help?: string | null;
|
|
17
28
|
error?: string | null;
|
|
18
29
|
options?: readonly FieldOption[];
|
|
19
30
|
span?: 'half' | 'full';
|
|
31
|
+
step?: string | null;
|
|
32
|
+
autocomplete?: string | null;
|
|
20
33
|
};
|
|
21
34
|
export declare const Field: (props: FieldProps) => TemplateResult;
|
|
22
35
|
//# sourceMappingURL=field.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"field.d.ts","sourceRoot":"","sources":["../../../../../packages/design-system/src/primitives/field.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;
|
|
1
|
+
{"version":3,"file":"field.d.ts","sourceRoot":"","sources":["../../../../../packages/design-system/src/primitives/field.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAGtE,eAAO,MAAM,KAAK,YAChB,OAAO,EACP,aAAa,EACb,gBAAgB,EAChB,eAAe,EACf,eAAe,EACf,cAAc,EACd,oBAAoB,EACpB,YAAY,EACZ,aAAa,CACL,CAAA;AAEV,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AACD,MAAM,MAAM,UAAU,GAAG;IACvB,yEAAyE;IACzE,MAAM,CAAC,EAAE,SAAS,UAAU,EAAE,CAAA;IAC9B,IAAI,CAAC,EAAE,OAAO,CAAA;IAEd,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;IACb,6EAA6E;IAC7E,OAAO,CAAC,EAAE,QAAQ,CAAA;IAClB,IAAI,CAAC,EACD,MAAM,GACN,OAAO,GACP,KAAK,GACL,QAAQ,GACR,SAAS,GACT,UAAU,GACV,MAAM,GACN,OAAO,GACP,MAAM,GACN,gBAAgB,GAChB,OAAO,GACP,MAAM,GACN,QAAQ,GACR,UAAU,GACV,UAAU,GACV,gBAAgB,GAChB,OAAO,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,CAAA;IACxC,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACrB,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACrB,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,OAAO,CAAC,EAAE,SAAS,WAAW,EAAE,CAAA;IAChC,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACtB,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CAC7B,CAAA;AAsED,eAAO,MAAM,KAAK,UAAW,UAAU,KAAG,cAgLzC,CAAA"}
|
package/dist/primitives/field.js
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "@ketvietlab/ketjs-view/jsx-runtime";
|
|
1
|
+
import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "@ketvietlab/ketjs-view/jsx-runtime";
|
|
2
2
|
import { each } from '@ketvietlab/ketjs-view';
|
|
3
|
+
import { Disclosure } from '../layouts/index.js';
|
|
3
4
|
export const HOOKS = [
|
|
4
5
|
'field',
|
|
5
6
|
'field-label',
|
|
@@ -7,23 +8,35 @@ export const HOOKS = [
|
|
|
7
8
|
'field-control',
|
|
8
9
|
'field-options',
|
|
9
10
|
'field-option',
|
|
11
|
+
'field-option-input',
|
|
10
12
|
'field-help',
|
|
11
13
|
'field-error',
|
|
12
14
|
];
|
|
13
15
|
const Control = (props, describedBy) => {
|
|
16
|
+
if (props.control !== undefined)
|
|
17
|
+
return _jsx(_Fragment, { children: props.control });
|
|
14
18
|
if (props.type === 'textarea')
|
|
15
|
-
return (_jsx("textarea", { "data-ui": "field-control", id: props.id, name: props.name, placeholder: props.placeholder ?? null, required: props.required === true, disabled: props.disabled === true, "aria-invalid": props.error ? 'true' : null, "aria-describedby": describedBy, children: String(props.value ?? '') }));
|
|
19
|
+
return (_jsx("textarea", { "data-ui": "field-control", id: props.id, name: props.name, placeholder: props.placeholder ?? null, required: props.required === true, disabled: props.disabled === true, readonly: props.readOnly === true, "aria-invalid": props.error ? 'true' : null, "aria-describedby": describedBy, children: String(props.value ?? '') }));
|
|
16
20
|
if (props.type === 'select')
|
|
17
|
-
return (_jsx("select", { "data-ui": "field-control", id: props.id, name: props.name, required: props.required === true, disabled: props.disabled === true, "aria-invalid": props.error ? 'true' : null, "aria-describedby": describedBy, children: each(props.options ?? [], (option) => option.value, (option) => (_jsx("option", { value: option.value, selected: String(props.value ?? '') === option.value, children: option.label }))) }));
|
|
18
|
-
return (_jsx("input", { "data-ui": "field-control", id: props.id, type: props.type ?? 'text', name: props.name, value: props.type === 'checkbox' ? '1' : String(props.value ?? ''), checked: props.type === 'checkbox' && (props.value === true || props.value === '1'), placeholder: props.placeholder ?? null, required: props.required === true, disabled: props.disabled === true, "aria-invalid": props.error ? 'true' : null, "aria-describedby": describedBy, autocomplete:
|
|
21
|
+
return (_jsx("select", { "data-ui": "field-control", id: props.id, name: props.name, required: props.required === true, disabled: props.disabled === true, "aria-invalid": props.error ? 'true' : null, "aria-describedby": describedBy, children: each(props.options ?? [], (option) => option.value, (option) => (_jsx("option", { value: option.value, selected: String(props.value ?? '') === option.value, disabled: option.disabled === true, children: option.label }))) }));
|
|
22
|
+
return (_jsx("input", { "data-ui": "field-control", id: props.id, type: props.type === 'decimal' ? 'number' : (props.type ?? 'text'), name: props.name, value: props.type === 'checkbox' ? '1' : String(props.value ?? ''), checked: props.type === 'checkbox' && (props.value === true || props.value === '1'), placeholder: props.placeholder ?? null, required: props.required === true, disabled: props.disabled === true, readonly: props.readOnly === true, min: props.min, max: props.max, "aria-invalid": props.error ? 'true' : null, "aria-describedby": describedBy, autocomplete: props.autocomplete ?? 'off', step: props.type === 'decimal' ? (props.step ?? 'any') : (props.step ?? null) }));
|
|
19
23
|
};
|
|
24
|
+
const hasError = (props) => !!props.error || (props.fields?.some(hasError) ?? false);
|
|
20
25
|
export const Field = (props) => {
|
|
21
26
|
const helpId = props.help ? `${props.id}-help` : null;
|
|
22
27
|
const errorId = props.error ? `${props.id}-error` : null;
|
|
23
28
|
const describedBy = [helpId, errorId].filter(Boolean).join(' ') || null;
|
|
24
29
|
const label = (_jsxs("span", { "data-ui": "field-label", children: [props.label, props.required && (_jsx("span", { "data-ui": "field-required", "aria-hidden": "true", children: ' *' }))] }));
|
|
30
|
+
if (props.fields)
|
|
31
|
+
return (_jsxs("div", { "data-ui": "field", "data-kind": "group", "data-span": "full", "data-invalid": String(!!props.error), children: [_jsx(Disclosure, { summary: props.label, open: props.open || hasError(props), body: _jsx("div", { "data-ui": "form-grid", children: each(props.fields.map((field) => ({
|
|
32
|
+
...field,
|
|
33
|
+
disabled: props.disabled || field.disabled,
|
|
34
|
+
readOnly: props.readOnly || field.readOnly,
|
|
35
|
+
})), (field) => field.id, (field) => (_jsx(Field, { ...field }))) }) }), !!props.help && (_jsx("small", { "data-ui": "field-help", id: helpId ?? undefined, children: props.help })), !!props.error && (_jsx("small", { "data-ui": "field-error", id: errorId ?? undefined, children: props.error }))] }));
|
|
36
|
+
if (props.type === 'checkbox-group')
|
|
37
|
+
return (_jsxs("div", { "data-ui": "field", "data-kind": "checkbox-group", "data-span": props.span ?? 'half', "data-invalid": String(!!props.error), children: [_jsxs("span", { "data-ui": "field-label", id: `${props.id}-label`, children: [props.label, props.required && (_jsx("span", { "data-ui": "field-required", "aria-hidden": "true", children: ' *' }))] }), _jsx("div", { "data-ui": "field-options", role: "group", "aria-labelledby": `${props.id}-label`, children: each(props.options ?? [], (option) => option.name ?? option.value, (option) => (_jsxs("label", { "data-ui": "field-option", children: [_jsx("input", { "data-ui": "field-option-input", type: "checkbox", name: option.name ?? `${props.name}[]`, value: option.value, checked: option.checked === true, disabled: props.disabled === true || option.disabled === true, "aria-invalid": props.error ? 'true' : null, "aria-describedby": describedBy, autocomplete: "off" }), _jsx("span", { children: option.label })] }))) }), !!props.help && (_jsx("small", { "data-ui": "field-help", id: helpId ?? undefined, children: props.help })), !!props.error && (_jsx("small", { "data-ui": "field-error", id: errorId ?? undefined, children: props.error }))] }));
|
|
25
38
|
if (props.type === 'radio')
|
|
26
|
-
return (_jsxs("
|
|
39
|
+
return (_jsxs("div", { "data-ui": "field", "data-kind": "radio", "data-span": props.span ?? 'half', "data-invalid": String(!!props.error), children: [_jsxs("span", { "data-ui": "field-label", id: `${props.id}-label`, children: [props.label, props.required && (_jsx("span", { "data-ui": "field-required", "aria-hidden": "true", children: ' *' }))] }), _jsx("div", { "data-ui": "field-options", role: "radiogroup", "aria-labelledby": `${props.id}-label`, children: each(props.options ?? [], (option) => option.value, (option) => (_jsxs("label", { "data-ui": "field-option", children: [_jsx("input", { "data-ui": "field-option-input", type: "radio", name: props.name, value: option.value, checked: String(props.value ?? '') === option.value, required: props.required === true, disabled: props.disabled === true || option.disabled === true, "aria-invalid": props.error ? 'true' : null, "aria-describedby": describedBy, autocomplete: "off" }), _jsx("span", { children: option.label })] }))) }), !!props.help && (_jsx("small", { "data-ui": "field-help", id: helpId ?? undefined, children: props.help })), !!props.error && (_jsx("small", { "data-ui": "field-error", id: errorId ?? undefined, children: props.error }))] }));
|
|
27
40
|
return (_jsxs("label", { "data-ui": "field", "data-kind": props.type ?? 'text', "data-span": props.span ?? 'half', "data-invalid": String(!!props.error), for: props.id, children: [props.type === 'checkbox' && Control(props, describedBy), label, props.type !== 'checkbox' && Control(props, describedBy), !!props.help && (_jsx("small", { "data-ui": "field-help", id: helpId ?? undefined, children: props.help })), !!props.error && (_jsx("small", { "data-ui": "field-error", id: errorId ?? undefined, children: props.error }))] }));
|
|
28
41
|
};
|
|
29
42
|
//# sourceMappingURL=field.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"field.js","sourceRoot":"","sources":["../../../../../../packages/design-system/src/primitives/field.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAA;
|
|
1
|
+
{"version":3,"file":"field.js","sourceRoot":"","sources":["../../../../../../packages/design-system/src/primitives/field.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
@layer ket.app {
|
|
2
2
|
:where([data-kv-design-system]) [data-ui="action"] {
|
|
3
3
|
display: inline-flex;
|
|
4
|
+
min-width: 0;
|
|
5
|
+
max-width: 100%;
|
|
4
6
|
min-height: var(--kv-control-height);
|
|
5
7
|
align-items: center;
|
|
6
8
|
justify-content: center;
|
|
@@ -42,6 +44,7 @@
|
|
|
42
44
|
:where([data-kv-design-system]) [data-ui="action"][data-variant="primary"]:hover:not(:disabled) {
|
|
43
45
|
border-color: var(--kv-action-primary-hover);
|
|
44
46
|
background: var(--kv-action-primary-hover);
|
|
47
|
+
color: var(--kv-action-primary-ink);
|
|
45
48
|
}
|
|
46
49
|
|
|
47
50
|
:where([data-kv-design-system]) [data-ui="action"][data-variant="primary"]:active:not(:disabled) {
|
|
@@ -86,9 +89,21 @@
|
|
|
86
89
|
|
|
87
90
|
:where([data-kv-design-system]) [data-ui="action"][data-icon-only="true"] {
|
|
88
91
|
width: var(--kv-control-height);
|
|
92
|
+
height: var(--kv-control-height);
|
|
93
|
+
flex: none;
|
|
89
94
|
padding-inline: 0;
|
|
90
95
|
}
|
|
91
96
|
|
|
97
|
+
:where([data-kv-design-system]) [data-ui="action"][data-icon-only="true"][data-size="compact"] {
|
|
98
|
+
width: var(--kv-control-height-compact);
|
|
99
|
+
height: var(--kv-control-height-compact);
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
:where([data-kv-design-system]) [data-ui="action"][data-icon-only="true"][data-size="prominent"] {
|
|
103
|
+
width: var(--kv-control-height-prominent);
|
|
104
|
+
height: var(--kv-control-height-prominent);
|
|
105
|
+
}
|
|
106
|
+
|
|
92
107
|
:where([data-kv-design-system]) [data-ui="action"]:disabled {
|
|
93
108
|
border-color: var(--kv-panel-border);
|
|
94
109
|
background: var(--kv-interactive-disabled);
|
|
@@ -139,7 +154,9 @@
|
|
|
139
154
|
color: var(--kv-text-secondary);
|
|
140
155
|
font-size: var(--kv-text-xs);
|
|
141
156
|
font-weight: var(--kv-weight-medium);
|
|
142
|
-
|
|
157
|
+
max-width: 100%;
|
|
158
|
+
white-space: normal;
|
|
159
|
+
overflow-wrap: anywhere;
|
|
143
160
|
}
|
|
144
161
|
|
|
145
162
|
:where([data-kv-design-system]) [data-ui="badge"][data-tone="info"] {
|
|
@@ -340,7 +357,7 @@
|
|
|
340
357
|
color: var(--kv-color-ink-muted);
|
|
341
358
|
font-size: var(--kv-text-xs);
|
|
342
359
|
font-weight: 750;
|
|
343
|
-
letter-spacing: 0
|
|
360
|
+
letter-spacing: 0;
|
|
344
361
|
text-transform: uppercase;
|
|
345
362
|
}
|
|
346
363
|
|
|
@@ -372,19 +389,56 @@
|
|
|
372
389
|
|
|
373
390
|
:where([data-kv-design-system]) [data-ui="field"] {
|
|
374
391
|
display: grid;
|
|
392
|
+
grid-template-columns: minmax(0, min(35%, 9rem)) minmax(0, 1fr);
|
|
393
|
+
align-items: center;
|
|
394
|
+
align-content: start;
|
|
375
395
|
min-width: 0;
|
|
376
|
-
gap: var(--kv-space-1);
|
|
396
|
+
gap: var(--kv-space-1) var(--kv-space-3);
|
|
377
397
|
margin: 0;
|
|
378
398
|
padding: 0;
|
|
379
399
|
border: 0;
|
|
380
400
|
}
|
|
381
401
|
|
|
382
402
|
:where([data-kv-design-system]) [data-ui="field"][data-kind="checkbox"] {
|
|
383
|
-
|
|
384
|
-
|
|
403
|
+
min-height: var(--kv-control-height);
|
|
404
|
+
}
|
|
405
|
+
|
|
406
|
+
:where([data-kv-design-system]) [data-ui="field"][data-kind="group"] {
|
|
407
|
+
grid-template-columns: minmax(0, 1fr);
|
|
385
408
|
gap: var(--kv-space-2);
|
|
386
409
|
}
|
|
387
410
|
|
|
411
|
+
:where([data-kv-design-system]) [data-ui="field"] > [data-ui="field-label"] {
|
|
412
|
+
grid-column: 1;
|
|
413
|
+
grid-row: 1;
|
|
414
|
+
min-width: 0;
|
|
415
|
+
overflow-wrap: anywhere;
|
|
416
|
+
}
|
|
417
|
+
|
|
418
|
+
:where([data-kv-design-system])
|
|
419
|
+
[data-ui="field"]
|
|
420
|
+
> :is([data-ui="field-control"], [data-ui="field-options"]) {
|
|
421
|
+
grid-column: 2;
|
|
422
|
+
grid-row: 1;
|
|
423
|
+
}
|
|
424
|
+
|
|
425
|
+
:where([data-kv-design-system]) [data-ui="field"] > :is([data-ui="field-help"], [data-ui="field-error"]) {
|
|
426
|
+
grid-column: 2;
|
|
427
|
+
min-width: 0;
|
|
428
|
+
overflow-wrap: anywhere;
|
|
429
|
+
}
|
|
430
|
+
|
|
431
|
+
:where([data-kv-design-system])
|
|
432
|
+
[data-ui="field"][data-kind="group"]
|
|
433
|
+
> :is([data-ui="field-help"], [data-ui="field-error"]) {
|
|
434
|
+
grid-column: 1;
|
|
435
|
+
}
|
|
436
|
+
|
|
437
|
+
:where([data-kv-design-system]) [data-ui="field"][data-kind="textarea"] > [data-ui="field-label"] {
|
|
438
|
+
align-self: start;
|
|
439
|
+
padding-top: var(--kv-space-2);
|
|
440
|
+
}
|
|
441
|
+
|
|
388
442
|
:where([data-kv-design-system]) [data-ui="field-label"] {
|
|
389
443
|
color: var(--kv-text-secondary);
|
|
390
444
|
font-size: var(--kv-text-sm);
|
|
@@ -397,6 +451,7 @@
|
|
|
397
451
|
|
|
398
452
|
:where([data-kv-design-system]) [data-ui="field-control"] {
|
|
399
453
|
width: 100%;
|
|
454
|
+
min-width: 0;
|
|
400
455
|
min-height: var(--kv-control-height);
|
|
401
456
|
padding: 0 var(--kv-space-2-5);
|
|
402
457
|
border: 1px solid var(--kv-field-border);
|
|
@@ -441,12 +496,20 @@
|
|
|
441
496
|
accent-color: var(--kv-color-accent);
|
|
442
497
|
}
|
|
443
498
|
|
|
444
|
-
:where([data-kv-design-system]) [
|
|
499
|
+
:where([data-kv-design-system]) input[type="color"][data-ui="field-control"] {
|
|
500
|
+
min-width: 3rem;
|
|
501
|
+
padding: var(--kv-space-1);
|
|
502
|
+
}
|
|
503
|
+
|
|
504
|
+
:where([data-kv-design-system]) [data-ui="field"][data-invalid="true"] > [data-ui="field-control"] {
|
|
445
505
|
border-color: var(--kv-color-danger);
|
|
446
506
|
}
|
|
447
507
|
|
|
448
508
|
:where([data-kv-design-system]) [data-ui="field-options"] {
|
|
449
509
|
display: flex;
|
|
510
|
+
min-width: 0;
|
|
511
|
+
min-height: var(--kv-control-height);
|
|
512
|
+
align-items: center;
|
|
450
513
|
flex-wrap: wrap;
|
|
451
514
|
gap: var(--kv-space-2);
|
|
452
515
|
}
|
|
@@ -459,11 +522,24 @@
|
|
|
459
522
|
font-size: var(--kv-text-sm);
|
|
460
523
|
}
|
|
461
524
|
|
|
525
|
+
:where([data-kv-design-system]) [data-ui="field-option-input"] {
|
|
526
|
+
width: 1rem;
|
|
527
|
+
min-height: 1rem;
|
|
528
|
+
flex: 0 0 auto;
|
|
529
|
+
accent-color: var(--kv-color-accent);
|
|
530
|
+
}
|
|
531
|
+
|
|
462
532
|
:where([data-kv-design-system]) [data-ui="field-help"] {
|
|
463
533
|
color: var(--kv-color-ink-muted);
|
|
464
534
|
font-size: var(--kv-text-xs);
|
|
465
535
|
}
|
|
466
536
|
|
|
537
|
+
:where([data-kv-design-system])
|
|
538
|
+
[data-ui="field"][data-kind="checkbox"]
|
|
539
|
+
:is([data-ui="field-help"], [data-ui="field-error"]) {
|
|
540
|
+
grid-column: 2;
|
|
541
|
+
}
|
|
542
|
+
|
|
467
543
|
:where([data-kv-design-system]) [data-ui="field-error"] {
|
|
468
544
|
color: var(--kv-color-danger);
|
|
469
545
|
font-size: var(--kv-text-xs);
|
|
@@ -7,7 +7,7 @@ export const HOOKS = [
|
|
|
7
7
|
'progress-bar',
|
|
8
8
|
];
|
|
9
9
|
export const Progress = (props) => {
|
|
10
|
-
const value = Math.max(0, Math.min(100, props.value));
|
|
10
|
+
const value = Number.isFinite(props.value) ? Math.max(0, Math.min(100, props.value)) : 0;
|
|
11
11
|
return (_jsxs("div", { "data-ui": "progress", "data-tone": props.tone ?? 'primary', children: [(props.showValue ?? true) && (_jsxs("div", { "data-ui": "progress-label", children: [_jsx("span", { children: props.label }), _jsx("span", { "data-ui": "progress-value", children: `${value}%` })] })), _jsx("div", { "data-ui": "progress-track", role: "progressbar", "aria-label": props.label, "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": String(value), children: _jsx("span", { "data-ui": "progress-bar", style: `width: ${value}%` }) })] }));
|
|
12
12
|
};
|
|
13
13
|
//# sourceMappingURL=progress.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"progress.js","sourceRoot":"","sources":["../../../../../../packages/design-system/src/primitives/progress.tsx"],"names":[],"mappings":";AAEA,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,UAAU;IACV,gBAAgB;IAChB,gBAAgB;IAChB,gBAAgB;IAChB,cAAc;CACN,CAAA;AAIV,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAKxB,EAAkB,EAAE;IACnB,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAA;
|
|
1
|
+
{"version":3,"file":"progress.js","sourceRoot":"","sources":["../../../../../../packages/design-system/src/primitives/progress.tsx"],"names":[],"mappings":";AAEA,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,UAAU;IACV,gBAAgB;IAChB,gBAAgB;IAChB,gBAAgB;IAChB,cAAc;CACN,CAAA;AAIV,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAKxB,EAAkB,EAAE;IACnB,MAAM,KAAK,GAAG,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;IACxF,OAAO,CACL,0BAAa,UAAU,eAAY,KAAK,CAAC,IAAI,IAAI,SAAS,aACvD,CAAC,KAAK,CAAC,SAAS,IAAI,IAAI,CAAC,IAAI,CAC5B,0BAAa,gBAAgB,aAC3B,yBAAO,KAAK,CAAC,KAAK,GAAQ,EAC1B,0BAAc,gBAAgB,YAAE,GAAG,KAAK,GAAG,GAAQ,IAC/C,CACP,EACD,yBACU,gBAAgB,EACxB,IAAI,EAAC,aAAa,gBACN,KAAK,CAAC,KAAK,mBACT,GAAG,mBACH,KAAK,mBACJ,MAAM,CAAC,KAAK,CAAC,YAE5B,0BAAc,cAAc,EAAC,KAAK,EAAE,UAAU,KAAK,GAAG,GAAI,GACtD,IACF,CACP,CAAA;AACH,CAAC,CAAA"}
|
package/dist/styles.css
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ketvietlab/design-system",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.7",
|
|
4
4
|
"description": "Két Việt's public, server-rendered operational design system.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "MIT",
|
|
@@ -45,7 +45,7 @@
|
|
|
45
45
|
"./catalogue/styles.css": "./dist/catalogue/styles.css"
|
|
46
46
|
},
|
|
47
47
|
"dependencies": {
|
|
48
|
-
"@ketvietlab/ketjs-view": "0.1.
|
|
48
|
+
"@ketvietlab/ketjs-view": "0.1.7"
|
|
49
49
|
},
|
|
50
50
|
"publishConfig": {
|
|
51
51
|
"access": "public",
|