@saas-ui/command-bar
Version:
Chakra UI CommandBar Component
147 lines (145 loc) • 2.61 kB
JavaScript
'use client'
// src/command-bar-theme.ts
import { createMultiStyleConfigHelpers } from "@chakra-ui/styled-system";
var parts = [
"container",
"dialog",
"input",
"list",
"loading",
"empty",
"group",
"item",
"separator"
];
var { definePartsStyle, defineMultiStyleConfig } = createMultiStyleConfigHelpers(parts);
var baseStyle = definePartsStyle({
container: {
display: "flex",
flexDirection: "column",
minHeight: 1,
borderRadius: "md",
bg: "white",
color: "inherit",
py: 2,
zIndex: "modal",
flex: 1,
_dark: {
bg: "gray.700"
}
},
input: {
px: 4,
py: 2,
mb: 2,
outline: "none",
bg: "transparent",
w: "full"
},
list: {
borderTopWidth: "1px",
overflow: "auto",
overscrollBehavior: "contain",
flex: 1
},
group: {
"& > [cmdk-group-heading]": {
px: 4,
py: 2,
fontSize: "sm",
fontWeight: "semibold",
color: "muted"
}
},
item: {
display: "flex",
alignItems: "center",
cursor: "pointer",
fontSize: "md",
h: 12,
px: 4,
gap: 4,
userSelect: "none",
transition: "common",
transitionDuration: "normal",
"&[data-disabled=true]": {
opacity: 0.6
},
"&[data-selected=true]": {
bg: "gray.100",
_dark: {
bg: "whiteAlpha.100"
}
},
_active: {
bg: "gray.50",
_dark: {
bg: "whiteAlpha.50"
},
_disabled: {
bg: "transparent",
cursor: "inherit"
}
}
},
empty: {
display: "flex",
alignItems: "center",
justifyContent: "center",
textAlign: "center",
color: "muted",
fontSize: "md",
h: 16
},
loading: {
display: "flex",
alignItems: "center",
color: "muted",
fontSize: "md",
px: 4,
py: 2,
h: 12
},
dialog: {
borderWidth: "1px"
}
});
function getSize(value) {
if (value === "full") {
return definePartsStyle({
dialog: {
maxW: "100vw",
minH: "$100vh",
my: "0",
borderRadius: "0"
}
});
}
return definePartsStyle({
dialog: { maxW: value }
});
}
var sizes = {
xs: getSize("xs"),
sm: getSize("sm"),
md: getSize("md"),
lg: getSize("lg"),
xl: getSize("xl"),
"2xl": getSize("2xl"),
"3xl": getSize("3xl"),
"4xl": getSize("4xl"),
"5xl": getSize("5xl"),
"6xl": getSize("6xl"),
full: getSize("full")
};
var commandBarTheme = defineMultiStyleConfig({
defaultProps: {
size: "md"
},
baseStyle,
sizes
});
export {
commandBarTheme
};
//# sourceMappingURL=chunk-PAAYRCJD.mjs.map