@rothko-ui/react 1.0.1

package/README.md

@@ -0,0 +1,119 @@
+<img src="../../assets/logo.png" alt="rothko-ui"/>
+
+# rothko-ui
+
+Welcome to rothko-ui, an expressive react component library designed with flexibility in mind.
+
+### Key Packages
+
+- `@rothko-ui/react` The main package containing all components.
+
+- `@rothko-ui/system` Shared components, helper functions, and React hooks.
+
+- `@rothko-ui/icons` A set of customizable SVG icons.
+
+- `@rothko-ui/tokens` A style system to generates CSS variables for theming.
+
+## Using rothko-ui
+
+### Installation
+
+##### tailwindcss 🌀
+
+Rothko-ui is built off of tailwindcss v4.x. To use rothko-ui, first follow the installation guide in the [official docs](https://tailwindcss.com/docs/installation/using-vite).
+
+##### rothko-ui 🖌️
+
+Once you've gotten tailwind set-up, you can now install the rothko packages:
+
+```bash
+yarn add @rothko-ui/react @rothko-ui/icons @rothko-ui/tokens
+```
+
+### Registering sources
+
+Wherever you've added `@import "tailwindcss";`
+In you `globals.css` file, you'll need to register the rothko source files. You can do so using the `@source` directive.
+
+```css
+@import 'tailwindcss';
+@source '../../node_modules/@rothko-ui';
+```
+
+**Note**: Depending on the structure of your project, `node_modules` may be located in a different location.
+
+For more information on registering source files see the tailwindcss [docs](https://tailwindcss.com/docs/detecting-classes-in-source-files#explicitly-registering-sources).
+
+### Adding theme tokens
+
+You'll then need to add the theme tokens you installed in first step.
+
+```css
+@import 'tailwindcss';
+@source "../../node_modules/@rothko-ui";
+@import '@rothko-ui/tokens/style.css';
+```
+
+## Basic Component Usage
+
+After setting up you `global.css` file, you can now import and use the components:
+
+```jsx
+import { Button } from '@rothko-ui/react';
+
+function MyComponent() {
+  return <Button>Click Me</Button>;
+}
+```
+
+### Using Icons
+
+The `@rothko-ui/icons` package provides a range of useful SVG icons:
+
+```jsx
+import { HeartIcon } from '@rothko-ui/icons';
+
+function MyComponent() {
+  return <HeartIcon />;
+}
+```
+
+## Next.js / SSR
+
+In Next.js with Server-Side Rendering (SSR), components that utilize React Context from rothko-ui require the 'use client' directive. This is because React Context relies on client-side rendering, and it is not supported in SSR.
+
+To ensure that components that depend on React Context from rothko-ui function correctly, you must add the 'use client' directive at the top of the component file. Here’s an example:
+
+```jsx
+'use client';
+
+import { Accordion, AccordionPanel } from '@rothko-ui/react';
+import MyComponent from './MyComponent';
+
+export default function App() {
+  return (
+    <Accordion>
+      <AccordionPanel label="My Label 1">
+        Content 1
+      </AddordionPanel>
+      <AccordionPanel label="My Label 2">
+        Content 2
+      </AddordionPanel>
+    </Accordion>
+  );
+}
+```
+
+This directive tells Next.js that the component (and its children) should be rendered on the client side, enabling React Context to work as expected.
+
+For more information, visit the official next.js [docs](https://nextjs.org/docs/messages/context-in-server-component).
+
+## Author
+
+@luxo-ai <luxo.ai@proton.me>
+
+Support the project: `0x7A67fF6354d983B6cfc3a7f7C5BA93f73C864b32`
+
+## License
+
+MIT

package/dist/index.d.ts

@@ -0,0 +1,23 @@
+export * from '@rothko-ui/accordion';
+export * from '@rothko-ui/alert';
+export * from '@rothko-ui/autocomplete';
+export * from '@rothko-ui/breadcrumbs';
+export * from '@rothko-ui/button';
+export * from '@rothko-ui/checkbox';
+export * from '@rothko-ui/drawer';
+export * from '@rothko-ui/input';
+export * from '@rothko-ui/link';
+export * from '@rothko-ui/menu';
+export * from '@rothko-ui/modal';
+export * from '@rothko-ui/popup';
+export * from '@rothko-ui/radio';
+export * from '@rothko-ui/select';
+export * from '@rothko-ui/skeleton';
+export * from '@rothko-ui/slider';
+export * from '@rothko-ui/switch';
+export * from '@rothko-ui/tabs';
+export * from '@rothko-ui/tag';
+export * from '@rothko-ui/toaster';
+export * from '@rothko-ui/typography';
+export { classes, Flex, Container, FlexItem, Grid } from '@rothko-ui/system';
+export type { RothkoKind, Option, NestedOption, RothkoSize, Accessory } from '@rothko-ui/system';

package/dist/index.mjs

@@ -0,0 +1 @@
+export*from"@rothko-ui/accordion";export*from"@rothko-ui/alert";export*from"@rothko-ui/autocomplete";export*from"@rothko-ui/breadcrumbs";export*from"@rothko-ui/button";export*from"@rothko-ui/checkbox";export*from"@rothko-ui/drawer";export*from"@rothko-ui/input";import e from"react";export*from"@rothko-ui/menu";export*from"@rothko-ui/modal";export*from"@rothko-ui/popup";export*from"@rothko-ui/radio";export*from"@rothko-ui/select";export*from"@rothko-ui/skeleton";export*from"@rothko-ui/slider";export*from"@rothko-ui/switch";export*from"@rothko-ui/tabs";export*from"@rothko-ui/tag";export*from"@rothko-ui/toaster";export*from"@rothko-ui/typography";export{Container,Flex,FlexItem,Grid,classes}from"@rothko-ui/system";function o(){return o=Object.assign?Object.assign.bind():function(e){for(var o=1;o<arguments.length;o++){var r=arguments[o];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},o.apply(this,arguments)}function r(e,o){if(null==e)return{};var r,n,t={},d=Object.keys(e);for(n=0;n<d.length;n++)o.indexOf(r=d[n])>=0||(t[r]=e[r]);return t}const n=["displayFlex","type","children","className","disabled"],t=["children","error","disabled","open","className"],d=["as","size","underlineVariant","className","children"],a=["disabled","size","underlineVariant","className","children"],i=(...e)=>{const o=[];for(const r of e)"string"==typeof r&&""!==r?o.push(r):"object"==typeof r&&null!==r&&o.push(...Object.keys(r).filter(e=>Boolean(r[e])));return o},l=(...e)=>i(...e).join(" ");function s(e,o){void 0===o&&(o={});var r=o.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],t=document.createElement("style");t.type="text/css","top"===r&&n.firstChild?n.insertBefore(t,n.firstChild):n.appendChild(t),t.styleSheet?t.styleSheet.cssText=e:t.appendChild(document.createTextNode(e))}}const p=t=>{let{displayFlex:d,type:a="button",children:i,className:s,disabled:p}=t,u=r(t,n);const c=l("ios-tap-highlight-color-transparent","touch-action-manipulation","bg-transparent","border-none","outline-none","p-0",!p&&"cursor-pointer","appearance-none",p&&"cursor-not-allowed",p&&"pointer-events-none",p&&"opacity-60",d&&"flex",s);/*#__PURE__*/return e.createElement("button",o({},u,{type:a,className:c}),i)};var u;!function(e){e.Clear="Clear",e.Open="Open",e.Close="Close"}(u||(u={})),s(".Spinner-module_inline-spinner__6UhDf{animation:Spinner-module_load__z3Vo- 1.1s linear infinite;border-bottom-color:var(--rothko-foreground,#000);border-left-color:transparent;border-radius:50%;border-right-color:var(--rothko-foreground,#000);border-style:solid;border-top-color:var(--rothko-foreground,#000);display:inline-block;text-indent:-9999em;transform:translateZ(0)}.Spinner-module_inline-spinner--s__IM51C,.Spinner-module_inline-spinner--xs__O4HXs{border-width:.125rem;height:.875rem;width:.875rem}.Spinner-module_inline-spinner--m__5Rn60{border-width:.5rem;height:2.25rem;width:2.25rem}.Spinner-module_inline-spinner--l__BT3a6{border-width:1rem;height:5rem;width:5rem}@keyframes Spinner-module_load__z3Vo-{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}"),s(".ShadedBackdrop-module_shaded-backdrop__AA5Gf{backface-visibility:hidden;display:flex;opacity:0;position:fixed;-webkit-user-select:none;-moz-user-select:none;user-select:none}.ShadedBackdrop-module_shaded-backdrop__AA5Gf.ShadedBackdrop-module_show__jd1yU{background-color:rgba(0,0,0,.5);inset:0;opacity:1;transition:opacity 80ms ease-in-out;z-index:999999}.ShadedBackdrop-module_shaded-backdrop__AA5Gf.ShadedBackdrop-module_show__jd1yU.ShadedBackdrop-module_blur__Pmys8{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.ShadedBackdrop-module_shaded-backdrop__AA5Gf.ShadedBackdrop-module_show__jd1yU.ShadedBackdrop-module_padding-h__Xx20-{padding-left:1rem;padding-right:1rem}.ShadedBackdrop-module_shaded-backdrop__AA5Gf.ShadedBackdrop-module_show__jd1yU.ShadedBackdrop-module_padding-v__Xmd-B{padding-bottom:1rem;padding-top:1rem}"),s(".DropdownContainer-module_dropdown-container__PmRYH{-webkit-tap-highlight-color:transparent;align-items:center;background-color:var(--rothko-input-background,#fff);border:none;border-radius:var(--rothko-input-border-radius,.125rem);color:var(--rothko-typography-body-color,#000);color:var(--rothko-input-foreground,#000);cursor:default;display:flex;font-size:var(--rothko-font-size-body,1rem);justify-content:space-between;line-height:var(--rothko-line-height-body,1.5rem);min-height:calc(2.75rem + 4px);outline:none;padding:.5rem 1rem;position:relative}.DropdownContainer-module_dropdown-container__PmRYH.DropdownContainer-module_error__pB9na:not(:focus){outline:1px solid var(--rothko-danger)/2}.DropdownContainer-module_dropdown-container__PmRYH:not(.DropdownContainer-module_open__E2P8l){cursor:pointer}.DropdownContainer-module_dropdown-container__PmRYH.DropdownContainer-module_disabled__Y2Pdj{cursor:not-allowed;opacity:.6}");const c=(m={"dropdown-container":"DropdownContainer-module_dropdown-container__PmRYH",error:"DropdownContainer-module_error__pB9na",open:"DropdownContainer-module_open__E2P8l",disabled:"DropdownContainer-module_disabled__Y2Pdj"},(...e)=>i(...e).map(e=>m[e]).join(" "));var m;/*#__PURE__*/e.forwardRef((n,d)=>{let{children:a,error:i,disabled:s,open:p,className:u}=n,m=r(n,t);const h=c("dropdown-container",i&&"error",p&&"open",s&&"disabled");/*#__PURE__*/return e.createElement("div",o({},m,{ref:d,className:l(h,u)}),a)}).displayName="DropdownContainer",s(".RenderOption-module_default-render-option__nKHJ4{color:var(--rothko-typography-body-color,#000);font-size:var(--rothko-font-size-body-small,.875rem);line-height:var(--rothko-line-height-body-small,1.25rem);margin:0;-webkit-user-select:none;-moz-user-select:none;user-select:none}");const h=({size:e="m",disabled:o,underlineVariant:r="always"})=>n=>l("rothko-font-regular","text-(--rothko-typography-link-color)","p-0","xs"===e&&"rothko-paragraph-size-xs","s"===e&&"rothko-paragraph-size-s","m"===e&&"rothko-paragraph-size-m","l"===e&&"rothko-paragraph-size-l","none"===r&&"no-underline hover:no-underline focus:no-underline active:no-underline visited:no-underline","always"===r&&"underline hover:underline focus:underline active:underline visited:underline","hover"===r&&!o&&"underline-hover",n),_=e.forwardRef((n,t)=>{let{as:a="a",size:i,underlineVariant:l,className:s,children:p}=n,u=r(n,d);const c=h({underlineVariant:l,size:i})(s);return e.createElement(a,o({},u,{ref:t,className:c}),p)});_.displayName="Link";const f=e.forwardRef((n,t)=>{let{disabled:d,size:i,underlineVariant:l,className:s,children:u}=n,c=r(n,a);const m=h({underlineVariant:l,size:i,disabled:d})(s);return e.createElement(p,o({},c,{disabled:d,ref:t,className:m}),u)});f.displayName="LinkButton";export{_ as Link,f as LinkButton};

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "@rothko-ui/react",
+  "version": "1.0.1",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/luxo-ai/rothko-ui.git",
+    "directory": "packages/react"
+  },
+  "homepage": "https://rothko-ui.com",
+  "publishConfig": {
+    "access": "public"
+  },
+  "private": false,
+  "license": "MIT",
+  "author": "Luis Serazo <luxo.ai@proton.me>",
+  "description": "React Components for Rothko UI",
+  "type": "module",
+  "types": "dist/index.d.ts",
+  "module": "dist/index.mjs",
+  "source": "index.ts",
+  "scripts": {
+    "build:dev": "microbundle watch --no-compress --format modern",
+    "build": "microbundle --format modern --no-sourcemap",
+    "prebuild": "rimraf dist",
+    "postbuild": "mv dist/react.modern.js dist/index.mjs",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@rothko-ui/accordion": "^1.0.1",
+    "@rothko-ui/alert": "^1.0.1",
+    "@rothko-ui/autocomplete": "^1.0.1",
+    "@rothko-ui/breadcrumbs": "^1.0.1",
+    "@rothko-ui/button": "^1.0.1",
+    "@rothko-ui/checkbox": "^1.0.1",
+    "@rothko-ui/drawer": "^1.0.1",
+    "@rothko-ui/input": "^1.0.1",
+    "@rothko-ui/menu": "^1.0.1",
+    "@rothko-ui/modal": "^1.0.1",
+    "@rothko-ui/popup": "^1.0.1",
+    "@rothko-ui/radio": "^1.0.1",
+    "@rothko-ui/select": "^1.0.1",
+    "@rothko-ui/skeleton": "^1.0.1",
+    "@rothko-ui/slider": "^1.0.1",
+    "@rothko-ui/switch": "^1.0.1",
+    "@rothko-ui/system": "^1.0.1",
+    "@rothko-ui/tabs": "^1.0.1",
+    "@rothko-ui/tag": "^1.0.1",
+    "@rothko-ui/toaster": "^1.0.1",
+    "@rothko-ui/typography": "^1.0.1"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.2.0"
+  },
+  "files": [
+    "dist",
+    "LICENSE",
+    "README.md"
+  ],
+  "devDependencies": {
+    "microbundle": "^0.15.1",
+    "rimraf": "^6.0.1",
+    "typescript": "^5.7.3"
+  }
+}