@koine/react 2.0.0-beta.1 → 2.0.0-beta.11

package/Carousel/CarouselCss.d.ts

@@ -1,24 +1,7 @@
 /// <reference types="react" />
-import { RowProps, ColProps } from "../Grid";
-export declare const CarouselCssRow: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../Grid").GridProps & {
-    $valign?: import("csstype").Property.AlignItems | undefined;
-    $reverse?: "min:xs" | "min:sm" | "min:md" | "min:lg" | "min:xl" | "min:xxl" | "max:xs" | "max:sm" | "max:md" | "max:lg" | "max:xl" | "max:xxl" | undefined;
-    $noWrap?: boolean | undefined;
-} & {
-    $valign?: import("csstype").Property.AlignItems | undefined;
-    $reverse?: "min:xs" | "min:sm" | "min:md" | "min:lg" | "min:xl" | "min:xxl" | "max:xs" | "max:sm" | "max:md" | "max:lg" | "max:xl" | "max:xxl" | undefined;
-    $noWrap?: boolean | undefined;
-    $gutter: "normal" | "double" | "quarter" | "third" | "half" | "triple";
-}, never>;
-export declare const CarouselCssCol: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../Grid").GridProps & Partial<Record<import("../styles").Breakpoint, number>> & {
-    $width?: number | undefined;
-    $flex?: boolean | undefined;
-    $valign?: import("csstype").Property.AlignItems | undefined;
-    $auto?: boolean | undefined;
-    $offset?: string | undefined;
-} & Pick<KoineCarouselCssProps, "$snap"> & {
-    $width: KoineCarouselCssProps["width"];
-}, never>;
+import { ColProps, RowProps } from "../Grid";
+export declare const CarouselCssRow: any;
+export declare const CarouselCssCol: any;
 export type KoineCarouselCssProps = ColProps & {
     /**
      * Override the `<Row>` gutter, if not specified `$gutter` prop is used

package/Carousel/CarouselCss.mjs

@@ -1,22 +1,44 @@
-import { __assign, __makeTemplateObject, __rest } from "tslib";
+/// <reference types="csstype" />
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Children, useId } from "react";
 import styled from "styled-components";
-import { Row, Col, GRID_GUTTER_DEFAULT as DF, } from "../Grid";
-export var CarouselCssRow = styled(Row)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n\n  scroll-behavior: smooth;\n  scroll-snap-type: x;\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n"], ["\n  ", "\n\n  scroll-behavior: smooth;\n  scroll-snap-type: x;\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n"])), function (_a) {
-    var cs = _a.$gutter, gutter = _a.theme.gutter;
-    return "\n    margin-left: -".concat(cs === DF ? gutter[DF] : (gutter[DF] - gutter[cs]) * 2, "px;\n    margin-right: -").concat(cs === DF ? gutter[DF] : (gutter[DF] - gutter[cs]) * 2, "px;\n    padding-left: ").concat(cs === DF ? gutter[DF] : gutter[DF] - gutter[cs], "px;\n    padding-right: ").concat(cs === DF ? gutter[DF] : gutter[DF] - gutter[cs], "px;\n  ");
-});
-export var CarouselCssCol = styled(Col)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n  position: relative;\n  scroll-snap-align: ", ";\n"], ["\n  ", "\n  position: relative;\n  scroll-snap-align: ", ";\n"])), function (p) { return p.$width && "flex-basis: ".concat(p.$width, "px; min-width: ").concat(p.$width, "px;"); }, function (p) { return p.$snap; });
+import { Col, GRID_GUTTER_DEFAULT as DF, Row } from "../Grid";
+export const CarouselCssRow = styled(Row)`
+  ${({ $gutter: cs, theme: { gutter } })=>`
+    margin-left: -${cs === DF ? gutter[DF] : (gutter[DF] - gutter[cs]) * 2}px;
+    margin-right: -${cs === DF ? gutter[DF] : (gutter[DF] - gutter[cs]) * 2}px;
+    padding-left: ${cs === DF ? gutter[DF] : gutter[DF] - gutter[cs]}px;
+    padding-right: ${cs === DF ? gutter[DF] : gutter[DF] - gutter[cs]}px;
+  `}
+
+  scroll-behavior: smooth;
+  scroll-snap-type: x;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+`;
+export const CarouselCssCol = styled(Col)`
+  ${(p)=>p.$width && `flex-basis: ${p.$width}px; min-width: ${p.$width}px;`}
+  position: relative;
+  scroll-snap-align: ${(p)=>p.$snap};
+`;
 /**
  * For programmatic usage an example here @see https://stackoverflow.com/a/65902068/9122820
- */
-export var KoineCarouselCss = function (_a) {
-    var items = _a.items, $gutterRow = _a.$gutterRow, $gutterCol = _a.$gutterCol, _b = _a.$gutter, $gutter = _b === void 0 ? "quarter" : _b, $proportion = _a.$proportion, _c = _a.$snap, $snap = _c === void 0 ? "center" : _c, width = _a.width, children = _a.children, colProps = __rest(_a, ["items", "$gutterRow", "$gutterCol", "$gutter", "$proportion", "$snap", "width", "children"]);
-    var slides = children ? Children.toArray(children) : items;
-    var id = useId();
-    if (!slides)
-        return null;
-    return (_jsx(CarouselCssRow, { "$noWrap": true, "$gutter": $gutterRow || $gutter, children: slides.map(function (_slide, idx) { return (_jsx(CarouselCssCol, __assign({}, colProps, { "$gutter": $gutterCol || $gutter, "$width": width, children: slides[idx] }), "CarouselCssCol-".concat(id, "-").concat(idx))); }) }));
+ */ export const KoineCarouselCss = ({ items, $gutterRow, $gutterCol, $gutter = "quarter", $proportion, $snap = "center", width, children, ...colProps })=>{
+    const slides = children ? Children.toArray(children) : items;
+    const id = useId();
+    if (!slides) return null;
+    return /*#__PURE__*/ _jsx(CarouselCssRow, {
+        $noWrap: true,
+        $gutter: $gutterRow || $gutter,
+        children: slides.map((_slide, idx)=>/*#__PURE__*/ _jsx(CarouselCssCol, {
+                ...colProps,
+                $gutter: $gutterCol || $gutter,
+                $width: width,
+                children: slides[idx]
+            }, `CarouselCssCol-${id}-${idx}`))
+    });
 };
-var templateObject_1, templateObject_2;

package/Collapsable/Collapsable.mjs

@@ -1 +1 @@
-export var Collapsable = null;
+export const Collapsable = null;

package/Collapsable/CollapsableReach.mjs

@@ -1,11 +1,9 @@
-"use strict";
 /**
  * @file
  *
  * Maybe do a simplified version following this example:
  * https://codesandbox.io/s/framer-motion-accordion-qx958?file=/src/Example.tsx
- */
-// import { forwardRef, useCallback, useEffect, useId, useRef, useState } from "react";
+ */ // import { forwardRef, useCallback, useEffect, useId, useRef, useState } from "react";
 // import styled from "styled-components";
 // import { MotionProps, m } from "framer-motion";
 // import {

package/Collapsable/index.mjs

@@ -1,2 +1 @@
-export * from "./Collapsable";
-// export * from "./CollapsableReach";
+export * from "./Collapsable"; // export * from "./CollapsableReach";

package/Debug/Debug.mjs

@@ -1,9 +1,23 @@
-import { __makeTemplateObject } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import styled from "styled-components";
-var Root = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background: #f4f4f4;\n  border: 1px solid #ddd;\n  border-left: 3px solid #f36d33;\n  color: #666;\n  page-break-inside: avoid;\n  font-family: monospace;\n  font-size: small;\n  line-height: 1.6;\n  margin-bottom: 1.6em;\n  max-width: 100%;\n  overflow: auto;\n  padding: 1em 1.5em;\n  display: block;\n  word-wrap: break-word;\n"], ["\n  background: #f4f4f4;\n  border: 1px solid #ddd;\n  border-left: 3px solid #f36d33;\n  color: #666;\n  page-break-inside: avoid;\n  font-family: monospace;\n  font-size: small;\n  line-height: 1.6;\n  margin-bottom: 1.6em;\n  max-width: 100%;\n  overflow: auto;\n  padding: 1em 1.5em;\n  display: block;\n  word-wrap: break-word;\n"])));
-export var Debug = function (_a) {
-    var data = _a.data;
-    return _jsx(Root, { children: JSON.stringify(data, undefined, 2) });
+const Root = styled.div`
+  background: #f4f4f4;
+  border: 1px solid #ddd;
+  border-left: 3px solid #f36d33;
+  color: #666;
+  page-break-inside: avoid;
+  font-family: monospace;
+  font-size: small;
+  line-height: 1.6;
+  margin-bottom: 1.6em;
+  max-width: 100%;
+  overflow: auto;
+  padding: 1em 1.5em;
+  display: block;
+  word-wrap: break-word;
+`;
+export const Debug = ({ data })=>{
+    return /*#__PURE__*/ _jsx(Root, {
+        children: JSON.stringify(data, undefined, 2)
+    });
 };
-var templateObject_1;

package/Details/Details.d.ts

@@ -70,10 +70,10 @@ export declare const Content: NonNullable<import("react").ElementType<Omit<Omit<
 export declare const KoineDetails: ((props: {
     key?: import("react").Key | null | undefined;
     id?: string | undefined;
-    title?: string | undefined;
-    color?: string | undefined;
     slot?: string | undefined;
     style?: import("react").CSSProperties | undefined;
+    title?: string | undefined;
+    color?: string | undefined;
     defaultChecked?: boolean | undefined;
     defaultValue?: string | number | readonly string[] | undefined;
     suppressContentEditableWarning?: boolean | undefined;
@@ -116,7 +116,7 @@ export declare const KoineDetails: ((props: {
     results?: number | undefined;
     security?: string | undefined;
     unselectable?: "on" | "off" | undefined;
-    inputMode?: "text" | "search" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+    inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
     is?: string | undefined;
     'aria-activedescendant'?: string | undefined;
     'aria-atomic'?: (boolean | "true" | "false") | undefined;
@@ -130,12 +130,12 @@ export declare const KoineDetails: ((props: {
     'aria-colindextext'?: string | undefined;
     'aria-colspan'?: number | undefined;
     'aria-controls'?: string | undefined;
-    'aria-current'?: boolean | "location" | "time" | "true" | "false" | "page" | "step" | "date" | undefined;
+    'aria-current'?: boolean | "time" | "location" | "true" | "false" | "page" | "step" | "date" | undefined;
     'aria-describedby'?: string | undefined;
     'aria-description'?: string | undefined;
     'aria-details'?: string | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;
-    'aria-dropeffect'?: "link" | "none" | "copy" | "execute" | "move" | "popup" | undefined;
+    'aria-dropeffect'?: "link" | "copy" | "none" | "execute" | "move" | "popup" | undefined;
     'aria-errormessage'?: string | undefined;
     'aria-expanded'?: (boolean | "true" | "false") | undefined;
     'aria-flowto'?: string | undefined;

package/Details/Details.mjs

@@ -1,30 +1,27 @@
-import { __assign, __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useCallback, useEffect, useId, useRef, useState, } from "react";
+import { forwardRef, useCallback, useEffect, useId, useRef, useState } from "react";
+import { extendComponent } from "../helpers";
 import { useWindowSize } from "../hooks/useWindowSize";
-import { extendComponent, } from "../helpers";
-export var Root = "details";
-export var Summary = "summary";
-export var Body = "div";
-export var Content = "div";
+export const Root = "details";
+export const Summary = "summary";
+export const Body = "div";
+export const Content = "div";
 /**
  * FIXME: it actually works even without forwardRef, check if we do need it
  *
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details
- */
-var DetailsWithRef = forwardRef(function Details(_a, ref) {
-    var id = _a.id, propOpen = _a.open, recalc = _a.recalc, summary = _a.summary, children = _a.children, _Root = _a.Root, _Summary = _a.Summary, _Body = _a.Body, _Content = _a.Content, onChange = _a.onChange, props = __rest(_a, ["id", "open", "recalc", "summary", "children", "Root", "Summary", "Body", "Content", "onChange"]);
-    var isControlled = typeof propOpen !== "undefined";
-    var _b = useState(propOpen), stateOpen = _b[0], setStateOpen = _b[1];
-    var _c = useState(0), height = _c[0], setHeight = _c[1];
-    var hash = id ? "#".concat(id) : "";
-    var winSize = useWindowSize();
-    var open = isControlled ? propOpen : stateOpen;
-    var _d = useState(open ? "unset" : "hidden"), overflow = _d[0], setOverflow = _d[1];
-    var content = useRef(null);
-    var defaultId = useId();
+ */ const DetailsWithRef = /*#__PURE__*/ forwardRef(function Details({ id, open: propOpen, recalc, summary, children, Root: _Root, Summary: _Summary, Body: _Body, Content: _Content, onChange, ...props }, ref) {
+    const isControlled = typeof propOpen !== "undefined";
+    const [stateOpen, setStateOpen] = useState(propOpen);
+    const [, /* height */ setHeight] = useState(0);
+    const hash = id ? `#${id}` : "";
+    const winSize = useWindowSize();
+    const open = isControlled ? propOpen : stateOpen;
+    const [overflow /* setOverflow */ ] = useState(open ? "unset" : "hidden");
+    const content = useRef(null);
+    const defaultId = useId();
     id = id || defaultId;
-    var handleClick = useCallback(function () {
+    const handleClick = useCallback(()=>{
         if (hash) {
             window.history.replaceState(null, "", open ? window.location.pathname + window.location.search : hash);
         }
@@ -32,32 +29,62 @@ var DetailsWithRef = forwardRef(function Details(_a, ref) {
             onChange();
         }
         if (!isControlled) {
-            setStateOpen(function (prevOpen) { return !prevOpen; });
+            setStateOpen((prevOpen)=>!prevOpen);
         }
-    }, [open, hash, onChange, isControlled]);
-    useEffect(function () {
+    }, [
+        open,
+        hash,
+        onChange,
+        isControlled
+    ]);
+    useEffect(()=>{
         if (content.current) {
             setHeight(Math.ceil(content.current.offsetHeight));
         }
-    }, [winSize, recalc]);
+    }, [
+        winSize,
+        recalc
+    ]);
     // deeplink on mount
-    useEffect(function () {
+    useEffect(()=>{
         if (!isControlled && hash && window.location.hash === hash) {
             setStateOpen(true);
         }
-    }, [hash, isControlled]);
-    return (_jsxs(Root, __assign({}, props, { open: open || false, children: [_jsx(Summary, { "$open": open, onClick: handleClick, children: summary || " " }), _jsx(Body, { "$open": open, style: { overflow: overflow }, children: _jsx(Content
-                // ref={content}
-                , { "$open": open, 
+    }, [
+        hash,
+        isControlled
+    ]);
+    return /*#__PURE__*/ _jsxs(Root, {
+        ...props,
+        open: open || false,
+        children: [
+            /*#__PURE__*/ _jsx(Summary, {
+                $open: open,
+                onClick: handleClick,
+                children: summary || " "
+            }),
+            /*#__PURE__*/ _jsx(Body, {
+                $open: open,
+                style: {
+                    overflow
+                },
+                children: /*#__PURE__*/ _jsx(Content, {
+                    // ref={content}
+                    $open: open,
                     // aria-expanded={open}
                     // aria-label={open ? ariaCollapse : ariaExpand}
                     style: {
-                        pointerEvents: open ? "all" : "none",
-                    }, children: children }) })] })));
-});
-export var KoineDetails = extendComponent(DetailsWithRef, {
-    Root: Root,
-    Summary: Summary,
-    Body: Body,
-    Content: Content,
+                        pointerEvents: open ? "all" : "none"
+                    },
+                    children: children
+                })
+            })
+        ]
+    });
 });
+export const KoineDetails = extendComponent(DetailsWithRef, {
+    Root,
+    Summary,
+    Body,
+    Content
+}); // export default Details;

package/Details/Details.stories.mjs

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { StoryDetails, storyDetailsMeta } from "@koine/stories";
+import { KoineDetails } from "./Details";
+export default {
+    component: KoineDetails,
+    title: "Base/Details",
+    ...storyDetailsMeta
+};
+const BareTemplate = (args)=>{
+    // return <StoryDetails {...args} Details={KoineDetails} />;
+    return /*#__PURE__*/ _jsx(StoryDetails, {
+        ...args,
+        Details: KoineDetails
+    });
+// return <div><Details {...args} /></div>;
+};
+export const Bare = BareTemplate.bind({});
+Bare.args = {
+    summary: "Details summary",
+    children: "Medium"
+};