@keyfunc/keybricks-ds 2.4.11 → 2.4.12

package/components/_shared/src-buttons.js

@@ -1 +0,0 @@
-window.__KB_SRC__=Object.assign(window.__KB_SRC__||{},{"buttons/ActionChip.jsx":"import React from \"react\";\n\nconst chipTones = {\n  success: { background: \"var(--success-bg)\", color: \"var(--success-text)\" },\n  warning: { background: \"var(--warning-bg)\", color: \"var(--warning-text)\" },\n  neutral: { background: \"var(--bg-hover)\", color: \"var(--text-body)\" },\n  info: { background: \"var(--info-bg)\", color: \"var(--action-primary)\" },\n  danger: { background: \"var(--danger-bg)\", color: \"var(--danger-text)\" },\n};\n\n/** Tinted bulk-action chip (\"Mark as New\", \"Mark as Overwrite\", \"Skip Selected\"). A control: it takes the region's tier height and text; `size` overrides it. */\nexport function ActionChip({ tone = \"neutral\", size, children, onClick, style }) {\n  const [hover, setHover] = React.useState(false);\n  return (\n    <button type=\"button\" data-size={size} onClick={onClick} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}\n      style={{ height: \"var(--control-h)\", padding: \"0 var(--control-px)\", borderRadius: \"var(--radius-md)\", border: \"none\", cursor: \"pointer\", fontFamily: \"var(--font-sans)\", fontWeight: \"var(--weight-medium)\", fontSize: \"var(--control-text)\", lineHeight: \"var(--control-leading)\", letterSpacing: \"var(--control-tracking)\", display: \"inline-flex\", alignItems: \"center\", filter: hover ? \"brightness(1.06) saturate(1.05)\" : \"none\", transition: \"var(--t-hover),filter var(--dur-fast) var(--ease-out)\", ...chipTones[tone], ...style }}>\n      {children}\n    </button>\n  );\n}\n","buttons/ActionChip.vue":"<script setup>\nimport { ref, computed } from 'vue'\nconst chipTones = {\n  success: { background: 'var(--success-bg)', color: 'var(--success-text)' },\n  warning: { background: 'var(--warning-bg)', color: 'var(--warning-text)' },\n  neutral: { background: 'var(--bg-hover)', color: 'var(--text-body)' },\n  info: { background: 'var(--info-bg)', color: 'var(--action-primary)' },\n  danger: { background: 'var(--danger-bg)', color: 'var(--danger-text)' },\n}\n// Tinted bulk-action chip (\"Mark as New\", \"Mark as Overwrite\", \"Skip Selected\"). A control: it takes the region's tier height and text; `size` overrides it.\nconst props = defineProps({ tone: { type: String, default: 'neutral' }, size: String, style: Object })\ndefineEmits(['click'])\nconst hover = ref(false)\nconst s = computed(() => ({ height: 'var(--control-h)', padding: '0 var(--control-px)', borderRadius: 'var(--radius-md)', border: 'none', cursor: 'pointer', fontFamily: 'var(--font-sans)', fontWeight: 'var(--weight-medium)', fontSize: 'var(--control-text)', lineHeight: 'var(--control-leading)', letterSpacing: 'var(--control-tracking)', display: 'inline-flex', alignItems: 'center', filter: hover.value ? 'brightness(1.06) saturate(1.05)' : 'none', transition: 'var(--t-hover),filter var(--dur-fast) var(--ease-out)', ...chipTones[props.tone], ...props.style }))\n</script>\n<template>\n  <button type=\"button\" :data-size=\"size\" @click=\"$emit('click')\" @mouseenter=\"hover = true\" @mouseleave=\"hover = false\" :style=\"s\"><slot /></button>\n</template>\n","buttons/Button.jsx":"import React from \"react\";\nimport { Icon } from \"../icons/Icon.jsx\";\n\n/* Every dimension comes from the size tier the button sits in (tokens/layout.css): height, text, icon and padding\n   switch together when a region declares data-size=\"sm\" | \"md\" | \"lg\". A `size` prop only stamps that attribute on\n   the button itself — the default is to inherit, so siblings in one bar can never disagree. */\nconst btnBase = { display: \"inline-flex\", alignItems: \"center\", justifyContent: \"center\", gap: 6, height: \"var(--control-h)\", padding: \"0 var(--control-px)\", borderRadius: \"var(--radius-md)\", fontFamily: \"var(--font-sans)\", fontWeight: \"var(--weight-regular)\", fontSize: \"var(--control-text)\", lineHeight: \"var(--control-leading)\", letterSpacing: \"var(--control-tracking)\", border: \"1px solid transparent\", cursor: \"pointer\", whiteSpace: \"nowrap\", boxSizing: \"border-box\", background: \"transparent\", transition: \"var(--t-hover)\" };\nconst tierIcon = { width: \"var(--control-icon)\", height: \"var(--control-icon)\" };\n\nconst variants = {\n  primary: { background: \"var(--action-primary)\", color: \"var(--on-accent)\" },\n  dark: { background: \"var(--action-dark)\", color: \"var(--action-dark-fg)\" },\n  outline: { background: \"var(--bg-surface)\", color: \"var(--text-body)\", borderColor: \"var(--border-control)\" },\n  ghost: { color: \"var(--text-body)\" },\n  \"primary-soft\": { background: \"var(--soft-bg)\", color: \"var(--action-primary)\", borderColor: \"var(--soft-border)\" },\n  danger: { background: \"var(--danger)\", color: \"var(--on-accent)\" },\n  \"danger-soft\": { background: \"var(--danger-bg)\", color: \"var(--danger-text)\" },\n  text: { color: \"var(--text-secondary)\", padding: \"0\", height: \"auto\" },\n};\nconst hovers = {\n  primary: \"var(--action-primary-hover)\", dark: \"var(--action-dark-hover)\",\n  outline: \"var(--bg-hover)\", ghost: \"var(--bg-hover)\", \"primary-soft\": \"var(--soft-hover)\",\n  danger: \"var(--danger-text)\", \"danger-soft\": \"var(--danger-soft-hover)\",\n};\n/** Press (mouse-down) fills — one step past hover. */\nconst presses = {\n  primary: \"var(--action-primary-active)\", dark: \"var(--action-dark-active)\",\n  outline: \"var(--bg-press)\", ghost: \"var(--bg-press)\", \"primary-soft\": \"var(--soft-active)\",\n  danger: \"var(--danger-active)\", \"danger-soft\": \"var(--danger-soft-active)\",\n};\n/** Variants that change text color (+ underline) on hover instead of a background wash. */\nconst colorHoverVariants = { text: \"var(--text-heading)\" };\n\nfunction Spinner({ size, color }) {\n  return <span style={{ display: \"inline-block\", width: size, height: size, ...(size ? null : tierIcon), borderRadius: \"var(--radius-full)\", border: \"2px solid currentColor\", borderTopColor: \"transparent\", opacity: .9, color, animation: \"kb-spin .7s linear infinite\", flexShrink: 0 }} />;\n}\n\n/** Keybricks button. variant: primary | dark | outline | ghost | primary-soft | danger | danger-soft | text; size: sm 28 | md 32 | lg 40 — omit it to inherit the region's tier (the default). Interaction states: hover (one step darker) · press (two steps, set via mouse-down) · keyboard focus ring · loading · disabled. */\nexport function Button({ variant = \"primary\", size, icon, iconSize, iconPosition = \"left\", medium, disabled, loading, fullWidth, iconOnly, label, pressed, focused, children, style, onClick, ...rest }) {\n  const [hover, setHover] = React.useState(false);\n  const [press, setPress] = React.useState(false);\n  const [focus, setFocus] = React.useState(false);\n  const busy = disabled || loading;\n  const isPressed = press || pressed;\n  const isFocused = focus || focused;\n  const s = {\n    ...btnBase, ...variants[variant],\n    ...(medium ? { fontWeight: \"var(--weight-medium)\" } : null),\n    ...(fullWidth ? { width: \"100%\" } : null),\n    ...(iconOnly ? { width: \"var(--control-h)\", padding: 0, gap: 0 } : null),\n    ...(busy ? { opacity: .55, cursor: \"default\" } : null),\n    ...style,\n  };\n  if (!busy) {\n    if (colorHoverVariants[variant]) {\n      if (hover || isPressed) { s.color = colorHoverVariants[variant]; s.textDecoration = \"underline\"; }\n      if (isPressed) s.opacity = .7;\n    } else if (isPressed) {\n      s.background = presses[variant];\n    } else if (hover) {\n      s.background = hovers[variant];\n    }\n    if (isFocused) s.boxShadow = \"var(--ring-focus)\";\n  }\n  const iconStyle = iconSize ? null : tierIcon;\n  const leading = loading ? <Spinner size={iconSize} color={s.color} /> : (icon && iconPosition === \"left\" ? <Icon name={icon} size={iconSize || 16} style={iconStyle} /> : null);\n  const trailing = !loading && icon && iconPosition === \"right\" ? <Icon name={icon} size={iconSize || 16} style={iconStyle} /> : null;\n  return (\n    <button type=\"button\" data-press=\"own\" data-size={size} style={s} disabled={busy} aria-label={iconOnly ? label : undefined} onClick={onClick}\n      onMouseEnter={() => setHover(true)} onMouseLeave={() => { setHover(false); setPress(false); }}\n      onMouseDown={() => setPress(true)} onMouseUp={() => setPress(false)}\n      onKeyDown={(e) => { if (e.key === \" \" || e.key === \"Enter\") setPress(true); }} onKeyUp={() => setPress(false)}\n      onFocus={(e) => { try { setFocus(e.target.matches(\":focus-visible\")); } catch (err) { setFocus(true); } }} onBlur={() => setFocus(false)} {...rest}>\n      {leading}\n      {iconOnly ? null : children}\n      {trailing}\n    </button>\n  );\n}\n\n/** Attached row of Buttons sharing one outline (segmented action group). Children should be <Button variant=\"outline\"> or similar. */\nexport function ButtonGroup({ children, style }) {\n  const items = React.Children.toArray(children);\n  return (\n    <div style={{ display: \"inline-flex\", ...style }}>\n      {items.map((child, i) => React.cloneElement(child, {\n        key: i,\n        style: {\n          ...(child.props.style || {}),\n          borderRadius: 0,\n          ...(i === 0 ? { borderTopLeftRadius: \"var(--radius-md)\", borderBottomLeftRadius: \"var(--radius-md)\" } : null),\n          ...(i === items.length - 1 ? { borderTopRightRadius: \"var(--radius-md)\", borderBottomRightRadius: \"var(--radius-md)\" } : null),\n          marginLeft: i === 0 ? 0 : -1,\n        },\n      }))}\n    </div>\n  );\n}\n","buttons/Button.vue":"<script setup>\nimport { px } from '../px.js'\nimport { computed, ref } from 'vue'\nimport Icon from '../icons/Icon.vue'\n\n// Every dimension comes from the size tier the button sits in (tokens/layout.css): height, text, icon and padding\n// switch together when a region declares data-size=\"sm\" | \"md\" | \"lg\". The `size` prop only stamps that attribute on\n// the button itself — the default is to inherit, so siblings in one bar can never disagree.\nconst btnBase = { display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: '6px', height: 'var(--control-h)', padding: '0 var(--control-px)', borderRadius: 'var(--radius-md)', fontFamily: 'var(--font-sans)', fontWeight: 'var(--weight-regular)', fontSize: 'var(--control-text)', lineHeight: 'var(--control-leading)', letterSpacing: 'var(--control-tracking)', border: '1px solid transparent', cursor: 'pointer', whiteSpace: 'nowrap', boxSizing: 'border-box', background: 'transparent', transition: 'var(--t-hover)' }\nconst tierIcon = { width: 'var(--control-icon)', height: 'var(--control-icon)' }\nconst variants = {\n  primary: { background: 'var(--action-primary)', color: 'var(--on-accent)' },\n  dark: { background: 'var(--action-dark)', color: 'var(--action-dark-fg)' },\n  outline: { background: 'var(--bg-surface)', color: 'var(--text-body)', borderColor: 'var(--border-control)' },\n  ghost: { color: 'var(--text-body)' },\n  'primary-soft': { background: 'var(--soft-bg)', color: 'var(--action-primary)', borderColor: 'var(--soft-border)' },\n  danger: { background: 'var(--danger)', color: 'var(--on-accent)' },\n  'danger-soft': { background: 'var(--danger-bg)', color: 'var(--danger-text)' },\n  text: { color: 'var(--text-secondary)', padding: '0', height: 'auto' },\n}\nconst hovers = { primary: 'var(--action-primary-hover)', dark: 'var(--action-dark-hover)', outline: 'var(--bg-hover)', ghost: 'var(--bg-hover)', 'primary-soft': 'var(--soft-hover)', danger: 'var(--danger-text)', 'danger-soft': 'var(--danger-soft-hover)' }\nconst presses = { primary: 'var(--action-primary-active)', dark: 'var(--action-dark-active)', outline: 'var(--bg-press)', ghost: 'var(--bg-press)', 'primary-soft': 'var(--soft-active)', danger: 'var(--danger-active)', 'danger-soft': 'var(--danger-soft-active)' }\nconst colorHoverVariants = { text: 'var(--text-heading)' }\n\n// Button — variant: primary | dark | outline | ghost | primary-soft | danger | danger-soft | text; size: sm 28 | md 32 | lg 40 — omit it to inherit the region's tier (the default).\nconst props = defineProps({\n  variant: { type: String, default: 'primary' }, size: String,\n  icon: String, iconSize: Number, iconPosition: { type: String, default: 'left' },\n  medium: Boolean, disabled: Boolean, loading: Boolean, fullWidth: Boolean, iconOnly: Boolean,\n  label: String, pressed: Boolean, focused: Boolean, style: Object,\n})\ndefineEmits(['click'])\nconst hover = ref(false), press = ref(false), focus = ref(false)\nconst busy = computed(() => props.disabled || props.loading)\nconst isPressed = computed(() => press.value || props.pressed)\nconst isFocused = computed(() => focus.value || props.focused)\nconst s = computed(() => {\n  const base = { ...btnBase, ...variants[props.variant],\n    ...(props.medium ? { fontWeight: 'var(--weight-medium)' } : null),\n    ...(props.fullWidth ? { width: '100%' } : null),\n    ...(props.iconOnly ? { width: 'var(--control-h)', padding: 0, gap: 0 } : null),\n    ...(busy.value ? { opacity: .55, cursor: 'default' } : null), ...props.style }\n  if (!busy.value) {\n    if (colorHoverVariants[props.variant]) {\n      if (hover.value || isPressed.value) { base.color = colorHoverVariants[props.variant]; base.textDecoration = 'underline' }\n      if (isPressed.value) base.opacity = .7\n    } else if (isPressed.value) base.background = presses[props.variant]\n    else if (hover.value) base.background = hovers[props.variant]\n    if (isFocused.value) base.boxShadow = 'var(--ring-focus)'\n  }\n  return base\n})\nconst iSize = computed(() => props.iconSize || 16)\nconst iconStyle = computed(() => props.iconSize ? null : tierIcon)\n</script>\n<template>\n  <button type=\"button\" data-press=\"own\" :data-size=\"size\" :style=\"s\" :disabled=\"busy\" :aria-label=\"iconOnly ? label : undefined\"\n    @click=\"$emit('click')\" @mouseenter=\"hover = true\" @mouseleave=\"hover = false; press = false\"\n    @mousedown=\"press = true\" @mouseup=\"press = false\" @keydown.enter=\"press = true\" @keydown.space=\"press = true\" @keyup=\"press = false\"\n    @focus=\"focus = $event.target.matches(':focus-visible')\" @blur=\"focus = false\">\n    <span v-if=\"loading\" :style=\"{ display: 'inline-block', width: px(iSize), height: px(iSize), ...iconStyle, borderRadius: 'var(--radius-full)', border: '2px solid currentColor', borderTopColor: 'transparent', opacity: .9, animation: 'kb-spin .7s linear infinite', flexShrink: 0 }\" />\n    <Icon v-else-if=\"icon && iconPosition === 'left'\" :name=\"icon\" :size=\"iSize\" :style=\"iconStyle\" />\n    <slot v-if=\"!iconOnly\" />\n    <Icon v-if=\"!loading && icon && iconPosition === 'right'\" :name=\"icon\" :size=\"iSize\" :style=\"iconStyle\" />\n  </button>\n</template>\n","buttons/IconButton.jsx":"import React from \"react\";\nimport { Icon } from \"../icons/Icon.jsx\";\n\n/* A square of the region's control height, icon at the tier's icon size (tokens/layout.css). `size` stamps\n   data-size on the button; omit it to inherit — the default. \"xs\" is kept as an alias of \"sm\" for 1.x callers. */\nconst tierIcon = { width: \"var(--control-icon)\", height: \"var(--control-icon)\" };\n\n/** Square ghost icon button (toolbar/back/bell/view toggles). size: sm 28 | md 32 | lg 40 — omit to inherit the region's tier. danger tints red; loading shows a spinner and disables interaction. States: hover · press · keyboard focus ring · active (persistent toggle-on) · disabled. */\nexport function IconButton({ icon, size, active, muted, danger, disabled, loading, label, pressed, focused, style, onClick, ...rest }) {\n  const [hover, setHover] = React.useState(false);\n  const [press, setPress] = React.useState(false);\n  const [focus, setFocus] = React.useState(false);\n  const tier = size === \"xs\" ? \"sm\" : size;\n  const busy = disabled || loading;\n  const isPressed = (press || pressed) && !busy;\n  const color = danger ? \"var(--danger)\" : muted ? \"var(--text-muted)\" : \"var(--text-body)\";\n  // hover / press are alpha overlays, not solid steps: the button sits on white rows, grey table headers and grey bars alike,\n  // and an overlay darkens whatever is underneath by the same amount (a solid --bg-hover vanishes on a --bg-table-header).\n  const bg = isPressed ? (danger ? \"var(--danger-soft-active)\" : \"var(--overlay-press)\")\n    : active ? \"var(--bg-active)\"\n    : hover && !busy ? (danger ? \"var(--danger-bg)\" : \"var(--overlay-hover)\") : \"transparent\";\n  return (\n    <button type=\"button\" data-press=\"own\" data-size={tier} aria-label={label} disabled={busy} onClick={onClick}\n      onMouseEnter={() => setHover(true)} onMouseLeave={() => { setHover(false); setPress(false); }}\n      onMouseDown={() => setPress(true)} onMouseUp={() => setPress(false)}\n      onKeyDown={(e) => { if (e.key === \" \" || e.key === \"Enter\") setPress(true); }} onKeyUp={() => setPress(false)}\n      onFocus={(e) => { try { setFocus(e.target.matches(\":focus-visible\")); } catch (err) { setFocus(true); } }} onBlur={() => setFocus(false)}\n      style={{ width: \"var(--control-h)\", height: \"var(--control-h)\", borderRadius: \"var(--radius-md)\", border: \"none\", cursor: busy ? \"default\" : \"pointer\", display: \"inline-flex\", alignItems: \"center\", justifyContent: \"center\", background: bg, color, opacity: busy ? .5 : 1, boxShadow: (focus || focused) && !busy ? \"var(--ring-focus)\" : \"none\", transition: \"var(--t-hover)\", padding: 0, flexShrink: 0, ...style }} {...rest}>\n      {loading ? <span style={{ display: \"inline-block\", ...tierIcon, borderRadius: \"var(--radius-full)\", border: \"2px solid currentColor\", borderTopColor: \"transparent\", animation: \"kb-spin .7s linear infinite\" }} /> : <Icon name={icon} size={16} style={tierIcon} />}\n    </button>\n  );\n}\n","buttons/IconButton.vue":"<script setup>\nimport { ref, computed } from 'vue'\nimport Icon from '../icons/Icon.vue'\n// A square of the region's control height, icon at the tier's icon size (tokens/layout.css). `size` stamps data-size on\n// the button; omit it to inherit — the default. \"xs\" is kept as an alias of \"sm\" for 1.x callers.\nconst tierIcon = { width: 'var(--control-icon)', height: 'var(--control-icon)' }\n// Square ghost icon button (toolbar/back/bell/view toggles). size: sm 28 | md 32 | lg 40 — omit to inherit the region's tier.\nconst props = defineProps({ icon: String, size: String, active: Boolean, muted: Boolean, danger: Boolean, disabled: Boolean, loading: Boolean, label: String, pressed: Boolean, focused: Boolean, style: Object })\ndefineEmits(['click'])\nconst hover = ref(false), press = ref(false), focus = ref(false)\nconst tier = computed(() => props.size === 'xs' ? 'sm' : props.size)\nconst busy = computed(() => props.disabled || props.loading)\nconst isPressed = computed(() => (press.value || props.pressed) && !busy.value)\nconst color = computed(() => props.danger ? 'var(--danger)' : props.muted ? 'var(--text-muted)' : 'var(--text-body)')\n// hover / press are alpha overlays so the step is the same on white rows, grey table headers and grey bars\nconst bg = computed(() => isPressed.value ? (props.danger ? 'var(--danger-soft-active)' : 'var(--overlay-press)') : props.active ? 'var(--bg-active)' : (hover.value && !busy.value ? (props.danger ? 'var(--danger-bg)' : 'var(--overlay-hover)') : 'transparent'))\nconst s = computed(() => ({ width: 'var(--control-h)', height: 'var(--control-h)', borderRadius: 'var(--radius-md)', border: 'none', cursor: busy.value ? 'default' : 'pointer', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', background: bg.value, color: color.value, opacity: busy.value ? .5 : 1, boxShadow: (focus.value || props.focused) && !busy.value ? 'var(--ring-focus)' : 'none', transition: 'var(--t-hover)', padding: 0, flexShrink: 0, ...props.style }))\n</script>\n<template>\n  <button type=\"button\" data-press=\"own\" :data-size=\"tier\" :aria-label=\"label\" :disabled=\"busy\" @click=\"$emit('click')\" @mouseenter=\"hover = true\" @mouseleave=\"hover = false; press = false\" @mousedown=\"press = true\" @mouseup=\"press = false\" @keydown.enter=\"press = true\" @keydown.space=\"press = true\" @keyup=\"press = false\" @focus=\"focus = $event.target.matches(':focus-visible')\" @blur=\"focus = false\" :style=\"s\">\n    <span v-if=\"loading\" :style=\"{ display: 'inline-block', ...tierIcon, borderRadius: 'var(--radius-full)', border: '2px solid currentColor', borderTopColor: 'transparent', animation: 'kb-spin .7s linear infinite' }\" />\n    <Icon v-else :name=\"icon\" :size=\"16\" :style=\"tierIcon\" />\n  </button>\n</template>\n","buttons/ButtonGroup.vue":"<script setup>\nimport { useSlots, computed } from 'vue'\nconst props = defineProps({ style: Object })\nconst slots = useSlots()\nconst items = computed(() => slots.default ? slots.default() : [])\n</script>\n<template>\n  <div :style=\"{ display: 'inline-flex', ...style }\">\n    <template v-for=\"(child, i) in items\" :key=\"i\">\n      <component :is=\"child\" :style=\"{ borderRadius: 0,\n        ...(i === 0 ? { borderTopLeftRadius: 'var(--radius-md)', borderBottomLeftRadius: 'var(--radius-md)' } : null),\n        ...(i === items.length - 1 ? { borderTopRightRadius: 'var(--radius-md)', borderBottomRightRadius: 'var(--radius-md)' } : null),\n        marginLeft: i === 0 ? 0 : '-1px' }\" />\n    </template>\n  </div>\n</template>\n"});