@bit.rhplus/ui.f7.detail-item 0.0.1

package/components/Custom.jsx

@@ -0,0 +1,6 @@
+/* eslint-disable */
+import React from 'react';
+// Custom wrapper pro vlastní obsah
+export const Custom = ({ children }) => {
+  return <>{children}</>;
+};

package/components/Download.jsx

@@ -0,0 +1,51 @@
+/* eslint-disable */
+import React, { useState } from 'react';
+import { Link, Icon, Preloader } from 'framework7-react';
+
+// Download komponenta s loading stavem
+export const Download = ({ children, href, onClick, color = '#6887d3', size = 16 }) => {
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleClick = async (e) => {
+    if (onClick) {
+      setIsLoading(true);
+      try {
+        await onClick(e);
+      } finally {
+        setIsLoading(false);
+      }
+    }
+  };
+
+  const linkStyle = { 
+    color, 
+    cursor: 'pointer',
+    display: 'flex',
+    alignItems: 'center',
+    gap: '6px'
+  };
+  
+  if (href) {
+    return (
+      <Link href={href} className="link" style={linkStyle}>
+        {isLoading ? (
+          <Preloader size={size} />
+        ) : (
+          <Icon f7="arrow_down_circle" size={size} />
+        )}
+        {children}
+      </Link>
+    );
+  }
+  
+  return (
+    <Link onClick={handleClick} className="link" style={linkStyle}>
+      {isLoading ? (
+        <Preloader size={size} />
+      ) : (
+        <Icon f7="arrow_down_circle" size={size} />
+      )}
+      {children}
+    </Link>
+  );
+};

package/components/Input.jsx

@@ -0,0 +1,97 @@
+/* eslint-disable */
+import React, { useState } from 'react';
+import { 
+  Link, 
+  Icon, 
+  Popup, 
+  Navbar,
+  NavLeft, 
+  NavTitle, 
+  NavTitleLarge,
+  NavRight, 
+  Page, 
+  Block, 
+  List, 
+  ListInput, 
+  Button 
+} from 'framework7-react';
+// import SaveButton from '@bit.rhplus/ui.f7.save-button';
+
+// Input komponenta s modální editací
+export const Input = ({ 
+  children, 
+  value, 
+  onSave, 
+  title = 'Editace', 
+  placeholder = 'Zadejte hodnotu',
+  color = '#6887d3', 
+  size = 16 
+}) => {
+  const [popupOpened, setPopupOpened] = useState(false);
+  const [inputValue, setInputValue] = useState(value || children || '');
+
+  const linkStyle = { 
+    color, 
+    cursor: 'pointer',
+    display: 'flex',
+    alignItems: 'center',
+    gap: '6px'
+  };
+
+  const handleSave = () => {
+    if (onSave) {
+      onSave(inputValue);
+    }
+    setPopupOpened(false);
+  };
+
+  const handleCancel = () => {
+    setInputValue(value || children || '');
+    setPopupOpened(false);
+  };
+
+  return (
+    <>
+      <Link onClick={() => setPopupOpened(true)} className="link" style={linkStyle}>
+        <Icon f7="pencil" size={size} />
+        {children}
+      </Link>
+
+      <Popup 
+        opened={popupOpened} 
+        onPopupClosed={() => setPopupOpened(false)}
+        animate
+        backdrop
+        className="f7-parallax"
+      >
+        <Page>
+          <Navbar large>
+            <NavLeft>
+              <Link onClick={handleCancel}>
+                <Icon f7="arrow_left" style={{ fontWeight: 'bold' }} />
+              </Link>
+            </NavLeft>
+            <NavTitle>Přidat poznámku</NavTitle>
+            <NavTitleLarge>Přidat poznámku</NavTitleLarge>
+          </Navbar>
+          
+          <Block style={{ marginTop: '20px' }}>
+            <List>
+              <ListInput
+                type="text"
+                label="Typ dokladu"
+                placeholder={placeholder}
+                value={inputValue}
+                onInput={(e) => setInputValue(e.target.value)}
+                clearButton
+                autoFocus
+                style={{ fontSize: '18px' }}
+              />
+            </List>
+          </Block>
+          {/* <SaveButton onClick={handleSave} />         */}
+        </Page>
+      </Popup>
+    </>
+  );
+};

package/components/Switch.jsx

@@ -0,0 +1,12 @@
+/* eslint-disable */
+import React from 'react';
+// Switch komponenta
+export const Switch = ({ checked, onChange, disabled }) => {
+  return (
+    <Toggle 
+      checked={checked}
+      onChange={onChange}
+      disabled={disabled}
+    />
+  );
+};

package/components/Text.jsx

@@ -0,0 +1,10 @@
+/* eslint-disable */
+import React from 'react';
+
+export const Text = ({ children }) => {
+  return (
+    <span>
+      {children}
+    </span>
+  );
+};

package/components/index.jsx

@@ -0,0 +1,6 @@
+
+export {Text} from './Text'
+export {Download} from './Download';
+export {Input} from './Input';
+export {Switch} from './Switch';
+export {Custom} from './Custom';

package/dist/components/Custom.d.ts

@@ -0,0 +1,3 @@
+export function Custom({ children }: {
+    children: any;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/Custom.js

@@ -0,0 +1,8 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+/* eslint-disable */
+import React from 'react';
+// Custom wrapper pro vlastní obsah
+export const Custom = ({ children }) => {
+    return _jsx(_Fragment, { children: children });
+};
+//# sourceMappingURL=Custom.js.map

package/dist/components/Custom.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Custom.js","sourceRoot":"","sources":["../../components/Custom.jsx"],"names":[],"mappings":";AAAA,oBAAoB;AACpB,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,mCAAmC;AACnC,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IACrC,OAAO,4BAAG,QAAQ,GAAI,CAAC;AACzB,CAAC,CAAC"}

package/dist/components/Download.d.ts

@@ -0,0 +1,7 @@
+export function Download({ children, href, onClick, color, size }: {
+    children: any;
+    href: any;
+    onClick: any;
+    color?: string | undefined;
+    size?: number | undefined;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/Download.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable */
+import React, { useState } from 'react';
+import { Link, Icon, Preloader } from 'framework7-react';
+// Download komponenta s loading stavem
+export const Download = ({ children, href, onClick, color = '#6887d3', size = 16 }) => {
+    const [isLoading, setIsLoading] = useState(false);
+    const handleClick = async (e) => {
+        if (onClick) {
+            setIsLoading(true);
+            try {
+                await onClick(e);
+            }
+            finally {
+                setIsLoading(false);
+            }
+        }
+    };
+    const linkStyle = {
+        color,
+        cursor: 'pointer',
+        display: 'flex',
+        alignItems: 'center',
+        gap: '6px'
+    };
+    if (href) {
+        return (_jsxs(Link, { href: href, className: "link", style: linkStyle, children: [isLoading ? (_jsx(Preloader, { size: size })) : (_jsx(Icon, { f7: "arrow_down_circle", size: size })), children] }));
+    }
+    return (_jsxs(Link, { onClick: handleClick, className: "link", style: linkStyle, children: [isLoading ? (_jsx(Preloader, { size: size })) : (_jsx(Icon, { f7: "arrow_down_circle", size: size })), children] }));
+};
+//# sourceMappingURL=Download.js.map

package/dist/components/Download.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Download.js","sourceRoot":"","sources":["../../components/Download.jsx"],"names":[],"mappings":";AAAA,oBAAoB;AACpB,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAEzD,uCAAuC;AACvC,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,GAAG,SAAS,EAAE,IAAI,GAAG,EAAE,EAAE,EAAE,EAAE;IACpF,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAElD,MAAM,WAAW,GAAG,KAAK,EAAE,CAAC,EAAE,EAAE;QAC9B,IAAI,OAAO,EAAE,CAAC;YACZ,YAAY,CAAC,IAAI,CAAC,CAAC;YACnB,IAAI,CAAC;gBACH,MAAM,OAAO,CAAC,CAAC,CAAC,CAAC;YACnB,CAAC;oBAAS,CAAC;gBACT,YAAY,CAAC,KAAK,CAAC,CAAC;YACtB,CAAC;QACH,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,SAAS,GAAG;QAChB,KAAK;QACL,MAAM,EAAE,SAAS;QACjB,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,QAAQ;QACpB,GAAG,EAAE,KAAK;KACX,CAAC;IAEF,IAAI,IAAI,EAAE,CAAC;QACT,OAAO,CACL,MAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAC,MAAM,EAAC,KAAK,EAAE,SAAS,aAChD,SAAS,CAAC,CAAC,CAAC,CACX,KAAC,SAAS,IAAC,IAAI,EAAE,IAAI,GAAI,CAC1B,CAAC,CAAC,CAAC,CACF,KAAC,IAAI,IAAC,EAAE,EAAC,mBAAmB,EAAC,IAAI,EAAE,IAAI,GAAI,CAC5C,EACA,QAAQ,IACJ,CACR,CAAC;IACJ,CAAC;IAED,OAAO,CACL,MAAC,IAAI,IAAC,OAAO,EAAE,WAAW,EAAE,SAAS,EAAC,MAAM,EAAC,KAAK,EAAE,SAAS,aAC1D,SAAS,CAAC,CAAC,CAAC,CACX,KAAC,SAAS,IAAC,IAAI,EAAE,IAAI,GAAI,CAC1B,CAAC,CAAC,CAAC,CACF,KAAC,IAAI,IAAC,EAAE,EAAC,mBAAmB,EAAC,IAAI,EAAE,IAAI,GAAI,CAC5C,EACA,QAAQ,IACJ,CACR,CAAC;AACJ,CAAC,CAAC"}

package/dist/components/Input.d.ts

@@ -0,0 +1,9 @@
+export function Input({ children, value, onSave, title, placeholder, color, size }: {
+    children: any;
+    value: any;
+    onSave: any;
+    title?: string | undefined;
+    placeholder?: string | undefined;
+    color?: string | undefined;
+    size?: number | undefined;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/Input.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/* eslint-disable */
+import React, { useState } from 'react';
+import { Link, Icon, Popup, Navbar, NavLeft, NavTitle, NavTitleLarge, NavRight, Page, Block, List, ListInput, Button } from 'framework7-react';
+// import SaveButton from '@bit.rhplus/ui.f7.save-button';
+// Input komponenta s modální editací
+export const Input = ({ children, value, onSave, title = 'Editace', placeholder = 'Zadejte hodnotu', color = '#6887d3', size = 16 }) => {
+    const [popupOpened, setPopupOpened] = useState(false);
+    const [inputValue, setInputValue] = useState(value || children || '');
+    const linkStyle = {
+        color,
+        cursor: 'pointer',
+        display: 'flex',
+        alignItems: 'center',
+        gap: '6px'
+    };
+    const handleSave = () => {
+        if (onSave) {
+            onSave(inputValue);
+        }
+        setPopupOpened(false);
+    };
+    const handleCancel = () => {
+        setInputValue(value || children || '');
+        setPopupOpened(false);
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs(Link, { onClick: () => setPopupOpened(true), className: "link", style: linkStyle, children: [_jsx(Icon, { f7: "pencil", size: size }), children] }), _jsx(Popup, { opened: popupOpened, onPopupClosed: () => setPopupOpened(false), animate: true, backdrop: true, className: "f7-parallax", children: _jsxs(Page, { children: [_jsxs(Navbar, { large: true, children: [_jsx(NavLeft, { children: _jsx(Link, { onClick: handleCancel, children: _jsx(Icon, { f7: "arrow_left", style: { fontWeight: 'bold' } }) }) }), _jsx(NavTitle, { children: "P\u0159idat pozn\u00E1mku" }), _jsx(NavTitleLarge, { children: "P\u0159idat pozn\u00E1mku" })] }), _jsx(Block, { style: { marginTop: '20px' }, children: _jsx(List, { children: _jsx(ListInput, { type: "text", label: "Typ dokladu", placeholder: placeholder, value: inputValue, onInput: (e) => setInputValue(e.target.value), clearButton: true, autoFocus: true, style: { fontSize: '18px' } }) }) })] }) })] }));
+};
+//# sourceMappingURL=Input.js.map

package/dist/components/Input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../components/Input.jsx"],"names":[],"mappings":";AAAA,oBAAoB;AACpB,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,EACL,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,MAAM,EACN,OAAO,EACP,QAAQ,EACR,aAAa,EACb,QAAQ,EACR,IAAI,EACJ,KAAK,EACL,IAAI,EACJ,SAAS,EACT,MAAM,EACP,MAAM,kBAAkB,CAAC;AAC1B,0DAA0D;AAE1D,qCAAqC;AACrC,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,EACpB,QAAQ,EACR,KAAK,EACL,MAAM,EACN,KAAK,GAAG,SAAS,EACjB,WAAW,GAAG,iBAAiB,EAC/B,KAAK,GAAG,SAAS,EACjB,IAAI,GAAG,EAAE,EACV,EAAE,EAAE;IACH,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACtD,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,IAAI,QAAQ,IAAI,EAAE,CAAC,CAAC;IAEtE,MAAM,SAAS,GAAG;QAChB,KAAK;QACL,MAAM,EAAE,SAAS;QACjB,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,QAAQ;QACpB,GAAG,EAAE,KAAK;KACX,CAAC;IAEF,MAAM,UAAU,GAAG,GAAG,EAAE;QACtB,IAAI,MAAM,EAAE,CAAC;YACX,MAAM,CAAC,UAAU,CAAC,CAAC;QACrB,CAAC;QACD,cAAc,CAAC,KAAK,CAAC,CAAC;IACxB,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,GAAG,EAAE;QACxB,aAAa,CAAC,KAAK,IAAI,QAAQ,IAAI,EAAE,CAAC,CAAC;QACvC,cAAc,CAAC,KAAK,CAAC,CAAC;IACxB,CAAC,CAAC;IAEF,OAAO,CACL,8BACE,MAAC,IAAI,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,SAAS,EAAC,MAAM,EAAC,KAAK,EAAE,SAAS,aAC1E,KAAC,IAAI,IAAC,EAAE,EAAC,QAAQ,EAAC,IAAI,EAAE,IAAI,GAAI,EAC/B,QAAQ,IACJ,EAEP,KAAC,KAAK,IACJ,MAAM,EAAE,WAAW,EACnB,aAAa,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,EAC1C,OAAO,QACP,QAAQ,QACR,SAAS,EAAC,aAAa,YAEvB,MAAC,IAAI,eACH,MAAC,MAAM,IAAC,KAAK,mBACX,KAAC,OAAO,cACN,KAAC,IAAI,IAAC,OAAO,EAAE,YAAY,YACzB,KAAC,IAAI,IAAC,EAAE,EAAC,YAAY,EAAC,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,GAAI,GAClD,GACC,EACV,KAAC,QAAQ,4CAA2B,EACpC,KAAC,aAAa,4CAAgC,IACvC,EAET,KAAC,KAAK,IAAC,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,YACjC,KAAC,IAAI,cACH,KAAC,SAAS,IACR,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,aAAa,EACnB,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,UAAU,EACjB,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAC7C,WAAW,QACX,SAAS,QACT,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,GAC3B,GACG,GACD,IAEH,GACD,IACP,CACJ,CAAC;AACJ,CAAC,CAAC"}

package/dist/components/Switch.d.ts

@@ -0,0 +1,5 @@
+export function Switch({ checked, onChange, disabled }: {
+    checked: any;
+    onChange: any;
+    disabled: any;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/Switch.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/* eslint-disable */
+import React from 'react';
+// Switch komponenta
+export const Switch = ({ checked, onChange, disabled }) => {
+    return (_jsx(Toggle, { checked: checked, onChange: onChange, disabled: disabled }));
+};
+//# sourceMappingURL=Switch.js.map

package/dist/components/Switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.js","sourceRoot":"","sources":["../../components/Switch.jsx"],"names":[],"mappings":";AAAA,oBAAoB;AACpB,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,oBAAoB;AACpB,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,EAAE;IACxD,OAAO,CACL,KAAC,MAAM,IACL,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,GAClB,CACH,CAAC;AACJ,CAAC,CAAC"}

package/dist/components/Text.d.ts

@@ -0,0 +1,3 @@
+export function Text({ children }: {
+    children: any;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/Text.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/* eslint-disable */
+import React from 'react';
+export const Text = ({ children }) => {
+    return (_jsx("span", { children: children }));
+};
+//# sourceMappingURL=Text.js.map

package/dist/components/Text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text.js","sourceRoot":"","sources":["../../components/Text.jsx"],"names":[],"mappings":";AAAA,oBAAoB;AACpB,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IACnC,OAAO,CACL,yBACG,QAAQ,GACJ,CACR,CAAC;AACJ,CAAC,CAAC"}

package/dist/components/index.d.ts

@@ -0,0 +1,5 @@
+export { Text } from "./Text";
+export { Download } from "./Download";
+export { Input } from "./Input";
+export { Switch } from "./Switch";
+export { Custom } from "./Custom";

package/dist/components/index.js

@@ -0,0 +1,6 @@
+export { Text } from './Text';
+export { Download } from './Download';
+export { Input } from './Input';
+export { Switch } from './Switch';
+export { Custom } from './Custom';
+//# sourceMappingURL=index.js.map

package/dist/components/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../components/index.jsx"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,QAAQ,CAAA;AAC3B,OAAO,EAAC,QAAQ,EAAC,MAAM,YAAY,CAAC;AACpC,OAAO,EAAC,KAAK,EAAC,MAAM,SAAS,CAAC;AAC9B,OAAO,EAAC,MAAM,EAAC,MAAM,UAAU,CAAC;AAChC,OAAO,EAAC,MAAM,EAAC,MAAM,UAAU,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,11 @@
+export default DetailItem;
+export { Link } from "framework7-react";
+declare function DetailItem({ title, subtitle, footer, input, className, style }: {
+    title: any;
+    subtitle: any;
+    footer: any;
+    input: any;
+    className?: string | undefined;
+    style: any;
+}): import("react/jsx-runtime").JSX.Element;
+export { Text, Download, Input, Switch, Custom } from "./components";

package/dist/index.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable */
+import React from 'react';
+import ListItem from '@bit.rhplus/ui.f7.list-item';
+import './style.css';
+// Základní DetailItem komponenta
+const DetailItem = ({ title, subtitle, footer, input, className = '', style }) => {
+    return (_jsx(ListItem, { title: title, subtitle: subtitle, footer: footer, className: `detail-item ${className}`, style: style, after: input && (_jsx("div", { className: "item-after", children: input })) }));
+};
+// Příklady použití
+const DetailItemExample = () => {
+    const [notificationsEnabled, setNotificationsEnabled] = React.useState(false);
+    const [darkModeEnabled, setDarkModeEnabled] = React.useState(true);
+    const [counter, setCounter] = React.useState(5);
+    return (_jsxs("div", { className: "page-content", children: [_jsx("div", { className: "block-title", children: "Z\u00E1kladn\u00ED pou\u017Eit\u00ED" }), _jsx("div", { className: "list", children: _jsxs("ul", { children: [_jsx(DetailItem, { title: "Email", input: _jsx(Text, { children: "john.doe@email.com" }) }), _jsx(DetailItem, { title: "Status", input: _jsx(Text, { color: "#34c759", children: "Aktivn\u00ED" }) }), _jsx(DetailItem, { title: "Webov\u00E1 str\u00E1nka", input: _jsx(LinkButton, { href: "https://example.com", children: "Nav\u0161t\u00EDvit" }) }), _jsx(DetailItem, { title: "Profil", subtitle: "Zobrazit detaily profilu", input: _jsx(LinkButton, { onClick: () => alert('Otevírám profil!'), children: "Upravit" }) }), _jsx(DetailItem, { title: "Push notifikace", subtitle: "Povolit zas\u00EDl\u00E1n\u00ED ozn\u00E1men\u00ED", input: _jsx(Switch, { checked: notificationsEnabled, onChange: setNotificationsEnabled }) }), _jsx(DetailItem, { title: "Tmav\u00FD re\u017Eim", input: _jsx(Switch, { checked: darkModeEnabled, onChange: setDarkModeEnabled }) })] }) }), _jsx("div", { className: "block-title", children: "Vlastn\u00ED komponenty" }), _jsx("div", { className: "list", children: _jsxs("ul", { children: [_jsx(DetailItem, { title: "Po\u010Det polo\u017Eek", input: _jsx(Custom, { children: _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '8px' }, children: [_jsx("button", { className: "button button-small button-outline", onClick: () => setCounter(prev => Math.max(0, prev - 1)), children: "-" }), _jsx("span", { style: { minWidth: '30px', textAlign: 'center', fontWeight: '500' }, children: counter }), _jsx("button", { className: "button button-small button-outline", onClick: () => setCounter(prev => prev + 1), children: "+" })] }) }) }), _jsx(DetailItem, { title: "\u00DArove\u0148", input: _jsx(Custom, { children: _jsx("span", { className: "badge color-blue", children: "Premium" }) }) }), _jsx(DetailItem, { title: "Hodnocen\u00ED", input: _jsx(Custom, { children: _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '4px' }, children: [_jsx("span", { children: "\u2B50\u2B50\u2B50\u2B50\u2B50" }), _jsx(Text, { color: "#ff9500", children: "4.8" })] }) }) }), _jsx(DetailItem, { title: "N\u00E1zev sekce", subtitle: "Bez prav\u00E9 \u010D\u00E1sti" })] }) }), _jsx("div", { className: "block-title", children: "Pokro\u010Dil\u00E9 pou\u017Eit\u00ED" }), _jsx("div", { className: "list", children: _jsxs("ul", { children: [_jsx(DetailItem, { title: "Vlastn\u00ED input", input: _jsx("input", { type: "text", placeholder: "Zadej hodnotu", style: {
+                                    border: '1px solid #c7c7cc',
+                                    borderRadius: '4px',
+                                    padding: '4px 8px',
+                                    fontSize: '14px'
+                                } }) }), _jsx(DetailItem, { title: "Select", input: _jsxs("select", { style: { border: 'none', background: 'transparent' }, children: [_jsx("option", { children: "Mo\u017Enost 1" }), _jsx("option", { children: "Mo\u017Enost 2" }), _jsx("option", { children: "Mo\u017Enost 3" })] }) }), _jsx(DetailItem, { title: "Slider", input: _jsx(Custom, { children: _jsx("input", { type: "range", min: "0", max: "100", value: "50", style: { width: '100px' } }) }) }), _jsx(DetailItem, { title: "Akce", input: _jsx(Custom, { children: _jsxs("div", { style: { display: 'flex', gap: '8px' }, children: [_jsx("button", { className: "button button-small", children: "Ano" }), _jsx("button", { className: "button button-small button-outline", children: "Ne" })] }) }) })] }) })] }));
+};
+// Export všech komponent
+export default DetailItem;
+export { Text, Download, Input, Switch, Custom } from './components';
+export { Link } from 'framework7-react';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.jsx"],"names":[],"mappings":"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"}

package/dist/preview-1756983018781.js

@@ -0,0 +1,7 @@
+;
+;
+
+export const compositions = [];
+export const overview = [];
+
+export const compositions_metadata = {"compositions":[]};

package/dist/style.css

@@ -0,0 +1,62 @@
+/* Framework7 Parallax animation */
+.f7-parallax.popup {
+  --f7-popup-transition-duration: 400ms;
+}
+
+/* F7 Parallax effect - scale and fade */
+.f7-parallax.popup .popup-inner {
+  transition: all var(--f7-popup-transition-duration) cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+.f7-parallax.popup:not(.popup-in) .popup-inner {
+  transform: scale(0.85);
+  opacity: 0;
+}
+
+.f7-parallax.popup.popup-in .popup-inner {
+  transform: scale(1);
+  opacity: 1;
+}
+
+/* Enhanced input styling for fullscreen */
+.f7-parallax .list-input input {
+  font-size: 18px !important;
+  padding: 12px 16px !important;
+}
+
+.f7-parallax .button-large {
+  border-radius: 12px;
+  box-shadow: 0 4px 12px rgba(104, 135, 211, 0.3);
+  transition: all 0.2s ease;
+}
+
+.f7-parallax .button-large:active {
+  transform: translateY(1px);
+  box-shadow: 0 2px 8px rgba(104, 135, 211, 0.4);
+}
+
+/* Smooth navbar animations */
+.f7-parallax .navbar {
+  backdrop-filter: blur(10px);
+  background: rgba(255, 255, 255, 0.95);
+}
+
+.f7-parallax .navbar-inner {
+  animation: slideDownFadeIn 0.4s ease-out;
+}
+
+@keyframes slideDownFadeIn {
+  0% {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Content animation */
+.f7-parallax .page-content {
+  animation: slideUpFadeIn 0.5s ease-out 0.1s both;
+}

package/index.jsx

@@ -0,0 +1,219 @@
+/* eslint-disable */
+import React from 'react';
+import ListItem from '@bit.rhplus/ui.f7.list-item';
+import './style.css';
+
+// Základní DetailItem komponenta
+const DetailItem = ({
+  title,
+  subtitle,
+  footer,
+  input,
+  className = '',
+  style
+}) => {
+  return (
+    <ListItem
+      title={title}
+      subtitle={subtitle}
+      footer={footer}
+      className={`detail-item ${className}`}
+      style={style}
+      after={input && (
+        <div className="item-after">
+          {input}
+        </div>
+      )}></ListItem>
+  );
+};
+
+
+// Příklady použití
+const DetailItemExample = () => {
+  const [notificationsEnabled, setNotificationsEnabled] = React.useState(false);
+  const [darkModeEnabled, setDarkModeEnabled] = React.useState(true);
+  const [counter, setCounter] = React.useState(5);
+
+  return (
+    <div className="page-content">
+      <div className="block-title">Základní použití</div>
+      <div className="list">
+        <ul>
+          {/* Prostý text */}
+          <DetailItem
+            title="Email"
+            input={<Text>john.doe@email.com</Text>}
+          />
+
+          {/* Barevný text */}
+          <DetailItem
+            title="Status"
+            input={<Text color="#34c759">Aktivní</Text>}
+          />
+
+          {/* Link s href */}
+          <DetailItem
+            title="Webová stránka"
+            input={<LinkButton href="https://example.com">Navštívit</LinkButton>}
+          />
+
+          {/* Link s onClick */}
+          <DetailItem
+            title="Profil"
+            subtitle="Zobrazit detaily profilu"
+            input={<LinkButton onClick={() => alert('Otevírám profil!')}>Upravit</LinkButton>}
+          />
+
+          {/* Switch */}
+          <DetailItem
+            title="Push notifikace"
+            subtitle="Povolit zasílání oznámení"
+            input={
+              <Switch 
+                checked={notificationsEnabled}
+                onChange={setNotificationsEnabled}
+              />
+            }
+          />
+
+          <DetailItem
+            title="Tmavý režim"
+            input={
+              <Switch 
+                checked={darkModeEnabled}
+                onChange={setDarkModeEnabled}
+              />
+            }
+          />
+        </ul>
+      </div>
+
+      <div className="block-title">Vlastní komponenty</div>
+      <div className="list">
+        <ul>
+          {/* Custom - tlačítka pro počítadlo */}
+          <DetailItem
+            title="Počet položek"
+            input={
+              <Custom>
+                <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+                  <button 
+                    className="button button-small button-outline"
+                    onClick={() => setCounter(prev => Math.max(0, prev - 1))}
+                  >
+                    -
+                  </button>
+                  <span style={{ minWidth: '30px', textAlign: 'center', fontWeight: '500' }}>
+                    {counter}
+                  </span>
+                  <button 
+                    className="button button-small button-outline"
+                    onClick={() => setCounter(prev => prev + 1)}
+                  >
+                    +
+                  </button>
+                </div>
+              </Custom>
+            }
+          />
+
+          {/* Custom - badge */}
+          <DetailItem
+            title="Úroveň"
+            input={
+              <Custom>
+                <span className="badge color-blue">Premium</span>
+              </Custom>
+            }
+          />
+
+          {/* Custom - kombinace více prvků */}
+          <DetailItem
+            title="Hodnocení"
+            input={
+              <Custom>
+                <div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
+                  <span>⭐⭐⭐⭐⭐</span>
+                  <Text color="#ff9500">4.8</Text>
+                </div>
+              </Custom>
+            }
+          />
+
+          {/* Bez input - jen název */}
+          <DetailItem
+            title="Název sekce"
+            subtitle="Bez pravé části"
+          />
+        </ul>
+      </div>
+
+      <div className="block-title">Pokročilé použití</div>
+      <div className="list">
+        <ul>
+          {/* Můžeš kombinovat jakékoliv React komponenty */}
+          <DetailItem
+            title="Vlastní input"
+            input={
+              <input 
+                type="text" 
+                placeholder="Zadej hodnotu"
+                style={{ 
+                  border: '1px solid #c7c7cc', 
+                  borderRadius: '4px', 
+                  padding: '4px 8px',
+                  fontSize: '14px'
+                }}
+              />
+            }
+          />
+          
+          <DetailItem
+            title="Select"
+            input={
+              <select style={{ border: 'none', background: 'transparent' }}>
+                <option>Možnost 1</option>
+                <option>Možnost 2</option>
+                <option>Možnost 3</option>
+              </select>
+            }
+          />
+
+          {/* Příklad s custom React komponentou */}
+          <DetailItem
+            title="Slider"
+            input={
+              <Custom>
+                <input
+                  type="range"
+                  min="0"
+                  max="100"
+                  value="50"
+                  style={{ width: '100px' }}
+                />
+              </Custom>
+            }
+          />
+
+          {/* Multiple komponenty najednou */}
+          <DetailItem
+            title="Akce"
+            input={
+              <Custom>
+                <div style={{ display: 'flex', gap: '8px' }}>
+                  <button className="button button-small">Ano</button>
+                  <button className="button button-small button-outline">Ne</button>
+                </div>
+              </Custom>
+            }
+          />
+        </ul>
+      </div>
+    </div>
+  );
+};
+
+// Export všech komponent
+export default DetailItem;
+export { Text, Download, Input, Switch, Custom } from './components';
+export {Link} from 'framework7-react';

package/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@bit.rhplus/ui.f7.detail-item",
+  "version": "0.0.1",
+  "main": "dist/index.js",
+  "componentId": {
+    "name": "ui/f7/detail-item",
+    "version": "0.0.1",
+    "scope": "remote-scope"
+  },
+  "dependencies": {
+    "@bit.rhplus/ui.f7.list-item": "0.0.7"
+  },
+  "devDependencies": {
+    "@teambit/react.react-env": "1.0.132"
+  },
+  "peerDependencies": {
+    "framework7-react": "^8.3.3",
+    "react": "^17.0.0 || ^18.0.0"
+  },
+  "license": "SEE LICENSE IN UNLICENSED",
+  "optionalDependencies": {},
+  "peerDependenciesMeta": {},
+  "private": false,
+  "publishConfig": {
+    "scope": "@bit.rhplus",
+    "registry": "https://registry.npmjs.org/"
+  }
+}

package/style.css

@@ -0,0 +1,62 @@
+/* Framework7 Parallax animation */
+.f7-parallax.popup {
+  --f7-popup-transition-duration: 400ms;
+}
+
+/* F7 Parallax effect - scale and fade */
+.f7-parallax.popup .popup-inner {
+  transition: all var(--f7-popup-transition-duration) cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+.f7-parallax.popup:not(.popup-in) .popup-inner {
+  transform: scale(0.85);
+  opacity: 0;
+}
+
+.f7-parallax.popup.popup-in .popup-inner {
+  transform: scale(1);
+  opacity: 1;
+}
+
+/* Enhanced input styling for fullscreen */
+.f7-parallax .list-input input {
+  font-size: 18px !important;
+  padding: 12px 16px !important;
+}
+
+.f7-parallax .button-large {
+  border-radius: 12px;
+  box-shadow: 0 4px 12px rgba(104, 135, 211, 0.3);
+  transition: all 0.2s ease;
+}
+
+.f7-parallax .button-large:active {
+  transform: translateY(1px);
+  box-shadow: 0 2px 8px rgba(104, 135, 211, 0.4);
+}
+
+/* Smooth navbar animations */
+.f7-parallax .navbar {
+  backdrop-filter: blur(10px);
+  background: rgba(255, 255, 255, 0.95);
+}
+
+.f7-parallax .navbar-inner {
+  animation: slideDownFadeIn 0.4s ease-out;
+}
+
+@keyframes slideDownFadeIn {
+  0% {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Content animation */
+.f7-parallax .page-content {
+  animation: slideUpFadeIn 0.5s ease-out 0.1s both;
+}

package/types/asset.d.ts

@@ -0,0 +1,43 @@
+declare module '*.png' {
+  const value: any;
+  export = value;
+}
+declare module '*.svg' {
+  import type { FunctionComponent, SVGProps } from 'react';
+
+  export const ReactComponent: FunctionComponent<
+    SVGProps<SVGSVGElement> & { title?: string }
+  >;
+  const src: string;
+  export default src;
+}
+
+// @TODO Gilad
+declare module '*.jpg' {
+  const value: any;
+  export = value;
+}
+declare module '*.jpeg' {
+  const value: any;
+  export = value;
+}
+declare module '*.gif' {
+  const value: any;
+  export = value;
+}
+declare module '*.bmp' {
+  const value: any;
+  export = value;
+}
+declare module '*.otf' {
+  const value: any;
+  export = value;
+}
+declare module '*.woff' {
+  const value: any;
+  export = value;
+}
+declare module '*.woff2' {
+  const value: any;
+  export = value;
+}

package/types/style.d.ts

@@ -0,0 +1,42 @@
+declare module '*.module.css' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+declare module '*.module.scss' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+declare module '*.module.sass' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.module.less' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.less' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.css' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.sass' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.scss' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.mdx' {
+  const component: any;
+  export default component;
+}