@blenx-dev/components 0.0.2 → 0.0.3

package/src/components/Tabs/tabs.css.ts

@@ -1,259 +0,0 @@
-import { style } from "@vanilla-extract/css";
-import { themeContract } from "@blenx-dev/theme/contract";
-import {
-  borderRadius,
-  duration,
-  easing,
-  fontSize,
-  fonts,
-  fontWeight,
-  spacing,
-} from "@blenx-dev/theme/tokens";
-
-export const root = style({
-  display: "flex",
-  flexDirection: "column",
-  gap: spacing.medium,
-  width: "100%",
-  border: "none",
-  backgroundColor: "transparent",
-  padding: 0,
-  borderRadius: 0,
-  outline: "none",
-});
-
-export const rootVertical = style({
-  flexDirection: "row",
-  alignItems: "flex-start",
-  gap: spacing.large,
-});
-
-export const list = style({
-  position: "relative",
-  display: "flex",
-  overflow: "hidden",
-  border: "none",
-  outline: "none",
-  backgroundColor: "transparent",
-  padding: 0,
-  borderRadius: 0,
-});
-
-export const listDefault = style({
-  flexDirection: "row",
-  alignItems: "stretch",
-  gap: 0,
-  padding: 0,
-  backgroundColor: "transparent",
-  borderBottomWidth: 1,
-  borderBottomStyle: "solid",
-  borderBottomColor: themeContract.borderSubtle,
-  borderRadius: 0,
-});
-
-export const listUnderline = style({
-  display: "flex",
-  alignItems: "stretch",
-  gap: spacing.large,
-  borderBottomWidth: 1,
-  borderBottomStyle: "solid",
-  borderBottomColor: themeContract.borderSubtle,
-  padding: 0,
-});
-
-export const listUnderlineVertical = style({
-  flexDirection: "column",
-  alignSelf: "auto",
-  alignItems: "stretch",
-  gap: 0,
-  padding: 0,
-  paddingRight: spacing.small,
-  backgroundColor: "transparent",
-  borderRightWidth: 1,
-  borderRightStyle: "solid",
-  borderRightColor: themeContract.borderSubtle,
-  borderRadius: 0,
-});
-
-export const listVertical = style({
-  flexDirection: "column",
-  alignItems: "stretch",
-  minWidth: 220,
-  borderRightWidth: 1,
-  borderRightStyle: "solid",
-  borderRightColor: themeContract.borderSubtle,
-});
-
-export const tabActiveVertical = style({
-  color: themeContract.contentPrimary,
-  fontWeight: fontWeight.semibold,
-  backgroundColor: themeContract.backgroundSubtle,
-  borderRightWidth: 2,
-  borderRightStyle: "solid",
-  borderRightColor: themeContract.secondary,
-});
-
-export const tabUnderlineActive = style({
-  color: themeContract.contentPrimary,
-  fontWeight: fontWeight.semibold,
-  borderBottomWidth: 2,
-  borderBottomStyle: "solid",
-  borderBottomColor: themeContract.contentPrimary,
-});
-
-export const listGhost = style({
-  display: "flex",
-  gap: spacing.small,
-});
-
-export const tabGhost = style({
-  padding: `${spacing.small} ${spacing.medium}`,
-  borderRadius: borderRadius.medium,
-  color: themeContract.contentSecondary,
-  selectors: {
-    "&:hover": {
-      backgroundColor: themeContract.backgroundSubtle,
-    },
-  },
-});
-
-export const tabGhostActive = style({
-  backgroundColor: themeContract.backgroundSubtle,
-  color: themeContract.contentPrimary,
-  fontWeight: fontWeight.semibold,
-});
-
-export const listSegmented = style({
-  display: "flex",
-  gap: spacing.xxsmall,
-  padding: spacing.xxsmall,
-  backgroundColor: themeContract.backgroundSubtle,
-  borderWidth: 1,
-  borderStyle: "solid",
-  borderColor: themeContract.borderSubtle,
-  borderRadius: borderRadius.large,
-});
-
-export const tabSegmented = style({
-  padding: `${spacing.small} ${spacing.medium}`,
-  borderRadius: borderRadius.medium,
-  color: themeContract.contentSecondary,
-  selectors: {
-    "&:hover": {
-      backgroundColor: themeContract.surface,
-    },
-  },
-});
-
-export const tabSegmentedActive = style({
-  backgroundColor: themeContract.surface,
-  color: themeContract.contentOnPrimary,
-  fontWeight: fontWeight.semibold,
-});
-
-export const tab = style({
-  position: "relative",
-  zIndex: 1,
-  display: "inline-flex",
-  alignItems: "center",
-  justifyContent: "center",
-  gap: spacing.xsmall,
-  minHeight: 36,
-  backgroundColor: "transparent",
-  cursor: "pointer",
-  appearance: "none",
-  outline: "none",
-  borderWidth: 0,
-  border: "none",
-  textDecoration: "none",
-  whiteSpace: "nowrap",
-  userSelect: "none",
-  font: "inherit",
-  fontFamily: fonts.display,
-  WebkitTapHighlightColor: "transparent",
-  transition: `color ${duration.normal} ${easing.standard}, background-color ${duration.normal} ${easing.standard}, box-shadow ${duration.normal} ${easing.standard}`,
-});
-
-export const tabDefault = style({
-  position: "relative",
-  padding: `${spacing.small} ${spacing.medium}`,
-  borderRadius: 0,
-  color: themeContract.contentSecondary,
-  fontSize: fontSize.small,
-  fontWeight: fontWeight.medium,
-  lineHeight: 1.2,
-  minHeight: 40,
-  backgroundColor: "transparent",
-  selectors: {
-    "&:hover": {
-      color: themeContract.contentPrimary,
-      backgroundColor: themeContract.backgroundSubtle,
-    },
-    "&:focus-visible": {
-      boxShadow: `inset 0 -2px 0 ${themeContract.secondary}`,
-    },
-  },
-});
-
-export const tabVertical = style({
-  width: "100%",
-  justifyContent: "flex-start",
-});
-
-export const tabActive = style({
-  color: themeContract.contentPrimary,
-  fontWeight: fontWeight.semibold,
-});
-
-export const tabDisabled = style({
-  opacity: 0.45,
-  cursor: "not-allowed",
-});
-
-export const tabActiveDefault = style({
-  color: themeContract.contentPrimary,
-  fontWeight: fontWeight.semibold,
-  backgroundColor: "transparent",
-  borderBottomWidth: 2,
-  borderBottomStyle: "solid",
-  borderBottomColor: themeContract.secondary,
-});
-
-export const tabUnderline = style({
-  padding: `${spacing.small} 0`,
-  borderRadius: 0,
-  color: themeContract.contentSecondary,
-  fontSize: fontSize.small,
-  fontWeight: fontWeight.medium,
-  backgroundColor: "transparent",
-  selectors: {
-    "&:hover": {
-      color: themeContract.contentPrimary,
-    },
-  },
-});
-
-export const indicator = style({
-  position: "absolute",
-  pointerEvents: "none",
-});
-
-export const indicatorDefault = style({
-  display: "none",
-});
-
-export const indicatorUnderline = style({
-  zIndex: 0,
-  borderRadius: borderRadius.full,
-  backgroundColor: themeContract.secondary,
-});
-
-export const panel = style({
-  minWidth: 0,
-  paddingTop: spacing.large,
-  outline: "none",
-});
-
-export const panelVertical = style({
-  flex: 1,
-});

package/src/components/Tabs/tabs.demo.tsx

@@ -1,33 +0,0 @@
-import { VStack } from "../Stack/stack";
-import { Text } from "../Text/text";
-import { Tabs, TabsList, TabsPanel, TabsTab } from "./tabs";
-
-export function TabsDemo() {
-  return (
-    <VStack gap="medium">
-      <Tabs defaultValue="tab1">
-        <TabsList>
-          <TabsTab value="tab1">Overview</TabsTab>
-          <TabsTab value="tab2">Usage</TabsTab>
-          <TabsTab value="tab3">API</TabsTab>
-        </TabsList>
-        <TabsPanel value="tab1">
-          <Text variant="body2">
-            Welcome to the component overview. Here you will find a summary of features and
-            capabilities.
-          </Text>
-        </TabsPanel>
-        <TabsPanel value="tab2">
-          <Text variant="body2">
-            Usage examples and code snippets to help you integrate the component into your project.
-          </Text>
-        </TabsPanel>
-        <TabsPanel value="tab3">
-          <Text variant="body2">Detailed API reference including props, types, and methods.</Text>
-        </TabsPanel>
-      </Tabs>
-    </VStack>
-  );
-}
-
-export const demos = [{ name: "Default", component: TabsDemo }];

package/src/components/Tabs/tabs.doc.tsx

@@ -1,62 +0,0 @@
-import { Stack } from "../Stack/stack";
-import { Text } from "../Text/text";
-import { Tabs, TabsList, TabsPanel, TabsTab } from "./tabs";
-
-export function UnderlineStory() {
-  return (
-    <Stack gap="medium">
-      <Text variant="h4">Underline variant</Text>
-      <Tabs defaultValue="tab1">
-        <TabsList>
-          <TabsTab value="tab1">Tab 1</TabsTab>
-          <TabsTab value="tab2">Tab 2</TabsTab>
-          <TabsTab value="tab3" disabled>
-            Disabled
-          </TabsTab>
-        </TabsList>
-        <TabsPanel value="tab1">
-          <Text variant="body2">Tab 1 content</Text>
-        </TabsPanel>
-        <TabsPanel value="tab2">
-          <Text variant="body2">Tab 2 content</Text>
-        </TabsPanel>
-      </Tabs>
-    </Stack>
-  );
-}
-
-export function GhostStory() {
-  return (
-    <Stack gap="medium">
-      <Text variant="h4">Ghost variant</Text>
-      <Tabs defaultValue="tab1" variant="ghost">
-        <TabsList>
-          <TabsTab value="tab1">Tab 1</TabsTab>
-          <TabsTab value="tab2">Tab 2</TabsTab>
-          <TabsTab value="tab3">Tab 3</TabsTab>
-        </TabsList>
-        <TabsPanel value="tab1">
-          <Text variant="body2">Ghost tab content</Text>
-        </TabsPanel>
-      </Tabs>
-    </Stack>
-  );
-}
-
-export function SegmentedStory() {
-  return (
-    <Stack gap="medium">
-      <Text variant="h4">Segmented variant</Text>
-      <Tabs defaultValue="tab1" variant="segmented">
-        <TabsList>
-          <TabsTab value="tab1">Tab 1</TabsTab>
-          <TabsTab value="tab2">Tab 2</TabsTab>
-          <TabsTab value="tab3">Tab 3</TabsTab>
-        </TabsList>
-        <TabsPanel value="tab1">
-          <Text variant="body2">Segmented tab content</Text>
-        </TabsPanel>
-      </Tabs>
-    </Stack>
-  );
-}

package/src/components/Tabs/tabs.tsx

@@ -1,119 +0,0 @@
-import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
-import clsx from "clsx";
-import * as React from "react";
-import {
-  root,
-  rootVertical,
-  list,
-  listUnderline,
-  listGhost,
-  listSegmented,
-  tab,
-  tabUnderline,
-  tabGhost,
-  tabSegmented,
-  tabVertical,
-  tabUnderlineActive,
-  tabGhostActive,
-  tabSegmentedActive,
-  tabDisabled,
-  panel,
-  panelVertical,
-} from "./tabs.css";
-
-type TabsVariant = "underline" | "ghost" | "segmented";
-
-type TabsRootProps = TabsPrimitive.Root.Props & {
-  variant?: TabsVariant;
-};
-
-type TabsListProps = TabsPrimitive.List.Props;
-
-type TabsTabProps = TabsPrimitive.Tab.Props;
-
-type TabsPanelProps = TabsPrimitive.Panel.Props;
-
-type TabsContextValue = {
-  variant: TabsVariant;
-};
-
-const DEFAULT_VARIANT: TabsVariant = "underline";
-
-const TabsContext = React.createContext<TabsContextValue | null>(null);
-
-function useTabsContext(): TabsContextValue {
-  return React.useContext(TabsContext) ?? { variant: DEFAULT_VARIANT };
-}
-
-export function Tabs({ children, variant = DEFAULT_VARIANT, ...props }: TabsRootProps) {
-  const contextValue = React.useMemo(() => ({ variant }), [variant]);
-
-  return (
-    <TabsContext.Provider value={contextValue}>
-      <TabsPrimitive.Root
-        className={(state) => clsx(root, state.orientation === "vertical" && rootVertical)}
-        {...props}
-      >
-        {children}
-      </TabsPrimitive.Root>
-    </TabsContext.Provider>
-  );
-}
-
-export function TabsList({ className, ...props }: TabsListProps) {
-  const { variant } = useTabsContext();
-
-  return (
-    <TabsPrimitive.List
-      className={clsx(
-        list,
-        variant === "underline" && listUnderline,
-        variant === "ghost" && listGhost,
-        variant === "segmented" && listSegmented,
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-export function TabsTab({ className, ...props }: TabsTabProps) {
-  const { variant } = useTabsContext();
-
-  return (
-    <TabsPrimitive.Tab
-      className={(state) =>
-        clsx(
-          tab,
-          variant === "underline" && tabUnderline,
-          variant === "ghost" && tabGhost,
-          variant === "segmented" && tabSegmented,
-          state.orientation === "vertical" && tabVertical,
-          state.active && variant === "underline" && tabUnderlineActive,
-          state.active && variant === "ghost" && tabGhostActive,
-          state.active && variant === "segmented" && tabSegmentedActive,
-          state.disabled && tabDisabled,
-          className,
-        )
-      }
-      {...props}
-    />
-  );
-}
-
-export function TabsIndicator() {
-  return null;
-}
-
-function TabsPanel({ className, ...props }: TabsPanelProps) {
-  return (
-    <TabsPrimitive.Panel
-      className={(state) =>
-        clsx(panel, state.orientation === "vertical" && panelVertical, className)
-      }
-      {...props}
-    />
-  );
-}
-
-export { TabsPanel };

package/src/components/Text/docs-meta.json

@@ -1,9 +0,0 @@
-{
-  "$schema": "https://blenx-ui.vercel.app/docs/docs-meta.schema.json",
-  "title": "Text",
-  "description": "A polymorphic typography component with variant presets for headings, body text, and code. Supports color, alignment, and weight.",
-  "category": "Typography",
-  "status": "stable",
-  "keywords": ["text", "typography", "heading", "paragraph", "font"],
-  "related": ["Badge"]
-}

package/src/components/Text/index.ts

@@ -1,2 +0,0 @@
-export { Text } from "./text";
-export type { TextProps } from "./text";

package/src/components/Text/registry-meta.json

@@ -1,19 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "text",
-  "type": "registry:ui",
-  "title": "Text",
-  "description": "A StyleX Text component.",
-  "files": [
-    {
-      "file": "text.tsx",
-      "type": "registry:ui",
-      "target": "@ui/Text/text.tsx"
-    },
-    {
-      "file": "text.css.ts",
-      "type": "registry:file",
-      "target": "@ui/Text/text.css.ts"
-    }
-  ]
-}

package/src/components/Text/text.css.ts

@@ -1,167 +0,0 @@
-import { recipe } from "@vanilla-extract/recipes";
-import { themeContract } from "@blenx-dev/theme/contract";
-import {
-  borderRadius,
-  fonts,
-  fontSize,
-  fontWeight,
-  letterSpacing,
-  lineHeight,
-  spacing,
-} from "@blenx-dev/theme/tokens";
-
-export const textVariants = recipe({
-  base: {
-    margin: 0,
-    textDecoration: "none",
-  },
-  variants: {
-    variant: {
-      h1: {
-        fontFamily: fonts.display,
-        fontSize: fontSize.displayLg,
-        lineHeight: lineHeight.tight,
-        fontWeight: fontWeight.bold,
-        letterSpacing: letterSpacing.tight,
-        margin: 0,
-        scrollMarginTop: "80px",
-      },
-      h2: {
-        fontFamily: fonts.heading,
-        fontSize: fontSize.xxlarge,
-        lineHeight: lineHeight.tight,
-        fontWeight: fontWeight.bold,
-        letterSpacing: letterSpacing.tight,
-        margin: 0,
-        scrollMarginTop: "80px",
-      },
-      h3: {
-        fontFamily: fonts.heading,
-        fontSize: fontSize.xlarge,
-        lineHeight: lineHeight.snug,
-        fontWeight: fontWeight.semibold,
-        letterSpacing: letterSpacing.snug,
-        margin: 0,
-        scrollMarginTop: "80px",
-      },
-      h4: {
-        fontFamily: fonts.heading,
-        fontSize: fontSize.large,
-        lineHeight: lineHeight.tight,
-        fontWeight: fontWeight.semibold,
-        margin: 0,
-        scrollMarginTop: "80px",
-      },
-      h5: {
-        fontFamily: fonts.heading,
-        fontSize: fontSize.medium,
-        lineHeight: lineHeight.normal,
-        fontWeight: fontWeight.semibold,
-        margin: 0,
-        scrollMarginTop: "80px",
-      },
-      h6: {
-        fontFamily: fonts.heading,
-        fontSize: fontSize.small,
-        lineHeight: lineHeight.normal,
-        fontWeight: fontWeight.semibold,
-        margin: 0,
-        scrollMarginTop: "80px",
-      },
-      body1: {
-        fontFamily: fonts.body,
-        fontSize: fontSize.medium,
-        lineHeight: lineHeight.normal,
-        fontWeight: fontWeight.regular,
-        margin: 0,
-      },
-      body2: {
-        fontFamily: fonts.body,
-        fontSize: fontSize.small,
-        lineHeight: lineHeight.normal,
-        fontWeight: fontWeight.regular,
-        margin: 0,
-      },
-      body3: {
-        fontFamily: fonts.body,
-        fontSize: fontSize.xsmall,
-        lineHeight: lineHeight.normal,
-        fontWeight: fontWeight.regular,
-        margin: 0,
-      },
-      body4: {
-        fontFamily: fonts.label,
-        fontSize: fontSize.xxsmall,
-        lineHeight: lineHeight.normal,
-        fontWeight: fontWeight.medium,
-        letterSpacing: letterSpacing.wide,
-        margin: 0,
-      },
-      caption: {
-        fontFamily: fonts.label,
-        fontSize: fontSize.xsmall,
-        lineHeight: lineHeight.normal,
-        fontWeight: fontWeight.medium,
-        letterSpacing: letterSpacing.wide,
-        margin: 0,
-      },
-      creatorNote: {
-        fontFamily: fonts.body,
-        fontSize: fontSize.large,
-        lineHeight: "28px",
-        fontWeight: fontWeight.regular,
-        fontStyle: "italic",
-        margin: 0,
-      },
-      p: {
-        fontFamily: fonts.body,
-        fontSize: fontSize.medium,
-        lineHeight: lineHeight.normal,
-        fontWeight: fontWeight.regular,
-        margin: 0,
-      },
-      div: {
-        fontFamily: fonts.body,
-        fontSize: fontSize.medium,
-        lineHeight: lineHeight.normal,
-        fontWeight: fontWeight.regular,
-        margin: 0,
-      },
-      code: {
-        margin: 0,
-        backgroundColor: themeContract.backgroundSubtle,
-        borderRadius: borderRadius.small,
-      },
-    },
-    textAlign: {
-      left: { textAlign: "left" },
-      center: { textAlign: "center" },
-      right: { textAlign: "right" },
-    },
-    weight: {
-      regular: { fontWeight: fontWeight.regular },
-      medium: { fontWeight: fontWeight.medium },
-      semibold: { fontWeight: fontWeight.semibold },
-      bold: { fontWeight: fontWeight.bold },
-    },
-    transform: {
-      uppercase: { textTransform: "uppercase" },
-      capitalize: { textTransform: "capitalize" },
-      none: { textTransform: "none" },
-      lowercase: { textTransform: "lowercase" },
-    },
-    size: {
-      xxsmall: { fontSize: spacing.xxsmall, lineHeight: lineHeight.tight },
-      xsmall: { fontSize: spacing.xsmall, lineHeight: lineHeight.tight },
-      small: { fontSize: spacing.small, lineHeight: lineHeight.tight },
-      medium: { fontSize: spacing.medium, lineHeight: lineHeight.tight },
-      large: { fontSize: spacing.large, lineHeight: lineHeight.tight },
-      xlarge: { fontSize: spacing.xlarge, lineHeight: lineHeight.tight },
-      xxlarge: { fontSize: spacing.xxlarge, lineHeight: lineHeight.tight },
-      xxxlarge: { fontSize: spacing.xxxlarge, lineHeight: lineHeight.tight },
-      huge: { fontSize: spacing.huge, lineHeight: lineHeight.tight },
-      massive: { fontSize: spacing.massive, lineHeight: lineHeight.tight },
-      titanic: { fontSize: spacing.titanic, lineHeight: lineHeight.tight },
-    },
-  },
-});