@silo-code/sdk 0.28.1 → 0.29.1
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/AddRow.d.ts +21 -0
- package/dist/AddRow.d.ts.map +1 -0
- package/dist/AddRow.js +24 -0
- package/dist/AddRow.js.map +1 -0
- package/dist/Badge.d.ts +32 -0
- package/dist/Badge.d.ts.map +1 -0
- package/dist/Badge.js +32 -0
- package/dist/Badge.js.map +1 -0
- package/dist/Button.d.ts +29 -0
- package/dist/Button.d.ts.map +1 -0
- package/dist/Button.js +25 -0
- package/dist/Button.js.map +1 -0
- package/dist/Callout.d.ts +26 -0
- package/dist/Callout.d.ts.map +1 -0
- package/dist/Callout.js +26 -0
- package/dist/Callout.js.map +1 -0
- package/dist/CheckboxRow.d.ts +27 -0
- package/dist/CheckboxRow.d.ts.map +1 -0
- package/dist/CheckboxRow.js +24 -0
- package/dist/CheckboxRow.js.map +1 -0
- package/dist/EmptyState.d.ts +40 -0
- package/dist/EmptyState.d.ts.map +1 -0
- package/dist/EmptyState.js +34 -0
- package/dist/EmptyState.js.map +1 -0
- package/dist/IconButton.d.ts +35 -0
- package/dist/IconButton.d.ts.map +1 -0
- package/dist/IconButton.js +31 -0
- package/dist/IconButton.js.map +1 -0
- package/dist/InlineEdit.d.ts +63 -0
- package/dist/InlineEdit.d.ts.map +1 -0
- package/dist/InlineEdit.js +121 -0
- package/dist/InlineEdit.js.map +1 -0
- package/dist/Input.d.ts +26 -0
- package/dist/Input.d.ts.map +1 -0
- package/dist/Input.js +28 -0
- package/dist/Input.js.map +1 -0
- package/dist/List.d.ts +74 -0
- package/dist/List.d.ts.map +1 -0
- package/dist/List.js +104 -0
- package/dist/List.js.map +1 -0
- package/dist/ModalActions.d.ts +40 -0
- package/dist/ModalActions.d.ts.map +1 -0
- package/dist/ModalActions.js +36 -0
- package/dist/ModalActions.js.map +1 -0
- package/dist/RadioGroup.d.ts +55 -0
- package/dist/RadioGroup.d.ts.map +1 -0
- package/dist/RadioGroup.js +60 -0
- package/dist/RadioGroup.js.map +1 -0
- package/dist/SearchInput.d.ts +30 -0
- package/dist/SearchInput.d.ts.map +1 -0
- package/dist/SearchInput.js +36 -0
- package/dist/SearchInput.js.map +1 -0
- package/dist/Section.d.ts +35 -0
- package/dist/Section.d.ts.map +1 -0
- package/dist/Section.js +31 -0
- package/dist/Section.js.map +1 -0
- package/dist/SegmentedTabs.d.ts +41 -0
- package/dist/SegmentedTabs.d.ts.map +1 -0
- package/dist/SegmentedTabs.js +33 -0
- package/dist/SegmentedTabs.js.map +1 -0
- package/dist/Select.d.ts +23 -0
- package/dist/Select.d.ts.map +1 -0
- package/dist/Select.js +23 -0
- package/dist/Select.js.map +1 -0
- package/dist/SettingRow.d.ts +33 -0
- package/dist/SettingRow.d.ts.map +1 -0
- package/dist/SettingRow.js +30 -0
- package/dist/SettingRow.js.map +1 -0
- package/dist/Switch.d.ts +32 -0
- package/dist/Switch.d.ts.map +1 -0
- package/dist/Switch.js +31 -0
- package/dist/Switch.js.map +1 -0
- package/dist/Tabs.d.ts +59 -0
- package/dist/Tabs.d.ts.map +1 -0
- package/dist/Tabs.js +51 -0
- package/dist/Tabs.js.map +1 -0
- package/dist/Textarea.d.ts +22 -0
- package/dist/Textarea.d.ts.map +1 -0
- package/dist/Textarea.js +25 -0
- package/dist/Textarea.js.map +1 -0
- package/dist/badge-classes.d.ts +15 -0
- package/dist/badge-classes.d.ts.map +1 -0
- package/dist/badge-classes.js +12 -0
- package/dist/badge-classes.js.map +1 -0
- package/dist/button-classes.d.ts +20 -0
- package/dist/button-classes.d.ts.map +1 -0
- package/dist/button-classes.js +16 -0
- package/dist/button-classes.js.map +1 -0
- package/dist/editor-service.d.ts +8 -4
- package/dist/editor-service.d.ts.map +1 -1
- package/dist/empty-state-classes.d.ts +12 -0
- package/dist/empty-state-classes.d.ts.map +1 -0
- package/dist/empty-state-classes.js +8 -0
- package/dist/empty-state-classes.js.map +1 -0
- package/dist/icon-button-classes.d.ts +15 -0
- package/dist/icon-button-classes.d.ts.map +1 -0
- package/dist/icon-button-classes.js +12 -0
- package/dist/icon-button-classes.js.map +1 -0
- package/dist/index.d.ts +33 -4
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +31 -4
- package/dist/index.js.map +1 -1
- package/dist/inline-edit-classes.d.ts +12 -0
- package/dist/inline-edit-classes.d.ts.map +1 -0
- package/dist/inline-edit-classes.js +18 -0
- package/dist/inline-edit-classes.js.map +1 -0
- package/dist/inline-edit-controller.d.ts +20 -0
- package/dist/inline-edit-controller.d.ts.map +1 -0
- package/dist/inline-edit-controller.js +52 -0
- package/dist/inline-edit-controller.js.map +1 -0
- package/dist/input-classes.d.ts +8 -0
- package/dist/input-classes.d.ts.map +1 -0
- package/dist/input-classes.js +10 -0
- package/dist/input-classes.js.map +1 -0
- package/dist/list-classes.d.ts +19 -0
- package/dist/list-classes.d.ts.map +1 -0
- package/dist/list-classes.js +16 -0
- package/dist/list-classes.js.map +1 -0
- package/dist/radio-card-classes.d.ts +8 -0
- package/dist/radio-card-classes.d.ts.map +1 -0
- package/dist/radio-card-classes.js +10 -0
- package/dist/radio-card-classes.js.map +1 -0
- package/dist/search-input-classes.d.ts +8 -0
- package/dist/search-input-classes.d.ts.map +1 -0
- package/dist/search-input-classes.js +10 -0
- package/dist/search-input-classes.js.map +1 -0
- package/dist/segmented-tabs-classes.d.ts +8 -0
- package/dist/segmented-tabs-classes.d.ts.map +1 -0
- package/dist/segmented-tabs-classes.js +10 -0
- package/dist/segmented-tabs-classes.js.map +1 -0
- package/dist/switch-classes.d.ts +8 -0
- package/dist/switch-classes.d.ts.map +1 -0
- package/dist/switch-classes.js +10 -0
- package/dist/switch-classes.js.map +1 -0
- package/dist/tabs-classes.d.ts +8 -0
- package/dist/tabs-classes.d.ts.map +1 -0
- package/dist/tabs-classes.js +10 -0
- package/dist/tabs-classes.js.map +1 -0
- package/package.json +1 -1
- package/src/AddRow.tsx +56 -0
- package/src/Badge.tsx +55 -0
- package/src/Button.tsx +52 -0
- package/src/Callout.tsx +26 -0
- package/src/CheckboxRow.tsx +54 -0
- package/src/EmptyState.tsx +69 -0
- package/src/IconButton.tsx +55 -0
- package/src/InlineEdit.tsx +260 -0
- package/src/Input.tsx +39 -0
- package/src/List.tsx +240 -0
- package/src/ModalActions.tsx +52 -0
- package/src/RadioGroup.tsx +101 -0
- package/src/SearchInput.tsx +98 -0
- package/src/Section.tsx +49 -0
- package/src/SegmentedTabs.tsx +70 -0
- package/src/Select.tsx +36 -0
- package/src/SettingRow.tsx +47 -0
- package/src/Switch.tsx +63 -0
- package/src/Tabs.tsx +89 -0
- package/src/Textarea.tsx +33 -0
- package/src/badge-classes.test.ts +20 -0
- package/src/badge-classes.ts +27 -0
- package/src/button-classes.test.ts +24 -0
- package/src/button-classes.ts +32 -0
- package/src/editor-service.ts +8 -4
- package/src/empty-state-classes.test.ts +13 -0
- package/src/empty-state-classes.ts +17 -0
- package/src/icon-button-classes.test.ts +13 -0
- package/src/icon-button-classes.ts +19 -0
- package/src/index.ts +45 -4
- package/src/inline-edit-classes.test.ts +27 -0
- package/src/inline-edit-classes.ts +18 -0
- package/src/inline-edit-controller.ts +53 -0
- package/src/input-classes.test.ts +13 -0
- package/src/input-classes.ts +9 -0
- package/src/list-classes.test.ts +23 -0
- package/src/list-classes.ts +26 -0
- package/src/radio-card-classes.test.ts +12 -0
- package/src/radio-card-classes.ts +9 -0
- package/src/search-input-classes.test.ts +12 -0
- package/src/search-input-classes.ts +9 -0
- package/src/segmented-tabs-classes.test.ts +12 -0
- package/src/segmented-tabs-classes.ts +9 -0
- package/src/switch-classes.test.ts +9 -0
- package/src/switch-classes.ts +9 -0
- package/src/tabs-classes.test.ts +12 -0
- package/src/tabs-classes.ts +9 -0
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { searchInputClass } from "./search-input-classes.js";
|
|
3
|
+
function SearchIcon() {
|
|
4
|
+
return (_jsxs("svg", { className: "silo-search-input-icon", width: "13", height: "13", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [_jsx("circle", { cx: "7", cy: "7", r: "5.2", stroke: "currentColor", strokeWidth: "1.4" }), _jsx("path", { d: "M11 11l3.5 3.5", stroke: "currentColor", strokeWidth: "1.4", strokeLinecap: "round" })] }));
|
|
5
|
+
}
|
|
6
|
+
function ClearIcon() {
|
|
7
|
+
return (_jsx("svg", { width: "12", height: "12", viewBox: "0 0 16 16", "aria-hidden": "true", children: _jsx("path", { d: "M4 4l8 8M12 4l-8 8", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }));
|
|
8
|
+
}
|
|
9
|
+
/**
|
|
10
|
+
* The filter-as-you-type field: leading search icon, and a clear ✕ that
|
|
11
|
+
* appears once there's a value (and stays a real tab stop). Pair with
|
|
12
|
+
* {@link List} for the standard picker pattern.
|
|
13
|
+
*
|
|
14
|
+
* Styled purely via host-provided `.silo-search-input*` classes — no
|
|
15
|
+
* stylesheet import is needed in the extension.
|
|
16
|
+
*
|
|
17
|
+
* @example
|
|
18
|
+
* ```tsx
|
|
19
|
+
* <SearchInput
|
|
20
|
+
* value={query}
|
|
21
|
+
* onValueChange={setQuery}
|
|
22
|
+
* placeholder="Filter branches…"
|
|
23
|
+
* />
|
|
24
|
+
* ```
|
|
25
|
+
*
|
|
26
|
+
* @category Consumer Services
|
|
27
|
+
* @public
|
|
28
|
+
*/
|
|
29
|
+
export function SearchInput({ value, onValueChange, placeholder, autoFocus, onClear, }) {
|
|
30
|
+
const hasValue = value.length > 0;
|
|
31
|
+
return (_jsxs("div", { className: searchInputClass(hasValue), children: [_jsx(SearchIcon, {}), _jsx("input", { type: "text", value: value, placeholder: placeholder, autoFocus: autoFocus, onChange: (e) => onValueChange(e.target.value), autoComplete: "off" }), _jsx("button", { type: "button", className: "silo-search-input-clear", "aria-label": "Clear", tabIndex: hasValue ? 0 : -1, onClick: () => {
|
|
32
|
+
onValueChange("");
|
|
33
|
+
onClear?.();
|
|
34
|
+
}, children: _jsx(ClearIcon, {}) })] }));
|
|
35
|
+
}
|
|
36
|
+
//# sourceMappingURL=SearchInput.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SearchInput.js","sourceRoot":"","sources":["../src/SearchInput.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAE1D,SAAS,UAAU;IACjB,OAAO,CACL,eACE,SAAS,EAAC,wBAAwB,EAClC,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,iBACC,MAAM,aAElB,iBAAQ,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,EAAC,CAAC,EAAC,KAAK,EAAC,MAAM,EAAC,cAAc,EAAC,WAAW,EAAC,KAAK,GAAG,EACxE,eACE,CAAC,EAAC,gBAAgB,EAClB,MAAM,EAAC,cAAc,EACrB,WAAW,EAAC,KAAK,EACjB,aAAa,EAAC,OAAO,GACrB,IACE,CACP,CAAC;AACJ,CAAC;AAED,SAAS,SAAS;IAChB,OAAO,CACL,cAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,iBAAa,MAAM,YAChE,eACE,CAAC,EAAC,oBAAoB,EACtB,MAAM,EAAC,cAAc,EACrB,WAAW,EAAC,KAAK,EACjB,aAAa,EAAC,OAAO,GACrB,GACE,CACP,CAAC;AACJ,CAAC;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,UAAU,WAAW,CAAC,EAC1B,KAAK,EACL,aAAa,EACb,WAAW,EACX,SAAS,EACT,OAAO,GAQR;IACC,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;IAClC,OAAO,CACL,eAAK,SAAS,EAAE,gBAAgB,CAAC,QAAQ,CAAC,aACxC,KAAC,UAAU,KAAG,EACd,gBACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAC9C,YAAY,EAAC,KAAK,GAClB,EACF,iBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,yBAAyB,gBACxB,OAAO,EAClB,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAC3B,OAAO,EAAE,GAAG,EAAE;oBACZ,aAAa,CAAC,EAAE,CAAC,CAAC;oBAClB,OAAO,EAAE,EAAE,CAAC;gBACd,CAAC,YAED,KAAC,SAAS,KAAG,GACN,IACL,CACP,CAAC;AACJ,CAAC"}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import type { ReactNode } from "react";
|
|
2
|
+
/**
|
|
3
|
+
* A labeled group — the uppercase `NAME` / `FOLDERS` / `FORMATTING` headers
|
|
4
|
+
* seen throughout Silo's modals and settings pages.
|
|
5
|
+
*
|
|
6
|
+
* Styled purely via host-provided `.silo-section*` classes — no stylesheet
|
|
7
|
+
* import is needed in the extension.
|
|
8
|
+
*
|
|
9
|
+
* @example
|
|
10
|
+
* ```tsx
|
|
11
|
+
* <Section label="Formatting">
|
|
12
|
+
* <SettingRow
|
|
13
|
+
* label="Format on save"
|
|
14
|
+
* hint="Run Format Document before writing to disk."
|
|
15
|
+
* >
|
|
16
|
+
* <Switch
|
|
17
|
+
* checked={formatOnSave}
|
|
18
|
+
* onChange={setFormatOnSave}
|
|
19
|
+
* aria-label="Format on save"
|
|
20
|
+
* />
|
|
21
|
+
* </SettingRow>
|
|
22
|
+
* </Section>
|
|
23
|
+
* ```
|
|
24
|
+
*
|
|
25
|
+
* @category Consumer Services
|
|
26
|
+
* @public
|
|
27
|
+
*/
|
|
28
|
+
export declare function Section({ label, accessory, children, }: {
|
|
29
|
+
/** Rendered uppercase, letter-spaced, chrome−1, `text-lo`. */
|
|
30
|
+
label: string;
|
|
31
|
+
/** Right-aligned — a count badge, an add affordance. */
|
|
32
|
+
accessory?: ReactNode;
|
|
33
|
+
children?: ReactNode;
|
|
34
|
+
}): import("react").JSX.Element;
|
|
35
|
+
//# sourceMappingURL=Section.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Section.d.ts","sourceRoot":"","sources":["../src/Section.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,OAAO,CAAC,EACtB,KAAK,EACL,SAAS,EACT,QAAQ,GACT,EAAE;IACD,8DAA8D;IAC9D,KAAK,EAAE,MAAM,CAAC;IACd,wDAAwD;IACxD,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,+BAUA"}
|
package/dist/Section.js
ADDED
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
/**
|
|
3
|
+
* A labeled group — the uppercase `NAME` / `FOLDERS` / `FORMATTING` headers
|
|
4
|
+
* seen throughout Silo's modals and settings pages.
|
|
5
|
+
*
|
|
6
|
+
* Styled purely via host-provided `.silo-section*` classes — no stylesheet
|
|
7
|
+
* import is needed in the extension.
|
|
8
|
+
*
|
|
9
|
+
* @example
|
|
10
|
+
* ```tsx
|
|
11
|
+
* <Section label="Formatting">
|
|
12
|
+
* <SettingRow
|
|
13
|
+
* label="Format on save"
|
|
14
|
+
* hint="Run Format Document before writing to disk."
|
|
15
|
+
* >
|
|
16
|
+
* <Switch
|
|
17
|
+
* checked={formatOnSave}
|
|
18
|
+
* onChange={setFormatOnSave}
|
|
19
|
+
* aria-label="Format on save"
|
|
20
|
+
* />
|
|
21
|
+
* </SettingRow>
|
|
22
|
+
* </Section>
|
|
23
|
+
* ```
|
|
24
|
+
*
|
|
25
|
+
* @category Consumer Services
|
|
26
|
+
* @public
|
|
27
|
+
*/
|
|
28
|
+
export function Section({ label, accessory, children, }) {
|
|
29
|
+
return (_jsxs("div", { className: "silo-section", children: [_jsxs("div", { className: "silo-section-header", children: [_jsx("span", { className: "silo-section-label", children: label }), accessory] }), children] }));
|
|
30
|
+
}
|
|
31
|
+
//# sourceMappingURL=Section.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Section.js","sourceRoot":"","sources":["../src/Section.tsx"],"names":[],"mappings":";AAEA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,UAAU,OAAO,CAAC,EACtB,KAAK,EACL,SAAS,EACT,QAAQ,GAOT;IACC,OAAO,CACL,eAAK,SAAS,EAAC,cAAc,aAC3B,eAAK,SAAS,EAAC,qBAAqB,aAClC,eAAM,SAAS,EAAC,oBAAoB,YAAE,KAAK,GAAQ,EAClD,SAAS,IACN,EACL,QAAQ,IACL,CACP,CAAC;AACJ,CAAC"}
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import type { ReactNode } from "react";
|
|
2
|
+
/**
|
|
3
|
+
* One segment in a {@link SegmentedTabs} strip.
|
|
4
|
+
*
|
|
5
|
+
* @category Core Types
|
|
6
|
+
* @public
|
|
7
|
+
*/
|
|
8
|
+
export interface SegmentedTabItem<T extends string = string> {
|
|
9
|
+
id: T;
|
|
10
|
+
label: string;
|
|
11
|
+
icon?: ReactNode;
|
|
12
|
+
}
|
|
13
|
+
/**
|
|
14
|
+
* A pill riding in a recessed well — self-contained, no relationship to
|
|
15
|
+
* content below it, so it can sit in a header row next to other controls.
|
|
16
|
+
* Native tab stops per segment; no arrow-key roving.
|
|
17
|
+
*
|
|
18
|
+
* Styled purely via host-provided `.silo-segmented*` classes — no stylesheet
|
|
19
|
+
* import is needed in the extension.
|
|
20
|
+
*
|
|
21
|
+
* @example
|
|
22
|
+
* ```tsx
|
|
23
|
+
* <SegmentedTabs
|
|
24
|
+
* tabs={[
|
|
25
|
+
* { id: "browse", label: "Browse" },
|
|
26
|
+
* { id: "installed", label: "Installed" },
|
|
27
|
+
* ]}
|
|
28
|
+
* active={tab}
|
|
29
|
+
* onSelect={setTab}
|
|
30
|
+
* />
|
|
31
|
+
* ```
|
|
32
|
+
*
|
|
33
|
+
* @category Consumer Services
|
|
34
|
+
* @public
|
|
35
|
+
*/
|
|
36
|
+
export declare function SegmentedTabs<T extends string>({ tabs, active, onSelect, }: {
|
|
37
|
+
tabs: SegmentedTabItem<T>[];
|
|
38
|
+
active: T;
|
|
39
|
+
onSelect: (id: T) => void;
|
|
40
|
+
}): import("react").JSX.Element;
|
|
41
|
+
//# sourceMappingURL=SegmentedTabs.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SegmentedTabs.d.ts","sourceRoot":"","sources":["../src/SegmentedTabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC;;;;;GAKG;AACH,MAAM,WAAW,gBAAgB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM;IACzD,EAAE,EAAE,CAAC,CAAC;IACN,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,aAAa,CAAC,CAAC,SAAS,MAAM,EAAE,EAC9C,IAAI,EACJ,MAAM,EACN,QAAQ,GACT,EAAE;IACD,IAAI,EAAE,gBAAgB,CAAC,CAAC,CAAC,EAAE,CAAC;IAC5B,MAAM,EAAE,CAAC,CAAC;IACV,QAAQ,EAAE,CAAC,EAAE,EAAE,CAAC,KAAK,IAAI,CAAC;CAC3B,+BAuBA"}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { segmentedTabDataActive } from "./segmented-tabs-classes.js";
|
|
3
|
+
/**
|
|
4
|
+
* A pill riding in a recessed well — self-contained, no relationship to
|
|
5
|
+
* content below it, so it can sit in a header row next to other controls.
|
|
6
|
+
* Native tab stops per segment; no arrow-key roving.
|
|
7
|
+
*
|
|
8
|
+
* Styled purely via host-provided `.silo-segmented*` classes — no stylesheet
|
|
9
|
+
* import is needed in the extension.
|
|
10
|
+
*
|
|
11
|
+
* @example
|
|
12
|
+
* ```tsx
|
|
13
|
+
* <SegmentedTabs
|
|
14
|
+
* tabs={[
|
|
15
|
+
* { id: "browse", label: "Browse" },
|
|
16
|
+
* { id: "installed", label: "Installed" },
|
|
17
|
+
* ]}
|
|
18
|
+
* active={tab}
|
|
19
|
+
* onSelect={setTab}
|
|
20
|
+
* />
|
|
21
|
+
* ```
|
|
22
|
+
*
|
|
23
|
+
* @category Consumer Services
|
|
24
|
+
* @public
|
|
25
|
+
*/
|
|
26
|
+
export function SegmentedTabs({ tabs, active, onSelect, }) {
|
|
27
|
+
return (_jsx("div", { className: "silo-segmented", role: "tablist", children: tabs.map((tab) => {
|
|
28
|
+
const isActive = tab.id === active;
|
|
29
|
+
const dataActive = segmentedTabDataActive(isActive);
|
|
30
|
+
return (_jsxs("button", { type: "button", role: "tab", "aria-selected": isActive, className: "silo-segmented-tab", ...(dataActive != null ? { "data-active": dataActive } : {}), onClick: () => onSelect(tab.id), children: [tab.icon, tab.label] }, tab.id));
|
|
31
|
+
}) }));
|
|
32
|
+
}
|
|
33
|
+
//# sourceMappingURL=SegmentedTabs.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SegmentedTabs.js","sourceRoot":"","sources":["../src/SegmentedTabs.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAclE;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,UAAU,aAAa,CAAmB,EAC9C,IAAI,EACJ,MAAM,EACN,QAAQ,GAKT;IACC,OAAO,CACL,cAAK,SAAS,EAAC,gBAAgB,EAAC,IAAI,EAAC,SAAS,YAC3C,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE;YAChB,MAAM,QAAQ,GAAG,GAAG,CAAC,EAAE,KAAK,MAAM,CAAC;YACnC,MAAM,UAAU,GAAG,sBAAsB,CAAC,QAAQ,CAAC,CAAC;YACpD,OAAO,CACL,kBAEE,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,KAAK,mBACK,QAAQ,EACvB,SAAS,EAAC,oBAAoB,KAC1B,CAAC,UAAU,IAAI,IAAI,CAAC,CAAC,CAAC,EAAE,aAAa,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EAC7D,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC,aAE9B,GAAG,CAAC,IAAI,EACR,GAAG,CAAC,KAAK,KATL,GAAG,CAAC,EAAE,CAUJ,CACV,CAAC;QACJ,CAAC,CAAC,GACE,CACP,CAAC;AACJ,CAAC"}
|
package/dist/Select.d.ts
ADDED
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import type { SelectHTMLAttributes, ReactNode } from "react";
|
|
2
|
+
/**
|
|
3
|
+
* A native `<select>` wearing the {@link Input} treatment — keep it for short
|
|
4
|
+
* enumerable values ("Block / Bar / Underline").
|
|
5
|
+
*
|
|
6
|
+
* Styled purely via the host-provided `.silo-select` class — no stylesheet
|
|
7
|
+
* import is needed in the extension.
|
|
8
|
+
*
|
|
9
|
+
* @example
|
|
10
|
+
* ```tsx
|
|
11
|
+
* <Select value={cursorStyle} onChange={(e) => setCursorStyle(e.target.value)}>
|
|
12
|
+
* <option value="block">Block</option>
|
|
13
|
+
* <option value="bar">Bar</option>
|
|
14
|
+
* </Select>
|
|
15
|
+
* ```
|
|
16
|
+
*
|
|
17
|
+
* @category Consumer Services
|
|
18
|
+
* @public
|
|
19
|
+
*/
|
|
20
|
+
export declare function Select({ className, children, ...rest }: {
|
|
21
|
+
children?: ReactNode;
|
|
22
|
+
} & Omit<SelectHTMLAttributes<HTMLSelectElement>, "children">): import("react").JSX.Element;
|
|
23
|
+
//# sourceMappingURL=Select.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../src/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE7D;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,MAAM,CAAC,EACrB,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACR,EAAE;IACD,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,GAAG,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC,+BAS5D"}
|
package/dist/Select.js
ADDED
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
/**
|
|
3
|
+
* A native `<select>` wearing the {@link Input} treatment — keep it for short
|
|
4
|
+
* enumerable values ("Block / Bar / Underline").
|
|
5
|
+
*
|
|
6
|
+
* Styled purely via the host-provided `.silo-select` class — no stylesheet
|
|
7
|
+
* import is needed in the extension.
|
|
8
|
+
*
|
|
9
|
+
* @example
|
|
10
|
+
* ```tsx
|
|
11
|
+
* <Select value={cursorStyle} onChange={(e) => setCursorStyle(e.target.value)}>
|
|
12
|
+
* <option value="block">Block</option>
|
|
13
|
+
* <option value="bar">Bar</option>
|
|
14
|
+
* </Select>
|
|
15
|
+
* ```
|
|
16
|
+
*
|
|
17
|
+
* @category Consumer Services
|
|
18
|
+
* @public
|
|
19
|
+
*/
|
|
20
|
+
export function Select({ className, children, ...rest }) {
|
|
21
|
+
return (_jsx("select", { className: className ? `silo-select ${className}` : "silo-select", ...rest, children: children }));
|
|
22
|
+
}
|
|
23
|
+
//# sourceMappingURL=Select.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Select.js","sourceRoot":"","sources":["../src/Select.tsx"],"names":[],"mappings":";AAEA;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,UAAU,MAAM,CAAC,EACrB,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EAGoD;IAC3D,OAAO,CACL,iBACE,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,eAAe,SAAS,EAAE,CAAC,CAAC,CAAC,aAAa,KAC7D,IAAI,YAEP,QAAQ,GACF,CACV,CAAC;AACJ,CAAC"}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import type { ReactNode } from "react";
|
|
2
|
+
/**
|
|
3
|
+
* The label + hint + control row every settings surface uses: title and dim
|
|
4
|
+
* description on the left, the control pinned right. Rows in a group are
|
|
5
|
+
* separated by hairline dividers.
|
|
6
|
+
*
|
|
7
|
+
* Styled purely via host-provided `.silo-setting-row*` classes — no
|
|
8
|
+
* stylesheet import is needed in the extension.
|
|
9
|
+
*
|
|
10
|
+
* @example
|
|
11
|
+
* ```tsx
|
|
12
|
+
* <SettingRow
|
|
13
|
+
* label="Format on save"
|
|
14
|
+
* hint="Run Format Document before writing to disk."
|
|
15
|
+
* >
|
|
16
|
+
* <Switch
|
|
17
|
+
* checked={formatOnSave}
|
|
18
|
+
* onChange={setFormatOnSave}
|
|
19
|
+
* aria-label="Format on save"
|
|
20
|
+
* />
|
|
21
|
+
* </SettingRow>
|
|
22
|
+
* ```
|
|
23
|
+
*
|
|
24
|
+
* @category Consumer Services
|
|
25
|
+
* @public
|
|
26
|
+
*/
|
|
27
|
+
export declare function SettingRow({ label, hint, children, }: {
|
|
28
|
+
label: string;
|
|
29
|
+
hint?: string;
|
|
30
|
+
/** The control — `Switch`, `Select`, `Input`, etc. */
|
|
31
|
+
children?: ReactNode;
|
|
32
|
+
}): import("react").JSX.Element;
|
|
33
|
+
//# sourceMappingURL=SettingRow.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SettingRow.d.ts","sourceRoot":"","sources":["../src/SettingRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,IAAI,EACJ,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,sDAAsD;IACtD,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,+BAUA"}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
/**
|
|
3
|
+
* The label + hint + control row every settings surface uses: title and dim
|
|
4
|
+
* description on the left, the control pinned right. Rows in a group are
|
|
5
|
+
* separated by hairline dividers.
|
|
6
|
+
*
|
|
7
|
+
* Styled purely via host-provided `.silo-setting-row*` classes — no
|
|
8
|
+
* stylesheet import is needed in the extension.
|
|
9
|
+
*
|
|
10
|
+
* @example
|
|
11
|
+
* ```tsx
|
|
12
|
+
* <SettingRow
|
|
13
|
+
* label="Format on save"
|
|
14
|
+
* hint="Run Format Document before writing to disk."
|
|
15
|
+
* >
|
|
16
|
+
* <Switch
|
|
17
|
+
* checked={formatOnSave}
|
|
18
|
+
* onChange={setFormatOnSave}
|
|
19
|
+
* aria-label="Format on save"
|
|
20
|
+
* />
|
|
21
|
+
* </SettingRow>
|
|
22
|
+
* ```
|
|
23
|
+
*
|
|
24
|
+
* @category Consumer Services
|
|
25
|
+
* @public
|
|
26
|
+
*/
|
|
27
|
+
export function SettingRow({ label, hint, children, }) {
|
|
28
|
+
return (_jsxs("div", { className: "silo-setting-row", children: [_jsxs("div", { className: "silo-setting-row-text", children: [_jsx("div", { className: "silo-setting-row-label", children: label }), hint != null && _jsx("div", { className: "silo-setting-row-hint", children: hint })] }), _jsx("div", { className: "silo-setting-row-control", children: children })] }));
|
|
29
|
+
}
|
|
30
|
+
//# sourceMappingURL=SettingRow.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SettingRow.js","sourceRoot":"","sources":["../src/SettingRow.tsx"],"names":[],"mappings":";AAEA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,MAAM,UAAU,UAAU,CAAC,EACzB,KAAK,EACL,IAAI,EACJ,QAAQ,GAMT;IACC,OAAO,CACL,eAAK,SAAS,EAAC,kBAAkB,aAC/B,eAAK,SAAS,EAAC,uBAAuB,aACpC,cAAK,SAAS,EAAC,wBAAwB,YAAE,KAAK,GAAO,EACpD,IAAI,IAAI,IAAI,IAAI,cAAK,SAAS,EAAC,uBAAuB,YAAE,IAAI,GAAO,IAChE,EACN,cAAK,SAAS,EAAC,0BAA0B,YAAE,QAAQ,GAAO,IACtD,CACP,CAAC;AACJ,CAAC"}
|
package/dist/Switch.d.ts
ADDED
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import type { ButtonHTMLAttributes } from "react";
|
|
2
|
+
/**
|
|
3
|
+
* The iOS-style on/off toggle used throughout settings. Off = recessed
|
|
4
|
+
* `bg-active` track with a hairline border; on = accent fill. Focus uses a
|
|
5
|
+
* positive-offset ring (the one deliberate exception to the shared inset
|
|
6
|
+
* ring — an 18px pill can't take an inset outline).
|
|
7
|
+
*
|
|
8
|
+
* Styled purely via the host-provided `.silo-switch-track` class — no
|
|
9
|
+
* stylesheet import is needed in the extension.
|
|
10
|
+
*
|
|
11
|
+
* @example
|
|
12
|
+
* ```tsx
|
|
13
|
+
* <Switch
|
|
14
|
+
* checked={formatOnSave}
|
|
15
|
+
* onChange={setFormatOnSave}
|
|
16
|
+
* aria-label="Format on save"
|
|
17
|
+
* />
|
|
18
|
+
* ```
|
|
19
|
+
*
|
|
20
|
+
* @category Consumer Services
|
|
21
|
+
* @public
|
|
22
|
+
*/
|
|
23
|
+
export declare function Switch({ checked, onChange, disabled, "aria-label": ariaLabel, className, type, ...rest }: {
|
|
24
|
+
checked: boolean;
|
|
25
|
+
onChange: (checked: boolean) => void;
|
|
26
|
+
disabled?: boolean;
|
|
27
|
+
/**
|
|
28
|
+
* Required unless wrapped by a labeled {@link SettingRow}.
|
|
29
|
+
*/
|
|
30
|
+
"aria-label"?: string;
|
|
31
|
+
} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onChange" | "aria-label" | "children" | "role" | "aria-checked">): import("react").JSX.Element;
|
|
32
|
+
//# sourceMappingURL=Switch.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../src/Switch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAGlD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,MAAM,CAAC,EACrB,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,YAAY,EAAE,SAAS,EACvB,SAAS,EACT,IAAe,EACf,GAAG,IAAI,EACR,EAAE;IACD,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,GAAG,IAAI,CACN,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,UAAU,GAAG,YAAY,GAAG,UAAU,GAAG,MAAM,GAAG,cAAc,CACjE,+BAmBA"}
|
package/dist/Switch.js
ADDED
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { switchDataChecked } from "./switch-classes.js";
|
|
3
|
+
/**
|
|
4
|
+
* The iOS-style on/off toggle used throughout settings. Off = recessed
|
|
5
|
+
* `bg-active` track with a hairline border; on = accent fill. Focus uses a
|
|
6
|
+
* positive-offset ring (the one deliberate exception to the shared inset
|
|
7
|
+
* ring — an 18px pill can't take an inset outline).
|
|
8
|
+
*
|
|
9
|
+
* Styled purely via the host-provided `.silo-switch-track` class — no
|
|
10
|
+
* stylesheet import is needed in the extension.
|
|
11
|
+
*
|
|
12
|
+
* @example
|
|
13
|
+
* ```tsx
|
|
14
|
+
* <Switch
|
|
15
|
+
* checked={formatOnSave}
|
|
16
|
+
* onChange={setFormatOnSave}
|
|
17
|
+
* aria-label="Format on save"
|
|
18
|
+
* />
|
|
19
|
+
* ```
|
|
20
|
+
*
|
|
21
|
+
* @category Consumer Services
|
|
22
|
+
* @public
|
|
23
|
+
*/
|
|
24
|
+
export function Switch({ checked, onChange, disabled, "aria-label": ariaLabel, className, type = "button", ...rest }) {
|
|
25
|
+
return (_jsx("button", { type: type, role: "switch", "aria-checked": checked, "aria-label": ariaLabel, disabled: disabled, "data-checked": switchDataChecked(checked), className: className ? `silo-switch-track ${className}` : "silo-switch-track", onClick: () => {
|
|
26
|
+
if (disabled)
|
|
27
|
+
return;
|
|
28
|
+
onChange(!checked);
|
|
29
|
+
}, ...rest }));
|
|
30
|
+
}
|
|
31
|
+
//# sourceMappingURL=Switch.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Switch.js","sourceRoot":"","sources":["../src/Switch.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAErD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,UAAU,MAAM,CAAC,EACrB,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,YAAY,EAAE,SAAS,EACvB,SAAS,EACT,IAAI,GAAG,QAAQ,EACf,GAAG,IAAI,EAYR;IACC,OAAO,CACL,iBACE,IAAI,EAAE,IAAI,EACV,IAAI,EAAC,QAAQ,kBACC,OAAO,gBACT,SAAS,EACrB,QAAQ,EAAE,QAAQ,kBACJ,iBAAiB,CAAC,OAAO,CAAC,EACxC,SAAS,EACP,SAAS,CAAC,CAAC,CAAC,qBAAqB,SAAS,EAAE,CAAC,CAAC,CAAC,mBAAmB,EAEpE,OAAO,EAAE,GAAG,EAAE;YACZ,IAAI,QAAQ;gBAAE,OAAO;YACrB,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC;QACrB,CAAC,KACG,IAAI,GACR,CACH,CAAC;AACJ,CAAC"}
|
package/dist/Tabs.d.ts
ADDED
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import type { ReactNode } from "react";
|
|
2
|
+
/**
|
|
3
|
+
* One tab in a {@link Tabs} strip.
|
|
4
|
+
*
|
|
5
|
+
* @category Core Types
|
|
6
|
+
* @public
|
|
7
|
+
*/
|
|
8
|
+
export interface TabItem<T extends string = string> {
|
|
9
|
+
id: T;
|
|
10
|
+
label: string;
|
|
11
|
+
icon?: ReactNode;
|
|
12
|
+
}
|
|
13
|
+
/**
|
|
14
|
+
* A borderless strip attached to the content panel it switches. The active
|
|
15
|
+
* tab's background **is** the panel's background — that shared fill is what
|
|
16
|
+
* makes the tab read as part of the panel. Pair with {@link TabPanel}.
|
|
17
|
+
* Native tab stops per tab; no arrow-key roving.
|
|
18
|
+
*
|
|
19
|
+
* Styled purely via host-provided `.silo-tabs` / `.silo-tab` classes — no
|
|
20
|
+
* stylesheet import is needed in the extension.
|
|
21
|
+
*
|
|
22
|
+
* @example
|
|
23
|
+
* ```tsx
|
|
24
|
+
* <Tabs
|
|
25
|
+
* tabs={[
|
|
26
|
+
* { id: "panels", label: "Side Panels" },
|
|
27
|
+
* { id: "statusBar", label: "Status Bar" },
|
|
28
|
+
* { id: "options", label: "Options" },
|
|
29
|
+
* ]}
|
|
30
|
+
* active={tab}
|
|
31
|
+
* onSelect={setTab}
|
|
32
|
+
* />
|
|
33
|
+
* <TabPanel>{tab === "panels" && <PanelsSettings />}</TabPanel>
|
|
34
|
+
* ```
|
|
35
|
+
*
|
|
36
|
+
* @category Consumer Services
|
|
37
|
+
* @public
|
|
38
|
+
*/
|
|
39
|
+
export declare function Tabs<T extends string>({ tabs, active, onSelect, }: {
|
|
40
|
+
tabs: TabItem<T>[];
|
|
41
|
+
active: T;
|
|
42
|
+
onSelect: (id: T) => void;
|
|
43
|
+
}): import("react").JSX.Element;
|
|
44
|
+
/**
|
|
45
|
+
* The content panel a {@link Tabs} strip attaches to. Active-tab and panel
|
|
46
|
+
* share the same background token — that's the "attached" illusion.
|
|
47
|
+
*
|
|
48
|
+
* @example
|
|
49
|
+
* ```tsx
|
|
50
|
+
* <TabPanel>{tab === "panels" && <PanelsSettings />}</TabPanel>
|
|
51
|
+
* ```
|
|
52
|
+
*
|
|
53
|
+
* @category Consumer Services
|
|
54
|
+
* @public
|
|
55
|
+
*/
|
|
56
|
+
export declare function TabPanel({ children }: {
|
|
57
|
+
children?: ReactNode;
|
|
58
|
+
}): import("react").JSX.Element;
|
|
59
|
+
//# sourceMappingURL=Tabs.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../src/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC;;;;;GAKG;AACH,MAAM,WAAW,OAAO,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM;IAChD,EAAE,EAAE,CAAC,CAAC;IACN,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,IAAI,CAAC,CAAC,SAAS,MAAM,EAAE,EACrC,IAAI,EACJ,MAAM,EACN,QAAQ,GACT,EAAE;IACD,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;IACnB,MAAM,EAAE,CAAC,CAAC;IACV,QAAQ,EAAE,CAAC,EAAE,EAAE,CAAC,KAAK,IAAI,CAAC;CAC3B,+BAuBA;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,QAAQ,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,CAAC,EAAE,SAAS,CAAA;CAAE,+BAE9D"}
|
package/dist/Tabs.js
ADDED
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { tabDataActive } from "./tabs-classes.js";
|
|
3
|
+
/**
|
|
4
|
+
* A borderless strip attached to the content panel it switches. The active
|
|
5
|
+
* tab's background **is** the panel's background — that shared fill is what
|
|
6
|
+
* makes the tab read as part of the panel. Pair with {@link TabPanel}.
|
|
7
|
+
* Native tab stops per tab; no arrow-key roving.
|
|
8
|
+
*
|
|
9
|
+
* Styled purely via host-provided `.silo-tabs` / `.silo-tab` classes — no
|
|
10
|
+
* stylesheet import is needed in the extension.
|
|
11
|
+
*
|
|
12
|
+
* @example
|
|
13
|
+
* ```tsx
|
|
14
|
+
* <Tabs
|
|
15
|
+
* tabs={[
|
|
16
|
+
* { id: "panels", label: "Side Panels" },
|
|
17
|
+
* { id: "statusBar", label: "Status Bar" },
|
|
18
|
+
* { id: "options", label: "Options" },
|
|
19
|
+
* ]}
|
|
20
|
+
* active={tab}
|
|
21
|
+
* onSelect={setTab}
|
|
22
|
+
* />
|
|
23
|
+
* <TabPanel>{tab === "panels" && <PanelsSettings />}</TabPanel>
|
|
24
|
+
* ```
|
|
25
|
+
*
|
|
26
|
+
* @category Consumer Services
|
|
27
|
+
* @public
|
|
28
|
+
*/
|
|
29
|
+
export function Tabs({ tabs, active, onSelect, }) {
|
|
30
|
+
return (_jsx("div", { className: "silo-tabs", role: "tablist", children: tabs.map((tab) => {
|
|
31
|
+
const isActive = tab.id === active;
|
|
32
|
+
const dataActive = tabDataActive(isActive);
|
|
33
|
+
return (_jsxs("button", { type: "button", role: "tab", "aria-selected": isActive, className: "silo-tab", ...(dataActive != null ? { "data-active": dataActive } : {}), onClick: () => onSelect(tab.id), children: [tab.icon, tab.label] }, tab.id));
|
|
34
|
+
}) }));
|
|
35
|
+
}
|
|
36
|
+
/**
|
|
37
|
+
* The content panel a {@link Tabs} strip attaches to. Active-tab and panel
|
|
38
|
+
* share the same background token — that's the "attached" illusion.
|
|
39
|
+
*
|
|
40
|
+
* @example
|
|
41
|
+
* ```tsx
|
|
42
|
+
* <TabPanel>{tab === "panels" && <PanelsSettings />}</TabPanel>
|
|
43
|
+
* ```
|
|
44
|
+
*
|
|
45
|
+
* @category Consumer Services
|
|
46
|
+
* @public
|
|
47
|
+
*/
|
|
48
|
+
export function TabPanel({ children }) {
|
|
49
|
+
return _jsx("div", { className: "silo-tab-panel", children: children });
|
|
50
|
+
}
|
|
51
|
+
//# sourceMappingURL=Tabs.js.map
|
package/dist/Tabs.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../src/Tabs.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAc/C;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,UAAU,IAAI,CAAmB,EACrC,IAAI,EACJ,MAAM,EACN,QAAQ,GAKT;IACC,OAAO,CACL,cAAK,SAAS,EAAC,WAAW,EAAC,IAAI,EAAC,SAAS,YACtC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE;YAChB,MAAM,QAAQ,GAAG,GAAG,CAAC,EAAE,KAAK,MAAM,CAAC;YACnC,MAAM,UAAU,GAAG,aAAa,CAAC,QAAQ,CAAC,CAAC;YAC3C,OAAO,CACL,kBAEE,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,KAAK,mBACK,QAAQ,EACvB,SAAS,EAAC,UAAU,KAChB,CAAC,UAAU,IAAI,IAAI,CAAC,CAAC,CAAC,EAAE,aAAa,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EAC7D,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC,aAE9B,GAAG,CAAC,IAAI,EACR,GAAG,CAAC,KAAK,KATL,GAAG,CAAC,EAAE,CAUJ,CACV,CAAC;QACJ,CAAC,CAAC,GACE,CACP,CAAC;AACJ,CAAC;AAED;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,QAAQ,CAAC,EAAE,QAAQ,EAA4B;IAC7D,OAAO,cAAK,SAAS,EAAC,gBAAgB,YAAE,QAAQ,GAAO,CAAC;AAC1D,CAAC"}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { type TextareaHTMLAttributes } from "react";
|
|
2
|
+
/**
|
|
3
|
+
* Multi-line text entry wearing the same tokens as {@link Input}, plus
|
|
4
|
+
* comfortable line-height, vertical resize, and a 64px minimum height.
|
|
5
|
+
*
|
|
6
|
+
* Styled purely via the host-provided `.silo-textarea` class — no
|
|
7
|
+
* stylesheet import is needed in the extension.
|
|
8
|
+
*
|
|
9
|
+
* @example
|
|
10
|
+
* ```tsx
|
|
11
|
+
* <Textarea
|
|
12
|
+
* value={notes}
|
|
13
|
+
* onChange={(e) => setNotes(e.target.value)}
|
|
14
|
+
* placeholder="Notes…"
|
|
15
|
+
* />
|
|
16
|
+
* ```
|
|
17
|
+
*
|
|
18
|
+
* @category Consumer Services
|
|
19
|
+
* @public
|
|
20
|
+
*/
|
|
21
|
+
export declare const Textarea: import("react").ForwardRefExoticComponent<TextareaHTMLAttributes<HTMLTextAreaElement> & import("react").RefAttributes<HTMLTextAreaElement>>;
|
|
22
|
+
//# sourceMappingURL=Textarea.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../src/Textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,sBAAsB,EAAE,MAAM,OAAO,CAAC;AAEhE;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,QAAQ,6IAWnB,CAAC"}
|
package/dist/Textarea.js
ADDED
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef } from "react";
|
|
3
|
+
/**
|
|
4
|
+
* Multi-line text entry wearing the same tokens as {@link Input}, plus
|
|
5
|
+
* comfortable line-height, vertical resize, and a 64px minimum height.
|
|
6
|
+
*
|
|
7
|
+
* Styled purely via the host-provided `.silo-textarea` class — no
|
|
8
|
+
* stylesheet import is needed in the extension.
|
|
9
|
+
*
|
|
10
|
+
* @example
|
|
11
|
+
* ```tsx
|
|
12
|
+
* <Textarea
|
|
13
|
+
* value={notes}
|
|
14
|
+
* onChange={(e) => setNotes(e.target.value)}
|
|
15
|
+
* placeholder="Notes…"
|
|
16
|
+
* />
|
|
17
|
+
* ```
|
|
18
|
+
*
|
|
19
|
+
* @category Consumer Services
|
|
20
|
+
* @public
|
|
21
|
+
*/
|
|
22
|
+
export const Textarea = forwardRef(function Textarea({ className, ...rest }, ref) {
|
|
23
|
+
return (_jsx("textarea", { ref: ref, className: className ? `silo-textarea ${className}` : "silo-textarea", ...rest }));
|
|
24
|
+
});
|
|
25
|
+
//# sourceMappingURL=Textarea.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Textarea.js","sourceRoot":"","sources":["../src/Textarea.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA+B,MAAM,OAAO,CAAC;AAEhE;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAGhC,SAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG;IAC7C,OAAO,CACL,mBACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,iBAAiB,SAAS,EAAE,CAAC,CAAC,CAAC,eAAe,KACjE,IAAI,GACR,CACH,CAAC;AACJ,CAAC,CAAC,CAAC"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Class-string mapping for {@link Badge} — pinned by unit tests so a rename
|
|
3
|
+
* of the host contract classes fails CI (RFC 0016).
|
|
4
|
+
*
|
|
5
|
+
* @internal
|
|
6
|
+
*/
|
|
7
|
+
export type BadgeTone = "neutral" | "accent" | "ok" | "warn" | "err" | "outline";
|
|
8
|
+
/**
|
|
9
|
+
* Resolve the host `.silo-badge*` class string. An arbitrary `color` wins over
|
|
10
|
+
* `tone` and selects `.silo-badge-custom` (fed via `--badge-color`).
|
|
11
|
+
*
|
|
12
|
+
* @internal
|
|
13
|
+
*/
|
|
14
|
+
export declare function badgeClass(tone?: BadgeTone, color?: string): string;
|
|
15
|
+
//# sourceMappingURL=badge-classes.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"badge-classes.d.ts","sourceRoot":"","sources":["../src/badge-classes.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,MAAM,MAAM,SAAS,GACjB,SAAS,GACT,QAAQ,GACR,IAAI,GACJ,MAAM,GACN,KAAK,GACL,SAAS,CAAC;AAEd;;;;;GAKG;AACH,wBAAgB,UAAU,CACxB,IAAI,GAAE,SAAqB,EAC3B,KAAK,CAAC,EAAE,MAAM,GACb,MAAM,CAGR"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Resolve the host `.silo-badge*` class string. An arbitrary `color` wins over
|
|
3
|
+
* `tone` and selects `.silo-badge-custom` (fed via `--badge-color`).
|
|
4
|
+
*
|
|
5
|
+
* @internal
|
|
6
|
+
*/
|
|
7
|
+
export function badgeClass(tone = "neutral", color) {
|
|
8
|
+
if (color != null)
|
|
9
|
+
return "silo-badge silo-badge-custom";
|
|
10
|
+
return `silo-badge silo-badge-${tone}`;
|
|
11
|
+
}
|
|
12
|
+
//# sourceMappingURL=badge-classes.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"badge-classes.js","sourceRoot":"","sources":["../src/badge-classes.ts"],"names":[],"mappings":"AAcA;;;;;GAKG;AACH,MAAM,UAAU,UAAU,CACxB,OAAkB,SAAS,EAC3B,KAAc;IAEd,IAAI,KAAK,IAAI,IAAI;QAAE,OAAO,8BAA8B,CAAC;IACzD,OAAO,yBAAyB,IAAI,EAAE,CAAC;AACzC,CAAC"}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Class-string mapping for {@link Button} — pinned by unit tests so a rename
|
|
3
|
+
* of the host contract classes fails CI (RFC 0016).
|
|
4
|
+
*
|
|
5
|
+
* @internal
|
|
6
|
+
*/
|
|
7
|
+
export type ButtonVariant = "normal" | "primary" | "danger";
|
|
8
|
+
/**
|
|
9
|
+
* @internal
|
|
10
|
+
*/
|
|
11
|
+
export type ButtonSize = "normal" | "sm";
|
|
12
|
+
/**
|
|
13
|
+
* Resolve the host `.silo-button*` class string for a Button's `variant` +
|
|
14
|
+
* `size`. Primary/danger are standalone class names (not modifiers on
|
|
15
|
+
* `.silo-button`); `sm` composes with any variant.
|
|
16
|
+
*
|
|
17
|
+
* @internal
|
|
18
|
+
*/
|
|
19
|
+
export declare function buttonClass(variant?: ButtonVariant, size?: ButtonSize): string;
|
|
20
|
+
//# sourceMappingURL=button-classes.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"button-classes.d.ts","sourceRoot":"","sources":["../src/button-classes.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,SAAS,GAAG,QAAQ,CAAC;AAE5D;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,IAAI,CAAC;AAEzC;;;;;;GAMG;AACH,wBAAgB,WAAW,CACzB,OAAO,GAAE,aAAwB,EACjC,IAAI,GAAE,UAAqB,GAC1B,MAAM,CAQR"}
|