@blenx-dev/components 0.0.0

package/src/components/Command/command.css.ts

@@ -0,0 +1,131 @@
+import { style } from "@vanilla-extract/css";
+import { themeContract } from "@blenx-dev/theme/contract";
+import { borderRadius, fontSize, fontWeight, spacing } from "@blenx-dev/theme/tokens";
+
+export const root = style({
+  display: "flex",
+  flexDirection: "column",
+  width: "100%",
+  maxHeight: "100%",
+  overflow: "hidden",
+  backgroundColor: themeContract.surface,
+  borderWidth: 1,
+  borderStyle: "solid",
+  borderColor: themeContract.border,
+  borderRadius: borderRadius.large,
+  boxShadow: themeContract.shadowLg,
+  boxSizing: "border-box",
+  outline: "none",
+});
+
+export const inputWrapper = style({
+  display: "flex",
+  alignItems: "center",
+  gap: spacing.small,
+  paddingLeft: spacing.small,
+  paddingRight: spacing.small,
+  borderBottomWidth: 1,
+  borderBottomStyle: "solid",
+  borderBottomColor: themeContract.borderSubtle,
+  boxSizing: "border-box",
+});
+
+export const inputIcon = style({
+  display: "flex",
+  alignItems: "center",
+  flexShrink: 0,
+  color: themeContract.contentDisabled,
+});
+
+export const input = style({
+  width: "100%",
+  height: 44,
+  border: "none",
+  outline: "none",
+  backgroundColor: "transparent",
+  fontSize: fontSize.small,
+  fontFamily: "inherit",
+  color: themeContract.contentPrimary,
+  selectors: {
+    "&::placeholder": {
+      color: themeContract.contentDisabled,
+    },
+  },
+});
+
+export const list = style({
+  overflow: "auto",
+  maxHeight: 300,
+  padding: spacing.xsmall,
+});
+
+export const group = style({
+  display: "flex",
+  flexDirection: "column",
+});
+
+export const groupHeading = style({
+  paddingTop: spacing.small,
+  paddingBottom: spacing.xsmall,
+  paddingLeft: spacing.small,
+  paddingRight: spacing.small,
+  fontSize: fontSize.xsmall,
+  fontWeight: fontWeight.semibold,
+  color: themeContract.contentSecondary,
+});
+
+export const item = style({
+  display: "flex",
+  alignItems: "center",
+  gap: spacing.small,
+  boxSizing: "border-box",
+  minHeight: 32,
+  paddingTop: spacing.xsmall,
+  paddingBottom: spacing.xsmall,
+  paddingLeft: spacing.small,
+  paddingRight: spacing.small,
+  borderRadius: borderRadius.small,
+  fontSize: fontSize.small,
+  lineHeight: "1.4",
+  color: themeContract.contentPrimary,
+  cursor: "pointer",
+  userSelect: "none",
+  outline: "none",
+  selectors: {
+    "&:hover": {
+      backgroundColor: themeContract.backgroundSubtle,
+    },
+    "&:focus-visible": {
+      boxShadow: `0 0 0 2px ${themeContract.focusRing}`,
+    },
+  },
+});
+
+export const itemActive = style({
+  backgroundColor: themeContract.backgroundSubtle,
+});
+
+export const itemDisabled = style({
+  color: themeContract.contentDisabled,
+  cursor: "default",
+  selectors: {
+    "&:hover": {
+      backgroundColor: "transparent",
+    },
+  },
+});
+
+export const separator = style({
+  height: 1,
+  marginTop: spacing.xsmall,
+  marginBottom: spacing.xsmall,
+  backgroundColor: themeContract.borderSubtle,
+});
+
+export const empty = style({
+  paddingTop: spacing.large,
+  paddingBottom: spacing.large,
+  textAlign: "center",
+  fontSize: fontSize.small,
+  color: themeContract.contentSecondary,
+});

package/src/components/Command/command.demo.tsx

@@ -0,0 +1,110 @@
+import {
+  Command,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandSeparator,
+} from "./command";
+import { HStack, VStack } from "../Stack/stack";
+import { Text } from "../Text/text";
+import { Gear, Palette, FileCode } from "@phosphor-icons/react";
+
+export function CommandBasic() {
+  return (
+    <VStack gap="small">
+      <Text variant="body2" color="secondary">
+        A basic command palette with search filtering.
+      </Text>
+      <Command>
+        <CommandInput placeholder="Search frameworks…" />
+        <CommandList>
+          <CommandEmpty>No frameworks found.</CommandEmpty>
+          <CommandItem value="react">React</CommandItem>
+          <CommandItem value="vue">Vue</CommandItem>
+          <CommandItem value="svelte">Svelte</CommandItem>
+          <CommandItem value="solid">Solid</CommandItem>
+          <CommandItem value="angular">Angular</CommandItem>
+        </CommandList>
+      </Command>
+    </VStack>
+  );
+}
+
+export function CommandWithGroups() {
+  return (
+    <VStack gap="small">
+      <Text variant="body2" color="secondary">
+        Command palette with grouped items and custom icons.
+      </Text>
+      <Command>
+        <CommandInput placeholder="Search commands…" />
+        <CommandList>
+          <CommandEmpty>No results.</CommandEmpty>
+          <CommandGroup heading="Frameworks">
+            <CommandItem value="react">
+              <HStack gap="small" align="center">
+                <FileCode size={16} />
+                <span>React</span>
+              </HStack>
+            </CommandItem>
+            <CommandItem value="vue">
+              <HStack gap="small" align="center">
+                <FileCode size={16} />
+                <span>Vue</span>
+              </HStack>
+            </CommandItem>
+            <CommandItem value="svelte">
+              <HStack gap="small" align="center">
+                <FileCode size={16} />
+                <span>Svelte</span>
+              </HStack>
+            </CommandItem>
+          </CommandGroup>
+          <CommandSeparator />
+          <CommandGroup heading="Tools">
+            <CommandItem value="vite">
+              <HStack gap="small" align="center">
+                <Gear size={16} />
+                <span>Vite</span>
+              </HStack>
+            </CommandItem>
+            <CommandItem value="webpack">
+              <HStack gap="small" align="center">
+                <Gear size={16} />
+                <span>Webpack</span>
+              </HStack>
+            </CommandItem>
+            <CommandItem value="turbopack">
+              <HStack gap="small" align="center">
+                <Gear size={16} />
+                <span>Turbopack</span>
+              </HStack>
+            </CommandItem>
+          </CommandGroup>
+          <CommandSeparator />
+          <CommandGroup heading="Themes">
+            <CommandItem value="light">
+              <HStack gap="small" align="center">
+                <Palette size={16} />
+                <span>Light</span>
+              </HStack>
+            </CommandItem>
+            <CommandItem value="dark">
+              <HStack gap="small" align="center">
+                <Palette size={16} />
+                <span>Dark</span>
+              </HStack>
+            </CommandItem>
+          </CommandGroup>
+        </CommandList>
+      </Command>
+    </VStack>
+  );
+}
+
+export const demos = [
+  { name: "Default", component: CommandBasic },
+  { name: "With Groups", component: CommandWithGroups },
+];

package/src/components/Command/command.doc.tsx

@@ -0,0 +1,100 @@
+import { HStack } from "../Stack/stack";
+import {
+  Command,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandSeparator,
+} from "./command";
+import { Gear, Palette, FileCode } from "@phosphor-icons/react";
+
+export function DefaultStory() {
+  return (
+    <Command>
+      <CommandInput placeholder="Search…" />
+      <CommandList>
+        <CommandEmpty>No results.</CommandEmpty>
+        <CommandItem value="react">React</CommandItem>
+        <CommandItem value="vue">Vue</CommandItem>
+        <CommandItem value="svelte">Svelte</CommandItem>
+        <CommandItem value="solid">Solid</CommandItem>
+        <CommandItem value="angular">Angular</CommandItem>
+      </CommandList>
+    </Command>
+  );
+}
+
+export function WithGroupsStory() {
+  return (
+    <Command>
+      <CommandInput placeholder="Search…" />
+      <CommandList>
+        <CommandGroup heading="Frameworks">
+          <CommandItem value="react">
+            <HStack gap="small" align="center">
+              <FileCode size={16} />
+              <span>React</span>
+            </HStack>
+          </CommandItem>
+          <CommandItem value="vue">
+            <HStack gap="small" align="center">
+              <FileCode size={16} />
+              <span>Vue</span>
+            </HStack>
+          </CommandItem>
+        </CommandGroup>
+        <CommandSeparator />
+        <CommandGroup heading="Tools">
+          <CommandItem value="vite">
+            <HStack gap="small" align="center">
+              <Gear size={16} />
+              <span>Vite</span>
+            </HStack>
+          </CommandItem>
+          <CommandItem value="webpack">
+            <HStack gap="small" align="center">
+              <Gear size={16} />
+              <span>Webpack</span>
+            </HStack>
+          </CommandItem>
+        </CommandGroup>
+        <CommandSeparator />
+        <CommandGroup heading="Themes">
+          <CommandItem value="light">
+            <HStack gap="small" align="center">
+              <Palette size={16} />
+              <span>Light</span>
+            </HStack>
+          </CommandItem>
+          <CommandItem value="dark">
+            <HStack gap="small" align="center">
+              <Palette size={16} />
+              <span>Dark</span>
+            </HStack>
+          </CommandItem>
+        </CommandGroup>
+      </CommandList>
+    </Command>
+  );
+}
+
+export function WithSelectionStory() {
+  return (
+    <Command onItemSelect={(v) => console.log("selected:", v)}>
+      <CommandInput placeholder="Pick a color…" />
+      <CommandList>
+        <CommandEmpty>No colors found.</CommandEmpty>
+        <CommandItem value="red">Red</CommandItem>
+        <CommandItem value="green">Green</CommandItem>
+        <CommandItem value="blue">Blue</CommandItem>
+        <CommandItem value="purple">Purple</CommandItem>
+        <CommandItem value="orange">Orange</CommandItem>
+        <CommandItem value="disabled-example" disabled>
+          Disabled Item
+        </CommandItem>
+      </CommandList>
+    </Command>
+  );
+}