1366 lines
43 KiB
JavaScript
1366 lines
43 KiB
JavaScript
|
/* @ds-bundle: {"format":4,"namespace":"CubeCraftLabsDesignSystem_2b6768","components":[{"name":"Badge","sourcePath":"components/core/Badge.jsx"},{"name":"Button","sourcePath":"components/core/Button.jsx"},{"name":"CubeMark","sourcePath":"components/core/CubeMark.jsx"},{"name":"Tag","sourcePath":"components/core/Tag.jsx"},{"name":"Checkbox","sourcePath":"components/forms/Checkbox.jsx"},{"name":"Field","sourcePath":"components/forms/Field.jsx"},{"name":"Input","sourcePath":"components/forms/Input.jsx"},{"name":"Radio","sourcePath":"components/forms/Radio.jsx"},{"name":"Select","sourcePath":"components/forms/Select.jsx"},{"name":"Switch","sourcePath":"components/forms/Switch.jsx"},{"name":"Textarea","sourcePath":"components/forms/Textarea.jsx"},{"name":"Icon","sourcePath":"components/icons/Icon.jsx"},{"name":"IconButton","sourcePath":"components/icons/IconButton.jsx"},{"name":"Card","sourcePath":"components/surfaces/Card.jsx"},{"name":"Terminal","sourcePath":"components/surfaces/Terminal.jsx"}],"sourceHashes":{"components/core/Badge.jsx":"50c45f49da35","components/core/Button.jsx":"087dcdc50d45","components/core/CubeMark.jsx":"7a96e1741919","components/core/Tag.jsx":"ea1e944a96a7","components/forms/Checkbox.jsx":"592838bb9779","components/forms/Field.jsx":"196f83876689","components/forms/Input.jsx":"26553d450868","components/forms/Radio.jsx":"716134d10b87","components/forms/Select.jsx":"69de0b5bcb27","components/forms/Switch.jsx":"a69c505754b7","components/forms/Textarea.jsx":"b3ed8158d293","components/icons/Icon.jsx":"b15d55d54fda","components/icons/IconButton.jsx":"d527f3ed7682","components/surfaces/Card.jsx":"9207500d3b6e","components/surfaces/Terminal.jsx":"30e901262a42"},"inlinedExternals":[],"unexposedExports":[]} */
|
|||
|
|
|
|||
|
|
(() => {
|
|||
|
|
|
|||
|
|
const __ds_ns = (window.CubeCraftLabsDesignSystem_2b6768 = window.CubeCraftLabsDesignSystem_2b6768 || {});
|
|||
|
|
|
|||
|
|
const __ds_scope = {};
|
|||
|
|
|
|||
|
|
(__ds_ns.__errors = __ds_ns.__errors || []);
|
|||
|
|
|
|||
|
|
// components/core/Badge.jsx
|
|||
|
|
try { (() => {
|
|||
|
|
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|||
|
|
/**
|
|||
|
|
* Badge — small status/label chip. Square, outlined, lowercase mono.
|
|||
|
|
* Tones: default (gold), success (green), error (red), muted (gray).
|
|||
|
|
*/
|
|||
|
|
function Badge({
|
|||
|
|
tone = "default",
|
|||
|
|
children,
|
|||
|
|
style,
|
|||
|
|
...rest
|
|||
|
|
}) {
|
|||
|
|
const tones = {
|
|||
|
|
default: {
|
|||
|
|
color: "var(--ccl-gold, #8f7ae0)",
|
|||
|
|
border: "var(--ccl-gold, #8f7ae0)"
|
|||
|
|
},
|
|||
|
|
success: {
|
|||
|
|
color: "var(--ccl-green, #98c379)",
|
|||
|
|
border: "var(--ccl-green, #98c379)"
|
|||
|
|
},
|
|||
|
|
error: {
|
|||
|
|
color: "var(--ccl-red, #e06c75)",
|
|||
|
|
border: "var(--ccl-red, #e06c75)"
|
|||
|
|
},
|
|||
|
|
muted: {
|
|||
|
|
color: "var(--ccl-text-muted, #6b6b6b)",
|
|||
|
|
border: "var(--ccl-border-2, #333333)"
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
const t = tones[tone] || tones.default;
|
|||
|
|
return /*#__PURE__*/React.createElement("span", _extends({
|
|||
|
|
style: {
|
|||
|
|
fontFamily: "var(--font-mono, 'JetBrains Mono', monospace)",
|
|||
|
|
fontSize: "11px",
|
|||
|
|
fontWeight: 500,
|
|||
|
|
letterSpacing: "0.06em",
|
|||
|
|
textTransform: "lowercase",
|
|||
|
|
padding: "2px 8px",
|
|||
|
|
borderRadius: 0,
|
|||
|
|
border: `1px solid ${t.border}`,
|
|||
|
|
color: t.color,
|
|||
|
|
background: "transparent",
|
|||
|
|
lineHeight: 1.4,
|
|||
|
|
display: "inline-flex",
|
|||
|
|
alignItems: "center",
|
|||
|
|
gap: "6px",
|
|||
|
|
...style
|
|||
|
|
}
|
|||
|
|
}, rest), children);
|
|||
|
|
}
|
|||
|
|
Object.assign(__ds_scope, { Badge });
|
|||
|
|
})(); } catch (e) { __ds_ns.__errors.push({ path: "components/core/Badge.jsx", error: String((e && e.message) || e) }); }
|
|||
|
|
|
|||
|
|
// components/core/Button.jsx
|
|||
|
|
try { (() => {
|
|||
|
|
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|||
|
|
/**
|
|||
|
|
* Button — CubeCraftLabs action. Square corners, uppercase, mono, tracked.
|
|||
|
|
* Variants: primary (gold fill), secondary (gold outline), ghost (text only).
|
|||
|
|
*/
|
|||
|
|
function Button({
|
|||
|
|
variant = "primary",
|
|||
|
|
size = "md",
|
|||
|
|
disabled = false,
|
|||
|
|
type = "button",
|
|||
|
|
children,
|
|||
|
|
style,
|
|||
|
|
...rest
|
|||
|
|
}) {
|
|||
|
|
const [hover, setHover] = React.useState(false);
|
|||
|
|
const [active, setActive] = React.useState(false);
|
|||
|
|
const sizes = {
|
|||
|
|
sm: {
|
|||
|
|
padding: "6px 12px",
|
|||
|
|
fontSize: "11px"
|
|||
|
|
},
|
|||
|
|
md: {
|
|||
|
|
padding: "9px 18px",
|
|||
|
|
fontSize: "12px"
|
|||
|
|
},
|
|||
|
|
lg: {
|
|||
|
|
padding: "12px 24px",
|
|||
|
|
fontSize: "13px"
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
const base = {
|
|||
|
|
fontFamily: "var(--font-mono, 'JetBrains Mono', monospace)",
|
|||
|
|
fontWeight: 700,
|
|||
|
|
letterSpacing: "0.08em",
|
|||
|
|
textTransform: "uppercase",
|
|||
|
|
borderRadius: 0,
|
|||
|
|
cursor: disabled ? "not-allowed" : "pointer",
|
|||
|
|
opacity: disabled ? 0.4 : 1,
|
|||
|
|
transition: "background var(--dur-fast,100ms) var(--ease-out), color var(--dur-fast,100ms) var(--ease-out), border-color var(--dur-fast,100ms) var(--ease-out)",
|
|||
|
|
lineHeight: 1,
|
|||
|
|
display: "inline-flex",
|
|||
|
|
alignItems: "center",
|
|||
|
|
justifyContent: "center",
|
|||
|
|
gap: "8px",
|
|||
|
|
...sizes[size]
|
|||
|
|
};
|
|||
|
|
const variants = {
|
|||
|
|
primary: {
|
|||
|
|
background: hover ? "var(--ccl-gold-dim, #7a63cc)" : "var(--ccl-gold, #8f7ae0)",
|
|||
|
|
color: "var(--ccl-ink, #2a2431)",
|
|||
|
|
border: "1.5px solid transparent"
|
|||
|
|
},
|
|||
|
|
secondary: {
|
|||
|
|
background: hover ? "rgba(143,122,224,0.12)" : "transparent",
|
|||
|
|
color: "var(--ccl-gold, #8f7ae0)",
|
|||
|
|
border: "1.5px solid var(--ccl-gold, #8f7ae0)"
|
|||
|
|
},
|
|||
|
|
ghost: {
|
|||
|
|
background: "transparent",
|
|||
|
|
color: hover ? "var(--ccl-gold, #8f7ae0)" : "var(--ccl-text, #d4d4d4)",
|
|||
|
|
border: "1.5px solid transparent"
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
return /*#__PURE__*/React.createElement("button", _extends({
|
|||
|
|
type: type,
|
|||
|
|
disabled: disabled,
|
|||
|
|
onMouseEnter: () => setHover(true),
|
|||
|
|
onMouseLeave: () => {
|
|||
|
|
setHover(false);
|
|||
|
|
setActive(false);
|
|||
|
|
},
|
|||
|
|
onMouseDown: () => setActive(true),
|
|||
|
|
onMouseUp: () => setActive(false),
|
|||
|
|
style: {
|
|||
|
|
...base,
|
|||
|
|
...variants[variant],
|
|||
|
|
transform: active && !disabled ? "translateY(1px)" : "none",
|
|||
|
|
...style
|
|||
|
|
}
|
|||
|
|
}, rest), children);
|
|||
|
|
}
|
|||
|
|
Object.assign(__ds_scope, { Button });
|
|||
|
|
})(); } catch (e) { __ds_ns.__errors.push({ path: "components/core/Button.jsx", error: String((e && e.message) || e) }); }
|
|||
|
|
|
|||
|
|
// components/core/CubeMark.jsx
|
|||
|
|
try { (() => {
|
|||
|
|
/**
|
|||
|
|
* CubeMark — the CubeCraftLabs isometric cube, rendered as an inline SVG.
|
|||
|
|
* One geometry, three renderings: wireframe (default), exploded (primary
|
|||
|
|
* brand mark), and grid (graph-paper stamp).
|
|||
|
|
*/
|
|||
|
|
function CubeMark({
|
|||
|
|
variant = "wireframe",
|
|||
|
|
size = 48,
|
|||
|
|
color = "#8f7ae0",
|
|||
|
|
strokeWidth,
|
|||
|
|
style,
|
|||
|
|
...rest
|
|||
|
|
}) {
|
|||
|
|
const common = {
|
|||
|
|
width: size,
|
|||
|
|
height: size,
|
|||
|
|
viewBox: "0 0 200 200",
|
|||
|
|
fill: "none",
|
|||
|
|
xmlns: "http://www.w3.org/2000/svg",
|
|||
|
|
style: {
|
|||
|
|
display: "block",
|
|||
|
|
...style
|
|||
|
|
},
|
|||
|
|
...rest
|
|||
|
|
};
|
|||
|
|
if (variant === "exploded") {
|
|||
|
|
return /*#__PURE__*/React.createElement("svg", common, /*#__PURE__*/React.createElement("polygon", {
|
|||
|
|
points: "100,26 144,51 100,76 56,51",
|
|||
|
|
fill: color,
|
|||
|
|
fillOpacity: "0.14",
|
|||
|
|
stroke: color,
|
|||
|
|
strokeWidth: strokeWidth ?? 2.4,
|
|||
|
|
strokeLinejoin: "miter"
|
|||
|
|
}), /*#__PURE__*/React.createElement("polygon", {
|
|||
|
|
points: "44,80 88,105 88,157 44,132",
|
|||
|
|
fill: color,
|
|||
|
|
fillOpacity: "0.05",
|
|||
|
|
stroke: color,
|
|||
|
|
strokeWidth: strokeWidth ?? 2.4,
|
|||
|
|
strokeLinejoin: "miter"
|
|||
|
|
}), /*#__PURE__*/React.createElement("polygon", {
|
|||
|
|
points: "156,80 112,105 112,157 156,132",
|
|||
|
|
fill: color,
|
|||
|
|
fillOpacity: "0.02",
|
|||
|
|
stroke: color,
|
|||
|
|
strokeWidth: strokeWidth ?? 2.4,
|
|||
|
|
strokeLinejoin: "miter"
|
|||
|
|
}), /*#__PURE__*/React.createElement("g", {
|
|||
|
|
stroke: color,
|
|||
|
|
strokeWidth: "1.2",
|
|||
|
|
strokeOpacity: "0.35",
|
|||
|
|
strokeDasharray: "3 4"
|
|||
|
|
}, /*#__PURE__*/React.createElement("line", {
|
|||
|
|
x1: "100",
|
|||
|
|
y1: "76",
|
|||
|
|
x2: "100",
|
|||
|
|
y2: "100"
|
|||
|
|
}), /*#__PURE__*/React.createElement("line", {
|
|||
|
|
x1: "88",
|
|||
|
|
y1: "105",
|
|||
|
|
x2: "97",
|
|||
|
|
y2: "100"
|
|||
|
|
}), /*#__PURE__*/React.createElement("line", {
|
|||
|
|
x1: "112",
|
|||
|
|
y1: "105",
|
|||
|
|
x2: "103",
|
|||
|
|
y2: "100"
|
|||
|
|
})), /*#__PURE__*/React.createElement("g", {
|
|||
|
|
stroke: color,
|
|||
|
|
strokeWidth: "1",
|
|||
|
|
strokeOpacity: "0.22"
|
|||
|
|
}, /*#__PURE__*/React.createElement("polygon", {
|
|||
|
|
points: "100,82 117,91 100,100 83,91",
|
|||
|
|
fill: "none"
|
|||
|
|
}), /*#__PURE__*/React.createElement("line", {
|
|||
|
|
x1: "83",
|
|||
|
|
y1: "91",
|
|||
|
|
x2: "83",
|
|||
|
|
y2: "110"
|
|||
|
|
}), /*#__PURE__*/React.createElement("line", {
|
|||
|
|
x1: "117",
|
|||
|
|
y1: "91",
|
|||
|
|
x2: "117",
|
|||
|
|
y2: "110"
|
|||
|
|
}), /*#__PURE__*/React.createElement("line", {
|
|||
|
|
x1: "100",
|
|||
|
|
y1: "100",
|
|||
|
|
x2: "100",
|
|||
|
|
y2: "119"
|
|||
|
|
}), /*#__PURE__*/React.createElement("line", {
|
|||
|
|
x1: "83",
|
|||
|
|
y1: "110",
|
|||
|
|
x2: "100",
|
|||
|
|
y2: "119"
|
|||
|
|
}), /*#__PURE__*/React.createElement("line", {
|
|||
|
|
x1: "117",
|
|||
|
|
y1: "110",
|
|||
|
|
x2: "100",
|
|||
|
|
y2: "119"
|
|||
|
|
})));
|
|||
|
|
}
|
|||
|
|
if (variant === "grid") {
|
|||
|
|
return /*#__PURE__*/React.createElement("svg", common, /*#__PURE__*/React.createElement("g", {
|
|||
|
|
stroke: "#333333",
|
|||
|
|
strokeWidth: "0.7"
|
|||
|
|
}, [20, 52, 84, 116, 148, 180].map(y => /*#__PURE__*/React.createElement("line", {
|
|||
|
|
key: "h" + y,
|
|||
|
|
x1: "20",
|
|||
|
|
y1: y,
|
|||
|
|
x2: "180",
|
|||
|
|
y2: y
|
|||
|
|
})), [20, 52, 84, 116, 148, 180].map(x => /*#__PURE__*/React.createElement("line", {
|
|||
|
|
key: "v" + x,
|
|||
|
|
x1: x,
|
|||
|
|
y1: "20",
|
|||
|
|
x2: x,
|
|||
|
|
y2: "180"
|
|||
|
|
}))), /*#__PURE__*/React.createElement("g", {
|
|||
|
|
stroke: color,
|
|||
|
|
strokeWidth: "1",
|
|||
|
|
strokeOpacity: "0.55"
|
|||
|
|
}, /*#__PURE__*/React.createElement("line", {
|
|||
|
|
x1: "100",
|
|||
|
|
y1: "10",
|
|||
|
|
x2: "100",
|
|||
|
|
y2: "26"
|
|||
|
|
}), /*#__PURE__*/React.createElement("line", {
|
|||
|
|
x1: "100",
|
|||
|
|
y1: "174",
|
|||
|
|
x2: "100",
|
|||
|
|
y2: "190"
|
|||
|
|
}), /*#__PURE__*/React.createElement("line", {
|
|||
|
|
x1: "10",
|
|||
|
|
y1: "100",
|
|||
|
|
x2: "26",
|
|||
|
|
y2: "100"
|
|||
|
|
}), /*#__PURE__*/React.createElement("line", {
|
|||
|
|
x1: "174",
|
|||
|
|
y1: "100",
|
|||
|
|
x2: "190",
|
|||
|
|
y2: "100"
|
|||
|
|
})), /*#__PURE__*/React.createElement("polygon", {
|
|||
|
|
points: "100,48 144,73 100,98 56,73",
|
|||
|
|
fill: color,
|
|||
|
|
fillOpacity: "0.12"
|
|||
|
|
}), /*#__PURE__*/React.createElement("polygon", {
|
|||
|
|
points: "56,73 100,98 100,150 56,125",
|
|||
|
|
fill: color,
|
|||
|
|
fillOpacity: "0.05"
|
|||
|
|
}), /*#__PURE__*/React.createElement("g", {
|
|||
|
|
stroke: color,
|
|||
|
|
strokeWidth: strokeWidth ?? 2.4,
|
|||
|
|
strokeLinejoin: "miter"
|
|||
|
|
}, /*#__PURE__*/React.createElement("polygon", {
|
|||
|
|
points: "100,48 144,73 100,98 56,73",
|
|||
|
|
fill: "none"
|
|||
|
|
}), /*#__PURE__*/React.createElement("line", {
|
|||
|
|
x1: "144",
|
|||
|
|
y1: "73",
|
|||
|
|
x2: "144",
|
|||
|
|
y2: "125"
|
|||
|
|
}), /*#__PURE__*/React.createElement("line", {
|
|||
|
|
x1: "100",
|
|||
|
|
y1: "98",
|
|||
|
|
x2: "100",
|
|||
|
|
y2: "150"
|
|||
|
|
}), /*#__PURE__*/React.createElement("line", {
|
|||
|
|
x1: "56",
|
|||
|
|
y1: "73",
|
|||
|
|
x2: "56",
|
|||
|
|
y2: "125"
|
|||
|
|
}), /*#__PURE__*/React.createElement("line", {
|
|||
|
|
x1: "56",
|
|||
|
|
y1: "125",
|
|||
|
|
x2: "100",
|
|||
|
|
y2: "150"
|
|||
|
|
}), /*#__PURE__*/React.createElement("line", {
|
|||
|
|
x1: "144",
|
|||
|
|
y1: "125",
|
|||
|
|
x2: "100",
|
|||
|
|
y2: "150"
|
|||
|
|
})));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// wireframe (default)
|
|||
|
|
return /*#__PURE__*/React.createElement("svg", common, /*#__PURE__*/React.createElement("polygon", {
|
|||
|
|
points: "100,44 146,70 100,96 54,70",
|
|||
|
|
fill: color,
|
|||
|
|
fillOpacity: "0.10"
|
|||
|
|
}), /*#__PURE__*/React.createElement("polygon", {
|
|||
|
|
points: "54,70 100,96 100,150 54,124",
|
|||
|
|
fill: color,
|
|||
|
|
fillOpacity: "0.045"
|
|||
|
|
}), /*#__PURE__*/React.createElement("polygon", {
|
|||
|
|
points: "146,70 100,96 100,150 146,124",
|
|||
|
|
fill: color,
|
|||
|
|
fillOpacity: "0.02"
|
|||
|
|
}), /*#__PURE__*/React.createElement("g", {
|
|||
|
|
stroke: color,
|
|||
|
|
strokeWidth: strokeWidth ?? 2.4,
|
|||
|
|
strokeLinejoin: "miter"
|
|||
|
|
}, /*#__PURE__*/React.createElement("polygon", {
|
|||
|
|
points: "100,44 146,70 100,96 54,70",
|
|||
|
|
fill: "none"
|
|||
|
|
}), /*#__PURE__*/React.createElement("line", {
|
|||
|
|
x1: "146",
|
|||
|
|
y1: "70",
|
|||
|
|
x2: "146",
|
|||
|
|
y2: "124"
|
|||
|
|
}), /*#__PURE__*/React.createElement("line", {
|
|||
|
|
x1: "100",
|
|||
|
|
y1: "96",
|
|||
|
|
x2: "100",
|
|||
|
|
y2: "150"
|
|||
|
|
}), /*#__PURE__*/React.createElement("line", {
|
|||
|
|
x1: "54",
|
|||
|
|
y1: "70",
|
|||
|
|
x2: "54",
|
|||
|
|
y2: "124"
|
|||
|
|
}), /*#__PURE__*/React.createElement("line", {
|
|||
|
|
x1: "54",
|
|||
|
|
y1: "124",
|
|||
|
|
x2: "100",
|
|||
|
|
y2: "150"
|
|||
|
|
}), /*#__PURE__*/React.createElement("line", {
|
|||
|
|
x1: "146",
|
|||
|
|
y1: "124",
|
|||
|
|
x2: "100",
|
|||
|
|
y2: "150"
|
|||
|
|
})));
|
|||
|
|
}
|
|||
|
|
Object.assign(__ds_scope, { CubeMark });
|
|||
|
|
})(); } catch (e) { __ds_ns.__errors.push({ path: "components/core/CubeMark.jsx", error: String((e && e.message) || e) }); }
|
|||
|
|
|
|||
|
|
// components/core/Tag.jsx
|
|||
|
|
try { (() => {
|
|||
|
|
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|||
|
|
/**
|
|||
|
|
* Tag — lowercase content tag. Square, mono, hairline border. Optional leading
|
|||
|
|
* "#" and a removable "×". Distinct from Badge: Tag is user/content metadata
|
|||
|
|
* (categories, versions, filters); Badge is system status.
|
|||
|
|
*/
|
|||
|
|
function Tag({
|
|||
|
|
children,
|
|||
|
|
hash = false,
|
|||
|
|
onRemove,
|
|||
|
|
style,
|
|||
|
|
...rest
|
|||
|
|
}) {
|
|||
|
|
const [hover, setHover] = React.useState(false);
|
|||
|
|
return /*#__PURE__*/React.createElement("span", _extends({
|
|||
|
|
onMouseEnter: () => setHover(true),
|
|||
|
|
onMouseLeave: () => setHover(false),
|
|||
|
|
style: {
|
|||
|
|
fontFamily: "var(--font-mono, 'JetBrains Mono', monospace)",
|
|||
|
|
fontSize: "11px",
|
|||
|
|
fontWeight: 500,
|
|||
|
|
letterSpacing: "0.04em",
|
|||
|
|
textTransform: "lowercase",
|
|||
|
|
padding: "3px 8px",
|
|||
|
|
borderRadius: 0,
|
|||
|
|
border: `1px solid ${hover && onRemove ? "var(--ccl-gold, #8f7ae0)" : "var(--ccl-border-2, #333333)"}`,
|
|||
|
|
color: hover && onRemove ? "var(--ccl-gold, #8f7ae0)" : "var(--ccl-text, #d4d4d4)",
|
|||
|
|
background: "var(--ccl-charcoal-2, #202020)",
|
|||
|
|
lineHeight: 1.3,
|
|||
|
|
display: "inline-flex",
|
|||
|
|
alignItems: "center",
|
|||
|
|
gap: "5px",
|
|||
|
|
transition: "color 100ms, border-color 100ms",
|
|||
|
|
...style
|
|||
|
|
}
|
|||
|
|
}, rest), hash ? /*#__PURE__*/React.createElement("span", {
|
|||
|
|
style: {
|
|||
|
|
color: "var(--ccl-text-muted, #6b6b6b)"
|
|||
|
|
}
|
|||
|
|
}, "#") : null, children, onRemove ? /*#__PURE__*/React.createElement("button", {
|
|||
|
|
type: "button",
|
|||
|
|
"aria-label": "remove",
|
|||
|
|
onClick: e => {
|
|||
|
|
e.stopPropagation();
|
|||
|
|
onRemove(e);
|
|||
|
|
},
|
|||
|
|
style: {
|
|||
|
|
all: "unset",
|
|||
|
|
cursor: "pointer",
|
|||
|
|
fontSize: "12px",
|
|||
|
|
lineHeight: 1,
|
|||
|
|
marginLeft: "1px",
|
|||
|
|
color: "inherit",
|
|||
|
|
opacity: 0.7
|
|||
|
|
}
|
|||
|
|
}, "\u2717") : null);
|
|||
|
|
}
|
|||
|
|
Object.assign(__ds_scope, { Tag });
|
|||
|
|
})(); } catch (e) { __ds_ns.__errors.push({ path: "components/core/Tag.jsx", error: String((e && e.message) || e) }); }
|
|||
|
|
|
|||
|
|
// components/forms/Checkbox.jsx
|
|||
|
|
try { (() => {
|
|||
|
|
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|||
|
|
/**
|
|||
|
|
* Checkbox — square (of course) box with a gold check when on. Custom-drawn so
|
|||
|
|
* it matches the brand exactly; wraps a hidden native input for a11y + forms.
|
|||
|
|
*/
|
|||
|
|
function Checkbox({
|
|||
|
|
checked,
|
|||
|
|
defaultChecked,
|
|||
|
|
disabled = false,
|
|||
|
|
label,
|
|||
|
|
onChange,
|
|||
|
|
style,
|
|||
|
|
...rest
|
|||
|
|
}) {
|
|||
|
|
const isControlled = checked !== undefined;
|
|||
|
|
const [internal, setInternal] = React.useState(!!defaultChecked);
|
|||
|
|
const on = isControlled ? checked : internal;
|
|||
|
|
const toggle = e => {
|
|||
|
|
if (disabled) return;
|
|||
|
|
if (!isControlled) setInternal(e.target.checked);
|
|||
|
|
onChange && onChange(e);
|
|||
|
|
};
|
|||
|
|
return /*#__PURE__*/React.createElement("label", {
|
|||
|
|
style: {
|
|||
|
|
display: "inline-flex",
|
|||
|
|
alignItems: "center",
|
|||
|
|
gap: "9px",
|
|||
|
|
cursor: disabled ? "not-allowed" : "pointer",
|
|||
|
|
opacity: disabled ? 0.5 : 1,
|
|||
|
|
fontFamily: "var(--font-mono, 'JetBrains Mono', monospace)",
|
|||
|
|
fontSize: "13px",
|
|||
|
|
color: "var(--ccl-text, #d4d4d4)",
|
|||
|
|
userSelect: "none",
|
|||
|
|
...style
|
|||
|
|
}
|
|||
|
|
}, /*#__PURE__*/React.createElement("input", _extends({
|
|||
|
|
type: "checkbox",
|
|||
|
|
checked: on,
|
|||
|
|
disabled: disabled,
|
|||
|
|
onChange: toggle
|
|||
|
|
}, rest, {
|
|||
|
|
style: {
|
|||
|
|
position: "absolute",
|
|||
|
|
opacity: 0,
|
|||
|
|
width: 0,
|
|||
|
|
height: 0
|
|||
|
|
}
|
|||
|
|
})), /*#__PURE__*/React.createElement("span", {
|
|||
|
|
"aria-hidden": "true",
|
|||
|
|
style: {
|
|||
|
|
width: "16px",
|
|||
|
|
height: "16px",
|
|||
|
|
flex: "none",
|
|||
|
|
border: `1px solid ${on ? "var(--ccl-gold, #8f7ae0)" : "var(--ccl-border-2, #333333)"}`,
|
|||
|
|
background: on ? "var(--ccl-gold, #8f7ae0)" : "var(--ccl-charcoal-3, #262626)",
|
|||
|
|
color: "var(--ccl-ink, #2a2431)",
|
|||
|
|
display: "inline-flex",
|
|||
|
|
alignItems: "center",
|
|||
|
|
justifyContent: "center",
|
|||
|
|
fontSize: "12px",
|
|||
|
|
fontWeight: 700,
|
|||
|
|
lineHeight: 1,
|
|||
|
|
transition: "background var(--dur-fast, 100ms), border-color var(--dur-fast, 100ms)"
|
|||
|
|
}
|
|||
|
|
}, on ? "\u2713" : ""), label != null ? /*#__PURE__*/React.createElement("span", null, label) : null);
|
|||
|
|
}
|
|||
|
|
Object.assign(__ds_scope, { Checkbox });
|
|||
|
|
})(); } catch (e) { __ds_ns.__errors.push({ path: "components/forms/Checkbox.jsx", error: String((e && e.message) || e) }); }
|
|||
|
|
|
|||
|
|
// components/forms/Field.jsx
|
|||
|
|
try { (() => {
|
|||
|
|
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|||
|
|
/**
|
|||
|
|
* Field — form-row wrapper. An uppercase tracked label above the control, with
|
|||
|
|
* an optional hint and an error message that replaces the hint when present.
|
|||
|
|
* Wrap any Input/Textarea/Select/Checkbox group.
|
|||
|
|
*/
|
|||
|
|
function Field({
|
|||
|
|
label,
|
|||
|
|
hint,
|
|||
|
|
error,
|
|||
|
|
required = false,
|
|||
|
|
htmlFor,
|
|||
|
|
children,
|
|||
|
|
style,
|
|||
|
|
...rest
|
|||
|
|
}) {
|
|||
|
|
return /*#__PURE__*/React.createElement("div", _extends({
|
|||
|
|
style: {
|
|||
|
|
display: "flex",
|
|||
|
|
flexDirection: "column",
|
|||
|
|
gap: "7px",
|
|||
|
|
...style
|
|||
|
|
}
|
|||
|
|
}, rest), label != null ? /*#__PURE__*/React.createElement("label", {
|
|||
|
|
htmlFor: htmlFor,
|
|||
|
|
style: {
|
|||
|
|
fontFamily: "var(--font-mono, 'JetBrains Mono', monospace)",
|
|||
|
|
fontSize: "10px",
|
|||
|
|
fontWeight: 500,
|
|||
|
|
letterSpacing: "0.1em",
|
|||
|
|
textTransform: "uppercase",
|
|||
|
|
color: "var(--ccl-text-muted, #6b6b6b)",
|
|||
|
|
display: "inline-flex",
|
|||
|
|
gap: "5px"
|
|||
|
|
}
|
|||
|
|
}, label, required ? /*#__PURE__*/React.createElement("span", {
|
|||
|
|
style: {
|
|||
|
|
color: "var(--ccl-gold, #8f7ae0)"
|
|||
|
|
}
|
|||
|
|
}, "*") : null) : null, children, error != null ? /*#__PURE__*/React.createElement("span", {
|
|||
|
|
style: {
|
|||
|
|
fontFamily: "var(--font-mono, 'JetBrains Mono', monospace)",
|
|||
|
|
fontSize: "11px",
|
|||
|
|
color: "var(--ccl-red, #e06c75)",
|
|||
|
|
letterSpacing: "0.02em"
|
|||
|
|
}
|
|||
|
|
}, error) : hint != null ? /*#__PURE__*/React.createElement("span", {
|
|||
|
|
style: {
|
|||
|
|
fontFamily: "var(--font-mono, 'JetBrains Mono', monospace)",
|
|||
|
|
fontSize: "11px",
|
|||
|
|
color: "var(--ccl-text-muted, #6b6b6b)",
|
|||
|
|
letterSpacing: "0.02em",
|
|||
|
|
lineHeight: 1.5
|
|||
|
|
}
|
|||
|
|
}, hint) : null);
|
|||
|
|
}
|
|||
|
|
Object.assign(__ds_scope, { Field });
|
|||
|
|
})(); } catch (e) { __ds_ns.__errors.push({ path: "components/forms/Field.jsx", error: String((e && e.message) || e) }); }
|
|||
|
|
|
|||
|
|
// components/forms/Input.jsx
|
|||
|
|
try { (() => {
|
|||
|
|
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|||
|
|
/**
|
|||
|
|
* Input — single-line text field. Square, mono, charcoal-3 well with a
|
|||
|
|
* hairline border that turns gold on focus. Optional leading terminal
|
|||
|
|
* "prompt" glyph and an invalid (red) state.
|
|||
|
|
*/
|
|||
|
|
function Input({
|
|||
|
|
size = "md",
|
|||
|
|
invalid = false,
|
|||
|
|
disabled = false,
|
|||
|
|
prompt,
|
|||
|
|
type = "text",
|
|||
|
|
style,
|
|||
|
|
...rest
|
|||
|
|
}) {
|
|||
|
|
const [focus, setFocus] = React.useState(false);
|
|||
|
|
const sizes = {
|
|||
|
|
sm: {
|
|||
|
|
padding: "6px 10px",
|
|||
|
|
fontSize: "12px"
|
|||
|
|
},
|
|||
|
|
md: {
|
|||
|
|
padding: "9px 12px",
|
|||
|
|
fontSize: "13px"
|
|||
|
|
},
|
|||
|
|
lg: {
|
|||
|
|
padding: "12px 14px",
|
|||
|
|
fontSize: "14px"
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
const borderColor = invalid ? "var(--ccl-red, #e06c75)" : focus ? "var(--ccl-gold, #8f7ae0)" : "var(--ccl-border-2, #333333)";
|
|||
|
|
const field = /*#__PURE__*/React.createElement("input", _extends({
|
|||
|
|
type: type,
|
|||
|
|
disabled: disabled,
|
|||
|
|
onFocus: e => {
|
|||
|
|
setFocus(true);
|
|||
|
|
rest.onFocus && rest.onFocus(e);
|
|||
|
|
},
|
|||
|
|
onBlur: e => {
|
|||
|
|
setFocus(false);
|
|||
|
|
rest.onBlur && rest.onBlur(e);
|
|||
|
|
}
|
|||
|
|
}, rest, {
|
|||
|
|
style: {
|
|||
|
|
fontFamily: "var(--font-mono, 'JetBrains Mono', monospace)",
|
|||
|
|
fontWeight: 400,
|
|||
|
|
color: "var(--ccl-text, #d4d4d4)",
|
|||
|
|
background: "transparent",
|
|||
|
|
border: "none",
|
|||
|
|
outline: "none",
|
|||
|
|
width: "100%",
|
|||
|
|
letterSpacing: "0.01em",
|
|||
|
|
...sizes[size],
|
|||
|
|
...(prompt ? {
|
|||
|
|
paddingLeft: 0
|
|||
|
|
} : null),
|
|||
|
|
...(disabled ? {
|
|||
|
|
cursor: "not-allowed"
|
|||
|
|
} : null)
|
|||
|
|
}
|
|||
|
|
}));
|
|||
|
|
return /*#__PURE__*/React.createElement("div", {
|
|||
|
|
style: {
|
|||
|
|
display: "flex",
|
|||
|
|
alignItems: "center",
|
|||
|
|
background: "var(--ccl-charcoal-3, #262626)",
|
|||
|
|
border: `1px solid ${borderColor}`,
|
|||
|
|
borderRadius: 0,
|
|||
|
|
opacity: disabled ? 0.5 : 1,
|
|||
|
|
transition: "border-color var(--dur-fast, 100ms) var(--ease-out)",
|
|||
|
|
...style
|
|||
|
|
}
|
|||
|
|
}, prompt ? /*#__PURE__*/React.createElement("span", {
|
|||
|
|
"aria-hidden": "true",
|
|||
|
|
style: {
|
|||
|
|
paddingLeft: sizes[size].padding.split(" ")[1],
|
|||
|
|
color: "var(--ccl-gold, #8f7ae0)",
|
|||
|
|
fontFamily: "var(--font-mono, 'JetBrains Mono', monospace)",
|
|||
|
|
fontSize: sizes[size].fontSize,
|
|||
|
|
fontWeight: 500,
|
|||
|
|
userSelect: "none"
|
|||
|
|
}
|
|||
|
|
}, prompt === true ? "$" : prompt) : null, field);
|
|||
|
|
}
|
|||
|
|
Object.assign(__ds_scope, { Input });
|
|||
|
|
})(); } catch (e) { __ds_ns.__errors.push({ path: "components/forms/Input.jsx", error: String((e && e.message) || e) }); }
|
|||
|
|
|
|||
|
|
// components/forms/Radio.jsx
|
|||
|
|
try { (() => {
|
|||
|
|
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|||
|
|
/**
|
|||
|
|
* Radio — a single radio option. On brand, it's a square with a smaller filled
|
|||
|
|
* gold square inside when selected (never a circle). Use inside RadioGroup or
|
|||
|
|
* wire `name`/`checked` yourself.
|
|||
|
|
*/
|
|||
|
|
function Radio({
|
|||
|
|
checked,
|
|||
|
|
defaultChecked,
|
|||
|
|
disabled = false,
|
|||
|
|
label,
|
|||
|
|
onChange,
|
|||
|
|
style,
|
|||
|
|
...rest
|
|||
|
|
}) {
|
|||
|
|
const isControlled = checked !== undefined;
|
|||
|
|
const [internal, setInternal] = React.useState(!!defaultChecked);
|
|||
|
|
const on = isControlled ? checked : internal;
|
|||
|
|
const pick = e => {
|
|||
|
|
if (disabled) return;
|
|||
|
|
if (!isControlled) setInternal(e.target.checked);
|
|||
|
|
onChange && onChange(e);
|
|||
|
|
};
|
|||
|
|
return /*#__PURE__*/React.createElement("label", {
|
|||
|
|
style: {
|
|||
|
|
display: "inline-flex",
|
|||
|
|
alignItems: "center",
|
|||
|
|
gap: "9px",
|
|||
|
|
cursor: disabled ? "not-allowed" : "pointer",
|
|||
|
|
opacity: disabled ? 0.5 : 1,
|
|||
|
|
fontFamily: "var(--font-mono, 'JetBrains Mono', monospace)",
|
|||
|
|
fontSize: "13px",
|
|||
|
|
color: "var(--ccl-text, #d4d4d4)",
|
|||
|
|
userSelect: "none",
|
|||
|
|
...style
|
|||
|
|
}
|
|||
|
|
}, /*#__PURE__*/React.createElement("input", _extends({
|
|||
|
|
type: "radio",
|
|||
|
|
checked: on,
|
|||
|
|
disabled: disabled,
|
|||
|
|
onChange: pick
|
|||
|
|
}, rest, {
|
|||
|
|
style: {
|
|||
|
|
position: "absolute",
|
|||
|
|
opacity: 0,
|
|||
|
|
width: 0,
|
|||
|
|
height: 0
|
|||
|
|
}
|
|||
|
|
})), /*#__PURE__*/React.createElement("span", {
|
|||
|
|
"aria-hidden": "true",
|
|||
|
|
style: {
|
|||
|
|
width: "16px",
|
|||
|
|
height: "16px",
|
|||
|
|
flex: "none",
|
|||
|
|
border: `1px solid ${on ? "var(--ccl-gold, #8f7ae0)" : "var(--ccl-border-2, #333333)"}`,
|
|||
|
|
background: "var(--ccl-charcoal-3, #262626)",
|
|||
|
|
display: "inline-flex",
|
|||
|
|
alignItems: "center",
|
|||
|
|
justifyContent: "center",
|
|||
|
|
transition: "border-color var(--dur-fast, 100ms)"
|
|||
|
|
}
|
|||
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|||
|
|
style: {
|
|||
|
|
width: "8px",
|
|||
|
|
height: "8px",
|
|||
|
|
background: on ? "var(--ccl-gold, #8f7ae0)" : "transparent",
|
|||
|
|
transition: "background var(--dur-fast, 100ms)"
|
|||
|
|
}
|
|||
|
|
})), label != null ? /*#__PURE__*/React.createElement("span", null, label) : null);
|
|||
|
|
}
|
|||
|
|
Object.assign(__ds_scope, { Radio });
|
|||
|
|
})(); } catch (e) { __ds_ns.__errors.push({ path: "components/forms/Radio.jsx", error: String((e && e.message) || e) }); }
|
|||
|
|
|
|||
|
|
// components/forms/Select.jsx
|
|||
|
|
try { (() => {
|
|||
|
|
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|||
|
|
/**
|
|||
|
|
* Select — native select styled to match the CubeCraftLabs well. Square,
|
|||
|
|
* mono, custom gold chevron, gold focus border.
|
|||
|
|
*/
|
|||
|
|
function Select({
|
|||
|
|
size = "md",
|
|||
|
|
invalid = false,
|
|||
|
|
disabled = false,
|
|||
|
|
children,
|
|||
|
|
style,
|
|||
|
|
...rest
|
|||
|
|
}) {
|
|||
|
|
const [focus, setFocus] = React.useState(false);
|
|||
|
|
const sizes = {
|
|||
|
|
sm: {
|
|||
|
|
padding: "6px 30px 6px 10px",
|
|||
|
|
fontSize: "12px"
|
|||
|
|
},
|
|||
|
|
md: {
|
|||
|
|
padding: "9px 32px 9px 12px",
|
|||
|
|
fontSize: "13px"
|
|||
|
|
},
|
|||
|
|
lg: {
|
|||
|
|
padding: "12px 36px 12px 14px",
|
|||
|
|
fontSize: "14px"
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
const borderColor = invalid ? "var(--ccl-red, #e06c75)" : focus ? "var(--ccl-gold, #8f7ae0)" : "var(--ccl-border-2, #333333)";
|
|||
|
|
return /*#__PURE__*/React.createElement("div", {
|
|||
|
|
style: {
|
|||
|
|
position: "relative",
|
|||
|
|
display: "inline-flex",
|
|||
|
|
alignItems: "center",
|
|||
|
|
...style
|
|||
|
|
}
|
|||
|
|
}, /*#__PURE__*/React.createElement("select", _extends({
|
|||
|
|
disabled: disabled,
|
|||
|
|
onFocus: () => setFocus(true),
|
|||
|
|
onBlur: () => setFocus(false)
|
|||
|
|
}, rest, {
|
|||
|
|
style: {
|
|||
|
|
appearance: "none",
|
|||
|
|
WebkitAppearance: "none",
|
|||
|
|
fontFamily: "var(--font-mono, 'JetBrains Mono', monospace)",
|
|||
|
|
fontWeight: 400,
|
|||
|
|
textTransform: "uppercase",
|
|||
|
|
letterSpacing: "0.04em",
|
|||
|
|
color: "var(--ccl-text, #d4d4d4)",
|
|||
|
|
background: "var(--ccl-charcoal-3, #262626)",
|
|||
|
|
border: `1px solid ${borderColor}`,
|
|||
|
|
borderRadius: 0,
|
|||
|
|
outline: "none",
|
|||
|
|
cursor: disabled ? "not-allowed" : "pointer",
|
|||
|
|
opacity: disabled ? 0.5 : 1,
|
|||
|
|
width: "100%",
|
|||
|
|
transition: "border-color var(--dur-fast, 100ms) var(--ease-out)",
|
|||
|
|
...sizes[size]
|
|||
|
|
}
|
|||
|
|
}), children), /*#__PURE__*/React.createElement("span", {
|
|||
|
|
"aria-hidden": "true",
|
|||
|
|
style: {
|
|||
|
|
position: "absolute",
|
|||
|
|
right: "10px",
|
|||
|
|
color: "var(--ccl-gold, #8f7ae0)",
|
|||
|
|
fontSize: sizes[size].fontSize,
|
|||
|
|
pointerEvents: "none",
|
|||
|
|
lineHeight: 1
|
|||
|
|
}
|
|||
|
|
}, "\u203A"));
|
|||
|
|
}
|
|||
|
|
Object.assign(__ds_scope, { Select });
|
|||
|
|
})(); } catch (e) { __ds_ns.__errors.push({ path: "components/forms/Select.jsx", error: String((e && e.message) || e) }); }
|
|||
|
|
|
|||
|
|
// components/forms/Switch.jsx
|
|||
|
|
try { (() => {
|
|||
|
|
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|||
|
|
/**
|
|||
|
|
* Switch — square toggle. A rectangular track with a square knob that slides
|
|||
|
|
* left→right and turns the track gold when on. Brand-square, no pill shapes.
|
|||
|
|
*/
|
|||
|
|
function Switch({
|
|||
|
|
checked,
|
|||
|
|
defaultChecked,
|
|||
|
|
disabled = false,
|
|||
|
|
label,
|
|||
|
|
onChange,
|
|||
|
|
style,
|
|||
|
|
...rest
|
|||
|
|
}) {
|
|||
|
|
const isControlled = checked !== undefined;
|
|||
|
|
const [internal, setInternal] = React.useState(!!defaultChecked);
|
|||
|
|
const on = isControlled ? checked : internal;
|
|||
|
|
const toggle = e => {
|
|||
|
|
if (disabled) return;
|
|||
|
|
if (!isControlled) setInternal(e.target.checked);
|
|||
|
|
onChange && onChange(e);
|
|||
|
|
};
|
|||
|
|
return /*#__PURE__*/React.createElement("label", {
|
|||
|
|
style: {
|
|||
|
|
display: "inline-flex",
|
|||
|
|
alignItems: "center",
|
|||
|
|
gap: "10px",
|
|||
|
|
cursor: disabled ? "not-allowed" : "pointer",
|
|||
|
|
opacity: disabled ? 0.5 : 1,
|
|||
|
|
fontFamily: "var(--font-mono, 'JetBrains Mono', monospace)",
|
|||
|
|
fontSize: "13px",
|
|||
|
|
color: "var(--ccl-text, #d4d4d4)",
|
|||
|
|
userSelect: "none",
|
|||
|
|
...style
|
|||
|
|
}
|
|||
|
|
}, /*#__PURE__*/React.createElement("input", _extends({
|
|||
|
|
type: "checkbox",
|
|||
|
|
role: "switch",
|
|||
|
|
checked: on,
|
|||
|
|
disabled: disabled,
|
|||
|
|
onChange: toggle
|
|||
|
|
}, rest, {
|
|||
|
|
style: {
|
|||
|
|
position: "absolute",
|
|||
|
|
opacity: 0,
|
|||
|
|
width: 0,
|
|||
|
|
height: 0
|
|||
|
|
}
|
|||
|
|
})), /*#__PURE__*/React.createElement("span", {
|
|||
|
|
"aria-hidden": "true",
|
|||
|
|
style: {
|
|||
|
|
position: "relative",
|
|||
|
|
width: "34px",
|
|||
|
|
height: "18px",
|
|||
|
|
flex: "none",
|
|||
|
|
border: `1px solid ${on ? "var(--ccl-gold, #8f7ae0)" : "var(--ccl-border-2, #333333)"}`,
|
|||
|
|
background: on ? "rgba(143,122,224,0.22)" : "var(--ccl-charcoal-3, #262626)",
|
|||
|
|
transition: "background var(--dur-fast, 100ms), border-color var(--dur-fast, 100ms)"
|
|||
|
|
}
|
|||
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|||
|
|
style: {
|
|||
|
|
position: "absolute",
|
|||
|
|
top: "2px",
|
|||
|
|
left: on ? "18px" : "2px",
|
|||
|
|
width: "12px",
|
|||
|
|
height: "12px",
|
|||
|
|
background: on ? "var(--ccl-gold, #8f7ae0)" : "var(--ccl-text-muted, #6b6b6b)",
|
|||
|
|
transition: "left var(--dur-base, 160ms) var(--ease-out), background var(--dur-fast, 100ms)"
|
|||
|
|
}
|
|||
|
|
})), label != null ? /*#__PURE__*/React.createElement("span", null, label) : null);
|
|||
|
|
}
|
|||
|
|
Object.assign(__ds_scope, { Switch });
|
|||
|
|
})(); } catch (e) { __ds_ns.__errors.push({ path: "components/forms/Switch.jsx", error: String((e && e.message) || e) }); }
|
|||
|
|
|
|||
|
|
// components/forms/Textarea.jsx
|
|||
|
|
try { (() => {
|
|||
|
|
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|||
|
|
/**
|
|||
|
|
* Textarea — multi-line text field. Same square/mono well as Input, with a
|
|||
|
|
* gold focus border. Vertical resize only.
|
|||
|
|
*/
|
|||
|
|
function Textarea({
|
|||
|
|
invalid = false,
|
|||
|
|
disabled = false,
|
|||
|
|
rows = 4,
|
|||
|
|
style,
|
|||
|
|
...rest
|
|||
|
|
}) {
|
|||
|
|
const [focus, setFocus] = React.useState(false);
|
|||
|
|
const borderColor = invalid ? "var(--ccl-red, #e06c75)" : focus ? "var(--ccl-gold, #8f7ae0)" : "var(--ccl-border-2, #333333)";
|
|||
|
|
return /*#__PURE__*/React.createElement("textarea", _extends({
|
|||
|
|
rows: rows,
|
|||
|
|
disabled: disabled,
|
|||
|
|
onFocus: e => {
|
|||
|
|
setFocus(true);
|
|||
|
|
rest.onFocus && rest.onFocus(e);
|
|||
|
|
},
|
|||
|
|
onBlur: e => {
|
|||
|
|
setFocus(false);
|
|||
|
|
rest.onBlur && rest.onBlur(e);
|
|||
|
|
}
|
|||
|
|
}, rest, {
|
|||
|
|
style: {
|
|||
|
|
fontFamily: "var(--font-mono, 'JetBrains Mono', monospace)",
|
|||
|
|
fontWeight: 400,
|
|||
|
|
fontSize: "13px",
|
|||
|
|
lineHeight: 1.6,
|
|||
|
|
color: "var(--ccl-text, #d4d4d4)",
|
|||
|
|
background: "var(--ccl-charcoal-3, #262626)",
|
|||
|
|
border: `1px solid ${borderColor}`,
|
|||
|
|
borderRadius: 0,
|
|||
|
|
outline: "none",
|
|||
|
|
padding: "10px 12px",
|
|||
|
|
width: "100%",
|
|||
|
|
resize: "vertical",
|
|||
|
|
opacity: disabled ? 0.5 : 1,
|
|||
|
|
transition: "border-color var(--dur-fast, 100ms) var(--ease-out)",
|
|||
|
|
...style
|
|||
|
|
}
|
|||
|
|
}));
|
|||
|
|
}
|
|||
|
|
Object.assign(__ds_scope, { Textarea });
|
|||
|
|
})(); } catch (e) { __ds_ns.__errors.push({ path: "components/forms/Textarea.jsx", error: String((e && e.message) || e) }); }
|
|||
|
|
|
|||
|
|
// components/icons/Icon.jsx
|
|||
|
|
try { (() => {
|
|||
|
|
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|||
|
|
/**
|
|||
|
|
* Icon — CubeCraftLabs icon wrapper with TWO sets:
|
|||
|
|
* set="lucide" → stroke-based Lucide glyph (requires the Lucide CDN script
|
|||
|
|
* on the page; see prompt). Recolors to currentColor.
|
|||
|
|
* set="terminal" → a monospace terminal glyph (functional CLI-style marks:
|
|||
|
|
* prompt, check, cross, chevron, …). No dependency.
|
|||
|
|
* The terminal set is the brand-signature set; lucide covers general UI chrome.
|
|||
|
|
*/
|
|||
|
|
const TERMINAL = {
|
|||
|
|
prompt: "$",
|
|||
|
|
chevron: "\u203A",
|
|||
|
|
// ›
|
|||
|
|
"chevron-right": "\u203A",
|
|||
|
|
caret: "\u25B8",
|
|||
|
|
// ▸
|
|||
|
|
check: "\u2713",
|
|||
|
|
// ✓
|
|||
|
|
cross: "\u2717",
|
|||
|
|
// ✗
|
|||
|
|
arrow: "\u2192",
|
|||
|
|
// →
|
|||
|
|
"arrow-left": "\u2190",
|
|||
|
|
"arrow-up": "\u2191",
|
|||
|
|
"arrow-down": "\u2193",
|
|||
|
|
branch: "\u2387",
|
|||
|
|
// ⎇
|
|||
|
|
dot: "\u2022",
|
|||
|
|
// •
|
|||
|
|
diamond: "\u25C6",
|
|||
|
|
// ◆
|
|||
|
|
star: "\u2726",
|
|||
|
|
// ✦
|
|||
|
|
ellipsis: "\u2026",
|
|||
|
|
// …
|
|||
|
|
box: "\u25A2",
|
|||
|
|
// ▢
|
|||
|
|
"box-filled": "\u25A0",
|
|||
|
|
// ■
|
|||
|
|
hash: "#",
|
|||
|
|
tilde: "~",
|
|||
|
|
plus: "+",
|
|||
|
|
minus: "\u2212",
|
|||
|
|
// −
|
|||
|
|
equals: "=",
|
|||
|
|
pipe: "|",
|
|||
|
|
slash: "/",
|
|||
|
|
cursor: "\u2588",
|
|||
|
|
// █
|
|||
|
|
spinner: "\u2237",
|
|||
|
|
// ∷
|
|||
|
|
warn: "\u26A0" // ⚠ (kept for status lines only)
|
|||
|
|
};
|
|||
|
|
function Icon({
|
|||
|
|
name,
|
|||
|
|
set = "lucide",
|
|||
|
|
size = 18,
|
|||
|
|
color = "currentColor",
|
|||
|
|
strokeWidth = 2,
|
|||
|
|
style,
|
|||
|
|
...rest
|
|||
|
|
}) {
|
|||
|
|
if (set === "terminal") {
|
|||
|
|
return /*#__PURE__*/React.createElement("span", _extends({
|
|||
|
|
"aria-hidden": "true",
|
|||
|
|
style: {
|
|||
|
|
fontFamily: "var(--font-mono, 'JetBrains Mono', monospace)",
|
|||
|
|
fontSize: typeof size === "number" ? size + "px" : size,
|
|||
|
|
lineHeight: 1,
|
|||
|
|
color,
|
|||
|
|
display: "inline-flex",
|
|||
|
|
alignItems: "center",
|
|||
|
|
justifyContent: "center",
|
|||
|
|
fontWeight: 500,
|
|||
|
|
...style
|
|||
|
|
}
|
|||
|
|
}, rest), TERMINAL[name] || name);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// lucide set
|
|||
|
|
const ref = React.useRef(null);
|
|||
|
|
React.useEffect(() => {
|
|||
|
|
let tries = 0;
|
|||
|
|
const render = () => {
|
|||
|
|
const el = ref.current;
|
|||
|
|
if (!el) return;
|
|||
|
|
if (window.lucide && window.lucide.createIcons) {
|
|||
|
|
el.innerHTML = "";
|
|||
|
|
const i = document.createElement("i");
|
|||
|
|
i.setAttribute("data-lucide", name);
|
|||
|
|
i.setAttribute("width", String(size));
|
|||
|
|
i.setAttribute("height", String(size));
|
|||
|
|
i.setAttribute("stroke-width", String(strokeWidth));
|
|||
|
|
el.appendChild(i);
|
|||
|
|
window.lucide.createIcons({
|
|||
|
|
nameAttr: "data-lucide"
|
|||
|
|
});
|
|||
|
|
} else if (tries++ < 40) {
|
|||
|
|
setTimeout(render, 75);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
render();
|
|||
|
|
}, [name, size, strokeWidth]);
|
|||
|
|
return /*#__PURE__*/React.createElement("span", _extends({
|
|||
|
|
ref: ref,
|
|||
|
|
"aria-hidden": "true",
|
|||
|
|
style: {
|
|||
|
|
display: "inline-flex",
|
|||
|
|
alignItems: "center",
|
|||
|
|
justifyContent: "center",
|
|||
|
|
width: typeof size === "number" ? size + "px" : size,
|
|||
|
|
height: typeof size === "number" ? size + "px" : size,
|
|||
|
|
color,
|
|||
|
|
...style
|
|||
|
|
}
|
|||
|
|
}, rest));
|
|||
|
|
}
|
|||
|
|
Object.assign(__ds_scope, { Icon });
|
|||
|
|
})(); } catch (e) { __ds_ns.__errors.push({ path: "components/icons/Icon.jsx", error: String((e && e.message) || e) }); }
|
|||
|
|
|
|||
|
|
// components/icons/IconButton.jsx
|
|||
|
|
try { (() => {
|
|||
|
|
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|||
|
|
/**
|
|||
|
|
* IconButton — square, icon-only action. Same square/mono language as Button.
|
|||
|
|
* Variants: ghost (default, transparent), outline (gold border), solid (gold fill).
|
|||
|
|
*/
|
|||
|
|
function IconButton({
|
|||
|
|
name,
|
|||
|
|
set = "lucide",
|
|||
|
|
variant = "ghost",
|
|||
|
|
size = "md",
|
|||
|
|
disabled = false,
|
|||
|
|
label,
|
|||
|
|
style,
|
|||
|
|
...rest
|
|||
|
|
}) {
|
|||
|
|
const [hover, setHover] = React.useState(false);
|
|||
|
|
const [active, setActive] = React.useState(false);
|
|||
|
|
const boxes = {
|
|||
|
|
sm: 28,
|
|||
|
|
md: 34,
|
|||
|
|
lg: 40
|
|||
|
|
};
|
|||
|
|
const glyphs = {
|
|||
|
|
sm: 15,
|
|||
|
|
md: 18,
|
|||
|
|
lg: 20
|
|||
|
|
};
|
|||
|
|
const box = boxes[size] || boxes.md;
|
|||
|
|
const variants = {
|
|||
|
|
ghost: {
|
|||
|
|
background: hover ? "rgba(143,122,224,0.14)" : "transparent",
|
|||
|
|
color: hover ? "var(--ccl-gold, #8f7ae0)" : "var(--ccl-text, #d4d4d4)",
|
|||
|
|
border: "1px solid transparent"
|
|||
|
|
},
|
|||
|
|
outline: {
|
|||
|
|
background: hover ? "rgba(143,122,224,0.12)" : "transparent",
|
|||
|
|
color: "var(--ccl-gold, #8f7ae0)",
|
|||
|
|
border: "1px solid var(--ccl-gold, #8f7ae0)"
|
|||
|
|
},
|
|||
|
|
solid: {
|
|||
|
|
background: hover ? "var(--ccl-gold-dim, #7a63cc)" : "var(--ccl-gold, #8f7ae0)",
|
|||
|
|
color: "var(--ccl-ink, #2a2431)",
|
|||
|
|
border: "1px solid transparent"
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
return /*#__PURE__*/React.createElement("button", _extends({
|
|||
|
|
type: "button",
|
|||
|
|
"aria-label": label || name,
|
|||
|
|
disabled: disabled,
|
|||
|
|
onMouseEnter: () => setHover(true),
|
|||
|
|
onMouseLeave: () => {
|
|||
|
|
setHover(false);
|
|||
|
|
setActive(false);
|
|||
|
|
},
|
|||
|
|
onMouseDown: () => setActive(true),
|
|||
|
|
onMouseUp: () => setActive(false),
|
|||
|
|
style: {
|
|||
|
|
width: box,
|
|||
|
|
height: box,
|
|||
|
|
display: "inline-flex",
|
|||
|
|
alignItems: "center",
|
|||
|
|
justifyContent: "center",
|
|||
|
|
borderRadius: 0,
|
|||
|
|
cursor: disabled ? "not-allowed" : "pointer",
|
|||
|
|
opacity: disabled ? 0.4 : 1,
|
|||
|
|
transition: "background var(--dur-fast,100ms) var(--ease-out), color var(--dur-fast,100ms) var(--ease-out), border-color var(--dur-fast,100ms) var(--ease-out)",
|
|||
|
|
transform: active && !disabled ? "translateY(1px)" : "none",
|
|||
|
|
...variants[variant],
|
|||
|
|
...style
|
|||
|
|
}
|
|||
|
|
}, rest), /*#__PURE__*/React.createElement(__ds_scope.Icon, {
|
|||
|
|
name: name,
|
|||
|
|
set: set,
|
|||
|
|
size: glyphs[size] || glyphs.md,
|
|||
|
|
color: "currentColor"
|
|||
|
|
}));
|
|||
|
|
}
|
|||
|
|
Object.assign(__ds_scope, { IconButton });
|
|||
|
|
})(); } catch (e) { __ds_ns.__errors.push({ path: "components/icons/IconButton.jsx", error: String((e && e.message) || e) }); }
|
|||
|
|
|
|||
|
|
// components/surfaces/Card.jsx
|
|||
|
|
try { (() => {
|
|||
|
|
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|||
|
|
/**
|
|||
|
|
* Card — the base surface. A charcoal-2 panel with a hairline border (borders
|
|||
|
|
* do the work shadows would in a flat brand). Optional eyebrow + title header,
|
|||
|
|
* a gold accent rail on the top edge, and a footer.
|
|||
|
|
*/
|
|||
|
|
function Card({
|
|||
|
|
title,
|
|||
|
|
eyebrow,
|
|||
|
|
actions,
|
|||
|
|
footer,
|
|||
|
|
accent = false,
|
|||
|
|
padding = 20,
|
|||
|
|
children,
|
|||
|
|
style,
|
|||
|
|
...rest
|
|||
|
|
}) {
|
|||
|
|
const hasHeader = title != null || eyebrow != null || actions != null;
|
|||
|
|
const pad = typeof padding === "number" ? padding + "px" : padding;
|
|||
|
|
return /*#__PURE__*/React.createElement("div", _extends({
|
|||
|
|
style: {
|
|||
|
|
background: "var(--ccl-charcoal-2, #202020)",
|
|||
|
|
border: "1px solid var(--ccl-border, #2a2a2a)",
|
|||
|
|
borderTop: accent ? "2px solid var(--ccl-gold, #8f7ae0)" : "1px solid var(--ccl-border, #2a2a2a)",
|
|||
|
|
borderRadius: 0,
|
|||
|
|
display: "flex",
|
|||
|
|
flexDirection: "column",
|
|||
|
|
fontFamily: "var(--font-mono, 'JetBrains Mono', monospace)",
|
|||
|
|
color: "var(--ccl-text, #d4d4d4)",
|
|||
|
|
...style
|
|||
|
|
}
|
|||
|
|
}, rest), hasHeader ? /*#__PURE__*/React.createElement("div", {
|
|||
|
|
style: {
|
|||
|
|
display: "flex",
|
|||
|
|
alignItems: "flex-start",
|
|||
|
|
gap: "12px",
|
|||
|
|
padding: `${pad} ${pad} 0`
|
|||
|
|
}
|
|||
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|||
|
|
style: {
|
|||
|
|
flex: 1,
|
|||
|
|
minWidth: 0
|
|||
|
|
}
|
|||
|
|
}, eyebrow != null ? /*#__PURE__*/React.createElement("div", {
|
|||
|
|
style: {
|
|||
|
|
fontSize: "10px",
|
|||
|
|
fontWeight: 500,
|
|||
|
|
letterSpacing: "0.14em",
|
|||
|
|
textTransform: "uppercase",
|
|||
|
|
color: "var(--ccl-text-muted, #6b6b6b)",
|
|||
|
|
marginBottom: title != null ? "5px" : 0
|
|||
|
|
}
|
|||
|
|
}, eyebrow) : null, title != null ? /*#__PURE__*/React.createElement("div", {
|
|||
|
|
style: {
|
|||
|
|
fontSize: "15px",
|
|||
|
|
fontWeight: 700,
|
|||
|
|
letterSpacing: "0.02em",
|
|||
|
|
color: "#fff",
|
|||
|
|
lineHeight: 1.25
|
|||
|
|
}
|
|||
|
|
}, title) : null), actions != null ? /*#__PURE__*/React.createElement("div", {
|
|||
|
|
style: {
|
|||
|
|
flex: "none",
|
|||
|
|
display: "flex",
|
|||
|
|
gap: "8px"
|
|||
|
|
}
|
|||
|
|
}, actions) : null) : null, /*#__PURE__*/React.createElement("div", {
|
|||
|
|
style: {
|
|||
|
|
padding: pad,
|
|||
|
|
flex: 1
|
|||
|
|
}
|
|||
|
|
}, children), footer != null ? /*#__PURE__*/React.createElement("div", {
|
|||
|
|
style: {
|
|||
|
|
padding: `0 ${pad} ${pad}`,
|
|||
|
|
borderTop: "1px solid var(--ccl-border, #2a2a2a)",
|
|||
|
|
marginTop: "auto",
|
|||
|
|
paddingTop: pad,
|
|||
|
|
fontSize: "12px",
|
|||
|
|
color: "var(--ccl-text-muted, #6b6b6b)"
|
|||
|
|
}
|
|||
|
|
}, footer) : null);
|
|||
|
|
}
|
|||
|
|
Object.assign(__ds_scope, { Card });
|
|||
|
|
})(); } catch (e) { __ds_ns.__errors.push({ path: "components/surfaces/Card.jsx", error: String((e && e.message) || e) }); }
|
|||
|
|
|
|||
|
|
// components/surfaces/Terminal.jsx
|
|||
|
|
try { (() => {
|
|||
|
|
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|||
|
|
/**
|
|||
|
|
* Terminal — a code / console block. A deep-charcoal window with a title bar
|
|||
|
|
* (three square "traffic dots" + a label), then monospace lines. Each line can
|
|||
|
|
* be a plain string or an object { text, prompt, tone } where tone ∈
|
|||
|
|
* out|muted|gold|green|red and prompt renders a leading "$".
|
|||
|
|
*/
|
|||
|
|
const TONES = {
|
|||
|
|
out: "var(--ccl-text, #d4d4d4)",
|
|||
|
|
muted: "var(--ccl-text-muted, #6b6b6b)",
|
|||
|
|
gold: "var(--ccl-gold, #8f7ae0)",
|
|||
|
|
green: "var(--ccl-green, #98c379)",
|
|||
|
|
red: "var(--ccl-red, #e06c75)"
|
|||
|
|
};
|
|||
|
|
function Terminal({
|
|||
|
|
title = "bash",
|
|||
|
|
lines,
|
|||
|
|
showDots = true,
|
|||
|
|
children,
|
|||
|
|
style,
|
|||
|
|
...rest
|
|||
|
|
}) {
|
|||
|
|
return /*#__PURE__*/React.createElement("div", _extends({
|
|||
|
|
style: {
|
|||
|
|
background: "var(--ccl-charcoal-3, #232327)",
|
|||
|
|
border: "1px solid var(--ccl-border-2, #4e4e57)",
|
|||
|
|
borderRadius: 0,
|
|||
|
|
fontFamily: "var(--font-mono, 'JetBrains Mono', monospace)",
|
|||
|
|
overflow: "hidden",
|
|||
|
|
...style
|
|||
|
|
}
|
|||
|
|
}, rest), /*#__PURE__*/React.createElement("div", {
|
|||
|
|
style: {
|
|||
|
|
display: "flex",
|
|||
|
|
alignItems: "center",
|
|||
|
|
gap: "8px",
|
|||
|
|
padding: "8px 12px",
|
|||
|
|
borderBottom: "1px solid var(--ccl-border, #2a2a2a)",
|
|||
|
|
background: "var(--ccl-charcoal-2, #202020)"
|
|||
|
|
}
|
|||
|
|
}, showDots ? /*#__PURE__*/React.createElement("span", {
|
|||
|
|
style: {
|
|||
|
|
display: "inline-flex",
|
|||
|
|
gap: "5px"
|
|||
|
|
}
|
|||
|
|
}, ["#6a6a72", "#6a6a72", "#8f7ae0"].map((c, i) => /*#__PURE__*/React.createElement("span", {
|
|||
|
|
key: i,
|
|||
|
|
style: {
|
|||
|
|
width: "9px",
|
|||
|
|
height: "9px",
|
|||
|
|
background: c,
|
|||
|
|
display: "block"
|
|||
|
|
}
|
|||
|
|
}))) : null, /*#__PURE__*/React.createElement("span", {
|
|||
|
|
style: {
|
|||
|
|
fontSize: "11px",
|
|||
|
|
letterSpacing: "0.08em",
|
|||
|
|
textTransform: "uppercase",
|
|||
|
|
color: "var(--ccl-text-muted, #6b6b6b)",
|
|||
|
|
marginLeft: showDots ? "4px" : 0
|
|||
|
|
}
|
|||
|
|
}, title)), /*#__PURE__*/React.createElement("div", {
|
|||
|
|
style: {
|
|||
|
|
padding: "14px 14px",
|
|||
|
|
fontSize: "12.5px",
|
|||
|
|
lineHeight: 1.7
|
|||
|
|
}
|
|||
|
|
}, lines ? lines.map((ln, i) => {
|
|||
|
|
const o = typeof ln === "string" ? {
|
|||
|
|
text: ln
|
|||
|
|
} : ln;
|
|||
|
|
return /*#__PURE__*/React.createElement("div", {
|
|||
|
|
key: i,
|
|||
|
|
style: {
|
|||
|
|
color: TONES[o.tone] || TONES.out,
|
|||
|
|
whiteSpace: "pre-wrap",
|
|||
|
|
display: "flex",
|
|||
|
|
gap: "8px"
|
|||
|
|
}
|
|||
|
|
}, o.prompt ? /*#__PURE__*/React.createElement("span", {
|
|||
|
|
style: {
|
|||
|
|
color: "var(--ccl-gold, #8f7ae0)",
|
|||
|
|
userSelect: "none"
|
|||
|
|
}
|
|||
|
|
}, "$") : null, /*#__PURE__*/React.createElement("span", {
|
|||
|
|
style: {
|
|||
|
|
flex: 1
|
|||
|
|
}
|
|||
|
|
}, o.text));
|
|||
|
|
}) : children));
|
|||
|
|
}
|
|||
|
|
Object.assign(__ds_scope, { Terminal });
|
|||
|
|
})(); } catch (e) { __ds_ns.__errors.push({ path: "components/surfaces/Terminal.jsx", error: String((e && e.message) || e) }); }
|
|||
|
|
|
|||
|
|
__ds_ns.Badge = __ds_scope.Badge;
|
|||
|
|
|
|||
|
|
__ds_ns.Button = __ds_scope.Button;
|
|||
|
|
|
|||
|
|
__ds_ns.CubeMark = __ds_scope.CubeMark;
|
|||
|
|
|
|||
|
|
__ds_ns.Tag = __ds_scope.Tag;
|
|||
|
|
|
|||
|
|
__ds_ns.Checkbox = __ds_scope.Checkbox;
|
|||
|
|
|
|||
|
|
__ds_ns.Field = __ds_scope.Field;
|
|||
|
|
|
|||
|
|
__ds_ns.Input = __ds_scope.Input;
|
|||
|
|
|
|||
|
|
__ds_ns.Radio = __ds_scope.Radio;
|
|||
|
|
|
|||
|
|
__ds_ns.Select = __ds_scope.Select;
|
|||
|
|
|
|||
|
|
__ds_ns.Switch = __ds_scope.Switch;
|
|||
|
|
|
|||
|
|
__ds_ns.Textarea = __ds_scope.Textarea;
|
|||
|
|
|
|||
|
|
__ds_ns.Icon = __ds_scope.Icon;
|
|||
|
|
|
|||
|
|
__ds_ns.IconButton = __ds_scope.IconButton;
|
|||
|
|
|
|||
|
|
__ds_ns.Card = __ds_scope.Card;
|
|||
|
|
|
|||
|
|
__ds_ns.Terminal = __ds_scope.Terminal;
|
|||
|
|
|
|||
|
|
})();
|