@pittorica/section-react 0.25.0 → 0.26.1

package/README.md

@@ -11,8 +11,16 @@ npm install @pittorica/section-react
 ## Usage
 
 ```jsx
-import { Section } from '@pittorica/section-react';
-// TODO: Add usage example
+import { Section, Heading, Text } from '@pittorica/react';
+
+function MyPage() {
+  return (
+    <Section size="3">
+      <Heading>About Us</Heading>
+      <Text>Modular and accessible design system.</Text>
+    </Section>
+  );
+}
 ```
 
 ## License

package/dist/Section.d.ts

@@ -6,11 +6,11 @@ export type SectionProps<E extends ElementType = 'section'> = BoxProps<E> & {
      * Maps to responsive padding values in CSS.
      * @default '3'
      */
-    size?: '1' | '2' | '3';
+    size?: '1' | '2' | '3' | '4';
 };
 /**
  * Section component for high-level page layout.
- * Fully polymorphic and agnostic.
+ * Fully polymorphic and agnostic foundation.
  */
 export declare const Section: {
     <E extends ElementType = "section">({ children, as, size, className, ...props }: SectionProps<E>): import("react/jsx-runtime").JSX.Element;

package/dist/Section.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Section.d.ts","sourceRoot":"","sources":["../src/Section.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,OAAO,CAAC;AAIzC,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAE1D,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,WAAW,GAAG,SAAS,IAAI,QAAQ,CAAC,CAAC,CAAC,GAAG;IAC1E;;;;OAIG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;CACxB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,OAAO;KAAI,CAAC,SAAS,WAAW,2DAM1C,YAAY,CAAC,CAAC,CAAC;;CAcjB,CAAC"}
+{"version":3,"file":"Section.d.ts","sourceRoot":"","sources":["../src/Section.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,OAAO,CAAC;AAIzC,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAE1D,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,WAAW,GAAG,SAAS,IAAI,QAAQ,CAAC,CAAC,CAAC,GAAG;IAC1E;;;;OAIG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;CAC9B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,OAAO;KAAI,CAAC,SAAS,WAAW,2DAM1C,YAAY,CAAC,CAAC,CAAC;;CAajB,CAAC"}

package/dist/index.d.ts

@@ -1,3 +1,2 @@
-export type { SectionProps } from './Section.js';
-export { Section } from './Section.js';
+export * from './Section.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AACjD,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}

package/dist/index.js

@@ -1,78 +1,80 @@
 import { jsx as x } from "react/jsx-runtime";
 function T(i) {
-  var p, t, a = "";
+  var p, r, a = "";
   if (typeof i == "string" || typeof i == "number") a += i;
   else if (typeof i == "object") if (Array.isArray(i)) {
     var o = i.length;
-    for (p = 0; p < o; p++) i[p] && (t = T(i[p])) && (a && (a += " "), a += t);
-  } else for (t in i) i[t] && (a && (a += " "), a += t);
+    for (p = 0; p < o; p++) i[p] && (r = T(i[p])) && (a && (a += " "), a += r);
+  } else for (r in i) i[r] && (a && (a += " "), a += r);
   return a;
 }
 function k() {
-  for (var i, p, t = 0, a = "", o = arguments.length; t < o; t++) (i = arguments[t]) && (p = T(i)) && (a && (a += " "), a += p);
+  for (var i, p, r = 0, a = "", o = arguments.length; r < o; r++) (i = arguments[r]) && (p = T(i)) && (a && (a += " "), a += p);
   return a;
 }
 function N(i) {
-  var p, t, a = "";
+  var p, r, a = "";
   if (typeof i == "string" || typeof i == "number") a += i;
   else if (typeof i == "object") if (Array.isArray(i)) {
     var o = i.length;
-    for (p = 0; p < o; p++) i[p] && (t = N(i[p])) && (a && (a += " "), a += t);
-  } else for (t in i) i[t] && (a && (a += " "), a += t);
+    for (p = 0; p < o; p++) i[p] && (r = N(i[p])) && (a && (a += " "), a += r);
+  } else for (r in i) i[r] && (a && (a += " "), a += r);
   return a;
 }
 function z() {
-  for (var i, p, t = 0, a = "", o = arguments.length; t < o; t++) (i = arguments[t]) && (p = N(i)) && (a && (a += " "), a += p);
+  for (var i, p, r = 0, a = "", o = arguments.length; r < o; r++) (i = arguments[r]) && (p = N(i)) && (a && (a += " "), a += p);
   return a;
 }
 const A = ({
   as: i,
   children: p,
-  display: t,
+  display: r,
   m: a,
   mt: o,
   mr: e,
-  mb: m,
-  ml: d,
+  mb: d,
+  ml: m,
   mx: c,
   my: s,
   p: f,
   pt: v,
   pr: l,
-  pb: y,
-  pl: $,
+  pb: u,
+  pl: y,
   px: n,
   py: g,
-  width: h,
-  height: u,
+  width: $,
+  height: h,
   position: b,
   style: B,
   className: L,
   disabled: R,
-  ...j
+  required: j,
+  ...q
 }) => {
-  const w = i || "div", r = {};
-  t && (r.display = t), h && (r.width = h), u && (r.height = u), b && (r.position = b), a && (r.margin = `var(--pittorica-space-${a})`), o && (r.marginTop = `var(--pittorica-space-${o})`), e && (r.marginRight = `var(--pittorica-space-${e})`), m && (r.marginBottom = `var(--pittorica-space-${m})`), d && (r.marginLeft = `var(--pittorica-space-${d})`), c && (r.marginLeft = `var(--pittorica-space-${c})`, r.marginRight = `var(--pittorica-space-${c})`), s && (r.marginTop = `var(--pittorica-space-${s})`, r.marginBottom = `var(--pittorica-space-${s})`), f && (r.padding = `var(--pittorica-space-${f})`), v && (r.paddingTop = `var(--pittorica-space-${v})`), l && (r.paddingRight = `var(--pittorica-space-${l})`), y && (r.paddingBottom = `var(--pittorica-space-${y})`), $ && (r.paddingLeft = `var(--pittorica-space-${$})`), n && (r.paddingLeft = `var(--pittorica-space-${n})`, r.paddingRight = `var(--pittorica-space-${n})`), g && (r.paddingTop = `var(--pittorica-space-${g})`, r.paddingBottom = `var(--pittorica-space-${g})`);
-  const S = {
+  const S = i || "div", t = {};
+  r && (t.display = r), $ && (t.width = $), h && (t.height = h), b && (t.position = b), a && (t.margin = `var(--pittorica-space-${a})`), o && (t.marginTop = `var(--pittorica-space-${o})`), e && (t.marginRight = `var(--pittorica-space-${e})`), d && (t.marginBottom = `var(--pittorica-space-${d})`), m && (t.marginLeft = `var(--pittorica-space-${m})`), c && (t.marginLeft = `var(--pittorica-space-${c})`, t.marginRight = `var(--pittorica-space-${c})`), s && (t.marginTop = `var(--pittorica-space-${s})`, t.marginBottom = `var(--pittorica-space-${s})`), f && (t.padding = `var(--pittorica-space-${f})`), v && (t.paddingTop = `var(--pittorica-space-${v})`), l && (t.paddingRight = `var(--pittorica-space-${l})`), u && (t.paddingBottom = `var(--pittorica-space-${u})`), y && (t.paddingLeft = `var(--pittorica-space-${y})`), n && (t.paddingLeft = `var(--pittorica-space-${n})`, t.paddingRight = `var(--pittorica-space-${n})`), g && (t.paddingTop = `var(--pittorica-space-${g})`, t.paddingBottom = `var(--pittorica-space-${g})`);
+  const w = {
     ...B,
-    ...r
+    ...t
   };
   return /* @__PURE__ */ x(
-    w,
+    S,
     {
       className: z("pittorica-box", L),
-      style: S,
+      style: w,
       disabled: R,
-      ...j,
+      required: j,
+      ...q,
       children: p
     }
   );
 };
 A.displayName = "Box";
-const q = ({
+const C = ({
   children: i,
   as: p,
-  size: t = "3",
+  size: r = "3",
   className: a,
   ...o
 }) => /* @__PURE__ */ x(
@@ -80,12 +82,12 @@ const q = ({
   {
     as: p || "section",
     className: k("pittorica-section", a),
-    "data-size": t,
+    "data-size": r,
     ...o,
     children: i
   }
 );
-q.displayName = "Section";
+C.displayName = "Section";
 export {
-  q as Section
+  C as Section
 };

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@pittorica/section-react",
-  "version": "0.25.0",
+  "version": "0.26.1",
+  "homepage": "https://pittorica.dcdavidev.me",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -10,7 +11,7 @@
   ],
   "dependencies": {
     "clsx": "^2.1.1",
-    "@pittorica/box-react": "0.25.0"
+    "@pittorica/box-react": "0.26.1"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",
@@ -20,11 +21,11 @@
     "@vitejs/plugin-react": "^4.0.0",
     "jsdom": "^22.0.0",
     "typescript": "^5.0.0",
-    "vite": "^5.0.0",
-    "vitest": "^2.1.9",
-    "@pittorica/text-react": "0.25.0",
-    "@pittorica/theme-react": "0.25.0",
-    "pittorica": "0.25.0"
+    "vite": "^6.4.1",
+    "vitest": "^3.2.4",
+    "@pittorica/text-react": "0.26.1",
+    "@pittorica/theme-react": "0.26.1",
+    "pittorica": "0.26.1"
   },
   "peerDependencies": {
     "react": ">=19",
@@ -34,7 +35,7 @@
     "build": "npm run clean && npm run build:js && npm run build:types",
     "build:js": "vite build",
     "build:types": "tsc -p tsconfig.json",
-    "clean": "rm -rf dist",
+    "clean": "rm -rf dist *.tsbuildinfo",
     "test": "vitest run",
     "test:watch": "vitest"
   }

package/dist/Section.stories.d.ts

@@ -1,11 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Section } from './Section';
-declare const meta: Meta<typeof Section>;
-export default meta;
-type Story = StoryObj<typeof Section>;
-export declare const Default: Story;
-export declare const SmallSize: Story;
-export declare const MediumSize: Story;
-export declare const LargeSize: Story;
-export declare const AsDiv: Story;
-//# sourceMappingURL=Section.stories.d.ts.map

package/dist/Section.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Section.stories.d.ts","sourceRoot":"","sources":["../src/Section.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAGpC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,OAAO,CAiB9B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,OAAO,CAAC,CAAC;AAiBtC,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAMvB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAMxB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAMvB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAOnB,CAAC"}

package/dist/Section.test.d.ts

@@ -1,5 +0,0 @@
-/**
- * @vitest-environment jsdom
- */
-import '@testing-library/jest-dom';
-//# sourceMappingURL=Section.test.d.ts.map

package/dist/Section.test.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Section.test.d.ts","sourceRoot":"","sources":["../src/Section.test.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,2BAA2B,CAAC"}