@blockle/blocks 0.1.0 → 0.2.1

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2019 Niek Saarberg
+Copyright (c) 2023 Blockle
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -1,27 +1,58 @@
 # @blockle/blocks
 
-## Get started
+Blocks design system
 
-Install with yarn
+## Installation
 
 ```bash
-yarn add @blockle/blocks
+npm install @blockle/blocks
 ```
 
-Install with npm
+## Setup
 
-```bash
-npm install --save @blockle/blocks
-```
+```jsx
+import React from 'react';
+
+import '@blockle/blocks/reset.css';
+import { ThemeProvider } from '@blockle/blocks';
+import { theme } from '@blockle/blocks/themes/momotaro';
 
-### Basic example
+// const Link = makeLinkComponent(...)
 
-```tsx
-import '@blockle/blocks/dist/blocks.css';
+const App = () => (
+  <ThemeProvider theme={theme} spritePath="/public/" linkComponent={Link}>
+    ...
+  </ThemeProvider>
+);
 ```
 
-```tsx
+## Usage
+
+```jsx
+import React from 'react';
 import { Button } from '@blockle/blocks';
 
-const MyComponent = () => <Button>Hi</Button>;
+const App = () => <Button>Click me</Button>;
+```
+
+## Theming
+
+yourTheme.css.ts
+
+```jsx
+import { makeTokens, makeComponentTheme, makeTheme } from "@blockle/blocks";
+
+const tokens = makeTokens({ ... });
+
+const button = makeComponentTheme({
+  type: 'button',
+  ...
+});
+
+const theme = makeTheme({
+  tokens,
+  components: {
+    button
+  }
+});
 ```

package/dist/index.cjs

@@ -0,0 +1,119 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const styles_lib_css_atoms_sprinkles_css_cjs = require("./styles/lib/css/atoms/sprinkles.css.cjs");
+const react = require("react");
+const styles_lib_css_theme_vars_css_cjs = require("./styles/lib/css/theme/vars.css.cjs");
+const classnames = (...args) => {
+  const className = args.filter((arg) => arg && typeof arg === "string").join(" ");
+  return className || void 0;
+};
+const BlocksProvider = ({ children, theme }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classnames(theme.vars, styles_lib_css_atoms_sprinkles_css_cjs.atoms({ fontFamily: "standard" })), children });
+};
+const defaultElement = "div";
+const Box = react.forwardRef(function Box2({ className, as, ...restProps }, ref) {
+  const Component = as || defaultElement;
+  const atomProps = {};
+  const otherProps = {};
+  for (const [name, value] of Object.entries(restProps)) {
+    if (styles_lib_css_atoms_sprinkles_css_cjs.atoms.properties.has(name)) {
+      atomProps[name] = value;
+    } else {
+      otherProps[name] = value;
+    }
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(Component, { ref, className: classnames(className, styles_lib_css_atoms_sprinkles_css_cjs.atoms(atomProps)), ...otherProps });
+});
+const justifyContentMap = {
+  left: "flex-start",
+  right: "flex-end",
+  center: "center",
+  between: "space-between",
+  around: "space-around"
+};
+const alignItemsMap = {
+  left: "flex-start",
+  right: "flex-end",
+  center: "center",
+  stretch: "stretch"
+};
+const Inline = ({
+  alignX,
+  alignY,
+  as = "div",
+  children,
+  display = "flex",
+  gap,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Box,
+    {
+      as,
+      display,
+      gap,
+      flexDirection: "row",
+      justifyContent: alignX ? justifyContentMap[alignX] : void 0,
+      alignItems: alignY ? alignItemsMap[alignY] : void 0,
+      flexWrap: "wrap",
+      ...props,
+      children
+    }
+  );
+};
+const Stack = ({
+  as = "div",
+  display = "flex",
+  children,
+  gap,
+  alignX,
+  ...restProps
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Box,
+    {
+      as,
+      display,
+      gap,
+      flexDirection: "column",
+      alignItems: alignX ? alignItemsMap[alignX] : void 0,
+      ...restProps,
+      children
+    }
+  );
+};
+const Text = ({
+  as = "span",
+  children,
+  color,
+  fontSize,
+  fontWeight,
+  fontFamily,
+  textAlign,
+  ...restProps
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Box,
+    {
+      as,
+      color,
+      fontSize,
+      fontWeight,
+      fontFamily,
+      textAlign,
+      padding: "none",
+      margin: "none",
+      ...restProps,
+      children
+    }
+  );
+};
+exports.atoms = styles_lib_css_atoms_sprinkles_css_cjs.atoms;
+exports.vars = styles_lib_css_theme_vars_css_cjs.vars;
+exports.BlocksProvider = BlocksProvider;
+exports.Box = Box;
+exports.Inline = Inline;
+exports.Stack = Stack;
+exports.Text = Text;
+exports.classnames = classnames;

package/dist/index.d.ts

@@ -1,28 +1 @@
-export * from './Badge';
-export * from './Box';
-export * from './Button';
-export * from './Card';
-export * from './cx';
-export * from './Dialog';
-export * from './Divider';
-export * from './Drawer';
-export * from './Dropdown';
-export * from './FlatButton';
-export * from './Grid';
-export * from './Icon';
-export * from './IconButton';
-export * from './Inline';
-export * from './Link';
-export * from './Loader';
-export * from './OutlineButton';
-export * from './Panel';
-export * from './Paper';
-export * from './RippleBox';
-export * from './Stack';
-export * from './Tag';
-export * from './Text';
-export * from './TextField';
-export * from './useAnimationState';
-export * from './useFlip';
-export * from './useLayer';
-export * from './useStyles';
+export { BlocksProvider, BlocksProviderProps, Box, BoxProps, Inline, InlineProps, Stack, StackProps, Text, TextProps, atoms, classnames, vars } from './reset.css.js';

package/dist/index.mjs

@@ -0,0 +1,119 @@
+import { jsx } from "react/jsx-runtime";
+import { atoms } from "./styles/lib/css/atoms/sprinkles.css.mjs";
+import { forwardRef } from "react";
+import { vars } from "./styles/lib/css/theme/vars.css.mjs";
+const classnames = (...args) => {
+  const className = args.filter((arg) => arg && typeof arg === "string").join(" ");
+  return className || void 0;
+};
+const BlocksProvider = ({ children, theme }) => {
+  return /* @__PURE__ */ jsx("div", { className: classnames(theme.vars, atoms({ fontFamily: "standard" })), children });
+};
+const defaultElement = "div";
+const Box = forwardRef(function Box2({ className, as, ...restProps }, ref) {
+  const Component = as || defaultElement;
+  const atomProps = {};
+  const otherProps = {};
+  for (const [name, value] of Object.entries(restProps)) {
+    if (atoms.properties.has(name)) {
+      atomProps[name] = value;
+    } else {
+      otherProps[name] = value;
+    }
+  }
+  return /* @__PURE__ */ jsx(Component, { ref, className: classnames(className, atoms(atomProps)), ...otherProps });
+});
+const justifyContentMap = {
+  left: "flex-start",
+  right: "flex-end",
+  center: "center",
+  between: "space-between",
+  around: "space-around"
+};
+const alignItemsMap = {
+  left: "flex-start",
+  right: "flex-end",
+  center: "center",
+  stretch: "stretch"
+};
+const Inline = ({
+  alignX,
+  alignY,
+  as = "div",
+  children,
+  display = "flex",
+  gap,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      as,
+      display,
+      gap,
+      flexDirection: "row",
+      justifyContent: alignX ? justifyContentMap[alignX] : void 0,
+      alignItems: alignY ? alignItemsMap[alignY] : void 0,
+      flexWrap: "wrap",
+      ...props,
+      children
+    }
+  );
+};
+const Stack = ({
+  as = "div",
+  display = "flex",
+  children,
+  gap,
+  alignX,
+  ...restProps
+}) => {
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      as,
+      display,
+      gap,
+      flexDirection: "column",
+      alignItems: alignX ? alignItemsMap[alignX] : void 0,
+      ...restProps,
+      children
+    }
+  );
+};
+const Text = ({
+  as = "span",
+  children,
+  color,
+  fontSize,
+  fontWeight,
+  fontFamily,
+  textAlign,
+  ...restProps
+}) => {
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      as,
+      color,
+      fontSize,
+      fontWeight,
+      fontFamily,
+      textAlign,
+      padding: "none",
+      margin: "none",
+      ...restProps,
+      children
+    }
+  );
+};
+export {
+  BlocksProvider,
+  Box,
+  Inline,
+  Stack,
+  Text,
+  atoms,
+  classnames,
+  vars
+};

package/dist/reset.css.cjs

@@ -0,0 +1,5 @@
+"use strict";
+const fileScope = require("@vanilla-extract/css/fileScope");
+require("./styles/lib/css/reset/reset.css.cjs");
+fileScope.setFileScope("src/entries/reset.css.ts", "blocks");
+fileScope.endFileScope();