@blenx-dev/components 0.0.1 → 0.0.3

package/src/components/Drawer/drawer.css.ts

@@ -1,412 +0,0 @@
-import { style } from "@vanilla-extract/css";
-import { themeContract } from "@blenx-dev/theme/contract";
-import { borderRadius, borderWidth, fontSize, fontWeight, spacing } from "@blenx-dev/theme/tokens";
-
-export const swipeArea = style({
-  position: "fixed",
-  zIndex: 50,
-  touchAction: "none",
-});
-
-export const swipeAreaBottom = style({
-  left: 0,
-  right: 0,
-  bottom: 0,
-  height: "32px",
-});
-
-export const swipeAreaTop = style({
-  left: 0,
-  right: 0,
-  top: 0,
-  height: "32px",
-});
-
-export const swipeAreaLeft = style({
-  top: 0,
-  bottom: 0,
-  left: 0,
-  width: "32px",
-});
-
-export const swipeAreaRight = style({
-  top: 0,
-  bottom: 0,
-  right: 0,
-  width: "32px",
-});
-
-export const backdrop = style({
-  position: "fixed",
-  inset: 0,
-  zIndex: 50,
-  backgroundColor: "rgba(0, 0, 0, 0.32)",
-  backdropFilter: "blur(4px)",
-  transitionProperty: "opacity",
-  transitionDuration: "450ms",
-  transitionTimingFunction: "cubic-bezier(0.32, 0.72, 0, 1)",
-  "@media": {
-    "(prefers-reduced-motion: reduce)": {
-      transitionProperty: "none",
-      transitionDuration: "0ms",
-    },
-  },
-});
-
-export const viewport = style({
-  position: "fixed",
-  inset: 0,
-  touchAction: "none",
-  boxSizing: "border-box",
-});
-
-export const viewportBottom = style({
-  display: "grid",
-  gridTemplateRows: "1fr auto",
-  paddingTop: "48px",
-});
-
-export const viewportTop = style({
-  display: "grid",
-  gridTemplateRows: "auto 1fr",
-  paddingBottom: "48px",
-});
-
-export const viewportLeft = style({
-  display: "flex",
-  justifyContent: "flex-start",
-});
-
-export const viewportRight = style({
-  display: "flex",
-  justifyContent: "flex-end",
-});
-
-export const viewportInset = style({
-  paddingLeft: spacing.medium,
-  paddingRight: spacing.medium,
-});
-
-export const popup = style({
-  position: "relative",
-  display: "flex",
-  flexDirection: "column",
-  maxHeight: "100%",
-  minHeight: 0,
-  minWidth: 0,
-  width: "100%",
-  boxSizing: "border-box",
-  backgroundColor: themeContract.surface,
-  color: themeContract.contentPrimary,
-  borderStyle: "solid",
-  borderColor: themeContract.border,
-  outline: "none",
-  willChange: "transform",
-  transitionProperty: "transform, box-shadow, height, background-color, margin, padding",
-  transitionDuration: "450ms",
-  transitionTimingFunction: "cubic-bezier(0.32, 0.72, 0, 1)",
-  "@media": {
-    "(prefers-reduced-motion: reduce)": {
-      transitionProperty: "none",
-      transitionDuration: "0ms",
-    },
-  },
-});
-
-export const popupDefault = style({
-  boxShadow: themeContract.shadowLg,
-});
-
-export const popupStraight = style({
-  vars: {
-    "--stack-step": "0",
-  },
-});
-
-export const popupInset = style({
-  borderWidth: "none",
-  borderRadius: "none",
-  "@media": {
-    "(min-width: 640px)": {
-      borderWidth: borderWidth.thin,
-      borderRadius: borderRadius.xlarge,
-    },
-  },
-});
-
-export const popupBottom = style({
-  gridRowStart: 2,
-  borderTopWidth: borderWidth.thin,
-  borderTopLeftRadius: borderRadius.xlarge,
-  borderTopRightRadius: borderRadius.xlarge,
-});
-
-export const popupTop = style({
-  borderBottomWidth: borderWidth.thin,
-  borderBottomLeftRadius: borderRadius.xlarge,
-  borderBottomRightRadius: borderRadius.xlarge,
-});
-
-export const popupLeft = style({
-  width: "calc(100% - 48px)",
-  maxWidth: "28rem",
-  borderRightWidth: borderWidth.thin,
-  borderTopRightRadius: borderRadius.xlarge,
-  borderBottomRightRadius: borderRadius.xlarge,
-});
-
-export const popupRight = style({
-  width: "calc(100% - 48px)",
-  maxWidth: "28rem",
-  borderLeftWidth: borderWidth.thin,
-  borderTopLeftRadius: borderRadius.xlarge,
-  borderBottomLeftRadius: borderRadius.xlarge,
-});
-
-export const closeButton = style({
-  position: "absolute",
-  top: spacing.small,
-  insetInlineEnd: spacing.small,
-});
-
-export const header = style({
-  display: "flex",
-  flexDirection: "column",
-  gap: spacing.small,
-  paddingTop: spacing.large,
-  paddingLeft: spacing.large,
-  paddingRight: spacing.large,
-  boxSizing: "border-box",
-});
-
-export const footer = style({
-  display: "flex",
-  flexDirection: "column-reverse",
-  gap: spacing.small,
-  paddingLeft: spacing.large,
-  paddingRight: spacing.large,
-  boxSizing: "border-box",
-  "@media": {
-    "(min-width: 640px)": {
-      flexDirection: "row",
-      justifyContent: "flex-end",
-    },
-  },
-});
-
-export const footerDefault = style({
-  borderTopWidth: borderWidth.thin,
-  borderTopStyle: "solid",
-  borderTopColor: themeContract.borderSubtle,
-  backgroundColor: themeContract.backgroundSubtle,
-  paddingTop: spacing.medium,
-  paddingBottom: spacing.medium,
-});
-
-export const footerBare = style({
-  paddingTop: spacing.medium,
-  paddingBottom: spacing.large,
-});
-
-export const title = style({
-  fontSize: "20px",
-  lineHeight: 1,
-  fontWeight: fontWeight.semibold,
-});
-
-export const description = style({
-  fontSize: fontSize.small,
-  lineHeight: 1.4,
-  color: themeContract.contentSecondary,
-});
-
-export const panel = style({
-  boxSizing: "border-box",
-  paddingTop: spacing.large,
-  paddingLeft: spacing.large,
-  paddingRight: spacing.large,
-  paddingBottom: spacing.large,
-});
-
-export const bar = style({
-  position: "absolute",
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  padding: spacing.small,
-  touchAction: "none",
-});
-
-export const barHorizontal = style({
-  insetInline: 0,
-  height: "48px",
-});
-
-export const barVertical = style({
-  insetBlock: 0,
-  width: "48px",
-});
-
-export const barTop = style({
-  bottom: 0,
-});
-
-export const barBottom = style({
-  top: 0,
-});
-
-export const barLeft = style({
-  right: 0,
-});
-
-export const barRight = style({
-  left: 0,
-});
-
-export const menu = style({
-  display: "flex",
-  flexDirection: "column",
-});
-
-export const menuItem = style({
-  display: "flex",
-  alignItems: "center",
-  gap: spacing.small,
-  minHeight: "36px",
-  paddingTop: spacing.xsmall,
-  paddingBottom: spacing.xsmall,
-  paddingLeft: spacing.small,
-  paddingRight: spacing.small,
-  borderRadius: borderRadius.small,
-  border: "none",
-  backgroundColor: "transparent",
-  color: themeContract.contentPrimary,
-  fontSize: fontSize.medium,
-  textAlign: "left",
-  cursor: "default",
-  outline: "none",
-});
-
-export const menuItemDestructive = style({
-  color: themeContract.sentimentNegative,
-});
-
-export const separator = style({
-  height: "1px",
-  backgroundColor: themeContract.borderSubtle,
-  marginTop: spacing.xsmall,
-  marginBottom: spacing.xsmall,
-});
-
-export const menuGroup = style({
-  display: "flex",
-  flexDirection: "column",
-});
-
-export const menuGroupLabel = style({
-  paddingTop: spacing.xsmall,
-  paddingBottom: spacing.xsmall,
-  paddingLeft: spacing.small,
-  paddingRight: spacing.small,
-  fontSize: fontSize.xsmall,
-  fontWeight: fontWeight.medium,
-  color: themeContract.contentSecondary,
-});
-
-export const menuTrigger = style({
-  display: "flex",
-  alignItems: "center",
-  gap: spacing.small,
-  minHeight: "36px",
-  paddingTop: spacing.xsmall,
-  paddingBottom: spacing.xsmall,
-  paddingLeft: spacing.small,
-  paddingRight: spacing.small,
-  borderRadius: borderRadius.small,
-  backgroundColor: "transparent",
-  border: "none",
-  color: themeContract.contentPrimary,
-});
-
-export const menuTriggerIcon = style({
-  marginLeft: "auto",
-  marginRight: "-2px",
-  opacity: 0.8,
-});
-
-export const menuCheckbox = style({
-  display: "grid",
-  alignItems: "center",
-  gap: spacing.small,
-  minHeight: "36px",
-  paddingTop: spacing.xsmall,
-  paddingBottom: spacing.xsmall,
-  paddingLeft: spacing.small,
-  paddingRight: spacing.small,
-  borderRadius: borderRadius.small,
-  backgroundColor: "transparent",
-  border: "none",
-  color: themeContract.contentPrimary,
-});
-
-export const menuCheckboxDefault = style({
-  gridTemplateColumns: "1rem 1fr",
-  paddingRight: spacing.medium,
-});
-
-export const menuCheckboxSwitch = style({
-  gridTemplateColumns: "1fr auto",
-  paddingRight: spacing.xsmall,
-});
-
-export const menuCheckboxSwitchLabel = style({
-  gridColumnStart: 1,
-});
-
-export const menuCheckboxSwitchIndicator = style({
-  gridColumnStart: 2,
-  display: "inline-flex",
-  alignItems: "center",
-  padding: "2px",
-  borderRadius: borderRadius.full,
-  backgroundColor: themeContract.borderSubtle,
-});
-
-export const menuCheckboxSwitchThumb = style({
-  width: "14px",
-  height: "14px",
-  borderRadius: borderRadius.full,
-  backgroundColor: themeContract.background,
-});
-
-export const menuCheckboxIndicator = style({
-  gridColumnStart: 1,
-});
-
-export const menuCheckboxLabel = style({
-  gridColumnStart: 2,
-});
-
-export const menuRadio = style({
-  display: "grid",
-  alignItems: "center",
-  gap: spacing.small,
-  minHeight: "36px",
-  paddingTop: spacing.xsmall,
-  paddingBottom: spacing.xsmall,
-  paddingLeft: spacing.small,
-  paddingRight: spacing.medium,
-  borderRadius: borderRadius.small,
-  backgroundColor: "transparent",
-  border: "none",
-  color: themeContract.contentPrimary,
-  gridTemplateColumns: "1rem 1fr",
-});
-
-export const menuRadioIndicator = style({
-  gridColumnStart: 1,
-});
-
-export const menuRadioLabel = style({
-  gridColumnStart: 2,
-});

package/src/components/Drawer/drawer.demo.tsx

@@ -1,58 +0,0 @@
-import { GearIcon } from "@phosphor-icons/react";
-import { Button } from "../Button/button";
-import { HStack, VStack } from "../Stack/stack";
-import { Text } from "../Text/text";
-import {
-  Drawer,
-  DrawerClose,
-  DrawerDescription,
-  DrawerFooter,
-  DrawerHeader,
-  DrawerPanel,
-  DrawerPopup,
-  DrawerTitle,
-  DrawerTrigger,
-} from "./drawer";
-
-export function DrawerDemo() {
-  return (
-    <VStack gap="medium">
-      <Text variant="h6">Drawer</Text>
-      <Drawer position="right">
-        <DrawerTrigger
-          render={
-            <Button variant="outline">
-              <GearIcon /> Settings
-            </Button>
-          }
-        />
-        <DrawerPopup showCloseButton showBar>
-          <DrawerHeader>
-            <DrawerTitle>Settings</DrawerTitle>
-            <DrawerDescription>Customize your application preferences.</DrawerDescription>
-          </DrawerHeader>
-          <DrawerPanel>
-            <VStack gap="small">
-              <Text variant="body2">Notification preferences</Text>
-              <Text variant="body2" color="secondary">
-                Choose how you receive updates and alerts.
-              </Text>
-              <Text variant="body2">Theme customization</Text>
-              <Text variant="body2" color="secondary">
-                Adjust the appearance to match your workflow.
-              </Text>
-            </VStack>
-          </DrawerPanel>
-          <DrawerFooter>
-            <HStack gap="small" justify="end" wrap>
-              <DrawerClose render={<Button variant="ghost" />}>Cancel</DrawerClose>
-              <Button>Save</Button>
-            </HStack>
-          </DrawerFooter>
-        </DrawerPopup>
-      </Drawer>
-    </VStack>
-  );
-}
-
-export const demos = [{ name: "Default", component: DrawerDemo }];

package/src/components/Drawer/drawer.doc.tsx

@@ -1,49 +0,0 @@
-import { Button } from "../Button/button";
-import {
-  Drawer,
-  DrawerClose,
-  DrawerDescription,
-  DrawerFooter,
-  DrawerHeader,
-  DrawerPanel,
-  DrawerPopup,
-  DrawerTitle,
-  DrawerTrigger,
-} from "./drawer";
-
-export function BottomStory() {
-  return (
-    <Drawer position="bottom">
-      <DrawerTrigger render={<Button>Open Bottom Drawer</Button>} />
-      <DrawerPopup showBar showCloseButton>
-        <DrawerHeader>
-          <DrawerTitle>Bottom Drawer</DrawerTitle>
-          <DrawerDescription>Drawer description</DrawerDescription>
-        </DrawerHeader>
-        <DrawerPanel>
-          <div>Drawer content goes here.</div>
-        </DrawerPanel>
-        <DrawerFooter>
-          <DrawerClose render={<Button variant="soft">Cancel</Button>} />
-          <Button variant="solid">Save</Button>
-        </DrawerFooter>
-      </DrawerPopup>
-    </Drawer>
-  );
-}
-
-export function RightStory() {
-  return (
-    <Drawer position="right">
-      <DrawerTrigger render={<Button>Open Right Drawer</Button>} />
-      <DrawerPopup showCloseButton>
-        <DrawerHeader>
-          <DrawerTitle>Side Drawer</DrawerTitle>
-        </DrawerHeader>
-        <DrawerPanel>
-          <div>Side drawer content.</div>
-        </DrawerPanel>
-      </DrawerPopup>
-    </Drawer>
-  );
-}