@blenx-dev/components 0.0.2 → 0.0.3

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

@@ -1,131 +0,0 @@
-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

@@ -1,110 +0,0 @@
-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

@@ -1,100 +0,0 @@
-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>
-  );
-}