Styled Components for Dolla

NOTE: This package is super experimental and has many bugs. Exercise caution.

import { type MaybeGetter, unwrap } from "@manyducks.co/dolla";
import { styled } from "@manyducks.co/dolla-styled";

// Create a styled element.
// Interpolated functions are tracked in an effect, so signal changes will update styles.
const MyButton = styled.button`
  border: 2px solid ${(props) => unwrap(props.color) ?? "red"},
  border-radius: 4px;
`;

// The styled function takes styled elements and overrides them
const MySuperButton = styled(MyButton)`
  // override styles for MyButton
`;

// The styled function also takes strings to create HTML elements including custom tags.
const MyCustomElement = styled("my-custom-thing")`
  // styles
`;

function ExampleView() {
  return (
    <MyButton
      color="orange"
      onClick={() => {
        // Do something
      }}
    >
      Click Me
    </MyButton>
  );
}