@blenx-dev/components 0.0.0

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

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

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

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

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

@@ -0,0 +1,9 @@
+{
+  "$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

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

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

@@ -0,0 +1,19 @@
+{
+  "$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

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