@spark-ui/divider 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,20 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+# 0.1.0 (2023-10-31)
+
+### Bug Fixes
+
+- **divider:** add data-spark-component attribute ([a53b5c4](https://github.com/adevinta/spark/commit/a53b5c412766c8d1c7345418bea0af1743736c47))
+- **divider:** add default values ([7c8c9ef](https://github.com/adevinta/spark/commit/7c8c9efd559c06955ce84f71497971ddce035b4c))
+- **divider:** change variants directory name ([eb8a141](https://github.com/adevinta/spark/commit/eb8a1412539f7d52981107adfcdea80c1806d693))
+- **divider:** reduce complexity ([d900ca4](https://github.com/adevinta/spark/commit/d900ca4eb80e6ec7c01cd315f8ad7004d9da79f3))
+- **divider:** types ([1124544](https://github.com/adevinta/spark/commit/1124544d503783a9429db2eb909f0f0abbd40c34))
+
+### Features
+
+- **divider:** add intents ([94a67eb](https://github.com/adevinta/spark/commit/94a67ebd384a3fb8e19977ce8ebaffb2a87d5a2f))
+- **divider:** initial aproach ([4dffc8b](https://github.com/adevinta/spark/commit/4dffc8bdabe2bbb3bc128de30fe11f57fae3683f))
+- **divider:** reduces the amount of intents ([eb8b687](https://github.com/adevinta/spark/commit/eb8b687cbfb23caf98d25da96983cd7c156bfbeb))

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) Adevinta ASA.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,13 @@
+# Divider
+> @spark-ui/divider
+
+[![storybook](https://img.shields.io/badge/storybook-black?logo=storybook)](https://sparkui.vercel.app/?path=/docs/components-divider--docs)
+[![documentation](https://img.shields.io/badge/documentation-black?logo=googledocs)](https://sparkui-adv.vercel.app/docs/components/divider)
+[![issue](https://img.shields.io/badge/report%20a%20bug-black?logo=openbugbounty&logoColor=red)](https://github.com/adevinta/spark/issues/new?&projects=4&template=bug-report.yml&assignees=&labels=component,divider)
+[![npm](https://img.shields.io/npm/dt/%40spark-ui/divider?logo=npm&labelColor=black)](https://www.npmjs.com/package/@spark-ui/divider)
+
+
+This package is part of the [`@spark-ui`](https://github.com/adevinta/spark) react-js user interface component library project.
+
+[![Issues open](https://img.shields.io/github/issues-search/adevinta/spark?query=is%3Aopen%20label%3Acomponent%20label%3Adivider&logo=openbugbounty&logoColor=red&label=issues%20open&color=red)](https://github.com/adevinta/spark/issues?q=is%3Aopen+label%3Acomponent+label%3Adivider)
+[![NPM](https://img.shields.io/npm/l/%40spark-ui%2Fdivider)](https://github.com/adevinta/spark/blob/main/packages/components/divider/LICENSE.md)

package/dist/Divider.d.ts

@@ -0,0 +1,26 @@
+import { HTMLAttributes, PropsWithRef, ReactElement } from 'react';
+import { type DividerStylesProps } from './Divider.styles';
+export interface DividerProps extends PropsWithRef<HTMLAttributes<HTMLDivElement>>, Omit<DividerStylesProps, 'isEmpty'> {
+    /**
+     * Change the component to the HTML tag or custom component of the only child.
+     */
+    asChild?: boolean;
+    children?: ReactElement;
+    /**
+     * The orientation of the inner content.
+     */
+    alignment?: 'start' | 'end' | 'center';
+    /**
+     * The orientation of the separator.
+     */
+    orientation?: 'vertical' | 'horizontal';
+    /**
+     * When true, signifies that it is purely visual, carries no semantic meaning, and ensures it is not present in the accessibility tree.
+     */
+    isDecorative?: boolean;
+    /**
+     * Color scheme of the divider.
+     */
+    intent?: 'outline' | 'current';
+}
+export declare const Divider: import("react").ForwardRefExoticComponent<DividerProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/Divider.styles.d.ts

@@ -0,0 +1,8 @@
+import { VariantProps } from 'class-variance-authority';
+export declare const dividerStyles: (props?: ({
+    isEmpty?: boolean | null | undefined;
+    orientation?: "vertical" | "horizontal" | null | undefined;
+    alignment?: "start" | "end" | "center" | null | undefined;
+    intent?: "current" | "outline" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export type DividerStylesProps = VariantProps<typeof dividerStyles>;

package/dist/DividerContent.d.ts

@@ -0,0 +1,9 @@
+import { HTMLAttributes, PropsWithRef, ReactNode } from 'react';
+export interface DividerContentProps extends PropsWithRef<HTMLAttributes<HTMLSpanElement>> {
+    /**
+     * Change the component to the HTML tag or custom component of the only child.
+     */
+    asChild?: boolean;
+    children?: ReactNode;
+}
+export declare const DividerContent: import("react").ForwardRefExoticComponent<DividerContentProps & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+import { type DividerProps } from './Divider';
+import { DividerContent } from './DividerContent';
+export { type DividerContentProps } from './DividerContent';
+export declare const Divider: FC<DividerProps> & {
+    Content: typeof DividerContent;
+};

package/dist/index.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react"),g=require("@radix-ui/react-separator"),l=require("class-variance-authority"),e=require("@spark-ui/internal-utils"),u=[{intent:"current",isEmpty:!0,class:e.tw(["border-current"])},{intent:"current",isEmpty:!1,class:e.tw(["before:border-current after:border-current"])},{intent:"outline",isEmpty:!0,class:e.tw(["border-outline"])},{intent:"outline",isEmpty:!1,class:e.tw(["before:border-outline after:border-outline"])}],p=l.cva(["overflow-hidden"],{variants:{isEmpty:{true:["border-solid"],false:["inline-flex items-center","after:border-solid before:border-solid"]},orientation:{vertical:["w-fit inline-flex"],horizontal:["w-full"]},alignment:{start:[],end:[],center:[]},intent:{current:[],outline:[]}},defaultVariants:{orientation:"horizontal",alignment:"center",intent:"outline"},compoundVariants:[{isEmpty:!0,orientation:"horizontal",class:e.tw(["my-lg border-t-sm"])},{isEmpty:!0,orientation:"vertical",class:e.tw(["mx-lg min-h-sz-24 border-l-sm"])},{isEmpty:!1,orientation:"horizontal",class:e.tw(["flex-row my-sm grow-0","before:border-t-sm","after:border-t-sm","[&>*]:px-lg"])},{isEmpty:!1,orientation:"vertical",class:e.tw(["flex-col mx-sm","before:border-l-sm","after:border-l-sm","[&>*]:py-lg"])},{isEmpty:!1,orientation:"horizontal",alignment:"end",class:e.tw(["after:w-sz-40 before:grow after:grow-0"])},{isEmpty:!1,orientation:"horizontal",alignment:"start",class:e.tw(["before:w-sz-40 before:grow-0 after:grow"])},{isEmpty:!1,orientation:"horizontal",alignment:"center",class:e.tw(["justify-center before:grow after:grow"])},{isEmpty:!1,orientation:"vertical",alignment:"end",class:e.tw(["after:h-sz-40 before:grow after:grow-0 before:min-h-sz-40"])},{isEmpty:!1,orientation:"vertical",alignment:"start",class:e.tw(["before:h-sz-40 before:grow-0 after:grow after:min-h-sz-40"])},{isEmpty:!1,orientation:"vertical",alignment:"center",class:e.tw(["justify-center before:grow after:grow before:min-h-sz-40 after:min-h-sz-40"])},...u]}),y=r.forwardRef(({asChild:t,className:n,isDecorative:i=!1,children:o,orientation:s="horizontal",alignment:m="center",intent:f="outline",...d},w)=>{const b=t?!o?.props?.children:!o;return r.createElement(g.Root,{"data-spark-component":"divider",asChild:t,className:l.cx(p({isEmpty:b,orientation:s,alignment:m,intent:f}),n),orientation:s,ref:w,decorative:i,...d},o)}),c=r.forwardRef(({children:t,...n},i)=>t?r.createElement("span",{ref:i,...n},t):null);c.displayName="Divider.Content";const a=Object.assign(y,{Content:c});a.displayName="Divider",a.Content.displayName="Divider.Content",exports.Divider=a;

package/dist/index.mjs

@@ -0,0 +1,14 @@
+import s, { forwardRef as l } from "react";
+import { Root as g } from "@radix-ui/react-separator";
+import { cva as y, cx as u } from "class-variance-authority";
+import { tw as e } from "@spark-ui/internal-utils";
+const h = [{ intent: "current", isEmpty: !0, class: e(["border-current"]) }, { intent: "current", isEmpty: !1, class: e(["before:border-current after:border-current"]) }, { intent: "outline", isEmpty: !0, class: e(["border-outline"]) }, { intent: "outline", isEmpty: !1, class: e(["before:border-outline after:border-outline"]) }], w = y(["overflow-hidden"], { variants: { isEmpty: { true: ["border-solid"], false: ["inline-flex items-center", "after:border-solid before:border-solid"] }, orientation: { vertical: ["w-fit inline-flex"], horizontal: ["w-full"] }, alignment: { start: [], end: [], center: [] }, intent: { current: [], outline: [] } }, defaultVariants: { orientation: "horizontal", alignment: "center", intent: "outline" }, compoundVariants: [{ isEmpty: !0, orientation: "horizontal", class: e(["my-lg border-t-sm"]) }, { isEmpty: !0, orientation: "vertical", class: e(["mx-lg min-h-sz-24 border-l-sm"]) }, { isEmpty: !1, orientation: "horizontal", class: e(["flex-row my-sm grow-0", "before:border-t-sm", "after:border-t-sm", "[&>*]:px-lg"]) }, { isEmpty: !1, orientation: "vertical", class: e(["flex-col mx-sm", "before:border-l-sm", "after:border-l-sm", "[&>*]:py-lg"]) }, { isEmpty: !1, orientation: "horizontal", alignment: "end", class: e(["after:w-sz-40 before:grow after:grow-0"]) }, { isEmpty: !1, orientation: "horizontal", alignment: "start", class: e(["before:w-sz-40 before:grow-0 after:grow"]) }, { isEmpty: !1, orientation: "horizontal", alignment: "center", class: e(["justify-center before:grow after:grow"]) }, { isEmpty: !1, orientation: "vertical", alignment: "end", class: e(["after:h-sz-40 before:grow after:grow-0 before:min-h-sz-40"]) }, { isEmpty: !1, orientation: "vertical", alignment: "start", class: e(["before:h-sz-40 before:grow-0 after:grow after:min-h-sz-40"]) }, { isEmpty: !1, orientation: "vertical", alignment: "center", class: e(["justify-center before:grow after:grow before:min-h-sz-40 after:min-h-sz-40"]) }, ...h] }), E = l(({ asChild: t, className: r, isDecorative: n = !1, children: i, orientation: o = "horizontal", alignment: c = "center", intent: f = "outline", ...d }, p) => {
+  const b = t ? !i?.props?.children : !i;
+  return s.createElement(g, { "data-spark-component": "divider", asChild: t, className: u(w({ isEmpty: b, orientation: o, alignment: c, intent: f }), r), orientation: o, ref: p, decorative: n, ...d }, i);
+}), m = l(({ children: t, ...r }, n) => t ? s.createElement("span", { ref: n, ...r }, t) : null);
+m.displayName = "Divider.Content";
+const a = Object.assign(E, { Content: m });
+a.displayName = "Divider", a.Content.displayName = "Divider.Content";
+export {
+  a as Divider
+};

package/dist/public/docgen.json

@@ -0,0 +1,162 @@
+{
+  "Divider": {
+    "tags": {},
+    "description": "",
+    "displayName": "Divider",
+    "methods": [],
+    "props": {
+      "asChild": {
+        "defaultValue": null,
+        "description": "Change the component to the HTML tag or custom component of the only child.",
+        "name": "asChild",
+        "parent": {
+          "fileName": "divider/src/Divider.tsx",
+          "name": "DividerProps"
+        },
+        "declarations": [
+          {
+            "fileName": "divider/src/Divider.tsx",
+            "name": "DividerProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "alignment": {
+        "defaultValue": null,
+        "description": "The orientation of the inner content.",
+        "name": "alignment",
+        "parent": {
+          "fileName": "divider/src/Divider.tsx",
+          "name": "DividerProps"
+        },
+        "declarations": [
+          {
+            "fileName": "divider/src/Divider.tsx",
+            "name": "DividerProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "enum",
+          "raw": "\"start\" | \"end\" | \"center\"",
+          "value": [
+            {
+              "value": "\"start\""
+            },
+            {
+              "value": "\"end\""
+            },
+            {
+              "value": "\"center\""
+            }
+          ]
+        }
+      },
+      "orientation": {
+        "defaultValue": null,
+        "description": "The orientation of the separator.",
+        "name": "orientation",
+        "parent": {
+          "fileName": "divider/src/Divider.tsx",
+          "name": "DividerProps"
+        },
+        "declarations": [
+          {
+            "fileName": "divider/src/Divider.tsx",
+            "name": "DividerProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "enum",
+          "raw": "\"vertical\" | \"horizontal\"",
+          "value": [
+            {
+              "value": "\"vertical\""
+            },
+            {
+              "value": "\"horizontal\""
+            }
+          ]
+        }
+      },
+      "isDecorative": {
+        "defaultValue": null,
+        "description": "When true, signifies that it is purely visual, carries no semantic meaning, and ensures it is not present in the accessibility tree.",
+        "name": "isDecorative",
+        "parent": {
+          "fileName": "divider/src/Divider.tsx",
+          "name": "DividerProps"
+        },
+        "declarations": [
+          {
+            "fileName": "divider/src/Divider.tsx",
+            "name": "DividerProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "intent": {
+        "defaultValue": null,
+        "description": "Color scheme of the divider.",
+        "name": "intent",
+        "parent": {
+          "fileName": "divider/src/Divider.tsx",
+          "name": "DividerProps"
+        },
+        "declarations": [
+          {
+            "fileName": "divider/src/Divider.tsx",
+            "name": "DividerProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "enum",
+          "raw": "\"current\" | \"outline\"",
+          "value": [
+            {
+              "value": "\"current\""
+            },
+            {
+              "value": "\"outline\""
+            }
+          ]
+        }
+      }
+    }
+  },
+  "Divider.Content": {
+    "tags": {},
+    "description": "",
+    "displayName": "Divider.Content",
+    "methods": [],
+    "props": {
+      "asChild": {
+        "defaultValue": null,
+        "description": "Change the component to the HTML tag or custom component of the only child.",
+        "name": "asChild",
+        "parent": {
+          "fileName": "divider/src/DividerContent.tsx",
+          "name": "DividerContentProps"
+        },
+        "declarations": [
+          {
+            "fileName": "divider/src/DividerContent.tsx",
+            "name": "DividerContentProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      }
+    }
+  }
+}

package/dist/variants/intents.d.ts

@@ -0,0 +1,17 @@
+export declare const intentVariants: readonly [{
+    readonly intent: "current";
+    readonly isEmpty: true;
+    readonly class: string[];
+}, {
+    readonly intent: "current";
+    readonly isEmpty: false;
+    readonly class: string[];
+}, {
+    readonly intent: "outline";
+    readonly isEmpty: true;
+    readonly class: string[];
+}, {
+    readonly intent: "outline";
+    readonly isEmpty: false;
+    readonly class: string[];
+}];

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@spark-ui/divider",
+  "version": "0.1.0",
+  "description": "A separator between two elements, usually consisting of a horizontal line.",
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "@spark-ui",
+    "react",
+    "component",
+    "accessible",
+    "accessibility",
+    "wai-aria",
+    "aria",
+    "a11y",
+    "divider"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "build": "vite build"
+  },
+  "dependencies": {
+    "@radix-ui/react-separator": "1.0.3",
+    "@spark-ui/internal-utils": "^2.2.0"
+  },
+  "peerDependencies": {
+    "react": "^16.8 || ^17.0 || ^18.0",
+    "react-dom": "^16.8 || ^17.0 || ^18.0",
+    "tailwindcss": "^3.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/adevinta/spark.git",
+    "directory": "packages/components/divider"
+  },
+  "config": {
+    "title": "divider",
+    "category": "components"
+  },
+  "bugs": {
+    "url": "https://github.com/adevinta/spark/issues?q=is%3Aopen+label%3Autility+label%3Adivider"
+  },
+  "homepage": "https://sparkui.vercel.app",
+  "license": "MIT",
+  "gitHead": "783a9fa51ba849ce0faee2552aa826e004e8ff33"
+}

package/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "../../../tsconfig.json",
+  "include": ["src/**/*", "../../../global.d.ts"]
+}

package/vite.config.ts

@@ -0,0 +1,6 @@
+import path from 'path'
+import { getComponentConfiguration } from '../../../config/index'
+
+const { name } = require(path.resolve(__dirname, 'package.json'))
+
+export default getComponentConfiguration(process.cwd(), name)