@bitrise/bitkit-v2 0.1.0

package/README.md

@@ -0,0 +1,66 @@
+# @bitrise/bitkit-v2
+
+[![npm version](https://badge.fury.io/js/%40bitrise%2Fbitkit-v2.svg)](https://www.npmjs.com/package/@bitrise/bitkit-v2)
+
+Bitrise Design System Components built with Chakra UI v3.
+
+## Features
+
+- 🎨 **Custom Design System**: Complete Bitrise brand implementation
+- 🔧 **Built with Chakra UI v3**: Latest Chakra UI features and performance
+- 📱 **Responsive**: Mobile-first responsive design
+- 🎯 **TypeScript**: Full TypeScript support with auto-generated types
+- 🎨 **Custom Fonts**: Self-hosted Figtree and Source Code Pro fonts
+- 🧩 **Zero External Dependencies**: Everything bundled (except React)
+- ⚡ **Simple Installation**: Just `npm install @bitrise/bitkit-v2`
+
+## Installation
+
+```bash
+npm install @bitrise/bitkit-v2
+```
+
+That's it! All Chakra UI, Emotion, and Framer Motion dependencies are bundled within the library.
+
+### Requirements
+
+- React 16.8+ (peer dependency)
+- React DOM 16.8+ (peer dependency)
+
+## Quick Start
+
+```tsx
+import { BitkitProvider, Button } from '@bitrise/bitkit-v2';
+
+function App() {
+  return (
+    <BitkitProvider>
+      <Button variant="primary">Hello Bitrise!</Button>
+    </BitkitProvider>
+  );
+}
+```
+
+## Development
+
+```bash
+# Install dependencies
+npm install
+
+# Start Storybook
+npm run storybook
+
+# Build the library
+npm run build
+
+# Generate theme types
+npm run theme:generate-types
+```
+
+## License
+
+MIT
+
+## Contributing
+
+Please see our [contributing guidelines](CONTRIBUTING.md).

package/dist/atoms/Button/Button.d.ts

@@ -0,0 +1,4 @@
+import { ButtonProps as ChakraButtonProps } from '@chakra-ui/react';
+export type ButtonProps = ChakraButtonProps;
+export declare const Button: (props: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+export default Button;

package/dist/atoms/Button/Button.recepie.d.ts

@@ -0,0 +1,167 @@
+declare const _default: import('@chakra-ui/react').RecipeDefinition<{
+    variant: {
+        primary: {
+            bg: "button.primary.bg";
+            color: "button.primary.fg";
+            _hover: {
+                bg: "button.primary.bgHover";
+                color: "button.primary.fgHover";
+                _disabled: {
+                    bg: "button.primary.bgDisabled";
+                    color: "button.primary.fgDisabled";
+                };
+            };
+            _active: {
+                bg: "button.primary.bgActive";
+                color: "button.primary.fgActive";
+            };
+            _disabled: {
+                bg: "button.primary.bgDisabled";
+                color: "button.primary.fgDisabled";
+            };
+        };
+        secondary: {
+            bg: "button.secondary.bg";
+            color: "button.secondary.fg";
+            border: "1px solid";
+            borderColor: "border.strong";
+            borderWidth: "1px";
+            borderStyle: "solid";
+            _hover: {
+                bg: "button.secondary.bgHover";
+                color: "button.secondary.fgHover";
+                borderColor: "border.strong";
+                _disabled: {
+                    bg: "button.secondary.bgDisabled";
+                    color: "button.secondary.fgDisabled";
+                    borderColor: "border.strong";
+                };
+            };
+            _active: {
+                bg: "button.secondary.bgActive";
+                color: "button.secondary.fgActive";
+                borderColor: "border.strong";
+            };
+            _disabled: {
+                bg: "button.secondary.bgDisabled";
+                color: "button.secondary.fgDisabled";
+                borderColor: "border.strong";
+            };
+        };
+        tertiary: {
+            bg: "transparent";
+            color: "button.tertiary.fg";
+            _hover: {
+                bg: "button.tertiary.bgHover";
+                color: "button.tertiary.fgHover";
+                _disabled: {
+                    bg: "transparent";
+                    color: "button.tertiary.fgDisabled";
+                };
+            };
+            _active: {
+                bg: "button.tertiary.bgActive";
+                color: "button.tertiary.fgActive";
+            };
+            _disabled: {
+                bg: "transparent";
+                color: "button.tertiary.fgDisabled";
+            };
+        };
+        'danger-primary': {
+            bg: "button.dangerPrimary.bg";
+            color: "button.dangerPrimary.fg";
+            _hover: {
+                bg: "button.dangerPrimary.bgHover";
+                color: "button.dangerPrimary.fgHover";
+                _disabled: {
+                    bg: "button.dangerPrimary.bgDisabled";
+                    color: "button.dangerPrimary.fgDisabled";
+                };
+            };
+            _active: {
+                bg: "button.dangerPrimary.bgActive";
+                color: "button.dangerPrimary.fgActive";
+            };
+            _disabled: {
+                bg: "button.dangerPrimary.bgDisabled";
+                color: "button.dangerPrimary.fgDisabled";
+            };
+        };
+        'danger-secondary': {
+            bg: "button.dangerSecondary.bg";
+            color: "button.dangerSecondary.fg";
+            border: "1px solid";
+            borderColor: "button.dangerSecondary.border";
+            borderWidth: "1px";
+            borderStyle: "solid";
+            _hover: {
+                bg: "button.dangerSecondary.bgHover";
+                color: "button.dangerSecondary.fgHover";
+                borderColor: "button.dangerSecondary.borderHover";
+                _disabled: {
+                    bg: "button.dangerSecondary.bgDisabled";
+                    color: "button.dangerSecondary.fgDisabled";
+                    borderColor: "button.dangerSecondary.borderDisabled";
+                };
+            };
+            _active: {
+                bg: "button.dangerSecondary.bgActive";
+                color: "button.dangerSecondary.fgActive";
+                borderColor: "button.dangerSecondary.borderActive";
+            };
+            _disabled: {
+                bg: "button.dangerSecondary.bgDisabled";
+                color: "button.dangerSecondary.fgDisabled";
+                borderColor: "button.dangerSecondary.borderDisabled";
+            };
+        };
+        'danger-tertiary': {
+            bg: "transparent";
+            color: "button.dangerTertiary.fg";
+            _hover: {
+                bg: "button.dangerTertiary.bgHover";
+                color: "button.dangerTertiary.fgHover";
+                _disabled: {
+                    bg: "transparent";
+                    color: "button.dangerTertiary.fgDisabled";
+                };
+            };
+            _active: {
+                bg: "button.dangerTertiary.bgActive";
+                color: "button.dangerTertiary.fgActive";
+            };
+            _disabled: {
+                bg: "transparent";
+                color: "button.dangerTertiary.fgDisabled";
+            };
+        };
+    };
+    size: {
+        sm: {
+            fontSize: "sm";
+            height: "32px";
+            minWidth: "32px";
+            paddingX: "3";
+            paddingY: "2";
+            lineHeight: "tight";
+        };
+        md: {
+            fontSize: "sm";
+            height: "40px";
+            minWidth: "40px";
+            paddingX: "4";
+            paddingY: "2.5";
+            lineHeight: "tight";
+        };
+        lg: {
+            fontSize: "md";
+            height: "48px";
+            minWidth: "48px";
+            paddingX: "6";
+            paddingY: "3";
+            lineHeight: "normal";
+        };
+    };
+}>;
+export default _default;

package/dist/atoms/Button/index.d.ts

@@ -0,0 +1,2 @@
+export type { ButtonProps } from './Button';
+export { Button } from './Button';

package/dist/atoms/index.d.ts

@@ -0,0 +1 @@
+export * from './Button';