@onbeam/ui - npm Package Compare versions

Comparing version 1.0.0-1 to 1.0.0-2

dist/index.d.ts

@@ -6,9 +6,24 @@ import * as react from 'react';
 
-type DistributiveOmit<T, K extends keyof any> = T extends any ? Omit<T, K> : never;
+// ----------------------------------------------
+// utility types
+// ----------------------------------------------
+
+type DistributiveOmit<T, K extends keyof any> = T extends any
+  ? Omit<T, K>
+  : never;
+
 type Merge<A, B> = Omit<A, keyof B> & B;
 type DistributiveMerge<A, B> = DistributiveOmit<A, keyof B> & B;
-type OnlyAs<T extends React.ElementType> = T | (() => React.ReactElement<never>);
-type AsProps<Component extends React.ElementType, PermanentProps extends object, ComponentProps extends object> = DistributiveMerge<ComponentProps, PermanentProps & {
-    as?: Component;
-}>;
+
+type OnlyAs<T extends React.ElementType> =
+  | T
+  // makes sure `ComponentProps<T>` are unknown
+  | (() => React.ReactElement<never>);
+
+type AsProps<
+  Component extends React.ElementType,
+  PermanentProps extends object,
+  ComponentProps extends object,
+> = DistributiveMerge<ComponentProps, PermanentProps & { as?: Component }>;
+
 /**
@@ -18,11 +33,43 @@ * make typescript not check PropsWithRef<P> individually.
  */
-type FastComponentPropsWithRef<T extends React.ElementType> = React.PropsWithRef<T extends new (_props: infer P) => React.Component<any, any> ? React.PropsWithoutRef<P> & React.RefAttributes<InstanceType<T>> : React.ComponentProps<T>>;
-type PolymorphicWithRef<Default extends OnlyAs, Props extends object = {}, OnlyAs extends React.ElementType = React.ElementType> = <T extends OnlyAs = Default>(props: AsProps<T, Props, FastComponentPropsWithRef<T>>) => React.ReactElement | null;
-type PolyForwardComponent<Default extends OnlyAs, Props extends object = {}, OnlyAs extends React.ElementType = React.ElementType> = Merge<React.ForwardRefExoticComponent<Merge<FastComponentPropsWithRef<Default>, Props & {
-    as?: Default;
-}>>, PolymorphicWithRef<Default, Props, OnlyAs>>;
-type PolyRefFunction = <Default extends OnlyAs, Props extends object = {}, OnlyAs extends React.ElementType = React.ElementType>(Component: React.ForwardRefRenderFunction<any, Props & {
-    as?: OnlyAs;
-}>) => PolyForwardComponent<Default, Props, OnlyAs>;
+type FastComponentPropsWithRef<T extends React.ElementType> =
+  React.PropsWithRef<
+    T extends new (
+      _props: infer P,
+    ) => React.Component<any, any>
+      ? React.PropsWithoutRef<P> & React.RefAttributes<InstanceType<T>>
+      : React.ComponentProps<T>
+  >;
 
+type PolymorphicWithRef<
+  Default extends OnlyAs,
+  Props extends object = {},
+  OnlyAs extends React.ElementType = React.ElementType,
+> = <T extends OnlyAs = Default>(
+  props: AsProps<T, Props, FastComponentPropsWithRef<T>>,
+) => React.ReactElement | null;
+
+type PolyForwardComponent<
+  Default extends OnlyAs,
+  Props extends object = {},
+  OnlyAs extends React.ElementType = React.ElementType,
+> = Merge<
+  React.ForwardRefExoticComponent<
+    Merge<FastComponentPropsWithRef<Default>, Props & { as?: Default }>
+  >,
+  PolymorphicWithRef<Default, Props, OnlyAs>
+>;
+
+// ----------------------------------------------
+// function types
+// - got the idea from chakra-ui, cast at your own risk.
+// ----------------------------------------------
+
+type PolyRefFunction = <
+  Default extends OnlyAs,
+  Props extends object = {},
+  OnlyAs extends React.ElementType = React.ElementType,
+>(
+  Component: React.ForwardRefRenderFunction<any, Props & { as?: OnlyAs }>,
+) => PolyForwardComponent<Default, Props, OnlyAs>;
+
 declare const buttonStyle: _onbeam_styled_system_types.SlotRecipeRuntimeFn<"root" | "iconLeft" | "iconRight" | "led", {
@@ -32,3 +79,3 @@ variant: {
             root: {
-                bg: "button.pill.background.primary";
+                bg: "linear-gradient(178deg, rgba(255, 255, 255, 0.11) 1.34%, rgba(255, 255, 255, 0.25) 5.7%, rgba(255, 255, 255, 0.00) 45.31%, rgba(255, 255, 255, 0.00) 77.57%), #242424";
                 _hover: {
@@ -40,3 +87,3 @@ '&:not(:disabled)': {
                 _disabled: {
-                    color: "button.disabledText";
+                    color: "#393939";
                 };
@@ -47,3 +94,3 @@ };
             root: {
-                bg: "button.pill.background.secondary";
+                bg: "linear-gradient(178deg, rgba(255, 255, 255, 0.11) 1.34%, rgba(255, 255, 255, 0.25) 5.7%, rgba(255, 255, 255, 0.00) 45.31%, rgba(255, 255, 255, 0.00) 77.57%), #131313";
                 _disabled: {
@@ -171,6 +218,33 @@ color: "mono.300";
 
-type CardProps = PropsWithChildren;
+declare const cardStyle: _onbeam_styled_system_types.SlotRecipeRuntimeFn<"root" | "edgeShadowHorizontal" | "edgeShadowVerticalLeft" | "edgeShadowVerticalRight", {
+    size: {
+        lg: {
+            root: {
+                p: number;
+                maxW: "550px";
+                boxShadow: "sm";
+            };
+        };
+        md: {
+            root: {
+                p: number;
+                maxW: "310px";
+                boxShadow: "lg";
+            };
+        };
+        sm: {
+            root: {
+                p: number;
+                maxW: "140px";
+                boxShadow: "lg";
+            };
+        };
+    };
+}>;
 
-declare const Card: FC<CardProps>;
+type CardVariants = RecipeVariantProps<typeof cardStyle>;
+type CardProps = BeamComponentProps<PropsWithChildren<CardVariants>>;
 
+declare const Card: PolyForwardComponent<"div", CardProps, react.ElementType<any, keyof react.JSX.IntrinsicElements>>;
+
 type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
@@ -182,2 +256,4 @@
 
-export { Button, Card, Input, beamRef };
+declare const noiseBackgroundStyle: string;
+
+export { Button, Card, Input, beamRef, noiseBackgroundStyle };

dist/index.js

@@ -76,3 +76,3 @@ 'use strict';
         root: {
-          bg: "button.pill.background.primary",
+          bg: "linear-gradient(178deg, rgba(255, 255, 255, 0.11) 1.34%, rgba(255, 255, 255, 0.25) 5.7%, rgba(255, 255, 255, 0.00) 45.31%, rgba(255, 255, 255, 0.00) 77.57%), #242424",
           _hover: {
@@ -84,3 +84,3 @@ "&:not(:disabled)": {
           _disabled: {
-            color: "button.disabledText"
+            color: "#393939"
           }
@@ -91,3 +91,3 @@ }
         root: {
-          bg: "button.pill.background.secondary",
+          bg: "linear-gradient(178deg, rgba(255, 255, 255, 0.11) 1.34%, rgba(255, 255, 255, 0.25) 5.7%, rgba(255, 255, 255, 0.00) 45.31%, rgba(255, 255, 255, 0.00) 77.57%), #131313",
           _disabled: {
@@ -250,13 +250,118 @@ color: "mono.300"
 Button.displayName = "Button";
-var Card = ({ children }) => /* @__PURE__ */ jsxRuntime.jsx(
-  "div",
-  {
-    className: css.css({
-      bg: "mono.200",
-      rounded: "2xl",
-      p: "lg"
+var edgeShadow = {
+  position: "absolute",
+  // TODO: Design states 0.2, but 0.5 looks closer to the actual end result
+  // opacity: 0.2,
+  opacity: 0.5,
+  filter: "blur(5px)",
+  bg: "linear-gradient(110deg, #D9D9D9 -219.47%, rgba(217, 217, 217, 0.00) 238.09%)",
+  borderRadius: "20px"
+};
+var edgeShadowVertical = __spreadProps(__spreadValues({}, edgeShadow), {
+  h: "calc(100% - var(--spacing-6))",
+  w: 2,
+  top: 6
+});
+var cardStyle = css.sva({
+  slots: [
+    "root",
+    "edgeShadowHorizontal",
+    "edgeShadowVerticalLeft",
+    "edgeShadowVerticalRight"
+  ],
+  base: {
+    root: {
+      position: "relative",
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      justifyContent: "center",
+      flexWrap: "wrap",
+      overflow: "hidden",
+      bg: "#222222",
+      border: "1px solid",
+      borderColor: "#272727",
+      borderRadius: "xl",
+      color: "mono.100",
+      w: "100%"
+    },
+    edgeShadowHorizontal: __spreadProps(__spreadValues({}, edgeShadow), {
+      h: 2,
+      w: "calc(100% - var(--spacing-12))",
+      top: 2,
+      left: 6
     }),
-    children
+    edgeShadowVerticalLeft: __spreadProps(__spreadValues(__spreadValues({}, edgeShadow), edgeShadowVertical), {
+      left: 2
+    }),
+    edgeShadowVerticalRight: __spreadProps(__spreadValues(__spreadValues({}, edgeShadow), edgeShadowVertical), {
+      right: 2
+    })
+  },
+  variants: {
+    size: {
+      lg: {
+        root: {
+          p: 10,
+          maxW: "550px",
+          boxShadow: "sm"
+        }
+      },
+      md: {
+        root: {
+          p: 6,
+          maxW: "310px",
+          boxShadow: "lg"
+        }
+      },
+      sm: {
+        root: {
+          p: 6,
+          maxW: "140px",
+          boxShadow: "lg"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md"
   }
+});
+var noiseBackgroundStyle = css.css({
+  zIndex: 0,
+  _before: {
+    position: "absolute",
+    zIndex: -1,
+    content: '""',
+    top: 0,
+    left: 0,
+    width: "100%",
+    height: "100%",
+    opacity: 0.01,
+    background: "repeating-radial-gradient(#000 0 0.0001%,#fff 0 0.0002%) 60% 60%/3000px 3000px, repeating-conic-gradient(#000 0 0.0001%,#fff 0 0.0002%) 40% 40%/3000px 3000px",
+    backgroundBlendMode: "difference",
+    pointerEvents: "none"
+  }
+});
+var Card = beamRef(
+  (_a, ref) => {
+    var _b = _a, { as: As = "div", children, size, className } = _b, props = __objRest(_b, ["as", "children", "size", "className"]);
+    const classes = cardStyle({ size });
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      As,
+      __spreadProps(__spreadValues({
+        ref,
+        className: css.cx(noiseBackgroundStyle, classes.root, className)
+      }, props), {
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": true, className: classes.edgeShadowHorizontal }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": true, className: classes.edgeShadowVerticalLeft }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": true, className: classes.edgeShadowVerticalRight }),
+          children
+        ]
+      })
+    );
+  }
 );
+Card.displayName = "Card";
 var Input = (props) => /* @__PURE__ */ jsxRuntime.jsx("input", __spreadValues({}, props));
@@ -268,3 +373,4 @@
 exports.beamRef = beamRef;
+exports.noiseBackgroundStyle = noiseBackgroundStyle;
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@onbeam/ui",
-  "version": "1.0.0-1",
+  "version": "1.0.0-2",
   "sideEffects": false,
@@ -9,17 +9,13 @@ "license": "MIT",
   "types": "./dist/index.d.ts",
-  "files": ["dist"],
-  "scripts": {
-    "build": "tsup src/index.ts --format esm,cjs --dts --external react",
-    "postbuild": "cp -rv fonts dist/fonts",
-    "dev": "tsup src/index.ts --format esm,cjs --watch --dts --external react",
-    "generate": "pnpm generate:barrels",
-    "generate:barrels": "barrelsby -c ./barrelsby.json --delete",
-    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist"
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
   },
   "dependencies": {
-    "@onbeam/icons": "workspace:*",
-    "@onbeam/styled-system": "workspace:*"
+    "@onbeam/icons": "1.0.0-2",
+    "@onbeam/styled-system": "1.0.0-2"
   },
   "devDependencies": {
-    "@onbeam/typescript-config": "workspace:*",
     "@types/react": "^18.2.61",
@@ -30,7 +26,13 @@ "@types/react-dom": "^18.2.19",
     "tsup": "^8.0.2",
-    "typescript": "^5.3.3"
+    "typescript": "^5.3.3",
+    "@onbeam/typescript-config": "0.0.0"
   },
-  "publishConfig": {
-    "access": "public"
+  "scripts": {
+    "build": "tsup src/index.ts --format esm,cjs --dts --external react",
+    "postbuild": "cp -rv fonts dist/fonts",
+    "dev": "tsup src/index.ts --format esm,cjs --watch --dts --external react",
+    "generate": "pnpm generate:barrels",
+    "generate:barrels": "barrelsby -c ./barrelsby.json --delete",
+    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist"
   }
-}
+}

No alert changes

Improved metrics

Total package byte prevSize

1923027

increased by1.04%

Lines of code

958

increased by40.47%

Dependency changes

• + Added@onbeam/icons@1.0.0-2(transitive)

• + Added@onbeam/styled-system@1.0.0-2(transitive)

• + Addedjs-tokens@4.0.0(transitive)

• + Addedloose-envify@1.4.0(transitive)

• + Addedreact@18.3.1(transitive)

• Updated@onbeam/icons@1.0.0-2

• Updated@onbeam/styled-system@1.0.0-2