@wrdagency/blockout 0.1.3 → 0.1.4

package/dist/assets/style.css

@@ -1 +1 @@
-.component-select-control__input{cursor:pointer;display:flex;width:100%}.component-select-control__input:focus{outline:none}.component-select-control__value{flex-grow:1;padding:.75rem;min-height:40px;width:100%;min-width:0;max-width:100%;color:var(--blockout__colours__surface--800);border-top-left-radius:var(--blockout__radius--md);border-bottom-left-radius:var(--blockout__radius--md);font-size:1rem;text-align:left;background-color:transparent;transition:background-color .25s ease}.component-select-control__value--placeholder{color:var(--blockout__colours__surface--400)}.component-select-control__input:disabled .component-select-control__value{background-color:var(--blockout__colours__surface--300);color:var(--blockout__colours__surface--500)}.component-select-control__input:disabled .component-select-control__caret{background-color:var(--blockout__colours__surface--300)}.component-select-control__input:disabled .component-select-control__caret>svg{fill:var(--blockout__colours__surface--500)}.component-select-control .component-base-control__box:focus-within{background-color:var(--blockout__colours__surface--50);border-color:var(--blockout__colours__surface--300);outline:1px solid var(--blockout__colours__outline);outline-offset:4px}.component-select-control__value:hover{background-color:var(--blockout__colours__surface--200)}.component-select-control__caret{flex-shrink:0;width:2rem;display:flex;justify-content:center;align-items:center;border-top-right-radius:var(--blockout__radius--md);border-bottom-right-radius:var(--blockout__radius--md);background-color:var(--blockout__colours__surface--100);cursor:pointer;transition:background-color .25s ease}.component-select-control__caret:hover{background-color:var(--blockout__colours__surface--200)}.component-select-control__caret>svg{width:.75rem;height:.75rem;fill:var(--blockout__colours__surface--700)}.component-select-control__popover__wrapper{z-index:9999!important}.component-select-control__popover{background-color:var(--blockout__colours__surface--200);border:1px solid var(--blockout__colours__surface--300);border-radius:var(--blockout__radius--lg);width:calc(var(--popover-anchor-width) + 2px);max-height:var(--popover-available-height);overflow-y:auto}.component-select-control__popover:focus{outline:none}.component-select-control__list{display:flex;flex-direction:column;gap:.325rem;padding:.325rem}.component-select-control__list:focus{outline:none}.component-select-control__popover__search-wrapper{display:flex;align-items:center;gap:0;padding-left:1rem}.component-select-control__popover__search-icon{width:1rem;height:1rem;transform:translateY(.25rem);fill:var(--blockout__colours__surface--500)}.component-select-control__popover__search{width:100%;padding:.5rem .675rem 0rem;min-height:40px}.component-select-control__popover__search:focus{outline:none}.component-select-control__option{display:flex;justify-content:center;align-items:start;flex-direction:column;gap:.25rem;padding:.375rem .675rem;border-radius:var(--blockout__radius--sm);min-height:40px;cursor:pointer;transition:background-color .25s ease}.component-select-control__option:focus{outline:none}.component-select-control__option:first-child{border-top:none}.component-select-control__option[aria-disabled=true] .component-select-control__option__label{color:var(--blockout__colours__surface--400)}.component-select-control__option[aria-disabled=true] .component-select-control__option__description{color:var(--blockout__colours__surface--300)}.component-select-control__option__label{display:flex;align-items:center;gap:.5rem;font-weight:500;color:var(--blockout__colours__surface--900);transition:color .25s ease}.component-select-control__option__label>svg{width:1.25rem;height:1.25rem}.component-select-control__option__description{font-weight:400;color:var(--blockout__colours__surface--600);font-size:.875rem;transition:color .25s ease,opacity .25s ease}.component-select-control__option[data-active-item=true]{background-color:var(--blockout__colours__surface--50)}.component-select-control__option[data-active-item=true] .component-select-control__option__label{color:var(--blockout__colours__surface--900)}.component-select-control__option[data-active-item=true] .component-select-control__option__description{color:var(--blockout__colours__surface--700)}
+.component-select-control .component-base-control__control{flex-grow:1!important}.component-select-control__input{cursor:pointer;display:flex;width:100%}.component-select-control__input:focus{outline:none}.component-select-control__value{display:flex;flex-direction:row;flex-grow:1;padding:.75rem;min-height:40px;width:100%;min-width:0;max-width:100%;color:var(--blockout__colours__surface--800);border-top-left-radius:var(--blockout__radius--md);border-bottom-left-radius:var(--blockout__radius--md);font-size:1rem;text-align:left;background-color:transparent;transition:background-color .25s ease}.component-select-control__value .component-base-control__affix{padding:0;min-height:0}.component-select-control__value .component-base-control__affix--prefix{padding-right:.75rem}.component-select-control__value .component-base-control__affix--suffix{padding-left:.75rem}.component-select-control__value--placeholder{color:var(--blockout__colours__surface--400)}.component-select-control__input:disabled .component-select-control__value{background-color:var(--blockout__colours__surface--300);color:var(--blockout__colours__surface--500)}.component-select-control__input:disabled .component-select-control__caret{background-color:var(--blockout__colours__surface--300)}.component-select-control__input:disabled .component-select-control__caret>svg{fill:var(--blockout__colours__surface--500)}.component-select-control .component-base-control__box:focus-within{background-color:var(--blockout__colours__surface--50);border-color:var(--blockout__colours__surface--300);outline:1px solid var(--blockout__colours__outline);outline-offset:4px}.component-select-control__value:hover{background-color:var(--blockout__colours__surface--200)}.component-select-control__caret{flex-shrink:0;width:2rem;display:flex;justify-content:center;align-items:center;border-top-right-radius:var(--blockout__radius--md);border-bottom-right-radius:var(--blockout__radius--md);background-color:var(--blockout__colours__surface--100);cursor:pointer;transition:background-color .25s ease}.component-select-control__caret:hover{background-color:var(--blockout__colours__surface--200)}.component-select-control__caret>svg{width:.75rem;height:.75rem;fill:var(--blockout__colours__surface--700)}.component-select-control__popover__wrapper{z-index:9999!important}.component-select-control__popover{background-color:var(--blockout__colours__surface--200);border:1px solid var(--blockout__colours__surface--300);border-radius:var(--blockout__radius--lg);width:calc(var(--popover-anchor-width) + 2px);max-height:var(--popover-available-height);overflow-y:auto}.component-select-control__popover:focus{outline:none}.component-select-control__list{display:flex;flex-direction:column;gap:.325rem;padding:.325rem}.component-select-control__list:focus{outline:none}.component-select-control__popover__search-wrapper{display:flex;align-items:center;gap:0;padding-left:1rem}.component-select-control__popover__search-icon{width:1rem;height:1rem;transform:translateY(.25rem);fill:var(--blockout__colours__surface--500)}.component-select-control__popover__search{width:100%;padding:.5rem .675rem 0rem;min-height:40px}.component-select-control__popover__search:focus{outline:none}.component-select-control__option{display:flex;justify-content:center;align-items:start;flex-direction:column;gap:.25rem;padding:.375rem .675rem;border-radius:var(--blockout__radius--sm);min-height:40px;cursor:pointer;transition:background-color .25s ease}.component-select-control__option:focus{outline:none}.component-select-control__option:first-child{border-top:none}.component-select-control__option[aria-disabled=true] .component-select-control__option__label{color:var(--blockout__colours__surface--400)}.component-select-control__option[aria-disabled=true] .component-select-control__option__description{color:var(--blockout__colours__surface--300)}.component-select-control__option__label{display:flex;align-items:center;gap:.5rem;font-weight:500;color:var(--blockout__colours__surface--900);transition:color .25s ease}.component-select-control__option__label>svg{width:1.25rem;height:1.25rem}.component-select-control__option__description{font-weight:400;color:var(--blockout__colours__surface--600);font-size:.875rem;transition:color .25s ease,opacity .25s ease}.component-select-control__option[data-active-item=true]{background-color:var(--blockout__colours__surface--50)}.component-select-control__option[data-active-item=true] .component-select-control__option__label{color:var(--blockout__colours__surface--900)}.component-select-control__option[data-active-item=true] .component-select-control__option__description{color:var(--blockout__colours__surface--700)}

package/dist/components/button/button.d.ts

@@ -1,8 +1,15 @@
 import { FC } from 'react';
-export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-    className?: string;
+type BaseProps = {
     variant?: "primary" | "quiet" | "ghost" | "neutral";
     size?: "small" | "medium" | "large";
     wide?: boolean;
-}
+};
+type ButtonButtonProps = BaseProps & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, keyof BaseProps> & {
+    as?: "button";
+};
+type LinkButtonProps = BaseProps & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, keyof BaseProps> & {
+    as: "link";
+};
+export type ButtonProps = ButtonButtonProps | LinkButtonProps;
 export declare const Button: FC<ButtonProps>;
+export {};

package/dist/components/button/button.js

@@ -1,28 +1,15 @@
-import { jsx as p } from "react/jsx-runtime";
-import { cn as c } from "../../utils/css.js";
-import '../../assets/button.css';const s = ({
-  children: t,
-  className: o,
-  variant: n = "primary",
-  size: m = "medium",
-  wide: e = !1,
-  type: r = "button",
-  ...u
-}) => /* @__PURE__ */ p(
-  "button",
-  {
-    type: r,
-    className: c(
-      o,
-      "component-button",
-      `component-button--${n}`,
-      `component-button--${m}`,
-      e && "component-button--wide"
-    ),
-    ...u,
-    children: t
-  }
-);
+import { jsx as e } from "react/jsx-runtime";
+import { cn as o } from "../../utils/css.js";
+import '../../assets/button.css';const c = (t) => {
+  const n = o(
+    t.className,
+    "component-button",
+    `component-button--${t.variant || "primary"}`,
+    `component-button--${t.size || "medium"}`,
+    t.wide && "component-button--wide"
+  );
+  return t.as === "link" ? /* @__PURE__ */ e("a", { ...t, className: n }) : /* @__PURE__ */ e("button", { type: "button", ...t, className: n });
+};
 export {
-  s as Button
+  c as Button
 };

package/dist/components/button/icon.d.ts

@@ -1,5 +1,4 @@
 import { FC } from 'react';
 import { ButtonProps } from './button';
-export interface IconButtonProps extends Omit<ButtonProps, "wide" | "variant"> {
-}
+export type IconButtonProps = Omit<ButtonProps, "wide">;
 export declare const IconButton: FC<IconButtonProps>;

package/dist/components/button/icon.js

@@ -1,17 +1,13 @@
-import { jsx as n } from "react/jsx-runtime";
-import { cn as r } from "../../utils/css.js";
+import { jsx as t } from "react/jsx-runtime";
+import { cn as n } from "../../utils/css.js";
 import { Button as m } from "./button.js";
-const p = ({
-  className: o,
-  ...t
-}) => /* @__PURE__ */ n(
+const s = (o) => /* @__PURE__ */ t(
   m,
   {
-    className: r("component-button--icon", o),
-    variant: "quiet",
-    ...t
+    ...o,
+    className: n("component-button--icon", o.className)
   }
 );
 export {
-  p as IconButton
+  s as IconButton
 };