@greghowe79/the-lib 2.5.9 → 2.6.1

package/lib/components/skeletons/SkeletonSuggestion/skeleton_suggestion.qwik.cjs

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@builder.io/qwik/jsx-runtime");
+const qwik = require("@builder.io/qwik");
+const styles = require("./styles.css.qwik.cjs");
+const SkeletonSuggestion = qwik.component$(() => {
+  qwik.useStylesScoped$(styles);
+  return (
+    // <li class="lib-suggestion-item skeleton">
+    //   <div class="lib-thumbnail skeleton-avatar" />
+    //   <div class="skeleton-text">
+    //     <div class="skeleton-line title" />
+    //     <div class="skeleton-line subtitle" />
+    //   </div>
+    // </li>
+    /* @__PURE__ */ jsxRuntime.jsxs("div", {
+      class: "skeleton-item",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", {
+          class: "skeleton-avatar"
+        }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", {
+          class: "skeleton-info",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", {
+              class: "skeleton-line title"
+            }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", {
+              class: "skeleton-line subtitle"
+            })
+          ]
+        })
+      ]
+    })
+  );
+});
+exports.SkeletonSuggestion = SkeletonSuggestion;

package/lib/components/skeletons/SkeletonSuggestion/skeleton_suggestion.qwik.mjs

@@ -0,0 +1,37 @@
+import { jsxs, jsx } from "@builder.io/qwik/jsx-runtime";
+import { component$, useStylesScoped$ } from "@builder.io/qwik";
+import styles from "./styles.css.qwik.mjs";
+const SkeletonSuggestion = component$(() => {
+  useStylesScoped$(styles);
+  return (
+    // <li class="lib-suggestion-item skeleton">
+    //   <div class="lib-thumbnail skeleton-avatar" />
+    //   <div class="skeleton-text">
+    //     <div class="skeleton-line title" />
+    //     <div class="skeleton-line subtitle" />
+    //   </div>
+    // </li>
+    /* @__PURE__ */ jsxs("div", {
+      class: "skeleton-item",
+      children: [
+        /* @__PURE__ */ jsx("div", {
+          class: "skeleton-avatar"
+        }),
+        /* @__PURE__ */ jsxs("div", {
+          class: "skeleton-info",
+          children: [
+            /* @__PURE__ */ jsx("div", {
+              class: "skeleton-line title"
+            }),
+            /* @__PURE__ */ jsx("div", {
+              class: "skeleton-line subtitle"
+            })
+          ]
+        })
+      ]
+    })
+  );
+});
+export {
+  SkeletonSuggestion
+};

package/lib/components/skeletons/SkeletonSuggestion/styles.css.qwik.cjs

@@ -0,0 +1,3 @@
+"use strict";
+const styles = ".skeleton-item {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 0.8rem;\r\n  padding: 0.5rem 1rem;\r\n  border-bottom: 1px solid #e0e0e0;\r\n  height: 3.75rem;\r\n  box-sizing: border-box;\r\n  pointer-events: none;\r\n}\r\n\r\n.skeleton-avatar {\r\n  width: 44px;\r\n  height: 44px;\r\n  border-radius: 6px;\r\n  flex-shrink: 0;\r\n}\r\n\r\n.skeleton-info {\r\n  flex: 1;\r\n  display: flex;\r\n  flex-direction: column;\r\n  justify-content: center;\r\n}\r\n\r\n.skeleton-line {\r\n  height: 12px;\r\n  border-radius: 4px;\r\n  position: relative;\r\n  overflow: hidden;\r\n}\r\n\r\n.skeleton-line.title {\r\n  width: 65%;\r\n  height: 14px;\r\n  margin-bottom: 6px;\r\n}\r\n\r\n.skeleton-line.subtitle {\r\n  width: 85%;\r\n  height: 10px;\r\n}\r\n\r\n/* Effetto movimento (Shimmer) */\r\n.skeleton-avatar,\r\n.skeleton-line {\r\n  background: linear-gradient(90deg, #ececec 25%, #f5f5f5 50%, #ececec 75%);\r\n  background-size: 200% 100%;\r\n  animation: shimmer 1.5s infinite linear;\r\n}\r\n\r\n@keyframes shimmer {\r\n  0% {\r\n    background-position: 200% 0;\r\n  }\r\n  100% {\r\n    background-position: -200% 0;\r\n  }\r\n}\r\n\r\n/* Ottimizzazione Mobile */\r\n@media (max-width: 600px) {\r\n  .skeleton-item {\r\n    height: 4.5rem; /* 72px */\r\n    padding: 0.75rem 1rem;\r\n  }\r\n\r\n  .skeleton-avatar {\r\n    width: 3rem;\r\n    height: 3rem;\r\n  }\r\n}\r\n";
+module.exports = styles;

package/lib/components/skeletons/SkeletonSuggestion/styles.css.qwik.mjs

@@ -0,0 +1,4 @@
+const styles = ".skeleton-item {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 0.8rem;\r\n  padding: 0.5rem 1rem;\r\n  border-bottom: 1px solid #e0e0e0;\r\n  height: 3.75rem;\r\n  box-sizing: border-box;\r\n  pointer-events: none;\r\n}\r\n\r\n.skeleton-avatar {\r\n  width: 44px;\r\n  height: 44px;\r\n  border-radius: 6px;\r\n  flex-shrink: 0;\r\n}\r\n\r\n.skeleton-info {\r\n  flex: 1;\r\n  display: flex;\r\n  flex-direction: column;\r\n  justify-content: center;\r\n}\r\n\r\n.skeleton-line {\r\n  height: 12px;\r\n  border-radius: 4px;\r\n  position: relative;\r\n  overflow: hidden;\r\n}\r\n\r\n.skeleton-line.title {\r\n  width: 65%;\r\n  height: 14px;\r\n  margin-bottom: 6px;\r\n}\r\n\r\n.skeleton-line.subtitle {\r\n  width: 85%;\r\n  height: 10px;\r\n}\r\n\r\n/* Effetto movimento (Shimmer) */\r\n.skeleton-avatar,\r\n.skeleton-line {\r\n  background: linear-gradient(90deg, #ececec 25%, #f5f5f5 50%, #ececec 75%);\r\n  background-size: 200% 100%;\r\n  animation: shimmer 1.5s infinite linear;\r\n}\r\n\r\n@keyframes shimmer {\r\n  0% {\r\n    background-position: 200% 0;\r\n  }\r\n  100% {\r\n    background-position: -200% 0;\r\n  }\r\n}\r\n\r\n/* Ottimizzazione Mobile */\r\n@media (max-width: 600px) {\r\n  .skeleton-item {\r\n    height: 4.5rem; /* 72px */\r\n    padding: 0.75rem 1rem;\r\n  }\r\n\r\n  .skeleton-avatar {\r\n    width: 3rem;\r\n    height: 3rem;\r\n  }\r\n}\r\n";
+export {
+  styles as default
+};

package/lib/index.qwik.cjs

@@ -12,6 +12,7 @@ const onboardingsteps = require("./components/onboarding/onboardingsteps.qwik.cj
 const select = require("./components/select/select.qwik.cjs");
 const text_area = require("./components/text_area/text_area.qwik.cjs");
 const card = require("./components/card/card.qwik.cjs");
+const skeleton_suggestion = require("./components/skeletons/SkeletonSuggestion/skeleton_suggestion.qwik.cjs");
 exports.Logo = logo.Logo;
 exports.Counter = counter.Counter;
 exports.Button = button.Button;
@@ -24,3 +25,4 @@ exports.OnboardingSteps = onboardingsteps.OnboardingSteps;
 exports.Select = select.Select;
 exports.TextArea = text_area.TextArea;
 exports.Card = card.Card;
+exports.SkeletonSuggestion = skeleton_suggestion.SkeletonSuggestion;

package/lib/index.qwik.mjs

@@ -10,6 +10,7 @@ import { OnboardingSteps } from "./components/onboarding/onboardingsteps.qwik.mj
 import { Select } from "./components/select/select.qwik.mjs";
 import { TextArea } from "./components/text_area/text_area.qwik.mjs";
 import { Card } from "./components/card/card.qwik.mjs";
+import { SkeletonSuggestion } from "./components/skeletons/SkeletonSuggestion/skeleton_suggestion.qwik.mjs";
 export {
   Button,
   Card,
@@ -22,5 +23,6 @@ export {
   NavigationMenu,
   OnboardingSteps,
   Select,
+  SkeletonSuggestion,
   TextArea
 };

package/lib-types/components/skeletons/SkeletonSuggestion/skeleton_suggestion.d.ts

@@ -0,0 +1 @@
+export declare const SkeletonSuggestion: import("@builder.io/qwik").Component<unknown>;

package/lib-types/index.d.ts

@@ -11,3 +11,4 @@ export { OnboardingSteps } from './components/onboarding/onboardingsteps';
 export { type SelectProps, Select } from './components/select/select';
 export { TextArea } from './components/text_area/text_area';
 export { Card } from './components/card/card';
+export { SkeletonSuggestion } from './components/skeletons/SkeletonSuggestion/skeleton_suggestion';

package/lib-types/stories/skeleton-suggestion.stories.d.ts

@@ -0,0 +1,5 @@
+import type { Meta, StoryObj } from 'storybook-framework-qwik';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@greghowe79/the-lib",
-  "version": "2.5.9",
+  "version": "2.6.1",
   "description": "Collection of fast components for Qwik",
   "main": "./lib/index.qwik.mjs",
   "qwik": "./lib/index.qwik.mjs",